body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
main { flex: 1 0 auto; }

/* ============================
   Brand variables
   ============================ */
   :root {
    --tf-blue-start: #00367f;
    --tf-blue-end: #0177bf;
    --tf-orange-start: #f04c23;
    --tf-orange-end: #f68719;
    --tf-gold: #fbbc05;
}

/* ============================
   Shared / utility classes
   Used across Home, About, and Contact — kept here, above all
   page-specific sections, so specificity ties always resolve
   in favour of the more specific page rule below.
   ============================ */
.tf-eyebrow {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--tf-blue-start);
}
.tf-eyebrow-light {
    color: #cfe4ff;
}

/* Generic placeholder box used wherever an image hasn't been uploaded yet
   (hero photos, service cards, team photos). Page-specific classes like
   .tf-about-hero__placeholder or .tf-team-card__placeholder override the
   sizing below while keeping the flex-centred placeholder text. */
.tf-img-placeholder {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: linear-gradient(160deg, var(--tf-blue-start), var(--tf-blue-end));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFF;
}

/* ============================
   Header
   ============================ */
.tf-header {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.tf-header .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}
.tf-header .nav-link {
    color: #1c1c1c;
}
.tf-header .nav-link:hover,
.tf-header .nav-link:focus {
    color: var(--tf-orange-start);
}
.tf-header .nav-link.active {
    color: var(--tf-orange-start);
    font-weight: 600;
}
.tf-logo-trade {
    color: var(--tf-blue-start);
    font-weight: 700;
}
.tf-logo-fix {
    color: var(--tf-orange-start);
    font-weight: 700;
}

/* ============================
   Logo
   ============================ */
.tf-logo-navbar {
    height: 44px;
    width: auto;
    display: block;
}
@media (min-width: 992px) {
    .tf-logo-navbar {
        height: 52px;
    }
}
.tf-logo-footer {
    height: 56px;
    width: auto;
    margin-bottom: 0.75rem;
}

/* ============================
   Buttons
   ============================ */
.tf-btn-primary {
    background: linear-gradient(90deg, var(--tf-orange-start), var(--tf-orange-end));
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 10px;
}
.tf-btn-outline {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}
.tf-btn-secondary {
    background: var(--tf-blue-end);
    color: #fff;
    border: none;
}

.tf-btn-primary.tf-btn-lg {
    padding: 0.95rem 1.5rem;
    font-size: 1.05rem;
    line-height: 1.2;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(240, 76, 35, 0.3);
}

/* ============================
   Footer
   ============================ */
.tf-footer {
    background: #10182b;
    color: #cfd3dc;
}
.tf-footer-tagline {
    font-size: 0.85rem;
    color: #9aa1b1;
}
.tf-footer-heading {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #7c8497;
    margin-bottom: 0.5rem;
}
.tf-footer-links a {
    color: #cfd3dc;
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.9;
}
.tf-footer-links a:hover,
.tf-footer-links a:focus {
    color: var(--tf-orange-start);
}
.tf-footer-links a.active {
    color: var(--tf-orange-start);
    font-weight: 600;
}
.tf-footer-links a[aria-disabled="true"] {
    color: #5a6072;
    pointer-events: none;
    cursor: default;
}
.tf-footer-socials {
    display: flex;
    gap: 0.9rem;
    margin-top: 1rem;
}
.tf-footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #cfd3dc;
    font-size: 0.95rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.tf-footer-socials a:hover,
.tf-footer-socials a:focus {
    background: var(--tf-orange-start);
    color: #fff;
}

/* ============================
   Sticky mobile action bar
   ============================ */
.tf-has-mobile-bar {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
.tf-mobile-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    z-index: 1000;
}
.tf-mobile-bar-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}
.tf-mobile-bar-call {
    background: var(--tf-blue-start);
}
.tf-mobile-bar-whatsapp {
    background: #25d366;
}
.tf-mobile-bar-enquire {
    background: var(--tf-orange-start);
}
@media (min-width: 768px) {
    .tf-mobile-bar {
        display: none;
    }
    .tf-has-mobile-bar {
        padding-bottom: 0;
    }
}


/* ==================================================
   HOME PAGE
   ================================================== */

/* ==================================================
   HOME PAGE - GOOGLE REVIEWS
   ================================================== */

.tf-home-reviews {
    background: #f4f6f9;
}

.tf-home-reviews__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tf-home-reviews .tf-eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #0177bf;
}

.tf-home-reviews h2 {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    text-transform: uppercase;
    color: #00367f;
}

/* Google badge */
.tf-google-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.9rem;
    background: #fff;
    border: 1px solid #e2e6ec;
    border-radius: 0.75rem;
    text-decoration: none;
    color: #222;
    font-size: 0.9rem;
}
.tf-google-badge__logo { width: 28px; height: 28px; }
.tf-google-badge__text { display: flex; flex-direction: column; line-height: 1.2; }
.tf-google-badge__label { font-size: 0.7rem; color: #666; }

.tf-home-reviews .tf-stars {
    color: #f04c23;
    letter-spacing: 0.1em;
    margin-bottom: 0;
}
.tf-google-badge .tf-stars {
    color: #f68719;
}

/* Mobile: one swipeable row, cards never wrap */
.tf-home-reviews .tf-testimonial-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    margin-top: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.75rem;
    /* bleed to the screen edge so the next card peeks in */
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

.tf-home-reviews .tf-testimonial-card {
    flex: 0 0 78%;
    max-width: 78%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e6ec;
    border-radius: 0.75rem;
    padding: 1.25rem;
    font-size: 0.9rem;
}

.tf-home-reviews .tf-testimonial-text {
    margin: 0.6rem 0 1rem;
    color: #333;
    /* Google reviews can be long, so clamp to 5 lines */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tf-home-reviews .tf-testimonial-author {
    display: block;
    margin-top: auto;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #555;
}

.tf-home-reviews__link { margin-top: 1.25rem; }
.tf-home-reviews__link a {
    font-weight: 600;
    color: #00367f;
    text-decoration: none;
}
.tf-home-reviews__link a:hover { color: #f04c23; }

.tf-home-reviews__fallback { color: #666; }

/* Tablet and up: three cards in one row */
@media (min-width: 768px) {
    .tf-home-reviews .tf-testimonial-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow: visible;
        margin-right: 0;
        padding-right: 0;
    }
    .tf-home-reviews .tf-testimonial-card {
        flex: none;
        max-width: none;
    }
}

/* ============================
   Hero
   ============================ */
.tf-hero {
    background: linear-gradient(160deg, var(--tf-blue-start), var(--tf-blue-end));
    color: #fff;
    padding: 2rem 0 3rem;
}
.tf-hero h1 {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0.5rem 0;
}
.tf-hero-sub {
    color: #dceaff;
    margin-bottom: 1.5rem;
}

/* ============================
   Quote card
   ============================ */
.tf-quote-card {
    background: #fff;
    color: #1c1c1c;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.tf-quote-card label {
    font-size: 0.85rem;
    font-weight: 600;
    display: block;
    margin-top: 0.75rem;
}
.tf-quote-card input{
    min-width: 0;
}
.tf-quote-card input,
.tf-quote-card textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.6rem;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    margin-top: 0.25rem;
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
}

.tf-quote-card textarea {
    min-height: 120px;
    max-height: 220px;
    resize: vertical;
}
.tf-quote-card .tf-btn-primary {
    margin-top: 1rem;
}
.tf-quote-callout {
    text-align: center;
    font-size: 0.85rem;
    margin: 0.75rem 0 0;
}
.tf-quote-callout a {
    color: var(--tf-blue-start);
    font-weight: 600;
}

.tf-dropdown {
    position: relative;
    margin-top: 0.25rem;
}
.tf-dropdown__toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    color: #999;
    text-align: left;
}
.tf-dropdown__toggle.has-value {
    color: #1c1c1c;
}
.tf-dropdown__arrow {
    margin-left: 0.5rem;
    color: #666;
    transition: transform 0.15s ease;
}
.tf-dropdown.is-open .tf-dropdown__arrow {
    transform: rotate(180deg);
}
.tf-dropdown__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    max-height: 260px;
    overflow-y: auto;
}
.tf-dropdown__menu[hidden] {
    display: none;
}
.tf-dropdown__menu li {
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    color: #1c1c1c;
    cursor: pointer;
}
.tf-dropdown__menu li:hover,
.tf-dropdown__menu li:focus {
    background: #f5f8fc;
}

/* ============================
   Trust bar
   ============================ */
.trust-bar {
    background: linear-gradient(90deg, var(--tf-blue-start), var(--tf-blue-end));
    color: #fff;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.trust-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.75rem;
}

/* Google badge */

.trust-bar {
    position: relative;
    z-index: 2;
}
.trust-bar .trust-bar__badge {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.trust-bar .trust-bar__badge:hover,
.trust-bar .trust-bar__badge:focus {
    color: #fff;
    background: none;
    opacity: 0.9;
}
.trust-bar .trust-bar__google-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
}
.trust-bar .trust-bar__badge-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    text-align: left;
}
.trust-bar .trust-bar__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #dceaff;
}
.trust-bar .trust-bar__rating {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #fff;
}
.trust-bar .trust-bar__stars {
    color: var(--tf-gold);
    letter-spacing: 1px;
    font-size: 0.85rem;
}

.trust-bar__divider {
    opacity: 0.6;
}

@media (max-width: 480px) {
    .trust-bar {
        font-size: 0.8rem;
    }
    .trust-bar__inner {
        gap: 0.4rem 0.5rem;
    }
}

/* ============================
   Hero photo
   ============================ */
.tf-hero-photo {
    position: relative;
    height: 260px;
    overflow: hidden;
}
.tf-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tf-hero-photo .tf-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* Slanted navy panel down the right-hand side */
.tf-hero-photo::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46%;
    background: rgba(9, 38, 68, 0.88);
    clip-path: polygon(27% 0, 100% 0, 100% 100%, 0 100%);
    pointer-events: none;
}

.tf-hero-photo-caption {
    position: absolute;
    z-index: 1;
    right: 1rem;
    bottom: 1.25rem;
    width: 30%;
    margin: 0;
    padding: 0;
    background: none;
    color: #fff;
    font-family: 'Exo 2', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.3;
    text-align: right;
}

@media (min-width: 768px) {
    .tf-hero-photo {
        height: 340px;
    }
    .tf-hero-photo::after {
        width: 32%;
    }
    .tf-hero-photo-caption {
        width: 22%;
        font-size: 1.2rem;
    }
}

/* ============================
   Services grid
   ============================ */
.tf-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
}
.tf-service-card {
    display: block;
    text-decoration: none;
    color: #1c1c1c;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
}
.tf-service-card img,
.tf-service-card .tf-img-placeholder {
    height: 110px;
    width: 100%;
    object-fit: cover;
    display: block;
}
.tf-service-card span {
    display: block;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.85rem;
}
.tf-service-viewall {
    background: linear-gradient(135deg, var(--tf-blue-start), var(--tf-blue-end));
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    min-height: 100%;
}
/* --tf-viewall-bg is set inline per-card via style="--tf-viewall-bg: url(...)"
   (see the services grid loop in home.html) — this rule has no effect
   unless that inline custom property is present. */
.tf-service-viewall.has-image {
    background-image: linear-gradient(135deg, rgba(0, 54, 127, 0.7), rgba(1, 119, 191, 0.7)), var(--tf-viewall-bg);
}

/* ============================
   Why choose us
   ============================ */
.tf-check-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

@media (prefers-reduced-motion: no-preference) {

    .tf-check-list li {
        opacity: 0;
        transform: translateY(3rem);
    }

    .tf-check-list li.in-view {
        animation: fade 0.6s ease-out forwards;
    }
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(3rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Individual cards */
.tf-check-list li {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 47px;
    box-sizing: border-box;

    padding: 0.75rem 1rem 0.75rem 2.05rem;
    margin-bottom: 9px;

    background: #fff;

    border: 1px solid #dfe4e9;
    border-radius: 10px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);

    color: #172334;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Orange circular marker */
.tf-check-list li::before {
    content: "";

    position: absolute;
    left: 16px;
    top: 50%;

    width: 9px;
    height: 9px;

    background: #00367f;

    border-radius: 50%;

    transform: translateY(-50%);
}

.tf-coverage-box { 
    background: #f5f8fc; 
    border: 1px solid #e2ecf7; 
    border-radius: 10px; 
    padding: 1rem; 
    margin-top: 1.5rem; 
}

/* ============================
   Testimonials
   ============================ */
.tf-testimonial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1rem;
}
.tf-testimonial-card {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 0.75rem;
    font-size: 0.8rem;
}
.tf-stars {
    color: var(--tf-orange-start);
    margin-bottom: 0.3rem;
}
.tf-testimonial-author {
    display: block;
    margin-top: 0.5rem;
    font-weight: 600;
    color: #666;
}

/* ============================
   CTA banner (full-bleed, flat — distinct from About's .tf-cta-card)
   ============================ */
.tf-cta-banner {
    background: var(--tf-blue-start);
    color: #fff;
    padding: 2rem 0;
    text-align: center;
}
.tf-cta-banner h2 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}
.tf-cta-banner a {
    margin-bottom: 0.6rem;
    padding: 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}


/* ==================================================
   ABOUT PAGE
   ================================================== */

/* Hero, divider, and values grid all share one continuous background —
   deliberately one wrapping section rather than three, so there's no
   white gap showing through at the divider between them. */
.tf-about-top-wrap {
    background: #f5f8fc;
}

/* ============================
   About hero
   ============================ */
.tf-about-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 0 2.5rem;
    align-items: center;
}
@media (max-width: 991.98px) {
    .tf-about-hero__text {
        order: 1;
    }
    .tf-about-hero__photo {
        order: 2;
    }
}
@media (min-width: 992px) {
    .tf-about-hero {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

/* Decorative section divider */
.tf-divider {
    display: flex;
    align-items: center;
    margin: 1rem 0 2rem;
}
.tf-divider::before,
.tf-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e2e2;
}
.tf-divider-icon {
    width: 18px;
    height: 18px;
    margin: 0 0.75rem;
    color: #999;
    flex-shrink: 0;
}

/* ============================
   Values grid
   ============================ */
.tf-values-section {
    padding: 1.5rem 0;
}
.tf-values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin-top: 1.25rem;
}
.tf-value-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 1rem 1.1rem;
}
.tf-value-dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tf-orange-start);
    margin-bottom: 0.5rem;
}
.tf-value-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}
.tf-value-card p {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}
@media (min-width: 768px) {
    .tf-values-grid {
        grid-template-columns: 1fr 1fr;
    }
    .tf-value-card:last-child {
        grid-column: 1 / -1;
    }
}
@media (min-width: 992px) {
    .tf-values-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    .tf-value-card:last-child {
        grid-column: auto;
    }
}
@media (max-width: 480px) {
    .tf-about-hero,
    .tf-values-section,
    .tf-team-section,
    .tf-credentials-wrap,
    .tf-cta-card-wrap {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ============================
   Team grid
   Always 2 columns, even on mobile — cards have their own border/
   padding so they read as contained tiles rather than bare photos.
   ============================ */
.tf-team-section {
    padding: 1.5rem 2rem;
}
.tf-team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    margin-top: 1.25rem;
}
.tf-team-card {
    text-align: center;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 0.6rem;
}
.tf-team-card img,
.tf-team-card__placeholder {
    width: 100%;
    height: 110px;
    border-radius: 8px;
    display: block;
}
.tf-team-card__caption {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a4a4a;
}

/* ============================
   Credentials bar (inset rounded card — matches the CTA card's
   containment rather than running full-bleed edge to edge)
   ============================ */
.tf-credentials-wrap {
    padding: 1.5rem;
}
.tf-credentials-bar {
    background: var(--tf-blue-start);
    color: #fff;
    text-align: center;
    padding: 0.9rem 1.25rem;
    border-radius: 14px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ============================
   CTA card (rounded, gradient — distinct from Home's .tf-cta-banner)
   ============================ */
.tf-cta-card-wrap {
    padding: 2rem;
}
.tf-cta-card {
    position: relative;
    background: linear-gradient(135deg, var(--tf-blue-start), var(--tf-blue-end));
    border-radius: 18px;
    padding: 2rem 1.5rem;
    text-align: center;
    color: #fff;
    overflow: hidden;
}
.tf-cta-card::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}
.tf-cta-card h2 {
    position: relative;
    font-size: 1.15rem;
    margin-bottom: 1.25rem;
}
.tf-cta-card__actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
.tf-cta-card__actions a {
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}


/* ==================================================
   CONTACT PAGE
   ================================================== */

.tf-contact-hero {
    background: linear-gradient(160deg, var(--tf-blue-start), var(--tf-blue-end));
    color: #fff;
    padding: 2rem 0 2.5rem;
}
.tf-contact-details {
    margin-top: 2rem;
}
.tf-contact-detail-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem;
}
.tf-contact-detail-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}
.tf-contact-detail-list a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
.tf-contact-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #cfe4ff;
}

.tf-coverage-map {
    width: 100%;
    height: 260px;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f8fc;
}

.tf-enquiry-section {
    padding: 2.5rem 0;
}
.tf-enquiry-section h2 {
    margin-bottom: 1.25rem;
}

.tf-contact-form label {
    font-size: 0.85rem;
    font-weight: 600;
    display: block;
    margin-top: 0.9rem;
}
.tf-contact-form input,
.tf-contact-form textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    margin-top: 0.25rem;
    font-family: inherit;
    font-size: 1rem;
}
.tf-contact-form .tf-btn-primary {
    margin-top: 1.25rem;
}

.tf-spam-note {
    text-align: center;
    font-size: 0.75rem;
    color: #999;
    margin: 0.6rem 0 0;
}

.tf-callback-banner {
    background: var(--tf-blue-start);
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}
.tf-callback-banner p {
    margin: 0;
    font-weight: 600;
}
.tf-callback-banner a {
    color: #fff;
    text-decoration: underline;
}

/* Honeypot field — visually hidden, still reachable by bots that ignore CSS */
.tf-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 480px) {
    .tf-enquiry-section {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ==================================================
   SUCCESS PAGE
   ================================================== */
.tf-success-wrap {
    background: #f5f8fc;
    padding: 3rem 0;
}
.tf-success {
    text-align: center;
    max-width: 460px;
}
.tf-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tf-blue-start);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}
.tf-success-icon svg {
    width: 26px;
    height: 26px;
}
.tf-success h1 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0.5rem 0;
}
.tf-success-sub {
    color: #4a4a4a;
    margin-bottom: 1.5rem;
}
.tf-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}
.tf-success-actions a {
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ==================================================
   QUOTE WIZARD 
   ================================================== */

.tf-quote-wizard-wrap {
    background: #f5f8fc;
    padding: 2rem 0 3rem;
}

.tf-quote-wizard {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    max-width: 560px;
}

.tf-quote-progress {
    display: flex !important;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.tf-quote-progress__step {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: #999;
    flex: 1;
    position: relative;
}

.tf-quote-progress__step span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eee;
    color: #999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}

.tf-quote-progress__step.is-active span,
.tf-quote-progress__step.is-complete span {
    background: var(--tf-orange-start);
    color: #fff;
}

.tf-quote-progress__step.is-active {
    color: #1c1c1c;
    font-weight: 600;
}

.tf-quote-step {
    display: none !important;
}

.tf-quote-step.is-active {
    display: block !important;
}

.tf-quote-step textarea {
    min-height: 120px;
    max-height: 220px;
    resize: vertical;
}

.tf-quote-nav {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.tf-quote-nav button {
    white-space: nowrap;
}

.tf-quote-step label {
    font-size: 0.85rem;
    font-weight: 600;
    display: block;
    margin-top: 0.9rem;
}
.tf-quote-step input,
.tf-quote-step textarea,
.tf-quote-step select {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    margin-top: 0.25rem;
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
}

.tf-dropdown__toggle.tf-dropdown--error {
    border-color: #dc3545;
}

@media (max-width: 480px) {
    .tf-quote-wizard-wrap {
        padding: 1.5rem 0 3rem;
    }

    .tf-quote-wizard {
        padding: 1rem;
        border-radius: 10px;
    }

    .tf-quote-progress__step {
        font-size: 0.65rem;
    }

    .tf-quote-progress__step span {
        width: 24px;
        height: 24px;
    }
}

/* Services page */

.tf-services-grid--full {
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .tf-services-grid--full {
        grid-template-columns: repeat(3, 1fr);
    }
}
.tf-service-tile {
    background: #f5f8fc;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 1.25rem;
}
.tf-service-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(160deg, var(--tf-blue-start), var(--tf-blue-end));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
}
.tf-service-icon svg {
    width: 26px;
    height: 26px;
}
.tf-service-tile h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    color: #1c1c1c;
    line-height: 1.3;
}
.tf-service-tile p {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* ==================================================
   SURVEYS PAGE
   ================================================== */
.tf-steps-grid {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 1.25rem;
}
.tf-step-card {
    position: relative;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 1.25rem 1.1rem 1.1rem;
}
.tf-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tf-orange-start);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}
.tf-step-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
    color: #1c1c1c;
}
.tf-step-card p {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

/* ==================================================
   REVIEWS PAGE
   ================================================== */

.tf-reviews-hero {
    text-align: left;
}

.tf-reviews-hero h1 {
    margin-bottom: 0.5rem;
}

.tf-google-summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.tf-google-stars {
    color: #ffb000;
    letter-spacing: 0.04em;
    font-size: 0.9rem;
}


/* Review cards — same look as the home page cards */
.tf-testimonial-grid--full {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.tf-testimonial-grid--full .tf-testimonial-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e6ec;
    border-radius: 0.75rem;
    padding: 1.25rem;
    font-size: 0.9rem;
    box-shadow: none;
}

.tf-testimonial-grid--full .tf-stars {
    color: #f04c23;
    font-size: inherit;
    line-height: normal;
    letter-spacing: 0.1em;
    margin-bottom: 0;
}

.tf-testimonial-grid--full .tf-testimonial-card p {
    margin: 0.6rem 0 1rem;
    color: #333;
    font-size: inherit;
    line-height: inherit;
}

.tf-testimonial-grid--full .tf-testimonial-author {
    display: block;
    margin-top: auto;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #555;
}

/* Tablet and up: three cards per row */
@media (min-width: 768px) {
    .tf-testimonial-grid--full {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* Google link */

.tf-all-reviews {
    text-align: center;
    margin: 0.85rem 0 1.25rem;
}

.tf-all-reviews a {
    display: inline-block;
    color: #0066ff;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tf-all-reviews a:hover {
    color: #004fc4;
}


/* Empty state */

.tf-reviews-empty {
    background: #f5f8fc;
    border: 1px solid #e2ecf7;
    border-radius: 10px;
    padding: 2rem 1.5rem;
    text-align: center;
}

.tf-reviews-empty p {
    color: #4a4a4a;
    margin-bottom: 1rem;
}

/* ============================
   Small phones (Galaxy S25 = 360px)
   ============================ */
.tf-footer-links li { overflow-wrap: anywhere; }

@media (max-width: 400px) {
    .tf-footer .container { padding-left: 1rem; padding-right: 1rem; }
    .tf-footer-links a[href^="mailto"] { font-size: 0.85rem; }

    .tf-hero h1 { font-size: 1.5rem; }
    .tf-hero-photo-caption { font-size: 0.9rem; }

    .tf-mobile-bar-item { font-size: 0.8rem; }
}

/* Very small phones (320px and below) */
@media (max-width: 340px) {
    .tf-mobile-bar-item i { display: none; }
    .tf-footer .col-5,
    .tf-footer .col-7 { flex: 0 0 100%; max-width: 100%; }
}