:root{
  --bg:#0b0f14; --bg-elev:#0f141b; --muted:#91a4b7; --text:#e7edf5;
  --brand:#5ac8fa; --accent:#b388ff; --line:rgba(255,255,255,.12);
  --radius:0px; --pad:2rem;
}
@keyframes mylaGlow{0%,100%{text-shadow:0 0 6px rgba(90,200,250,.6), 0 0 12px rgba(90,200,250,.3)}50%{text-shadow:0 0 12px rgba(90,200,250,.8), 0 0 24px rgba(90,200,250,.5)}}
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;color:var(--text);
  background:radial-gradient(1200px 800px at 80% -20%, rgba(102,92,255,.15), transparent),
             radial-gradient(1000px 800px at -10% 10%, rgba(90,200,250,.12), transparent),
             var(--bg);
  min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;
}

html { font-size: 81% !important; }

/* Header / Nav */
header{position:sticky;top:0;z-index:1000;backdrop-filter:blur(10px);background:rgba(11,15,20,.9);border-bottom:1px solid rgba(255,255,255,.15)}
.nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:.6rem var(--pad)}
.brand{font-weight:900;font-size:1rem;letter-spacing:.25em;text-transform:uppercase}
.brand span:first-child{animation:mylaGlow 3s infinite ease-in-out}
.brand span:last-child{opacity:.55}
nav ul{display:flex;gap:.85rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav li{position:relative}
nav a{color:#fff;text-decoration:none;padding:.35rem .6rem;font-weight:700;font-size:.85rem;border-radius:var(--radius);transition:text-shadow .25s}
nav a:hover{text-shadow:0 0 10px rgba(255,255,255,.9),0 0 20px rgba(255,255,255,.7)}
.dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:260px;padding:.5rem;background:#101722;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);box-shadow:0 8px 20px rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:2000}
.dropdown::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}
li.has-dd:hover .dropdown, li.has-dd:focus-within .dropdown{display:block}
.dropdown a{display:block;padding:1rem 1rem;line-height:1.3;font-weight:600;opacity:.95;transition:color .2s,opacity .2s;font-size:.85rem}
.dropdown a + a{margin-top:.25rem}
/* Sections */
section{padding:3.1rem var(--pad)}
.hero{padding:2.4rem var(--pad) 0.6rem} /* unified hero height for all pages */
.hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero-wrap.hero-wrap-single{grid-template-columns:1fr}
.hero h1{font-size:3rem;margin:.2rem 0 .2rem;background:linear-gradient(90deg,var(--brand),var(--accent));-webkit-background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:1.1rem;max-width:760px;margin:0}
.hero-art{display:grid;justify-items:end}
.hero-img{width:min(600px,95%);height:auto;display:block;filter:drop-shadow(-56px -48px 140px rgba(90,200,250,.32)) drop-shadow(72px 60px 200px rgba(179,136,255,.26)) drop-shadow(0 18px 38px rgba(0,0,0,.32))}
.hero-art.hero-art-stretch{justify-items:stretch}
.hero-img.hero-img-stretch{width:100%;max-width:none;height:320px;object-fit:cover;object-position:center;border-radius:var(--radius)}
/* Breadcrumb */
.sub-breadcrumb{padding:1rem var(--pad) 0;display:flex;gap:.5rem;color:#cfe0ff;opacity:.95;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;border-top:1px solid rgba(255,255,255,.06)}
.sub-breadcrumb .home{pointer-events:none}
/* Show hero images on all pages */

/* Single-column hero: make the image a wide banner */
.hero-wrap.hero-wrap-single .hero-art{justify-items:stretch}
.hero-wrap.hero-wrap-single .hero-img{
  width:100%;
  max-width:none;
  height:340px;
  object-fit:cover;
  object-position:center;
  border-radius:var(--radius);
}
/* Panels + scan glow */
.panel{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:1.2rem;box-shadow:0 10px 26px rgba(0,0,0,.35)}

/* Content links (cards + lists) — keep white text while remaining clickable */
a.panel{display:block;color:#fff;text-decoration:none;cursor:pointer}
a.panel strong{color:#fff}
a.panel:hover{ text-shadow:0 0 10px rgba(255,255,255,.55); }
.hiw-card .square-list a,
.content .square-list a,
.panel .square-list a{color:#fff;text-decoration:none}
.hiw-card .square-list a:hover,
.content .square-list a:hover,
.panel .square-list a:hover,
a.panel:hover strong{ text-shadow:0 0 10px rgba(255,255,255,.75),0 0 20px rgba(255,255,255,.55); }

.glow-scan{position:relative}
@keyframes sweep{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.glow-scan::before{content:'';position:absolute;inset:-2px;border-radius:inherit;padding:1px;background:linear-gradient(120deg,rgba(90,200,250,0) 0%,rgba(90,200,250,.7) 25%,rgba(179,136,255,.7) 50%,rgba(90,200,250,.7) 75%,rgba(90,200,250,0) 100%);background-size:200% 100%;animation:sweep 4s linear infinite;filter:blur(8px);opacity:.55;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* Capability (home) — wider/taller and bigger text; pulled closer to hero */
.feature-split{display:block;padding:.4rem var(--pad) 1.2rem}
.feature-split .split-col.copy{max-width:1000px;padding:1.6rem 1.6rem}
.feature-split .split-col.copy p{font-size:1.05rem;line-height:1.8}
.feature-split .split-col.copy li{font-size:1rem;line-height:1.7}
.kicker{display:none}
/* Services grid (home) 3 x 2 */
#services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start}
#services > .plain{grid-column:1 / -1}
/* HIW + FAQ to page edges */
.hiw{padding-left:var(--pad);padding-right:var(--pad)}
.hiw-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:stretch}
.hiw-wrap.single-col{grid-template-columns:1fr !important}
.hiw-card{border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:1.2rem;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:0 10px 20px rgba(0,0,0,.3)}

/* Home: image left, stacked cards right (bigger feature image) */
.hiw-wrap.hiw-home-media{grid-template-columns:minmax(360px,680px) 1fr;align-items:start}
.hiw-stack{display:grid;gap:1rem}
.hiw-card.hiw-media{padding:0;overflow:hidden}
/* Home: feature image box */
.hiw-wrap.hiw-home-media .hiw-card.hiw-media{height:620px;justify-self:start}
@media (max-width: 720px){
  .hiw-wrap.hiw-home-media{grid-template-columns:1fr}
  .hiw-wrap.hiw-home-media .hiw-card.hiw-media{height:320px}
}

.hiw-card.hiw-media{display:block}
.hiw-media-img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
/* Forms */
.f-row{display:grid;gap:.35rem;margin:.5rem 0}
input,select,textarea{width:100%;padding:.6rem .7rem;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);background:rgba(19,26,34,.6);color:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(90,200,250,.6);border-color:rgba(90,200,250,.5)}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);text-decoration:none;color:var(--text);font-weight:800;letter-spacing:.01em;cursor:pointer;transition:transform .15s ease, text-shadow .25s ease, box-shadow .25s ease;background:transparent;-webkit-appearance:none;appearance:none;font:inherit}
.btn:hover{transform:translateY(-1px);text-shadow:0 0 8px rgba(255,255,255,.6);box-shadow:0 6px 16px rgba(0,0,0,.3)}
.btn-primary{border:none;background:linear-gradient(90deg,var(--brand),var(--accent));color:#0b0f14}

/* Modal cancel button should match dark site buttons */
#loginCancel{background:#0b0f14;border:1px solid rgba(255,255,255,.14);color:#fff;}
#loginCancel:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.45);text-shadow:none;}
/* Footer — smaller */
footer{border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));margin-top:10px;font-size:.8rem}
.footer-grid{display:grid;grid-template-columns:1fr max-content max-content;gap:.4rem 4rem;align-items:flex-start;padding:8px var(--pad)}
footer h4{margin:0 0 .2rem;font-size:.68rem;color:#cfd8e3;letter-spacing:.04em;text-transform:uppercase}
footer .brand{font-weight:900;letter-spacing:.25em;font-size:.95rem;text-transform:uppercase;margin-bottom:6px}
footer .brand span:last-child{opacity:.55}
.square-list{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.square-list li{display:flex;align-items:center;color:#cfe0ff;font-size:.68rem;font-weight:400;letter-spacing:.01em}
.square-list .bullet{width:6px;height:6px;border-radius:2px;margin-right:.45rem;background:#fff;box-shadow:0 0 10px rgba(90,200,250,.8),0 0 2px rgba(255,255,255,.9)}
footer a{color:#cfe0ff;text-decoration:none;opacity:.95;font-weight:400;letter-spacing:.01em}
footer a:hover{opacity:1;text-shadow:0 0 8px rgba(255,255,255,.6)}
.footer-legal{border-top:1px solid var(--line)}
.footer-legal .container{padding:6px var(--pad);display:flex;align-items:center;justify-content:space-between;color:#b7c7da;font-size:.7rem}
/* Responsive */
@media(max-width:1100px){
  .hero-wrap{grid-template-columns:1fr}
  #services{grid-template-columns:1fr 1fr}
  .hiw-wrap{grid-template-columns:1fr}
}
@media(max-width:720px){
  #services{grid-template-columns:1fr}
}

/* 3-column layout for the Info / Upgrade / FAQs row */
.hiw-wrap.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Ensure cards stretch to equal heights and borders align cleanly */
.hiw-wrap.cols-3 .hiw-card{display:flex;flex-direction:column}
@media(max-width:1100px){.hiw-wrap.cols-3{grid-template-columns:1fr}}


/* === Adjust bullet list text size === */
.square-list li{ font-size: 1rem; line-height:1.5; }

/* === Make nav buttons look like original links === */
nav .nav-toggle{
  background: transparent; border: 0; color: #fff;
  padding:.35rem .6rem; border-radius: var(--radius);
  font-size:.85rem; text-decoration:none; cursor:pointer;
}
nav .nav-toggle:hover{
  text-shadow:0 0 10px rgba(255,255,255,.9),0 0 20px rgba(255,255,255,.7);
}

/* === Lift the Info subtitle closer to the title === */
.subtitle.muted{ margin-top: -0.3rem; margin-bottom: 1rem; }

/* === Bullet point text set to .9rem === */
.square-list li{ font-size: .9rem; line-height: 1.6; }

/* === Wider spacing between FAQ questions === */
.faq-list details{ margin: 0.9rem 0; }
.faq-list summary{ padding: .15rem 0; }

/* === Footer contact items styled like nav links === */
footer .square-list a{
  color:#fff; text-decoration:none; padding:.35rem .6rem; border-radius:var(--radius);
  font-size:.85rem; display:inline-block;
  transition:text-shadow .25s;
}
footer .square-list a:hover{
  text-shadow:0 0 10px rgba(255,255,255,.9), 0 0 20px rgba(255,255,255,.7);
}

/* === Align section headings + first lines across Info / Upgrade / FAQ === */
.hiw-card h3{ margin-bottom: .4rem; }
.hiw-card > h3 + *{ margin-top: 0 !important; }

/* Reset the Info subtitle offset so it lines up cleanly */
.subtitle.muted{ margin-top: 0; margin-bottom: 1rem; }

/* === Make FAQ questions breathe more === */
.faq-list details{ margin: 0.9rem 0; }
.faq-list summary{ padding: .25rem 0; }

/* === Footer back to compact style (as before) === */
footer .square-list li{ padding-left: 0; }             /* remove pseudo indent */
footer .square-list li::before{ content: none; }        /* disable our earlier ::before bullet */
footer .square-list .bullet{ display: inline-block; }   /* show the original bullet span */

footer .square-list a{
  padding: 0; border-radius: 0; text-shadow: none; display: inline; /* undo nav-like buttons */
}
/* Restore the original small footer link style */
footer a{
  color:#cfe0ff; text-decoration:none; opacity:.95; font-weight:400;
  letter-spacing:.01em; font-size:.68rem;
}

/* Cancel the mobile "button style" phone link */
@media (max-width:720px){
  footer a[href^="tel:"]{ padding: 0; background: none; box-shadow: none; display: inline; }
}

/* === Make CTA buttons sit at the bottom of each card === */
.hiw-card{ display:flex; flex-direction:column; }
.hiw-card .cta-row{ margin-top:auto !important; display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

/* === Two-up gallery inside the exterior camera card === */
.hiw-card.exterior-gallery .gallery-2{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
@media (max-width: 720px){
  .hiw-card.exterior-gallery .gallery-2{ grid-template-columns:1fr; }
}
.hiw-card.exterior-gallery img{ width:100%; height:auto; display:block; border-radius:var(--radius); }


/* === Exterior gallery: side-by-side small images === */
.hiw-card.exterior-gallery .gallery-2{
  display:flex;
  gap:.6rem;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap;
}
.hiw-card.exterior-gallery .gallery-2 img{
  /* Small, consistent thumbnails that still shrink on narrow screens */
  width: min(200px, 45%);
  height:auto;
  display:block;
  border-radius: var(--radius);
}


/* === Exterior gallery: much smaller thumbnails to preserve original card size === */
.hiw-card.exterior-gallery .gallery-2{
  display:flex;
  gap:.5rem;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap; /* allow wrap on narrow screens */
  margin:.25rem 0;
}
.hiw-card.exterior-gallery .gallery-2 img{
  width:110px;          /* significantly smaller */
  max-width:110px;
  flex:0 0 110px;       /* ensure side-by-side thumbnails */
  height:auto;
  display:block;
  border-radius: var(--radius);
}


/* === Exterior gallery: tiny thumbnails === */
.hiw-card.exterior-gallery .gallery-2 img{
  width:80px;
  max-width:80px;
  flex:0 0 80px;
  height:auto;
}


/* === Exterior gallery: 20px square crops === */
.hiw-card.exterior-gallery .gallery-2 img{
  width:20px !important;
  height:20px !important;
  flex:0 0 20px !important;
  object-fit:cover;
  object-position:center;
  aspect-ratio:1/1;
  border-radius:0 !important; /* ensure sharp square corners */
  display:block;
}


/* === Force side-by-side 20px square thumbnails in the exterior gallery === */
.hiw-card.exterior-gallery .gallery-2{
  display:inline-flex !important;
  gap:.25rem !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
}
.hiw-card.exterior-gallery .gallery-2 img{
  width:20px !important;
  height:20px !important;
  max-width:none !important;
  flex:0 0 20px !important;
  aspect-ratio:1/1 !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:0 !important;
  display:block !important;
}


/* === Exterior gallery: force 80x80px square thumbnails === */
.hiw-card.exterior-gallery .gallery-2{
  display:inline-flex !important;
  gap:.35rem !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
}
.hiw-card.exterior-gallery .gallery-2 img{
  width:80px !important;
  height:80px !important;
  max-width:none !important;
  flex:0 0 80px !important;
  aspect-ratio:1/1 !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:0 !important;
  display:block !important;
}


/* === Exterior gallery: fill card, margin around, spacing between, rounded corners === */
.hiw-card.exterior-gallery .gallery-2{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important; /* two equal columns */
  gap: .75rem !important;                    /* spacing between images */
  padding: .75rem !important;                /* margin around images inside the box */
  box-sizing: border-box !important;
}
.hiw-card.exterior-gallery .gallery-2 img{
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  flex: initial !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  border-radius: var(--radius) !important;   /* rounded corners */
  display:block !important;
}


/* === Mobile: make exterior gallery images fixed squares === */
@media (max-width: 720px){
  .hiw-card.exterior-gallery .gallery-2{
    grid-template-columns: 1fr 1fr !important; /* keep two equal columns on mobile */
  }
  .hiw-card.exterior-gallery .gallery-2 img{
    aspect-ratio: 1 / 1 !important;  /* force perfect square */
    width:100% !important;
    height:auto !important;
    object-fit: cover !important;
  }
}


/* === Exterior gallery: make images 20% smaller (80% width) === */
.hiw-card.exterior-gallery .gallery-2 img{
  width:80% !important;
  max-width:80% !important;
  justify-self:center !important;
  align-self:center !important;
}

/* Mobile: keep square crops and also 20% smaller */
@media (max-width: 720px){
  .hiw-card.exterior-gallery .gallery-2 img{
    width:80% !important;
    max-width:80% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }
}


/* === Exterior gallery: global square images, 10% smaller (90% of column) === */
.hiw-card.exterior-gallery .gallery-2 img{
  width:90% !important;           /* 10% smaller than column width */
  max-width:90% !important;
  aspect-ratio: 1 / 1 !important; /* perfect squares */
  height:auto !important;
  object-fit: cover !important;   /* cover crop inside the square */
  object-position: center !important;
  justify-self:center !important;
  align-self:center !important;
  border-radius: var(--radius) !important; /* keep rounded corners */
}


/* === Exterior gallery: make images 10% smaller again (80% of column), keep squares === */
.hiw-card.exterior-gallery .gallery-2 img{
  width:80% !important;
  max-width:80% !important;
  aspect-ratio: 1 / 1 !important;
  height:auto !important;
  object-fit: cover !important;
  object-position: center !important;
  justify-self:center !important;
  align-self:center !important;
}


/* === Exterior gallery: make images 15% smaller (75% of column), keep squares === */
.hiw-card.exterior-gallery .gallery-2 img{
  width:75% !important;
  max-width:75% !important;
  aspect-ratio: 1 / 1 !important;
  height:auto !important;
  object-fit: cover !important;
  object-position: center !important;
  justify-self:center !important;
  align-self:center !important;
}


/* === Why Choose Us: add clear gap after label colon === */
.why-choose-list > li > strong{
  display:inline-block;
  margin-right:.35rem; /* adjustable gap */
}


/* === Why Choose Us vs Camera: wider left (~73%) and smaller right (~27%) === */
/* 80/30 normalized -> 8fr / 3fr */
@media (min-width: 721px){
  .why-camera-grid{
    /* Standardise: consistent right-column size across pages */
    grid-template-columns: 1fr clamp(340px, 36vw, 480px) !important;
    align-items:stretch;
  }
}


/* === Exterior gallery: 15% bigger than previous (to ~86% width), keep perfect squares === */
.hiw-card.exterior-gallery .gallery-2 img{
  width:86% !important;
  max-width:86% !important;
  aspect-ratio: 1 / 1 !important;
  height:auto !important;
  object-fit: cover !important;
  object-position: center !important;
  justify-self:center !important;
  align-self:center !important;
}

/* === Equal-height cards for Why Choose Us row === */
/* Keep text card and right media card aligned like other pages */
@media (min-width: 721px){
  .why-camera-grid .hiw-card.hiw-media{min-height:420px;}
}
@media (max-width: 720px){
  .why-camera-grid .hiw-card.hiw-media{min-height:260px;}
}

@media (min-width: 721px){
  .why-camera-grid{
    align-items: stretch !important; /* make grid items equal height */
  }
  .why-camera-grid > .hiw-card{
    height:100% !important; /* ensure each card stretches to row height */
  }
}

/* About/Service: smaller right-side media box (still in original box layout) */
@media (min-width: 721px){
  .why-camera-grid.small-media{
    grid-template-columns: 9fr 2fr !important;
    align-items: start !important;
  }
  .why-camera-grid.small-media > .hiw-card{
    height:auto !important;
  }
  .why-camera-grid.small-media > .hiw-card.hiw-media{
    height:260px !important;
  }
}


/* === Exterior gallery: +10% size bump (≈95% of column) === */
.hiw-card.exterior-gallery .gallery-2 img{
  width:95% !important;
  max-width:95% !important;
  /* keep existing square behavior */
  aspect-ratio: 1 / 1 !important;
  height:auto !important;
  object-fit: cover !important;
  object-position: center !important;
  justify-self:center !important;
  align-self:center !important;
}


/* === Exterior gallery: +10% size bump (now 100% of column) === */
.hiw-card.exterior-gallery .gallery-2 img{
  width:100% !important;
  max-width:100% !important;
  /* keep square crop and centering */
  aspect-ratio: 1 / 1 !important;
  height:auto !important;
  object-fit: cover !important;
  object-position: center !important;
  justify-self:center !important;
  align-self:center !important;
}



/* === FAQ spacing fallback (works even without .faq-list wrapper) === */
.hiw .hiw-card details { margin: 0.9rem 0; }
.hiw .hiw-card summary { padding: .25rem 0; }


/* Contact page layout: left info stack + right form */
.hiw-wrap.contact-split{align-items:start}
.contact-left{display:grid;gap:1rem}

/* Placeholder image fit: keep boxes same size and show full image */
.hiw-card.exterior-gallery .gallery-2 img{
  object-fit: contain !important;
  background: rgba(0,0,0,.10) !important;
}

/* === Single-image gallery (Service/About right-side box) === */
.hiw-card.exterior-gallery .gallery-1{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
}
.hiw-card.exterior-gallery .gallery-1 img{
  width:100%;
  height:100%;
  max-width:98%;
  max-height:98%;
  display:block;
  border-radius:var(--radius);
  object-fit:contain;
  object-position:center;
  background:transparent;
  margin:auto;
}

/* Placeholder images: fit without cropping (keeps existing boxes the same size) */
.hiw-card.exterior-gallery .gallery-2 img{
  object-fit: contain !important;
  background: rgba(0,0,0,.12);
}

/* === Placeholder images: fit within fixed boxes without cropping === */
.hiw-card.exterior-gallery .gallery-2 img{
  object-fit: contain !important;
  background: rgba(0,0,0,.12);
}



/* Full-width testimonials bar on homepage */
.testimonials-bar{padding-top:0;}
.testimonials-bar .hiw-wrap{width:100%;}

/* Equal-height feature rows (About/Service match CCTV/Alarms) */
.hiw-wrap.why-camera-grid > .hiw-card{height:100%}
.hiw-wrap.why-camera-grid > aside.hiw-card{height:100%}
.hiw-card.hiw-media{display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}
.hiw-media-img{width:100%;height:100%;display:block;object-fit:contain;object-position:center}
/* Single-image gallery cards (Service) */
.exterior-gallery .gallery-1{height:100%}
.exterior-gallery .gallery-1 img{width:100%;height:100%;object-fit:contain;display:block}


/* === MYLA LAYOUT FIXES v3 === */
.why-camera-grid .hiw-card {
  /* Force consistent height across pages for the 2-up info + image sections */
  min-height: 360px;
}
/* Ensure image-only cards shrink to fit (no cropping) */
.why-camera-grid .gallery-1,
.why-camera-grid .gallery-2 {
  height: 100%;
}
.why-camera-grid .gallery-1 img {
  width: 100%;
  height: 100%;
  max-width: 92%;
  max-height: 92%;
  object-fit: contain !important;
  object-position: center;
  display: block;
}
/* Contact page: keep left stack + right form aligned and bottoms level */
.contact-split {
  align-items: stretch !important;
}
.contact-left, .contact-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-right {
  height: 100%;
}
.contact-right .hiw-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.contact-right .hiw-card form {
  flex: 1;
}

/* About + Service: make the right-side image ~20% smaller to match other pages */
.page-about .why-camera-grid .gallery-1 img,
.page-service .why-camera-grid .gallery-1 img{
  max-width:94% !important;
  max-height:94% !important;
}


/* === /MYLA LAYOUT FIXES v3 === */


/* === MYLA GRID STANDARD v4 === */
@media (max-width: 720px){
  .why-camera-grid{ grid-template-columns: 1fr !important; }
}
/* === /MYLA GRID STANDARD v4 === */



/* === GLOBAL CARD TIGHTEN v2 === */
.hiw-card{padding:0.95rem !important;}
@media (max-width:720px){.hiw-card{padding:0.85rem !important;}}
/* === /GLOBAL CARD TIGHTEN v2 === */



/* === IMAGE CARD UNIFORM v1 === */
/* Make all media cards tighter so images look larger with minimal padding */
.hiw-card.exterior-gallery{padding:0.7rem !important;}
@media (max-width:720px){.hiw-card.exterior-gallery{padding:0.6rem !important;}}

/* Single-image cards (About/Service etc): fill the box consistently */
.gallery-1{height:100%;}
.gallery-1 img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover !important;       /* uniform fill */
  object-position:center !important;
  background:transparent !important;
  margin:0 !important;
}

/* Two-image grids (CCTV/Alarms/Access): force equal tile sizes */
.gallery-2{display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; height:100%;}
.gallery-2 img{
  width:100% !important;
  height:220px !important;           /* equal tiles */
  object-fit:cover !important;
  object-position:center !important;
  border-radius: var(--radius);
  display:block;
}
@media (max-width:720px){
  .gallery-2 img{height:170px !important;}
}

/* Ensure the media card stretches to match the info card height */
.why-camera-grid{align-items:stretch !important;}
.why-camera-grid > .hiw-card{height:100%;}
/* === /IMAGE CARD UNIFORM v1 === */



/* === CONTACT FORM FILL v1 === */
.contact-form-card{display:flex;flex-direction:column;height:100%;}
.contact-form-card form{display:flex;flex-direction:column;flex:1;}
/* Normal spacing between rows */
.contact-form-card form .f-row{margin:0 0 .8rem 0 !important;}
/* Status stays just above buttons */
.contact-form-card form #formStatus{margin:0 0 .8rem 0 !important;}
/* Pin buttons to bottom */
.contact-form-card form .cta-row{margin-top:auto !important;}
/* === /CONTACT FORM FILL v1 === */





/* === MOBILE SAFE v1 === */
@media (max-width: 720px){
  /* Prevent horizontal overflow */
  html, body{max-width:100%; overflow-x:hidden;}
  *{box-sizing:border-box;}
  img, svg, video, iframe{max-width:100%; height:auto;}

  /* Global container/panels */
  .container, .hero-wrap, .wrap, .content, .panel, .hiw, .hiw-wrap{max-width:100%;}
  .panel, .hiw-card{width:100%;}

  /* Make all grid layouts single column */
  .hiw-wrap{grid-template-columns:1fr !important;}
  .hiw-wrap.cols-3{grid-template-columns:1fr !important;}
  .hiw-wrap.faq-list{grid-template-columns:1fr !important;}
  .why-camera-grid{grid-template-columns:1fr !important;}
  .contact-split{grid-template-columns:1fr !important;}

  /* Prevent fixed-width items causing overflow */
  .cta-row{flex-wrap:wrap; gap:.6rem;}
  .btn{width:100%; text-align:center;}

  /* Nav / header */
  header .nav, header nav, .nav-links{flex-wrap:wrap;}
  header .nav ul{flex-wrap:wrap;}

  /* Hero text spacing */
  .hero-wrap-single{padding-left:1rem; padding-right:1rem;}
  .hero-copy h1{font-size:1.6rem; line-height:1.2;}
  .hero-copy p{font-size:1rem;}

  /* Image card grids: stack */
  .gallery-2{grid-template-columns:1fr !important;}
  .gallery-2 img{height:200px !important;}

  /* Forms */
  input, select, textarea{width:100%;}
  .f-row{width:100%;}
}
/* === /MOBILE SAFE v1 === */


/* === MOBILE SAFE v3 === */
@media (max-width: 720px){
  /* Hard stop on horizontal overflow from min-widths */
  *, *::before, *::after{min-width:0 !important;}
  input, select, textarea{min-width:0 !important; max-width:100% !important;}
  .hiw-media, .hiw-stack, .hiw-card{max-width:100% !important;}
}
/* === /MOBILE SAFE v3 === */

/* === HOME MOBILE LAYOUT v2 === */
@media (max-width: 720px){
  body.is-home .hiw-wrap.hiw-home-media{justify-items:center; text-align:center;}
  body.is-home .hiw-card.hiw-media{
    width:100%;
    max-width:560px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  body.is-home .hiw-media-img{
    width:100%;
    height:auto;
    display:block;
    margin:0 auto;
  }
  body.is-home .hiw-stack{
    width:100%;
    max-width:560px;
    margin:0 auto;
    display:grid;
    gap:1rem;
    justify-items:center;
  }
  body.is-home .hiw-stack .hiw-card{
    width:100%;
    text-align:left; /* keep card text readable */
  }
}
/* === /HOME MOBILE LAYOUT v2 === */

/* === PORTAL TOPBAR GRID v1 === */
@media (min-width: 721px){
  .portal-topbar{
    display:grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "welcome actions"
      "search  actions";
    gap:.75rem 1rem;
    align-items:start;
  }
  .portal-welcome{grid-area:welcome;}
  .portal-searchrow{grid-area:search;}
  .portal-actions{grid-area:actions; display:flex; gap:.6rem; align-items:flex-start; justify-content:flex-end; flex-wrap:wrap;}
  .portal-searchrow #portalSearch{
    width:min(420px, 100%);
    max-width:100%;
  }
  .portal-sections-wrap{gap:1.35rem !important;}
}
@media (max-width: 720px){
  .portal-topbar{display:block !important;}
  .portal-actions{margin-top:.6rem;}
  .portal-searchrow{margin-top:.6rem;}
  .portal-searchrow #portalSearch{width:100%;}
}
/* === /PORTAL TOPBAR GRID v1 === */


/* === MOBILE SAFARI HARDEN v1 === */
@media (max-width: 720px){
  body{width:100%; overflow-x:hidden;}
  header, footer, .hero, .hiw, .content{overflow-x:hidden;}
  .hiw-wrap, .hero-wrap, .panel, .hiw-card{min-width:0 !important; max-width:100% !important;}

  /* Homepage: image on its own centered row, stacked centered cards */
  body.is-home .hiw-wrap.hiw-home-media{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:1rem !important;
  }
  body.is-home .hiw-card.hiw-media{
    width:min(560px, 100%) !important;
    max-width:100% !important;
  }
  body.is-home .hiw-media-img{
    width:100% !important;
    height:auto !important;
    display:block !important;
    margin:0 auto !important;
  }
  body.is-home .hiw-stack{
    width:min(560px, 100%) !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:1rem !important;
  }
  body.is-home .hiw-stack .hiw-card{width:100% !important;}
}
/* === /MOBILE SAFARI HARDEN v1 === */


/* === WHY CHOOSE LIST: mobile two-line layout === */
@media (max-width:720px){
  .why-choose-list li{
    display:block !important;
    position:relative !important;
    padding-left:1.05rem !important; /* space for the bullet */
    line-height:1.5 !important;
  }
  .why-choose-list li .bullet{
    position:absolute !important;
    left:0 !important;
    top:.55em !important;
    margin-right:0 !important;
  }
  .why-choose-list li strong{
    display:block !important;
    margin:0 0 .28rem 0 !important;
  }
}
/* === /WHY CHOOSE LIST: mobile two-line layout === */


/* === PORTAL TOPBAR GRID v2 === */
@media (min-width: 721px){
  .portal-topbar{
    display:grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "welcome actions"
      "search  actions" !important;
    gap: .75rem 1rem !important;
    align-items:start !important;
  }
  .portal-welcome{grid-area:welcome !important;}
  .portal-searchrow{grid-area:search !important;}
  .portal-actions{
    grid-area:actions !important;
    display:flex !important;
    gap:.6rem !important;
    flex-wrap:wrap !important;
    justify-content:flex-end !important;
    align-items:flex-start !important;
  }
  .portal-searchrow #portalSearch{
    width:min(420px, 100%) !important;
    max-width:100% !important;
    display:block !important;
  }
  .portal-sections-wrap{gap:1.35rem !important;}
}
@media (max-width: 720px){
  .portal-topbar{display:flex !important; flex-direction:column !important; align-items:stretch !important;}
  .portal-actions{width:100% !important;}
  .portal-searchrow{width:100% !important;}
  .portal-searchrow #portalSearch{width:100% !important;}
  .portal-sections-wrap{grid-template-columns:1fr !important;}
}
/* === /PORTAL TOPBAR GRID v2 === */


/* === MOBILE MINWIDTH RESET v1 === */
@media (max-width: 720px){
  *, *::before, *::after{min-width:0 !important;}
  input, select, textarea{min-width:0 !important; max-width:100% !important;}
}
/* === /MOBILE MINWIDTH RESET v1 === */


/* === MOBILE 80P VIEW v1 === */
@media (max-width: 720px){
  html{font-size:80%;}
  body{
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
}
/* === /MOBILE 80P VIEW v1 === */


/* === MOBILE LAYOUT HARD v2 === */
@media (max-width: 720px){
  .hiw-wrap{grid-template-columns:1fr !important;}
  .hero-wrap{grid-template-columns:1fr !important;}
  .footer-grid{grid-template-columns:1fr !important;}
  .contact-grid{grid-template-columns:1fr !important;}
  /* nav wrap */
  .nav{flex-wrap:wrap !important;}
  .nav ul{flex-wrap:wrap !important; row-gap:.35rem !important;}
  /* homepage: image centered row + stacked centered cards */
  body.is-home .hiw-wrap.hiw-home-media{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:1rem !important;
  }
  body.is-home .hiw-wrap.hiw-home-media .hiw-card.hiw-media{
    justify-self:center !important;
    align-self:center !important;
    width:min(560px,100%) !important;
    height:auto !important;
  }
  body.is-home .hiw-wrap.hiw-home-media .hiw-media-img{
    width:100% !important;
    height:auto !important;
    display:block !important;
    object-fit:contain !important;
    object-position:center !important;
  }
  body.is-home .hiw-stack{
    width:min(560px,100%) !important;
    margin:0 auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:1rem !important;
  }
  body.is-home .hiw-stack .hiw-card{width:100% !important;}
}
/* === /MOBILE LAYOUT HARD v2 === */


/* === SQUARE LIST WRAP FIX v2 === */
.square-list li{display:flex;align-items:center;}
.square-list .li-text{min-width:0;display:block;}
.square-list li{flex-wrap:nowrap;}
.square-list li{gap:.6rem;}
.square-list li{word-break:break-word;}
@media (max-width:720px){
  .square-list li{align-items:center;}
}
/* === /SQUARE LIST WRAP FIX v2 === */


/* === SQUARE LIST TWO-LINE v1 === */
.square-list li .li-title{display:block;font-weight:600;margin:0 0 .15rem 0;}
.square-list li .li-desc{display:block;color:var(--muted);}
/* === /SQUARE LIST TWO-LINE v1 === */


/* === PORTAL DESKTOP GRID v3 === */
@media (min-width: 721px){
  .portal-topbar{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-areas:
      "welcome actions"
      "search  actions" !important;
    gap: .9rem 1.2rem !important;
    align-items:start !important;
  }
  .portal-welcome{grid-area:welcome !important;}
  .portal-searchrow{grid-area:search !important;}
  .portal-actions{grid-area:actions !important; display:flex !important; gap:.75rem !important; flex-wrap:wrap !important; justify-content:flex-end !important;}
  .portal-sections-wrap{gap:1.35rem !important;}
}
@media (max-width: 720px){
  .portal-topbar{display:flex !important; flex-direction:column !important;}
  .portal-searchrow #portalSearch{width:100% !important; max-width:100% !important;}
}
/* === /PORTAL DESKTOP GRID v3 === */


/* === EXTERIOR GALLERY MOBILE v2 === */
@media (max-width:720px){
  .hiw-card.exterior-gallery .gallery-2{display:grid !important; grid-template-columns:1fr !important;}
  .hiw-card.exterior-gallery .gallery-2 img{width:100% !important; max-width:100% !important; height:auto !important; object-fit:contain !important;}
}
/* === /EXTERIOR GALLERY MOBILE v2 === */


/* === MOBILE ZOOM 70 v1 === */
@media (max-width: 720px){
  html{font-size:70% !important;}
  body{overflow-x:hidden !important;}
  *, *::before, *::after{max-width:100% !important; min-width:0 !important;}
  p, li, h1, h2, h3, h4, a{overflow-wrap:anywhere; word-break:break-word;}
}
/* === /MOBILE ZOOM 70 v1 === */


/* === HOME MOBILE NO SERVER IMAGE v1 === */
@media (max-width: 720px){
  body.is-home .hiw-wrap.hiw-home-media{display:block !important;}
  body.is-home .hiw-card.hiw-media{display:none !important;} /* remove the server picture card on mobile */
  body.is-home .hiw-stack{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }
  body.is-home .hiw-stack .hiw-card{
    width:100% !important;
    max-width:none !important;
  }
}
/* === /HOME MOBILE NO SERVER IMAGE v1 === */


/* === HOME HERO MOBILE STACK v1 === */
@media (max-width: 720px){
  .cta-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:.6rem !important;
  }
  .cta-row .btn{width:100% !important; text-align:center;}
  .square-list li{flex-wrap:wrap !important; align-items:center !important;}
}
/* === /HOME HERO MOBILE STACK v1 === */


/* === DROPDOWN TAP FIX v1 === */
li.has-dd.open .dropdown{display:block;}
@media (max-width: 720px){
  /* make dropdowns flow in document so they don't clip off-screen */
  li.has-dd{position:relative;}
  li.has-dd > a{padding-right:1.25rem;}
  .dropdown{
    position:static !important;
    width:100% !important;
    margin-top:.5rem !important;
    box-shadow:none !important;
  }
  .dropdown::before{display:none !important;}
}
/* === /DROPDOWN TAP FIX v1 === */


/* === HOME HIDE SERVER IMAGE ROBUST v1 === */
@media (max-width: 900px), (pointer: coarse), (hover: none){
  body.is-home #home-server-image{display:none !important;}
}
/* === /HOME HIDE SERVER IMAGE ROBUST v1 === */