:root {
  --navy: #08254a;
  --navy-2: #0d315e;
  --red: #df171d;
  --red-dark: #bd1016;
  --yellow: #ffc928;
  --ink: #102039;
  --muted: #64748b;
  --line: #e3e9f0;
  --soft: #f5f7fa;
  --white: #ffffff;
  --shadow: 0 14px 40px rgba(11, 36, 74, .09);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #fff; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1440px, calc(100% - 48px)); margin: 0 auto; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 10px 14px; background: #fff; color: var(--navy); }
.skip-link:focus { left: 12px; top: 12px; }

.site-header { font-family: var(--bs-body-font-family, inherit); position: relative; z-index: 1100; }
.utility-bar { background: var(--navy); color: #fff; font-size: 13px; }
.utility-inner { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.utility-phone { font-weight: 800; }
.utility-nav { display: flex; align-items: center; gap: 22px; }
.utility-nav a { opacity: .94; }
.utility-nav a:hover { opacity: 1; text-decoration: underline; }
.utility-button { border: 1px solid rgba(255,255,255,.75); border-radius: 5px; padding: 7px 11px; font-weight: 700; }
.main-nav-wrap { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 30; box-shadow: 0 3px 15px rgba(0,0,0,.08); }
.main-nav { width: 100%; max-width: none; margin: 0; min-height: 74px; padding-left: max(24px, calc((100vw - 1440px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { background: #fff; color: #111; padding: 8px 12px 7px; border-radius: 2px; box-shadow: inset 0 0 0 1px #f1f1f1; display: inline-flex; align-items: center; }
.brand-word { font-size: 29px; line-height: 1; font-weight: 900; letter-spacing: -2px; }
.brand-word span { color: var(--red); }
.primary-nav { align-self: stretch; flex: 0 0 58%; display: flex; gap: 28px; align-items: center; padding: 0 max(24px, calc((100vw - 1440px) / 2)) 0 38px; background: var(--red); border-bottom-left-radius: 30px; font-weight: 750; font-size: 14px; }
.primary-nav > .nav-link { padding: 24px 0; border-bottom: 3px solid transparent; }
.primary-nav > .nav-link:hover { border-bottom-color: #fff; }
.menu-toggle { display: none; border: 1px solid rgba(255,255,255,.65); background: transparent; color: #fff; padding: 8px 12px; border-radius: 6px; font-weight: 700; }

.hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,29,60,.98) 0%, rgba(5,29,60,.92) 44%, rgba(5,29,60,.42) 72%, rgba(5,29,60,.2) 100%), url('/securall_website_homepage/static/src/img/home_8/hero-bg.webp') center/cover no-repeat; }
.hero-grid { position: relative; min-height: 610px; display: grid; grid-template-columns: 1.07fr .93fr; align-items: center; gap: 70px; padding-block: 66px; }
.eyebrow { color: #ffd95d; text-transform: uppercase; font-weight: 900; font-size: 12px; letter-spacing: .11em; margin-bottom: 13px; }
.eyebrow.dark { color: var(--red); }
.hero h1 { margin: 0; max-width: 760px; font-size: clamp(44px, 5.1vw, 76px); line-height: .98; letter-spacing: -.045em; }
.hero-lede { max-width: 720px; color: #d7e3f1; font-size: 19px; line-height: 1.65; margin: 25px 0 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 7px; font-weight: 850; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 8px 24px rgba(223,23,29,.28); }
.btn-primary:hover { background: var(--red-dark); }
.btn-secondary { border: 1px solid rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.06); }
.trust-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; color: #c9d8ea; font-size: 13px; font-weight: 700; }
.trust-row span::before { content: '✓'; color: #ffd248; margin-right: 6px; }
.hero-art { display: flex; justify-content: center; align-items: center; }
.hero-product-card { position: relative; width: min(100%, 570px); min-height: 430px; display: flex; align-items: center; justify-content: center; border-radius: 28px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.18), rgba(255,255,255,.03) 60%); border: 1px solid rgba(255,255,255,.13); }
.hero-product-card img { width: 82%; max-height: 400px; object-fit: contain; filter: drop-shadow(0 24px 24px rgba(0,0,0,.24)); }
.hero-product-note { position: absolute; left: 22px; bottom: 22px; right: 22px; background: rgba(255,255,255,.96); color: var(--ink); padding: 16px 18px; border-radius: 12px; display: flex; justify-content: space-between; gap: 16px; box-shadow: var(--shadow); }
.hero-product-note span { color: var(--muted); font-size: 13px; }

.value-strip { border-bottom: 1px solid var(--line); background: #fff; }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.value-grid article { display: flex; gap: 14px; padding: 25px 24px; border-right: 1px solid var(--line); }
.value-grid article:last-child { border-right: 0; }
.value-icon { flex: 0 0 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; background: #fff2f2; color: var(--red); font-weight: 900; border: 1px solid #ffd7d8; }
.value-grid strong { font-size: 14px; }
.value-grid p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }

.section { padding: 88px 0; }
.products-section { background: #fff; }
.section-heading { margin-bottom: 34px; }
.section-heading h2 { margin: 5px 0 0; font-size: clamp(32px, 4vw, 50px); letter-spacing: -.035em; line-height: 1.08; }
.section-heading p { color: var(--muted); }
.split-heading { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 60px; }
.split-heading > p { max-width: 600px; margin: 0 0 7px; }
.centered { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.centered p { max-width: 690px; margin: 14px auto 0; }

.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.category-card { min-height: 280px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, #fff, #fafbfc); padding: 26px; display: grid; grid-template-columns: 1fr 42%; gap: 10px; align-items: center; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #ccd6e2; }
.category-card-wide { grid-column: span 2; grid-template-columns: 1fr 45%; background: linear-gradient(135deg, #f6f9fc 0%, #fff 62%); }
.category-card img { max-height: 215px; width: 100%; object-fit: contain; }
.category-copy span { display: inline-block; background: #fff1f1; color: var(--red); border: 1px solid #ffd4d6; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.category-copy h3 { font-size: 22px; line-height: 1.15; margin: 10px 0; }
.category-copy p { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.category-copy b { font-size: 13px; color: var(--red); }

.feature-section { background: var(--soft); border-top: 1px solid #edf1f5; border-bottom: 1px solid #edf1f5; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: center; }
.feature-media { position: relative; min-height: 440px; }
.feature-image-wrap { height: 100%; min-height: 440px; background: #fff; border-radius: 24px; display: grid; place-items: center; box-shadow: var(--shadow); overflow: hidden; }
.feature-image-wrap img { width: 90%; height: 390px; object-fit: contain; }
.feature-badge { position: absolute; left: -18px; bottom: 26px; padding: 13px 16px; background: var(--yellow); color: #4c3900; border-radius: 9px; box-shadow: 0 10px 24px rgba(125,93,0,.16); font-weight: 850; font-size: 13px; }
.feature-copy h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -.04em; margin: 7px 0 20px; }
.feature-copy > p { color: var(--muted); font-size: 17px; }
.check-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.check-list li::before { content: '✓'; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; background: #e7f5ec; color: #16763c; font-weight: 900; font-size: 12px; }
.text-link { color: var(--red); font-weight: 900; }

.cabinet-focus { background: #fff; }
.family-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.family-card { border: 1px solid var(--line); border-radius: 16px; padding: 22px; min-height: 360px; transition: transform .2s ease, box-shadow .2s ease; }
.family-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.family-card img { height: 205px; width: 100%; object-fit: contain; margin-bottom: 18px; }
.family-card h3 { margin: 0 0 6px; font-size: 19px; }
.family-card p { margin: 0; color: var(--muted); font-size: 13px; }

.cta-section { padding: 20px 0 90px; }
.cta-card { background: linear-gradient(110deg, var(--navy), var(--navy-2)); color: #fff; border-radius: 24px; padding: 48px 54px; display: flex; align-items: center; justify-content: space-between; gap: 40px; box-shadow: var(--shadow); }
.cta-card h2 { font-size: clamp(30px, 3vw, 43px); margin: 4px 0 10px; line-height: 1.1; }
.cta-card p { color: #d1deeb; max-width: 720px; margin: 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.btn-light { background: #fff; color: var(--navy); }
.btn-outline-light { color: #fff; border: 1px solid rgba(255,255,255,.6); }

.site-footer { background: #071a34; color: #d6e1ee; padding-top: 58px; font-family: var(--bs-body-font-family, inherit); }
.footer-grid { display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); gap: 50px; padding-bottom: 48px; }
.footer-brand p { color: #9fb2c7; max-width: 350px; font-size: 14px; }
.brand-footer { width: fit-content; margin-bottom: 18px; }
.footer-grid h2 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 15px; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { font-size: 13px; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #91a5ba; font-size: 12px; }

@media (max-width: 1100px) {
  .utility-nav { gap: 13px; }
  .primary-nav { gap: 16px; font-size: 13px; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid article:nth-child(2) { border-right: 0; }
  .value-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .category-card-wide { grid-column: span 2; }
  .family-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .container { width: min(100% - 30px, 1440px); }
  .utility-inner { justify-content: center; }
  .utility-nav { display: none; }
  .main-nav { width: min(100% - 30px, 1440px); margin: 0 auto; min-height: 66px; padding-left: 0; }
  .menu-toggle { display: inline-flex; }
  .primary-nav { position: absolute; left: 0; right: 0; top: 66px; flex: none; background: var(--red-dark); border-bottom-left-radius: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 18px; box-shadow: 0 16px 22px rgba(0,0,0,.14); }
  .primary-nav.open { display: flex; }
  .primary-nav a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .hero-grid { grid-template-columns: 1fr; min-height: auto; padding-block: 56px; }
  .hero-art { order: -1; }
  .hero-product-card { min-height: 310px; max-width: 520px; }
  .hero-product-card img { max-height: 280px; }
  .hero-product-note { position: static; margin: 0 18px 18px; width: calc(100% - 36px); }
  .split-heading { grid-template-columns: 1fr; gap: 14px; }
  .category-grid { grid-template-columns: 1fr; }
  .category-card-wide { grid-column: span 1; }
  .feature-grid { grid-template-columns: 1fr; gap: 42px; }
  .feature-badge { left: 15px; }
  .cta-card { flex-direction: column; align-items: flex-start; padding: 38px 30px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .hero h1 { font-size: 44px; }
  .hero-lede { font-size: 16px; }
  .hero-actions .btn { width: 100%; }
  .trust-row { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-product-card { min-height: 280px; }
  .hero-product-note { flex-direction: column; gap: 2px; }
  .value-grid { grid-template-columns: 1fr; }
  .value-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .section { padding: 64px 0; }
  .category-card, .category-card-wide { grid-template-columns: 1fr; min-height: auto; }
  .category-card img { height: 200px; grid-row: 1; }
  .family-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; justify-content: center; padding: 18px 0; }
}

/* Final header treatment: one continuous hero background, transparent logo,
   and a primary red bar curved ONLY on its bottom-left corner. */
.hero-shell {
  position: relative;
  background:
    linear-gradient(90deg, rgba(5,29,60,.98) 0%, rgba(5,29,60,.92) 44%, rgba(5,29,60,.42) 72%, rgba(5,29,60,.20) 100%),
    url('/securall_website_homepage/static/src/img/home_8/hero-bg.webp') center top / cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.hero-shell .site-header,
.hero-shell .utility-bar,
.hero-shell .main-nav-wrap,
.hero-shell .hero {
  background: transparent;
}
.hero-shell .main-nav-wrap {
  box-shadow: none;
}
.hero-shell .hero-bg {
  display: none;
}
.brand {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  width: 170px;
  min-width: 170px;
}
.brand img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.primary-nav {
  border-radius: 0 0 0 30px;
}

@media (max-width: 820px) {
  .brand { width: 145px; min-width: 145px; }
  .primary-nav { border-radius: 0; }
}


/* Buildings / lockers / shelters / magazines feature section */
.building-solutions {
  background: linear-gradient(118deg, #061d3b 0%, #08264f 62%, #0d376a 100%);
  color: #fff;
  overflow: hidden;
}
.building-solutions .container { position: relative; }
.building-intro-grid {
  display: grid;
  grid-template-columns: minmax(330px,.72fr) minmax(0,1.28fr);
  gap: 72px;
  align-items: start;
  margin-bottom: 44px;
}
.building-heading .eyebrow { color: #ffd21a; }
.building-heading h2 {
  margin: 8px 0 16px;
  font-size: clamp(36px,4vw,60px);
  line-height: .98;
  letter-spacing: -.045em;
  max-width: 620px;
}
.building-copy-rule { width: 92px; height: 4px; background: var(--red); margin: 22px 0; }
.building-copy p { color: #dce7f3; font-size: 16px; line-height: 1.72; margin: 0 0 17px; max-width: 830px; }
.building-copy p:last-child { margin-bottom: 0; }
.building-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.building-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(330px,.72fr);
  gap: 22px;
  align-items: stretch;
}
.building-media, .building-slider { min-width: 0; }
.building-main-card {
  position: relative;
  min-height: 520px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: #0b2a52;
  overflow: hidden;
}
.building-slider-viewport { isolation: isolate; }
.building-main-card .building-slide {
  position: absolute;
  inset: 0 0 72px;
  width: 100%;
  height: calc(100% - 72px);
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility .55s ease;
}
.building-main-card .building-slide.is-active { opacity: 1; visibility: visible; }
.building-main-label {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  box-sizing: border-box;
  background: #fff;
  color: var(--navy);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.building-main-label strong { font-size: 17px; }
.building-main-label span { color: #66788f; font-size: 13px; text-align: right; }
.building-slider-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 13px; min-height: 18px; }
.building-slider-dot { appearance: none; width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.9); background: transparent; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.building-slider-dot:hover, .building-slider-dot:focus-visible { transform: scale(1.15); outline: none; border-color: #ffd21a; }
.building-slider-dot.is-active { background: #ffd21a; border-color: #ffd21a; }

.building-type-list { display: grid; grid-template-rows: repeat(3,1fr); gap: 12px; }
.building-type-card {
  color: #fff;
  text-decoration: none;
  display: grid;
  grid-template-columns: 44% 56%;
  min-height: 158px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.055);
  overflow: hidden;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.building-type-card:hover { background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.34); transform: translateY(-2px); }
.building-type-image { background: #061a35; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.building-type-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.building-type-copy { padding: 18px 18px 16px; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.building-type-copy span { color: #ffd21a; font-size: 10px; line-height: 1.2; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.building-type-copy strong { display: block; margin-top: 6px; font-size: 22px; line-height: 1.05; }
.building-type-copy small { display: block; margin-top: 8px; color: #cbd9e8; font-size: 12px; line-height: 1.45; }
.building-type-copy b { margin-top: auto; padding-top: 10px; font-size: 11px; color: #fff; }

.building-benefits {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.building-benefits article { display: flex; gap: 13px; padding: 20px 18px; align-items: flex-start; border-right: 1px solid rgba(255,255,255,.13); }
.building-benefits article:last-child { border-right: 0; }
.benefit-icon { color: #ffd21a; border: 1px solid rgba(255,210,26,.6); width: 36px; height: 36px; border-radius: 4px; display: grid; place-items: center; font-weight: 900; font-size: 12px; flex: 0 0 auto; }
.building-benefits strong { display: block; margin-bottom: 5px; }
.building-benefits small { display: block; color: #c9d7e6; line-height: 1.45; }

@media (max-width: 1100px) {
  .building-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .building-showcase-grid { grid-template-columns: 1fr; }
  .building-type-list { grid-template-columns: repeat(3,1fr); grid-template-rows: none; }
  .building-type-card { grid-template-columns: 1fr; }
  .building-type-image { height: 180px; }
}
@media (max-width: 800px) {
  .building-main-card { min-height: 400px; }
  .building-type-list { grid-template-columns: 1fr; }
  .building-type-card { grid-template-columns: 42% 58%; min-height: 170px; }
  .building-type-image { height: auto; }
  .building-benefits { grid-template-columns: repeat(2,1fr); }
  .building-benefits article:nth-child(2) { border-right: 0; }
  .building-benefits article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.13); }
}
@media (max-width: 560px) {
  .building-heading h2 { font-size: 38px; }
  .building-main-card { min-height: 310px; }
  .building-main-card .building-slide { bottom: 92px; height: calc(100% - 92px); }
  .building-main-label { height: 92px; flex-direction: column; align-items: flex-start; justify-content: center; }
  .building-main-label span { text-align: left; }
  .building-type-card { grid-template-columns: 1fr; }
  .building-type-image { height: 205px; }
  .building-benefits { grid-template-columns: 1fr; }
  .building-benefits article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); }
  .building-benefits article:last-child { border-bottom: 0; }
}

/* ---- Modern homepage expansion below the preserved hero ---- */
.section-tight { padding: 54px 0 34px; background: #fff; }
.intro-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: center; }
.intro-grid h2 { margin: 8px 0 0; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -.035em; color: var(--navy); }
.intro-copy p { margin: 0 0 24px; color: var(--muted); font-size: 17px; line-height: 1.7; }

.category-grid-5 { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.category-grid-5 .category-card { min-height: 300px; display: flex; flex-direction: column; padding: 18px; }
.category-grid-5 .category-card img { order: -1; width: 100%; height: 145px; object-fit: contain; margin-bottom: 12px; }
.category-grid-5 .category-copy { padding: 0; }
.category-grid-5 .category-copy h3 { font-size: 16px; margin-bottom: 7px; }
.category-grid-5 .category-copy p { font-size: 12.5px; line-height: 1.45; min-height: 54px; }
.category-grid-5 .category-copy b { display: inline-block; margin-top: 4px; color: var(--red); font-size: 12px; }

.family-grid-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.family-grid-5 .family-card { min-height: 345px; padding: 18px; display: flex; flex-direction: column; }
.family-grid-5 .family-card img { height: 175px; }
.family-grid-5 .family-card span { margin-top: auto; color: var(--red); font-size: 12px; font-weight: 900; }

.steel-door-section { background: linear-gradient(100deg, #071c38, #103a70); color: #fff; overflow: hidden; }
.steel-door-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.steel-door-visual { position: relative; min-height: 510px; display: grid; place-items: center; }
.steel-door-frame { width: min(100%, 500px); height: 500px; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.10)); display: grid; place-items: center; box-shadow: 0 30px 60px rgba(0,0,0,.18); }
.steel-door-frame img { width: 76%; height: 82%; object-fit: contain; filter: drop-shadow(0 20px 20px rgba(0,0,0,.25)); }
.steel-door-kicker { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--red); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.steel-door-copy .eyebrow { color: #ffd21a; }
.steel-door-copy h2 { font-size: clamp(42px, 5vw, 72px); line-height: .95; margin: 8px 0 20px; letter-spacing: -.04em; }
.steel-door-copy p { color: #dce7f3; line-height: 1.7; font-size: 16px; }
.steel-specs { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0 28px; }
.steel-specs a { border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.07); border-radius: 999px; padding: 8px 12px; color: #eef5fc; font-size: 12px; font-weight: 800; text-decoration: none; }
.steel-specs a:hover, .steel-specs a:focus-visible { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); color: #fff; }

.why-section { background: linear-gradient(180deg,#fff,#f7f9fc); }
.why-heading { max-width: 900px; margin-inline: auto; }
.why-layout { display: grid; grid-template-columns: .9fr 1.4fr; gap: 56px; align-items: center; margin-top: 46px; }
.why-image-stack { min-height: 440px; position: relative; border-radius: 24px; background: radial-gradient(circle at 60% 35%, #e7eef7, #fff 65%); border: 1px solid var(--line); overflow: hidden; }
.why-building { position: absolute; width: 82%; max-height: 330px; object-fit: contain; right: 4%; top: 30px; }
.why-cabinet { position: absolute; width: 48%; max-height: 250px; object-fit: contain; left: 1%; bottom: 12px; filter: drop-shadow(0 18px 18px rgba(13,35,62,.18)); }
.why-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.why-cards article { border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: #fff; box-shadow: 0 14px 36px rgba(7,27,54,.05); }
.why-cards article > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #fff1f2; color: var(--red); font-weight: 900; font-size: 12px; margin-bottom: 14px; }
.why-cards h3 { margin: 0 0 8px; color: var(--navy); font-size: 17px; }
.why-cards p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.why-cta { text-align: center; margin-top: 30px; }

.footer-grid-expanded { grid-template-columns: 1.45fr repeat(4,1fr); gap: 32px; }
.footer-contact { display: flex; flex-direction: column; gap: 6px; margin: 15px 0; }
.footer-contact a,.footer-contact span { font-size: 12px; color: #c8d6e6; }
.social-row { display: flex; gap: 8px; margin-top: 16px; }
.social-row a { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 7px; color: #fff; font-weight: 900; }
.footer-subhead { margin-top: 20px !important; color: #ffd21a !important; }
.footer-redbar { background: linear-gradient(90deg,#b60d16,#df1822); color: #fff; }
.footer-redbar-inner { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; }
.made-usa { display: flex; align-items: center; gap: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.made-usa img { width: 48px; height: 28px; object-fit: contain; }

@media (max-width: 1180px) {
  .category-grid-5 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .family-grid-5 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .footer-grid-expanded { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
  .intro-grid,.steel-door-grid,.why-layout { grid-template-columns: 1fr; gap: 36px; }
  .category-grid-5 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .family-grid-5 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .steel-door-visual { min-height: 400px; }
  .steel-door-frame { height: 390px; }
  .footer-grid-expanded { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .section-tight { padding-top: 40px; }
  .category-grid-5,.family-grid-5,.why-cards,.footer-grid-expanded { grid-template-columns: 1fr; }
  .category-grid-5 .category-card { min-height: 260px; }
  .steel-door-visual { min-height: 330px; }
  .steel-door-frame { height: 320px; }
  .why-image-stack { min-height: 340px; }
  .footer-redbar-inner { flex-direction: column; align-items: flex-start; justify-content: center; padding: 14px 0; }
}

/* Click-open multi-level primary menus */
.primary-nav { position: relative; overflow: visible; }
.primary-nav .nav-link,
.primary-nav .nav-dropdown-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
  white-space: nowrap;
  padding: 24px 0;
  border-bottom: 3px solid transparent;
}
.primary-nav .nav-link:hover,
.primary-nav .nav-link:focus-visible,
.primary-nav .nav-dropdown-toggle:hover,
.primary-nav .nav-dropdown-toggle:focus-visible,
.primary-nav .nav-dropdown-toggle[aria-expanded="true"] {
  border-bottom-color: #fff;
  outline: none;
}
.nav-dropdown {
  position: relative;
  display: flex;
  align-self: stretch;
  align-items: center;
}
.mega-menu[hidden], .mega-submenu[hidden] { display: none !important; }
.mega-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 12px);
  left: 0;
  display: flex;
  align-items: flex-start;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.20));
}
.nav-dropdown.align-right .mega-menu { left: auto; right: 0; }
.mega-menu-panel,
.mega-submenu {
  width: 330px;
  max-height: calc(100vh - 185px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  color: #171717;
  border-radius: 7px;
  padding: 8px 0;
  box-shadow: 0 0 0 1px rgba(4,30,62,.06);
}
.mega-submenu {
  width: 275px;
  margin-left: 10px;
  /* Match the live site: each flyout starts beside the row that opened it. */
  transform: translateY(var(--submenu-offset, 0px));
}
.nav-dropdown.align-right .mega-submenu { order: -1; margin-left: 0; margin-right: 10px; }
.mega-menu-item,
.mega-submenu a {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 16px;
  border: 0 !important;
  background: transparent;
  color: #151515 !important;
  font: inherit;
  font-weight: 720;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  white-space: normal;
  line-height: 1.15;
}
.mega-menu-panel > .mega-menu-item > span:first-child {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.mega-menu-panel > a.mega-menu-item {
  padding-left: 16px !important;
  padding-right: 16px !important;
  border-bottom: 0 !important;
}
.mega-menu-panel > a.mega-menu-item:hover {
  border-bottom-color: transparent !important;
}
.mega-submenu a { font-weight: 520; }
.mega-menu-item:hover,
.mega-menu-item:focus-visible,
.mega-menu-item[aria-expanded="true"],
.mega-submenu a:hover,
.mega-submenu a:focus-visible {
  background: #f5f7fa;
  outline: none;
}
.mega-menu-item[aria-expanded="true"] { background: #f5f7fa; }
.menu-chevron {
  font-size: 24px;
  font-weight: 400;
  line-height: .8;
  transition: transform .16s ease;
}
.mega-submenu-toggle[aria-expanded="true"] .menu-chevron { transform: rotate(180deg); }

@media (max-width: 820px) {
  .primary-nav .nav-link,
  .primary-nav .nav-dropdown-toggle {
    width: 100%;
    padding: 12px 0;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.16);
  }
  .nav-dropdown { display: block; width: 100%; }
  .mega-menu,
  .nav-dropdown.align-right .mega-menu {
    position: static;
    display: block;
    filter: none;
    margin: 6px 0 8px;
  }
  .mega-menu-panel,
  .mega-submenu {
    width: 100%;
    max-height: none;
    overflow: visible;
    margin: 0;
    border-radius: 6px;
  }
  .mega-submenu,
  .nav-dropdown.align-right .mega-submenu {
    margin: 6px 0 0;
    padding-left: 14px;
    background: #f7f8fa;
  }
}

/* Final top-level dropdown alignment fix:
   all desktop dropdowns open from the left edge of their own nav item. */
@media (min-width: 901px) {
  .nav-dropdown.align-right .mega-menu {
    left: 0;
    right: auto;
  }

  /* align-right is only a legacy marker now; flyouts still open to the right */
  .nav-dropdown.align-right .mega-submenu {
    order: initial;
    margin-left: 10px;
    margin-right: 0;
  }
}

/* Sticky desktop navigation: mirrors the live-site compact white header on scroll. */
.sticky-quote {
  display: none;
  white-space: nowrap;
}

@media (min-width: 821px) {
  .site-header {
    width: 100%;
  }

  .site-header.is-sticky {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1200;
    background: #fff;
    color: #111827;
    box-shadow: 0 5px 24px rgba(5, 29, 60, .14);
    animation: stickyNavIn .18s ease-out;
  }

  .site-header.is-sticky .utility-bar {
    display: none;
  }

  .site-header.is-sticky .main-nav-wrap {
    background: #fff;
    color: #111827;
    box-shadow: none;
  }

  .site-header.is-sticky .main-nav {
    min-height: 84px;
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;
    padding: 0;
    gap: 34px;
  }

  .site-header.is-sticky .brand {
    width: 205px;
    min-width: 205px;
    margin-right: auto;
  }

  .site-header.is-sticky .primary-nav {
    flex: 0 1 auto;
    align-self: stretch;
    gap: 31px;
    padding: 0;
    background: transparent;
    color: #151515;
    border-radius: 0;
    font-size: 14px;
  }

  .site-header.is-sticky .primary-nav .nav-link,
  .site-header.is-sticky .primary-nav .nav-dropdown-toggle {
    color: #151515;
    padding: 28px 0 21px;
    border-bottom-color: transparent;
  }

  .site-header.is-sticky .primary-nav .nav-link:hover,
  .site-header.is-sticky .primary-nav .nav-link:focus-visible,
  .site-header.is-sticky .primary-nav .nav-dropdown-toggle:hover,
  .site-header.is-sticky .primary-nav .nav-dropdown-toggle:focus-visible,
  .site-header.is-sticky .primary-nav .nav-dropdown-toggle[aria-expanded="true"] {
    border-bottom-color: var(--red);
  }

  .site-header.is-sticky .sticky-quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 4px;
    background: var(--red);
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    box-shadow: 0 7px 18px rgba(223,23,29,.16);
  }

  .site-header.is-sticky .sticky-quote:hover,
  .site-header.is-sticky .sticky-quote:focus-visible {
    background: var(--red-dark);
    outline: none;
  }

  .site-header.is-sticky .mega-menu {
    top: calc(100% + 10px);
  }

  @keyframes stickyNavIn {
    from { transform: translateY(-100%); opacity: .75; }
    to { transform: translateY(0); opacity: 1; }
  }
}

@media (max-width: 1180px) and (min-width: 821px) {
  .site-header.is-sticky .main-nav {
    width: calc(100% - 30px);
    gap: 22px;
  }
  .site-header.is-sticky .brand {
    width: 170px;
    min-width: 170px;
  }
  .site-header.is-sticky .primary-nav {
    gap: 20px;
    font-size: 13px;
  }
  .site-header.is-sticky .sticky-quote {
    padding-inline: 14px;
    font-size: 13px;
  }
}

/* Logo state handling: white on navy header/footer, black on white sticky nav. */
.brand .logo-normal { display: block; }
.brand .logo-sticky { display: none; }
.site-header.is-sticky .brand .logo-normal { display: none; }
.site-header.is-sticky .brand .logo-sticky { display: block; }
.brand img, .brand-footer img { width: 100%; height: auto; object-fit: contain; }

/* Header refinements: phone icon + larger normal header logo only. */
.utility-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.utility-phone::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.46 15.46 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.46 15.46 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.61 21 3 13.39 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.58a1 1 0 0 1-.25 1.01l-2.2 2.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Larger white logo in the normal header; sticky logo size remains unchanged. */
.site-header:not(.is-sticky) .brand {
  width: 220px;
  min-width: 220px;
}

@media (max-width: 1180px) and (min-width: 821px) {
  .site-header:not(.is-sticky) .brand {
    width: 195px;
    min-width: 195px;
  }
}


/* Live-site inspired footer */
.live-footer {
  background: #071a34;
  color: #fff;
  padding-top: 0;
  position: relative;
  overflow: hidden;
}
.live-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 82px 0;
  pointer-events: none;
  background: linear-gradient(153deg, transparent 0 50%, rgba(28,72,120,.16) 50.2% 100%);
}
.live-footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.65fr 1.15fr 1.05fr 1fr 1.12fr;
  gap: clamp(30px, 4vw, 72px);
  padding-top: 56px;
  padding-bottom: 48px;
  align-items: start;
}
.live-footer h2 {
  margin: 0 0 12px;
  color: #ffbe17;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}
.live-footer-contact-col h2 span { display: block; }
.live-footer-address {
  margin: 12px 0 28px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-style: normal;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.footer-map-icon {
  color: #fff;
  font-size: 10px;
  line-height: 1.6;
  position: relative;
}
.footer-map-icon::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 6px solid #fff;
  left: 2px;
  top: 8px;
}
.live-footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 26px;
}
.live-footer-contact-list > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
}
.live-footer-contact-list strong { color: #ffbe17; }
.live-footer-contact-list span { display: flex; flex-direction: column; gap: 3px; }
.live-footer a { color: #fff; text-decoration: none; }
.live-footer a:hover { color: #ffbe17; text-decoration: underline; }
.live-footer-socials { display: flex; gap: 18px; align-items: center; }
.live-footer-socials a {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #173556;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}
.live-footer-socials a:hover { color: #d91520; text-decoration: none; }
.live-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.live-footer-col a { font-size: 13px; line-height: 1.35; }
.live-footer-subhead { margin-top: 22px !important; margin-bottom: 6px !important; color: #ffbe17 !important; }
.live-footer-bottom { position: relative; z-index: 1; background: #a70911; min-height: 82px; }
.live-footer-bottom-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.live-footer-legal { display: flex; align-items: center; gap: 15px; color: #ffbe17; font-size: 12px; }
.live-footer-legal a { color: #fff; }
.live-footer-divider { width: 1px; height: 24px; background: rgba(255,255,255,.85); display: inline-block; }
.live-footer-made-usa { width: 102px; height: auto; object-fit: contain; }

@media (max-width: 1200px) {
  .live-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}
@media (max-width: 820px) {
  .live-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px; }
}
@media (max-width: 560px) {
  .live-footer-grid { grid-template-columns: 1fr; padding-top: 38px; }
  .live-footer-bottom-inner { align-items: flex-start; flex-direction: column; justify-content: center; padding: 18px 0; }
  .live-footer-legal { align-items: flex-start; flex-wrap: wrap; }
  .live-footer-divider { display: none; }
}

/* Split industrial banner hero - Stud-E inspired, adapted for Securall */
.hero-shell {
  background: #061d3b;
}
.hero-split-banner {
  background: #061d3b !important;
  color: #fff;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.hero-banner-grid {
  display: grid;
  grid-template-columns: minmax(430px, 44%) minmax(0, 56%);
  min-height: 470px;
  max-width: 1920px;
  margin: 0 auto;
}
.hero-banner-copy {
  background: #17293a;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hero-banner-kicker {
  min-height: 112px;
  display: flex;
  align-items: center;
  padding: 24px clamp(36px, 5vw, 90px);
  color: #fff;
  font-size: clamp(18px, 1.45vw, 28px);
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.hero-banner-panel {
  flex: 1;
  background: #c5122e;
  padding: clamp(42px, 4.3vw, 74px) clamp(36px, 5vw, 90px) 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-banner-panel .eyebrow {
  color: #ffd21a;
  margin-bottom: 14px;
}
.hero-banner-panel h1 {
  color: #fff;
  font-size: clamp(43px, 4.3vw, 72px);
  line-height: .98;
  letter-spacing: -.045em;
  margin: 0 0 22px;
  max-width: 760px;
}
.hero-banner-panel p {
  color: #fff;
  font-size: clamp(17px, 1.25vw, 21px);
  line-height: 1.55;
  max-width: 760px;
  margin: 0 0 28px;
}
.hero-banner-panel .hero-actions { margin: 0; }
.hero-btn-light {
  background: #fff;
  color: #081f3d;
  border: 1px solid #fff;
}
.hero-btn-light:hover { background: #f2f5f8; }
.hero-btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.78);
}
.hero-btn-outline:hover { background: rgba(255,255,255,.1); }
.hero-banner-media {
  position: relative;
  overflow: hidden;
  min-height: 470px;
  background: #d9e1e8;
}
.hero-banner-media img {
  width: 100%;
  height: 100%;
  min-height: 470px;
  display: block;
  object-fit: cover;
  object-position: center;
}
.hero-media-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 19px 34px;
  background: linear-gradient(90deg, rgba(5,29,60,.94), rgba(5,29,60,.72));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hero-media-caption strong { font-size: 17px; }
.hero-media-caption span { color: #dbe6f2; font-size: 14px; text-align: right; }
.hero-trust-bar {
  background: #071b34;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero-trust-bar .container {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}
.hero-trust-bar span {
  font-size: 13px;
  font-weight: 700;
  color: #e8eef5;
}
.hero-trust-bar span::before {
  content: "✓";
  color: #ffd21a;
  margin-right: 8px;
}

@media (max-width: 1020px) {
  .hero-banner-grid { grid-template-columns: 1fr; }
  .hero-banner-kicker { min-height: 76px; padding: 18px 30px; }
  .hero-banner-panel { padding: 44px 30px; }
  .hero-banner-media, .hero-banner-media img { min-height: 380px; height: 380px; }
}
@media (max-width: 640px) {
  .hero-banner-panel h1 { font-size: 42px; }
  .hero-banner-panel p { font-size: 16px; }
  .hero-banner-panel .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-banner-panel .btn { width: 100%; justify-content: center; }
  .hero-banner-media, .hero-banner-media img { min-height: 300px; height: 300px; }
  .hero-media-caption { padding: 14px 18px; align-items: flex-start; flex-direction: column; gap: 4px; }
  .hero-media-caption span { text-align: left; }
  .hero-trust-bar .container { gap: 14px 22px; padding-top: 14px; padding-bottom: 14px; }
}

/* Hero color rework: keep split layout; colors sampled to harmonize with the fire/industrial image */
.hero-banner-copy {
  background: #1b2025;
}
.hero-banner-kicker {
  background: #1b2025;
}
.hero-banner-panel {
  background: #8f281c;
}

/* Fiery yellow kicker sampled from the warm hero palette */
.hero-banner-kicker {
  background: #f6b51b;
  color: #111820;
}

/* Match primary navigation background to the burnt-red hero panel */
.primary-nav {
  background: #8f281c;
}
@media (max-width: 1020px) {
  .primary-nav {
    background: #8f281c;
  }
}

/* ============================================================
   Reference-inspired header + hero refresh
   Keeps the existing menu labels, destinations and click menus.
   ============================================================ */

/* Header becomes one clean navy band like the supplied reference. */
.hero-shell { background: #061d3b; }
.site-header:not(.is-sticky) {
  background: #061d3b;
  color: #fff;
}
.site-header:not(.is-sticky) .utility-bar,
.site-header:not(.is-sticky) .main-nav-wrap {
  background: #061d3b !important;
}
.site-header:not(.is-sticky) .utility-bar {
  min-height: 34px;
  border-bottom: 0;
}
.site-header:not(.is-sticky) .utility-inner {
  min-height: 34px;
  padding-top: 4px;
  padding-bottom: 2px;
}
.site-header:not(.is-sticky) .utility-phone {
  margin-left: auto;
  order: 2;
  font-size: 12px;
  color: #fff;
}
.site-header:not(.is-sticky) .utility-nav {
  order: 1;
  margin-left: auto;
  gap: 18px;
}
.site-header:not(.is-sticky) .utility-nav a {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.88);
}
.site-header:not(.is-sticky) .utility-nav .utility-button {
  order: 20;
  background: #b52322;
  border-color: #b52322;
  color: #fff;
  border-radius: 0;
  padding: 9px 16px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.site-header:not(.is-sticky) .main-nav-wrap {
  border: 0;
}
.site-header:not(.is-sticky) .main-nav {
  min-height: 76px;
  display: grid;
  grid-template-columns: 210px 1fr;
  align-items: end;
  gap: 32px;
  padding-bottom: 14px;
}
.site-header:not(.is-sticky) .brand {
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  align-self: center;
  gap: 2px;
}
.site-header:not(.is-sticky) .brand img.logo-normal {
  width: 172px;
  height: auto;
  object-fit: contain;
}
.brand-tagline {
  display: block;
  margin-top: -2px;
  color: rgba(255,255,255,.78);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .095em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-header.is-sticky .brand-tagline { display: none; }
.site-header:not(.is-sticky) .primary-nav {
  position: relative;
  background: transparent !important;
  border-radius: 0;
  min-height: auto;
  padding: 0;
  gap: clamp(18px, 2.3vw, 36px);
  justify-content: flex-end;
  align-items: center;
  box-shadow: none;
}
.site-header:not(.is-sticky) .primary-nav .nav-link,
.site-header:not(.is-sticky) .primary-nav .nav-dropdown-toggle {
  color: #fff;
  padding: 12px 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: .015em;
}
.site-header:not(.is-sticky) .primary-nav .nav-link:hover,
.site-header:not(.is-sticky) .primary-nav .nav-link:focus-visible,
.site-header:not(.is-sticky) .primary-nav .nav-dropdown-toggle:hover,
.site-header:not(.is-sticky) .primary-nav .nav-dropdown-toggle:focus-visible,
.site-header:not(.is-sticky) .primary-nav .nav-dropdown-toggle[aria-expanded="true"] {
  color: #f7b318;
  background: transparent;
}

/* Full-image hero with dark left gradient, matching the provided layout. */
.hero-reference {
  position: relative;
  isolation: isolate;
  min-height: 555px;
  padding: 0;
  background:
    #0a2036 url('/securall_website_homepage/static/src/img/home_8/explosion_proof_hazmat_building.webp') center center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.hero-reference-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(3,22,39,.97) 0%,
      rgba(3,22,39,.91) 26%,
      rgba(3,22,39,.72) 43%,
      rgba(3,22,39,.23) 62%,
      rgba(3,22,39,.03) 100%),
    linear-gradient(0deg, rgba(4,24,43,.2), rgba(4,24,43,.2));
}
.hero-reference-inner {
  min-height: 490px;
  display: flex;
  align-items: center;
  padding-top: 46px;
  padding-bottom: 42px;
}
.hero-reference-copy {
  width: min(600px, 51vw);
}
.hero-reference-copy .eyebrow {
  margin-bottom: 15px;
  color: #d8342f;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.hero-reference-copy h1 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(46px, 4.15vw, 72px);
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
  max-width: 700px;
}
.hero-reference-copy h1 span { display: block; }
.hero-reference-copy h1 em {
  color: #d52b27;
  font-style: normal;
}
.hero-reference-copy p {
  max-width: 530px;
  margin: 0 0 24px;
  color: rgba(255,255,255,.88);
  font-size: 16px;
  line-height: 1.55;
}
.hero-reference .hero-actions {
  display: flex;
  gap: 14px;
  margin: 0;
}
.hero-reference .btn {
  min-height: 46px;
  border-radius: 0;
  padding: 0 22px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.hero-primary-action {
  background: #cc2725;
  border: 1px solid #cc2725;
  color: #fff;
}
.hero-primary-action:hover { background: #a91f1d; }
.hero-secondary-action {
  background: rgba(3,22,39,.28);
  border: 1px solid rgba(255,255,255,.62);
  color: #fff;
}
.hero-secondary-action:hover { background: rgba(255,255,255,.1); }

.hero-proof-strip {
  background: rgba(4,29,50,.96);
  border-top: 1px solid rgba(255,255,255,.08);
}
.hero-proof-grid {
  min-height: 104px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.hero-proof-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px 26px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.hero-proof-item:first-child { padding-left: 0; }
.hero-proof-item:last-child { border-right: 0; }
.proof-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.85);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}
.hero-proof-item strong,
.hero-proof-item span { display: block; }
.hero-proof-item strong {
  margin-bottom: 4px;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.hero-proof-item span {
  color: rgba(255,255,255,.68);
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 1180px) {
  .site-header:not(.is-sticky) .main-nav {
    grid-template-columns: 180px 1fr;
    gap: 20px;
  }
  .site-header:not(.is-sticky) .brand { width: 175px; }
  .site-header:not(.is-sticky) .brand img.logo-normal { width: 155px; }
  .site-header:not(.is-sticky) .primary-nav { gap: 16px; }
  .site-header:not(.is-sticky) .primary-nav .nav-link,
  .site-header:not(.is-sticky) .primary-nav .nav-dropdown-toggle { font-size: 11px; }
  .hero-reference-copy { width: min(590px, 58vw); }
}

@media (max-width: 1020px) {
  .site-header:not(.is-sticky) .utility-nav a:not(.utility-button) { display: none; }
  .site-header:not(.is-sticky) .utility-phone { margin-left: 0; }
  .site-header:not(.is-sticky) .main-nav {
    display: flex;
    align-items: center;
    min-height: 70px;
    padding-bottom: 0;
  }
  .site-header:not(.is-sticky) .brand { margin-right: auto; }
  .site-header:not(.is-sticky) .primary-nav {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 14px 24px 18px;
    background: #061d3b !important;
  }
  .site-header:not(.is-sticky) .primary-nav.open { display: flex; }
  .site-header:not(.is-sticky) .primary-nav .nav-link,
  .site-header:not(.is-sticky) .primary-nav .nav-dropdown-toggle {
    width: 100%;
    padding: 12px 0;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .hero-reference { min-height: auto; background-position: 62% center; }
  .hero-reference-overlay {
    background: linear-gradient(90deg, rgba(3,22,39,.96) 0%, rgba(3,22,39,.86) 55%, rgba(3,22,39,.45) 100%);
  }
  .hero-reference-inner { min-height: 470px; }
  .hero-reference-copy { width: min(620px, 75vw); }
  .hero-proof-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-proof-item:nth-child(2) { border-right: 0; }
  .hero-proof-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
}

@media (max-width: 640px) {
  .site-header:not(.is-sticky) .utility-nav .utility-button { display: none; }
  .site-header:not(.is-sticky) .brand img.logo-normal { width: 140px; }
  .brand-tagline { font-size: 7px; }
  .hero-reference { background-position: 66% center; }
  .hero-reference-overlay {
    background: linear-gradient(90deg, rgba(3,22,39,.97), rgba(3,22,39,.82));
  }
  .hero-reference-inner { min-height: 500px; padding-top: 46px; padding-bottom: 46px; }
  .hero-reference-copy { width: 100%; }
  .hero-reference-copy h1 { font-size: 42px; }
  .hero-reference-copy p { font-size: 15px; }
  .hero-reference .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-reference .btn { width: 100%; justify-content: center; }
  .hero-proof-grid { grid-template-columns: 1fr; }
  .hero-proof-item,
  .hero-proof-item:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding-left: 0;
  }
  .hero-proof-item:last-child { border-bottom: 0; }
}

/* ============================================================
   Fix: show the fiery hero image and center the desktop menu.
   ============================================================ */
@media (min-width: 821px) {
  /* Keep the logo on the left while the primary menu is centered. */
  .site-header:not(.is-sticky) .main-nav {
    grid-template-columns: 220px minmax(0, 1fr) 220px;
    align-items: center;
    padding-bottom: 12px;
  }

  .site-header:not(.is-sticky) .primary-nav {
    grid-column: 2;
    width: 100%;
    justify-content: center;
    gap: clamp(18px, 2vw, 34px);
  }

  /* The older .hero-shell .hero rule is more specific and was
     making the new hero transparent. Restore the intended image. */
  .hero-shell .hero-reference {
    background-image: url('/securall_website_homepage/static/src/img/home_8/explosion_proof_hazmat_building.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #0a2036;
  }
}

/* ============================================================
   Hero composition refinement - preserve more of the building image
   and match the supplied reference proportions more closely.
   ============================================================ */
@media (min-width: 1021px) {
  .hero-reference {
    min-height: 500px;
    background-color: #071f38;
    background-image: url('/securall_website_homepage/static/src/img/home_8/explosion_proof_hazmat_building.webp');
    background-repeat: no-repeat;
    background-size: 72% auto;
    background-position: right 58%;
  }

  .hero-reference-overlay {
    background:
      linear-gradient(90deg,
        rgba(3,22,39,.99) 0%,
        rgba(3,22,39,.98) 24%,
        rgba(3,22,39,.88) 34%,
        rgba(3,22,39,.58) 44%,
        rgba(3,22,39,.16) 58%,
        rgba(3,22,39,0) 72%),
      linear-gradient(0deg, rgba(4,24,43,.08), rgba(4,24,43,.08));
  }

  .hero-reference-inner {
    min-height: 420px;
    padding-top: 34px;
    padding-bottom: 30px;
  }

  .hero-reference-copy {
    width: 56%;
    max-width: 780px;
  }

  .hero-reference-copy h1 {
    max-width: 780px;
    font-size: clamp(44px, 3.15vw, 61px);
    line-height: .98;
    letter-spacing: -.025em;
    margin-bottom: 16px;
  }

  .hero-reference-copy h1 span {
    display: block;
    white-space: nowrap;
  }

  .hero-reference-copy p {
    max-width: 585px;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .hero-reference-copy .eyebrow {
    margin-bottom: 13px;
  }

  .hero-proof-strip {
    position: relative;
  }
}

@media (min-width: 1500px) {
  .hero-reference {
    background-size: 68% auto;
    background-position: right 58%;
  }
  .hero-reference-copy {
    width: 54%;
  }
}

/* ============================================================
   Hero image full-view correction
   The earlier .hero-shell .hero-reference rule had higher specificity
   and kept background-size: cover. Keep the complete source image
   visible on desktop, anchored to the right like the reference.
   ============================================================ */
@media (min-width: 1021px) {
  .hero-shell .hero-reference {
    min-height: 500px;
    background-color: #071f38;
    background-image: url('/securall_website_homepage/static/src/img/home_8/explosion_proof_hazmat_building.webp');
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right center;
  }

  .hero-reference-overlay {
    background:
      linear-gradient(90deg,
        rgba(3,22,39,1) 0%,
        rgba(3,22,39,.99) 25%,
        rgba(3,22,39,.93) 36%,
        rgba(3,22,39,.72) 46%,
        rgba(3,22,39,.34) 56%,
        rgba(3,22,39,.08) 66%,
        rgba(3,22,39,0) 76%),
      linear-gradient(0deg, rgba(4,24,43,.06), rgba(4,24,43,.06));
  }
}

@media (min-width: 1500px) {
  .hero-shell .hero-reference {
    background-size: auto 100%;
    background-position: right center;
  }
}

/* ============================================================
   Hero blend + larger composition
   Keep the fiery image on the right, fade it naturally into the
   navy copy area, and give the hero more vertical presence.
   ============================================================ */
@media (min-width: 1021px) {
  .hero-shell .hero-reference {
    position: relative;
    isolation: isolate;
    min-height: 0;
    background: #061d35 !important;
    overflow: hidden;
  }

  /* Image layer: slightly enlarged, but still preserves almost all
     of the source image. Restrict it to the visual hero above the
     proof strip so the scale is not distorted by the lower bar. */
  .hero-shell .hero-reference::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 104px;
    left: 0;
    background-image: url('/securall_website_homepage/static/src/img/home_8/explosion_proof_hazmat_building.webp');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 112%;
  }

  /* True blend layer. The previous overlay sat behind the section
     background because of its negative z-index, which caused the
     visible hard edge. This overlay now sits above the image. */
  .hero-reference-overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 104px;
    left: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg,
        rgba(3,22,39,1) 0%,
        rgba(3,22,39,.995) 24%,
        rgba(3,22,39,.97) 34%,
        rgba(3,22,39,.90) 43%,
        rgba(3,22,39,.72) 51%,
        rgba(3,22,39,.48) 58%,
        rgba(3,22,39,.22) 66%,
        rgba(3,22,39,.07) 74%,
        rgba(3,22,39,0) 84%);
  }

  .hero-reference-inner {
    position: relative;
    z-index: 2;
    min-height: 560px;
    padding-top: 56px;
    padding-bottom: 48px;
  }

  .hero-reference-copy {
    width: 55%;
    max-width: 760px;
  }

  .hero-reference-copy h1 {
    font-size: clamp(46px, 3.45vw, 66px);
    max-width: 760px;
  }

  .hero-reference-copy p {
    max-width: 570px;
    font-size: 16px;
  }

  .hero-proof-strip {
    position: relative;
    z-index: 3;
    background: #06233d;
  }
}

@media (min-width: 1500px) {
  .hero-shell .hero-reference::before {
    background-size: auto 115%;
  }
  .hero-reference-inner {
    min-height: 585px;
  }
  .hero-reference-copy h1 {
    font-size: 64px;
  }
}

/* ============================================================
   Hero vertical centering refinement
   Center the complete copy block within the visual hero while
   preserving the current image blend and proof strip.
   ============================================================ */
@media (min-width: 1021px) {
  .hero-reference-inner {
    display: flex;
    align-items: center;
    min-height: 560px;
    padding-top: 48px;
    padding-bottom: 48px;
    box-sizing: border-box;
  }

  .hero-reference-copy {
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media (min-width: 1500px) {
  .hero-reference-inner {
    min-height: 585px;
    padding-top: 52px;
    padding-bottom: 52px;
  }
}

/* ============================================================
   Full-width hero refinement
   Use the fiery scene across the complete browser width while
   retaining the navy-to-image blend behind the hero copy.
   ============================================================ */
@media (min-width: 1021px) {
  .hero-shell .hero-reference::before {
    left: 0;
    right: 0;
    background-size: cover;
    background-position: center 57%;
  }

  .hero-reference-overlay {
    left: 0;
    right: 0;
    background:
      linear-gradient(90deg,
        rgba(3,22,39,.98) 0%,
        rgba(3,22,39,.96) 18%,
        rgba(3,22,39,.90) 29%,
        rgba(3,22,39,.76) 38%,
        rgba(3,22,39,.52) 47%,
        rgba(3,22,39,.25) 57%,
        rgba(3,22,39,.08) 67%,
        rgba(3,22,39,0) 78%);
  }

  .hero-reference-inner {
    width: min(1440px, calc(100% - 48px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   Hero composition correction - full image, wider centered layout
   Keep the full source image visible (no bottom crop), let it occupy
   more of the hero, and reduce the unused left gutter on wide screens.
   ============================================================ */
@media (min-width: 1021px) {
  .hero-shell .hero-reference::before {
    top: 0;
    right: 0;
    bottom: 104px;
    left: 0;
    background-size: auto 100%;
    background-position: right center;
  }

  .hero-reference-overlay {
    top: 0;
    right: 0;
    bottom: 104px;
    left: 0;
    background:
      linear-gradient(90deg,
        rgba(3,22,39,.99) 0%,
        rgba(3,22,39,.98) 17%,
        rgba(3,22,39,.94) 27%,
        rgba(3,22,39,.83) 36%,
        rgba(3,22,39,.63) 44%,
        rgba(3,22,39,.38) 52%,
        rgba(3,22,39,.17) 60%,
        rgba(3,22,39,.05) 68%,
        rgba(3,22,39,0) 76%);
  }

  .hero-reference-inner {
    width: min(1580px, calc(100% - 80px));
    max-width: none;
    min-height: 650px;
    margin-inline: auto;
    padding-top: 54px;
    padding-bottom: 54px;
  }

  .hero-reference-copy {
    width: 49%;
    max-width: 700px;
  }

  .hero-reference-copy h1 {
    max-width: 700px;
  }
}

@media (min-width: 1500px) {
  .hero-reference-inner {
    min-height: 680px;
  }
}

/* ============================================================
   Hero left-spacing correction
   Pull the hero copy toward the browser edge on wide screens while
   keeping the full-height fiery image and existing blend intact.
   ============================================================ */
@media (min-width: 1021px) {
  .hero-reference-inner {
    width: 100%;
    max-width: none;
    min-height: 610px;
    margin: 0;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: clamp(56px, 6vw, 112px);
    padding-right: clamp(32px, 4vw, 72px);
  }

  .hero-reference-copy {
    width: 52%;
    max-width: 760px;
  }

  .hero-reference-copy h1 {
    max-width: 760px;
  }
}

@media (min-width: 1500px) {
  .hero-reference-inner {
    min-height: 630px;
  }
}

/* ============================================================
   Final approved header + hero refinements
   ============================================================ */
@media (min-width: 1021px) {
  /* Utility links: phone on the far left, links + quote on the right. */
  .site-header:not(.is-sticky) .utility-inner {
    width: min(1500px, calc(100% - 96px));
    max-width: none;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 5px 0 3px;
  }

  .site-header:not(.is-sticky) .utility-phone {
    order: 1;
    margin: 0;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 800;
  }

  .site-header:not(.is-sticky) .utility-nav {
    order: 2;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
  }

  .site-header:not(.is-sticky) .utility-nav a {
    font-size: 12px;
  }

  .site-header:not(.is-sticky) .utility-nav .utility-button {
    padding: 10px 17px;
  }

  /* Larger clean logo, no small tagline underneath. */
  .site-header:not(.is-sticky) .main-nav {
    width: min(1500px, calc(100% - 96px));
    max-width: none;
    margin-inline: auto;
    min-height: 92px;
    padding: 0;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 250px;
    align-items: center;
    gap: 20px;
  }

  .site-header:not(.is-sticky) .brand {
    grid-column: 1;
    width: 235px;
    align-items: flex-start;
  }

  .site-header:not(.is-sticky) .brand img.logo-normal {
    width: 220px;
    max-height: 78px;
  }

  .brand-tagline { display: none !important; }

  /* Keep the product navigation centered below the utility row. */
  .site-header:not(.is-sticky) .primary-nav {
    grid-column: 2 / 4;
    justify-self: center;
    justify-content: center;
    width: auto;
    gap: clamp(20px, 2.15vw, 38px);
  }

  /* Down marker only for menus that actually have children. */
  .site-header:not(.is-sticky) .nav-dropdown-toggle::after {
    content: "⌄";
    display: inline-block;
    margin-left: 7px;
    font-size: .88em;
    line-height: 1;
    transform: translateY(-1px);
    transition: transform .18s ease;
  }

  .site-header:not(.is-sticky) .nav-dropdown-toggle[aria-expanded="true"]::after {
    transform: translateY(1px) rotate(180deg);
  }

  /* New hero heading block above the existing eyebrow. */
  .hero-kicker {
    margin: 0 0 14px;
    color: #f7b719;
    font-size: clamp(27px, 2vw, 36px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: .015em;
    text-transform: uppercase;
  }

  .hero-reference-copy .eyebrow {
    margin-bottom: 17px;
  }

  /* Short accent divider beneath the complete hero statement. */
  .hero-mini-divider {
    width: 92px;
    height: 4px;
    margin: 19px 0 20px;
    background: #e82929;
  }

  /* Productivity is red text only - no underline. */
  .hero-reference-copy h1 em {
    border: 0 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  .hero-reference-copy p {
    margin-top: 0;
  }
}

@media (max-width: 1020px) {
  .hero-kicker {
    margin-bottom: 10px;
    color: #f7b719;
    font-size: clamp(22px, 5vw, 30px);
    line-height: 1.08;
    font-weight: 900;
    text-transform: uppercase;
  }

  .hero-mini-divider {
    width: 72px;
    height: 4px;
    margin: 16px 0 18px;
    background: #e82929;
  }

  .brand-tagline { display: none !important; }

  .nav-dropdown-toggle::after {
    content: "⌄";
    margin-left: 7px;
  }
}

/* ============================================================
   Approved refinement: matched nav chevrons, larger kicker,
   and seamless hero image-to-navy blend.
   ============================================================ */
@media (min-width: 1021px) {
  /* Use the same chevron shape as the submenu arrows, simply rotated down. */
  .site-header:not(.is-sticky) .nav-dropdown-toggle::after,
  .site-header.is-sticky .nav-dropdown-toggle::after {
    content: "›" !important;
    display: inline-block;
    margin-left: 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.28em;
    font-weight: 400;
    line-height: .7;
    transform: translateY(-1px) rotate(90deg) !important;
    transform-origin: 50% 50%;
    transition: transform .18s ease;
  }

  .site-header:not(.is-sticky) .nav-dropdown-toggle[aria-expanded="true"]::after,
  .site-header.is-sticky .nav-dropdown-toggle[aria-expanded="true"]::after {
    transform: translateY(0) rotate(-90deg) !important;
  }

  /* Let the supporting heading carry the same visual scale as the hero statement. */
  .hero-kicker {
    font-size: clamp(46px, 3.45vw, 64px);
    line-height: 1.02;
    letter-spacing: -.018em;
    white-space: nowrap;
    margin-bottom: 16px;
  }

  .hero-reference-copy {
    width: 56%;
    max-width: 900px;
  }

  .hero-reference-copy h1 {
    max-width: 790px;
  }

  /*
     Two image layers remove the visible 'two boxes' seam:
     - ::after softly carries the same scene under the navy copy area.
     - ::before keeps the full-height, uncropped source scene crisp on the right.
  */
  .hero-shell .hero-reference::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 104px 0;
    pointer-events: none;
    background-image: url('/securall_website_homepage/static/src/img/home_8/explosion_proof_hazmat_building.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 54%;
    opacity: .34;
    filter: saturate(.92) brightness(.72);
  }

  .hero-shell .hero-reference::before {
    z-index: 1;
    background-size: auto 100% !important;
    background-position: right center !important;
  }

  .hero-reference-overlay {
    z-index: 2;
    background:
      linear-gradient(90deg,
        rgba(3,22,39,.995) 0%,
        rgba(3,22,39,.985) 16%,
        rgba(3,22,39,.95) 28%,
        rgba(3,22,39,.82) 39%,
        rgba(3,22,39,.62) 49%,
        rgba(3,22,39,.39) 58%,
        rgba(3,22,39,.19) 67%,
        rgba(3,22,39,.06) 75%,
        rgba(3,22,39,0) 84%) !important;
  }

  .hero-reference-inner {
    z-index: 3;
  }

  .hero-proof-strip {
    z-index: 4;
  }
}

@media (max-width: 1400px) and (min-width: 1021px) {
  .hero-kicker {
    font-size: clamp(40px, 3.5vw, 52px);
  }
  .hero-reference-copy {
    width: 58%;
  }
}

@media (max-width: 1020px) {
  .nav-dropdown-toggle::after {
    content: "›" !important;
    display: inline-block;
    margin-left: 7px;
    font-size: 1.25em;
    transform: rotate(90deg);
  }
  .nav-dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(-90deg);
  }
}

/* ============================================================
   Final hero blend correction - ONE image layer only.
   The same hero image spans the visual hero; the navy background
   fades over it from left to right. No duplicate/secondary BG image.
   ============================================================ */
@media (min-width: 1021px) {
  .hero-shell .hero-reference {
    position: relative;
    isolation: isolate;
    background: #061d35 !important;
    overflow: hidden;
  }

  /* One and only hero image layer. */
  .hero-shell .hero-reference::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 104px;
    left: 0;
    pointer-events: none;
    background-image: url('/securall_website_homepage/static/src/img/home_8/explosion_proof_hazmat_building.webp');
    background-repeat: no-repeat;
    background-size: cover !important;
    background-position: center 54% !important;
  }

  /* Disable the previous duplicate image layer completely. */
  .hero-shell .hero-reference::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* Navy layer sits ABOVE the SAME image and fades smoothly away. */
  .hero-reference-overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 104px;
    left: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
      #061d35 0%,
      rgba(6,29,53,.995) 13%,
      rgba(6,29,53,.98) 24%,
      rgba(6,29,53,.92) 34%,
      rgba(6,29,53,.78) 43%,
      rgba(6,29,53,.58) 51%,
      rgba(6,29,53,.36) 58%,
      rgba(6,29,53,.18) 64%,
      rgba(6,29,53,.07) 70%,
      rgba(6,29,53,0) 76%) !important;
  }

  .hero-reference-inner {
    position: relative;
    z-index: 2;
  }

  .hero-proof-strip {
    position: relative;
    z-index: 3;
  }
}

@media (max-width: 1020px) {
  .hero-shell .hero-reference::after {
    content: none !important;
    display: none !important;
  }
}

/* ============================================================
   Mobile hero image correction
   - Restore the explosion-proof building background on phones.
   - Show the plant/building photo directly before the hero description.
   ============================================================ */
.hero-mobile-support-image {
  display: none;
}

@media (max-width: 820px) {
  /* Override the older .hero-shell .hero { background: transparent; }
     rule, which was hiding the new hero image on mobile. */
  .hero-shell .hero-reference {
    background-color: #071f38;
    background-image: url('/securall_website_homepage/static/src/img/home_8/explosion_proof_hazmat_building.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 68% center;
  }
}

@media (max-width: 640px) {
  .hero-shell .hero-reference {
    background-position: 72% center;
  }

  .hero-reference-overlay {
    background:
      linear-gradient(90deg,
        rgba(3,22,39,.96) 0%,
        rgba(3,22,39,.90) 48%,
        rgba(3,22,39,.70) 72%,
        rgba(3,22,39,.52) 100%),
      linear-gradient(0deg, rgba(4,24,43,.10), rgba(4,24,43,.10));
  }

  .hero-mobile-support-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 190px;
    object-fit: cover;
    object-position: center;
    margin: 0 0 16px;
    border: 1px solid rgba(255,255,255,.12);
  }
}

/* ============================================================
   Mobile hero background correction
   Keep the standalone plant image before the description, but do
   not use explosion_proof_hazmat_building.webp as a mobile background.
   Desktop/tablet hero behavior above 820px remains unchanged.
   ============================================================ */
@media (max-width: 820px) {
  .hero-shell .hero-reference {
    background: #071f38 !important;
    background-image: none !important;
  }

  .hero-shell .hero-reference::before,
  .hero-shell .hero-reference::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  .hero-reference-overlay {
    background: transparent !important;
  }
}

/* Hero proof strip brand logos - high contrast on navy */
.proof-icon {
  border: 0;
  width: 58px;
  height: 48px;
  padding: 5px 6px;
  box-sizing: border-box;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.proof-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hero-proof-item { grid-template-columns: 62px 1fr; }

@media (max-width: 560px) {
  .proof-icon { width: 54px; height: 44px; }
  .hero-proof-item { grid-template-columns: 58px 1fr; }
}

/* Match OSHA and FM visual height to NFPA / USA flag */
.hero-proof-item:nth-child(1) .proof-icon img {
  width: 100%;
  height: 100%;
  transform: scale(1.32);
  transform-origin: center;
}
.hero-proof-item:nth-child(3) .proof-icon img {
  width: 100%;
  height: 100%;
  transform: scale(1.24);
  transform-origin: center;
}
@media (max-width: 560px) {
  .hero-proof-item:nth-child(1) .proof-icon img { transform: scale(1.28); }
  .hero-proof-item:nth-child(3) .proof-icon img { transform: scale(1.20); }
}

/* Bottom Why Securall section: long-form compliance copy */
.why-compliance-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding: 28px 34px;
}
.why-compliance-copy p {
  margin: 0;
  color: #061d3b;
  font-size: 17px;
  line-height: 1.55;
}
@media (max-width: 820px) {
  .why-compliance-copy { padding: 24px 0; gap: 20px; }
  .why-compliance-copy p { font-size: 15px; line-height: 1.6; }
}


/* Safety cabinet category carousel */
.family-carousel {
  position: relative;
  padding: 0 28px;
}
.family-carousel-viewport {
  overflow: hidden;
  padding: 4px 0 8px;
  scroll-behavior: smooth;
}
.family-carousel-track.family-grid-5 {
  display: flex;
  gap: 16px;
  transition: none;
}
.family-carousel-track.family-grid-5 .family-card {
  flex: 0 0 calc((100% - 64px) / 5);
  min-width: 0;
}
.family-carousel-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 1px solid #b9141e;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 22px rgba(181, 20, 30, .18);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.family-carousel-arrow:hover {
  background: #b9141e;
  transform: translateY(-50%) scale(1.04);
}
.family-carousel-arrow span {
  display: block;
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  margin-top: -3px;
}
.family-carousel-prev { left: 0; }
.family-carousel-next { right: 0; }
.family-carousel-arrow:disabled {
  opacity: .28;
  cursor: default;
  transform: translateY(-50%);
}
.family-carousel-track .family-card img {
  background: transparent;
}

@media (max-width: 1180px) {
  .family-carousel-track.family-grid-5 .family-card {
    flex-basis: calc((100% - 32px) / 3);
  }
}
@media (max-width: 900px) {
  .family-carousel { padding-inline: 24px; }
  .family-carousel-track.family-grid-5 .family-card {
    flex-basis: calc((100% - 16px) / 2);
  }
  .family-carousel-arrow { width: 44px; height: 44px; }
}
@media (max-width: 560px) {
  .family-carousel { padding-inline: 20px; }
  .family-carousel-track.family-grid-5 .family-card {
    flex-basis: 100%;
  }
  .family-carousel-arrow {
    width: 40px;
    height: 40px;
  }
  .family-carousel-arrow span { font-size: 29px; }
}
\n\n/* Enhanced building showcase: visual depth, stronger hierarchy and interactive cues */
.building-solutions { position: relative; overflow: hidden; }

.building-main-card { box-shadow: 0 22px 55px rgba(0,0,0,.22); border-color: rgba(255,255,255,.24); }
.building-main-card::after { content:""; position:absolute; inset:0 0 72px; z-index:2; pointer-events:none; background:linear-gradient(180deg,rgba(3,21,44,.14),transparent 28%,transparent 65%,rgba(3,21,44,.25)); }
.building-main-card .building-slide { transition: opacity .65s ease, visibility .65s ease, transform 5s ease; transform:scale(1.015); }
.building-main-card .building-slide.is-active { transform:scale(1.045); }
.building-main-label { z-index:5; box-shadow:0 -8px 22px rgba(0,0,0,.08); }
.building-main-label > div { display:flex; flex-direction:column; gap:2px; }
.building-main-label small { color:#e31d2b; font-size:9px; font-weight:900; letter-spacing:.09em; }
.building-slider-arrow { position:absolute; z-index:6; top:calc(50% - 36px); width:46px; height:46px; border:1px solid rgba(255,255,255,.5); background:rgba(4,28,57,.78); color:#fff; font-size:32px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background .2s ease, transform .2s ease, border-color .2s ease; backdrop-filter:blur(6px); }
.building-slider-prev { left:16px; } .building-slider-next { right:16px; }
.building-slider-arrow:hover,.building-slider-arrow:focus-visible { background:#e31d2b; border-color:#e31d2b; transform:scale(1.06); outline:none; }
.building-slider-dots { margin-top:16px; }
.building-slider-dot { width:9px; height:9px; opacity:.78; }
.building-slider-dot.is-active { width:25px; border-radius:10px; opacity:1; }
.building-type-card { position:relative; border-radius:8px; box-shadow:0 10px 25px rgba(0,0,0,.10); }
.building-type-card::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#ffd21a; transform:scaleY(0); transform-origin:bottom; transition:transform .25s ease; }
.building-type-card:hover::after { transform:scaleY(1); }
.building-type-image img { transition:transform .45s ease, filter .3s ease; }
.building-type-card:hover .building-type-image img { transform:scale(1.055); filter:brightness(1.06); }
.building-type-copy b { color:#ffd21a; transition:transform .2s ease; }
.building-type-card:hover .building-type-copy b { transform:translateX(4px); }
.building-benefits { gap:12px; border:0; margin-top:30px; }
.building-benefits article { position:relative; border:1px solid rgba(255,255,255,.14) !important; background:rgba(255,255,255,.045); border-radius:7px; padding:18px; transition:transform .2s ease, background .2s ease, border-color .2s ease; }
.building-benefits article:hover { transform:translateY(-3px); background:rgba(255,255,255,.075); border-color:rgba(255,210,26,.42) !important; }
.benefit-icon { background:rgba(255,210,26,.06); box-shadow:inset 0 0 0 1px rgba(255,210,26,.08); }
@media(max-width:800px){ .building-slider-arrow{width:40px;height:40px;font-size:27px}.building-slider-prev{left:10px}.building-slider-next{right:10px} }
@media(max-width:560px){ .building-main-card::after{inset:0 0 92px}.building-slider-arrow{top:42%;width:36px;height:36px}.building-benefits{gap:8px} }

/* Building-slider corner refinement */
.building-main-card {
  /* Square top-left + bottom-right; retain subtle radius on other two corners */
  border-radius: 0 10px 0 10px;
}


/* Header typography refinement */
.primary-nav > .nav-link,
.primary-nav > .nav-dropdown > .nav-dropdown-toggle {
  text-transform: none;
}
.site-header.is-sticky .primary-nav .nav-link,
.site-header.is-sticky .primary-nav .nav-dropdown-toggle {
  text-transform: none;
}

/* Parent navigation sizing: keep top-level menu visually stronger than dropdown items */
@media (min-width: 1021px) {
  .site-header:not(.is-sticky) .primary-nav > .nav-link,
  .site-header:not(.is-sticky) .primary-nav > .nav-dropdown > .nav-dropdown-toggle,
  .site-header.is-sticky .primary-nav > .nav-link,
  .site-header.is-sticky .primary-nav > .nav-dropdown > .nav-dropdown-toggle {
    font-size: 16px;
    line-height: 1.2;
  }
}

/* Mobile parent navigation sizing */
@media (max-width: 820px) {
  .primary-nav > .nav-link,
  .primary-nav > .nav-dropdown > .nav-dropdown-toggle {
    font-size: 16px;
    line-height: 1.25;
    font-weight: 800;
  }
}

/* SEO hero refinement: descriptive H1 with retained brand promise */
.hero-tagline {
  margin: 0 0 1rem;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  line-height: 1.45;
}
.hero-reference-copy > p a,
.intro-copy p a {
  color: inherit;
  text-decoration-thickness: .08em;
  text-underline-offset: .15em;
}

/* Root horizontal-overflow guard.
   Keep page-level off-canvas decoration/transforms from creating a browser scrollbar.
   Component carousels keep their own internal overflow behavior. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

@media (min-width: 1021px) {
  .site-header:not(.is-sticky) .primary-nav,
  .site-header.is-sticky .primary-nav {
    min-width: 0;
  }
  .site-header:not(.is-sticky) .primary-nav > .nav-link,
  .site-header:not(.is-sticky) .primary-nav > .nav-dropdown > .nav-dropdown-toggle,
  .site-header.is-sticky .primary-nav > .nav-link,
  .site-header.is-sticky .primary-nav > .nav-dropdown > .nav-dropdown-toggle {
    font-size: 15px;
    line-height: 1.2;
  }
}


/* Odoo/Bootstrap compatibility for CONTENT BELOW THE HERO only.
   The header, hero and hero proof/compliance strip already match the source
   Package 8 layout, so do not override their containers. Bootstrap's desktop
   .container max-width was only narrowing the body sections and footer. */
@media (min-width: 821px) {
  #securall-home-8 .home-intro .container,
  #securall-home-8 .value-strip .container,
  #securall-home-8 .products-section .container,
  #securall-home-8 .cabinet-focus .container,
  #securall-home-8 .building-solutions .container,
  #securall-home-8 .steel-door-section .container,
  #securall-home-8 .why-section .container,
  #securall-home-8 .cta-section .container,
  #securall-home-8 .live-footer > .container,
  #securall-home-8 .live-footer-bottom .container {
    width: min(1440px, calc(100% - 48px)) !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ============================================================
   Odoo desktop parity refinement (19.0.1.0.6)
   - Restore the hero H1 scale seen in the standalone Package 8.
   - Give only the proof/compliance strip a little more horizontal room.
   Header, hero image/blend and all other section widths are untouched.
   ============================================================ */
@media (min-width: 1021px) {
  #securall-home-8 .hero-reference-copy h1 {
    font-size: clamp(50px, 3.7vw, 70px);
  }

  #securall-home-8 .hero-proof-strip > .hero-proof-grid.container {
    width: min(1500px, calc(100% - 48px)) !important;
    max-width: 1500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 1500px) {
  #securall-home-8 .hero-reference-copy h1 {
    font-size: 70px;
  }
}

/* ============================================================
   Hero H1 parity refinement (19.0.1.0.10)
   Match the local Windows standalone rendering without stretching.
   Only the main hero statement is affected.
   ============================================================ */
@media (min-width: 1021px) {
  #securall-home-8 .hero-reference-copy h1 {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(50px, 3.7vw, 70px) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
    transform: none !important;
    font-stretch: normal !important;
  }
}


/* ============================================================
   Intro heading parity refinement (19.0.1.0.11)
   Keep Package 8's original 1.2fr/.8fr intro grid and full left-column
   width. Only shield the heading typography from Odoo/Bootstrap so its
   wrapping matches the standalone Windows index.html.
   ============================================================ */
@media (min-width: 1021px) {
  #securall-home-8 .home-intro .intro-grid h2 {
    width: auto !important;
    max-width: none !important;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
    font-size: clamp(30px, 3.4vw, 50px) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
  }
}


/* ============================================================
   Cabinet section spacing refinement (19.0.1.0.12)
   Reduce the excessive whitespace immediately before
   "Find the right cabinet for the material you store."
   Other section spacing remains unchanged.
   ============================================================ */
@media (min-width: 821px) {
  #securall-home-8 .cabinet-focus {
    padding-top: 56px !important;
  }

  #securall-home-8 .products-section + .cabinet-focus,
  #securall-home-8 .building-solutions + .cabinet-focus {
    margin-top: 0 !important;
  }
}

@media (max-width: 820px) {
  #securall-home-8 .cabinet-focus {
    padding-top: 36px !important;
  }
}