/* MSD Cleaning Services - Modern CSS */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;color:#1e293b;background:#002444;line-height:1.6;overflow-x:hidden;width:100%;max-width:100vw}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit;font-size:16px}

/* Tokens */
:root{
  --teal:#0e8fad;--teal-dk:#0a6f87;--teal-lt:#e0f5f9;
  --gold:#c9933a;--gold-dk:#a87530;
  --navy:#08404f;--dark:#1e293b;--gray:#64748b;--gray-lt:#e2e8f0;
  --white:#fff;--light:#f8fafc;
  --r:12px;--r-lg:20px;--r-xl:32px;--r-pill:9999px;
  --s1:0 1px 3px rgba(0,0,0,.1);
  --s2:0 4px 12px rgba(0,0,0,.08);
  --s3:0 12px 30px rgba(0,0,0,.12);
  --s4:0 24px 48px rgba(0,0,0,.14);
  --t:.3s ease;--hh:72px;
}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.section{padding:5rem 0}
.section--gray{background:var(--light)}
.section--dark{background:var(--navy);color:#fff}

/* Section header */
.section-hd{text-align:center;margin-bottom:3.5rem}
.tag{display:inline-block;background:var(--teal-lt);color:var(--teal);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.35rem 1rem;border-radius:var(--r-pill);margin-bottom:.875rem}
.tag--light{background:rgba(255,255,255,.15);color:#fff}
.section-title{font-size:clamp(1.8rem,4vw,2.75rem);font-weight:800;color:var(--navy);line-height:1.2;margin-bottom:.75rem}
.section--dark .section-title{color:#fff}
.section-sub{font-size:1.05rem;color:var(--gray);max-width:560px;margin:0 auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;border-radius:var(--r-pill);transition:all var(--t);cursor:pointer;font-size:.95rem;padding:.7rem 1.75rem;border:2px solid transparent;text-decoration:none;white-space:nowrap}
.btn--sm{padding:.4rem 1.1rem;font-size:.83rem}
.btn--lg{padding:.95rem 2.25rem;font-size:1.05rem}
.btn--full{width:100%;justify-content:center}
.btn--primary{background:var(--teal);color:#fff;box-shadow:0 4px 14px rgba(14,143,173,.35)}
.btn--primary:hover{background:var(--teal-dk);transform:translateY(-2px);box-shadow:0 8px 24px rgba(14,143,173,.45)}
.btn--gold{background:var(--gold);color:#fff;box-shadow:0 4px 14px rgba(201,147,58,.3)}
.btn--gold:hover{background:var(--gold-dk);transform:translateY(-2px)}
.btn--outline{border-color:#fff;color:#fff}
.btn--outline:hover{background:#fff;color:var(--teal);transform:translateY(-2px)}
.btn--white{background:#fff;color:var(--teal);font-weight:700}
.btn--white:hover{transform:translateY(-2px);box-shadow:var(--s3)}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  margin-top: 0;
  overflow: hidden;
  line-height: 0;
  background: #002444;
  display: block;
}
.hero picture {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.hero__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center top;
  image-rendering: -webkit-optimize-contrast;
}

/* ============================================================
   SERVICES & MSD TV CTA SECTION - Seamless with Hero Image
   ============================================================ */
.svc-cta-section {
  display: block !important;
  background: linear-gradient(90deg, #002444 0%, #00355e 50%, #014270 100%);
  padding: 3.5rem 0;
  border: none;
  margin-top: -1px;
  position: relative;
}
.svc-cta-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}

/* Left: What We Do Content */
.svc-cta-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.svc-cta-content .tag {
  background: rgba(201,147,58,0.2);
  border: 1px solid rgba(201,147,58,0.45);
  color: var(--gold);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 9999px;
  margin-bottom: .75rem;
}
.svc-cta-title {
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.12;
  margin: 0 0 .35rem;
  letter-spacing: -.02em;
}
.svc-cta-title em {
  color: var(--gold);
  font-style: normal;
}
.svc-cta-sub {
  font-size: clamp(.82rem, 1.4vw, .95rem);
  font-weight: 700;
  color: rgba(255,255,255,.88);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .9rem;
}
.svc-cta-desc {
  color: rgba(255,255,255,.82);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.35rem;
  max-width: 540px;
}
.svc-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.6rem;
}
.svc-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(201,147,58,.1);
  border: 1px solid rgba(201,147,58,.35);
  color: #fff;
  font-size: .84rem;
  font-weight: 600;
  padding: .42rem .9rem;
  border-radius: 8px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all var(--t);
}
.svc-pill:hover {
  background: rgba(201,147,58,.25);
  border-color: var(--gold-light);
  transform: translateY(-2px);
}
.svc-cta-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.svc-cta-btn {
  font-size: .95rem;
  font-weight: 800;
  padding: .85rem 1.85rem;
  letter-spacing: .03em;
  box-shadow: 0 4px 18px rgba(201,147,58,.4);
}
.svc-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(201,147,58,.6);
}

/* Right: MSD TV Fixed Frame */
.msd-tv-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
.msd-tv-frame {
  width: 100%;
  max-width: 360px;
  background: #001222;
  border: 2px solid rgba(201,147,58,.55);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,.6), 0 0 24px rgba(201,147,58,.15);
  cursor: pointer;
  transition: all var(--t);
  display: flex;
  flex-direction: column;
  position: relative;
}
.msd-tv-frame:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--gold);
  box-shadow: 0 20px 44px rgba(0,0,0,.7), 0 0 32px rgba(201,147,58,.35);
}
.msd-tv-frame__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .8rem;
  background: rgba(0,0,0,.5);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.msd-tv-frame__badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .7rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.msd-tv-frame__hint {
  font-size: .65rem;
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.msd-tv-frame__screen {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msd-tv-frame__screen video,
.msd-tv-frame__screen iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border: none;
}
.msd-tv-frame__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .8rem;
  background: #00172e;
  border-top: 1px solid rgba(255,255,255,.06);
}
.msd-tv-frame__info {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.msd-tv-frame__label {
  font-size: .6rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.msd-tv-frame__title {
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}
.msd-tv-frame__expand-btn {
  color: var(--gold);
  font-size: 1rem;
  transition: transform var(--t);
  flex-shrink: 0;
}
.msd-tv-frame:hover .msd-tv-frame__expand-btn {
  transform: scale(1.2);
}

/* ============================================================
   RIGHT FLOATING COLUMN (Weather + WhatsApp + Get a Quote)
   ============================================================ */
.right-float {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 998;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
  width: 152px;
  pointer-events: none;
}
.right-float > * {
  pointer-events: auto;
}

/* 1. Weather card */
.rf-weather {
  background: rgba(0,36,68,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201,147,58,.45);
  border-radius: var(--r);
  padding: .7rem .9rem;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: all var(--t);
}
.rf-weather:hover {
  border-color: rgba(201,147,58,.8);
  transform: translateY(-2px);
}
.wx-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: .75rem;
  opacity: .85;
  padding: .25rem 0;
}
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.wx-data {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.wx-icon {
  font-size: 1.65rem;
  line-height: 1;
  animation: wPulse 3s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes wPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
.wx-temp {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.wx-cond {
  display: block;
  font-size: .65rem;
  opacity: .85;
  line-height: 1.3;
}
.wx-date {
  font-size: .66rem;
  opacity: .75;
  text-align: center;
  margin-top: .3rem;
  font-style: italic;
  line-height: 1.3;
}

/* 2. WhatsApp button */
.rf-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: #25d366;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: .68rem .875rem;
  border-radius: var(--r);
  box-shadow: 0 4px 14px rgba(37,211,102,.4);
  transition: all var(--t);
  text-decoration: none;
}
.rf-whatsapp:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(37,211,102,.55);
}

/* 3. Get a Quote button */
.rf-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: var(--gold);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: .68rem .875rem;
  border-radius: var(--r);
  box-shadow: 0 4px 14px rgba(201,147,58,.45);
  transition: all var(--t);
  text-decoration: none;
  white-space: nowrap;
}
.rf-quote:hover {
  background: var(--gold-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(201,147,58,.55);
}

/* 4. Support button */
.rf-support {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: #002850;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: .68rem .875rem;
  border-radius: var(--r);
  box-shadow: 0 4px 14px rgba(0,40,80,.4);
  transition: all var(--t);
  text-decoration: none;
  white-space: nowrap;
}
.rf-support:hover {
  background: #0e8fad;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(14,143,173,.55);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:#00172c;color:rgba(255,255,255,.65);padding:4rem 0 0;border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:2.5rem;margin-bottom:3rem}
.footer-brand{display:flex;flex-direction:column;gap:.875rem}
.footer-logo{height:auto;width:160px;max-height:80px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85}
.footer-brand p{font-size:.88rem;line-height:1.7}
.footer-social{display:flex;gap:1rem}
.footer-social a{font-size:1.25rem;transition:transform var(--t),opacity var(--t);opacity:.7}
.footer-social a:hover{transform:scale(1.2);opacity:1}
.footer-col h4{font-size:.8rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}
.footer-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-col a{font-size:.88rem;transition:color var(--t)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:1.25rem 0;text-align:center;font-size:.82rem}
.footer-admin-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.45rem !important;
  min-height: 48px !important;
  border-radius: 9999px;
  background: rgba(201, 147, 58, 0.22) !important;
  border: 2px solid rgba(247, 208, 112, 0.65) !important;
  color: #f7d070 !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  transition: all .2s ease;
  position: relative !important;
  z-index: 9999 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(201, 147, 58, 0.4);
  pointer-events: auto !important;
  user-select: none;
  -webkit-user-select: none;
}
.footer-admin-btn * {
  pointer-events: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .footer-admin-btn:hover {
    background: rgba(201, 147, 58, 0.4) !important;
    border-color: #f7d070 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 147, 58, 0.4) !important;
  }
}
.footer-admin-btn:active {
  background: rgba(201, 147, 58, 0.5) !important;
  transform: scale(0.98);
}

/* ============================================================
   GALLERY MODAL & LIGHTBOX
   ============================================================ */
.gmodal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.gmodal__inner {
  background: #fff;
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--s4);
}
.gmodal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.75rem;
  border-bottom: 2px solid var(--gray-lt);
  flex-shrink: 0;
}
.gmodal__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy);
}
.gmodal__close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gray-lt);
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
  color: var(--dark);
}
.gmodal__close:hover {
  background: #fee2e2;
  color: #dc2626;
}
.gmodal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}
.gmodal__grid .gitem {
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--gray-lt);
  aspect-ratio: 4/3;
}
.gmodal__grid .gitem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.gmodal__grid .gitem:hover img { transform: scale(1.06); }
.gmodal__grid .gitem__over {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--t);
  display: flex;
  align-items: flex-end;
  padding: .875rem;
}
.gmodal__grid .gitem:hover .gitem__over { opacity: 1; }
.gmodal__grid .gitem__over span { color: #fff; font-weight: 600; font-size: .85rem; }

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:9999;display:flex;align-items:center;justify-content:center}
.lb-close{position:absolute;top:1.25rem;right:1.25rem;font-size:1.2rem;color:#fff;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;transition:background var(--t);cursor:pointer;border:none}
.lb-close:hover{background:rgba(255,255,255,.3)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:2.5rem;color:#fff;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background var(--t);cursor:pointer;border:none}
.lb-nav:hover{background:rgba(255,255,255,.25)}
.lb-prev{left:1rem}.lb-next{right:1rem}
.lb-body img{max-width:90vw;max-height:85vh;border-radius:var(--r);object-fit:contain}

.vmodal{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1.25rem}
.vmodal-inner{position:relative;width:100%;max-width:900px;background:#000;border-radius:var(--r-lg);overflow:hidden}
.vmodal-close{position:absolute;top:.75rem;right:.75rem;z-index:1;font-size:1.1rem;color:#fff;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:background var(--t)}
.vmodal-close:hover{background:rgba(255,255,255,.2)}
.vmodal-frame{position:relative;padding-top:56.25%}
.vmodal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none}

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .right-float {
    top: auto;
    bottom: 1.25rem;
    right: 1rem;
    width: auto;
    gap: .55rem;
    align-items: flex-end;
    z-index: 1000;
    pointer-events: none;
  }
  .right-float > * {
    pointer-events: auto;
  }
  /* Mobile Weather Capsule: ZERO information loss, adapts dynamically to screen */
  .rf-weather {
    display: inline-flex !important;
    position: fixed;
    top: max(0.65rem, env(safe-area-inset-top));
    right: max(0.75rem, env(safe-area-inset-right));
    width: auto;
    max-width: calc(100vw - 1.5rem);
    padding: .35rem .75rem;
    border-radius: 9999px;
    background: rgba(0, 24, 48, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(201, 147, 58, 0.5);
    color: #fff;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    transition: all .25s ease;
  }
  .rf-weather:hover, .rf-weather:active {
    background: rgba(0, 36, 68, 0.96);
    border-color: rgba(247, 208, 112, 0.8);
    transform: translateY(-1px);
  }
  .rf-weather .wx-loading {
    padding: 0;
    font-size: .72rem;
  }
  .rf-weather .wx-data {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: .4rem !important;
  }
  .rf-weather .wx-icon {
    font-size: 1.15rem;
    line-height: 1;
  }
  .rf-weather .wx-temp {
    display: inline-block !important;
    font-size: .85rem;
    font-weight: 800;
    color: var(--gold-light, #f7d070);
    line-height: 1;
    margin-right: .2rem;
  }
  .rf-weather .wx-cond {
    display: inline-block !important;
    font-size: .74rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1;
  }
  .rf-weather .wx-date {
    display: none;
    font-size: .68rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    padding-top: .15rem;
  }
  .rf-weather.is-expanded {
    border-radius: 14px;
    flex-direction: column;
    align-items: flex-start;
    padding: .5rem .85rem;
  }
  .rf-weather.is-expanded .wx-date {
    display: block !important;
  }

  .rf-whatsapp,
  .rf-quote,
  .rf-support {
    width: auto;
    height: auto;
    min-height: 38px;
    padding: .45rem .85rem;
    border-radius: 9999px;
    font-size: .78rem;
    font-weight: 700;
    gap: .42rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: .01em;
  }
  .rf-whatsapp span,
  .rf-quote span,
  .rf-support span {
    display: inline-block !important;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
  }
  .rf-whatsapp svg,
  .rf-quote svg,
  .rf-support svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
  }

  @media (max-width: 380px) {
    .right-float {
      bottom: .75rem;
      right: .65rem;
      gap: .35rem;
    }
    .rf-whatsapp,
    .rf-quote,
    .rf-support {
      min-height: 34px;
      padding: .35rem .65rem;
      font-size: .72rem;
    }
    .rf-whatsapp span,
    .rf-quote span,
    .rf-support span {
      font-size: .72rem;
    }
    .rf-weather {
      top: .45rem;
      right: .55rem;
      padding: .28rem .55rem;
    }
    .rf-weather .wx-cond {
      font-size: .68rem;
    }
    .rf-weather .wx-temp {
      font-size: .78rem;
    }
  }

  .svc-cta-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    text-align: center;
  }
  .svc-cta-content {
    align-items: center;
  }
  .svc-cta-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .svc-pills-row {
    justify-content: center;
  }
  .svc-cta-actions {
    justify-content: center;
    width: 100%;
  }
  .svc-cta-btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
  .msd-tv-wrapper {
    justify-content: center;
  }
  .msd-tv-frame {
    max-width: 400px;
  }
  .footer {
    padding-bottom: 9.5rem !important;
  }
  .footer-bottom {
    padding-bottom: 1.5rem !important;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 480px) {
  .svc-cta-section { padding: 2.25rem 0; }
  .svc-cta-title { font-size: 1.55rem; }
  .svc-pills-row { gap: .4rem; }
  .svc-pill { font-size: .78rem; padding: .35rem .65rem; }
  .footer { padding: 3rem 0 10.5rem !important; }
  .footer-bottom { padding-bottom: 2rem !important; }
  .footer-admin-btn {
    min-height: 48px !important;
    padding: .65rem 1.6rem !important;
    font-size: .92rem !important;
    position: relative !important;
    z-index: 9999 !important;
  }
  .gmodal { padding: 0; }
  .gmodal__inner { border-radius: 0; max-height: 100vh; height: 100vh; }
  .gmodal__grid { grid-template-columns: repeat(2, 1fr); padding: 1rem; gap: .75rem; }
}
/* ============================================================
   MSD TV — MINI WIDGET & EXPANDED PLAYER
   ============================================================ */
.msd-tv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
  display: inline-block;
  box-shadow: 0 0 6px #dc2626;
  animation: tvDotPulse 1.8s infinite;
}
.msd-tv-dot.on-air {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}
@keyframes tvDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.8); }
}

/* OFF AIR Retro Test Pattern Screen */
.tv-off-air-screen {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #b4b4b4 0% 14.28%, #c5b400 14.28% 28.56%, #00b4b4 28.56% 42.84%, #00b400 42.84% 57.12%, #b400b4 57.12% 71.4%, #b40000 71.4% 85.68%, #0000b4 85.68% 100%);
  text-align: center;
  overflow: hidden;
}
.tv-off-air-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.45) 2px, transparent 2px, transparent 4px);
  pointer-events: none;
}
.tv-off-air-box {
  position: relative;
  z-index: 1;
  background: rgba(0, 15, 30, .88);
  border: 1px solid rgba(255,255,255,.3);
  padding: .35rem .65rem;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  color: #fff;
}
.tv-off-air-title {
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  color: #f87171;
  text-transform: uppercase;
}
.tv-off-air-sub {
  font-size: .58rem;
  color: rgba(255,255,255,.8);
  margin-top: .1rem;
  font-family: monospace;
}

/* ============================================================
   EXPANDED MEDIUM PLAYER (MSD TV MODAL)
   ============================================================ */
.msd-tv-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.msd-tv-modal[hidden] { display: none !important; }
.msd-tv-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 8, 18, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.msd-tv-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680px;
  background: #00172e;
  border: 2px solid var(--gold);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.85), 0 0 30px rgba(201,147,58,.2);
  animation: tvModalPop .3s cubic-bezier(.16,1,.3,1);
  transition: max-width .35s ease, transform .3s ease;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
@keyframes tvModalPop {
  from { opacity: 0; transform: scale(.92) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.msd-tv-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.4rem;
  background: #001222;
  border-bottom: 2px solid rgba(201,147,58,.3);
  flex-shrink: 0;
}
.msd-tv-modal__branding {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.msd-tv-live-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .25rem .65rem;
  border-radius: 9999px;
  background: rgba(220,38,38,.2);
  color: #f87171;
  border: 1px solid rgba(220,38,38,.4);
}
.msd-tv-live-pill.on-air {
  background: rgba(34,197,94,.2);
  color: #4ade80;
  border-color: rgba(34,197,94,.4);
}
.msd-tv-modal__branding h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}
.msd-tv-modal__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: all var(--t);
}
.msd-tv-modal__close:hover {
  background: #dc2626;
  transform: scale(1.08);
}

.msd-tv-modal__screen {
  width: 100%;
  aspect-ratio: 16/9;
  background: #001222;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: aspect-ratio .35s ease;
  flex-shrink: 1;
  min-height: 0;
}
.msd-tv-modal__screen video,
.msd-tv-modal__screen iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  object-fit: contain;
}

/* Medium Off Air Screen */
.tv-off-air-medium {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #b4b4b4 0% 14.28%, #c5b400 14.28% 28.56%, #00b4b4 28.56% 42.84%, #00b400 42.84% 57.12%, #b400b4 57.12% 71.4%, #b40000 71.4% 85.68%, #0000b4 85.68% 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
}
.tv-off-air-medium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,.5) 3px, transparent 3px, transparent 6px);
  pointer-events: none;
}
.tv-off-air-medium-card {
  position: relative;
  z-index: 2;
  background: rgba(0, 18, 36, .94);
  border: 2px solid #c9933a;
  border-radius: 14px;
  padding: 1.75rem 2.25rem;
  text-align: center;
  max-width: 460px;
  box-shadow: 0 16px 40px rgba(0,0,0,.85);
  color: #fff;
}
.tv-off-air-medium-card .icon { font-size: 2.5rem; margin-bottom: .4rem; }
.tv-off-air-medium-card h4 {
  font-size: 1.25rem;
  font-weight: 900;
  color: #f87171;
  letter-spacing: .12em;
  margin-bottom: .25rem;
  text-transform: uppercase;
}
.tv-off-air-medium-card .sub {
  font-size: .78rem;
  font-family: monospace;
  color: var(--gold);
  letter-spacing: .15em;
  margin-bottom: .85rem;
}
.tv-off-air-medium-card p {
  font-size: .88rem;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.tv-off-air-medium-card .btn-wa {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #25d366;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  padding: .6rem 1.4rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: all var(--t);
}
.tv-off-air-medium-card .btn-wa:hover {
  background: #1ebe5d;
  transform: translateY(-2px);
}

.msd-tv-modal__meta {
  padding: 1rem 1.5rem;
  background: #001222;
  border-top: 1px solid rgba(255,255,255,.08);
}
.msd-tv-meta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .25rem;
}
.msd-tv-meta-header strong {
  font-size: 1rem;
  color: #fff;
  font-weight: 800;
}
.msd-tv-meta-date {
  font-size: .78rem;
  color: var(--gold);
  font-weight: 600;
  background: rgba(201,147,58,.15);
  padding: .2rem .6rem;
  border-radius: 9999px;
}
.msd-tv-modal__meta p {
  font-size: .85rem;
  color: rgba(255,255,255,.75);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .msd-tv-modal__box { max-height: 94vh; overflow-y: auto; }
  .tv-off-air-medium-card { padding: 1.25rem 1rem; }
}