@import url("/assets/premium-polish.css?v=20260433");

/* Overrides and fixes — loads after site-layout; premium-polish is imported above. */

/* Fluid shell gutter when site-layout is absent (e.g. home uses layout tokens from here). */
:root {
  --et-shell-gutter: clamp(1.5rem, 3.5vw, 3rem);
}

/* One horizontal rhythm for every primary `max-w-7xl` rail (safe-area aware). */
#root .max-w-7xl.mx-auto {
  padding-left: max(var(--et-shell-gutter), env(safe-area-inset-left, 0px)) !important;
  padding-right: max(var(--et-shell-gutter), env(safe-area-inset-right, 0px)) !important;
}

/* Outer shell already inset — nested max-w-7xl rails should not double the gutter */
#root .max-w-7xl.mx-auto .max-w-7xl.mx-auto {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Narrower rails in main — same horizontal rhythm when they are the primary shell */
#root main .max-w-6xl.mx-auto,
#root main .max-w-5xl.mx-auto {
  padding-left: max(var(--et-shell-gutter), env(safe-area-inset-left, 0px)) !important;
  padding-right: max(var(--et-shell-gutter), env(safe-area-inset-right, 0px)) !important;
}

/* Outer max-w-7xl already inset — inner 5xl/6xl should not add a second gutter */
#root .max-w-7xl.mx-auto .max-w-5xl.mx-auto,
#root .max-w-7xl.mx-auto .max-w-6xl.mx-auto {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Full-screen mobile drawer — match shell gutter (replaces ad hoc px-6) */
#root #mobile-menu.fixed {
  padding-left: max(var(--et-shell-gutter), env(safe-area-inset-left, 0px)) !important;
  padding-right: max(var(--et-shell-gutter), env(safe-area-inset-right, 0px)) !important;
}

/* Service pages (navy hero): high-contrast copy on blue + hero gradient */
[data-et-hero="it-support"],
[data-et-hero="cctv"],
[data-et-hero="alarms"],
[data-et-hero="cabling"],
[data-et-hero="wifi"],
[data-et-hero="starlink"],
[data-et-hero="pendant"],
[data-et-hero="remote-support"],
[data-et-hero="services"],
[data-et-hero="about"],
[data-et-hero="contact"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}
/* Slightly reduce gradient darkening so the band reads brighter behind type */
[data-et-hero="it-support"] > .bg-hero-gradient,
[data-et-hero="it-support"] .absolute.inset-0.bg-hero-gradient,
[data-et-hero="cctv"] > .bg-hero-gradient,
[data-et-hero="cctv"] .absolute.inset-0.bg-hero-gradient,
[data-et-hero="alarms"] > .bg-hero-gradient,
[data-et-hero="alarms"] .absolute.inset-0.bg-hero-gradient,
[data-et-hero="cabling"] > .bg-hero-gradient,
[data-et-hero="cabling"] .absolute.inset-0.bg-hero-gradient,
[data-et-hero="wifi"] > .bg-hero-gradient,
[data-et-hero="wifi"] .absolute.inset-0.bg-hero-gradient,
[data-et-hero="starlink"] > .bg-hero-gradient,
[data-et-hero="starlink"] .absolute.inset-0.bg-hero-gradient,
[data-et-hero="pendant"] > .bg-hero-gradient,
[data-et-hero="pendant"] .absolute.inset-0.bg-hero-gradient,
[data-et-hero="remote-support"] > .bg-hero-gradient,
[data-et-hero="remote-support"] .absolute.inset-0.bg-hero-gradient,
[data-et-hero="services"] > .bg-hero-gradient,
[data-et-hero="services"] .absolute.inset-0.bg-hero-gradient,
[data-et-hero="about"] > .bg-hero-gradient,
[data-et-hero="about"] .absolute.inset-0.bg-hero-gradient,
[data-et-hero="contact"] > .bg-hero-gradient,
[data-et-hero="contact"] .absolute.inset-0.bg-hero-gradient {
  opacity: 0.65 !important;
}
[data-et-hero="it-support"] .max-w-4xl,
[data-et-hero="cctv"] .max-w-4xl,
[data-et-hero="alarms"] .max-w-4xl,
[data-et-hero="cabling"] .max-w-4xl,
[data-et-hero="wifi"] .max-w-4xl,
[data-et-hero="starlink"] .max-w-4xl,
[data-et-hero="pendant"] .max-w-4xl,
[data-et-hero="remote-support"] .max-w-4xl,
[data-et-hero="services"] .max-w-4xl,
[data-et-hero="about"] .max-w-4xl,
[data-et-hero="contact"] .max-w-4xl {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 22px rgba(0, 0, 0, 0.35);
}
[data-et-hero="it-support"] a[href="/"],
[data-et-hero="cctv"] a[href="/"],
[data-et-hero="alarms"] a[href="/"],
[data-et-hero="cabling"] a[href="/"],
[data-et-hero="wifi"] a[href="/"],
[data-et-hero="starlink"] a[href="/"],
[data-et-hero="pendant"] a[href="/"],
[data-et-hero="remote-support"] a[href="/"],
[data-et-hero="services"] a[href="/"],
[data-et-hero="about"] a[href="/"],
[data-et-hero="contact"] a[href="/"] {
  color: #f1f5f9 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
[data-et-hero="it-support"] a[href="/"]:hover,
[data-et-hero="it-support"] a[href="/"]:hover .lucide,
[data-et-hero="cctv"] a[href="/"]:hover,
[data-et-hero="cctv"] a[href="/"]:hover .lucide,
[data-et-hero="alarms"] a[href="/"]:hover,
[data-et-hero="alarms"] a[href="/"]:hover .lucide,
[data-et-hero="cabling"] a[href="/"]:hover,
[data-et-hero="cabling"] a[href="/"]:hover .lucide,
[data-et-hero="wifi"] a[href="/"]:hover,
[data-et-hero="wifi"] a[href="/"]:hover .lucide,
[data-et-hero="starlink"] a[href="/"]:hover,
[data-et-hero="starlink"] a[href="/"]:hover .lucide,
[data-et-hero="pendant"] a[href="/"]:hover,
[data-et-hero="pendant"] a[href="/"]:hover .lucide,
[data-et-hero="remote-support"] a[href="/"]:hover,
[data-et-hero="remote-support"] a[href="/"]:hover .lucide,
[data-et-hero="services"] a[href="/"]:hover,
[data-et-hero="services"] a[href="/"]:hover .lucide,
[data-et-hero="about"] a[href="/"]:hover,
[data-et-hero="about"] a[href="/"]:hover .lucide,
[data-et-hero="contact"] a[href="/"]:hover,
[data-et-hero="contact"] a[href="/"]:hover .lucide {
  color: #ffffff !important;
}
[data-et-hero="it-support"] a[href="/"] .rounded-full,
[data-et-hero="cctv"] a[href="/"] .rounded-full,
[data-et-hero="alarms"] a[href="/"] .rounded-full,
[data-et-hero="cabling"] a[href="/"] .rounded-full,
[data-et-hero="wifi"] a[href="/"] .rounded-full,
[data-et-hero="starlink"] a[href="/"] .rounded-full,
[data-et-hero="pendant"] a[href="/"] .rounded-full,
[data-et-hero="remote-support"] a[href="/"] .rounded-full,
[data-et-hero="services"] a[href="/"] .rounded-full,
[data-et-hero="about"] a[href="/"] .rounded-full,
[data-et-hero="contact"] a[href="/"] .rounded-full {
  color: #ffffff !important;
}
/* IT Support eyebrow only */
[data-et-hero="it-support"] p.text-xs.font-bold.uppercase,
[data-et-hero="services"] p.text-xs.font-bold.uppercase,
[data-et-hero="about"] p.text-xs.font-bold.uppercase,
[data-et-hero="contact"] p.text-xs.font-bold.uppercase {
  color: #bae6fd !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.18em;
}
[data-et-hero="it-support"] h1,
[data-et-hero="cctv"] h1,
[data-et-hero="alarms"] h1,
[data-et-hero="cabling"] h1,
[data-et-hero="wifi"] h1,
[data-et-hero="starlink"] h1,
[data-et-hero="pendant"] h1,
[data-et-hero="remote-support"] h1,
[data-et-hero="services"] h1,
[data-et-hero="about"] h1,
[data-et-hero="contact"] h1 {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 28px rgba(0, 0, 0, 0.35);
}
/* Hero subline */
[data-et-hero="it-support"] h1 + p,
[data-et-hero="it-support"] p.text-xl.max-w-4xl,
[data-et-hero="cctv"] h1 + p,
[data-et-hero="cctv"] p.text-xl,
[data-et-hero="alarms"] h1 + p,
[data-et-hero="alarms"] p.text-xl,
[data-et-hero="cabling"] h1 + p,
[data-et-hero="cabling"] p.text-xl,
[data-et-hero="wifi"] h1 + p,
[data-et-hero="wifi"] p.text-xl,
[data-et-hero="starlink"] h1 + p,
[data-et-hero="starlink"] p.text-xl,
[data-et-hero="pendant"] h1 + p,
[data-et-hero="pendant"] p.text-xl,
[data-et-hero="remote-support"] h1 + p,
[data-et-hero="remote-support"] p.text-xl,
[data-et-hero="services"] h1 + p,
[data-et-hero="services"] p.text-xl,
[data-et-hero="about"] h1 + p,
[data-et-hero="about"] p.text-xl,
[data-et-hero="contact"] h1 + p,
[data-et-hero="contact"] p.text-xl {
  color: #f1f5f9 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  font-weight: 600;
}

/* Readability: body / muted text on light surfaces (mirrors premium-polish for pages
   that skip it; dark hero sections keep lighter slate below). */
#root main
  :is(
    .bg-white,
    .bg-slate-50,
    .bg-neutral-50,
    .bg-slate-100,
    .bg-white\/90,
    .bg-white\/95
  )
  :is(
    .text-slate-400,
    .text-slate-500,
    .text-neutral-400,
    .text-neutral-500
  ) {
  color: #334155 !important;
}

#root main
  :is(
    .bg-white,
    .bg-slate-50,
    .bg-neutral-50
  )
  :is(p, li, dd, figcaption, td, th).font-light {
  font-weight: 400 !important;
  line-height: 1.58;
}

#root
  main
  :is(
    section.bg-white,
    section.bg-slate-50,
    section.bg-neutral-50
  )
  nav[aria-label="Breadcrumb"] {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1)) !important; /* slate-700 */
}
#root
  main
  :is(
    section.bg-white,
    section.bg-slate-50,
    section.bg-neutral-50
  )
  nav[aria-label="Breadcrumb"]
  a {
  color: #334155 !important;
  font-weight: 600;
}
#root
  main
  :is(
    section.bg-white,
    section.bg-slate-50,
    section.bg-neutral-50
  )
  nav[aria-label="Breadcrumb"]
  span.text-slate-300 {
  color: #94a3b8 !important; /* visible slash on white */
}

/* Dark sections / cards: reassert muted text (wins over light-surface block via specificity) */
#root
  main
  :is(
    section[class*="bg-[#0f172a]"],
    section[class*="bg-[#020617]"]
  )
  :is(
    .text-slate-400,
    a.text-slate-400
  ) {
  color: #cbd5e1 !important;
}
#root
  main
  :is(
    section[class*="bg-[#0f172a]"],
    section[class*="bg-[#020617]"]
  )
  :is(
    .text-slate-500,
    a.text-slate-500
  ) {
  color: #94a3b8 !important;
}
#root main :is(.bg-slate-800, .bg-slate-900) :is(.text-slate-400, a.text-slate-400) {
  color: #cbd5e1 !important;
}
#root main :is(.bg-slate-800, .bg-slate-900) :is(.text-slate-500, a.text-slate-500) {
  color: #94a3b8 !important;
}

/* Desktop: smaller Trusted Hardware white logo tiles (main marketing footers) */
@media (min-width: 768px) {
  #footer-brand-logos .flex.flex-wrap,
  footer .max-w-7xl > div.py-12.border-b .flex.flex-wrap {
    column-gap: 1.5rem !important;
    row-gap: 1.25rem !important;
  }

  #footer-brand-logos [class*='rounded-2xl'].bg-white,
  footer .max-w-7xl > div.py-12.border-b [class*='rounded-2xl'].bg-white {
    height: 4.5rem !important;
    min-height: 4.5rem !important;
    max-height: 4.5rem !important;
    width: 9.25rem !important;
    max-width: 9.25rem !important;
    min-width: 0 !important;
    padding: 0.625rem 0.75rem !important;
  }

  #footer-brand-logos img[src^='/logos/'],
  footer .max-w-7xl > div.py-12.border-b img[src^='/logos/'] {
    max-width: 92% !important;
  }

  #footer-brand-logos img[src^='/logos/'][alt='Hikvision'],
  footer .max-w-7xl > div.py-12.border-b img[src^='/logos/'][alt='Hikvision'] {
    height: 32px !important;
    max-height: 32px !important;
  }
  #footer-brand-logos img[src^='/logos/'][alt='Dahua Technology'],
  footer .max-w-7xl > div.py-12.border-b img[src^='/logos/'][alt='Dahua Technology'] {
    height: 32px !important;
    max-height: 32px !important;
  }
  #footer-brand-logos img[src^='/logos/'][alt='Ajax Systems'],
  footer .max-w-7xl > div.py-12.border-b img[src^='/logos/'][alt='Ajax Systems'] {
    height: 34px !important;
    max-height: 34px !important;
  }
  #footer-brand-logos img[src^='/logos/'][alt='Starlink'],
  footer .max-w-7xl > div.py-12.border-b img[src^='/logos/'][alt='Starlink'] {
    height: 38px !important;
    max-height: 38px !important;
  }
  #footer-brand-logos img[src^='/logos/'][alt='Ubiquiti'],
  #footer-brand-logos img[src^='/logos/'][alt='TP-Link'],
  footer .max-w-7xl > div.py-12.border-b img[src^='/logos/'][alt='Ubiquiti'],
  footer .max-w-7xl > div.py-12.border-b img[src^='/logos/'][alt='TP-Link'] {
    height: 34px !important;
    max-height: 34px !important;
    max-width: 50% !important;
  }
  #footer-brand-logos img[src^='/logos/'][alt='Splashtop'],
  footer .max-w-7xl > div.py-12.border-b img[src^='/logos/'][alt='Splashtop'] {
    height: 38px !important;
    max-height: 38px !important;
  }
  #footer-brand-logos img[src^='/logos/'][alt='Gallagher'],
  footer .max-w-7xl > div.py-12.border-b img[src^='/logos/'][alt='Gallagher'] {
    height: 32px !important;
    max-height: 32px !important;
  }
  #footer-brand-logos img[src^='/logos/'][alt='VIP Vision'],
  footer .max-w-7xl > div.py-12.border-b img[src^='/logos/'][alt='VIP Vision'] {
    height: 32px !important;
    max-height: 32px !important;
  }
}

/* Services hub: card body copy on small screens (slate-500 + font-light) */
@media (max-width: 639.98px) {
  #root main section.py-32.bg-slate-50 .group.rounded-3xl p.text-slate-500 {
    color: #334155 !important;
    font-weight: 400 !important;
    line-height: 1.62 !important;
  }
}

/* Home (index only): reduce vertical scroll — hero service grid, about, areas, process, footer strip */
@media (max-width: 767.98px) {
  /* Extra air below fixed chrome on / only (hero clears header + comfortable gap) */
  html:has([data-et-page='home']) {
    scroll-padding-top: max(7.5rem, calc(env(safe-area-inset-top, 0px) + 6rem));
  }

  #home-hero {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    padding-top: max(7.5rem, calc(env(safe-area-inset-top, 0px) + 6.25rem)) !important;
    padding-bottom: 1.5rem !important;
    align-items: flex-start !important;
  }

  /* Full-width single column: avoid narrow columns hugging one side */
  #home-hero .max-w-7xl.grid {
    width: 100% !important;
    max-width: min(80rem, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-items: stretch !important;
    row-gap: 1rem !important;
  }

  #home-hero .max-w-7xl.grid > * {
    min-width: 0 !important;
    width: 100% !important;
  }

  #home-hero .text-center.lg\\:text-left {
    padding-top: 0 !important;
  }

  #home-hero .mb-10.animate-fade-in {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0.65rem !important;
  }

  #home-hero .mb-10.animate-fade-in img {
    /* Slightly larger wordmark on phone (was 2.5rem; JS also sets height — max-height was clipping) */
    max-height: clamp(3rem, 12vw, 3.75rem) !important;
    width: auto !important;
  }

  #home-hero h1.text-4xl {
    font-size: clamp(1.65rem, 5.2vw, 2.05rem) !important;
    line-height: 1.14 !important;
    margin-bottom: 0.65rem !important;
  }

  #home-hero p.text-lg.text-slate-300 {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    margin-bottom: 0.65rem !important;
  }

  #home-hero .mb-12:not(.animate-fade-in) {
    margin-bottom: 0 !important;
  }

  /* Service quick-link panel: two columns on narrow viewports — larger tap tiles, same order */
  #home-hero .max-w-7xl.grid > div.rounded-3xl {
    padding: 0.9rem !important;
  }

  #home-hero .home-hero-services {
    gap: 0.75rem !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #home-hero .home-hero-services > a {
    min-height: 7.25rem !important;
    padding: 0.9rem 0.7rem !important;
    gap: 0.55rem !important;
    border-radius: 1rem !important;
  }

  #home-hero .home-hero-services > a svg {
    width: 2.375rem !important;
    height: 2.375rem !important;
  }

  #home-hero .home-hero-services > a span {
    font-size: 0.9375rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }

  /* ≤360px: slightly tighter gutter/padding so labels do not crowd (same 2-col order) */
  @media (max-width: 359.98px) {
    #home-hero .home-hero-services {
      gap: 0.625rem !important;
    }

    #home-hero .home-hero-services > a {
      padding-left: 0.6rem !important;
      padding-right: 0.6rem !important;
    }

    #home-hero .max-w-7xl.grid > div.rounded-3xl {
      padding: 0.8rem !important;
    }
  }

  #about {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  #about .grid.lg\\:grid-cols-2 {
    gap: 1.25rem !important;
  }

  #about .space-y-8 > * + * {
    margin-top: 0.9rem !important;
  }

  #about h2.text-4xl {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
  }

  #about p.text-lg {
    font-size: 1rem !important;
    line-height: 1.62 !important;
  }

  #about .space-y-12 > * + * {
    margin-top: 1rem !important;
  }

  #about .space-y-6 > * + * {
    margin-top: 0.5rem !important;
  }

  #about .relative.bg-white.p-8 {
    padding: 1.15rem !important;
  }

  #about div.h-32.w-48 {
    height: 4.5rem !important;
    width: 9rem !important;
  }

  #about .space-y-12 img.h-32 {
    height: 4.5rem !important;
  }

  #about .pt-8.border-t {
    padding-top: 0.6rem !important;
  }

  #easttech-stats {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  #easttech-stats .grid {
    gap: 1rem 1.1rem !important;
  }

  /* divide-x draws a left rule on every item after the first — wrong for 2×2 grid */
  #easttech-stats .grid > * + * {
    border-left-width: 0 !important;
  }

  #easttech-stats h3.text-5xl {
    font-size: 1.9rem !important;
    margin-bottom: 0.2rem !important;
  }

  #easttech-stats .text-xs {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    letter-spacing: 0.12em !important;
  }

  /* Why Choose EastTech — readable cards; avoid “crushed” icon + title scale */
  #why-choose-easttech {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }

  #why-choose-easttech .max-w-7xl > .text-center {
    margin-bottom: 0.85rem !important;
  }

  #why-choose-easttech .max-w-7xl > .text-center > span {
    margin-bottom: 0.4rem !important;
  }

  #why-choose-easttech .max-w-7xl > .text-center h2 {
    font-size: clamp(1.45rem, 4.2vw, 1.65rem) !important;
    margin-bottom: 0.45rem !important;
  }

  #why-choose-easttech .max-w-7xl > .text-center p {
    font-size: 1rem !important;
    line-height: 1.62 !important;
  }

  #why-choose-easttech .max-w-7xl > .grid {
    gap: 0.85rem !important;
  }

  #why-choose-easttech .max-w-7xl > .grid > div {
    padding: 0.85rem 0.75rem !important;
  }

  #why-choose-easttech .max-w-7xl > .grid > div > div:first-child {
    width: 3rem !important;
    height: 3rem !important;
    margin-bottom: 0.45rem !important;
  }

  #why-choose-easttech .max-w-7xl > .grid > div > div:first-child svg {
    width: 1.3rem !important;
    height: 1.3rem !important;
  }

  #why-choose-easttech .max-w-7xl > .grid > div h3 {
    font-size: clamp(1rem, 2.9vw, 1.125rem) !important;
    margin-bottom: 0.3rem !important;
    line-height: 1.3 !important;
  }

  #why-choose-easttech .max-w-7xl > .grid > div p.text-slate-500 {
    font-size: 1rem !important;
    line-height: 1.58 !important;
  }

  #areas {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  #areas .text-center.mb-16 {
    margin-bottom: 0.9rem !important;
  }

  #areas h2.text-4xl {
    font-size: 1.5rem !important;
    margin-bottom: 0.4rem !important;
  }

  #areas p.text-lg {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  #areas .grid.gap-12 {
    gap: 1.25rem !important;
  }

  #areas .bg-neutral-50.rounded-2xl.p-8 {
    padding: 1.25rem !important;
    margin-bottom: 0.85rem !important;
  }

  #areas .bg-neutral-50 h3.text-2xl {
    font-size: clamp(1.1rem, 3.2vw, 1.25rem) !important;
    margin-bottom: 0.5rem !important;
  }

  #areas .bg-neutral-50 p.text-slate-500.mb-8 {
    margin-bottom: 0.65rem !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  #areas .flex.flex-wrap.gap-3 {
    justify-content: center !important;
  }

  #home-process {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }

  #home-process .text-center.mb-16 {
    margin-bottom: 1rem !important;
  }

  #home-process h2 {
    font-size: clamp(1.45rem, 4vw, 1.6rem) !important;
  }

  #home-process .max-w-5xl .grid {
    gap: 0.9rem 0.75rem !important;
  }

  #home-process .w-16.h-16 {
    width: 3.25rem !important;
    height: 3.25rem !important;
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
  }

  #home-process h3.text-lg {
    font-size: clamp(1rem, 2.8vw, 1.0625rem) !important;
    margin-bottom: 0.35rem !important;
    line-height: 1.35 !important;
  }

  #home-process p.text-sm {
    font-size: 1rem !important;
    line-height: 1.58 !important;
  }

  /* How It Works: extra space between step grid and mobile-only CTA row */
  #home-process .max-w-5xl + .mt-12 {
    margin-top: calc(3rem + 1.25rem) !important;
  }
}

/* Mobile: overflow, viewport height, safe areas; compact footer visible sitewide */
@media (max-width: 767.98px) {
  /* About/credentials: compact ASIAL chip — hidden on small phones only; full ASIAL block below unchanged */
  [data-et-hide-mobile="true"] {
    display: none !important;
  }

  html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overflow-x: clip;
  }

  #root > .flex.min-h-screen,
  #root > .flex.flex-col.min-h-screen {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #root [data-static-shell='true'] > main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #scroll-to-top {
    bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)) !important;
    right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(6, 182, 212, 0.12);
  }

  header[data-site-header="true"] [data-header-mobile-phone="true"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(15, 23, 42, 0.06);
  }

  /* Match horizontal gutters to notched devices without shrinking content width oddly */
  #root main .max-w-7xl.mx-auto.px-6,
  #root main .max-w-7xl.mx-auto.px-5,
  #root main .max-w-7xl.mx-auto.px-6.sm\:px-8 {
    padding-left: max(1.5rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1.5rem, env(safe-area-inset-right, 0px)) !important;
  }

  /* Narrow article columns (SEO / legal): safe horizontal inset — many pages omit id="main" */
  #root [data-static-shell='true'] > main.max-w-3xl.mx-auto,
  #root [data-static-shell='true'] > main#main.max-w-3xl.mx-auto,
  #root [data-static-shell='true'] > main.max-w-4xl.mx-auto,
  #root [data-static-shell='true'] > main#main.max-w-4xl.mx-auto {
    padding-left: max(1.5rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1.5rem, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
  }

  /* Fluid media — avoid rare overflow from wide assets */
  #root main img,
  #root main video {
    max-width: 100%;
    height: auto;
  }

  #root main pre,
  #root main table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Inner footers: safe gutters when visible (non-home mobile) */
  #root footer .max-w-7xl.mx-auto.px-6,
  #root footer .max-w-7xl.mx-auto.px-6.sm\:px-8 {
    padding-left: max(1.5rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1.5rem, env(safe-area-inset-right, 0px)) !important;
  }

  /* Service / inner-page heroes: fit long headlines on narrow screens */
  #root main [data-et-hero] {
    padding-top: max(3rem, calc(env(safe-area-inset-top, 0px) + 2.125rem)) !important;
    padding-bottom: 2.5rem !important;
  }

  #root main [data-et-hero] h1 {
    font-size: clamp(1.4rem, 5.4vw, 1.85rem) !important;
    line-height: 1.12 !important;
  }

  #root main [data-et-hero] p.text-xl,
  #root main [data-et-hero] p.text-lg {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  /* --- Sitewide mobile display hygiene (overflow, grids, media, chrome) --- */
  #root {
    overflow-x: clip;
    max-width: 100%;
  }

  header[data-site-header="true"] {
    overflow-x: clip;
    max-width: 100%;
  }

  header[data-site-header="true"] > div.max-w-7xl {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  #mobile-menu {
    padding-left: max(1.5rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1.5rem, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    /* Tailwind may emit overscroll-contain; keep y-axis explicit for drawer-only rubber-band. */
    overscroll-behavior-y: contain;
    /* Legacy iOS: momentum scrolling inside the drawer; no-op on modern WebKit. */
    -webkit-overflow-scrolling: touch;
  }

  /*
   * Drawer uses a light glass gradient (site-layout + premium-polish); the transparent
   * wordmark is designed for dark surfaces. Navy “chip” matches header legibility without
   * touching header or desktop mega-menu rules.
   */
  #root #mobile-menu .flex.flex-col.space-y-4 > div.mb-6 {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.25rem;
    background: linear-gradient(
      180deg,
      rgba(7, 17, 31, 0.94) 0%,
      rgba(7, 17, 31, 0.88) 100%
    );
    border-radius: var(--et-radius-lg, 1rem);
    padding: 1rem 1.25rem;
    border: 1px solid rgba(34, 211, 238, 0.2);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 12px 32px -18px rgba(0, 0, 0, 0.32);
  }

  /* Mobile drawer: keep link rows clean */
  #root #mobile-menu a[href] {
    text-decoration: none !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(15, 23, 42, 0.06);
  }

  /* Forms: 16px text avoids iOS input zoom; min height for touch (direct main or nested #main / named form). */
  #root [data-static-shell="true"] > main input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(
      [type="range"]
    ):not([type="image"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  #root [data-static-shell="true"] > main select,
  #root main#main input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
      [type="image"]
    ):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  #root main#main select,
  #root main form[name="contact"] input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(
      [type="range"]
    ):not([type="image"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
  #root main form[name="contact"] select {
    min-height: 44px;
    font-size: 16px !important;
    line-height: 1.4;
  }

  #root [data-static-shell="true"] > main textarea,
  #root main#main textarea,
  #root main form[name="contact"] textarea {
    min-height: 6.5rem;
    font-size: 16px !important;
    line-height: 1.45;
  }

  #root [data-static-shell="true"] > main input[type="submit"],
  #root [data-static-shell="true"] > main input[type="button"],
  #root [data-static-shell="true"] > main button:not([aria-label="Open menu"]):not([aria-label="Close menu"]),
  #root main#main input[type="submit"],
  #root main#main input[type="button"],
  #root main#main button:not([aria-label="Open menu"]):not([aria-label="Close menu"]),
  #root main form[name="contact"] input[type="submit"],
  #root main form[name="contact"] input[type="button"],
  #root main form[name="contact"] button:not([aria-label="Open menu"]):not([aria-label="Close menu"]) {
    min-height: 44px;
  }

  /* Grids / flex columns: allow children to shrink instead of forcing overflow */
  #root main .grid > * {
    min-width: 0;
  }

  #root main .flex:not(.flex-nowrap) {
    min-width: 0;
  }

  #root main iframe,
  #root main embed,
  #root main object {
    max-width: 100%;
  }

  /* /pendant — Never Alone spotlight: shorter wordmark, calmer copy rhythm, one hero treatment */
  #pendant-never-alone .et-pendant-na-badge {
    display: none !important;
  }

  #pendant-never-alone .et-pendant-na-stage {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
    min-height: 0 !important;
  }

  #root
    main
    #pendant-never-alone
    [data-pendant-na-spotlight]
    img[alt="Never Alone"][data-na-hero="true"] {
    min-height: 0 !important;
    max-height: clamp(4.25rem, 14vw, 6rem) !important;
    width: auto !important;
    max-width: 100% !important;
    transform: scale(1) translateZ(0) !important;
  }

  #pendant-never-alone .flex.flex-col.gap-10.lg\:flex-row {
    gap: 2.75rem !important;
  }

  #pendant-never-alone .min-w-0.flex-1.space-y-5 > * + * {
    margin-top: 1.5rem !important;
  }

  #pendant-never-alone .min-w-0.flex-1.space-y-5 > h2 {
    margin-top: 1.75rem !important;
  }

  #pendant-never-alone .min-w-0.flex-1.space-y-5 > ul.space-y-3 {
    margin-top: 1.75rem !important;
    padding-top: 1.25rem !important;
  }

  #pendant-never-alone .min-w-0.flex-1.space-y-5 > ul.space-y-3 > li + li {
    margin-top: 1rem !important;
  }

  #pendant-never-alone .min-w-0.flex-1.space-y-5 > a.inline-flex {
    margin-top: 1.75rem !important;
  }

  #root footer {
    overflow-x: clip;
    max-width: 100%;
  }

  #root main p,
  #root main li,
  #root main td,
  #root main th {
    overflow-wrap: break-word;
  }

  #root main p a[href^="http"],
  #root main li a[href^="http"],
  #root main td a[href^="http"] {
    overflow-wrap: anywhere;
  }

  /* Full-bleed sections still respect safe horizontal inset */
  #root main section[class*="w-screen"],
  #root main .w-full.max-w-none {
    max-width: 100%;
  }
}

/* ASIAL mark: scales to wrapper; must beat img[src^="/logos/"] hardware-chip rules in critical CSS */
#root img.et-asial-membership-logo {
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0;
  object-fit: contain;
  object-position: center;
}

/* /services/starlink — larger mark in page hero (not Trusted Hardware card; see :not) */
body[data-service='starlink']
  #root
  main
  img[src^='/logos/'][alt='Starlink']:not([data-et-trusted-card-logo]) {
  width: auto !important;
  height: 8rem !important;
  max-width: min(100%, 26rem) !important;
  object-fit: contain !important;
}

@media (min-width: 768px) {
  body[data-service='starlink']
    #root
    main
    img[src^='/logos/'][alt='Starlink']:not([data-et-trusted-card-logo]) {
    height: 12rem !important;
    max-width: min(100%, 32rem) !important;
  }

  body[data-service='starlink']
    #root
    footer
    .max-w-7xl
    > div.py-12.border-b
    img[src^='/logos/'][alt='Starlink'] {
    height: 52px !important;
    max-height: 52px !important;
  }
}

/* Service + pendant dark callouts (premium navy panel) */
#root main .et-cctv-wifi-callout,
#root main .et-alarms-monitoring-callout,
#root main .et-cabling-upgrades-callout,
#root main .et-wifi-property-callout,
#root main .et-starlink-fixedline-callout,
#root main .et-pendant-dv-support-callout,
.et-cctv-wifi-callout,
.et-alarms-monitoring-callout,
.et-cabling-upgrades-callout,
.et-wifi-property-callout,
.et-starlink-fixedline-callout,
.et-pendant-dv-support-callout {
  --et-wifi-callout-glow: rgba(6, 182, 212, 0.18);
  position: relative;
  overflow: hidden;
  /* Pull away from column / card edges so the panel reads as its own object */
  margin-top: clamp(1.35rem, 3.5vw, 2rem);
  margin-bottom: clamp(0.35rem, 1.5vw, 0.75rem);
  margin-inline: clamp(0.15rem, 1.2vw, 0.5rem);
  border-radius: 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-left: 3px solid rgba(6, 182, 212, 0.75) !important;
  background-color: #0b1220 !important;
  background-image: linear-gradient(
    148deg,
    #111c33 0%,
    rgba(30, 64, 175, 0.18) 22%,
    #0c1528 48%,
    #070f1a 76%,
    #020617 100%
  ) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px rgba(6, 182, 212, 0.1),
    0 28px 56px -22px rgba(0, 0, 0, 0.62),
    0 0 72px -28px var(--et-wifi-callout-glow) !important;
}

.et-cctv-wifi-callout::before,
.et-alarms-monitoring-callout::before,
.et-cabling-upgrades-callout::before,
.et-wifi-property-callout::before,
.et-starlink-fixedline-callout::before,
.et-pendant-dv-support-callout::before {
  content: "";
  position: absolute;
  top: -48%;
  left: 50%;
  z-index: 0;
  width: 120%;
  height: 68%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 70% 100% at 50% 0%,
    rgba(6, 182, 212, 0.16) 0%,
    transparent 72%
  );
  pointer-events: none;
}

.et-cctv-wifi-callout::after,
.et-alarms-monitoring-callout::after,
.et-cabling-upgrades-callout::after,
.et-wifi-property-callout::after,
.et-starlink-fixedline-callout::after,
.et-pendant-dv-support-callout::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 48px -20px rgba(6, 182, 212, 0.08) inset;
  pointer-events: none;
}

.et-cctv-wifi-callout__inner,
.et-alarms-monitoring-callout__inner,
.et-cabling-upgrades-callout__inner,
.et-wifi-property-callout__inner,
.et-starlink-fixedline-callout__inner,
.et-pendant-dv-support-callout__inner {
  position: relative;
  z-index: 1;
  -webkit-font-smoothing: antialiased;
  /* Generous inset — copy never hugs the rounded border */
  padding-block: clamp(1.85rem, 5vw, 2.85rem);
  padding-inline: clamp(1.65rem, 4.8vw, 2.65rem);
  padding-left: clamp(1.75rem, 5vw, 2.75rem);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

@media (min-width: 640px) {
  .et-cctv-wifi-callout__inner,
  .et-alarms-monitoring-callout__inner,
  .et-cabling-upgrades-callout__inner,
  .et-wifi-property-callout__inner,
  .et-starlink-fixedline-callout__inner,
  .et-pendant-dv-support-callout__inner {
    padding-block: clamp(2rem, 4.5vw, 2.75rem);
    padding-inline: clamp(1.85rem, 4vw, 2.85rem);
    padding-left: clamp(1.95rem, 4.2vw, 2.95rem);
  }
}

.et-cctv-wifi-callout__eyebrow,
.et-alarms-monitoring-callout__eyebrow,
.et-cabling-upgrades-callout__eyebrow,
.et-wifi-property-callout__eyebrow,
.et-starlink-fixedline-callout__eyebrow {
  margin: 0 0 0.65rem !important;
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: #22d3ee !important;
  opacity: 0.95;
}

.et-cctv-wifi-callout__title,
.et-alarms-monitoring-callout__title,
.et-cabling-upgrades-callout__title,
.et-wifi-property-callout__title,
.et-starlink-fixedline-callout__title {
  margin: 0 0 0.85rem !important;
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.125rem, 2.6vw, 1.3rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
}

.et-cctv-wifi-callout__lede,
.et-alarms-monitoring-callout__lede,
.et-cabling-upgrades-callout__lede,
.et-wifi-property-callout__lede,
.et-starlink-fixedline-callout__lede,
.et-pendant-dv-support-callout__lede {
  margin: 0 !important;
  max-width: 54ch;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
  color: #f1f5f9 !important;
  text-wrap: pretty;
}

#root main .et-pendant-dv-support-callout .et-pendant-dv-support-callout__lede:first-of-type {
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem) !important;
}

#root main .et-pendant-dv-support-callout {
  border-radius: 1.5rem !important;
}

@media (prefers-reduced-motion: reduce) {
  .et-cctv-wifi-callout,
  .et-alarms-monitoring-callout,
  .et-cabling-upgrades-callout,
  .et-wifi-property-callout,
  .et-starlink-fixedline-callout,
  .et-pendant-dv-support-callout {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 0 0 1px rgba(6, 182, 212, 0.1),
      0 18px 44px -20px rgba(0, 0, 0, 0.52) !important;
  }

  .et-cctv-wifi-callout::before,
  .et-alarms-monitoring-callout::before,
  .et-cabling-upgrades-callout::before,
  .et-wifi-property-callout::before,
  .et-starlink-fixedline-callout::before,
  .et-pendant-dv-support-callout::before {
    opacity: 0.8;
  }
}

/* -------------------------------------------------------------------------- */
/* Compact mobile footer (static-site.js) — same shell as index.html mobile: */
/* border-t white/10, bg #020617, max-w-xs row, h-14 icon tiles. Desktop:     */
/* strip hidden; native mega footer runs (normalizeFooterLogos / arrange).   */
/* -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  #root footer[data-et-compact-footer] > *:not([data-et-footer-compact]),
  footer[data-et-compact-footer] > *:not([data-et-footer-compact]) {
    display: none !important;
  }

  #root footer[data-et-compact-footer] [data-et-footer-compact],
  footer[data-et-compact-footer] [data-et-footer-compact] {
    display: block !important;
  }
}

@media (min-width: 768px) {
  #root footer[data-et-compact-footer] [data-et-footer-compact],
  footer[data-et-compact-footer] [data-et-footer-compact] {
    display: none !important;
  }
}

#root footer [data-et-footer-compact],
footer[data-et-compact-footer] [data-et-footer-compact] {
  padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
}

/* index.html mobile strip: relative z-10 border-t border-white/10 bg #020617 px-6 py-5 */
.et-footer-compact__mobile-panel {
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #020617;
  padding: 1.25rem 1.5rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
}

.et-footer-compact__mobile-icons-inner {
  display: flex;
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}

/* index: flex h-14 w-14 rounded-2xl border border-white/15 bg-white/5 text-accent shadow-lg shadow-black/25 */
.et-footer-compact__icon-btn {
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  /* Beat premium-polish `footer * { color: #fff }` — match Tailwind text-accent */
  color: #06b6d4 !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.25),
    0 4px 6px -4px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.12s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

footer[data-et-compact-footer] [data-et-footer-compact] .et-footer-compact__icon-btn svg,
#root footer[data-et-compact-footer] [data-et-footer-compact] .et-footer-compact__icon-btn svg {
  color: #06b6d4 !important;
}

.et-footer-compact__icon-btn:hover,
.et-footer-compact__icon-btn:focus-visible {
  border-color: rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.1);
}

.et-footer-compact__icon-btn:active {
  transform: scale(0.96);
}

.et-footer-compact__icon-btn:focus-visible {
  outline: 2px solid #06b6d4;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .et-footer-compact__icon-btn {
    transition: none;
  }

  .et-footer-compact__icon-btn:active {
    transform: none;
  }
}

/* Mobile: fixed back-to-top sits above the in-flow compact footer strip */
@media (max-width: 767.98px) {
  #root:has(footer[data-et-compact-footer]) #scroll-to-top {
    bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  #root:has(footer[data-et-compact-footer]):has(.et-mobile-sticky-cta) #scroll-to-top {
    bottom: calc(10.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Footer "Contact Us" column: label + value on one line (mobile only).        */
/* Targets the shared mega-footer grid column (lg:col-span-3); desktop       */
/* keeps label stacked above value. tel:/mailto: links unchanged.              */
/* -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  footer
    .lg\:col-span-3
    ul
    span.block.text-xs.text-slate-500.uppercase.tracking-widest.font-bold.mb-1 {
    display: inline;
    margin-bottom: 0;
    margin-right: 0.3em;
    vertical-align: baseline;
  }

  footer .lg\:col-span-3 ul a[href^="tel:"],
  footer .lg\:col-span-3 ul a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.25rem;
  }
}

/* Coarse pointers: disable hover-only nudges (premium-polish) that linger after tap */
@media (hover: none) {
  footer a:hover {
    transform: none !important;
  }

  #root a[href="/contact"]:hover,
  #root a[href="/contact/"]:hover,
  #root button[type="submit"]:hover {
    transform: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Desktop (lg+): reliable header chrome + home hero polish */
/* -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Primary nav visible; mobile-only row hidden (covers home inline CSS edge cases). */
  #root header[data-site-header="true"] nav.hidden.lg\:flex {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
  }

  #root header[data-site-header="true"] > div.max-w-7xl.mx-auto > div.flex.items-center.gap-4.lg\:hidden {
    display: none !important;
  }

  /* Home: optical space under hero wordmark */
  #root [data-et-page="home"] #home-hero .text-center.lg\:text-left > .mb-10.animate-fade-in {
    margin-bottom: 2.75rem !important;
  }

  /* Home: glass service panel — more inset on large screens (2nd grid column) */
  #root [data-et-page="home"] #home-hero .max-w-7xl.grid > div:nth-child(2) {
    padding: 1.75rem 2rem 2rem !important;
  }

  /* Home: service quick links — even tile height + calmer gutters */
  #root [data-et-page="home"] #home-hero .home-hero-services {
    gap: 1.125rem !important;
  }

  #root [data-et-page="home"] #home-hero .home-hero-services > a {
    min-height: 168px !important;
  }

  /* Hero copy: comfortable line height on wide measure */
  #root [data-et-page="home"] #home-hero p.text-lg.text-slate-300 {
    line-height: 1.65 !important;
  }

  /* Headline → subcopy rhythm */
  #root [data-et-page="home"] #home-hero h1.text-4xl {
    margin-bottom: 2.25rem !important;
  }

  /* Section breathing at bottom of hero band + top offset under header */
  #root [data-et-page="home"] #home-hero {
    padding-top: clamp(8.5rem, 11vh, 10.5rem) !important;
    padding-bottom: 6rem !important;
  }
}

@media (min-width: 1280px) {
  #root [data-et-page="home"] #home-hero .max-w-7xl.grid {
    gap: 5rem !important;
  }
}

/* Mobile slide-out (#mobile-menu only): centered nav column + hero-matched wordmark block */
#root #mobile-menu .flex.flex-col.space-y-4 > div.mb-6 {
  display: flex !important;
  justify-content: center !important;
}

#root #mobile-menu .flex.flex-col.space-y-4 > div.border-b.border-slate-100.py-4 {
  text-align: center;
}

#root #mobile-menu .border-b.border-slate-100 .grid a[href].flex,
#root #mobile-menu .flex.flex-col.space-y-4 > a.flex.items-center.border-b.border-slate-100 {
  justify-content: center !important;
  gap: 0.5rem;
}

/* -------------------------------------------------------------------------- */
/* Desktop (lg+): vertical rhythm — main sections, service heroes, shell, footer */
/* Uses --et-desktop-* from site-layout; ≤1023px unchanged. */
/* -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --et-shell-gutter: clamp(1.75rem, 2.8vw, 3.25rem);
  }

  /* Standard marketing sections: one step more air than Tailwind py-* defaults */
  #root main > section.py-12 {
    padding-top: var(--et-desktop-section-12) !important;
    padding-bottom: var(--et-desktop-section-12) !important;
  }

  #root main > section.py-14 {
    padding-top: var(--et-desktop-section-14) !important;
    padding-bottom: var(--et-desktop-section-14) !important;
  }

  #root main > section.py-16 {
    padding-top: var(--et-desktop-section-16) !important;
    padding-bottom: var(--et-desktop-section-16) !important;
  }

  #root main > section.py-20 {
    padding-top: var(--et-desktop-section-20) !important;
    padding-bottom: var(--et-desktop-section-20) !important;
  }

  #root main > section.py-24 {
    padding-top: var(--et-desktop-section-24) !important;
    padding-bottom: var(--et-desktop-section-24) !important;
  }

  #root main > section.py-32 {
    padding-top: var(--et-desktop-section-32) !important;
    padding-bottom: var(--et-desktop-section-32) !important;
  }

  /* md:* vertical steps (win over base py-* on tablet/desktop viewports) */
  #root main > section.md\:py-16 {
    padding-top: var(--et-desktop-section-16) !important;
    padding-bottom: var(--et-desktop-section-16) !important;
  }

  #root main > section.md\:py-20 {
    padding-top: var(--et-desktop-section-20) !important;
    padding-bottom: var(--et-desktop-section-20) !important;
  }

  #root main > section.md\:py-24 {
    padding-top: var(--et-desktop-section-24) !important;
    padding-bottom: var(--et-desktop-section-24) !important;
  }

  /* Custom theme step (extended Tailwind) */
  #root main > section.md\:py-18 {
    padding-top: var(--et-desktop-section-18) !important;
    padding-bottom: var(--et-desktop-section-18) !important;
  }

  /* Navy service / hub heroes — match py-16 md:py-24 pattern */
  #root main [data-et-hero].md\:py-24 {
    padding-top: var(--et-desktop-hero-y) !important;
    padding-bottom: var(--et-desktop-hero-y) !important;
  }

  #root main [data-et-hero].mb-12 {
    margin-bottom: 4rem !important;
  }

  /* Shared inner-page shell under fixed header */
  #root main > div.min-h-screen.bg-neutral-50.pt-28.pb-20 {
    padding-bottom: var(--et-desktop-section-20) !important;
  }

  /* Grids: only static `gap-12` (avoids fighting md:/lg: gap utilities) */
  #root main > section .grid.gap-12 {
    gap: 3.25rem !important;
  }

  /* Trusted strip + mega footer: calmer padding on large screens */
  #root #footer-brand-logos {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  #root footer .max-w-7xl > .py-16.border-b {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  #root footer .max-w-7xl > .py-12.md\:py-16.grid {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}

/* CCTV: Key Features — tick ↔ copy (match “Why Professional” rhythm on all breakpoints) */
#root #et-cctv-service-main ul.et-cctv-feature-grid > li.flex {
  gap: 1.375rem !important;
}

#root #et-cctv-service-main ul.et-cctv-feature-grid > li.flex > span.min-w-0 {
  line-height: 1.68 !important;
}

/*
 * CCTV: overview + “full-stack” blurbs — navy panels aligned with .et-cctv-wifi-callout / site dark sections
 */
#root #et-cctv-service-main .et-cctv-navy-copy-panel {
  isolation: isolate;
  color: #f8fafc !important;
  background-color: #0b1220 !important;
  background-image: linear-gradient(
    148deg,
    #111c33 0%,
    rgba(30, 64, 175, 0.18) 22%,
    #0c1528 48%,
    #070f1a 76%,
    #020617 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-left: 3px solid rgba(6, 182, 212, 0.65) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 28px 56px -22px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(6, 182, 212, 0.08) !important;
  /* Roomier than Tailwind p-7 — cyan accent reads better with extra inset */
  padding-block: clamp(2.25rem, 6vw, 3rem) !important;
  padding-inline: clamp(1.75rem, 5.5vw, 2.5rem) !important;
  padding-inline-start: clamp(1.875rem, 5.75vw, 2.625rem) !important;
  border-radius: 1.25rem !important;
}

@media (min-width: 640px) {
  #root #et-cctv-service-main .et-cctv-navy-copy-panel {
    padding-block: clamp(2.5rem, 4vw, 3.25rem) !important;
    padding-inline: clamp(2rem, 4vw, 2.75rem) !important;
    padding-inline-start: clamp(2.125rem, 4.25vw, 2.875rem) !important;
    border-radius: 1.375rem !important;
  }
}

#root #et-cctv-service-main .et-cctv-navy-copy-panel h3 {
  color: #ffffff !important;
  margin-bottom: 1rem !important;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

#root #et-cctv-service-main .et-cctv-navy-copy-panel p {
  color: #e2e8f0 !important;
  line-height: 1.72 !important;
  max-width: 65ch;
}

/* CCTV: “Why Professional CCTV?” — tick ↔ copy + row breathing */
#root #et-cctv-service-main .et-cctv-why-professional {
  row-gap: clamp(1.625rem, 4.5vw, 2.25rem) !important;
  column-gap: clamp(1.375rem, 3.5vw, 2.25rem) !important;
}

@media (min-width: 640px) {
  #root #et-cctv-service-main .et-cctv-why-professional {
    row-gap: clamp(1.75rem, 3.75vw, 2.375rem) !important;
    column-gap: clamp(1.75rem, 3vw, 2.5rem) !important;
  }
}

#root #et-cctv-service-main .et-cctv-why-professional > .flex {
  gap: 1.375rem !important;
}

#root #et-cctv-service-main .et-cctv-why-professional > .flex > span.min-w-0 {
  line-height: 1.68 !important;
}

/* -------------------------------------------------------------------------- */
/* Mobile nav drawer — JS sets html[data-et-nav-drawer-open] + .menu-open      */
/* Ensures stacking / scroll lock on pages that load site-issues without       */
/* site-layout (e.g. home, service templates using static/*.css bundles).     */
/* -------------------------------------------------------------------------- */
html.menu-open {
  overflow: hidden;
  height: 100%;
}

body.menu-open {
  overflow: hidden;
}

html[data-et-nav-drawer-open] header[data-site-header="true"] {
  z-index: 110;
}

html[data-et-nav-drawer-open] #mobile-menu.is-open {
  z-index: 60;
}

html[data-et-nav-drawer-open] .et-mobile-sticky-cta {
  z-index: 35;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1023.98px) {
  #root header[data-site-header="true"] #mobile-menu-toggle {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Home — About section credential tiles (2×2 on phone): gutters + card inset */
@media (max-width: 767.98px) {
  #root [data-et-page="home"] #about .et-about-credentials {
    gap: 1rem 0.875rem !important;
    column-gap: 0.875rem !important;
    row-gap: 1rem !important;
  }

  #root [data-et-page="home"] #about .et-about-credentials > .flex.items-center {
    gap: 0.75rem !important;
    align-items: flex-start !important;
    padding: 0.8125rem 0.6875rem !important;
  }

  #root [data-et-page="home"] #about .et-about-credentials > .flex > div.min-w-0 h3 {
    line-height: 1.38 !important;
  }

  #root [data-et-page="home"] #about .et-about-credentials > .flex > div.min-w-0 p {
    margin-top: 0.3125rem !important;
    line-height: 1.48 !important;
  }
}