:root{
 --navy:#063f59; --navy2:#052f43; --teal:#0a9eb0; --cyan:#dff7fb; --pale:#eef9fc;
 --amber:#ffad3d; --amber2:#ffbf63; --ink:#123f56; --muted:#607b88; --white:#fff;
 --line:#d9edf2; --shadow:0 14px 34px rgba(4,55,76,.10);
 --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#f4fafc;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(1160px,calc(100% - 36px));margin:auto}
.topline{height:4px;background:linear-gradient(90deg,var(--navy),var(--teal),var(--amber))}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid #e4f0f3}
.nav{min-height:74px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:12px;min-width:255px}
.brand img{width:54px;height:54px;border-radius:50%;object-fit:cover}
.brand strong{display:block;font-size:16px;line-height:1.2;color:var(--navy)}
.brand span{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.menu{display:flex;align-items:center;gap:17px;font-size:12px;font-weight:700;flex:1;justify-content:center}
.menu a{padding:8px 2px;color:#234f63;position:relative}
.menu a:hover,.menu a.active{color:var(--teal)}
.menu a.active:after{content:"";position:absolute;height:3px;left:0;right:0;bottom:0;background:var(--amber);border-radius:4px}
.nav-actions{display:flex;gap:9px}
.btn{border:0;border-radius:999px;padding:12px 18px;font-weight:800;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.2s transform,.2s box-shadow}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(4,63,89,.15)}
.btn svg,.icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn-amber{background:linear-gradient(135deg,var(--amber2),#ff9f27);color:#173c4b}
.btn-teal{background:linear-gradient(135deg,#0c9eb1,#087f9c);color:#fff}
.btn-outline{background:#fff;border:1px solid var(--line);color:var(--navy)}
.menu-toggle{display:none;border:0;background:transparent;font-size:25px;color:var(--navy)}
.hero{
  position:relative;
  overflow:hidden;
  background:
    url('kidney-hero.jpg')
    center center / 100% 100% no-repeat;
}
.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;pointer-events:none}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(235, 249, 252, 0.08);
    pointer-events: none;
}

.hero:after{width:330px;height:330px;left:-150px;bottom:-180px;background:rgba(255,255,255,.8)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;min-height:455px;position:relative;z-index:2}
.eyebrow{font-size:10px;letter-spacing:4px;font-weight:900;color:#117e99;margin-bottom:13px}
h1{font-size:44px;line-height:1.12;margin:0 0 14px;color:#073f59;letter-spacing:-1.2px}
h1 em{font-style:normal;color:#0a9fb0}
.lead{font-size:15px;max-width:580px;color:#234f63;margin:0 0 24px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-visual{height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.kidney-glow{position:absolute;width:390px;height:390px;border-radius:50%;background:radial-gradient(circle,rgba(9,168,193,.18),transparent 65%);filter:blur(3px)}
.kidney-mark{display:none}
.doctor-card{position:relative;width:275px;background:#fff;border:1px solid rgba(255,255,255,.9);border-radius:16px;overflow:hidden;box-shadow:0 18px 45px rgba(5,64,86,.18);z-index:3}
.doctor-card img{width:100%;height:245px;object-fit:cover;object-position:center top}
.doctor-card .caption{padding:13px 16px}
.doctor-card strong{font-size:15px;display:block}
.doctor-card small{color:#0b91a5}
.section{padding:52px 0}
.section.alt{background:#fff}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}
.kicker{font-size:11px;color:#0b92a7;font-weight:900;letter-spacing:1.4px;text-transform:uppercase}
h2{font-size:27px;line-height:1.2;margin:4px 0;color:var(--navy)}
.section-head p{margin:5px 0 0;color:var(--muted);font-size:13px}
.trust-row{display:flex;align-items:center;gap:12px;font-size:12px;color:#27566a;font-weight:700}
.trust-dot{width:10px;height:10px;border-radius:50%;background:#0da4b6;box-shadow:0 0 0 5px #dcf6fa}
.centres-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.center-card{background:#fff;border:1px solid #e2f1f4;border-radius:14px;padding:18px;box-shadow:0 7px 20px rgba(8,73,94,.06);transition:.22s}
.center-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.center-card .title{display:flex;gap:9px;align-items:flex-start;font-size:13px;font-weight:900;color:#0c4661}
.center-card .pin{color:#0a91a7;flex:0 0 auto}
.center-card .pin svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}
.center-card p{font-size:11px;color:#66818c;margin:8px 0 12px;min-height:38px}
.center-card .mini-actions{display:flex;gap:7px;flex-wrap:wrap}
.mini{font-size:10px;font-weight:800;color:#067b90;background:#e5f8fb;padding:8px 10px;border-radius:9px;display:inline-flex;align-items:center;gap:5px}
.mini svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.center-card.placeholder{border:1.5px dashed #66baca;background:linear-gradient(135deg,#f2fbfc,#e4f7fa);display:flex;align-items:center;justify-content:center;text-align:center}
.center-card.placeholder .plus{font-size:25px;color:#0b91a7}
.center-card.placeholder p{min-height:0}
.services{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.service{background:#fff;border:1px solid #e2f1f4;border-radius:14px;padding:22px 14px;text-align:center;box-shadow:0 6px 18px rgba(8,73,94,.06);transition:.2s}
.service:hover{transform:translateY(-4px)}
.service .service-icon{width:43px;height:43px;margin:0 auto 11px;border-radius:13px;background:#e6f8fb;color:#078ea4;display:grid;place-items:center}
.service .service-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service strong{font-size:12px;line-height:1.3;display:block}
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:20px}
.info-panel{border-radius:16px;padding:27px;background:linear-gradient(135deg,#e5f8fb,#d5f2f7);border:1px solid #d2edf2;position:relative;overflow:hidden}

.info-panel:after{
    content:"";
    position:absolute;
    right:-40px;
    bottom:-10px;
    width:430px;
    height:330px;
    background:url('wide_clean_modern_medical_themed_web_graphic_des.png')
        center center / cover no-repeat;
    border-radius:50%;
    pointer-events:none;
    opacity:1;
}


.info-panel h3,.form-card h3{margin:0 0 4px;font-size:17px;color:var(--navy)}
.info-panel .sub,.form-card .sub{font-size:11px;color:#5e7b88;margin-bottom:17px}


.checklist{display:grid;gap:10px;margin:0 0 18px;padding:0;list-style:none;position:relative;z-index:2}
.checklist li{font-size:12px;color:#315e70;display:flex;gap:9px;align-items:flex-start}
.check{width:17px;height:17px;border-radius:50%;background:#0ba1b4;color:#fff;font-size:10px;display:grid;place-items:center;flex:0 0 auto}
.form-card{background:#fff;border:1px solid #e1eef1;border-radius:16px;padding:25px;box-shadow:0 9px 24px rgba(8,73,94,.07)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
label{font-size:11px;font-weight:800;color:#315b6e}
input,select,textarea{width:100%;border:1px solid #d6e8ed;border-radius:8px;padding:11px 12px;outline:none;background:#fbfeff;color:#244e60;font-size:12px}
input:focus,select:focus,textarea:focus{border-color:#0a9eb0;box-shadow:0 0 0 3px rgba(10,158,176,.12)}
textarea{min-height:85px;resize:vertical}
.form-note{font-size:10px;color:#758c96;margin-top:9px}
.page-hero{background:linear-gradient(110deg,#eaf8fc,#d6f3f8);padding:52px 0;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:38px}
.breadcrumb{font-size:11px;color:#68828d;margin-bottom:10px}
.content-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:24px}
.card{background:#fff;border:1px solid #e2eff2;border-radius:16px;padding:25px;box-shadow:0 7px 20px rgba(8,73,94,.06)}
.card h3{margin-top:0;color:var(--navy)}
.card p,.card li{font-size:13px;color:#516f7c}
.notice{border-left:4px solid var(--amber);background:#fff8ed;padding:14px 16px;border-radius:8px;font-size:12px;color:#6b5a3f;margin:18px 0}
.data-table{width:100%;border-collapse:collapse;font-size:12px;background:#fff;border-radius:12px;overflow:hidden}
.data-table th,.data-table td{text-align:left;padding:12px;border-bottom:1px solid #e5eff2;vertical-align:top}
.data-table th{background:#eef9fb;color:#164f65;font-size:11px}
.faq{display:grid;gap:10px}
details{background:#fff;border:1px solid #e0eef2;border-radius:12px;padding:14px 16px}
summary{font-weight:800;font-size:13px;color:var(--navy);cursor:pointer}
details p{font-size:12px;color:#5a7581;margin:10px 0 0}
.profile{display:grid;grid-template-columns:260px 1fr;gap:25px;align-items:start}
.profile img{width:100%;border-radius:16px;box-shadow:var(--shadow)}
.contact-list{display:grid;gap:11px}
.contact-item{display:flex;gap:10px;align-items:flex-start;padding:13px;border:1px solid #e0eef2;border-radius:11px;background:#fff}
.contact-item .icon{color:#078fa5}
.contact-item strong{font-size:12px;display:block}
.contact-item span{font-size:11px;color:#67818b}
footer{background:var(--navy2);color:#d7eef4;padding:42px 0 18px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px}
footer .brand strong{color:#fff} footer .brand span{color:#8db4c2}
footer h4{font-size:12px;color:#fff;margin:0 0 10px}
footer a,footer p{font-size:11px;color:#a8ccd5;display:block;margin:6px 0}
.copyright{border-top:1px solid rgba(255,255,255,.13);margin-top:26px;padding-top:14px;display:flex;justify-content:space-between;gap:15px;font-size:9px;color:#82aeba}
.mobile-bar{display:none}
.toast{position:fixed;right:20px;bottom:20px;background:var(--navy2);color:#fff;padding:14px 18px;border-radius:12px;box-shadow:var(--shadow);font-size:12px;display:none;z-index:100}
@media(max-width:1050px){
 .menu{gap:10px}.brand{min-width:220px}.nav-actions .btn{padding:10px 12px}.centres-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
 body{padding-bottom:68px}.container{width:min(100% - 28px,620px)}
 header{position:sticky}.nav{min-height:66px}.brand{min-width:0;flex:1}.brand img{width:45px;height:45px}.brand strong{font-size:12px}.brand span{display:none}
 .menu,.nav-actions{display:none}.menu-toggle{display:block}
 .hero{min-height:auto;background-position:center right;background-size:100% 55%;background-position:center 35%;background-repeat:no-repeat}.hero-grid{grid-template-columns:1fr;min-height:auto;padding:44px 0 36px}.hero-visual{margin-top:30px;min-height:290px}.doctor-card{width:235px}.doctor-card img{height:210px}
 h1{font-size:33px}.lead{font-size:13px}.section{padding:38px 0}.section-head{display:block}.trust-row{margin-top:12px}.centres-grid{grid-template-columns:1fr 1fr}.services{grid-template-columns:repeat(2,1fr)}.service:last-child{grid-column:1/-1}
 .split,.content-grid{grid-template-columns:1fr}.page-hero{padding:38px 0}.page-hero h1{font-size:32px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
 .footer-grid{grid-template-columns:1fr 1fr}.profile{grid-template-columns:1fr}.profile img{max-width:270px}
 .mobile-bar{position:fixed;bottom:0;left:0;right:0;height:62px;background:rgba(4,47,67,.98);display:grid;grid-template-columns:1fr 1fr 1.2fr;z-index:90;box-shadow:0 -5px 20px rgba(0,0,0,.15)}
 .mobile-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:800;gap:2px}.mobile-bar a svg{width:17px;height:17px}.mobile-bar a:last-child{background:linear-gradient(135deg,var(--amber2),#ff9f27);color:#173c4b}
 .copyright{display:block}.copyright span{display:block;margin-top:6px}
}
@media(max-width:480px){
 .centres-grid{grid-template-columns:1fr}.services{grid-template-columns:1fr 1fr}.hero-actions .btn{width:100%}.brand strong{max-width:175px}.card{padding:20px}
}

.form-card h3 svg{
  width:18px;
  height:18px;
  display:inline-block;
  vertical-align:-3px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Final Design 1 reference matching — hero composition */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.footer-contact{display:flex!important;align-items:center;gap:8px}.footer-contact svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mobile-menu{display:none}

/* Desktop: text stays left, kidney artwork occupies the central zone, doctor card stays at far right. */
.hero{position:relative;overflow:hidden;background:linear-gradient(110deg,#effaff 0%,#e8f8fc 52%,#d8f2f7 100%)}
.hero:before{content:"";position:absolute;z-index:0;top:0;bottom:0;left:30%;width:46%;background:url('kidney-hero.jpg') center center/cover no-repeat;opacity:1;pointer-events:none}
.hero-grid{position:relative;z-index:2;grid-template-columns:1.05fr .95fr}
.hero-grid>div:first-child{position:relative;z-index:4}
.hero-visual{justify-content:flex-end;padding-right:18px;position:relative;z-index:5;min-height:100%}
.kidney-glow{display:none}.kidney-mark{display:none}
.doctor-card{width:260px;position:relative;z-index:6}
.services .service{min-height:126px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.services .service strong{font-size:12px}

@media(max-width:820px){
 body{padding-bottom:70px}
 header{position:sticky;top:0;z-index:100}
 .nav{min-height:66px;gap:10px}
 .brand img{width:46px;height:46px}.brand strong{font-size:12px;line-height:1.15}.brand span{display:none}
 .menu,.nav-actions{display:none}
 .menu-toggle{display:block;width:40px;height:40px;font-size:0;position:relative;border:0;background:transparent;color:var(--navy);cursor:pointer}
 .menu-toggle:before{content:'☰';font-size:23px;line-height:40px}
 .mobile-menu{position:fixed;top:70px;left:12px;right:12px;background:#fff;border:1px solid #dbecef;border-radius:14px;box-shadow:0 16px 40px rgba(4,55,76,.18);z-index:80;padding:10px;display:none}
 .mobile-menu.open{display:grid}
 .mobile-menu>a{padding:11px 12px;border-bottom:1px solid #edf5f6;font-size:12px;font-weight:800;color:var(--navy)}
 .mobile-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 0 0}.mobile-menu-actions .btn{padding:11px 8px;font-size:11px}

 /* Mobile reference order: header -> kidney/doctor visual -> headline -> copy -> actions. */
 .hero{background:linear-gradient(180deg,#eefaff 0%,#e8f8fc 100%);min-height:0}
 .hero:before{display:none}
 .hero-grid{display:flex;flex-direction:column;min-height:0;padding:0 0 24px;align-items:stretch}

.hero-visual{
        height:265px;
        min-height:265px;
        background-image:url('kidney-hero.jpg');
        background-repeat:no-repeat;
        background-size:cover;
        background-position:75% center;
    }


 .hero-grid>div:first-child{order:2;padding-top:25px;position:relative;z-index:5}
 .hero-grid>div:first-child:before{content:"";position:absolute;inset:0 -14px;background:linear-gradient(180deg,rgba(239,250,255,.30) 0%,rgba(239,250,255,.82) 62%,rgba(239,250,255,1) 100%);z-index:-1}
.doctor-card{
        width:165px;
        margin:22px 0 0 auto;
    }

 .doctor-card img{height:158px}.doctor-card .caption{padding:9px 11px}.doctor-card strong{font-size:12px}.doctor-card small{font-size:10px}
 h1{font-size:31px;letter-spacing:-.7px;line-height:1.13}.lead{font-size:12.5px;max-width:100%;margin-bottom:18px}
 .hero-actions{gap:8px}.hero-actions .btn{width:auto;flex:1;min-width:0;padding:10px 9px;font-size:10px}
 .section{padding:34px 0}.section-head{margin-bottom:17px}.section-head p{font-size:11px}.trust-row{font-size:10px;gap:7px}
 .centres-grid{grid-template-columns:1fr;gap:8px}
 .center-card{padding:11px 12px;border-radius:10px;min-height:52px;display:flex;align-items:center;position:relative;padding-right:38px}
 .center-card .title{font-size:11px;align-items:center;line-height:1.25}.center-card .pin svg{width:17px;height:17px}
 .center-card .mini-actions{margin-left:auto;display:block}.center-card .mini-actions .mini{display:none}
 .center-card .mini-actions .mini:first-child{display:inline-flex;background:transparent;padding:0;font-size:9px;font-weight:700;position:absolute;left:39px;bottom:7px}
 .center-card .mini-actions .mini:first-child svg{display:none}
 .center-card:after{content:'›';position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:25px;font-weight:300;color:#1595a9}
 .center-card.placeholder{min-height:58px}.center-card.placeholder:after{content:'+';font-size:21px}
 .center-card.placeholder .plus{display:none}.center-card.placeholder strong{font-size:11px}.center-card.placeholder p{display:block!important;margin:1px 0 0;font-size:9px}.center-card.placeholder .mini{display:none}
 .services{grid-template-columns:repeat(2,1fr);gap:9px}.services .service{min-height:104px;padding:13px 8px}.service .service-icon{width:39px;height:39px;margin-bottom:8px}.service .service-icon svg{width:23px;height:23px}.services .service strong{font-size:10px}
 .service:last-child{grid-column:1/-1;max-width:calc(50% - 4px);justify-self:center;width:100%}
 .split{grid-template-columns:1fr;gap:14px}.content-grid{grid-template-columns:1fr}.info-panel{padding:20px}.form-card{padding:18px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
 .footer-grid{grid-template-columns:1fr 1fr;gap:18px}.footer-grid .brand{grid-column:1/-1}.footer-grid .brand img{width:46px;height:46px}.footer-grid .brand strong{font-size:12px}
 footer{padding:30px 0 16px}.copyright{font-size:8px}
 .mobile-bar{height:64px;grid-template-columns:1fr 1fr 1.15fr;border-top:1px solid rgba(255,255,255,.15)}
 .mobile-bar a{font-size:9px;gap:3px}.mobile-bar a svg{width:18px;height:18px}.mobile-bar a:nth-child(2){background:#079caf}.mobile-bar a:last-child{border-radius:0}
}
@media(max-width:480px){
 .container{width:min(100% - 24px,620px)}
 .hero-visual{
        height:255px;
        min-height:255px;
        background-size:cover;
        background-position:75% center;
    }
 .doctor-card{
        width:158px;
        margin-top:20px;
    }
 .hero-grid>div:first-child{padding-top:22px}
 h1{font-size:29px}.hero-actions .btn{padding:9px 7px}
 .trust-row{justify-content:flex-start}
}

@media (max-width:768px){
  .hero{
    background-position:35% 28%;
    background-size:125% 58%;
    background-repeat:no-repeat;
  }
}


/* =========================================================
   FINAL FIXES
   1. Mobile kidney positioning
   2. Patient Information image positioning
   3. Keep text above decorative image
   ========================================================= */


/* ---------- MOBILE KIDNEY IMAGE ---------- */

@media (max-width:820px){

    .hero-visual{
        height:265px;
        min-height:265px;

        background-image:url('kidney-hero.jpg');
        background-repeat:no-repeat;
        background-size:cover;

        /* Moves the kidney artwork LEFT so both kidneys
           remain visible beside the doctor card */
        background-position:80% center;
    }

    .doctor-card{
        width:165px;
        margin:22px 0 0 auto;
    }
}


/* ---------- SMALL MOBILE ---------- */

@media (max-width:480px){

    .hero-visual{
        height:255px;
        min-height:255px;
        background-size:cover;
        background-position:80% center;
    }

    .doctor-card{
        width:158px;
        margin-top:20px;
    }
}


/* =========================================================
   PATIENT INFORMATION & GUIDANCE
   ========================================================= */

.info-panel{
    position:relative;
    overflow:hidden;
}


/* Decorative medical image */
.info-panel:after{
    content:"";
    position:absolute;

    right:-25px;
    bottom:-25px;

    width:320px;
    height:230px;

    background-image:url('wide_clean_modern_medical_themed_web_graphic_des.png');
    background-repeat:no-repeat;
    background-position:right bottom;
    background-size:contain;

    pointer-events:none;
    z-index:1;

    /* IMPORTANT:
       removes the old circular image effect */
    border-radius:0;
}


/* Keep all Patient Information content ABOVE the image */

.info-panel .kicker,
.info-panel h3,
.info-panel .sub,
.info-panel .checklist,
.info-panel .btn{
    position:relative;
    z-index:2;
}


/* =========================================================
   PATIENT INFORMATION — MOBILE
   ========================================================= */

@media (max-width:820px){

    .info-panel{
        min-height:500px;
        padding:20px 20px 190px;
    }

    .info-panel:after{
        right:-20px;
        bottom:-15px;

        width:285px;
        height:185px;

        background-size:contain;
        background-position:right bottom;
    }
}


/* =========================================================
   PATIENT INFORMATION — SMALL MOBILE
   ========================================================= */

@media (max-width:480px){

    .info-panel{
        min-height:490px;
        padding:20px 18px 175px;
    }

    .info-panel:after{
        right:-12px;
        bottom:-10px;

        width:250px;
        height:165px;
    }
}


/* =========================================================
   MOBILE FINAL ADJUSTMENTS
   ========================================================= */

@media (max-width:820px){

    /* Remove the large empty space after the header */
    .hero-grid{
        padding-top:0 !important;
        margin-top:-55px !important;
    }

    /* Kidney artwork:
       move image further LEFT so both kidneys are visible */
    .hero-visual{
        height:265px !important;
        min-height:265px !important;

        background-image:url('kidney-hero.jpg') !important;
        background-repeat:no-repeat !important;
        background-size:cover !important;
        background-position:85% center !important;

        margin-top:0 !important;
    }

    /* Move Dr. Zope card further RIGHT */
    .doctor-card{
        width:165px !important;
        margin-left:auto !important;
        margin-right:-8px !important;
        margin-top:18px !important;
    }

    /* Keep footer legal links on ONE LINE */
    .copyright{
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
        white-space:nowrap !important;
        text-align:center !important;
    }

    .copyright span{
        display:inline !important;
        margin:0 !important;
        white-space:nowrap !important;
    }

    .copyright a{
        white-space:nowrap !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:480px){

    .hero-grid{
        margin-top:-10px !important;
    }

    .hero-visual{
        height:255px !important;
        min-height:255px !important;
        background-size:cover !important;
        background-position:75% center !important;
    }

    .doctor-card{
        width:120px !important;
        margin-right:-8px !important;
        margin-top:18px !important;
    }

    .copyright{
        gap:6px !important;
        font-size:7px !important;
    }
}


@media (max-width:820px){
    .doctor-card img{
        height:154px !important;
    }
}

@media (max-width:480px){
    .doctor-card img{
        height:145px !important;
    }
}

/* =========================================================
   DIALYSIS CENTRES — DESKTOP + MOBILE FINAL FIX
   ========================================================= */


/* ---------- LAPTOP / DESKTOP ---------- */

@media (min-width:821px){

    .center-card{
        display:flex;
        flex-direction:column;
    }

    /* Centre name */
    .center-card .title{
        align-items:flex-start;
    }

    /* Description */
    .center-card p{
        min-height:38px;
    }

    /* Contact / map buttons */
    .center-card .mini-actions{
        display:flex !important;
        flex-wrap:wrap;
        gap:7px;
        margin-top:auto;
        align-items:center;
    }

    .center-card .mini{
        display:inline-flex !important;
        align-items:center;
        gap:5px;
    }

    /* Make phone and email visible */
    .center-card .mini.phone,
    .center-card .mini.email,
    .center-card .mini.whatsapp{
        display:inline-flex !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:820px){

    .center-card{
        min-height:58px !important;

        display:flex !important;
        align-items:center !important;
        position:relative;

        padding-top:10px !important;
        padding-bottom:10px !important;
    }

    /* Centre name vertically centered */
    .center-card .title{
        display:flex;
        align-items:center !important;
        margin:0 !important;
    }

    /* Remove the old bottom-positioned map link */
    .center-card .mini-actions .mini:first-child{
        position:static !important;
        left:auto !important;
        bottom:auto !important;

        margin:0 !important;
        padding:0 !important;

        display:inline-flex !important;
        align-items:center !important;
    }

    /* Keep map arrow on right */
    .center-card:after{
        top:50% !important;
        transform:translateY(-50%) !important;
    }

    /* Keep contact details hidden on mobile */
    .center-card .mini-actions .mini:not(:first-child){
        display:none !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:480px){

    .center-card{
        min-height:56px !important;
    }

    .center-card .title{
        align-items:center !important;
    }
}

/* =========================================================
   DIALYSIS CENTRES — DESKTOP ALIGNMENT & CONTACT DETAILS
   ========================================================= */

@media (min-width:821px){

    /* Keep centre cards clean and vertically balanced */
    .center-card{
        display:flex;
        flex-direction:column;
        justify-content:center;
        min-height:145px;
    }

    /* Centre name vertically aligned */
    .center-card .title{
        display:flex;
        align-items:center;
        margin-bottom:14px;
    }

    /* Contact / Map area */
    .center-card .mini-actions{
        display:flex !important;
        flex-wrap:wrap;
        align-items:center;
        gap:7px;
        margin-top:0;
    }

    /* Make ALL available contact information visible */
    .center-card .mini-actions .mini{
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        white-space:nowrap;
    }

    /* Email address */
    .center-card .mini.email{
        display:inline-flex !important;
    }
}


/* =========================================================
   MOBILE — KEEP THE CLEAN ROW DESIGN
   ========================================================= */

@media (max-width:820px){

    .center-card{
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        min-height:58px !important;
    }

    .center-card .title{
        display:flex;
        align-items:center !important;
        margin:0 !important;
    }

    /* Only map link remains visible on mobile */
    .center-card .mini-actions{
        margin-left:auto !important;
        display:block !important;
    }

    .center-card .mini-actions .mini{
        display:none !important;
    }

    .center-card .mini-actions .mini:first-child{
        display:inline-flex !important;
        align-items:center !important;
        position:static !important;
        margin:0 !important;
        padding:0 !important;
    }
}

/* =========================================================
   MOBILE CENTRE CARDS
   Shows: Centre Name { Contact # } View on Map >
   Add this at the VERY END of your existing CSS
   ========================================================= */

@media (max-width: 820px) {

  .center-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    position: relative !important;
    padding-right: 32px !important;
    gap: 6px !important;
  }

  /* Centre name */
  .center-card .title {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  /* Right-side controls */
  .center-card .mini-actions {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  /* Hide all mini buttons first */
  .center-card .mini-actions .mini {
    display: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  /* Show View on Map */
  .center-card .mini-actions .mini:first-child {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #067b90 !important;
  }

  /* Show contact number */
  .center-card .mini-actions .mini:nth-child(2) {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #067b90 !important;
  }

  /* Remove icons from mobile */
  .center-card .mini-actions .mini:first-child svg,
  .center-card .mini-actions .mini:nth-child(2) svg {
    display: none !important;
  }

  /* Brackets around contact number */
  .center-card .mini-actions .mini:nth-child(2)::before {
    content: "{";
    color: #8aa7b0;
    margin-right: 2px;
  }

  .center-card .mini-actions .mini:nth-child(2)::after {
    content: "}";
    color: #8aa7b0;
    margin-left: 2px;
  }

  /* Right arrow */
  .center-card::after {
    content: "›" !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 25px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: #1595a9 !important;
  }
}


/* Extra-small phones */
@media (max-width: 480px) {

  .center-card {
    gap: 4px !important;
    padding-right: 28px !important;
  }

  .center-card .mini-actions {
    gap: 4px !important;
  }

  .center-card .title {
    font-size: 10px !important;
  }

  .center-card .mini-actions .mini {
    font-size: 8px !important;
  }

  .center-card::after {
    right: 8px !important;
    font-size: 23px !important;
  }
}

/* =========================================================
   MOBILE CENTRE CARD
   Order:
   [Pin] Centre Name   [Phone Icon] Number   [Map Icon] View on Map   >
   ========================================================= */

@media (max-width: 820px) {

  .center-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    position: relative !important;
    padding-right: 30px !important;
    gap: 8px !important;
  }

  /* Centre name stays on the LEFT */
  .center-card .title {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    gap: 6px !important;
  }

  /* Action area on RIGHT */
  .center-card .mini-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex-wrap: nowrap !important;
  }

  /* Reset existing mobile hiding */
  .center-card .mini-actions .mini {
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #067b90 !important;
    gap: 4px !important;
  }

  /* PHONE — first show the phone icon + number */
  .center-card .mini-actions .mini:nth-child(2) {
    display: inline-flex !important;
  }

  .center-card .mini-actions .mini:nth-child(2) svg {
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }

  /* MAP — second show map icon + View on Map */
  .center-card .mini-actions .mini:first-child {
    display: inline-flex !important;
  }

  .center-card .mini-actions .mini:first-child svg {
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }

  /* Hide email on mobile */
  .center-card .mini-actions .mini:nth-child(3) {
    display: none !important;
  }

  /* Remove old brackets if any previous CSS added them */
  .center-card .mini-actions .mini:nth-child(2)::before,
  .center-card .mini-actions .mini:nth-child(2)::after {
    content: none !important;
  }

  /* RIGHT ARROW */
  .center-card::after {
    content: "›" !important;
    position: absolute !important;
    right: 9px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 25px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: #1595a9 !important;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

  .center-card {
    gap: 5px !important;
    padding-right: 27px !important;
  }

  .center-card .title {
    font-size: 10px !important;
    gap: 4px !important;
  }

  .center-card .mini-actions {
    gap: 6px !important;
  }

  .center-card .mini-actions .mini {
    font-size: 8px !important;
    gap: 3px !important;
  }

  .center-card .mini-actions .mini svg {
    width: 11px !important;
    height: 11px !important;
  }

  .center-card::after {
    right: 7px !important;
    font-size: 23px !important;
  }
}

/* =========================================================
   MOBILE CENTRE CARDS
   FIXED ALIGNMENT

   Column 1 = Centre Name
   Column 2 = Phone
   Column 3 = View on Map
   Column 4 = Arrow
   ========================================================= */

@media (max-width: 820px) {

  .center-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 105px 82px 18px !important;
    align-items: center !important;
    column-gap: 6px !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 11px 8px 11px 12px !important;
  }

  /* ---------------------------------------------------------
     CENTRE NAME
     --------------------------------------------------------- */

  .center-card .title {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: center !important;

    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    font-size: 11px !important;
    line-height: 1.2 !important;
  }


  /* ---------------------------------------------------------
     ACTION CONTAINER
     IMPORTANT: make it disappear structurally so
     its children can occupy fixed grid columns.
     --------------------------------------------------------- */

  .center-card .mini-actions {
    display: contents !important;
  }


  /* ---------------------------------------------------------
     PHONE NUMBER
     FIXED COLUMN 2
     --------------------------------------------------------- */

  .center-card .mini-actions .mini:nth-child(2) {

    grid-column: 2 !important;
    grid-row: 1 !important;

    display: inline-flex !important;
    align-items: center !important;

    width: 105px !important;
    min-width: 105px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    white-space: nowrap !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    color: #067b90 !important;

    gap: 4px !important;
  }

  /* Phone icon */
  .center-card .mini-actions .mini:nth-child(2) svg {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
  }


  /* ---------------------------------------------------------
     VIEW ON MAP
     FIXED COLUMN 3
     --------------------------------------------------------- */

  .center-card .mini-actions .mini:first-child {

    grid-column: 3 !important;
    grid-row: 1 !important;

    display: inline-flex !important;
    align-items: center !important;

    width: 82px !important;
    min-width: 82px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    white-space: nowrap !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    color: #067b90 !important;

    gap: 4px !important;
  }

  /* Map icon */
  .center-card .mini-actions .mini:first-child svg {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
  }


  /* ---------------------------------------------------------
     EMAIL HIDDEN ON MOBILE
     --------------------------------------------------------- */

  .center-card .mini-actions .mini:nth-child(3) {
    display: none !important;
  }


  /* ---------------------------------------------------------
     ARROW
     --------------------------------------------------------- */

  .center-card::after {

    content: "›" !important;

    grid-column: 4 !important;
    grid-row: 1 !important;

    position: static !important;
    transform: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 25px !important;
    font-weight: 300 !important;
    line-height: 1 !important;

    color: #1595a9 !important;
  }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

  .center-card {

    grid-template-columns:
      minmax(0, 1fr)
      91px
      73px
      16px !important;

    column-gap: 4px !important;

    padding: 10px 5px 10px 10px !important;
  }

  .center-card .title {
    font-size: 9px !important;
  }

  .center-card .mini-actions .mini:nth-child(2) {

    width: 91px !important;
    min-width: 91px !important;

    font-size: 7.5px !important;
  }

  .center-card .mini-actions .mini:first-child {

    width: 73px !important;
    min-width: 73px !important;

    font-size: 7.5px !important;
  }

  .center-card .mini-actions .mini svg {
    width: 10px !important;
    height: 10px !important;
  }

  .center-card::after {
    font-size: 22px !important;
  }
}

/* =========================================================
   DESIGN 3 — MOBILE HERO TEXT POSITION
   Move hero text down without changing the background image
   ========================================================= */

@media (max-width: 820px) {

  .d3-hero .hero-copy {
    padding-top: 130px !important;
  }

}


/* =========================================================
   DESIGN 3 — MOBILE HERO
   REMOVE TEXT BLOCK / DIV BACKGROUND
   ========================================================= */

@media (max-width: 820px) {

  .d3-hero .hero-copy {
    background: transparent !important;
    background-color: transparent !important;
  }

  .d3-hero .hero-copy::before,
  .d3-hero .hero-copy::after {
    background: transparent !important;
    background-color: transparent !important;
  }

}

/* =========================================================
   DESIGN 3 — MOBILE HERO
   REMOVE WHITE / SEMI-TRANSPARENT OVERLAY
   KEEP ORIGINAL BACKGROUND IMAGE
   ========================================================= */

@media (max-width: 820px) {

  .d3-hero:after {
    display: none !important;
    content: none !important;
  }

}


/* =========================================================
   DESIGN 3 — MOBILE "MEET OUR DOCTOR"
   Keep doctor text LEFT and photo RIGHT
   ========================================================= */

@media (max-width: 820px) {

  .d3-bottom-grid {
    display: grid !important;
    grid-template-columns: 1fr 145px !important;
    column-gap: 18px !important;
    align-items: center !important;
  }

  /* Appointment form remains full width */
  .d3-form-panel {
    grid-column: 1 / -1 !important;
  }

  /* Doctor information on the LEFT */
  .d3-doctor-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }

  /* Doctor photograph on the RIGHT */
  .d3-doctor-photo {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 145px !important;
    align-self: center !important;
    justify-self: end !important;
  }

  .d3-doctor-photo img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
  }

}

@media (max-width: 480px) {

  .d3-bottom-grid {
    grid-template-columns: minmax(0, 1fr) 120px !important;
    column-gap: 12px !important;
  }

  .d3-doctor-photo {
    width: 120px !important;
  }

}