:root {
   --navy: #092d74;
   --blue: #1455b3;
   --red: #d42b2b;
   --soft: #f4f8ff;
   --text: #1a1a2e;
   --muted: #5c6b84;
   --white: #fff
 }

 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0
 }

 html {
   scroll-behavior: smooth
 }

 body {
   font-family: 'DM Sans', sans-serif;
   color: var(--text);
   background: #fff
 }

 .container {
   max-width: 1200px;
   margin: auto;
   padding: 0 24px
 }

 .topbar {
   background: var(--navy);
   color: #dbe8ff;
   font-size: 14px
 }

 .topbar-inner {
   height: 38px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px
 }

 .emergency-pill {
   background: var(--red);
   color: white;
   padding: 6px 18px;
   border-radius: 30px;
   font-weight: 800
 }

 .navbar {
   position: sticky;
   top: 0;
   z-index: 10;
   background: white;
   box-shadow: 0 6px 20px rgba(9, 45, 116, .1)
 }

 .nav-inner {
   min-height: 90px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   flex-wrap: nowrap
 }

 .brand {
   display: flex;
   align-items: center;
   flex-shrink: 0;
 }

 .brand img{
    width:70px;
    height:70px;
    border-radius:50%;
    object-fit:cover;
    object-position:center;
    background:transparent;
    display:block;
 }

 .nav-links {
   display: flex;
   gap: 18px;
   align-items:center;
   list-style: none;
   margin-left:auto
 }

 .nav-links a {
   color: var(--navy);
   text-decoration: none;
   font-weight: 700
 }

 .nav-cta,
 .primary-btn {
   background: var(--red);
   color: white;
   text-decoration: none;
   border: 0;
   border-radius: 12px;
   padding: 13px 22px;
   font-weight: 800;
   display: inline-block;
   cursor: pointer
 }

 .secondary-btn {
   color: white;
   text-decoration: none;
   border: 1px solid rgba(255, 255, 255, .55);
   border-radius: 12px;
   padding: 12px 20px;
   font-weight: 800
 }

 .menu-btn {
   display: none;
   background: var(--navy);
   color: white;
   border: 0;
   border-radius: 8px;
   padding: 8px 11px;
   font-size: 22px
 }

 .hero {
   background: linear-gradient(135deg, #08358d, #0066d7);
   color: white;
   padding: 82px 0
 }

 .hero-grid {
   display: grid;
   grid-template-columns: 1.15fr .85fr;
   gap: 40px;
   align-items: center
 }

 .eyebrow {
   display: inline-block;
   color: #e9b34f;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   font-size: 13px;
   margin-bottom: 12px
 }

 .hero h1 {
   font-family: 'Playfair Display', serif;
   font-size: clamp(32px, 5.5vw, 72px);
   line-height: 1.05;
   margin-bottom: 18px
 }

 .hero p {
   font-size: 18px;
   max-width: 640px;
   line-height: 1.6;
   color: #eaf2ff
 }

 .hero-actions {
   display: flex;
   gap: 14px;
   margin-top: 26px
 }

 .hero-card {
   background: rgba(255, 255, 255, .14);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, .25);
   border-radius: 28px;
   padding: 20px;
   box-shadow: 0 20px 45px rgba(0, 0, 0, .15)
 }

 .hero-card img {
   width: 100%;
   height: 260px;
   object-fit: cover;
   border-radius: 20px;
   margin-bottom: 18px
 }

 .hero-card h3 {
   font-size: 26px;
   margin-bottom: 8px
 }

 .section {
   padding: 78px 0
 }

 .section-soft {
   background: var(--soft)
 }

 .section-title {
   text-align: center;
   max-width: 760px;
   margin: 0 auto 34px
 }

 .section-title span {
   color: var(--red);
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 2px
 }

 .section-title h2 {
   font-family: 'Playfair Display', serif;
   font-size: 44px;
   color: var(--navy);
   margin: 8px 0
 }

 .section-title p {
   color: var(--muted);
   font-size: 17px
 }

 .specialty-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
   gap: 18px
 }

 .specialty-card {
   background: white;
   border: 1px solid #e2ebf8;
   border-radius: 22px;
   padding: 22px;
   text-align: left;
   cursor: pointer;
   box-shadow: 0 12px 32px rgba(9, 45, 116, .08);
   transition: .2s
 }

 .specialty-card:hover,
 .doctor-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 18px 40px rgba(9, 45, 116, .16)
 }

 .specialty-card span {
   font-size: 34px
 }

 .specialty-card h3 {
   color: var(--navy);
   margin: 10px 0 6px
 }

 .specialty-card p {
   color: var(--muted);
   font-size: 14px;
   line-height: 1.5
 }

 .filter-bar {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
   margin-bottom: 28px
 }

 .filter-btn {
   border: 1px solid #bdd0ea;
   background: white;
   color: var(--navy);
   border-radius: 28px;
   padding: 10px 18px;
   font-weight: 800;
   cursor: pointer
 }

 .filter-btn.active {
   background: var(--navy);
   color: white
 }

 .doctors-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
   gap: 24px
 }

 .doctor-card {
   background: white;
   border-radius: 26px;
   overflow: hidden;
   box-shadow: 0 12px 34px rgba(9, 45, 116, .1);
   cursor: pointer;
   transition: .2s
 }

 .doctor-card img {
   width: 100%;
   height: 250px;
   object-fit: cover;
   object-position: top center;
   background: #e8f1fb
 }

 .doctor-info {
   padding: 18px
 }

 .dept-pill {
   display: inline-block;
   background: #eaf2ff;
   color: var(--navy);
   border-radius: 22px;
   padding: 5px 10px;
   font-size: 12px;
   font-weight: 900;
   text-transform: uppercase;
   margin-bottom: 10px
 }

 .doctor-info h3 {
   font-family: 'Playfair Display', serif;
   color: var(--navy);
   font-size: 23px;
   margin-bottom: 6px
 }

 .designation {
   color: var(--blue);
   font-weight: 800;
   margin-bottom: 8px
 }

 .doctor-info p {
   color: var(--muted);
   font-size: 14px;
   line-height: 1.45
 }

 .two-col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 38px;
   align-items: center
 }

 .two-col h2 {
   font-family: 'Playfair Display', serif;
   color: var(--navy);
   font-size: 44px;
   margin-bottom: 10px
 }

 .two-col p {
   color: var(--muted);
   line-height: 1.7
 }

 .facility-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px
 }

 .facility-list div,
 .contact-card {
   background: white;
   border: 1px solid #e2ebf8;
   border-radius: 18px;
   padding: 20px;
   box-shadow: 0 10px 28px rgba(9, 45, 116, .08);
   font-weight: 800;
   color: var(--navy)
 }

 .contact-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 20px
 }

 .contact-card h3 {
   color: var(--navy);
   margin-bottom: 8px
 }

 .contact-card p {
   font-weight: 500;
   color: var(--muted);
   line-height: 1.6
 }

 .appointment-form {
   background: var(--soft);
   border-radius: 24px;
   padding: 24px;
   display: grid;
   gap: 14px
 }

 .appointment-form input,
 .appointment-form select,
 .appointment-form textarea {
   width: 100%;
   padding: 14px 16px;
   border: 1px solid #c7d7ef;
   border-radius: 12px;
   font-family: inherit
 }

 .appointment-form textarea {
   min-height: 110px
 }

 footer {
   background: var(--navy);
   color: white;
   padding: 24px 0;
   text-align: center
 }

 .doctor-modal {
   position: fixed;
   inset: 0;
   background: rgba(4, 18, 45, .74);
   z-index: 100;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 20px
 }

 .doctor-modal.show {
   display: flex
 }

 .modal-content {
   background: white;
   border-radius: 28px;
   max-width: 850px;
   max-height: 88vh;
   overflow: auto;
   padding: 30px;
   position: relative
 }

 .modal-close {
   position: absolute;
   right: 18px;
   top: 14px;
   border: 0;
   background: var(--red);
   color: white;
   border-radius: 50%;
   width: 36px;
   height: 36px;
   font-size: 24px;
   cursor: pointer
 }

 .modal-hero {
   display: grid;
   grid-template-columns: 220px 1fr;
   gap: 24px;
   align-items: center
 }

 .modal-hero img {
   width: 220px;
   height: 260px;
   border-radius: 24px;
   object-fit: cover;
   object-position: center top
 }

 .modal-hero h2 {
   font-family: 'Playfair Display', serif;
   color: var(--navy);
   font-size: 38px
 }

 .modal-hero h4 {
   color: var(--blue);
   font-size: 18px;
   margin: 8px 0
 }

 .modal-section {
   margin-top: 22px
 }

 .modal-section h3 {
   color: var(--red);
   text-transform: uppercase;
   letter-spacing: 1.6px;
   font-size: 14px;
   margin-bottom: 10px
 }

 .modal-section p,
 .modal-section li {
   color: var(--muted);
   line-height: 1.7
 }

 .modal-section ul {
   padding-left: 20px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 6px 18px
 }

 @media(max-width:850px) {
   .nav-links {
     display: none;
     position: absolute;
     left: 0;
     right: 0;
     top: 90px;
     background: white;
     padding: 18px;
     box-shadow: 0 20px 30px rgba(9, 45, 116, .12);
     flex-direction: column
   }

   .nav-links.open {
     display: flex
   }

   .menu-btn {
     display: block
   }

   .nav-cta {
     display: none
   }

   .hero-grid,
   .two-col,
   .modal-hero {
     grid-template-columns: 1fr
   }

   .hero h1 {
     font-size: clamp(28px, 8vw, 42px);
     line-height: 1.1;
   }

   .modal-hero img {
     width: 100%;
     height: 280px
   }

   .modal-section ul {
     grid-template-columns: 1fr
   }

   .topbar-inner {
     height: auto;
     padding-top: 8px;
     padding-bottom: 8px;
     flex-direction: column
   }

   .brand img {
     width: 64px;
     height: 64px
   }

   .nav-inner {
     min-height: 84px
   }
 }

 /* Final layout fixes */
 .doctors-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(230px, 260px));
   justify-content: center;
   gap: 24px;
 }

 .doctor-card {
   max-width: 260px;
   width: 100%;
 }

 .doctor-card img {
   width: 100%;
   height: 250px;
   object-fit: cover;
   object-position: top center;
   border-radius: 26px 26px 0 0;
 }

 .topbar a,
 .contact-card a {
   color: inherit;
   font-weight: 800;
   text-decoration: none;
 }

 .equipment-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 22px;
 }

 .equipment-card {
   background: white;
   border: 1px solid #e2ebf8;
   border-radius: 22px;
   overflow: hidden;
   box-shadow: 0 12px 32px rgba(9, 45, 116, .08);
 }

 .equipment-card img {
   width: 100%;
   height: 190px;
   object-fit: cover;
   display: block;
 }

 .equipment-card h3 {
   color: var(--navy);
   padding: 16px 18px 4px;
   font-size: 20px;
 }

 .equipment-card p {
   color: var(--muted);
   padding: 0 18px 18px;
   line-height: 1.5;
   font-size: 14px;
 }

 .small-btn {
   display: inline-block;
   margin-top: 12px;
   background: var(--navy);
   color: #fff !important;
   padding: 10px 14px;
   border-radius: 10px;
   text-decoration: none;
   font-weight: 800;
 }

 .social-links {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 12px
 }

 .social-links a {
   background: #eaf2ff;
   color: var(--navy) !important;
   padding: 9px 12px;
   border-radius: 10px;
 }

 .appointment-modal {
   position: fixed;
   inset: 0;
   background: rgba(4, 18, 45, .74);
   z-index: 120;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 20px;
 }

 .appointment-modal.show {
   display: flex;
 }

 .appointment-modal-content {
   background: white;
   border-radius: 28px;
   max-width: 560px;
   width: 100%;
   max-height: 90vh;
   overflow: auto;
   padding: 30px;
   position: relative;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .25)
 }

 .appointment-modal-content h2 {
   font-family: 'Playfair Display', serif;
   color: var(--navy);
   font-size: 38px;
   margin-bottom: 8px;
 }

 .appointment-modal-content p {
   color: var(--muted);
   line-height: 1.6;
   margin-bottom: 16px;
 }

 .nav-cta {
   border: none;
   cursor: pointer;
 }

 .secondary-btn {
   background: transparent;
   cursor: pointer;
 }

 @media(max-width:600px) {
   .doctors-grid {
     grid-template-columns: 1fr
   }

   .doctor-card {
     max-width: 100%
   }

   .doctor-card img {
     height: 280px
   }

   .equipment-grid {
     grid-template-columns: 1fr
   }

   /* ✅ Fix oversized section headings on mobile */
   .section-title h2 {
     font-size: 26px;
     line-height: 1.2;
   }

   .two-col h2 {
     font-size: 26px;
     line-height: 1.2;
   }

   .hero-tagline {
     font-size: 16px;
   }

   .hero p {
     font-size: 15px;
   }

   .hero-actions {
     flex-direction: column;
     gap: 10px;
   }

   .hero-actions a,
   .hero-actions button {
     text-align: center;
     width: 100%;
   }
 }

/* Multi-page additions */
.page-hero{padding:140px 0 50px;background:linear-gradient(135deg,#eaf8ff,#ffffff);}
.page-hero span{display:inline-block;color:#0a7fb2;font-weight:700;margin-bottom:10px;text-transform:uppercase;letter-spacing:.08em;}
.page-hero h1{font-size:clamp(2rem,4vw,3.2rem);margin:0 0 12px;color:#073b5a;}
.page-hero p{max-width:780px;font-size:1.08rem;color:#4f6470;}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}
.blog-card{background:#fff;border-radius:22px;padding:24px;box-shadow:0 14px 35px rgba(0,0,0,.08);border:1px solid rgba(10,127,178,.12);}
.blog-card span{display:inline-block;color:#0a7fb2;font-weight:800;margin-bottom:10px;}
.blog-card h2,.blog-card h3{color:#073b5a;margin:0 0 12px;line-height:1.25;}
.blog-card p{color:#51646f;line-height:1.65;}
.blog-card a{color:#0a7fb2;font-weight:800;text-decoration:none;}
.blog-post{min-height:330px;}
@media(max-width:768px){.page-hero{padding-top:115px}.blog-grid{grid-template-columns:1fr}}


/* Patient Reviews Section */
.review-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 0 auto 28px;
  max-width: 820px;
}
.review-summary div {
  background: var(--soft);
  border: 1px solid #dce8fb;
  border-radius: 20px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(9,45,116,.07);
}
.review-summary strong {
  display: block;
  color: var(--navy);
  font-size: 30px;
  line-height: 1;
}
.review-summary span {
  display: block;
  color: var(--muted);
  margin-top: 8px;
  font-weight: 700;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.review-card {
  background: #fff;
  border: 1px solid #e2ebf8;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(9,45,116,.08);
  transition: .2s;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(9,45,116,.14);
}
.review-stars {
  color: #e9b34f;
  font-size: 20px;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.review-card p {
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
  margin-bottom: 14px;
}
.review-card h3 {
  color: var(--navy);
  font-size: 17px;
  margin-bottom: 4px;
}
.review-card span {
  color: var(--red);
  font-weight: 800;
  font-size: 13px;
}

/* ============================================
   NEW ADDITIONS - Sidebar, Stats, QuickLinks,
   Reviews, Footer, Mobile Fixes
   ============================================ */

/* ✅ BRAND NAME NEXT TO LOGO */
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-text { display:flex; flex-direction:column; line-height:1.2; }
.brand-name { font-family:'Playfair Display',serif; color:var(--navy); font-weight:700; font-size:15px; }
.brand-sub { color:var(--blue); font-weight:700; font-size:12px; }
.brand-est { color:var(--muted); font-size:11px; font-weight:600; }

/* ✅ HERO H1 CLEAN */
.hero-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 5vw, 60px);
  line-height: 1.08;
  margin-bottom: 14px;
}
.hero-gold { color: #e9b34f; }
.hero-card-title { font-size: 20px; margin-bottom: 6px; }

/* ✅ RIGHT SIDEBAR – Like Lalitha Hospitals */
.side-bar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: white;
  text-decoration: none;
  transition: width .25s, border-radius .25s;
  border-radius: 8px 0 0 8px;
}
.side-btn:hover { width: 52px; }
.side-phone   { background: #092d74; }
.side-email   { background: #1455b3; }
.side-facebook { background: #1877F2; }
.side-instagram { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.side-location { background: #34A853; }
.side-youtube  { background: #FF0000; }
.side-linkedin { background: #0077B5; }
.side-whatsapp { background: #25D366; }

/* ✅ STATS BAR */
.stats-bar { background: var(--navy); padding: 20px 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  text-align: center;
}
.stat-item strong {
  display: block;
  color: #e9b34f;
  font-size: 22px;
  font-weight: 800;
}
.stat-item span {
  color: #aac4ff;
  font-size: 12px;
  font-weight: 600;
}

/* ✅ QUICK LINKS BAR – Like Lalitha bottom icons */
.quick-links-bar { background: var(--soft); padding: 28px 0; border-bottom: 1px solid #e2ebf8; }
.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 12px;
  text-align: center;
}
.quick-link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  padding: 14px 8px;
  border-radius: 16px;
  background: white;
  border: 1px solid #e2ebf8;
  box-shadow: 0 4px 14px rgba(9,45,116,.07);
  transition: .2s;
}
.quick-link-item:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(9,45,116,.15); background: var(--navy); color: white; }
.quick-icon { font-size: 26px; }

/* ✅ REVIEW CARD IMPROVEMENTS */
.review-source {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.coming-soon-btn {
  display: inline-block;
  margin-top: 14px;
  background: var(--soft);
  color: var(--navy);
  border: 2px dashed #bdd0ea;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  cursor: default;
}

/* ✅ FOOTER */
.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr 1fr;
  gap: 32px;
  padding: 48px 24px 24px;
}
footer { background: var(--navy); color: white; }
.footer-col h4 { color: #e9b34f; margin-bottom: 14px; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; }
.footer-col ul { list-style: none; display: grid; gap: 8px; }
.footer-col ul li a, .footer-col p a { color: #aac4ff; text-decoration: none; font-size: 14px; }
.footer-col ul li a:hover { color: white; }
.footer-col p { color: #aac4ff; font-size: 14px; line-height: 1.8; }
.footer-social { display: flex; flex-direction: column; gap: 8px; }
.footer-social a { color: white; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 800; text-decoration: none; }
.footer-bottom { text-align: center; padding: 16px 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; color: #aac4ff; }

/* ✅ WHATSAPP FLOAT */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 999;
  background: #25D366;
  color: white;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,.45);
  text-decoration: none;
  animation: pulse-wa 2s infinite;
}
@keyframes pulse-wa {
  0%  { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ✅ MOBILE – Complete fix for 9/10 rating */
@media(max-width:850px) {
  /* Sidebar hidden on mobile - use WhatsApp float instead */
  .side-bar { display: none; }

  /* Stats bar – 3 columns */
  .stats-grid { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .stat-item strong { font-size: 18px; }

  /* Quick links – 3 columns */
  .quick-links-grid { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .quick-link-item { padding: 10px 6px; font-size: 11px; }
  .quick-icon { font-size: 22px; }

  /* Footer – single column */
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }

  /* Brand text visible on mobile */
  .brand-name { font-size: 13px; }
  .brand-sub { font-size: 11px; }
  .brand-est { display: none; }
}

@media(max-width:600px) {
  /* Hero */
  .hero { padding: 40px 0; }
  .hero-h1 { font-size: clamp(26px, 8vw, 38px); }
  .hero p { font-size: 14px; }
  .hero-tagline { font-size: 15px !important; }
  .hero-actions { flex-direction: column; gap: 10px; }
  .hero-actions a, .hero-actions button { width: 100%; text-align: center; }

  /* Section titles */
  .section-title h2, .two-col h2 { font-size: 24px; line-height: 1.2; }
  .section { padding: 48px 0; }

  /* Stats – 2 columns */
  .stats-grid { grid-template-columns: repeat(2,1fr); }

  /* Quick links – 3 columns */
  .quick-links-grid { grid-template-columns: repeat(3,1fr); }

  /* Doctor cards full width */
  .doctors-grid { grid-template-columns: 1fr; }
  .doctor-card { max-width: 100%; }
  .doctor-card img { height: 260px; }

  /* Equipment */
  .equipment-grid { grid-template-columns: 1fr; }

  /* Reviews */
  .reviews-grid { grid-template-columns: 1fr; }
  .review-summary { grid-template-columns: repeat(3,1fr); }

  /* Modal */
  .modal-hero { grid-template-columns: 1fr; }
  .modal-hero img { width: 100%; height: 300px; object-fit: cover; object-position: center top; }
  .modal-section ul { grid-template-columns: 1fr; }
  .modal-hero h2 { font-size: 26px; }

  /* Blog grid */
  .blog-grid { grid-template-columns: 1fr; }

  /* Topbar */
  .topbar-inner { height:auto; padding: 8px 0; flex-direction: column; gap: 4px; font-size: 12px; }
}

/* ============================================
   BUG FIXES – June 2026
   ============================================ */

/* Fix 1: Locations page – both unit cards stack properly on mobile */
@media(max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Fix 2: Facilities page – equipment images not cropped on mobile */
@media(max-width: 600px) {
  .equipment-card img {
    height: auto !important;
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
  }
}

/* Fix 3: Topbar link colour on all pages */
.topbar a {
  color: white;
  font-weight: 800;
  text-decoration: none;
}

/* Fix 4: Social links wrap properly on mobile in locations/contact */
.social-links {
  flex-wrap: wrap;
  gap: 8px;
}

/* Maps responsive fix */
@media(max-width:700px) {
  .map-grid { grid-template-columns: 1fr !important; }
}

/* Contrast fixes – mobile accessibility (Jun 2026) */
.coming-soon-btn {
  background: #1a3a6b !important;
  color: #ffffff !important;
  border-color: #4a7abf !important;
}
.footer-bottom {
  color: #c8d8f0 !important;
}
.footer-col ul li a,
.footer-col p a,
.footer-col p {
  color: #c8d8f0 !important;
}
.footer-social a {
  color: #ffffff !important;
}