/* ---------- Design tokens (matched to jksecurity WP theme) ---------- */
:root {
  --red:        #de1822;
  --red-dark:   #b8121b;
  --text:       #565872;
  --heading:    #1e2a4a;
  --bg:         #ffffff;
  --footer-bg:  #0f172a;
  --footer-text:#c9cde0;
  --font:       'Rubik', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --container:  1800px;
  --shadow-sub: 0 10px 40px rgba(0,0,0,.15);
}

*,*::before,*::after { box-sizing: border-box; }
html,body { margin: 0; padding: 0; }
html { overflow-x: clip; }
body { overflow-x: clip; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4 { color: var(--heading); margin: 0 0 .5em; font-weight: 700; line-height: 1.2; }

.container,
.site-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 40px;
}

/* ---------- Header ---------- */
#header.header {
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
#header.header.is-scrolled {
  background: #2a3551;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .25);
}
#header.header.is-scrolled .header-wrap {
  min-height: 75px;
  transition: min-height .25s ease;
}
#header.header.is-scrolled .logo .site-logo {
  height: 75px;
  transition: height .25s ease;
}
/* Switch nav text to white on the navy sticky bar for contrast */
#header.header.is-scrolled .mainnav .menu > li > a {
  color: #ffffff;
}
#header.header.is-scrolled .mainnav .menu > li > a:hover,
#header.header.is-scrolled .mainnav .menu > li.current-menu-item > a,
#header.header.is-scrolled .mainnav .menu > li:hover > a {
  color: #de1822;
}
#header.header.is-scrolled .mainnav .menu > li.menu-item-has-children > a::after {
  color: #ffffff;
}
.header-wrap, .logo .site-logo { transition: min-height .25s ease, height .25s ease; }
#header .container {
  max-width: none;
  padding: 0 40px;
  width: 100%;
}
.inner-header { padding: 0; }
.header-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 95px;
}
.header-ct-left  { flex: 0 1 auto; }
.header-ct-center{ flex: 1 1 auto; display: flex; justify-content: center; }
.header-ct-right { flex: 0 1 auto; display: flex; align-items: center; gap: 20px; margin-left: auto; }

.logo a { display: inline-block; }
.logo .site-logo {
  height: 95px;
  width: auto;
  max-height: none;
}

/* Main nav */
.mainnav .menu {
  display: flex;
  align-items: center;
}
.mainnav .menu > li {
  margin: 0 15px;
  position: relative;
}
.mainnav .menu > li:first-child { margin-left: 10px; }
.mainnav .menu > li:last-child  { margin-right: 0; }
.mainnav .menu > li > a {
  display: inline-block;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  color: var(--heading);
  padding: 36px 0;
  line-height: 1;
  transition: color .18s ease;
}
.mainnav .menu > li > a:hover,
.mainnav .menu > li.current-menu-item > a,
.mainnav .menu > li:hover > a { color: var(--red); }

/* Services caret via btn-submenu (visual "+") */
.mainnav .menu .btn-submenu { display: none; }
.mainnav .menu > li.menu-item-has-children > a::after {
  content: '+';
  display: inline-block;
  margin-left: 6px;
  font-weight: 700;
  color: var(--red);
}

/* Submenus */
.mainnav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 15px;
  box-shadow: var(--shadow-sub);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 20;
}
.mainnav .sub-menu .sub-menu { top: 0; left: 100%; }
.mainnav .menu li:hover > .sub-menu,
.mainnav .menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mainnav .sub-menu li { position: relative; }
.mainnav .sub-menu li > a {
  display: block;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--heading);
  white-space: nowrap;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.mainnav .sub-menu li > a:hover { color: var(--red); background: #f7f7fb; }
.mainnav .sub-menu li.menu-item-has-children > a::after {
  content: '›';
  float: right;
  margin-left: 12px;
  color: var(--red);
  font-weight: 700;
}

/* Call Now button */
.wrap-btn-header .btn-header {
  display: inline-block;
  background: var(--red);
  color: #fff;
  padding: 20px 38px;
  border-radius: 35px;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font);
  line-height: 1;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(222,24,34,.28);
}
.wrap-btn-header .btn-header:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(222,24,34,.36);
}

/* Mobile hamburger */
.btn-menu {
  display: none;
  width: 32px;
  height: 32px;
  position: relative;
  cursor: pointer;
}
.btn-menu .line-1,
.btn-menu .line-1::before,
.btn-menu .line-1::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--heading);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease, top .25s ease;
}
.btn-menu .line-1        { top: 15px; }
.btn-menu .line-1::before{ top: -9px; }
.btn-menu .line-1::after { top:  9px; }
body.menu-open .btn-menu .line-1 { background: transparent; }
body.menu-open .btn-menu .line-1::before { top: 0; transform: rotate(45deg); }
body.menu-open .btn-menu .line-1::after  { top: 0; transform: rotate(-45deg); }

/* Off-canvas mobile nav */
.canvas-nav-wrap {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  visibility: hidden;
}
body.menu-open .canvas-nav-wrap { visibility: visible; }
@media (min-width: 992px) {
  /* Hamburger is not shown on desktop, so hide the off-canvas panel entirely. */
  .canvas-nav-wrap { display: none !important; }
}
.overlay-canvas-nav {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.55);
  opacity: 0;
  transition: opacity .3s ease;
}
.inner-canvas-nav {
  position: absolute;
  top: 0; right: 0;
  width: 320px;
  max-width: 88vw;
  height: 100%;
  background: #fff;
  padding: 24px;
  transform: translateX(100%);
  transition: transform .35s ease;
  overflow-y: auto;
  box-shadow: -10px 0 40px rgba(0,0,0,.15);
}
body.menu-open .canvas-nav-wrap { pointer-events: auto; }
body.menu-open .overlay-canvas-nav { opacity: 1; }
body.menu-open .inner-canvas-nav { transform: translateX(0); }
.inner-canvas-nav #logo-mobi { margin-bottom: 24px; }
.inner-canvas-nav #logo-mobi .site-logo { height: 70px; }
.mainnav_canvas .menu li { border-bottom: 1px solid #eef0f6; }
.mainnav_canvas .menu li a {
  display: block;
  padding: 14px 4px;
  font-weight: 600;
  color: var(--heading);
  font-size: 16px;
}
.mainnav_canvas .menu .sub-menu {
  display: none;
  padding-left: 16px;
  background: #fafbff;
}
.mainnav_canvas .menu li.open > .sub-menu { display: block; }
.mainnav_canvas .btn-submenu {
  display: block;
  float: right;
  width: 32px;
  height: 40px;
  margin-top: -46px;
  position: relative;
  cursor: pointer;
}
.mainnav_canvas .btn-submenu::before {
  content: '+';
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 22px;
  color: var(--red);
  font-weight: 700;
}
.mainnav_canvas .menu li.open > .btn-submenu::before { content: '−'; }
.canvas-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.canvas-menu-close span,
.canvas-menu-close span::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  height: 3px;
  background: #fff;
  transform: rotate(45deg);
}
.canvas-menu-close span::before { transform: rotate(-90deg); }

.site-main { min-height: 40vh; }

/* ---------- Home intro section (measured from WP) ---------- */
.home-intro {
  padding: 85px 0 79px;
  background: #ffffff;
}
.home-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
}
.home-intro-heading {
  font-family: 'Rajdhani', sans-serif;
  font-size: 47px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -1px;
  color: #2a3551;
  margin: 0 0 10px;
  text-transform: none;
}
.home-intro-sub {
  color: #000000;
  font-size: 16px;
  font-family: var(--font);
}
.home-intro-sub p {
  font-size: 16px;
  line-height: 30px;
  color: #000000;
  margin: 0 0 18px;
}
.home-intro-sub p:last-child { margin-bottom: 0; }
.home-intro-btn-wrap {
  margin-top: 30px;
  text-align: left;
}
.home-intro-btn {
  display: inline-block;
  background: #de1822;
  color: #ffffff;
  padding: 15px 30px;
  border-radius: 4px;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  transition: background .18s ease, transform .18s ease;
}
.home-intro-btn:hover {
  background: #b8121b;
  transform: translateY(-1px);
}
.home-intro-image img {
  width: 100%;
  height: auto;
  max-width: 611px;
  display: block;
}
@media (max-width: 900px) {
  .home-intro { padding: 60px 0 55px; }
  .home-intro-inner { grid-template-columns: 1fr; gap: 40px; }
  .home-intro-heading { font-size: 34px; line-height: 44px; letter-spacing: -.5px; }
  .home-intro-image img { max-width: 100%; margin: 0 auto; }
}

/* ---------- Home About Us section (measured from WP) ---------- */
.home-about {
  background: #de1822;
  padding: 156px 0 146px;
}
.home-about-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.home-about-media {
  position: relative;
  min-height: 460px;
}
.home-about-img {
  display: block;
  height: auto;
}
.home-about-img-wrap { display: block; }
.home-about-img-back-wrap {
  position: absolute;
  top: -46px;
  left: 25px;
  z-index: 0;
  width: 574px;
  max-width: 100%;
  animation: 2s ease 0s infinite alternate none running leftdown1;
}
.home-about-img-back { width: 75%; }
.home-about-img-front-wrap {
  position: relative;
  z-index: 2;
  width: 560px;
  max-width: 100%;
}
.home-about-img-front {
  width: 50%;
  margin-left: auto;
}

/* Keyframes copied verbatim from the WP theme */
@keyframes leftdown1 {
  0%   { transform: translateX(-7px); }
  100% { transform: translateX(7px); }
}
@keyframes shine {
  0%   { background-position-x: -500%; }
  100% { background-position-x: 500%; }
}

/* Hover shine sweep — copied from .hover-image-janelas in the WP theme */
.hover-image-janelas { position: relative; overflow: hidden; }
.hover-image-janelas::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 3;
  display: block;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
  transform: skewX(-25deg);
  pointer-events: none;
}
.hover-image-janelas:hover::before {
  animation: 1.2s ease 0s 1 alternate none running shine;
}
.home-about-text { color: #ffffff; }
.home-about-eyebrow {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #2a3551;
  text-transform: uppercase;
  letter-spacing: 3.3px;
  margin: 0 0 12px;
  line-height: 1.4;
}
.home-about-heading {
  font-family: 'Rajdhani', sans-serif;
  font-size: 47px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -1px;
  color: #2a3551;
  margin: 0 0 10px;
  text-transform: none;
}
.home-about-sub p {
  color: #ffffff;
  font-size: 16px;
  line-height: 30px;
  margin: 0 0 18px;
  font-family: var(--font);
}
.home-about-sub p:last-child { margin-bottom: 0; }
.home-about-btn-wrap { margin-top: 30px; text-align: left; }
.home-about-btn {
  display: inline-block;
  background: #2a3551;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 3px;
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  transition: background .18s ease, transform .18s ease;
}
.home-about-btn:hover {
  background: #1a2340;
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  .home-about { padding: 90px 0 80px; }
  .home-about-inner { grid-template-columns: 1fr; gap: 60px; }
  .home-about-media { min-height: 380px; max-width: 480px; margin: 0 auto; width: 100%; }
  .home-about-heading { font-size: 34px; line-height: 44px; letter-spacing: -.5px; }
}

/* ---------- Home Services section (measured from WP: "What we do") ---------- */
/* Section bg image is a single design: white top, red strip mid, dark navy bottom.
   Stretch it to the full section box so the strip lines up under the heading. */
.home-services {
  background-image: url('../images/svc-bg.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  padding: 80px 0 100px;
}
.home-services-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 40px;
}
.home-services-heading {
  text-align: left;
  margin: 0 0 40px;
  padding: 0 15px;
}
.home-services-eyebrow {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #3b3f5a;
  text-transform: uppercase;
  letter-spacing: 3.3px;
  margin: 0 0 12px;
  line-height: 1.4;
}
.home-services-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 47px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -1px;
  color: #de1822;
  margin: 0;
  text-transform: none;
}
.home-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 0 15px;
}

/* Card — measured from WP: white card, title box overlaps image via -60px margin,
   arrow button hangs BELOW the card via absolute bottom:-26px */
.svc-card {
  background: #ffffff;
  border-radius: 0;
  overflow: visible;
  box-shadow: inset 1px 11px 66px 47px rgba(42, 53, 81, .21);
  position: relative;
  display: flex;
  flex-direction: column;
}
.svc-media {
  display: block;
  overflow: hidden;
  position: relative;
  line-height: 0;
}
.svc-media img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.05) rotate(.5deg);
  transition: transform 1.2s cubic-bezier(.4,.01,.14,.99);
}
.svc-card:hover .svc-media img { transform: scale(1) rotate(0deg); }

.svc-content {
  padding: 32px 28px 54px;
  text-align: center;
  position: relative;
}
.svc-title {
  background: #ffffff;
  box-shadow: 1px 0 10px 0 rgba(0, 0, 0, .5);
  padding: 13px 10px;
  margin: -60px 0 16px;
  position: relative;
  z-index: 2;
  font-family: 'Rubik', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #3b3f5a;
  text-transform: uppercase;
  letter-spacing: 0;
}
.svc-title a { color: #3b3f5a; transition: color .18s; }
.svc-title a:hover { color: #de1822; }
.svc-desc {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 30px;
  color: #000000;
  margin: 0;
}
.svc-btn-wrap {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-25px);
  margin: 0;
  padding: 0;
}
.svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #de1822;
  color: #f8faff;
  transition: background .18s ease, transform .18s ease;
}
.svc-btn:hover { background: #b8121b; }
.svc-btn svg { display: block; }

@media (max-width: 900px) {
  .home-services { padding: 60px 0 70px; }
  .home-services-grid { grid-template-columns: 1fr; gap: 40px; padding: 0; }
  .home-services-heading { padding: 0; }
  .home-services-title { font-size: 34px; line-height: 44px; letter-spacing: -.5px; }
}

/* ---------- Portfolio section (measured from WP: "Choose Your Style") ---------- */
.home-portfolio {
  padding: 80px 0 75px;
  background: #ffffff;
}
.home-portfolio-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 40px;
}
.home-portfolio-heading {
  text-align: center;
  margin: 0 0 30px;
}
.home-portfolio-eyebrow {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #de1822;
  text-transform: uppercase;
  letter-spacing: 3.3px;
  margin: 0 0 12px;
}
.home-portfolio-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 47px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -1px;
  color: #2a3551;
  margin: 0;
  text-align: center;
}

/* Filter row */
.portfolio-filter {
  display: block;
  text-align: center;
  padding: 0;
  margin: 0 0 52px;
  list-style: none;
}
.portfolio-filter li {
  display: inline-block;
  margin: 5px 6px 5px 0;
  padding: 0;
}
.portfolio-filter a {
  display: inline-block;
  padding: 11px 22px;
  background: #2a3551;
  color: #ffffff;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: normal;
  line-height: 1;
  transition: background .18s ease, color .18s ease;
}
.portfolio-filter a:hover,
.portfolio-filter li.active a {
  background: #de1822;
  color: #ffffff;
}

/* Grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Card */
.prj-card {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: #000;
}
.prj-media {
  display: block;
  overflow: hidden;
  line-height: 0;
}
.prj-media img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.05) rotate(.5deg);
  transition: transform 1.2s cubic-bezier(.4, .01, .14, .99);
}
.prj-card:hover .prj-media img { transform: scale(1) rotate(0deg); }

/* Overlay content — slides up + fades in on hover (measured: absolute inset 15px, opacity 0->1, translateY 32.5px->0, .5s ease-in-out) */
.prj-overlay {
  position: absolute;
  top: auto;
  bottom: 15px;
  left: 15px;
  right: 15px;
  background: #ffffff;
  padding: 15px;
  opacity: 0;
  transform: translateY(32.5px);
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
  z-index: 2;
}
.prj-card:hover .prj-overlay {
  opacity: 1;
  transform: translateY(0);
}
.prj-overlay-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.prj-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #2a3551;
  margin: 0;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
}
.prj-title a { color: #2a3551; transition: color .18s; }
.prj-title a:hover { color: #de1822; }
.prj-btn-wrap { margin: 0; padding: 0; flex-shrink: 0; }
.prj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #de1822;
  color: #ffffff;
  border-radius: 0;
  transition: background .18s ease;
}
.prj-btn:hover { background: #b8121b; }
.prj-btn svg { display: block; }

/* Filter hide/show */
.portfolio-grid .prj-card.is-hidden { display: none; }

@media (max-width: 900px) {
  .home-portfolio { padding: 60px 0 55px; }
  .home-portfolio-title { font-size: 34px; line-height: 44px; letter-spacing: -.5px; }
  .portfolio-filter { margin-bottom: 36px; }
  .portfolio-filter a { padding: 9px 16px; font-size: 13px; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 560px) {
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* ---------- Client Testimonials section (measured from WP) ---------- */
/* Layout is 2x2:  [heading | description]
                   [counters | testimonial cards]  */
.home-testimonials {
  background: #2a3551;
  padding: 70px 0 90px;
  color: #ffffff;
}
.home-testimonials-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 108px;
  display: grid;
  grid-template-columns: 370fr 770fr;
  grid-template-rows: auto auto;
  column-gap: 40px;
  row-gap: 30px;
  align-items: start;
}
.home-testimonials-heading { grid-column: 1; grid-row: 1; }
.home-testimonials-desc    { grid-column: 2; grid-row: 1; align-self: start; }
.home-counters             { grid-column: 1; grid-row: 2; }
.home-testimonials-cards   { grid-column: 2; grid-row: 2; }

.home-testimonials-eyebrow {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #de1822;
  text-transform: uppercase;
  letter-spacing: 3.3px;
  margin: 0 0 14px;
}
.home-testimonials-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 47px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0;
  text-align: left;
}
.home-testimonials-desc {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 30px;
  color: #ffffff;
  margin: 0;
}

/* Counters — vertical stack of 3, each: red square icon (95x95 5px radius) LEFT + number/label RIGHT */
.home-counters {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.counter-item {
  display: flex;
  align-items: center;
  gap: 22px;
}
.counter-icon {
  width: 95px;
  height: 95px;
  border-radius: 5px;
  background: #de1822;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.counter-icon svg { display: block; }
.counter-body { display: flex; flex-direction: column; gap: 2px; }
.counter-number {
  font-family: 'Rubik', sans-serif;
  font-size: 36px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.1;
}
.counter-label {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.4;
}

/* Testimonial cards — 2 side-by-side, white cards with red circle quote icon overlapping the top */
.home-testimonials-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.testimonial {
  position: relative;
  background: #ffffff;
  color: #010106e6;
  padding: 49px 43px 20px;
  border-radius: 5px;
  margin-top: 28px;
}
.testimonial-quote-icon {
  position: absolute;
  top: -28px;
  left: 43px;
  width: 55px;
  height: 55px;
  background: #de1822;
  color: #ffffff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
.testimonial-quote-icon svg { display: block; }
.testimonial-quote {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 30px;
  color: rgba(1, 1, 6, .9);
  margin: 0 0 24px;
}
.testimonial-person {
  display: flex;
  align-items: center;
  gap: 16px;
}
.testimonial-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  color: #ffffff;
  font-family: 'Rubik', sans-serif;
  font-size: 30px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.testimonial-meta { display: flex; flex-direction: column; gap: 2px; }
.testimonial-name {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #2a3551;
  line-height: 1.3;
}
.testimonial-position {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #2a3551;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .home-testimonials { padding: 60px 0 60px; }
  .home-testimonials-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 0 24px;
    row-gap: 24px;
  }
  .home-testimonials-heading,
  .home-testimonials-desc,
  .home-counters,
  .home-testimonials-cards {
    grid-column: 1;
    grid-row: auto;
  }
  .home-testimonials-title { font-size: 34px; line-height: 44px; letter-spacing: -.5px; }
  .counter-icon { width: 76px; height: 76px; }
  .counter-icon svg { width: 32px; height: 32px; }
  .home-testimonials-cards { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Services page: sidebar + main + pagination (measured from WP) ---------- */
.services-page {
  padding: 120px 0 110px;
  background: #ffffff;
}
.services-page-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 300fr 870fr;
  column-gap: 30px;
  align-items: start;
}

/* Sidebar */
.services-sidebar { display: flex; flex-direction: column; gap: 40px; }
.widget-title {
  font-family: 'Rubik', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #2a3551;
  margin: 0 0 27px;
  text-transform: none;
  letter-spacing: 0;
}
.widget-list { list-style: none; padding: 0; margin: 0; }
.widget-list li { margin: 0; padding: 0; position: relative; }
.widget-list a {
  display: block;
  position: relative;
  padding: 9px 23px;
  margin-top: 16px;
  background: transparent;
  color: #2a3551;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid #e3e3e3;
  border-radius: 5px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.widget-list li:first-child a { margin-top: 0; }
.widget-list a::after {
  content: '';
  position: absolute;
  right: 29px;
  top: 50%;
  width: 6px;
  height: 15px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 15' fill='%232a3551'><path d='M.3.3a.9.9 0 0 1 1.3 0l4 6.6a.9.9 0 0 1 0 1.2L1.6 14.7a.9.9 0 1 1-1.3-1.2L3.9 7.5.3 1.5A.9.9 0 0 1 .3.3z'/></svg>") center/contain no-repeat;
  transition: background-image .18s ease;
}
.widget-list a:hover,
.widget-list .current a {
  background: #de1822;
  color: #ffffff;
  border-color: #de1822;
}
.widget-list a:hover::after,
.widget-list .current a::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 15' fill='%23ffffff'><path d='M.3.3a.9.9 0 0 1 1.3 0l4 6.6a.9.9 0 0 1 0 1.2L1.6 14.7a.9.9 0 1 1-1.3-1.2L3.9 7.5.3 1.5A.9.9 0 0 1 .3.3z'/></svg>");
}

/* Company Profile card */
.profile-card {
  position: relative;
  background: #2a3551;
  color: #ffffff;
  padding: 30px 26px 30px;
  border-radius: 4px;
  overflow: hidden;
}
.profile-overlay-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ffffff;
  opacity: .15;
  pointer-events: none;
}
.profile-overlay-icon svg { display: block; }
.profile-title {
  font-family: 'Rubik', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
  position: relative;
}
.profile-desc {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #ffffff;
  opacity: .85;
  margin: 0 0 20px;
  position: relative;
}
.profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #de1822;
  color: #ffffff;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: 3px;
  transition: background .18s ease, transform .18s ease;
  position: relative;
}
.profile-btn:hover { background: #b8121b; transform: translateY(-1px); }
.profile-btn svg { display: block; }

/* Main services grid */
.services-main { min-width: 0; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* ---------- Service detail page (Commercial Door, etc.) ---------- */
.service-detail {
  padding: 120px 0 110px;
  background: #ffffff;
}
.service-detail-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 300fr 870fr;
  column-gap: 30px;
  align-items: start;
}
.service-detail-main { min-width: 0; }
.service-detail-image {
  margin: 0 0 30px;
  overflow: hidden;
  border-radius: 5px;
  line-height: 0;
}
.service-detail-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}
.service-detail-title {
  font-family: 'Rubik', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #2a3551;
  margin: 0 0 20px;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1.25;
}
.service-detail-body {
  padding: 0 32px 0 27px;
  border-left: 5px solid #de1822;
  border-radius: 0 0 0 40px;
}
/* Security Doors has two separate paragraph-containers with diagonal curves. */
.service-detail-body--curve-a {
  padding: 0 20px 0 35px;
  border-radius: 0 60px 0 60px;
  margin-bottom: 38px;
}
.service-detail-body--curve-b {
  padding: 0 20px 0 35px;
  border-radius: 60px 0 60px 0;
  margin-bottom: 0;
}
.service-detail-body p {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 30px;
  color: #565872;
  margin: 0 0 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.service-detail-body p:last-child { margin-bottom: 0; }

/* Subtitle (e.g. Roller Shutters) + features list */
.service-detail-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #de1822;
  text-transform: uppercase;
  margin: 0 0 20px;
  line-height: 1.35;
}
.service-detail-features {
  list-style: none;
  margin: 30px 0 0;
  padding: 0 0 0 40px;
  border-left: 5px solid #de1822;
  border-radius: 0 0 0 40px;
}
.service-detail-features li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #eef0f6;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #2a3551;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.service-detail-features li:last-child { border-bottom: 0; }
.service-detail-features .feature-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #de1822;
  flex-shrink: 0;
}
.service-detail-features .feature-icon svg { display: block; }

/* Ordered list (Outdoor Blinds feature list) — matches WP: native decimal, grey, tight rows */
.service-detail-ol-wrap {
  border-left: 5px solid #de1822;
  border-radius: 0 0 0 40px;
  padding: 0 0 0 20px;
  margin: 30px 0;
}
.service-detail-ol {
  list-style: decimal;
  list-style-position: outside;
  margin: 0 0 0 25px;
  padding: 0;
}
.service-detail-ol li {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  color: #565872;
  padding: 0;
  margin: 0;
  border: 0;
}
.service-detail-ol li::marker {
  color: #565872;
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
}

/* Red "why" sub-heading (Restricted Vision Mesh Door, etc.) */
.service-detail-why {
  font-family: 'Rubik', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #de1822;
  margin: 30px 0 20px;
  line-height: 1.3;
  text-transform: none;
}

/* Large red H2 subheading (Doggie Door "What are the advantages...") */
.service-detail-h2 {
  font-family: 'Rubik', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #de1822;
  margin: 40px 0 24px;
  line-height: 1.3;
  text-transform: none;
}

/* Navy H4 subheading (Doggie Door "Convenience.", "Freedom", etc.) */
.service-detail-h4 {
  font-family: 'Rubik', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #2a3551;
  margin: 30px 0 16px;
  line-height: 1.3;
  text-transform: none;
}

/* Unordered feature list in a red bordered container */
.service-detail-ul-wrap {
  border-left: 5px solid #de1822;
  border-radius: 0 0 0 40px;
  padding: 0 32px 0 27px;
  margin: 0;
}
.service-detail-ul {
  list-style: disc;
  list-style-position: outside;
  margin: 0 0 0 20px;
  padding: 0;
}
.service-detail-ul li {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  color: #565872;
  padding: 0;
  margin: 0;
  border: 0;
}
.service-detail-ul li::marker {
  color: #565872;
}

/* Inline bulleted list inside a body container (Decorative Screen Door "Key Features") */
.service-detail-body-list {
  list-style: disc;
  list-style-position: outside;
  margin: 0 0 0 20px;
  padding: 0;
}
.service-detail-body-list li {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  color: #565872;
  padding: 0;
  margin: 0;
}
.service-detail-body-list li::marker { color: #565872; }

/* Side-by-side image row (Outdoor Blinds bottom pair) */
.service-detail-image-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 30px;
}
.service-detail-image-row .service-detail-image { margin: 0; }
@media (max-width: 600px) {
  .service-detail-image-row { grid-template-columns: 1fr; }
}

/* Gallery grid (5-cols portrait, 3-cols landscape, lightbox-ready) */
.service-detail-gallery {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}
.service-detail-gallery--landscape {
  grid-template-columns: repeat(3, 1fr);
}
.service-detail-gallery .gallery-item {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: #f4f5f8;
  line-height: 0;
  position: relative;
  aspect-ratio: 138 / 300;
}
.service-detail-gallery--landscape .gallery-item {
  aspect-ratio: 300 / 138;
}
.service-detail-gallery .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.service-detail-gallery .gallery-item:hover img { transform: scale(1.06); }
.service-detail-gallery .gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(42, 53, 81, 0);
  transition: background .25s ease;
  pointer-events: none;
}
.service-detail-gallery .gallery-item:hover::after { background: rgba(42, 53, 81, .25); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 30, .92);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  display: block;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: background .18s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: #de1822; }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 24px; top: 50%; transform: translateY(-50%); }

@media (max-width: 900px) {
  .service-detail-title { font-size: 24px; }
  .service-detail-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .service-detail-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media (max-width: 900px) {
  .service-detail { padding: 70px 0 60px; }
  .service-detail-inner {
    grid-template-columns: 1fr;
    row-gap: 40px;
    padding: 0 24px;
  }
  .services-sidebar { order: 2; }
  .service-detail-main { order: 1; }
}

/* Pagination (60x60 sharp squares, 20px Rubik, centered, 15px gap) */
.services-pagination {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  padding: 0;
}
.services-pagination .page-number,
.services-pagination .page-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  margin: 0;
  background: #f8f8f8;
  color: #2a3551;
  font-family: 'Rubik', sans-serif;
  font-size: 20px;
  font-weight: 400;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background .18s ease, color .18s ease;
  cursor: pointer;
}
.services-pagination .page-number:hover,
.services-pagination .page-next:hover,
.services-pagination .page-number.current {
  background: #de1822;
  color: #ffffff;
}
.services-pagination svg { display: block; }

/* Responsive: sidebar collapses below main on tablet/mobile */
@media (max-width: 900px) {
  .services-page { padding: 70px 0 60px; }
  .services-page-inner {
    grid-template-columns: 1fr;
    row-gap: 40px;
    padding: 0 24px;
  }
  .services-grid { grid-template-columns: 1fr; gap: 24px; }
  .services-sidebar { order: 2; }
  .services-main { order: 1; }
}
.svc-page-card {
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 10px 30px 3px rgba(0, 0, 0, .05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.svc-page-media {
  display: block;
  overflow: hidden;
  line-height: 0;
}
.svc-page-media img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.05);
  transition: transform 1.2s cubic-bezier(.4,.01,.14,.99);
}
.svc-page-card:hover .svc-page-media img { transform: scale(1); }
.svc-page-content {
  padding: 30px 20px 29px;
  text-align: left;
}
.svc-page-title {
  font-family: 'Rubik', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #2a3551;
  margin: 0 0 13px;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}
.svc-page-title a { color: inherit; transition: color .18s; }
.svc-page-title a:hover { color: #de1822; }
.svc-page-desc {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 30.4px;
  color: #565872;
  margin: 0 0 18px;
}
.svc-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #de1822;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: gap .18s ease;
}
.svc-page-btn:hover { gap: 14px; }
.svc-page-btn svg { display: block; }

@media (max-width: 900px) {
  .services-list { padding: 70px 0 60px; }
  .services-list-inner { grid-template-columns: 1fr; gap: 24px; padding: 0 24px; }
}

/* ---------- Contact Us: full-width map ---------- */
.contact-map {
  width: 100%;
  height: 610px;
  overflow: hidden;
  background: #eef0f6;
  line-height: 0;
}
.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- Contact Us: hours + form row (red left, form right) ---------- */
.contact-form-row {
  padding: 0;
  background: transparent;
  margin: -165px 0 60px;
  position: relative;
  z-index: 2;
}
.contact-form-row-inner {
  display: grid;
  grid-template-columns: 430fr 770fr;
  gap: 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .10);
}
.contact-hours {
  background: #de1822;
  color: #ffffff;
  padding: 45px 50px 60px 42px;
}
.contact-hours-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 47px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -1px;
  color: #ffffff;
  margin: 0 0 20px;
  text-align: left;
}
.contact-hours-table {
  width: 100%;
  border-collapse: collapse;
  color: #ffffff;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  margin: 0 0 26px;
}
.contact-hours-table th,
.contact-hours-table td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}
.contact-hours-table td { text-align: right; }
.contact-hours-social {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
.contact-hours-social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: #69727d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.contact-hours-social a:hover {
  background: #2a3551;
  color: #ffffff;
  transform: translateY(-2px);
}
.contact-hours-social svg { display: block; }

.contact-form-box {
  padding: 60px 60px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Contact Us form uses sharp corners + light grey border + red button (differs from home) */
.contact-form-box .contact-form input,
.contact-form-box .contact-form select,
.contact-form-box .contact-form textarea {
  border: 2px solid #e1e1e1;
  border-radius: 0;
  color: #565872;
}
.contact-form-box .contact-form input:focus,
.contact-form-box .contact-form select:focus,
.contact-form-box .contact-form textarea:focus {
  border-color: #2a3551;
}
.contact-form-box .cf-submit {
  background: #de1822;
  border-radius: 0;
  padding: 21px 20px;
  font-size: 18px;
  font-weight: 500;
}
.contact-form-box .cf-submit:hover {
  background: #b8121b;
}

/* ---------- Contact Us: newsletter band ---------- */
.contact-newsletter {
  background: #2a3551;
  padding: 60px 0 70px;
  color: #ffffff;
  text-align: center;
}
.contact-newsletter-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}
.contact-newsletter-eyebrow {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #de1822;
  text-transform: uppercase;
  letter-spacing: 3.3px;
  margin: 0 0 14px;
}
.contact-newsletter-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 26px;
  text-transform: capitalize;
  letter-spacing: -.3px;
}
.newsletter-form {
  display: flex;
  gap: 0;
  max-width: 560px;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}
.newsletter-form input {
  flex: 1;
  padding: 16px 20px;
  border: 0;
  background: transparent;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  color: #565872;
  outline: none;
}
.newsletter-form button {
  padding: 16px 28px;
  border: 0;
  background: #de1822;
  color: #ffffff;
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease;
}
.newsletter-form button:hover { background: #b8121b; }

@media (max-width: 900px) {
  .contact-map { height: 380px; }
  .contact-form-row-inner { grid-template-columns: 1fr; }
  .contact-hours { padding: 36px 28px 44px; }
  .contact-form-box { padding: 40px 24px; }
  .contact-newsletter-title { font-size: 26px; }
  .newsletter-form { flex-direction: column; background: transparent; border-radius: 0; }
  .newsletter-form input { background: #fff; border-radius: 6px; margin-bottom: 10px; }
  .newsletter-form button { border-radius: 6px; }
}

/* ---------- Contact Us: "Get In Touch" section (measured from WP) ---------- */
.contact-intro {
  padding: 98px 0 102px;
  background: #ffffff;
}
.contact-intro-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 40px;
}
.contact-intro-heading {
  text-align: center;
  margin: 0 0 60px;
}
.contact-intro-eyebrow {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(4, 13, 147, .9);
  text-transform: uppercase;
  letter-spacing: 3.3px;
  margin: 0 0 22px;
}
.contact-intro-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 47px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -1px;
  color: rgba(210, 5, 5, .82);
  margin: 0;
  text-align: center;
}
.contact-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 0 68px;
}
.ci-box {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  text-align: left;
}
.ci-icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  background: #2a3551;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ci-icon svg { display: block; }
.ci-body { display: flex; flex-direction: column; gap: 6px; }
.ci-title {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #2a3551;
  margin: 0 0 10px;
  text-transform: none;
  line-height: 1.3;
}
.ci-desc {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 30px;
  color: #2a3551;
  margin: 0;
}
.ci-desc a { color: inherit; }
.ci-desc a:hover { color: #de1822; }

@media (max-width: 900px) {
  .contact-intro { padding: 60px 0 60px; }
  .contact-intro-title { font-size: 34px; line-height: 44px; letter-spacing: -.5px; }
  .contact-intro-grid { grid-template-columns: 1fr; gap: 30px; padding: 0; }
  .ci-icon { width: 64px; height: 64px; }
  .ci-icon svg { width: 28px; height: 28px; }
}

/* ---------- About Us: "Protect Your Family and Home" section (measured from WP) ---------- */
.about-protect {
  background: #fefefe;
  padding: 0 0 120px;
}
.about-protect-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 120px 108px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
  align-items: center;
}
.about-protect-text { max-width: 550px; }
.about-protect-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 38.4px;
  color: #de1822;
  margin: -3px 0 20px;
  padding: 0 0 0 14px;
  border-left: 5px solid #de1822;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}
.about-protect-p {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 30.4px;
  color: #2a3551;
  margin: 0 0 18px;
}
.about-protect-p:last-child { margin-bottom: 0; }
.about-protect-image {
  width: 470px;
  max-width: 100%;
  height: 353px;
  margin-left: auto;
  background-image: url('../images/about-protect.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
}
@media (max-width: 900px) {
  .about-protect { padding: 0 0 60px; }
  .about-protect-inner {
    grid-template-columns: 1fr;
    padding: 40px 24px 0;
    row-gap: 30px;
  }
  .about-protect-image { margin: 0 auto; max-width: 100%; height: 260px; background-position: center; }
}

/* ---------- About Us: "We specialize in" section (measured from WP) ---------- */
.about-specialize {
  padding: 46px 0 120px;
  background-image: url('../images/about-mask.jpg');
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: auto;
}
.about-specialize-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 108px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
  align-items: center;
}
.specialize-media {
  position: relative;
  min-height: 651px;
  padding-left: 49px;
  padding-top: 61px;
}
.specialize-main {
  display: block;
  width: 502px;
  max-width: 100%;
  height: 515px;
  border-radius: 6px;
  position: relative;
  z-index: 2;
  object-fit: cover;
}
.specialize-layer {
  position: absolute;
  max-width: 100%;
  height: auto;
}
.specialize-layer-decor {
  top: 0;
  left: 14px;
  width: 280px;
  height: 376px;
  z-index: 1;
  animation: 2s ease 0s infinite alternate none running leftdown1;
}
.specialize-layer-mark {
  bottom: -35px;
  left: -20px;
  width: 371px;
  height: 326px;
  z-index: 1;
  animation: 2s ease 0s infinite alternate none running updown1;
}
@keyframes updown1 {
  0%   { transform: translateY(-7px); }
  100% { transform: translateY(7px); }
}

.specialize-text { max-width: 550px; }
.specialize-heading {
  font-family: 'Rubik', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #de1822;
  margin: 0 0 22px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
}
.specialize-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 32px;
}
.specialize-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #2a3551;
  line-height: 1.4;
}
.specialize-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #de1822;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.specialize-icon svg { display: block; }
.specialize-desc {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 30.4px;
  color: #2a3551;
  margin: 22px 0 0;
}

@media (max-width: 900px) {
  .about-specialize { padding: 40px 0 40px; }
  .about-specialize-inner {
    grid-template-columns: 1fr;
    padding: 0 24px;
    row-gap: 40px;
  }
  .specialize-media { min-height: 340px; max-width: 460px; margin: 0 auto; width: 100%; }
  .specialize-layer-decor { top: 0; left: 0; width: 46%; }
  .specialize-layer-mark  { bottom: 0; left: 20%; width: 60%; }
  .specialize-list { grid-template-columns: 1fr; }
  .specialize-heading { font-size: 26px; }
}

/* ---------- Page banner (About Us, Contact Us, etc. — measured from WP) ---------- */
.page-header {
  position: relative;
  margin: -95px 0 0;
  padding: 0;
  z-index: 1;
}
.page-title {
  position: relative;
  padding: 243px 0 128px;
  text-align: center;
  background-image: url('../images/page-banner-bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: #ffffff;
  overflow: hidden;
}
.page-title-overlay {
  position: absolute;
  inset: 0;
  background: #434e6e;
  opacity: .9;
  pointer-events: none;
}
.page-title-inner {
  position: relative;
  z-index: 1;
  padding: 0 40px;
}
.page-title-heading {
  font-family: 'Rajdhani', sans-serif;
  font-size: 65px;
  font-weight: 700;
  line-height: 70px;
  letter-spacing: normal;
  color: #ffffff;
  margin: 0 0 3px;
  text-transform: none;
  text-align: center;
}
.breadcrumb-trail {
  font-family: 'Rubik', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}
.breadcrumb-trail .trail-item {
  color: #ffffff;
  transition: color .18s ease;
}
.breadcrumb-trail a.trail-item:hover { color: #de1822; }
.breadcrumb-trail .sep {
  color: #ffffff;
  margin: 0 10px;
  display: inline-block;
}
@media (max-width: 720px) {
  .page-title { padding: 140px 0 80px; }
  .page-title-heading { font-size: 44px; line-height: 50px; }
  .breadcrumb-trail { font-size: 15px; }
}

/* ---------- Get Quote heading (measured from WP) ---------- */
.home-getquote {
  padding: 104px 0 0;
  background: #ffffff;
  text-align: center;
}
.home-getquote-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 40px;
}
.home-getquote-eyebrow {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #de1822;
  text-transform: uppercase;
  letter-spacing: 3.3px;
  text-align: center;
  margin: 0 0 14px;
}
.home-getquote-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 47px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -1px;
  color: #2a3551;
  margin: 0;
  text-align: center;
}

/* ---------- Contact section (measured from WP) ---------- */
.home-contact {
  padding: 60px 0 90px;
  background: #ffffff;
}
.home-contact-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 108px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: stretch;
}

/* Left column: full-column background image, icon-box cards float on top at bottom */
.home-contact-left {
  position: relative;
  min-height: 560px;
  background-image: var(--contact-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px;
  overflow: hidden;
  padding: 15px;
}
.home-contact-image { display: none; } /* handled by parent bg now */

.home-contact-info {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.info-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255, 255, 255, .92);
  padding: 18px 24px;
  border-radius: 4px;
  box-shadow: 0 6px 22px rgba(15, 23, 42, .12);
}
.info-icon {
  width: 60px;
  height: 60px;
  color: #2a3551;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(42, 53, 81, .3);
  border-radius: 50%;
}
.info-icon svg { display: block; }
.info-body { display: flex; flex-direction: column; gap: 4px; }
.info-title {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #2a3551;
  margin: 0;
  line-height: 1.4;
}
.info-desc {
  font-family: 'Rubik', sans-serif;
  font-size: 18px;
  line-height: 26px;
  color: #2a3551;
  margin: 0;
  font-weight: 700;
}
.info-desc a { color: inherit; }
.info-desc a:hover { color: #de1822; }

/* Right column: red bg with form, vertically centered */
.home-contact-right {
  background: #de1822;
  padding: 40px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 18px;
  background: #ffffff;
  border: 2px solid transparent;
  border-radius: 5px;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  color: #565872;
  outline: none;
  transition: border-color .18s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.contact-form textarea {
  padding: 14px 18px;
  resize: vertical;
  min-height: 160px;
  font-family: 'Rubik', sans-serif;
}
.contact-form select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23565872'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #8a8ea3; opacity: 1; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: #2a3551; }

.cf-submit {
  width: 100%;
  padding: 21px 20px;
  background: #2a3551;
  color: #ffffff;
  border: 0;
  border-radius: 5px;
  font-family: 'Rubik', sans-serif;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
  margin-top: 6px;
}

/* Contact-form notices (success / error) shown after redirect from send-contact.php */
.cf-notice {
  padding: 14px 18px;
  border-radius: 5px;
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 20px;
}
.cf-notice--ok {
  background: rgba(255, 255, 255, .95);
  color: #0b6a3a;
  border-left: 4px solid #1f9d55;
}
.cf-notice--err {
  background: rgba(255, 255, 255, .95);
  color: #a4123a;
  border-left: 4px solid #de1822;
}
.cf-submit:hover { background: #1a2340; transform: translateY(-1px); }

@media (max-width: 900px) {
  .home-getquote { padding: 60px 0 0; }
  .home-getquote-title { font-size: 34px; line-height: 44px; letter-spacing: -.5px; }
  .home-contact { padding: 40px 0 0; }
  .home-contact-inner {
    grid-template-columns: 1fr;
    padding: 0 24px;
    gap: 30px;
  }
  .home-contact-left { min-height: auto; }
  .home-contact-image { min-height: 260px; }
  .home-contact-right { padding: 28px 20px; }
  .cf-row { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- Home banner (measured from WP: banner sits at y=0, header overlays) ---------- */
.home-banner {
  width: 100%;
  margin-top: -95px;
  background: #2a3551;
  line-height: 0;
  position: relative;
  z-index: 1;
}
.home-banner-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Footer (matched to jksecurity WP) ---------- */
.site-footer {
  background: #2a3551;
  color: #ffffff;
  padding: 47px 0 0;
  margin-top: 0;
  font-family: var(--font);
}
.footer-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 40px;
}
.footer-row {
  display: grid;
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 0.6fr) minmax(0, 2.2fr) minmax(0, 3fr);
  gap: 30px;
  align-items: start;
}
.footer-col { padding-right: 0; }
.footer-col-spacer { min-height: 1px; padding: 0; }

.footer-logos {
  display: flex;
  align-items: center;
  gap: 75px;
  margin-bottom: 26px;
  flex-wrap: nowrap;
}
.footer-logos a { display: inline-block; line-height: 0; }
.footer-wordmark img {
  height: auto;
  width: 175px;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.footer-adelaide img {
  height: 100px;
  width: auto;
}
.footer-desc {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.9;
  margin: 0;
  max-width: none;
  width: 100%;
}

.footer-heading {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font);
  margin: 0 0 18px;
  letter-spacing: 0;
  text-transform: none;
}

.footer-links { margin: 0; padding: 0; }
.footer-links li { margin: 0; padding: 14px 0; }
.footer-links a {
  color: #ffffff;
  font-size: 16px;
  transition: color .18s;
}
.footer-links a:hover { color: var(--red); }

.footer-contact { margin: 0; padding: 0; }
.footer-contact li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 12px 0;
  font-size: 16px;
  color: #ffffff;
  line-height: 1.55;
}
.footer-contact .ico {
  color: #ffffff;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.footer-contact .ico svg { display: block; }
.footer-contact a {
  color: #ffffff;
  transition: color .18s;
}
.footer-contact a:hover { color: var(--red); }

.footer-social {
  display: flex;
  gap: 17px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.footer-social li { margin: 0; padding: 0; }
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--red);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
.footer-social a:hover {
  background: var(--red-dark);
  transform: scale(1.08);
}

.footer-divider {
  margin: 40px 0 0;
  border-top: 1px solid rgba(144, 139, 139, .89);
}

.footer-copyright {
  margin: 0;
  padding: 18px 0 18px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #f3eeee;
  font-family: var(--font);
}
.footer-copyright a {
  color: #f3eeee;
  text-decoration: none;
  transition: color .18s;
}
.footer-copyright a:hover { color: var(--red); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .header-ct-center { display: none; }
  .btn-menu { display: block; }
  .logo .site-logo { height: 70px; }
  .header-wrap { min-height: 80px; }
  .wrap-btn-header .btn-header { padding: 14px 22px; font-size: 15px; }
  .footer-row { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-col-spacer { display: none; }
}
@media (max-width: 600px) {
  .footer-row { grid-template-columns: 1fr; gap: 32px; text-align: left; }
  .footer-container { padding: 0 24px; }
}
@media (max-width: 480px) {
  .wrap-btn-header .btn-header { padding: 12px 18px; font-size: 14px; }
  .logo .site-logo { height: 58px; }
}

/* ============================================================
   MOBILE RESPONSIVE OVERHAUL
   Four breakpoints: 1200, 991, 768, 480
   ============================================================ */

/* --- Tablet landscape (≤1200px): tighten container padding --- */
@media (max-width: 1200px) {
  #header .container { padding: 0 24px; }
  .footer-container,
  .home-services-inner,
  .home-portfolio-inner,
  .home-testimonials-inner,
  .home-contact-inner,
  .home-getquote-inner,
  .contact-newsletter-inner,
  .about-protect-inner,
  .about-specialize-inner,
  .services-page-inner,
  .service-detail-inner,
  .contact-intro-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* --- Tablet / small laptop (≤991px) --- */
@media (max-width: 991px) {
  /* Header: hamburger shows, logo compresses */
  .mainnav .menu { gap: 20px; }

  /* Banner */
  .page-title { padding: 180px 0 100px; }
  .page-title-heading { font-size: 52px; line-height: 60px; }

  /* Home intro: already stacks via 900 rule; keep heading legible */
  .home-intro-heading { font-size: 40px; line-height: 50px; }

  /* About section: already stacks via 900 rule */
  .home-about-heading { font-size: 40px; line-height: 50px; }

  /* Services grid: already handled */
  .home-services-title { font-size: 40px; line-height: 50px; }

  /* Portfolio grid: 2 columns */
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .home-portfolio-title { font-size: 40px; line-height: 50px; }
  .portfolio-filter a { padding: 10px 18px; font-size: 14px; }

  /* Testimonials: already stacks */
  .home-testimonials-title { font-size: 40px; }

  /* Get Quote + Contact row */
  .home-getquote-title { font-size: 40px; }
  .home-contact-inner { grid-template-columns: 1fr; }
  .home-contact-left { min-height: 400px; }
  .home-contact-right { padding: 36px 28px; }

  /* Contact Us form row: stack sidebar + form */
  .contact-form-row-inner { grid-template-columns: 1fr; margin: -120px auto 40px; }
  .contact-hours { padding: 36px 28px 40px; }
  .contact-form-box { padding: 36px 28px; }
  .contact-intro-grid { grid-template-columns: 1fr; padding: 0; }
  .contact-intro-title { font-size: 40px; }

  /* Services page: sidebar collapses */
  .services-page-inner { grid-template-columns: 1fr; row-gap: 32px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-detail-inner { grid-template-columns: 1fr; row-gap: 32px; }

  /* Gallery grids drop columns */
  .service-detail-gallery { grid-template-columns: repeat(4, 1fr); }
  .service-detail-gallery--landscape { grid-template-columns: repeat(2, 1fr); }

  /* About Us pages */
  .about-protect-inner { grid-template-columns: 1fr; row-gap: 32px; padding: 60px 32px 0; }
  .about-protect-text { max-width: none; }
  .about-protect-image { margin: 0 auto; }
  .about-specialize-inner { grid-template-columns: 1fr; row-gap: 60px; }
  .specialize-list { grid-template-columns: 1fr 1fr; }
}

/* --- Mobile landscape / small tablet (≤768px) --- */
@media (max-width: 768px) {
  /* Header */
  .logo .site-logo { height: 56px; }
  .header-wrap { min-height: 72px; }
  #header.header.is-scrolled .logo .site-logo { height: 56px; }
  #header.header.is-scrolled .header-wrap { min-height: 72px; }

  /* Banner */
  .page-title { padding: 150px 0 80px; }
  .page-title-heading { font-size: 40px; line-height: 48px; }
  .breadcrumb-trail { font-size: 14px; }
  .breadcrumb-trail .sep { margin: 0 6px; }

  /* Home banner: let the image breathe */
  .home-banner { margin-top: -80px; }

  /* Section headings scale down */
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  .home-intro-heading,
  .home-about-heading,
  .home-services-title,
  .home-portfolio-title,
  .home-testimonials-title,
  .home-getquote-title,
  .contact-intro-title { font-size: 32px; line-height: 42px; letter-spacing: -.3px; }
  .service-detail-title { font-size: 22px; }
  .about-protect-heading { font-size: 22px; }
  .specialize-heading { font-size: 24px; }

  /* Padding scale-down */
  .home-intro { padding: 48px 0; }
  .home-about { padding: 70px 0; }
  .home-services { padding: 50px 0; }
  .home-portfolio { padding: 50px 0; }
  .home-testimonials { padding: 48px 0; }
  .home-getquote { padding: 48px 0 0; }
  .home-contact { padding: 32px 0 60px; }
  .about-protect { padding: 0 0 70px; }
  .about-specialize { padding: 40px 0 80px; }
  .contact-intro { padding: 50px 0; }
  .services-page,
  .service-detail { padding: 50px 0 70px; }

  /* Home intro: image after text, both centred */
  .home-intro-image { margin: 0 auto; max-width: 100%; }

  /* About section images: constrain for small screens */
  .home-about-media { min-height: 360px; max-width: 420px; margin: 0 auto; width: 100%; }
  .home-about-img-back-wrap { width: 72%; left: 0; top: 20px; }
  .home-about-img-front-wrap { width: 70%; }
  .home-about-img-back,
  .home-about-img-front { width: 100%; }

  /* Services cards: 1 column */
  .home-services-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Testimonials cards: 1 column */
  .home-testimonials-cards { grid-template-columns: 1fr; gap: 50px; }
  .home-counters { grid-template-columns: 1fr; gap: 18px; }

  /* Contact map */
  .contact-map { height: 300px; }

  /* Services + service detail */
  .services-grid { grid-template-columns: 1fr; gap: 24px; }
  .services-pagination { gap: 10px; margin-top: 32px; }
  .services-pagination .page-number,
  .services-pagination .page-next { width: 48px; height: 48px; font-size: 16px; }

  /* Gallery */
  .service-detail-gallery { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .service-detail-gallery--landscape { grid-template-columns: repeat(2, 1fr); }
  .service-detail-image img { border-radius: 5px; }

  /* About pages */
  .specialize-media { min-height: 300px; max-width: 100%; }
  .specialize-main { width: 100%; height: auto; }
  .specialize-layer-decor { width: 44%; height: auto; top: 10px; left: 0; }
  .specialize-layer-mark { width: 56%; height: auto; left: -10px; bottom: -20px; }
  .specialize-list { grid-template-columns: 1fr; gap: 16px; }

  /* Lightbox: full-width prev/next buttons */
  .lightbox { padding: 20px; }
  .lightbox-prev, .lightbox-next { width: 42px; height: 42px; }
  .lightbox-close { top: 16px; right: 16px; }
}

/* --- Mobile portrait (≤480px) --- */
@media (max-width: 480px) {
  /* Header + banner */
  .btn-call { padding: 10px 14px; font-size: 13px; }
  .btn-call span { display: inline; }
  .page-title { padding: 130px 0 60px; }
  .page-title-heading { font-size: 32px; line-height: 40px; }

  /* Headings scale-down */
  h1 { font-size: 28px; }
  .service-detail-title { font-size: 20px; }
  .home-intro-heading,
  .home-about-heading,
  .home-services-title,
  .home-portfolio-title,
  .home-testimonials-title,
  .home-getquote-title,
  .contact-intro-title,
  .about-protect-heading,
  .specialize-heading { font-size: 26px; line-height: 34px; }

  /* Section padding scale-down more */
  .home-banner { margin-top: -72px; }

  /* Side padding on all section inner containers */
  #header .container,
  .footer-container,
  .home-services-inner,
  .home-portfolio-inner,
  .home-testimonials-inner,
  .home-contact-inner,
  .home-getquote-inner,
  .contact-newsletter-inner,
  .about-protect-inner,
  .about-specialize-inner,
  .services-page-inner,
  .service-detail-inner,
  .contact-intro-inner,
  .home-intro-inner,
  .home-about-inner { padding-left: 16px; padding-right: 16px; }

  /* Footer: logos stack */
  .footer-logos { gap: 24px; justify-content: center; }
  .footer-logos a { flex: 0 0 auto; }
  .footer-desc { text-align: left; }
  .footer-row { gap: 28px; text-align: left; }

  /* Services sidebar */
  .widget-list a { padding: 11px 18px; font-size: 14px; }

  /* Gallery: 2 columns on tiny screens */
  .service-detail-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .service-detail-image-row { grid-template-columns: 1fr; }

  /* Contact form row */
  .contact-form-row-inner { margin: -80px auto 32px; max-width: calc(100% - 24px); }

  /* About section: shrink layered images more */
  .home-about-media { min-height: 300px; }

  /* Portfolio: 1 column */
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-filter { margin-bottom: 24px; }
  .portfolio-filter li { margin: 3px 4px 3px 0; }
  .portfolio-filter a { padding: 8px 14px; font-size: 12px; }

  /* Buttons */
  .home-intro-btn, .home-about-btn, .cf-submit { font-size: 15px; }
  .cf-submit { padding: 16px 20px; font-size: 16px; }

  /* Hamburger panel */
  .inner-canvas-nav { width: 280px; }
  .mainnav_canvas .menu li a { font-size: 15px; padding: 12px 0; }
}