/* ===== Live-matching responsive system (Elementor breakpoints 1024 / 767 / 480) ===== */

/* Hamburger toggle button (hidden on desktop) */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:48px;height:42px;padding:0 10px;background:#fff;border:1px solid #c9d2e0;border-radius:4px;cursor:pointer;flex:0 0 auto}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--navy);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.mobile-menu{display:none}

/* Keep the hero two-column down to tablet; stack only on mobile (matches live) */
@media(min-width:768px){
  .hero-grid{grid-template-columns:1fr 1.03fr !important}
}

/* Tablet and below: collapse to hamburger, hide top utility bar */
@media(max-width:1199px){
  .utility{display:none !important}
  .main-nav{display:none !important}
  .nav-toggle{display:flex}
  .site-header .wrap{display:flex !important;grid-template-columns:none !important;align-items:center;gap:14px;min-height:88px;text-align:left !important}
  .logo{margin:0 auto 0 0 !important}
  .nav-toggle{order:2}
  .badges{order:3;justify-content:flex-end}
  .mobile-menu{display:block;background:#fff;border-top:1px solid #edf0f4;box-shadow:0 14px 26px rgba(7,31,73,.10);padding:6px 24px 20px}
  .mobile-menu[hidden]{display:none}
  .mobile-menu a{display:block;text-decoration:none;color:var(--navy);font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.02em;padding:13px 2px;border-bottom:1px solid #f0f3f8}
  .mobile-menu .mm-sub{font-weight:600;text-transform:none;padding-left:18px;font-size:13px;color:#4a5568}
  .mobile-menu .mm-quote{display:inline-flex;width:auto;margin-top:16px;border-bottom:0;color:#fff !important;text-transform:uppercase}
  body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* Mobile: stack hero, hide badges, full-width hero button (layout only — type scales fluidly below) */
@media(max-width:767px){
  .badges{display:none !important}
  .hero{padding:42px 0 36px}
  .hero .hero-grid{text-align:left}
  .hero .btn,.homepage-hero .btn{display:flex;width:100% !important;min-width:0 !important}
}

/* ===== Fluid typography: clamp(min, vw, max) so text scales continuously at every width ===== */
.hero h1,.hero-title{font-size:clamp(30px,5vw,50px) !important}
/* live headings use normal tracking (no negative letter-spacing) */
.section-title,.page-hero h1,.service-title h1,.home-difference .section-title,.home-services .section-title{letter-spacing:normal !important}
.page-banner h1,.service-title h1{font-size:clamp(34px,6vw,60px)}
.faq-hero h1,.slanted-banner h2{font-size:clamp(32px,5.6vw,58px)}
.regional-offices h2{font-size:clamp(30px,5vw,54px)}
.learn-band h2{font-size:clamp(28px,4.4vw,46px)}
.serve-grid h2,.live-service-sections h2{font-size:clamp(28px,4.2vw,44px)}
.section-title,.general-card h2{font-size:clamp(28px,4vw,42px)}
.navy-content h2{font-size:clamp(26px,3.8vw,40px)}
.industry-detail h2,.cta-band h2{font-size:clamp(24px,3.2vw,34px)}
.timeline-cards .year{font-size:clamp(24px,3vw,32px)}
.navy-content .closing,.expect-grid button{font-size:clamp(22px,2.8vw,30px)}
.partner-section h3,.navy-content h3,.testimonial blockquote{font-size:clamp(20px,2.6vw,28px)}
.why-grid h2{font-size:clamp(20px,2.4vw,26px)}
.regions h3,.tile-grid span,.services .sub{font-size:clamp(18px,2.2vw,25px)}
.appearance-cards h4,.seo-copy h5,.service-card h3{font-size:clamp(17px,2vw,22px)}
.cta-band a.phone{font-size:clamp(19px,2.2vw,25px)}

/* ===== Fluid vertical spacing on major sections ===== */
.difference,.services,.navy-content,.registered,.page-body{padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(44px,6vw,80px)}
.testimonial{padding-top:clamp(48px,7vw,90px);padding-bottom:clamp(48px,7vw,90px)}
.cta-band{padding-top:clamp(36px,4.5vw,54px);padding-bottom:clamp(36px,4.5vw,54px)}


/* ===== Parity pass (harness worklist, all pages) ===== */
/* Live section / SEO headings are weight 700 (local had 900) */
.seo-copy h2,.serve-grid h2,.live-service-sections h2,.appearance h2,.appearance h3,
.navy-content h2,.regional-offices h2,.learn-band h2,.industry-tiles h2,.faq-hero h1{font-weight:700}
/* Live colors the Industries sub-section headings navy/brand (local rendered them black) */
.industry-detail h3{color:var(--navy)}


/* ===== Heading sizes matched to live desktop px (harness scorecard 2026-06-09) ===== */
.cta-band h2{font-size:clamp(30px,4vw,50px) !important}
.live-photo-hero h1,.faq-hero h1{font-size:clamp(38px,5vw,55px) !important}
.service-card-blue h2{font-size:clamp(26px,3.4vw,40px) !important}
.why-grid h2{font-size:clamp(28px,3.6vw,46px) !important}
.expect-grid h2,.partner-section h2,.seo-copy h2{font-size:clamp(28px,3.6vw,46px) !important}
.appearance h2{font-size:clamp(34px,4.6vw,60px) !important}
.live-service-sections h2,.serve-grid h2{font-size:clamp(28px,3.4vw,40px) !important}
.serve-types-section h2{font-size:clamp(26px,3.4vw,40px) !important}
.regions h3{font-size:clamp(20px,2.4vw,30px) !important}
.industry-text>h2{font-size:clamp(26px,3.2vw,36px) !important}
.industry-intro h2{font-size:clamp(26px,3.4vw,40px) !important}
.story-section h2{font-size:clamp(34px,4.6vw,60px) !important}
.story-section h3{font-size:clamp(24px,3vw,36px) !important}
.learn-band h2{font-size:clamp(24px,2.6vw,30px) !important}
.regional-offices h2{font-size:clamp(24px,2.8vw,32px) !important}
/* contact's SEO section headings are smaller on live than the service-page seo-copy */
.page-contact .seo-copy h2{font-size:clamp(22px,2.6vw,32px) !important}


/* ===== Contact offices: live stacked image-left rows (match live) ===== */
.regional-offices .office-grid{display:grid !important;grid-template-columns:1fr !important;gap:40px}
.regional-offices .office-grid article{display:grid;grid-template-columns:290px 1fr;column-gap:34px;align-items:start;background:transparent !important;box-shadow:none !important}
.regional-offices .office-grid article>img{grid-column:1;grid-row:1 / span 20;width:100%;height:auto !important;object-fit:contain;border-radius:0;align-self:start}
.regional-offices .office-grid article>:not(img){grid-column:2}
.regional-offices .office-grid h3,.regional-offices .office-grid p{padding:0 !important}
.regional-offices .office-addr{color:var(--red) !important;font-weight:700}
.regional-offices .office-grid h3{color:var(--navy);font-size:clamp(22px,2.6vw,30px);margin:6px 0 10px}
@media(max-width:760px){.regional-offices .office-grid article{grid-template-columns:1fr;gap:16px}}


/* Photo-hero titles are centered on live; FAQ becomes a dark photo hero + intro band */
.live-photo-hero .wrap{text-align:center}
.faq-photo-hero{min-height:300px}
.faq-intro{background:#fff;padding:clamp(30px,4vw,48px) 0 0;text-align:center}
.faq-intro p{max-width:1000px;margin:0 auto;font-size:18px;color:#333;line-height:1.6}


/* final size nits from 2nd scorecard */
.btn{font-size:14px}
.page-banner h1{font-size:clamp(38px,5vw,55px) !important}
.page-armed-security .seo-copy h2,.page-unarmed-security .seo-copy h2{font-size:clamp(22px,3vw,40px) !important}


/* ===== Service Why/Expect/Deliver carousel (match live) ===== */
.why-carousel{position:relative}
.why-carousel .expect-grid{position:relative}
.wc-panels{position:relative}
.wc-slide{display:none}
.wc-slide.is-active{display:block;animation:wcfade .3s ease}
@keyframes wcfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--navy);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 5px 16px rgba(18,6,88,.20);display:flex;align-items:center;justify-content:center}
.wc-arrow:hover{background:#fff}
.wc-prev{left:clamp(6px,3vw,44px)}
.wc-next{right:clamp(6px,3vw,44px)}
@media(max-width:900px){.wc-arrow{width:38px;height:38px;font-size:22px}}

/* Appearance figure larger / centered like live */
.appearance-grid{grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr) !important}
.appearance-grid>img{max-height:800px !important;width:100%}


/* Contact per-office Toll Free line (match live) */
.regional-offices .office-toll{color:var(--red);font-weight:700;font-size:13px;margin:0 0 10px}
.regional-offices .office-toll a{color:var(--red);text-decoration:none}


/* About Our Story: live icon-rows (icon+heading left, description right) */
.story-rows{display:grid;gap:clamp(28px,4vw,44px);margin-top:34px}
.story-row{display:grid;grid-template-columns:minmax(220px,310px) 1fr;gap:clamp(26px,4vw,56px);align-items:start}
.story-ico{display:flex;align-items:center;gap:16px}
.story-ico img{width:58px;height:58px;flex:0 0 auto}
.story-ico h3{margin:0;color:var(--navy);font-weight:700;line-height:1.1}
.story-row>p{color:#4a5568;line-height:1.6;margin:0;font-size:16px}
@media(max-width:900px){.story-row{grid-template-columns:1fr;gap:14px}}


/* line-height / button polish to match live computed styles */
.cta-band h2{line-height:1.05}
.page-banner h1,.service-title h1,.live-photo-hero h1{line-height:1.12}
.btn{letter-spacing:normal}


/* Services staggered sections: live stacks full-width rows (text|image), not a 2-col masonry */
.live-service-sections{grid-template-columns:1fr !important;gap:clamp(40px,5vw,70px) !important}
.live-service-sections article{grid-template-columns:1fr 1fr !important;transform:none !important;align-items:center}


/* Services staggered: live's alternation is mirrored vs our markup — flip each row */
.live-service-sections article{direction:rtl}
.live-service-sections article>*{direction:ltr}


/* Services staggered images: live uses natural height (~290-360px), not a fixed 390 crop */
.live-service-sections img{height:auto !important;width:100%;object-fit:contain}


/* Footer nav: live is uppercase + left-aligned; keep FAQs as-is */
.footer-main nav{text-align:left}
.footer-main nav a[href="/faqs/"]{text-transform:none !important}