/* Minimal custom styles layered on Bootstrap */
:root {
    --cf-primary:#0a66ff;
    --brand-blue: #0d6efd;
    --brand-red: #bb0202;
    --brand-dark-blue: #24388e;
    --cookie-banner-offset: 0px;
}
html {
    overflow-x: hidden;
}
body {
    --bs-font-sans-serif: 'Inter', sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    overflow-x: hidden;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.hero .btn { text-decoration: none; }
.reviews .review-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.review{border:1px solid #eee;border-radius:10px;padding:16px;background:#fff}
.stars span{display:inline-block;position:relative;font-size:20px;line-height:1}
.stars span::before{content:'\2605\2605\2605\2605\2605';letter-spacing:3px;color:#ddd}
.stars span::after{content:'\2605\2605\2605\2605\2605';letter-spacing:3px;color:#fbbf24;position:absolute;left:0;top:0;width:calc(var(--rating)/5 * 100%);overflow:hidden;white-space:nowrap}

/* Star bar already present; add subtle card polish */
.card{border-radius:12px}
.card-body{padding:1rem 1rem 0.25rem}
.card-footer{padding:0.25rem 1rem 1rem}

.card.shadow-sm{box-shadow:0 .25rem .5rem rgba(0,0,0,.05)}
.badge.text-bg-light{background:#f3f4f6;color:#111}


.rev-card{flex:0 0 90%;max-width:90%}
@media(min-width:768px){ .rev-card{flex-basis:60%;max-width:60%} }

.ratio img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Floating labels clarity */
.form-floating > label { color:#6c757d; }
.form-floating .form-control:focus ~ label,
.form-floating .form-control:not(:placeholder-shown) ~ label {
    opacity:.8;
}


.card{border-radius:12px}
.card.shadow-sm{box-shadow:0 .25rem .75rem rgba(0,0,0,.06)}
.badge.text-bg-light{background:#f3f4f6;color:#111}

/* Gradient hero already used on Areas/About */
.area-hero{
    background: radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,.15), transparent 60%),
    linear-gradient(135deg, #0d6efd, #0b5ed7);
}

/* Feature tiles (symptom/problem grid) */
.feature-tile{
    border:1px solid #eee;border-radius:10px;padding:.85rem;background:#fff;display:flex;align-items:center;min-height:64px
}
.feature-tile span{font-weight:500}

/* ===== Hero (split with image + wave) ===== */
.hero-split{
    position:relative; padding:3.5rem 0 2.5rem;
    background: linear-gradient(135deg,#0b5ed7,#084298);
    overflow:hidden;
}
.hero-accent-blue{ background: linear-gradient(135deg,#0d6efd,#0b5ed7); }
.hero-accent-navy{ background: linear-gradient(135deg,#0b5ed7,#0a58ca); }

.hero-photo{ border-radius:16px; overflow:hidden; box-shadow:0 .75rem 2rem rgba(0,0,0,.25); }
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.hero-usp{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.hero-usp li{ display:flex; align-items:center; gap:.5rem; opacity:.9; }
.hero-usp .bi{ width:1rem; height:1rem; fill:currentColor; }

.hero-wave{
    position:absolute; left:0; right:0; bottom:-1px; height:32px;
    background: radial-gradient(120px 24px at 10% 0, rgba(255,255,255,.65), transparent 70%),
    radial-gradient(140px 28px at 35% 0, rgba(255,255,255,.45), transparent 70%),
    radial-gradient(100px 20px at 60% 0, rgba(255,255,255,.4), transparent 70%),
    radial-gradient(160px 32px at 85% 0, rgba(255,255,255,.5), transparent 70%);
}

/* ===== Section styles ===== */
.section-soft{
    padding:3rem 0; background:
        radial-gradient(500px 200px at 15% -10%, rgba(13,110,253,.06), transparent 60%),
        radial-gradient(600px 240px at 90% -10%, rgba(13,110,253,.04), transparent 60%),
        #f8f9fa;
}
.section-split{ padding:3rem 0; }

.img-frame{ border-radius:16px; overflow:hidden; box-shadow:0 .5rem 1.25rem rgba(0,0,0,.08); }
.img-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== Tile cards (symptoms/problems) ===== */
.tile-card{
    border:1px solid #eee; border-radius:12px; background:#fff; padding:1rem;
    display:flex; align-items:center; gap:.5rem; min-height:72px; position:relative;
}
.tile-card .tile-dot{
    width:10px; height:10px; border-radius:999px; background:#0d6efd; display:inline-block;
}

/* ===== Timeline ===== */
.timeline{ counter-reset: step; list-style:none; padding-left:0; margin:0 }
.timeline li{ position:relative; padding-left:2.25rem; margin:.75rem 0; }
.timeline li::before{
    counter-increment: step; content: counter(step);
    position:absolute; left:0; top:.1rem;
    width:1.5rem; height:1.5rem; border-radius:999px; display:inline-grid; place-items:center;
    background:#0d6efd; color:#fff; font-size:.85rem; font-weight:700;
}

/* ===== Icon list ===== */
.icon-list{ list-style:none; padding-left:0; margin:0; }
.icon-list li{ display:flex; gap:.5rem; align-items:flex-start; margin:.5rem 0; }
.icon-list .bi{ width:1.1rem; height:1.1rem; flex:0 0 1.1rem; fill:currentColor; color:#198754; }

/* Home: service cards */
.service-card{display:grid;grid-template-columns:120px 1fr;gap:1rem;border:1px solid #eee;border-radius:14px;background:#fff;overflow:hidden}
.service-card__media{position:relative}
.service-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.service-card__body{padding:1rem 1rem 1rem 0}
@media (min-width:992px){
    .service-card{grid-template-columns:220px 1fr}
}

/* Home: mini features */
.mini-feature{display:flex;gap:.75rem;align-items:flex-start}
.mini-feature .bi{width:1.25rem;height:1.25rem;flex:0 0 1.25rem;color:#0d6efd;fill:currentColor}

/* Reuse hero/section styles from service pages */
.hero-split{position:relative;padding:3.5rem 0 2.5rem;background:linear-gradient(135deg,#0d6efd,#0b5ed7);overflow:hidden}
.hero-accent-blue{background:linear-gradient(135deg,#0d6efd,#0b5ed7)}
.hero-photo{border-radius:16px;overflow:hidden;box-shadow:0 .75rem 2rem rgba(0,0,0,.25)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hero-usp{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.hero-usp li{display:flex;align-items:center;gap:.5rem;opacity:.9}
.hero-usp .bi{width:1rem;height:1rem;fill:currentColor}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;height:32px;
    background:radial-gradient(120px 24px at 10% 0,rgba(255,255,255,.65),transparent 70%),
    radial-gradient(140px 28px at 35% 0,rgba(255,255,255,.45),transparent 70%),
    radial-gradient(100px 20px at 60% 0,rgba(255,255,255,.4),transparent 70%),
    radial-gradient(160px 32px at 85% 0,rgba(255,255,255,.5),transparent 70%)
}

/* Soft patterned section */
.section-soft{
    background:
            radial-gradient(520px 220px at 12% -10%, rgba(13,110,253,.06), transparent 60%),
            radial-gradient(580px 220px at 92% -10%, rgba(13,110,253,.04), transparent 60%),
            #f8f9fa;
}

/* ===== Marquee hero ===== */
.hero-marquee{
    position:relative; padding:4rem 0 6rem; overflow:hidden;
    background: linear-gradient(135deg,#0d6efd,#0b5ed7);
    color:#fff;
}
.hero-blobs{
    position:absolute; inset:0; pointer-events:none;
    background:
            radial-gradient(1000px 600px at -10% -10%, rgba(255,255,255,.12), transparent 60%),
            radial-gradient(700px 420px at 110% -20%, rgba(255,255,255,.08), transparent 60%);
}
.photo-stack{ position:relative; height:420px; }
.photo-stack .photo{ position:absolute; border-radius:18px; overflow:hidden; box-shadow:0 .75rem 2rem rgba(0,0,0,.25); }
.photo-stack .primary{ inset:0 0 60px 60px; }
.photo-stack .secondary{ width:48%; height:56%; right:0; bottom:0; transform:translate(8%, 8%); }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.trust-card{
    position:relative; margin-top:1.25rem; background:#fff; color:#111;
    border-radius:14px; padding:.85rem 1rem;
}
@media(min-width:992px){
    .trust-card{ position:absolute; left:0; bottom:-26px; margin:0; }
}

/* hero USPs reuse your .hero-usp base; ensure white icons */
.hero-usp .bi{ color:#fff; }

/* ===== Tiles row ===== */
.tiles-wrap{ padding:3rem 0; background:#fff; }
.tile-link{ text-decoration:none; display:block }
.tile{
    position:relative; border-radius:16px; overflow:hidden; min-height:220px;
    box-shadow:0 .5rem 1.25rem rgba(0,0,0,.08); transform:translateZ(0);
}
.tile-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile-overlay{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.45) 100%);
}
.tile-body{
    position:absolute; left:0; right:0; bottom:0; padding:1rem 1rem 1.1rem;
    color:#fff;
}
.tile:hover{ transform:translateY(-2px); box-shadow:0 .8rem 1.8rem rgba(0,0,0,.12); }

.cta-bps {
    font-size: 1.1rem;
    font-weight: 600;
    color: #24378f;
    max-width: 210px;
}

.cfd-title-h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #24378f;
}
.cta-em-text {
    color: #bb0202;
}

.cfd-search-group {
    background-color: #24378f;
    color:white;
    border-color: #24378f;
}

.cfd-hero-badge {
    background:white;
    color:#24388e;
    font-size: 0.7rem;
}

.cfd-search-input {
    border-color: #24378f;
}


.cfd-footer-headings {
    color: #24378f;
    font-weight: 600;
    font-size: 1.2rem;
}

.cfd-mascot {
    height: auto;
    width: 120px;
    position: absolute;
    right: -10px;
    bottom: 110px;
}

.cfd-card-overlay {
    background-image: linear-gradient(to top, #051937, #002d64db, #00429591, #0058c8d4, #0d6efde3);
    transition: 0.3s;
    opacity: 0.9;
}
.cfd-card-overlay:hover {
    background-image: linear-gradient(to top, #051937, #002d64db, rgba(0, 66, 149, 0.79), rgba(0, 88, 200, 0.89), #0d6efde3);
    opacity: 1;
}

.hide-btn {
    display: none;
    opacity: 0;
}

.cfd-hero1 {
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.87);
    background-image: url("/assets/img/drain-unblocking-west-midlands.jpg");
    background-attachment: fixed;
    background-position: 50% 45%;
    background-blend-mode: overlay;
    min-height: 460px;
}

.cfd-title {
    color: #24388e;
    font-weight: 700 !important;
}
.cfd-display {
    color: #0d6efd;
    font-weight: 700 !important;
}

.cfd-about-hero {
  background-image: linear-gradient(to bottom, rgba(36, 56, 142, 0.8) 0%, rgba(13, 110, 253, 0.96) 59%, rgba(0, 0, 0, 0.96) 100%),
  url("/assets/img/cfdvan.webp");
    background-position: 50% 60%;
    background-repeat: no-repeat;
    background-size: cover;
}

.cfd-cta-bg {
    background-image: linear-gradient(to bottom, rgba(36, 56, 142, 0.8) 0%, rgba(13, 110, 253, 0.91) 59%, rgba(0, 0, 0, 0.79) 100%),
    url("/assets/img/waterbg.jpg");
    background-position: 20% 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.cfd-area-badge {
    background-color: #cfe2ff!important;
    color: #1b2e2e !important;
}

.zoom {
    transition: transform .4s;
}
.zoom:hover {
    transform: scale(1.05);
}

@media (min-width:500px) {
    .cfd-mascot {
        height: auto;
        width: 260px;
        position: absolute;
        right: 20px;
        bottom: 5px;
        transform: rotateY(180deg);
    }
    .cta-bps {
        font-size: 1.1rem;
        font-weight: 600;
        color: #24378f;
        max-width: 320px;
    }
    .cfd-hero-badge {
        background:white;
        color:#24388e;
        font-size: 1rem;
    }
}

@media (min-width:1020px) {
    .cfd-mascot {
        height: auto;
        width: 240px;
        position: absolute;
        right: -100px;
        bottom: 5px;
        transform: rotateY(180deg);
    }
}
@media (min-width:1420px) {
    .cfd-mascot {
        height: auto;
        width: 280px;
        position: absolute;
        right: 40px;
        bottom: -20px;
        transform: rotateY(180deg);
    }
}

/* ===== Cookie banner ===== */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    background: linear-gradient(135deg, #24388e, #0d6efd);
    color: #fff;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.cookie-banner a {
    color: #fff;
    text-decoration: underline;
}

.cookie-banner__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.cookie-banner__title {
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.cookie-banner__text {
    margin: 0;
    font-size: 0.95rem;
    max-width: 640px;
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.cookie-preferences {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    gap: 0.75rem;
}

.cookie-preferences__item {
    display: grid;
    gap: 0.35rem;
}

.cookie-preferences__label {
    font-weight: 600;
    margin: 0;
}

.cookie-preferences__help {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.cookie-preferences__status {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.9;
}

.cookie-preferences__actions {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .cookie-banner__inner {
        gap: 0.75rem;
    }
    .cookie-banner__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .cookie-banner__actions .btn {
        width: 100%;
        white-space: normal;
    }
    .cookie-banner__text {
        max-width: 100%;
    }
}

/* ===== WhatsApp floating button ===== */
.whatsapp-float {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + var(--cookie-banner-offset));
    z-index: 1055;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #25d366;
    color: #fff;
    border-radius: 999px;
    padding: 0.7rem 1rem;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

.whatsapp-float:hover {
    background: #1ebe5c;
    color: #fff;
    text-decoration: none;
}

.whatsapp-float__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 576px) {
    .whatsapp-float {
        padding: 0.7rem;
    }
    .whatsapp-float__label {
        display: none;
    }
}

.blog-content {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #1f2a44;
}

.blog-content > * + * {
    margin-top: 1rem;
}

.blog-content > :first-child {
    margin-top: 0;
}

.blog-content h2,
.blog-content h3,
.blog-content h4 {
    color: var(--brand-dark-blue);
    font-weight: 700;
    line-height: 1.2;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.blog-content h2 {
    font-size: 1.75rem;
}

.blog-content h3 {
    font-size: 1.4rem;
}

.blog-content h4 {
    font-size: 1.2rem;
}

.blog-content p {
    margin-bottom: 0;
}

.blog-content ul,
.blog-content ol {
    padding-left: 1.25rem;
    margin-bottom: 0;
}

.blog-content li + li {
    margin-top: 0.4rem;
}

.blog-content a {
    color: var(--brand-blue);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.blog-content a:hover {
    color: var(--brand-dark-blue);
}

.blog-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--brand-blue);
    background: #f5f7ff;
    color: #223057;
    border-radius: 12px;
}

.blog-content img,
.blog-content picture,
.blog-content .img-frame {
    border-radius: 16px;
}

.hero-van-media picture,
.hero-van-media img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 20px 40px);
    display: block;
}

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.trust-badges picture,
.trust-badges img {
    display: block;
    width: auto;
    height: 36px;
    max-width: 140px;
    object-fit: contain;
}

@media (max-width: 576px) {
    .trust-badges {
        gap: 0.5rem;
    }

    .trust-badges picture,
    .trust-badges img {
        height: 32px;
        max-width: 120px;
    }
}