/* =========================================================
   Best Securitas Private Limited — Website Stylesheet
   Brand: Best Guard Force | Safety | Security | Trust
   ========================================================= */

:root{
  /* Brand palette — taken from the company logo & collateral */
  --navy-900:#050d1a;
  --navy-800:#0a1a2f;
  --navy-700:#0f2743;
  --navy-600:#16355a;

  --blue-600:#0b53a8;
  --blue-500:#1266c7;
  --blue-400:#2c8bee;
  --blue-100:#e6f0fb;

  --green-600:#2e9440;
  --green-500:#3fae49;
  --green-100:#e9f6ea;

  --ink:#132033;
  --body:#4a5a70;
  --line:#e2e8f0;
  --bg:#ffffff;
  --bg-alt:#f4f7fb;

  --wa:#25d366;

  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 2px 10px rgba(10,26,47,.06);
  --shadow:0 14px 40px rgba(10,26,47,.10);
  --shadow-lg:0 26px 70px rgba(10,26,47,.18);

  --font-display:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --container:1200px;
  --header-h:78px;

  /* Vertical breathing room above and below every section.
     Raise this for a more open, airy page; lower it for a tighter one.
     Two adjacent sections are twice this value apart. */
  --section-pad:44px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 10px);-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  color:var(--body);
  background:var(--bg);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--blue-500);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--blue-600)}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink);line-height:1.15}
p{margin:0 0 1em}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--blue-400);outline-offset:2px;border-radius:4px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:22px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--blue-500);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600;
}
.skip-link:focus{left:0}

.ico{width:15px;height:15px;fill:currentColor;flex:none}

.txt-blue{color:var(--blue-400)}
.txt-green{color:var(--green-500)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 26px;border:0;border-radius:8px;cursor:pointer;
  font-family:var(--font-body);font-size:.95rem;font-weight:700;letter-spacing:.2px;
  text-align:center;transition:transform .18s ease,box-shadow .18s ease,background .2s ease,color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--lg{padding:15px 32px;font-size:1rem}
.btn--primary{background:var(--blue-500);color:#fff;box-shadow:0 10px 24px rgba(18,102,199,.28)}
.btn--primary:hover{background:var(--blue-600);color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px rgba(18,102,199,.34)}
.btn--ghost{background:rgba(255,255,255,.08);color:#fff;border:2px solid rgba(255,255,255,.5);backdrop-filter:blur(4px)}
.btn--ghost:hover{background:#fff;color:var(--navy-800);border-color:#fff}
.btn--light{background:#fff;color:var(--navy-800);box-shadow:var(--shadow-sm)}
.btn--light:hover{background:var(--blue-100);color:var(--navy-800);transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--blue-500);border:2px solid var(--blue-500)}
.btn--outline:hover{background:var(--blue-500);color:#fff}
.btn--green{background:var(--green-500);color:#fff;box-shadow:0 10px 24px rgba(63,174,73,.30)}
.btn--green:hover{background:var(--green-600);color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px rgba(63,174,73,.36)}
.btn--wa{background:var(--wa);color:#04310f}
.btn--wa:hover{background:#1fbb59;color:#04310f;transform:translateY(-2px)}
.btn .ico{width:17px;height:17px}

/* ---------- Section scaffolding ---------- */
.section{padding:var(--section-pad) 0}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--navy-800);color:#b9c7da}
.section__head{max-width:47.5rem;margin:0 auto 36px;text-align:center}
.section__title{
  font-family:var(--font-display);
  font-size:clamp(2rem,4.2vw,3.05rem);
  font-weight:700;letter-spacing:.4px;text-transform:uppercase;
}
.section__title--light{color:#fff}
.section__sub{font-size:1.06rem;margin:0}
.section__sub--light{color:#9fb1c8}

.eyebrow{
  font-family:var(--font-display);
  font-size:1rem;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--blue-500);margin:0 0 10px;
}
.eyebrow--light{color:var(--blue-400)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{background:var(--navy-900);color:#93a6bf;font-size:.8rem}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:38px;flex-wrap:wrap}
.topbar__left,.topbar__right{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.topbar__item{display:inline-flex;align-items:center;gap:7px;color:#93a6bf}
a.topbar__item:hover{color:#fff}
.topbar__item--strong{color:#fff;font-weight:600}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:sticky;top:0;z-index:120;
  background:#fff;box-shadow:0 1px 0 var(--line);
  transition:box-shadow .25s ease,background .25s ease;
}
.header.is-stuck{box-shadow:0 6px 26px rgba(10,26,47,.12)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--header-h)}

.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand__logo{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--green-500),0 0 0 4px #fff}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--navy-800)}
.brand__sub{font-size:.66rem;font-weight:600;letter-spacing:3.1px;text-transform:uppercase;color:var(--green-600);margin-top:3px}

.nav{display:flex;align-items:center;gap:26px}
.nav__list{display:flex;align-items:center;gap:4px}
.nav__link{
  position:relative;display:block;padding:9px 13px;border-radius:6px;
  font-size:.92rem;font-weight:600;color:var(--navy-700);white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  background:var(--blue-500);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav__link:hover{color:var(--blue-500)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--blue-500)}

.burger{display:none;width:44px;height:44px;background:transparent;border:0;cursor:pointer;padding:10px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2.5px;width:100%;background:var(--navy-800);border-radius:2px;transition:transform .3s ease,opacity .2s ease}
.burger.is-open span:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)}

@media (max-width:1240px){
  .nav{gap:16px}
  .nav__list{gap:0}
  .nav__link{padding:9px 9px;font-size:.88rem}
  .nav__link::after{left:9px;right:9px}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;isolation:isolate;background:var(--navy-900);color:#fff;overflow:hidden}

/* --- carousel: all slides share one grid cell, tallest sets the height --- */
.hero__slides{display:grid;position:relative}
.hero__slide{
  grid-area:1/1;position:relative;isolation:isolate;
  opacity:0;visibility:hidden;
  transition:opacity .8s ease,visibility .8s ease;
}
.hero__slide.is-active{opacity:1;visibility:visible}

/* content entrance, replayed each time a slide becomes active */
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero__slide.is-active .hero__content > *{animation:heroIn .7s cubic-bezier(.2,.7,.3,1) both}
.hero__slide.is-active .hero__content > *:nth-child(1){animation-delay:.10s}
.hero__slide.is-active .hero__content > *:nth-child(2){animation-delay:.20s}
.hero__slide.is-active .hero__content > *:nth-child(3){animation-delay:.30s}
.hero__slide.is-active .hero__content > *:nth-child(4){animation-delay:.40s}
.hero__slide.is-active .hero__content > *:nth-child(5){animation-delay:.50s}

/* slow drift on the active slide's photo */
@keyframes heroPan{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero__slide.is-active .hero__media img{animation:heroPan 9s ease-out both}

/* Reduced motion: the carousel still changes slides, it just does not animate.
   This block must come AFTER the rules above — the selectors have equal
   specificity, so source order decides the winner. */
@media (prefers-reduced-motion:reduce){
  .hero__slide{transition:none}
  .hero__slide.is-active .hero__content > *,
  .hero__slide.is-active .hero__media img{animation:none}
}

.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
/* --- Housekeeping slide ---
   housekeeping.jpg is a tall portrait photo. A softly blurred copy fills the slide; the sharp
   photo fills the right-hand part and fades in from the left, framed from just above the heads
   so both staff members' faces stay clear of the headline. */
.hero__slide--housekeeping .hero__media{background:#0b1622;overflow:hidden}
.hero__slide--housekeeping .hero__media .hero__bg-blur{
  position:absolute;top:-40px;left:-40px;
  width:calc(100% + 80px);height:calc(100% + 80px);
  object-fit:cover;object-position:center 30%;
  filter:blur(22px) saturate(1.05);
}
.hero__slide--housekeeping .hero__media .hero__bg-photo{
  position:absolute;top:0;right:0;width:55%;height:100%;
  object-fit:cover;object-position:50% 20%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 24%);
}
.hero__slide--housekeeping .hero__overlay{
  background:
    linear-gradient(90deg,rgba(4,10,18,.9) 0%,rgba(4,10,18,.72) 40%,rgba(4,10,18,.14) 60%,rgba(4,10,18,0) 100%),
    linear-gradient(to top,rgba(5,13,26,.85) 0%,rgba(5,13,26,0) 30%);
}
@media (max-width:1180px){
  .hero__slide--housekeeping .hero__media .hero__bg-photo{width:45%;object-position:0% 20%}
}
@media (max-width:720px){
  /* on a phone the text spans the slide: the photo fills it, faces near the top */
  .hero__slide--housekeeping .hero__media .hero__bg-photo{
    width:100%;object-position:46% 0%;-webkit-mask-image:none;mask-image:none;
  }
  .hero__slide--housekeeping .hero__overlay{
    background:linear-gradient(180deg,rgba(4,10,18,.45) 0%,rgba(4,10,18,.7) 35%,rgba(4,10,18,.88) 60%,rgba(4,10,18,.92) 100%);
  }
}
.hero__overlay{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(5,13,26,.96) 0%,rgba(8,22,42,.90) 42%,rgba(8,22,42,.55) 70%,rgba(8,22,42,.35) 100%),
    linear-gradient(to top,rgba(5,13,26,.95) 0%,rgba(5,13,26,0) 45%);
}
.hero__inner{padding:44px 22px 112px}
.hero__content{max-width:41.25rem}
.hero .eyebrow{color:var(--blue-400)}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(2.9rem,7.2vw,5.4rem);
  font-weight:700;line-height:.98;letter-spacing:.5px;text-transform:uppercase;
  color:#fff;margin-bottom:20px;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}
.hero__lead{font-size:1.1rem;color:#c6d4e6;max-width:35rem;margin-bottom:30px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.hero__ticks{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.92rem;color:#a9bcd4}
.hero__ticks li{position:relative;padding-left:26px}
.hero__ticks li::before{
  content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--green-500);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11'/></svg>") center/contain no-repeat;
}
.hero__ticks li::after{
  content:"";position:absolute;left:4px;top:11px;width:8px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}

/* ---------- Carousel controls ---------- */
.hero__ctrl{
  position:absolute;left:0;right:0;bottom:28px;z-index:6;
  display:flex;align-items:center;justify-content:center;gap:18px;
}
.hero__arrow{
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.13);color:#fff;
  backdrop-filter:blur(4px);
  transition:background .22s ease,transform .22s ease;
}
.hero__arrow svg{width:22px;height:22px;fill:currentColor}
.hero__arrow:hover{background:var(--blue-500);transform:scale(1.08)}

.hero__dots{display:flex;gap:11px}
.hero__dot{
  width:34px;height:22px;padding:0;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;
}
.hero__dot span{
  display:block;width:100%;height:4px;border-radius:99px;
  background:rgba(255,255,255,.38);transition:background .25s ease,transform .25s ease;
}
.hero__dot:hover span{background:rgba(255,255,255,.7)}
.hero__dot.is-active span{background:var(--blue-400);transform:scaleY(1.6)}

.hero__strip{position:relative;z-index:5;background:rgba(5,13,26,.72);border-top:1px solid rgba(255,255,255,.09);backdrop-filter:blur(6px)}
.hero__strip-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-block:26px}
.stat{text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:rgba(255,255,255,.14)}
.stat__num{display:block;font-family:var(--font-display);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;color:#fff;line-height:1}
.stat__label{display:block;font-size:.76rem;letter-spacing:1.5px;text-transform:uppercase;color:#8fa4bf;margin-top:7px;font-weight:600}

/* =========================================================
   FEATURE BAR
   ========================================================= */
.featurebar{background:#fff;border-bottom:1px solid var(--line)}
.featurebar__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding-block:32px}
.feature{text-align:center;padding:6px 16px;position:relative}
.feature+.feature::before{content:"";position:absolute;left:0;top:10%;height:80%;width:1px;background:var(--line)}
.feature__ico{width:46px;height:46px;fill:var(--blue-500);color:var(--blue-500);margin:0 auto 12px;display:block}
.feature h3{
  font-family:var(--font-display);font-size:1.12rem;font-weight:600;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--navy-800);margin:0;line-height:1.25;
}

/* =========================================================
   ABOUT
   ========================================================= */
.about__grid{display:grid;grid-template-columns:1fr 1.06fr;gap:70px;align-items:center}
/* Two photos side by side plus a badge strip beneath - nothing is layered.
   (The old version stacked the lady-officer photo over the right half of the
   team photo, which hid all four guards.) */
.about__media{display:grid;grid-template-columns:1.15fr 1fr;gap:14px}
.about__img-main,
.about__img-sub{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-lg);object-fit:cover}
/* 5:7 is the tallest crop of team-02.jpg that still keeps all four guards in
   frame; 84% centres the crop on them rather than the building on the left */
.about__img-main{grid-column:1;grid-row:1;aspect-ratio:5/7;object-position:84% center}
.about__img-sub{grid-column:2;grid-row:1;height:100%;min-height:0;object-position:center 30%}
.about__badge{
  grid-column:1 / -1;grid-row:2;
  display:flex;align-items:center;justify-content:center;gap:16px;
  background:var(--blue-500);color:#fff;
  padding:14px 22px;border-radius:var(--radius-sm);box-shadow:var(--shadow);text-align:left;
}
.about__badge-num{display:block;font-family:var(--font-display);font-size:2.05rem;font-weight:700;line-height:1}
.about__badge-txt{display:block;font-size:.72rem;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;opacity:.92;line-height:1.4}

.about__points{display:grid;gap:20px;margin:30px 0 30px}
.point{display:flex;gap:16px;align-items:flex-start}
.point__ico{
  flex:none;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;
  background:var(--blue-100);color:var(--blue-600);
  font-family:var(--font-display);font-size:1.2rem;font-weight:700;letter-spacing:.5px;
}
.point h4{font-size:1.02rem;margin:0 0 3px;color:var(--navy-800)}
.point p{margin:0;font-size:.93rem}

/* =========================================================
   SERVICES
   ========================================================= */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{
  display:block;color:var(--body);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 26px 30px;position:relative;overflow:hidden;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
a.card:hover{color:var(--body)}
a.card:hover h3{color:var(--blue-500)}
.card::before{
  content:"";position:absolute;left:0;top:0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--blue-500),var(--green-500));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card__ico{
  width:62px;height:62px;border-radius:14px;display:grid;place-items:center;
  background:var(--blue-100);margin-bottom:18px;transition:background .3s ease;
}
.card__ico svg{width:32px;height:32px;fill:var(--blue-600);color:var(--blue-600)}
.card:hover .card__ico{background:var(--blue-500)}
.card:hover .card__ico svg{fill:#fff;color:#fff}
.card h3{
  font-family:var(--font-display);font-size:1.36rem;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--navy-800);margin-bottom:8px;
}
.card p{font-size:.93rem;margin:0}
.card--cta{
  background:linear-gradient(150deg,var(--navy-700),var(--navy-800));
  border-color:transparent;color:#b9c7da;display:flex;flex-direction:column;justify-content:center;
}
.card--cta h3{color:#fff}
.card--cta p{margin-bottom:18px}
.card--cta .btn{align-self:flex-start}
.card--cta:hover{transform:translateY(-7px)}

/* =========================================================
   WHY US
   ========================================================= */
.why__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.checklist{display:grid;gap:12px;margin:24px 0 34px}
.checklist li{position:relative;padding-left:36px;font-weight:500;color:var(--ink)}
.checklist li::before{
  content:"";position:absolute;left:0;top:2px;width:23px;height:23px;border-radius:50%;
  background:var(--green-500);box-shadow:0 4px 10px rgba(63,174,73,.32);
}
.checklist li::after{
  content:"";position:absolute;left:7px;top:9px;width:9px;height:5px;
  border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(-45deg);
}

.why__shield{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.shield{
  flex:none;width:132px;padding:22px 10px 30px;text-align:center;color:#fff;
  background:linear-gradient(160deg,var(--navy-700),var(--navy-900));
  border:3px solid var(--blue-500);
  clip-path:polygon(0 0,100% 0,100% 68%,50% 100%,0 68%);
  font-family:var(--font-display);text-transform:uppercase;line-height:1.05;
}
.shield span{display:block}
.shield__l1{font-size:1.02rem;letter-spacing:1.6px;color:#cfe0f5}
.shield__l2{font-size:1.5rem;font-weight:700;color:var(--blue-400)}
.shield__l3{font-size:1.5rem;font-weight:700}
.shield__l4{font-size:1.5rem;font-weight:700}
.why__quote{margin:0;font-family:var(--font-display);font-size:1.36rem;font-weight:600;color:var(--navy-800);letter-spacing:.4px;max-width:20.625rem}
.why__quote span{display:block;font-family:var(--font-body);font-size:.86rem;font-weight:500;letter-spacing:0;color:var(--body);margin-top:8px}

.why__media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:4/4.4;object-fit:cover;object-position:center 40%}

/* =========================================================
   SECTORS
   ========================================================= */
.sectors{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.sectors span{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:11px 24px;font-size:.93rem;font-weight:600;color:var(--navy-700);
  transition:all .25s ease;
}
.sectors span:hover{background:var(--blue-500);border-color:var(--blue-500);color:#fff;transform:translateY(-3px);box-shadow:0 10px 22px rgba(18,102,199,.25)}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery__item{
  margin:0;position:relative;overflow:hidden;border-radius:var(--radius);cursor:pointer;
  /* 4:5 portrait - most gallery photos are 3:4, so they barely crop */
  aspect-ratio:4/5;background:var(--navy-800);
}
/* A wide tile spans two columns but stays ONE row tall: it has no aspect ratio
   of its own and its photo is out of flow, so it stretches to the height the
   regular tiles set. (At aspect-ratio 1/1 it came out twice as tall as its
   neighbours and left a blank hole under them.) min-height is a floor in case
   it ever ends up alone in a row. */
.gallery__item--wide{grid-column:span 2;aspect-ratio:auto;min-height:220px}
.gallery__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
/* crop focus, so every guard stays in frame */
.gallery__item img[src$="hero-guards.jpg"]{object-position:center 60%}
.gallery__item img[src$="team-05.jpg"]{object-position:center 70%}
.gallery__item img[src$="team-02.jpg"]{object-position:84% center}
.gallery__item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,13,26,.88) 0%,rgba(5,13,26,.15) 48%,rgba(5,13,26,0) 70%);
  opacity:.75;transition:opacity .35s ease;
}
.gallery__item figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;
  font-family:var(--font-display);font-size:1.16rem;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;color:#fff;transform:translateY(6px);transition:transform .35s ease;
}
.gallery__item:hover img{transform:scale(1.07)}
.gallery__item:hover::after{opacity:1}
.gallery__item:hover figcaption{transform:none}

/* Home preview holds 7 photos (1 wide + 6): whole rows at 4 and 2 columns.
   At 3 columns that would leave a ragged last row, so the last two step out. */
@media (max-width:1100px) and (min-width:721px){
  .gallery--preview .gallery__item:nth-child(n+6){display:none}
}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:rgba(4,10,20,.94);padding:5vh 4vw;animation:lbIn .25s ease;
}
.lightbox[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lightbox__figure{margin:0;max-width:62.5rem;width:100%;text-align:center}
.lightbox__figure img{max-height:80vh;width:auto;margin:0 auto;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox__figure figcaption{color:#c6d4e6;margin-top:16px;font-size:.95rem;letter-spacing:.3px}
.lightbox__close{
  position:absolute;top:18px;right:22px;width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:2rem;line-height:1;cursor:pointer;transition:background .2s ease;
}
.lightbox__close:hover{background:var(--blue-500)}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;transition:background .2s ease;
}
.lightbox__nav:hover{background:var(--blue-500)}
.lightbox__nav--prev{left:16px}
.lightbox__nav--next{right:16px}

/* =========================================================
   CTA BAND
   ========================================================= */
.ctaband{
  background:linear-gradient(115deg,var(--blue-600) 0%,var(--blue-500) 48%,var(--green-600) 130%);
  color:#eaf3ff;position:relative;overflow:hidden;
}
.ctaband::before{
  content:"";position:absolute;right:-70px;top:-70px;width:340px;height:340px;border-radius:50%;
  background:rgba(255,255,255,.07);
}
.ctaband__inner{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:34px;
  flex-wrap:wrap;padding-block:44px;
}
.ctaband h2{
  font-family:var(--font-display);font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:#fff;margin:0 0 6px;
}
.ctaband__sub{margin:0;color:#dbe9fb}
.ctaband__actions{display:flex;gap:14px;flex-wrap:wrap}

/* =========================================================
   LEADERSHIP
   ========================================================= */
.leader{
  display:grid;grid-template-columns:21.25rem 1fr;gap:48px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:40px;box-shadow:var(--shadow-sm);
}
.leader__photo img{
  width:100%;aspect-ratio:1/1.12;object-fit:cover;object-position:center 22%;
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.leader__name{font-family:var(--font-display);font-size:2.15rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--navy-800);margin-bottom:2px}
.leader__role{color:var(--blue-500);font-weight:700;letter-spacing:.4px;margin-bottom:16px}
.leader__quote{
  margin:20px 0 24px;padding:16px 22px;border-left:4px solid var(--green-500);
  background:var(--green-100);border-radius:0 10px 10px 0;
  font-style:italic;color:var(--navy-700);
}
.leader__contact{display:flex;gap:12px;flex-wrap:wrap}

/* =========================================================
   CONTACT
   ========================================================= */
.contact__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:36px;align-items:start}
.contact__info{display:grid;gap:16px}
.infocard{
  display:flex;gap:16px;align-items:flex-start;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);padding:22px;
  transition:border-color .25s ease,background .25s ease;
}
.infocard:hover{border-color:var(--blue-400);background:rgba(255,255,255,.075)}
.infocard__ico{
  flex:none;width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
  background:var(--blue-500);
}
.infocard__ico svg{width:22px;height:22px;fill:#fff;color:#fff}
.infocard h4{color:#fff;font-size:.82rem;letter-spacing:1.7px;text-transform:uppercase;margin:0 0 8px}
.infocard a{display:block;color:#cfdcee;font-weight:500}
.infocard a:hover{color:var(--blue-400)}
.infocard p{margin:0;color:#9fb1c8;font-size:.94rem;line-height:1.65}

.contact__form-wrap{background:#fff;border-radius:var(--radius);padding:38px;box-shadow:var(--shadow-lg)}
.form__title{
  font-family:var(--font-display);font-size:1.85rem;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--navy-800);margin-bottom:22px;
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px;display:flex;flex-direction:column}
.field label{font-size:.8rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--navy-700);margin-bottom:7px}
.field label span{color:#d62828;margin-left:3px}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:.95rem;color:var(--ink);
  padding:13px 15px;border:1.5px solid var(--line);border-radius:9px;background:#fbfcfe;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;width:100%;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue-500);background:#fff;box-shadow:0 0 0 4px rgba(18,102,199,.12);
}
.field input.is-error,.field select.is-error{border-color:#d62828;background:#fff5f5}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.form__note{margin:14px 0 0;font-size:.9rem;font-weight:600;min-height:1.2em}
.form__note.is-ok{color:var(--green-600)}
.form__note.is-bad{color:#d62828}

.map{margin-top:32px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);line-height:0}
.map iframe{filter:grayscale(.25) contrast(1.05)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--navy-900);color:#8ea2bd;font-size:.93rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:44px;padding:52px 22px 40px}
.brand--footer{margin-bottom:16px}
.brand--footer .brand__name{color:#fff}
.brand--footer .brand__sub{color:var(--green-500)}
.footer__tag{color:#a8bad3;margin-bottom:14px}
.footer__cin{font-size:.82rem;color:#6f849f;margin:0 0 4px;letter-spacing:.4px}
.footer__col h4{
  color:#fff;font-family:var(--font-display);font-size:1.16rem;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px;position:relative;padding-bottom:11px;
}
.footer__col h4::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:2.5px;background:var(--blue-500)}
.footer__col ul{display:grid;gap:9px}
.footer__col a{color:#8ea2bd}
.footer__col a:hover{color:var(--blue-400);padding-left:4px}
.footer__col a{transition:color .2s ease,padding-left .2s ease}
.footer__contact li{line-height:1.6}

.footer__bar{border-top:1px solid rgba(255,255,255,.08)}
.footer__bar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-block:20px}
.footer__bar p{margin:0;font-size:.85rem;color:#6f849f}
.footer__slogan{font-family:var(--font-display);letter-spacing:2.4px;text-transform:uppercase;color:#8ea2bd!important}

/* =========================================================
   FLOATING ACTIONS
   ========================================================= */
.fab{position:fixed;right:18px;bottom:18px;z-index:150;display:flex;flex-direction:column;gap:11px}
.fab__btn{
  width:52px;height:52px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 26px rgba(5,13,26,.3);transition:transform .2s ease,opacity .25s ease,visibility .25s ease;
}
.fab__btn:hover{transform:translateY(-3px) scale(1.05)}
.fab__btn svg{width:27px;height:27px;fill:#fff}
.fab__btn--wa{background:var(--wa)}
.fab__btn--call{background:var(--blue-500)}
.fab__btn--top{background:var(--navy-700);opacity:0;visibility:hidden}
.fab__btn--top.is-visible{opacity:1;visibility:visible}
.fab__btn--top svg{width:22px;height:22px}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:38px}
}

@media (max-width:960px){
  /* the CIN is long — drop it first so the top bar stays one line */
  .topbar__left .topbar__item:first-child{display:none}

  .nav{
    position:fixed;top:0;right:0;bottom:0;width:min(320px,84vw);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:#fff;box-shadow:-14px 0 44px rgba(10,26,47,.2);
    padding:96px 26px 34px;transform:translateX(105%);transition:transform .35s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;z-index:130;
  }
  .nav.is-open{transform:none}
  .nav__list{flex-direction:column;align-items:stretch;gap:2px}
  .nav__link{padding:14px 12px;font-size:1rem;border-bottom:1px solid var(--line)}
  .nav__link::after{display:none}
  .nav__cta{margin-top:22px}
  .burger{display:flex;z-index:140}

  .featurebar__grid{grid-template-columns:repeat(3,1fr);gap:26px 0}
  .feature:nth-child(3n+1)::before{display:none}

  .about__grid,.why__grid{grid-template-columns:1fr;gap:48px}
  .why__media{order:-1}
  .leader{grid-template-columns:1fr;gap:28px;padding:28px}
  .leader__photo{max-width:300px}
  .contact__grid{grid-template-columns:1fr}
}

@media (max-width:720px){
  :root{--header-h:70px}
  :root{--section-pad:38px}
  .topbar__item--hide,.topbar__left .topbar__item:first-child{display:none}
  .topbar__inner{justify-content:center}
  /* bottom padding leaves room for the carousel control bar below the text */
  .hero__inner{padding:32px 22px 106px}
  .hero__ctrl{bottom:22px;gap:14px}
  .hero__arrow{width:38px;height:38px}
  .hero__arrow svg{width:19px;height:19px}
  .hero__strip-inner{grid-template-columns:repeat(2,1fr);gap:24px 10px}
  .stat:nth-child(odd)::before{display:none}
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr);gap:12px}
  /* at two columns a wide tile sits alone in its row, so it needs its own shape */
  .gallery__item--wide{grid-column:span 2;aspect-ratio:16/10;min-height:0}
  .form__row{grid-template-columns:1fr;gap:0}
  .contact__form-wrap{padding:26px}
  .footer__grid{grid-template-columns:1fr;gap:34px;padding-top:40px}
  .ctaband__inner{padding-block:34px}
  .lightbox__nav{width:44px;height:44px;font-size:1.8rem}
  .lightbox__nav--prev{left:6px}
  .lightbox__nav--next{right:6px}
}

@media (max-width:560px){
  /* keep the top bar to a single line — phone only */
  .topbar__right .topbar__item:not(.topbar__item--strong){display:none}
}

@media (max-width:480px){
  .featurebar__grid{grid-template-columns:repeat(2,1fr)}
  .feature::before{display:none}
  .brand__name{font-size:1.24rem}
  .brand__logo{width:44px;height:44px}
  .hero__actions .btn{width:100%}
  .sectors span{font-size:.86rem;padding:9px 18px}
}

/* =========================================================
   INNER-PAGE COMPONENTS
   (about / services / why-us / gallery / leadership / contact)
   ========================================================= */

/* ---------- Page banner ---------- */
.pagehero{position:relative;isolation:isolate;background:var(--navy-900);color:#fff;text-align:center;padding:54px 0 50px}
.pagehero__media{position:absolute;inset:0;z-index:-2}
.pagehero__media img{width:100%;height:100%;object-fit:cover;object-position:center 34%}
.pagehero__overlay{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(5,13,26,.90) 0%,rgba(8,22,42,.84) 60%,rgba(5,13,26,.94) 100%);
}
.pagehero__title{
  font-family:var(--font-display);
  font-size:clamp(2.3rem,5.2vw,3.9rem);
  font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#fff;margin:0 0 12px;
}
.pagehero__sub{max-width:41.25rem;margin:0 auto;color:#bccbe0;font-size:1.04rem}
.pagehero .eyebrow{color:var(--blue-400)}

.breadcrumb{margin-top:22px;font-size:.86rem;color:#8fa4bf}
.breadcrumb ol{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.breadcrumb li{display:flex;align-items:center;gap:8px}
.breadcrumb li+li::before{content:"\203A";color:#5d7392}
.breadcrumb a{color:#bccbe0}
.breadcrumb a:hover{color:var(--blue-400)}
.breadcrumb [aria-current]{color:var(--blue-400);font-weight:600}

/* ---------- Service detail rows ---------- */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:40px 0;border-bottom:1px solid var(--line)}
.svc:last-child{border-bottom:0}
.svc:nth-of-type(even) .svc__media{order:2}
.svc__media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover}
.svc__num{
  display:inline-block;font-family:var(--font-display);font-size:.9rem;font-weight:700;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--blue-500);
  background:var(--blue-100);padding:5px 14px;border-radius:999px;margin-bottom:14px;
}
.svc h2{
  font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.35rem);font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;color:var(--navy-800);
}
.svc__list{display:grid;gap:10px;margin:20px 0 24px}
.svc__list li{position:relative;padding-left:30px;font-size:.95rem}
.svc__list li::before{
  content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:4px;
  background:var(--green-500);
}
.svc__list li::after{
  content:"";position:absolute;left:4.5px;top:11px;width:7px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}

/* ---------- Numbered process ---------- */
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step}
.step{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 26px 28px;counter-increment:step;transition:transform .25s ease,box-shadow .25s ease;
}
.step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.step::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;top:-18px;left:26px;
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue-500),var(--blue-600));color:#fff;
  font-family:var(--font-display);font-size:1.24rem;font-weight:700;letter-spacing:.5px;
  box-shadow:0 8px 20px rgba(18,102,199,.32);
}
.step h3{
  font-family:var(--font-display);font-size:1.28rem;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--navy-800);margin:18px 0 8px;
}
.step p{margin:0;font-size:.93rem}

/* ---------- Value / differentiator cards ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.value{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue-500);
  border-radius:var(--radius-sm);padding:28px 26px;
  transition:transform .25s ease,box-shadow .25s ease,border-left-color .25s ease;
}
.value:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-left-color:var(--green-500)}
.value h3{
  font-family:var(--font-display);font-size:1.26rem;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:var(--navy-800);margin-bottom:8px;
}
.value p{margin:0;font-size:.93rem}

/* ---------- Mission / Vision ---------- */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.mv__card{
  border-radius:var(--radius);padding:38px 34px;color:#c9d8ea;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-900));
}
.mv__card--green{background:linear-gradient(150deg,#1f7a2c,#0f4d1c)}
.mv__card h3{
  font-family:var(--font-display);font-size:1.6rem;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:#fff;margin-bottom:12px;
}
.mv__card p{margin:0}

/* ---------- Compliance / facts table ---------- */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.fact{display:flex;gap:16px;padding:22px 26px;border-bottom:1px solid var(--line)}
.fact:nth-child(odd){border-right:1px solid var(--line)}
.fact:nth-last-child(-n+2){border-bottom:0}
.fact dt{
  flex:none;width:132px;font-size:.76rem;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--blue-500);padding-top:3px;
}
.fact dd{margin:0;color:var(--ink);font-weight:500}

/* ---------- FAQ (no JS: native details/summary) ---------- */
.faq{display:grid;gap:14px;max-width:53.75rem;margin-inline:auto}
.faq details{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease;
}
.faq details[open]{border-color:var(--blue-400);box-shadow:var(--shadow-sm)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 58px 20px 24px;position:relative;
  font-weight:600;color:var(--navy-800);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;
  border-right:2.4px solid var(--blue-500);border-bottom:2.4px solid var(--blue-500);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.faq summary:hover{color:var(--blue-500)}
.faq__body{padding:0 24px 22px;font-size:.95rem}
.faq__body p:last-child{margin:0}

/* ---------- Section footer action ---------- */
.section__more{text-align:center;margin-top:32px}

/* ---------- Office cards (contact page) ---------- */
.offices{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.office{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;transition:transform .25s ease,box-shadow .25s ease;
}
.office:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.office__tag{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:#fff;background:var(--blue-500);padding:5px 13px;border-radius:999px;margin-bottom:14px;
}
.office h3{
  font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--navy-800);margin-bottom:10px;
}
.office address{font-style:normal;color:var(--body);line-height:1.7;margin-bottom:14px}
.office__links{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding:70px 0 80px}
.notfound__code{
  font-family:var(--font-display);font-size:clamp(5rem,16vw,10rem);font-weight:700;
  line-height:.9;color:var(--blue-100);letter-spacing:2px;margin:0;
}
.notfound h1{
  font-family:var(--font-display);font-size:clamp(1.9rem,4vw,2.8rem);font-weight:700;
  letter-spacing:.7px;text-transform:uppercase;color:var(--navy-800);margin:-14px 0 12px;
}
.notfound__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ---------- Leadership portrait ---------- */
.leader__photo{position:relative;padding:0 18px 18px 0}
.leader__photo::before{
  content:"";position:absolute;right:0;bottom:0;width:80%;height:80%;z-index:0;
  border-radius:var(--radius);
  background:linear-gradient(140deg,var(--blue-500),var(--green-500));
}
.leader__photo img{
  position:relative;z-index:1;
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;
  border:6px solid #fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);
}

/* ---------- Services: portrait photo with faces near the top ---------- */
.svc__media--top img{object-position:center 8%}

/* ---------- Why Us page: centred intro above checklist + photo ---------- */
.why__intro{max-width:45rem;margin:0 auto 34px;text-align:center}
.why__intro .section__title{margin-bottom:16px}
/* the heading is centred, but the paragraph reads from the left */
.why__lead{max-width:40rem;margin:0 auto;text-align:left;font-size:1.06rem}
.why--page .checklist{margin-top:0}
/* trim the bare wall above the guards' caps */
.why--page .why__media img{aspect-ratio:15/13;object-position:center 80%}

/* ---------- Inner-page responsive ---------- */
@media (max-width:1100px){
  .process,.values{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .svc{grid-template-columns:1fr;gap:32px;padding:32px 0}
  .svc:nth-of-type(even) .svc__media{order:0}
  .mv,.offices{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .fact:nth-child(odd){border-right:0}
  .fact:nth-last-child(2){border-bottom:1px solid var(--line)}
}
@media (max-width:720px){
  .pagehero{padding:38px 0 36px}
  .process,.values{grid-template-columns:1fr}
  .fact{flex-direction:column;gap:4px}
  .fact dt{width:auto}
  .mv__card{padding:28px 24px}
}

/* =========================================================
   LARGE SCREENS  (27in+, ultrawide, 4K, 48in displays)
   ---------------------------------------------------------
   Below 1600px nothing here applies, so laptops are untouched.
   Above it the whole design scales up together: the root font
   size drives every rem-based size, --container widens the
   content column, and the header, section padding and hero
   height grow to match. Because text size and column width
   grow in step, line length stays in the comfortable
   60-75 characters rather than stretching across the screen.
   ========================================================= */
@media (min-width:1600px){
  :root{--container:1360px;--section-pad:54px;--header-h:88px}
  html{font-size:17px}
  .container{padding-inline:28px}
  .brand__logo{width:58px;height:58px}
  /* fill more of a big screen's height, content stays centred */
  .hero__slide{min-height:min(64vh,920px);display:flex;flex-direction:column;justify-content:center}
}

@media (min-width:1920px){
  :root{--container:1560px;--section-pad:62px;--header-h:94px}
  html{font-size:18px}
  .container{padding-inline:32px}
  .brand__logo{width:62px;height:62px}
  .topbar{font-size:.85rem}
  .hero__slide{min-height:min(66vh,1040px)}
  .fab__btn{width:58px;height:58px}
  .fab__btn svg{width:30px;height:30px}
}

@media (min-width:2400px){
  :root{--container:1800px;--section-pad:76px;--header-h:106px}
  html{font-size:20px}
  .container{padding-inline:40px}
  .brand__logo{width:72px;height:72px}
  .hero__slide{min-height:min(68vh,1240px)}
  .fab{right:28px;bottom:28px;gap:14px}
  .fab__btn{width:66px;height:66px}
  .fab__btn svg{width:34px;height:34px}
  /* more columns rather than over-wide cards */
  .gallery{grid-template-columns:repeat(5,1fr);gap:20px}
}

@media (min-width:3000px){
  :root{--container:2080px;--section-pad:90px;--header-h:120px}
  html{font-size:22px}
  .container{padding-inline:48px}
  .brand__logo{width:82px;height:82px}
  .hero__slide{min-height:min(70vh,1480px)}
  .fab__btn{width:74px;height:74px}
  .fab__btn svg{width:38px;height:38px}
  .gallery{grid-template-columns:repeat(5,1fr);gap:24px}
  .featurebar__grid,.process,.values{gap:34px}
}

@media (min-width:3600px){
  :root{--container:2320px;--section-pad:104px;--header-h:134px}
  html{font-size:24px}
  .container{padding-inline:56px}
  .brand__logo{width:92px;height:92px}
  .hero__slide{min-height:min(70vh,1660px)}
  .fab__btn{width:82px;height:82px}
  .fab__btn svg{width:42px;height:42px}
}

/* Ultrawide: very wide but not very tall. Cap hero height off the
   width instead of the height so it does not swallow the screen. */
@media (min-aspect-ratio:2/1) and (min-width:2400px){
  .hero__slide{min-height:min(74vh,1080px)}
}

/* ---------- Print ---------- */
@media print{
  .topbar,.header,.fab,.map,.ctaband__actions,.form__actions,.lightbox,.breadcrumb{display:none!important}
  .hero{color:#000}
  .hero__media,.hero__overlay,.pagehero__media,.pagehero__overlay{display:none}
  .pagehero,.pagehero__title,.pagehero__sub{color:#000}
  body{color:#000}
  .section{padding:20px 0;break-inside:avoid}
  .svc,.step,.value{break-inside:avoid}
}