:root {
  --salomon-red: #ed171f;
  --salomon-red-hot: #ff3b31;
  --salomon-black: #050505;
  --salomon-panel: #101010;
}

.salomon-page {
  background: #050505;
}

.salomon-page::before {
  background:
    linear-gradient(rgba(237,23,31,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,23,31,.045) 1px, transparent 1px);
  background-size: 58px 58px;
}

.salomon-page .site-header { background: rgba(5,5,5,.9); }
.salomon-page .desktop-nav a::after { background: var(--salomon-red); }
.salomon-page .mega-menu { border-color: rgba(237,23,31,.28); }
.salomon-page .eyebrow { color: #ff3b42; }
.salomon-page .button-primary { background: linear-gradient(110deg,#b90810,var(--salomon-red-hot)); box-shadow: 0 14px 34px rgba(237,23,31,.25); }

.salomon-hero {
  position: relative;
  min-height: 860px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 180px 0 90px;
  border-bottom: 1px solid rgba(237,23,31,.35);
}

.salomon-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../images/salomon/salomon-vfd-premium-hero-v2.webp") center/cover no-repeat;
  transform: scale(1.015);
}

.salomon-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.97),rgba(0,0,0,.78) 48%,rgba(0,0,0,.16)),
    linear-gradient(0deg,#050505 0%,transparent 58%),
    radial-gradient(circle at 75% 45%,transparent,rgba(0,0,0,.35));
}

.salomon-lockup {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 2rem;
  padding: .5rem 0 .5rem 1rem;
  border-left: 4px solid var(--salomon-red);
  color: #fff;
  background: transparent;
  font-size: clamp(1.65rem,4vw,3.35rem);
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.05em;
  line-height: 1;
  text-shadow: 0 3px 18px rgba(0,0,0,.9);
}

.salomon-lockup small {
  color: #a5a5a5;
  font-size: .58rem;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,.95);
}

.salomon-hero .display { max-width: 940px; }
.salomon-hero .display em { -webkit-text-stroke-color: rgba(255,61,67,.75); }
.salomon-hero .lead { margin: 1.6rem 0 2.2rem; }

.red-rule { width: 90px; height: 4px; margin: 1rem 0 1.8rem; background: var(--salomon-red); }

.salomon-benefits {
  position: relative;
  z-index: 2;
  margin-top: -44px;
}

.benefit-strip {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-top: 3px solid var(--salomon-red);
  border-radius: 18px;
  background: #0b0b0b;
  box-shadow: 0 24px 60px rgba(0,0,0,.46);
}

.benefit {
  min-height: 154px;
  padding: 1.35rem;
  border-right: 1px solid rgba(255,255,255,.1);
}
.benefit:last-child { border: 0; }
.benefit strong { display: block; color: var(--salomon-red-hot); font-size: 1.45rem; }
.benefit h3 { margin: 1.7rem 0 .25rem; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.benefit p { margin: 0; color: #898989; font-size: .73rem; line-height: 1.45; }

.salomon-page .section-light { color: #fff; background: #0b0b0b; }
.salomon-page .section-light .section-intro,
.salomon-page .section-light .lead { color: #a9a9a9; }
.salomon-page .section-light .eyebrow { color: var(--salomon-red-hot); }
.salomon-page .section-light .detail-list li { color: #c5c5c5; border-color: #292929; }

.salomon-media {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  border: 1px solid #292929;
  border-radius: 24px;
  background: #111;
  box-shadow: 0 28px 70px rgba(0,0,0,.38);
}
.salomon-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.salomon-media.portrait img { object-position: center 38%; }
.salomon-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,0,0,.72),transparent 50%); }
.media-caption { position: absolute; inset: auto 1.4rem 1.25rem; z-index: 2; color: #e2e2e2; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }

.application-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; margin-top: 2.5rem; }
.application-card { min-height: 148px; padding: 1.2rem; border: 1px solid #292929; border-radius: 14px; background: linear-gradient(145deg,#151515,#090909); }
.application-card span { color: var(--salomon-red-hot); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.application-card h3 { margin: 2.8rem 0 0; font-size: .86rem; line-height: 1.2; text-transform: uppercase; }

.spec-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem 2rem; padding: 0; list-style: none; }
.spec-grid li { position: relative; padding: .9rem 0 .9rem 1.55rem; border-bottom: 1px solid #262626; color: #c3c3c3; }
.spec-grid li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: 7px; height: 7px; border: 2px solid var(--salomon-red); border-radius: 50%; }

.shelter-gallery { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; margin-top: 3rem; }
.shelter-photo { position: relative; min-height: 520px; overflow: hidden; border: 1px solid #303030; border-radius: 20px; }
.shelter-photo img { width: 100%; height: 100%; object-fit: cover; }
.shelter-photo:nth-child(2) img { object-position: 62% center; }
.shelter-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,0,0,.75),transparent 50%); }
.shelter-photo span { position: absolute; left: 1.4rem; bottom: 1.25rem; z-index: 2; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }

.construction-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; }
.construction-card { min-height: 210px; padding: 1.35rem; border-top: 3px solid var(--salomon-red); background: #121212; }
.construction-card strong { color: #5f5f5f; font-size: .7rem; letter-spacing: .12em; }
.construction-card h3 { margin: 3.2rem 0 .6rem; font-size: 1rem; text-transform: uppercase; }
.construction-card p { margin: 0; color: #8f8f8f; font-size: .86rem; }

.capacity-band { padding: 95px 0; background: linear-gradient(115deg,#740006,#ed171f 58%,#ff3d31); }
.capacity { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; margin: 2rem 0; font-size: clamp(2.6rem,7vw,6.5rem); font-weight: 950; letter-spacing: -.06em; line-height: 1; }
.capacity i { height: 4px; background: rgba(255,255,255,.65); }
.capacity-note { max-width: 700px; color: rgba(255,255,255,.78); }

.salomon-page .cta { background: #0b0b0b; border-top: 1px solid #282828; }
.salomon-page .cta .button { color: #fff; border-color: var(--salomon-red); background: var(--salomon-red); }

@media (max-width: 980px) {
  .benefit-strip { grid-template-columns: repeat(2,1fr); }
  .benefit { border-bottom: 1px solid rgba(255,255,255,.1); }
  .application-grid { grid-template-columns: repeat(2,1fr); }
  .shelter-gallery, .construction-grid { grid-template-columns: 1fr; }
  .shelter-photo { min-height: 420px; }
}

@media (max-width: 680px) {
  .salomon-hero { min-height: 760px; padding-top: 140px; }
  .salomon-benefits { margin-top: 0; }
  .benefit-strip, .application-grid, .spec-grid { grid-template-columns: 1fr; }
  .benefit { min-height: 130px; }
  .salomon-media { min-height: 520px; }
  .shelter-photo { min-height: 300px; }
  .capacity { grid-template-columns: 1fr; gap: .7rem; }
  .capacity i { width: 100%; }
}