


[data-mm-header] {
  --mm-bg: #141414;
  --mm-text: #ffffff;
  --mm-primary: #ff5a14;
  --mm-overlay-bg: rgba(13, 13, 13, 0.86);
}


.l-shell { width: 92%; max-width: 76rem; margin-left: auto; margin-right: auto; }
.l-shell--narrow { width: 92%; max-width: 52rem; }

body { padding-top: 64px; }
@media (min-width: 768px) { body { padding-top: 92px; } }


.l-page { animation: pageSlideIn 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) both; }
@keyframes pageSlideIn {
  from { transform: translateX(-3%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}
.l-page > .l-section { animation: bandRise 0.55s ease both; }
@keyframes bandRise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .l-page, .l-page > .l-section { animation: none !important; }
}


.l-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  background: rgba(13, 13, 13, 0.94);
  border-bottom: 1px solid var(--brand-line);
  backdrop-filter: blur(8px);
}
.l-header::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 38%; height: 2px;
  background: linear-gradient(90deg, var(--brand-crimson) 0%, var(--brand-ember) 100%);
}
.l-header-bar {
  width: 92%; max-width: 76rem; margin: 0 auto;
  display: flex; align-items: center; gap: 3%;
  min-height: 64px;
}
@media (min-width: 768px) { .l-header-bar { min-height: 92px; } }

.l-header-brand { display: flex; align-items: center; gap: 0.7rem; flex: 0 0 auto; }
.l-header-bar > .nav { flex: 1 1 auto; }
.l-header-bar > .cart-pill { margin-left: auto; flex: 0 0 auto; }

.l-header-bar > [data-mm-toggle] { margin-left: 0.35rem; flex: 0 0 auto; min-height: 44px; min-width: 44px; align-items: center; }

.l-topline { display: none; }
@media (min-width: 1024px) {
  .l-topline {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1.618rem;
    font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--brand-dim); border-left: 1px solid var(--brand-line);
    padding-left: 1.618rem; margin-left: 1.618rem;
  }
  
  .l-topline a { white-space: nowrap; }
}

@media (max-width: 1199px) {
  .l-topline { display: none; }
}


.l-section { padding: 2.618rem 0; position: relative; }
@media (min-width: 768px) { .l-section { padding: 4.236rem 0; } }
.l-section--tight { padding: 1.618rem 0; }
.l-section--flush { padding-top: 0; }


.l-section--panelled {
  background-color: var(--brand-carbon);
  background-image:
    linear-gradient(115deg, rgba(229, 9, 20, 0.16) 0%, rgba(13, 13, 13, 0) 46%),
    linear-gradient(255deg, rgba(255, 90, 20, 0.13) 0%, rgba(13, 13, 13, 0) 52%),
    repeating-linear-gradient(72deg, rgba(255, 255, 255, 0.028) 0 1px, rgba(0, 0, 0, 0) 1px 34px);
  background-size: cover, cover, auto;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, repeat;
}
.l-section--carbon   { background-color: var(--brand-carbon); }
.l-section--graphite { background-color: var(--brand-graphite); }

.l-section-head { margin-bottom: 2.618rem; }
.l-section-head p { color: var(--brand-ash); max-width: 46rem; }

.section-divider { height: 1px; width: 92%; max-width: 1100px; margin: 0 auto; background: var(--brand-line); }


.l-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.618rem;
}
.l-auto-grid--wide { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.l-auto-grid--tight { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }


.l-split { display: grid; gap: 2.618rem; }
@media (min-width: 900px) {
  .l-split { grid-template-columns: 62% 1fr; align-items: start; }
  .l-split--even { grid-template-columns: 1fr 1fr; }
  .l-aside { position: sticky; top: 108px; }
}


.l-hero {
  position: relative; overflow: hidden;
  padding: 2.618rem 0 0;
  background-color: var(--brand-void);
  background-image:
    radial-gradient(72% 58% at 50% 6%, rgba(229, 9, 20, 0.34) 0%, rgba(13, 13, 13, 0) 68%),
    radial-gradient(46% 40% at 82% 40%, rgba(255, 90, 20, 0.22) 0%, rgba(13, 13, 13, 0) 70%),
    conic-gradient(from 218deg at 50% 120%, rgba(255, 90, 20, 0.16) 0deg, rgba(13, 13, 13, 0) 78deg, rgba(229, 9, 20, 0.16) 156deg, rgba(13, 13, 13, 0) 240deg);
  background-size: cover, cover, cover;
  background-position: center top, center, center bottom;
  background-repeat: no-repeat;
}
@media (min-width: 768px) { .l-hero { padding: 4.236rem 0 0; } }


.l-hero::before,
.l-hero::after {
  content: ''; position: absolute; pointer-events: none; z-index: 0;
}
.l-hero::before {
  left: -6%; top: 12%; width: 46%; height: 74%;
  background: linear-gradient(160deg, rgba(26, 26, 26, 0.95) 0%, rgba(13, 13, 13, 0) 82%);
  clip-path: polygon(0 0, 100% 14%, 78% 100%, 0 86%);
}
.l-hero::after {
  right: -8%; top: 6%; width: 52%; height: 86%;
  background: linear-gradient(200deg, rgba(229, 9, 20, 0.22) 0%, rgba(13, 13, 13, 0) 74%);
  clip-path: polygon(22% 0, 100% 8%, 100% 92%, 0 100%);
}
.l-hero > * { position: relative; z-index: 1; }

.l-hero-claim { text-align: center; max-width: 54rem; margin: 0 auto; }
.l-hero-stage { display: grid; place-items: center; margin-top: 2.618rem; }


.l-footer {
  background: var(--brand-graphite);
  color: var(--brand-ash);
  border-top: 1px solid var(--brand-line);
  padding: 2.618rem 0 1.618rem;
  margin-top: 2.618rem;
}
.l-footer-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.618rem; }
@media (min-width: 640px) { .l-footer-map { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .l-footer-map { grid-template-columns: repeat(6, 1fr); gap: 1.118rem; } }
.l-footer-base {
  margin-top: 2.618rem; padding-top: 1.618rem; border-top: 1px solid var(--brand-line);
  display: grid; gap: 1rem;
}
@media (min-width: 900px) { .l-footer-base { grid-template-columns: 1fr auto; align-items: center; } }


@media (max-width: 767px) {
  .l-section[data-collapse] { border-bottom: 1px solid var(--brand-line); padding-bottom: 0; }
  .has-accordion .l-section[data-collapse] .section-title {
    cursor: pointer; position: relative; padding-right: 12%; margin-bottom: 1rem;
  }
  .has-accordion .l-section[data-collapse] .section-title::after {
    content: '+'; position: absolute; right: 2%; top: 50%; transform: translateY(-50%);
    font-size: 1.6rem; line-height: 1; color: var(--brand-ember);
  }
  .has-accordion .l-section[data-collapse].is-open .section-title::after { content: '\2212'; }
  .has-accordion .l-section[data-collapse] .section-body { display: none; }
  .has-accordion .l-section[data-collapse].is-open .section-body { display: block; padding-bottom: 2.618rem; }

  
  .l-hero::before, .l-hero::after { display: none; }
  .section-divider { display: none; }
  .l-hero-stage figcaption { display: none; }
}


.l-page:last-child { margin-bottom: 0; }


.service-offerings,
.primary-banner,
.product-portfolio,
.principal-benefits,
.organizational-profile,
.information-repository,
.contact-information { scroll-margin-top: 104px; }

.service-offerings { border-bottom: 1px solid var(--brand-line); }
.primary-banner { text-align: center; }
.product-portfolio { border-top: 1px solid var(--brand-line); }
.principal-benefits { border-block: 1px solid var(--brand-line); }
.organizational-profile { background-color: var(--brand-graphite); }
.information-repository { background-color: var(--brand-carbon); }
.contact-information { border-top: 2px solid var(--brand-crimson); }

@media (min-width: 768px) {
  .primary-banner { text-align: left; }
  .primary-banner .l-hero-claim { text-align: center; }
}


.primary-banner { isolation: isolate; }
.primary-banner::after {
  content: ''; display: block; position: absolute; inset: 0; width: auto; height: auto;
  z-index: -1; pointer-events: none;
  background-image: url('../images/hero-bg.jpg');
  background-size: auto 150%;
  background-position: 44% 0%;
  background-repeat: no-repeat;
  clip-path: none;
  opacity: 0.22;
}
