/* ==========================================================================
   Termite Inspections Cost — template styles
   Section: "Termite Inspection Warranty" (Figma node 446:3310)
   All visual values taken directly from Figma. Scoped under .ti-warranty.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,800;1,900&display=swap');


.rat-box{
    @media (max-width:560px){
        visibility: hidden !important;
    }
}

/* Section wrapper -------------------------------------------------------- */
.ti-warranty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    font-family: 'Inter', sans-serif;
    padding: 80px 0; /* breathing room around the standalone section (not in Figma frame) */
}

/* .termite-container{
    padding:0px 20px;
} */

/* Header: heading + intro paragraph ------------------------------------- */
.ti-warranty__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    width: 100%;
    max-width: 985.91px;
    text-align: center;
}

.ti-warranty__title {
    margin: 0;
    max-width: 854px;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: #282c3a;
}

.ti-warranty__intro {
    margin: 0;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    line-height: 1.4;
    color: #5e6270;
}

/* Cards row -------------------------------------------------------------- */
.ti-warranty__cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
    width: 100%;
}

.ti-warranty__card {
    flex: 1 1 0;
    min-width: 300px;
    height: 342px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 60px 40px;
    background: #e9edf3;
    border-radius: 10px;
    overflow: hidden;
}

.ti-warranty__card-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    line-height: 0;
}

.ti-warranty__card-icon svg {
    display: block;
    width: 80px;
    height: 80px;
}

.ti-warranty__card-title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 24px;
    line-height: 1;
    color: #282c3a;
    text-align: center;
}

.ti-warranty__card-text {
    margin: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.48px;
    color: #282c3a;
    text-align: center;
}

/* Footer: closing line + buttons ---------------------------------------- */
.ti-warranty__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.ti-warranty__footer-text {
    margin: 0;
    max-width: 985.91px;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    line-height: 1.4;
    color: #5e6270;
    text-align: center;
}

.ti-warranty__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.ti-warranty__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 55px;
    padding: 0 20px;
    border-radius: 40px;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
}

.ti-warranty__btn:hover,
.ti-warranty__btn:focus {
    color: #fff;
    text-decoration: none;
}

.ti-warranty__btn--book { background: #e93041; }
.ti-warranty__btn--call { background: #2468b2; }

.ti-warranty__btn-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    line-height: 0;
}

.ti-warranty__btn-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Responsive — the Figma frame is desktop-only, so these values scale
   proportionally on the theme's Bootstrap 4 breakpoints
   (xl 1200 / lg 992 / md 768 / sm 576). ----------------------------------- */

/* < xl (1200px) */
@media (max-width: 1199.98px) {
    .ti-warranty { gap: 64px; }
    .ti-warranty__title { font-size: 56px; }
}

/* < lg (992px) — cards stay side by side, type tightens */
@media (max-width: 991.98px) {
    .ti-warranty { gap: 50px; padding: 64px 0; }
    .ti-warranty__title { font-size: 44px; }
    .ti-warranty__card { padding: 48px 32px; gap: 24px; }
    .ti-warranty__card-title { font-size: 22px; }
    .ti-warranty__card-text { font-size: 20px; }
}

/* < md (768px) — cards stack to full width */
@media (max-width: 767.98px) {
    .ti-warranty { gap: 40px; padding: 48px 0; }
    .ti-warranty__header { gap: 32px; }
    .ti-warranty__title { font-size: 36px; }
    .ti-warranty__intro,
    .ti-warranty__footer-text { font-size: 16px; }
    .ti-warranty__cards { gap: 16px; }
    .ti-warranty__card {
        flex: 1 1 100%;
        min-width: 0;
        height: auto;
        padding: 40px 24px;
    }
    .ti-warranty__card-icon,
    .ti-warranty__card-icon svg { width: 64px; height: 64px; }
    .ti-warranty__card-title { font-size: 20px; }
    .ti-warranty__card-text { font-size: 18px; }
}

/* < sm (576px) — buttons go full width for easier tapping */
@media (max-width: 575.98px) {
    .ti-warranty__title { font-size: 30px; }
    .ti-warranty__footer { gap: 24px; }
    .ti-warranty__buttons { width: 100%; }
    .ti-warranty__btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   Shared pill buttons (reused across sections on this template)
   ========================================================================== */
.ti-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 55px;
    padding: 0 20px;
    border-radius: 40px;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    text-decoration: none;
}

.ti-btn:hover,
.ti-btn:focus {
    color: #fff;
    text-decoration: none;
}

.ti-btn--book { background: #e93041; }
.ti-btn--call { background: #2468b2; }

.ti-btn-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    line-height: 0;
}

.ti-btn-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}


/* ==========================================================================
   Section: "Key Indicators Your Home May Have Termites" (Figma 446:2671)
   Full-width banded section. All visual values taken directly from Figma.
   ========================================================================== */
.ti-signs {
    background: #e9edf3;
    padding: 106px 0;
    font-family: 'Inter', sans-serif;
}

.ti-signs__inner {
    max-width: 1560px; /* 1920 frame minus 180px side gutters */
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
}

/* Top row: heading + intro (left) and photo (right) ---------------------- */
.ti-signs__intro {
    display: flex;
    align-items: center;
    gap: 120px;
    width: 100%;
    max-width: 1360px; /* narrower than the cards block, centered */
}

.ti-signs__intro-text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
}

.ti-signs__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: #282c3a;
}

.ti-signs__intro-copy {
    margin: 0;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #5e6270;
}

.ti-signs__media {
    flex: 0 0 648px;
    width: 648px;
    max-width: 100%;
}

.ti-signs__media img,
.ti-signs__media picture {
    display: block;
    width: 100%;
    height: auto;
}

/* Card grid -------------------------------------------------------------- */
.ti-signs__cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.ti-signs__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
    width: 100%;
}

.ti-signs__card {
    flex: 1 1 250px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 60px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    color: #282c3a;
    @media (max-width: 1200px) {
        padding:30px 20px;
    }
}

.ti-signs__card-title {
    margin: 0;
    width: 100%;
    font-weight: 900;
    font-style: italic;
    font-size: 24px;
    line-height: 1;
    color: #282c3a;
}

.ti-signs__card-text {
    margin: 0;
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.21;
    color: #282c3a;
}

.ti-signs__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 1199.98px) {
    .ti-signs__title { font-size: 56px; }
    .ti-signs__intro { gap: 60px; }
}

@media (max-width: 991.98px) {
    .ti-signs { padding: 72px 0; }
    .ti-signs__inner { gap: 60px; }
    .ti-signs__intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }
    .ti-signs__media {
        flex: none;
        width: 100%;
        max-width: 648px;
        height: auto;
    }
    .ti-signs__media img { height: auto; }
    .ti-signs__title { font-size: 44px; }
    .ti-signs__card { padding: 40px; }
}

@media (max-width: 767.98px) {
    .ti-signs { padding: 56px 0; }
    .ti-signs__intro-text { gap: 32px; }
    .ti-signs__title { font-size: 36px; }
    .ti-signs__card-title { font-size: 22px; }
}

@media (max-width: 575.98px) {
    .ti-signs__title { font-size: 30px; }
    .ti-signs__buttons { width: 100%; }
    .ti-signs .ti-btn { flex: 1 1 100%; justify-content: center; }
}


/* ==========================================================================
   Section: "How Our Termite Inspection Works" (Figma 446:2767)
   Two coloured panels, each with a photo (diagonal cut) + checkmark list.
   ========================================================================== */
.ti-process {
    max-width: 1560px; /* 1920 frame minus 180px side gutters */
    margin: 0 auto;
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 100px;
}

.ti-process__header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    color: #282c3a;
}

.ti-process__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: #282c3a;
}

.ti-process__subtitle {
    margin: 0;
    font-weight: 800;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: #282c3a;
}

/* Panels ----------------------------------------------------------------- */
.ti-process__panels {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: 100%;
}

.ti-process__panel {
    /* flex: 1 1 0; */
    /* min-width: 0; */
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    /* overflow: hidden; */
}

.ti-process__panel--dark { background: #282c3a; }
.ti-process__panel--red  { background: #be1e2d; }

.ti-process__media {
    width: 100%;
    line-height: 0;
}

.ti-process__media img,
.ti-process__media picture {
    display: block;
    width: 100%;
    height: auto;
}

.ti-process__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 40px 40px;
}

.ti-process__heading {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 36px;
    line-height: 1;
    color: #fff;
}

.ti-process__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.ti-process__item {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 70px;
    padding: 14px 40px;
    background: rgba(233, 237, 243, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.ti-process__item-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    line-height: 0;
}

.ti-process__item-icon svg {
    display: block;
    width: 30px;
    height: 30px;
}

.ti-process__item-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
    font-style: italic;
    font-weight: 500;
    color: #fff;
}

.ti-process__item-text b {
    font-weight: 900;
    font-style: italic;
}

/* Left panel descriptions are Medium Italic, right panel Semi Bold Italic */
.ti-process__panel--dark .ti-process__item-text span { font-weight: 500; }
.ti-process__panel--red  .ti-process__item-text span { font-weight: 600; }

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 1199.98px) {
    .ti-process__title { font-size: 56px; }
}

@media (max-width: 991.98px) {
    .ti-process { gap: 60px; }
    .ti-process__panels { flex-direction: column; }
    .ti-process__title { font-size: 44px; }
    .ti-process__heading { font-size: 30px; }
}

@media (max-width: 767.98px) {
    .ti-process { padding: 56px 16px; gap: 48px; }
    .ti-process__title { font-size: 32px; }
    .ti-process__subtitle { font-size: 18px; }
    .ti-process__content { padding: 0 24px 24px; gap: 24px; }
    .ti-process__heading { font-size: 26px; }
    .ti-process__item { padding: 14px 20px; }
}


/* ==========================================================================
   Section: "We Will Give a Detailed Report with Photos" (Figma 446:2899)
   Centered header + three grey feature cards (same card style as warranty).
   ========================================================================== */
.ti-report {
    max-width: 1560px; /* 1920 frame minus 180px side gutters */
    margin: 0 auto;
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
}

.ti-report__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    width: 100%;
    max-width: 985.91px;
    text-align: center;
}

.ti-report__title {
    margin: 0;
    max-width: 854px;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: #282c3a;
}

.ti-report__intro {
    margin: 0;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #5e6270;
}

.ti-report__cards {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
    width: 100%;
}

.ti-report__card {
    flex: 1 1 250px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 60px 40px;
    background: #e9edf3;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
}

.ti-report__card-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    line-height: 0;
}

.ti-report__card-icon svg {
    display: block;
    width: 80px;
    height: 80px;
}

.ti-report__card-title {
    margin: 0;
    width: 100%;
    font-weight: 900;
    font-style: italic;
    font-size: 24px;
    line-height: 1;
    color: #282c3a;
}

.ti-report__card-text {
    margin: 0;
    width: 100%;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.48px;
    color: #282c3a;
}

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 1199.98px) {
    .ti-report__title { font-size: 56px; }
}

@media (max-width: 991.98px) {
    .ti-report { gap: 60px; }
    .ti-report__title { font-size: 44px; }
    .ti-report__card { padding: 48px 32px; }
    .ti-report__card-title,
    .ti-report__card-text { font-size: 20px; }
}

@media (max-width: 767.98px) {
    .ti-report { padding: 56px 16px; gap: 48px; }
    .ti-report__title { font-size: 36px; }
    .ti-report__intro { font-size: 16px; }
    .ti-report__card {
        flex: 1 1 100%;
        padding: 40px 24px;
    }
    .ti-report__card-icon,
    .ti-report__card-icon svg { width: 64px; height: 64px; }
    .ti-report__card-title { font-size: 20px; }
    .ti-report__card-text { font-size: 18px; }
}


/* ==========================================================================
   Section: "What Is Included in a Termite Inspection Report?" (Figma 527:341)
   Left heading/intro + 6 numbered cards rendered as a Swiper slider.
   ========================================================================== */
.ti-included {
    max-width: 1560px; /* 1920 frame minus 180px side gutters */
    margin: 0 auto;
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 21px;
}

.ti-included__intro {
    flex: 0 0 425px;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.ti-included__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 48px;
    line-height: 1;
    color: #282c3a;
}

.ti-included__intro-copy {
    margin: 0;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #5e6270;
}

/* Swiper ----------------------------------------------------------------- */
.ti-included__slider {
    flex: 1 1 0;
    min-width: 0; /* allow the swiper to shrink inside the flex row */
    width: 100%;
}

.ti-included__slider .swiper-slide {
    width: 173.772px;
    height: auto;
}

.ti-included__card {
    box-sizing: border-box;
    width: 173.772px;
    height: 334.04px;
    padding: 35.07px 14px 0;
    background: #e9edf3;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom:12px;
}

.ti-included__num {
    flex: 0 0 auto;
    width: 49.732px;
    height: 49.732px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.15;
    color: #282c3a;
}

.ti-included__card-title {
    /* Fixed band so every card's body starts on the same line (matches Figma). */
    height: 109.49px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-style: italic;
    font-size: 24px;
    line-height: 1;
    color: #282c3a;
}

.ti-included__card-text {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.15;
    color: #282c3a;
}

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 991.98px) {
    .ti-included {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }
    .ti-included__intro { flex: 0 0 auto; }
    .ti-included__title { font-size: 40px; }
}

@media (max-width: 767.98px) {
    .ti-included { padding: 56px 16px; gap: 32px; }
    .ti-included__title { font-size: 32px; }
    .ti-included__intro-copy { font-size: 16px; }
}


/* ==========================================================================
   Section: "Our Termite Treatment Solutions" (Figma 446:3041)
   Banded section: heading, 2 photo cards, 3 white icon cards, buttons.
   ========================================================================== */
.ti-solutions {
    background: #e9edf3;
    padding: 160px 0;
    font-family: 'Inter', sans-serif;
}

.ti-solutions__inner {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
}

.ti-solutions__title {
    margin: 0;
    width: 100%;
    max-width: 1360px;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: #282c3a;
    text-align: center;
}

/* Two photo feature cards ------------------------------------------------ */
.ti-solutions__features {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.ti-solutions__feature {
    flex: 1 1 320px;
    min-width: 0;
    height: 457px;
    display: flex;
    align-items: flex-end;
    gap: 40px;
    padding: 60px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #282828;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ti-solutions__feature--control  { background-image: url(../img/termite-inspections-cost/solutions-termite-control.png); }
.ti-solutions__feature--whiteant { background-image: url(../img/termite-inspections-cost/solutions-white-ant.png); }

.ti-solutions__feature-title {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 36px;
    line-height: 1;
    color: #fff;
}

/* Middle block: lead text + 3 white cards + closing text ----------------- */
.ti-solutions__middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    width: 100%;
}

.ti-solutions__lead {
    margin: 0;
    width: 100%;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #5e6270;
    text-align: center;
}

.ti-solutions__list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.ti-solutions__item {
    flex: 1 1 280px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 40px 60px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.ti-solutions__item-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    line-height: 0;
}

.ti-solutions__item-icon svg {
    display: block;
    width: 80px;
    height: 80px;
}

.ti-solutions__item-title {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 24px;
    line-height: 1;
    color: #282c3a;
}

.ti-solutions__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 1199.98px) {
    .ti-solutions__title { font-size: 56px; }
}

@media (max-width: 991.98px) {
    .ti-solutions { padding: 96px 0; }
    .ti-solutions__inner { gap: 60px; }
    .ti-solutions__title { font-size: 44px; }
    .ti-solutions__feature { flex: 1 1 100%; }
    .ti-solutions__item { flex: 1 1 100%; }
}

@media (max-width: 767.98px) {
    .ti-solutions { padding: 64px 0; }
    .ti-solutions__title { font-size: 32px; }
    .ti-solutions__lead { font-size: 16px; }
    .ti-solutions__feature { height: 380px; padding: 32px; gap: 20px; }
    .ti-solutions__feature-title { font-size: 28px; }
    .ti-solutions__item { padding: 24px; gap: 20px; }
    .ti-solutions__item-icon,
    .ti-solutions__item-icon svg { width: 60px; height: 60px; }
    .ti-solutions__item-title { font-size: 20px; }
}

@media (max-width:500px){
    .ti-solutions__feature {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ==========================================================================
   Section: "Reliable Termite Inspection You Can Rely On" (Figma 446:3040)
   Dark rounded card: photo (+ Google rating badge) left, text right.
   ========================================================================== */
.ti-reliable-wrap {
    max-width: 1560px;
    margin: 0 auto;
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
}

.ti-reliable {
    background: #282c3a;
    border-radius: 24px;
    padding: 100px 110px;
}

.ti-reliable__row {
    display: flex;
    align-items: center;
    gap: 100px;
}

.ti-reliable__media {
    position: relative;
    flex: 692.697 1 0;
    min-width: 0;
    /* aspect-ratio: 692.697 / 709.646; */
}

.ti-reliable__media picture,
.ti-reliable__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

.ti-reliable__text {
    flex: 547.302 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
}

.ti-reliable__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 50px;
    line-height: 1;
    color: #fff;
}

.ti-reliable__copy {
    margin: 0;
    font-weight: 400;
    font-size: 16.7px;
    line-height: 28.8px;
    color: #fff;
}

.ti-reliable__copy p { margin: 0 0 28.8px; }
.ti-reliable__copy p:last-child { margin-bottom: 0; }

/* Google rating badge (overlaps the photo) ------------------------------- */
.ti-reliable__badge {
    position: absolute;
    left: 198px;
    bottom: -39px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    border: 1px solid #e93041;
    border-radius: 10px;
    background: radial-gradient(ellipse at center, #2468b2 0%, #1a4a7f 50%, #153b66 75%, #0f2c4c 100%);
}

.ti-reliable__badge-g {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: url(../img/termite-inspections-cost/google-g.png) center / contain no-repeat;
}

.ti-reliable__badge-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ti-reliable__badge-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ti-reliable__badge-rating {
    font-weight: 900;
    font-style: italic;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.ti-reliable__badge-stars {
    flex-shrink: 0;
    width: 117px;
    height: 21px;
    line-height: 0;
}

.ti-reliable__badge-stars svg { display: block; width: 117px; height: 21px; }

.ti-reliable__badge-reviews {
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 991.98px) {
    .ti-reliable { padding: 56px; }
    .ti-reliable__row { flex-direction: column; align-items: stretch; gap: 80px; }
    .ti-reliable__media { flex: none; width: 100%; }
    .ti-reliable__text { flex: none; }
    .ti-reliable__title { font-size: 40px; }
    .ti-reliable__badge { left: 50%; transform:translateX(-50%); bottom: -32px; }
}

@media (max-width: 767.98px) {
    .ti-reliable-wrap { padding: 48px 16px; }
    .ti-reliable { padding: 32px 24px; border-radius: 16px; }
    .ti-reliable__title { font-size: 32px; }
    .ti-reliable__row { gap: 48px; }
    .ti-reliable__badge {
        position: static;
        margin-top: 16px;
        align-self: flex-start;
        transform:translateX(0%); 
    }
}


/* ==========================================================================
   Section: "Our Annual Termite Inspection..." (Figma 446:3120)
   Light rounded card: text (+ 3 white feature rows) left, photo + badge right.
   The 3 rows are stacked on desktop and a 1-per-view Swiper carousel on mobile.
   ========================================================================== */
.ti-annual-wrap {
    max-width: 1560px;
    margin: 0 auto;
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
}

.ti-annual {
    background: #e9edf3;
    border-radius: 24px;
    padding: 100px 110px;
}

.ti-annual__row {
    display: flex;
    align-items: center;
    gap: 100px;
}

.ti-annual__text {
    flex: 547.302 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
}

.ti-annual__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 50px;
    line-height: 1;
    color: #282c3a;
}

.ti-annual__intro,
.ti-annual__closing {
    margin: 0;
    font-weight: 400;
    font-size: 16.7px;
    line-height: 28.8px;
    color: #282c3a;
}

.ti-annual__media {
    position: relative;
    flex: 692.697 1 0;
    min-width: 0;
    /* aspect-ratio: 692.697 / 843.089; */
}

.ti-annual__media picture,
.ti-annual__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

/* Feature rows ----------------------------------------------------------- */
.ti-annual__features {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ti-annual__feature {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.ti-annual__feature-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    line-height: 0;
}
.ti-annual__feature-icon svg { display: block; width: 40px; height: 40px; }

.ti-annual__feature-body {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
}

.ti-annual__feature-title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 1;
    color: #282c3a;
}

.ti-annual__feature-text {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: #282c3a;
}

/* Google rating badge ---------------------------------------------------- */
.ti-annual__badge {
    position: absolute;
    left: 198px;
    bottom: -31px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    border: 1px solid #e93041;
    border-radius: 10px;
    background: radial-gradient(ellipse at center, #2468b2 0%, #1a4a7f 50%, #153b66 75%, #0f2c4c 100%);
}

.ti-annual__badge-g {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: url(../img/termite-inspections-cost/google-g.png) center / contain no-repeat;
}

.ti-annual__badge-info { display: flex; flex-direction: column; gap: 8px; }
.ti-annual__badge-top { display: flex; align-items: center; gap: 12px; }

.ti-annual__badge-rating {
    font-weight: 900;
    font-style: italic;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.ti-annual__badge-stars { flex-shrink: 0; width: 117px; height: 21px; line-height: 0; }
.ti-annual__badge-stars svg { display: block; width: 117px; height: 21px; }

.ti-annual__badge-reviews {
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 991.98px) {
    .ti-annual { padding: 56px; }
    .ti-annual__row { flex-direction: column; align-items: stretch; gap: 60px; }
    .ti-annual__text { flex: none; }
    .ti-annual__media { flex: none; width: 100%; }
    .ti-annual__title { font-size: 40px; }
    .ti-annual__badge { left: 50%; transform: translateX(-50%); bottom: -32px; }
}

@media (max-width: 767.98px) {
    .ti-annual-wrap { padding: 48px 16px; }
    .ti-annual { padding: 32px 24px; border-radius: 16px; }
    .ti-annual__title { font-size: 30px; }
    .ti-annual__row { gap: 48px; }
    .ti-annual__badge {
        position: static;
        margin-top: 16px;
        align-self: flex-start;
        transform: translateX(0%)
    }
}


/* ==========================================================================
   Section: "Affordable Termite Inspection Options in Sydney" (Figma 446:3432)
   Blue→dark gradient band; 5 photo cards as a Swiper carousel.
   ========================================================================== */
.ti-affordable {
    background: radial-gradient(120% 120% at 50% 0%, #2468b2 0%, #264a76 50%, #273b58 75%, #282c3a 100%);
    padding: 140px 0;
    font-family: 'Inter', sans-serif;
}

.ti-affordable__inner {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
}

.ti-affordable__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    width: 100%;
    max-width: 766px;
    text-align: center;
}

.ti-affordable__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: #fff;
}

.ti-affordable__intro {
    margin: 0;
    max-width: 600px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #b6c1d3;
}

/* Cards / slider --------------------------------------------------------- */
.ti-affordable__slider { width: 100%; }
.ti-affordable__slider .swiper-slide { width: 375px; height: auto; }
/* all cards share the tallest card's height */
.ti-affordable__slider .swiper-wrapper { align-items: stretch; }

/* Photo composite is pinned to the top at its natural 375x540 size; the card
   grows with its content and the matching dark fill (#272c3a = the image's
   own base colour) extends seamlessly below. */
.ti-affordable__slider .ti-affordable__card {
    position: relative;
    width: 375px;
    min-height: 540px;
    padding-bottom: 40px;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
    /* background-color: #272c3a; */
    background-size: 375px 540px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Card photos are set per-card inline (ACF "Photo" field with a per-page
   fallback in each View) so the two pages can use different images. */

.ti-affordable__card-content {
    position: relative;
    margin: 292px 40px 0;
    width: 295px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  @media (max-width:560px){
    width:auto;
  }
}



.ti-affordable__card-num {
    box-sizing: border-box;
    width: 50px;
    padding: 12px;
    background: #e93041;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-style: italic;
    font-size: 36px;
    line-height: 1;
    color: #fff;
}

.ti-affordable__card-title {
    margin: 16px 0 0;
    font-weight: 900;
    font-style: italic;
    font-size: 30px;
    line-height: 1;
    color: #fff;
}

.ti-affordable__card-text {
    margin: 14px 0 0;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    color: #fff;
    @media (max-width:560px){
        font-size:16px;
    }
}

.ti-affordable__card-text--sm { font-size: 16px; }

/* Footer: buttons + note ------------------------------------------------- */
.ti-affordable__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

.ti-affordable__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.ti-affordable__note {
    margin: 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    color: #fff;
    text-align: center;
}

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 1199.98px) {
    .ti-affordable__title { font-size: 56px; }
}

@media (max-width: 991.98px) {
    .ti-affordable { padding: 96px 0; }
    .ti-affordable__inner { gap: 60px; }
    .ti-affordable__title { font-size: 44px; }
}

@media (max-width: 767.98px) {
    .ti-affordable { padding: 64px 0; }
    .ti-affordable__title { font-size: 32px; }
    .ti-affordable__intro { font-size: 16px; }
    .ti-affordable__buttons { width: 100%; }
    .ti-affordable .ti-btn { flex: 1 1 100%; justify-content: center; }
}


/* ==========================================================================
   Section: "Why Choose Bugfree Pest Control?" (Figma 446:3733)
   Banded section: heading + photo, then 5 white icon cards (3+2 grid on
   desktop, 1-per-view Swiper carousel on mobile), then buttons.
   ========================================================================== */
.ti-why {
    background: #e9edf3;
    /* padding: 240px 0; */
    font-family: 'Inter', sans-serif;
    padding:clamp(4rem, -4.25rem + 22vw, 15rem) 0;
    @media (max-width:1600px){
        padding:120px 0;
    }
}

.ti-why__inner {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
     @media (max-width:1600px){
        gap:60px;
    }
}

/* Top row: heading/intro left, photo right ------------------------------- */
.ti-why__intro {
    display: flex;
    align-items: center;
    gap: 120px;
    width: 100%;
    max-width: 1360px;
}

.ti-why__intro-text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
}

.ti-why__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: #282c3a;
}

.ti-why__intro-copy {
    margin: 0;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #5e6270;
}

.ti-why__media {
    flex: 0 0 648px;
    width: 648px;
    max-width: 100%;
}

.ti-why__media img,
.ti-why__media picture {
    display: block;
    width: 100%;
    height: auto;
}

/* Cards / slider --------------------------------------------------------- */
.ti-why__slider { width: 100%; }

/* Scoped above Swiper's .swiper-slide so the flex column (and centering)
   isn't overridden to display:block. */
.ti-why__slider .ti-why__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 60px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
}

.ti-why__card-icon { flex-shrink: 0; width: 80px; height: 80px; line-height: 0; }
.ti-why__card-icon svg { display: block; width: 80px; height: 80px; }
.ti-why__card-icon--img { background: url(../img/termite-inspections-cost/icon-eco.webp) center / contain no-repeat; }

.ti-why__card-title {
    margin: 0;
    width: 100%;
    font-weight: 900;
    font-style: italic;
    font-size: 24px;
    line-height: 1;
    color: #282c3a;
}

.ti-why__card-text {
    margin: 0;
    width: 100%;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.3;
    color: #282c3a;
}

/* Desktop: 3 + 2 grid (Swiper destroyed at this width) ------------------- */
@media (min-width: 768px) {
    .ti-why__slider .swiper-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        transform: none !important;
    }
    .ti-why__slider .swiper-slide {
        flex: 1 1 30%;
        min-width: 0;
        width: auto !important;
        height: auto;
    }
    .ti-why__slider .swiper-pagination { display: none; }
}

.ti-why__slider .swiper-pagination { position: static; margin-top: 16px; }
.ti-why__slider .swiper-pagination-bullet-active { background: #e93041; }

.ti-why__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 1199.98px) {
    .ti-why { padding: 160px 0; }
    .ti-why__title { font-size: 56px; }
}

@media (max-width: 991.98px) {
    .ti-why { padding: 96px 0; }
    .ti-why__inner { gap: 60px; }
    .ti-why__intro { flex-direction: column; align-items: flex-start; gap: 40px; }
    .ti-why__media { flex: none; width: 100%; }
    .ti-why__title { font-size: 44px; }
}

@media (max-width: 767.98px) {
    .ti-why { padding: 64px 0; }
    .ti-why__title { font-size: 32px; }
    .ti-why__intro-copy { font-size: 16px; }
    .ti-why__buttons { width: 100%; }
    .ti-why .ti-btn { flex: 1 1 100%; justify-content: center; }
}


/* ==========================================================================
   Section: "Contact Us Now" (Figma 446:3840)
   Red CTA banner: text + buttons + Google badge left, angled photo right.
   ========================================================================== */
.ti-contact {
    background: #be1e2d;
    display: flex;
    align-items: center;
    gap: 120px;
    padding-left: 180px;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    @media (max-width:1600px){
        padding-left:60px;
    }
}

.ti-contact__text {
    flex: 0 0 640px;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
    padding: 80px 0;
    @media (max-width:560px){
        gap:40px;
    }
}

.ti-contact__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: #fff;
}

.ti-contact__copy {
    margin: 0;
    max-width: 600px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #fff;
}

.ti-contact__copy p { margin: 0 0 25.2px; }
.ti-contact__copy p:last-child { margin-bottom: 0; }

.ti-contact__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.ti-contact__badge { width: 565px; max-width: 100%; }
.ti-contact__badge img,
.ti-contact__badge picture { display: block; width: 100%; height: auto; }

.ti-contact__media {
    flex: 0 0 980px;
    align-self: stretch;
    display: flex;
    align-items: center;
    @media (max-width:1200px){
        flex:0 0 800px;
    }
}

.ti-contact__media img,
.ti-contact__media picture { display: block; width: 100%; height: auto; }

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 1199.98px) {
    .ti-contact { padding-left: 60px; gap: 60px; }
    .ti-contact__title { font-size: 48px; }
}

@media (max-width: 991.98px) {
    .ti-contact {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 48px 16px 0;
    }
    .ti-contact__text { flex: none; max-width: none; padding: 0 0 40px; }
    .ti-contact__media { flex: none; }
    .ti-contact__buttons { width: 100%; }
    .ti-contact .ti-btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 575.98px) {
    .ti-contact__title { font-size: 36px; }
    .ti-contact .ti-btn { flex: 1 1 100%; }
}


/* ==========================================================================
   Section: "Testimonials" (Figma 560:370) — header only for now
   (heading + subtitle + Google rating badge). Slider to be added next.
   ========================================================================== */
.ti-testimonials {
    max-width: 1560px;
    margin: 0 auto;
    padding: 80px 20px 48px;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.ti-testimonials__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: #282c3a;
    text-align: center;
}

.ti-testimonials__subtitle {
    margin: 0;
    font-weight: 400;
    font-size: 22.27px;
    line-height: 1.4;
    color: #000;
    text-align: center;
}

.ti-testimonials__badge {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    border: 1px solid #e93041;
    border-radius: 10px;
    background: radial-gradient(ellipse at center, #2468b2 0%, #1a4a7f 50%, #153b66 75%, #0f2c4c 100%);
}

.ti-testimonials__badge-g {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: url(../img/termite-inspections-cost/google-g.png) center / contain no-repeat;
}

.ti-testimonials__badge-info { display: flex; flex-direction: column; gap: 8px; }
.ti-testimonials__badge-top { display: flex; align-items: center; gap: 12px; }

.ti-testimonials__badge-rating {
    font-weight: 900;
    font-style: italic;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.ti-testimonials__badge-stars { flex-shrink: 0; width: 117px; height: 21px; line-height: 0; }
.ti-testimonials__badge-stars svg { display: block; width: 117px; height: 21px; }

.ti-testimonials__badge-reviews {
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .ti-testimonials { padding: 56px 16px 32px; }
    .ti-testimonials__title { font-size: 40px; }
    .ti-testimonials__subtitle { font-size: 18px; }
}


/* ==========================================================================
   Testimonials slider (Figma 560:368) — dark review cards, Swiper carousel.
   ========================================================================== */
.ti-reviews {
    width: 100%;
    margin: 0;
    padding: 0 0 100px;
    font-family: 'Inter', sans-serif;
}

/* Full-width viewport, clips the scrolling track. */
.ti-reviews__marquee {
    width: 100%;
    overflow: hidden;
}

/* The track holds TWO identical copies of the cards. Each card carries a
   trailing margin (not flex gap), so translateX(-50%) shifts by exactly one
   full copy — the duplicate lands where the first started: seamless loop. */
.ti-reviews__track {
    display: flex;
    align-items: stretch;
    width: max-content;
    animation: ti-reviews-scroll 60s linear infinite;
    will-change: transform;
}

.ti-reviews__marquee:hover .ti-reviews__track { animation-play-state: paused; }

@keyframes ti-reviews-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ti-reviews__track { animation: none; }
}

.ti-reviews__card {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 977px;
    max-width: calc(100vw - 48px);
    margin-right: 35px;
    min-height: 471px;
    padding: 34px 40.85px 40px;
    background: #282c3a;
    border-radius: 19.766px;
    box-shadow: 0 13.177px 39.532px rgba(40, 44, 58, 0.08);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.ti-reviews__header {
    display: flex;
    align-items: center;
    gap: 29px;
}

.ti-reviews__quote-icon { flex-shrink: 0; width: 59.298px; height: 44.803px; line-height: 0; }
.ti-reviews__quote-icon svg { display: block; width: 100%; height: 100%; }

.ti-reviews__name {
    margin: 0;
    font-weight: 800;
    font-style: italic;
    font-size: 40px;
    line-height: normal;
    color: #fff;
    white-space: nowrap;
}

.ti-reviews__stars {
    flex-shrink: 0;
    margin-left: auto;
    width: 163.398px;
    height: 26.355px;
    line-height: 0;
}
.ti-reviews__stars svg { display: block; width: 100%; height: 100%; }

.ti-reviews__body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
}

.ti-reviews__body p {
    margin: 0;
    font-weight: 400;
    font-size: 22.006px;
    line-height: 37.951px;
    letter-spacing: -0.8802px;
    color: #fff;
}

.ti-reviews__accent {
    position: absolute;
    right: 40.85px;
    bottom: 0px;
    z-index: 0;
    width: 100px;
    height: 70px;
    line-height: 0;
    pointer-events: none;
}
.ti-reviews__accent svg { display: block; width: 100%; height: 100%; }

@media (max-width: 767.98px) {
    .ti-reviews { padding-bottom: 64px; }
    .ti-reviews__card { min-height: 0; padding: 28px 24px 32px; margin-right: 20px; }
    .ti-reviews__header { gap: 16px; flex-wrap: wrap; }
    .ti-reviews__quote-icon { width: 44px; height: 33px; }
    .ti-reviews__name { font-size: 24px; white-space: normal; }
    .ti-reviews__stars { width: 120px; height: 19.36px; }
    .ti-reviews__body p { font-size: 18px; line-height: 1.6; letter-spacing: -0.4px; }
    .ti-reviews__accent { width: 90px; height: 67.5px; }
}


/* ==========================================================================
   Section: "Frequently Asked Questions" (Figma 446:3786)
   Native <details> accordion on a dark band.
   ========================================================================== */
.ti-faq {
    background: #282c3a;
    padding: 100px 0;
    font-family: 'Inter', sans-serif;
}

.ti-faq__inner {
    max-width: 1200px;   /* 1920 frame minus 360px side gutters */
    margin: 0 auto;
    padding: 0 20px;
}

.ti-faq__title {
    margin: 0 0 50px;
    font-weight: 900;
    font-style: italic;
    font-size: 38.6px;
    line-height: 1.2;
    color: #fff;
    text-align: center;
}

.ti-faq__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.ti-faq__item:last-child { border-bottom: 0; }

.ti-faq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 29px 0;
    cursor: pointer;
    list-style: none;
}
.ti-faq__summary::-webkit-details-marker { display: none; }
.ti-faq__summary::marker { content: ''; }

.ti-faq__q {
    font-weight: 700;
    font-size: 23.4px;
    line-height: normal;
    color: #fff;
}

.ti-faq__icon {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    line-height: 0;
}
.ti-faq__icon svg { display: block; width: 35px; height: 35px; }

.ti-faq__answer {
    margin: 0;
    padding: 0 0 29px;
    max-width: 1000px;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}
/* Answer is now a rich-text editor field: keep single-paragraph answers
   looking identical, and give lists / paragraphs / emphasis sensible spacing. */
.ti-faq__answer > :first-child { margin-top: 0; }
.ti-faq__answer > :last-child { margin-bottom: 0; }
.ti-faq__answer p { margin: 0 0 1em; }
.ti-faq__answer ul,
.ti-faq__answer ol { margin: 0 0 1em; padding-left: 1.4em; }
.ti-faq__answer li { margin-bottom: 6px; }
.ti-faq__answer strong,
.ti-faq__answer b { font-weight: 700; color: #fff; }
.ti-faq__answer a { color: inherit; text-decoration: underline; }

@media (max-width: 767.98px) {
    .ti-faq { padding: 56px 0; }
    .ti-faq__title { font-size: 28px; margin-bottom: 32px; }
    .ti-faq__summary { gap: 16px; padding: 20px 0; }
    .ti-faq__q { font-size: 18px; }
    .ti-faq__icon, .ti-faq__icon svg { width: 28px; height: 28px; }
    .ti-faq__answer { font-size: 15px; padding-bottom: 20px; }
}


/* ==========================================================================
   Hero: "Termite Control Sydney" (Figma 567:388)
   Full-bleed photo (sharp right), frosted-blur left where the content sits.
   ========================================================================== */
.ti-hero {
    position: relative;
    overflow: hidden;
    min-height: 956px;
    background: #e9edf3;
    font-family: 'Inter', sans-serif;
}

.ti-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../img/termite-inspections-cost/hero-photo.webp) right bottom / cover no-repeat;
}

/* Frosted glass over the left of the photo (matches Figma's blur panel). */
.ti-hero__frost {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 590px;
    max-width: 62%;
    background: rgba(255, 255, 255, 0.01);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(10px);
}

.ti-hero__content {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    max-width: 910px;             /* 270px offset + 640px content */
    padding: 137px 24px 80px 150px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    @media (max-width:1600px){
        padding: 110px 24px 80px 80px;
    }
}

.ti-hero__headings { display: flex; flex-direction: column; gap: 30px; }

.ti-hero__eyebrow {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 30px;
    line-height: 1;
    color: #282c3a;
}

.ti-hero__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 80px;
    line-height: 1;
    color: #282c3a;
}

/* Trust badges */
.ti-hero__badges { display: flex; flex-direction: column; gap: 20px; }
.ti-hero__badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.ti-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-style: italic;
    font-size: 20px;
    line-height: 1;
    color: #282c3a;
    white-space: nowrap;
}

.ti-hero__badge-ic { flex-shrink: 0; width: 20px; height: 20px; line-height: 0; }
.ti-hero__badge-ic svg { display: block; width: 20px; height: 20px; }

.ti-hero__sep {
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    color: #282c3a;
    opacity: 0.5;
}

.ti-hero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }

/* Price badge */
.ti-hero__price {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 30px 40px;
    color: #fff;
}

.ti-hero__price-bg { position: absolute; inset: 0; z-index: 0; line-height: 0; }
.ti-hero__price-bg svg { display: block; width: 100%; height: 100%; }

.ti-hero__price-label {
    position: relative;
    z-index: 1;
    width: 246px;
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 24px;
    line-height: 1;
}

.ti-hero__price-amount {
    position: relative;
    z-index: 1;
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    white-space: nowrap;
}

.ti-hero__desc {
    margin: 8px 0 0;
    max-width: 595px;
    font-weight: 500;
    font-size: 16.7px;
    line-height: 24px;
    letter-spacing: -0.334px;
    color: #000;
}

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 1199.98px) {
    .ti-hero { min-height: 0; }
    .ti-hero__frost { max-width: 78%; }
    .ti-hero__content { max-width: 760px; padding: 100px 24px 72px 80px; }
    .ti-hero__title { font-size: 56px; }
    .ti-hero__eyebrow { font-size: 26px; }
}

@media (max-width: 767.98px) {
    .ti-hero__frost {
        width: 100%;
        max-width: 100%;
        background: rgba(233, 237, 243, 0.82);
    }
    .ti-hero__content { padding: 48px 20px 56px; max-width: none; gap: 24px; }
    .ti-hero__headings { gap: 16px; }
    .ti-hero__eyebrow { font-size: 20px; }
    .ti-hero__title { font-size: 38px; }
    .ti-hero__badge, .ti-hero__sep { font-size: 16px; }
    .ti-hero__badge-row { gap: 10px; }
    .ti-hero__price { padding: 22px 28px; gap: 14px; }
    .ti-hero__price-label { font-size: 18px; width: 190px; }
    .ti-hero__price-amount { font-size: 44px; }
}

@media (max-width:575px){
    .ti-hero__price{
        width:100%;
    }
}


/* ==========================================================================
   Section: "Our Pest Control Services" — tabbed card grid (Figma 209:677/206:408)
   ========================================================================== */
.ti-services {
    max-width: 1560px;
    margin: 0 auto;
    padding: 100px 0;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 100px;
}

.ti-services__title {
    margin: 0;
    max-width: 820px;
    padding: 0 20px;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: #282c3a;
}

.ti-services__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Tab bar ---------------------------------------------------------------- */
.ti-services__tabs-wrap { display: flex; flex-direction: column; gap: 20px; width: 100%; }

.ti-services__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 60px;
}

.ti-services__tab {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 900;
    font-style: italic;
    font-size: 24px;
    line-height: 1;
    color: #282c3a;
    white-space: nowrap;
}

.ti-services__tab.is-active {
    background: #2468b2;
    color: #fff;
    padding: 20px;
    border-radius: 4px;
}

.ti-services__tabs-line { width: 100%; height: 1px; background: #b6c1d3; }

/* Card grid -------------------------------------------------------------- */
.ti-services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
}

.ti-services__card {
    position: relative;
    height: 457px;
    border-radius: 10px;
    overflow: hidden;
    background: #e9edf3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 240px 40px 60px;
    box-sizing: border-box;
}

.ti-services__card-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
}

/* darkening gradient over the lower half of the photo */
.ti-services__card-shade {
    position: absolute;
    left: 0; right: 0; top: 122px;
    height: 335px;
    z-index: 1;
    background: linear-gradient(180deg, rgba(40, 40, 40, 0) 0%, #282828 100%);
    mix-blend-mode: multiply;
}

.ti-services__card-blur {
    position: absolute;
    left: 0; right: 0; top: 241px;
    height: 216px;
    z-index: 1;
    /* background: rgba(255, 255, 255, 0.01);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px); */
}

/* dark chevron panel with the red top edge (Figma Vector19) */
.ti-services__card-diag {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 147px;
    z-index: 2;
    line-height: 0;
}
.ti-services__card-diag svg { display: block; width: 100%; height: 100%; }

.ti-services__card-title {
    position: relative;
    z-index: 3;
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 36px;
    line-height: 1;
    color: #fff;
    text-align: center;
}

.ti-services__card .ti-btn { position: relative; z-index: 3; flex-shrink: 0; }

/* per-card photos */
.ti-services__card--ant       .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-ant.webp); }
.ti-services__card--cockroach .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-cockroach.webp); }
.ti-services__card--spider    .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-spider.webp); }
.ti-services__card--silverfish .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-silverfish.webp); }
.ti-services__card--rats      .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-rats.webp); }
.ti-services__card--mice      .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-mice.webp); }
.ti-services__card--carpet    .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-carpet.webp); }
.ti-services__card--moths     .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-moths.webp); }
.ti-services__card--fly       .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-fly.webp); }
.ti-services__card--mosquito  .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-mosquito.webp); }
.ti-services__card--termite   .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-termite.webp); }
.ti-services__card--wasp      .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-wasp.webp); }
.ti-services__card--whiteant  .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-whiteant.webp); }
.ti-services__card--rodentfull .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-rodentfull.webp); }
.ti-services__card--bedbug    .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-bedbug.webp); }
.ti-services__card--flea      .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-flea.webp); }
.ti-services__card--eurowasp  .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-eurowasp.webp); }
.ti-services__card--bee       .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-bee.webp); }
.ti-services__card--birdlice  .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-birdlice.webp); }
.ti-services__card--bird      .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-bird.webp); }
.ti-services__card--possum    .ti-services__card-photo { background-image: url(../img/termite-inspections-cost/services/svc-possum.webp); }

/* "From $X" price badge — only shown inside a specific tab (not All Services) */
.ti-services__price {
    display: none;
    position: absolute;
    top: 24px;
    left: 0;
    z-index: 4;
    width: 248px;
    max-width: 80%;
    height: 57px;
    background: #2468b2;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 900;
    font-style: italic;
    font-size: 36px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}
.ti-services__grid.is-tab .ti-services__price { display: flex; }

/* hidden by filter / collapse */
.ti-services__card[hidden] { display: none; }

/* smooth reveal for View More */
@keyframes ti-services-reveal {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
.ti-services__card.is-revealing { animation: ti-services-reveal 0.45s ease both; }

/* View More / Less button */
.ti-services__more {
    width: 100%;
    height: 60px;
    border: 1px solid #b6c1d3;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 1;
    color: #282c3a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ti-services__more[hidden] { display: none; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .ti-services { padding: 72px 0; gap: 60px; }
    .ti-services__title { font-size: 48px; }
    .ti-services__tabs { gap: 28px; }
    .ti-services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    .ti-services { padding: 56px 0; gap: 40px; }
    .ti-services__title { font-size: 32px; }
    .ti-services__tabs { gap: 16px; }
    .ti-services__tab { font-size: 18px; }
    .ti-services__tab.is-active { padding: 12px; }
    .ti-services__grid { grid-template-columns: 1fr; }
    .ti-services__card-title { font-size: 30px; }
}


/* ==========================================================================
   Global "30 Second Free Quote" form (Figma 446:2569)
   This whole stylesheet is loaded site-wide by the BugFree Quote Form
   mu-plugin, so the [bugfree_quote_form] shortcode is styled on any page.
   ========================================================================== */
.ti-quote {
    position: relative;
    z-index: 5;
    max-width: 1560px;
    margin: 0 auto;
    padding: 80px 20px;
    padding-top:0px;
    margin-top:-50px;
    font-family: 'Inter', sans-serif;
    scroll-margin-top: 170px; /* clears the sticky header when anchored to */
}

/* Opt-in modifier: pulls the card up to overlap a hero above it. */
.ti-quote--overlap {
    margin-top: -30px;
    padding-top: 0;
    padding-bottom: 100px;
}

.ti-quote__card {
    background: #e9edf3;
    border-radius: 10px;
    padding: 60px;
    box-shadow: 0 24px 60px rgba(40, 44, 58, 0.12);
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Contact Form 7 wrapper compatibility (the form markup comes from CF7) */
.ti-quote__card .wpcf7-form { display: flex; flex-direction: column; gap: 60px; }
.ti-quote__field .wpcf7-form-control-wrap { display: block; width: 100%; }
.ti-quote__message .wpcf7-form-control-wrap { flex: 1 1 auto; display: flex; }
.ti-quote__card .wpcf7-not-valid-tip { font-style: normal; font-size: 14px; margin-top: 6px; }
.ti-quote__card .wpcf7-response-output { margin: 8px 0 0; border-radius: 4px; }


.ti-quote__field{
    @media (max-width:500px){
        gap:10px !important;
    }
}

.ti-quote__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 48px;
    line-height: 1;
    color: #282c3a;
}
.ti-quote__title span { color: #2468b2; }

.ti-quote__body {
    display: flex;
    align-items: stretch;
    gap: 40px;
}

.ti-quote__fields {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ti-quote__row { display: flex; gap: 30px; }

.ti-quote__field {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ti-quote__label {
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 1;
    color: #282c3a;
}

.ti-quote__input,
.ti-quote__select,
.ti-quote__textarea {
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-radius: 4px;
    background: #fff;
    padding: 20px;
    font-family: inherit;
    font-weight: 500;
    font-style: italic;
    font-size: 18px;
    line-height: 1.3;
    color: #42485b;
}
.ti-quote__input::placeholder,
.ti-quote__textarea::placeholder { color: #42485b; opacity: 1; }

.ti-quote__select {
    color: #808080;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9' fill='none'><path d='M1 1l8 7 8-7' stroke='%23282c3a' stroke-width='2' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding-right: 50px;
    cursor: pointer;
}

.ti-quote__divider { flex: 0 0 1px; align-self: stretch; background: #b6c1d3; }

.ti-quote__message {
    flex: 0 0 425px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ti-quote__textarea { flex: 1 1 auto; min-height: 200px; resize: vertical; }

.ti-quote__submit {
    width: 100%;
    border: 0;
    border-radius: 40px;
    background: #e93041;
    padding: 20px;
    font-family: inherit;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}

@media (max-width: 991.98px) {
    .ti-quote--overlap { margin-top: -100px; }
    .ti-quote__card { padding: 40px; gap: 40px; }
    .ti-quote__title { font-size: 36px; }
    .ti-quote__body { flex-direction: column; gap: 30px; }
    .ti-quote__divider { display: none; }
    .ti-quote__message { flex: none; width: 100%; }
    .ti-quote__textarea { min-height: 140px; }
}

@media (max-width: 575.98px) {
    .ti-quote { padding: 28px 16px; }
    .ti-quote--overlap { margin-top: -60px; padding-bottom: 64px; }
    .ti-quote__card { padding: 30px 10px; }
    .ti-quote__title { font-size: 28px; }
    .ti-quote__row { flex-direction: column; gap: 20px; }
}

/* ==========================================================================
   Section: "Complete Termite Inspections for Sydney Homes" (Figma 446:2604)
   Photo (+ Google rating badge) left, heading / copy / phone CTA right.
   ========================================================================== */
.ti-complete__inner {
    max-width: 1560px;
    margin: 0 auto;
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    gap: 100px;
}

.ti-complete__media {
    position: relative;
    flex-shrink: 0;
    width: 692.697px;
    height: 709.646px;
}

.ti-complete__media > picture,
.ti-complete__media > img {
    display: block;
    width: 100%;
    height: 100%;
}

.ti-complete__media img {
    object-fit: cover;
}

.ti-complete__badge {
    position: absolute;
    left: 188.35px;
    bottom: -38.67px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    border: 1px solid #e93041;
    border-radius: 10px;
    background: radial-gradient(ellipse at center, #2468b2 0%, #1a4a7f 50%, #153b66 75%, #0f2c4c 100%);
}

.ti-complete__badge-g {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: url(../img/termite-inspections-cost/google-g.png) center / contain no-repeat;
}

.ti-complete__badge-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.ti-complete__badge-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ti-complete__badge-rating {
    font-weight: 900;
    font-style: italic;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.ti-complete__badge-stars {
    flex-shrink: 0;
    width: 117px;
    height: 21px;
    line-height: 0;
}

.ti-complete__badge-stars svg { display: block; width: 117px; height: 21px; }

.ti-complete__badge-reviews {
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.ti-complete__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
}

.ti-complete__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 50px;
    line-height: 1;
    color: #282c3a;
}

.ti-complete__copy {
    display: flex;
    flex-direction: column;
}

.ti-complete__copy p {
    margin: 0;
    font-weight: 400;
    font-size: 16.7px;
    line-height: 28.8px;
    color: #000;
}

.ti-complete__copy p + p { margin-top: 28.8px; }

.ti-complete__copy strong { font-weight: 700; }

.ti-complete__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 55px;
    padding: 0 20px;
    border-radius: 40px;
    background: #e93041;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.ti-complete__phone-ic {
    display: flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.ti-complete__phone-ic svg { display: block; width: 20px; height: 20px; }

/* Rating badges are links to the Google reviews listing ------------------- */
.ti-review-link { text-decoration: none; color: inherit; cursor: pointer; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .ti-complete__inner { gap: 56px; }
    .ti-complete__media { width: 50%; height: auto;text-align:center;}
    .ti-complete__title { font-size: 44px; }
    .ti-complete__badge {transform: translateX(-50%); left: 50%; }
}

@media (max-width: 991.98px) {
    .ti-complete__inner { flex-direction: column; align-items: stretch; gap: 80px; }
    .ti-complete__media { width: 100%; }
}

@media (max-width: 767.98px) {
    .ti-complete__inner { padding: 56px 16px; gap: 40px; }
    .ti-complete__title { font-size: 32px; }
    .ti-complete__content { gap: 32px; }
    .ti-complete__badge {
        position: static;
        margin-top: 16px;
        align-self: flex-start;
        transform: translateX(0%);
    }
}

/* ==========================================================================
   Section: "Our Termite Control Treatments in Sydney" (Figma 588:407)
   Centered header + Swiper of tall dark cards (photo top, red diagonal edge,
   red number badge, white title, body copy and bold-label bullets).
   ========================================================================== */
.ti-treatments {
    padding: 80px 0;
    font-family: 'Inter', sans-serif;
}

.ti-treatments__header {
    max-width: 854px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    text-align: center;
}

.ti-treatments__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: #282c3a;
}

.ti-treatments__subtitle {
    margin: 0;
    max-width: 716px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #5e6270;
}

.ti-treatments__slider {
    /* max-width: 1560px; */
    margin: 60px auto 0;
    margin-left:120px !important;
    padding: 0 20px;
    @media (max-width:1560px){
        margin-left:20px !important;
    }
}

.ti-treatments__slider .swiper-slide {
    width: 520px;
    height: auto;
}
/* all cards share one height — the tallest card's content-driven height */
.ti-treatments__slider .swiper-wrapper {
    align-items: stretch;
}

.ti-treatments__card {
    position: relative;
    width: 520px;
    padding-bottom: 48px;
    background: #282c3a;
    border-radius: 14px;
    overflow: hidden;
    color: #fff;
}

.ti-treatments__photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 340px;
    z-index: 0;
}
.ti-treatments__photo picture,
.ti-treatments__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ti-treatments__diagonal {
    position: absolute;
    top: 196.96px;
    left: -4px;
    width: calc(100% + 8px);
    height: 422px;
    z-index: 1;
    pointer-events: none;
    line-height: 0;
}
.ti-treatments__diagonal svg { display: block; width: 100%; height: 100%; }

.ti-treatments__num {
    position: absolute;
    z-index: 2;
    left: 50px;
    top: 265px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e93041;
    border-radius: 4px;
    font-weight: 900;
    font-style: italic;
    font-size: 36px;
    line-height: 1;
    color: #fff;
}

.ti-treatments__content {
    position: relative;
    z-index: 2;
    margin-top: 350px;
    padding: 0 34px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ti-treatments__card-title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 36px;
    line-height: 1;
    color: #fff;
}

.ti-treatments__text {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ti-treatments__text p {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
}

.ti-treatments__bullets {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ti-treatments__bullet {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: #fff;
}
.ti-treatments__bullet b {
    font-weight: 800;
    font-style: italic;
}

.ti-treatments__pills {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.ti-treatments__pill {
    margin: 0;
    background: #404557;
    border-radius: 260px;
    padding: 18px 26px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: #fff;
    @media (max-width: 767.98px) {
        padding: 12px 12px;
        border-radius: 12px;
    }
}
.ti-treatments__pill b { font-weight: 700; }

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 1199.98px) {
    .ti-treatments__title { font-size: 48px; }
}

@media (max-width: 767.98px) {
    .ti-treatments { padding: 56px 0; }
    .ti-treatments__title { font-size: 32px; }
    .ti-treatments__slider .swiper-slide,
    .ti-treatments__card { width: 300px; }
    .ti-treatments__content { padding: 0 24px; }
}

/* ==========================================================================
   Section: "Types of Termite Treatment Solutions We Offer in Sydney" (Figma 589:487)
   Light-grey band, centered header, white card grid (row of 4 + row of 2).
   ========================================================================== */
.ti-soltypes {
    background: #e9edf3;
    padding: 80px 0;
    font-family: 'Inter', sans-serif;
}

.ti-soltypes__header {
    max-width: 1026px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    text-align: center;
}

.ti-soltypes__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: #282c3a;
}

.ti-soltypes__subtitle {
    margin: 0;
    max-width: 986px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #5e6270;
}

.ti-soltypes__grid {
    max-width: 1560px;
    margin: 60px auto 0;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ti-soltypes__row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ti-soltypes__card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 317px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 60px;
    background: #fff;
    border-radius: 10px;
    text-align: center;
}

.ti-soltypes__card-title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 24px;
    line-height: 1;
    color: #282c3a;
}

.ti-soltypes__card-text {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.21;
    color: #282c3a;
}

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 1199.98px) {
    .ti-soltypes__title { font-size: 48px; }
    .ti-soltypes__card { flex: 1 1 calc(50% - 10px); padding: 48px; }
}

@media (max-width: 767.98px) {
    .ti-soltypes { padding: 56px 0; }
    .ti-soltypes__title { font-size: 32px; }
    .ti-soltypes__card { flex: 1 1 100%; min-height: 0; padding: 40px; }
}

/* ==========================================================================
   Section: "Sydney-wide Service with Local Focus" (Figma 450:6127)
   Header, 5 grey property-type icon cards, full-width Google map, 2 CTAs.
   ========================================================================== */
.ti-areas {
    padding: 80px 0;
    font-family: 'Inter', sans-serif;
}

.ti-areas__inner {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
}

.ti-areas__header {
    max-width: 854px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    text-align: center;
}

.ti-areas__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: #282c3a;
}

.ti-areas__subtitle {
    margin: 0;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #5e6270;
}
.ti-areas__subtitle p { margin: 0; }
.ti-areas__subtitle p + p { margin-top: 25px; }
.ti-areas__subtitle strong { font-weight: 800; color: #5e6270; }

.ti-areas__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.ti-areas__card {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 60px 40px;
    background: #e9edf3;
    border-radius: 10px;
}

.ti-areas__card-icon { flex-shrink: 0; width: 80px; height: 80px; line-height: 0; }
.ti-areas__card-icon svg { display: block; width: 80px; height: 80px; }

.ti-areas__card-title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 24px;
    line-height: 1;
    color: #282c3a;
    text-align: center;
}

.ti-areas__map {
    width: 100%;
    height: 500px;
    border-radius: 10px;
    overflow: hidden;
    background: #e9edf3;
}
.ti-areas__map iframe { display: block; width: 100%; height: 100%; border: 0; }

.ti-areas__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.ti-areas__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 55px;
    padding: 0 20px;
    border-radius: 40px;
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.ti-areas__btn--book { background: #e93041; }
.ti-areas__btn--call { background: #2468b2; }
.ti-areas__btn-icon { display: flex; flex-shrink: 0; width: 20px; height: 20px; }
.ti-areas__btn-icon svg { display: block; width: 20px; height: 20px; }

/* No colour change or underline on button hover/focus */
.ti-areas__btn:hover,
.ti-areas__btn:focus,
.ti-complete__phone:hover,
.ti-complete__phone:focus {
    color: #fff;
    text-decoration: none;
}

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 1199.98px) {
    .ti-areas__title { font-size: 48px; }
    .ti-areas__card { flex: 1 1 calc(33.333% - 14px); }
}

@media (max-width: 767.98px) {
    .ti-areas { padding: 56px 0; }
    .ti-areas__inner { gap: 60px; }
    .ti-areas__title { font-size: 32px; }
    .ti-areas__subtitle { white-space: normal; }
    .ti-areas__card { flex: 1 1 calc(50% - 10px); padding: 40px 24px; }
    .ti-areas__map { height: 360px; }
}

/* ==========================================================================
   Section: "Tools We Use To Inspect For Termites" (Figma 450:6200)
   Dark rounded band: photo (+ Google badge) left, heading + white tool pills right.
   ========================================================================== */
.ti-tools-wrap {
    max-width: 1560px;
    margin: 0 auto;
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
}

.ti-tools {
    background: #282c3a;
    border-radius: 24px;
    /* padding: 100px 110px; */
    padding:clamp(2rem, 1.5058rem + 3.9535vw, 6.25rem);
}

.ti-tools__row {
    display: flex;
    align-items: center;
    gap: 80px;
    @media (max-width:1600px){
        gap:40px;
    }
}

.ti-tools__media {
    position: relative;
    flex-shrink: 0;
    width: 692.697px;
}

.ti-tools__media-img {
    width: 100%;
    height: 715.322px;
    border-radius: 24px;
    overflow: hidden;
}
.ti-tools__media-img picture,
.ti-tools__media-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ti-tools__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.ti-tools__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 50px;
    line-height: 1;
    color: #fff;
}

.ti-tools__list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ti-tools__item {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 94px;
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
}

.ti-tools__item-icon { flex-shrink: 0; width: 40px; height: 40px; line-height: 0; }
.ti-tools__item-icon svg { display: block; width: 40px; height: 40px; }

.ti-tools__item-title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 24px;
    line-height: 1;
    color: #282c3a;
}

/* Google rating badge (same pattern as the Reliable/Annual sections) ------ */
.ti-tools__badge {
    position: absolute;
    left: 198px;
    bottom: -33px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    border: 1px solid #e93041;
    border-radius: 10px;
    background: radial-gradient(ellipse at center, #2468b2 0%, #1a4a7f 50%, #153b66 75%, #0f2c4c 100%);
    text-decoration: none;
}
.ti-tools__badge-g {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: url(../img/termite-inspections-cost/google-g.png) center / contain no-repeat;
}
.ti-tools__badge-info { display: flex; flex-direction: column; gap: 8px; }
.ti-tools__badge-top { display: flex; align-items: center; gap: 12px; }
.ti-tools__badge-rating {
    font-weight: 900;
    font-style: italic;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}
.ti-tools__badge-stars { flex-shrink: 0; width: 117px; height: 21px; line-height: 0; }
.ti-tools__badge-stars svg { display: block; width: 117px; height: 21px; }
.ti-tools__badge-reviews {
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 1199.98px) {
    .ti-tools { padding: 60px; }
    .ti-tools__row { gap: 40px; }
    .ti-tools__title { font-size: 40px; }
    .ti-tools__media { width: 45%; }
    .ti-tools__media-img { height: auto; aspect-ratio: 692.697 / 715.322; }
    .ti-tools__badge { left: 20px; }
}

@media (max-width: 991.98px) {
    .ti-tools__row { flex-direction: column; align-items: stretch; }
    .ti-tools__media { width: 100%; }
}

@media (max-width: 767.98px) {
    .ti-tools-wrap { padding: 48px 16px; }
    .ti-tools { padding: 32px 24px; border-radius: 16px; }
    .ti-tools__title { font-size: 32px; }
    .ti-tools__content { gap: 40px; }
    .ti-tools__item-title { font-size: 20px; }
    .ti-tools__badge {
        position: static;
        margin-top: 16px;
        align-self: flex-start;
    }
}

/* ==========================================================================
   Section: "How to spot a termite" (Figma 450:6487)
   Red infographic card left, heading + subtitle + label + red pill tags right.
   ========================================================================== */
.ti-spot {
    max-width: 1560px;
    margin: 0 auto;
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
}

.ti-spot__row {
    display: flex;
    align-items: center;
    gap: 114px;
    @media (max-width: 1600px) {
        gap: 60px;
    }
    @media (max-width:1200px){
        flex-direction: column;
    }
}

.ti-spot__visual {
    position: relative;
    flex-shrink: 0;
    width: 832px;
    max-width: 100%;
    aspect-ratio: 832 / 588;
    box-sizing: border-box;
    padding: 30px 6px;
    background: #be1e2d;
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    @media (max-width: 1600px) {
        width:700px;
    }
}
.ti-spot__visual picture,
.ti-spot__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ti-spot__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    @media (max-width:1200px){
        width:100%;
        align-items:center;
    }
}

.ti-spot__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 73px;
    line-height: 1;
    color: #282c3a;
}

.ti-spot__subtitle {
    margin: 0;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    color: #5e6270;
}

.ti-spot__label {
    margin: 4px 0 0;
    font-weight: 800;
    font-style: italic;
    font-size: 20px;
    line-height: 1.4;
    color: #5e6270;
}

.ti-spot__pills {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
    @media (max-width: 1200px) {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
}
.ti-spot__pills-row {
    display: flex;
    /* flex-wrap: wrap; */
    gap: 12px;
    @media (max-width: 1500px) {
        gap:6px;
    }
    @media (max-width: 560px) {
        flex-wrap: wrap;
        width:100%;
    }
}

.ti-spot__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 100px;
    background: #be1e2d;
    color: #fff;
    font-weight: 800;
    font-style: italic;
    font-size: 16px;
    line-height: 1.4;
    text-transform: capitalize;
    @media (max-width: 560px) {
        width:100%;
    }
}

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 1199.98px) {
    .ti-spot__row { gap: 48px; }
    .ti-spot__title { font-size: 56px; }
}

@media (max-width: 991.98px) {
    .ti-spot__row { flex-direction: column; align-items: stretch; gap: 40px; }
    .ti-spot__visual { width: 100%; }
}

@media (max-width: 767.98px) {
    .ti-spot { padding: 56px 16px; }
    .ti-spot__title { font-size: 36px; }
    .ti-spot__subtitle,
    .ti-spot__label { font-size: 18px; }
}

/* ==========================================================================
   Section: "Why Choose Bugfree Pest Control?" — 9 cards (Figma 450:5949)
   Grey band: heading + termite image, 3x3 white icon cards, two CTAs.
   ========================================================================== */
.ti-whychoose {
    background: #e9edf3;
    /* padding: 100px 0; */
    font-family: 'Inter', sans-serif;
    padding: clamp(3.5rem, 3.1802rem + 2.5581vw, 6.25rem) 0;
}

.ti-whychoose__inner {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
    @media (max-width: 1200px) {
        gap: 40px;
    }
    @media (max-width: 768px) {
        gap: 15px;
    }
}

.ti-whychoose__top {
    display: flex;
    align-items: center;
    gap: 120px;
    width: 100%;
    max-width: 1360px;
}

.ti-whychoose__intro {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.ti-whychoose__title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: #282c3a;
}

.ti-whychoose__subtitle {
    margin: 0;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    color: #5e6270;
}

.ti-whychoose__media {
    flex-shrink: 0;
    width: 648px;
    /* height: 380px; */
}
.ti-whychoose__media picture,
.ti-whychoose__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.ti-whychoose__grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ti-whychoose__row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.ti-whychoose__card {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 60px;
    background: #fff;
    border-radius: 10px;
    text-align: center;
}

.ti-whychoose__card-icon { flex-shrink: 0; width: 80px; height: 80px; line-height: 0; }
.ti-whychoose__card-icon svg { display: block; width: 80px; height: 80px; }

.ti-whychoose__card-title {
    margin: 0;
    font-weight: 900;
    font-style: italic;
    font-size: 24px;
    line-height: 1;
    color: #282c3a;
}

.ti-whychoose__card-text {
    margin: 0;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: #282c3a;
}

.ti-whychoose__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Responsive — Figma frame is desktop-only (1920) ------------------------ */
@media (max-width: 1199.98px) {
    .ti-whychoose__top { flex-direction: column; align-items: flex-start; gap: 40px; }
    .ti-whychoose__intro { width: 100%; }
    .ti-whychoose__media { width: 100%; max-width: 648px; }
    .ti-whychoose__title { font-size: 48px; }
    .ti-whychoose__card { flex: 1 1 calc(50% - 10px); }
}

@media (max-width: 767.98px) {
    .ti-whychoose { padding: 56px 0; }
    .ti-whychoose__inner { gap: 60px; }
    .ti-whychoose__title { font-size: 32px; }
    .ti-whychoose__card { flex: 1 1 100%; padding: 40px; }
    .ti-whychoose__card-text { font-size: 18px; }
}