/* Hydraulic Seal Depot homepage styles. */
.hsd-home-test {
  --home-content-width: var(--site-container-width);
}

/* Match the shared navigation's desktop shell without changing other pages. */
@media (min-width: 1001px) {
  .hsd-home-test { --home-content-width: min(92%, 1700px); }
}

.hsd-home-test .site-container {
  width: var(--home-content-width);
}

.hsd-home-test .hero-copy {
  margin-inline: 0;
  max-width: 100%;
}

.hsd-home-page main a {
  color: inherit;
  text-decoration: none;
}

.hsd-home-page .wide-shell {
  width: calc(100% - 36px);
  margin-inline: auto;
}

.hsd-home-page .ai-card {
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Carousel */
.hero {
  position: relative;
  height: 460px;
  overflow: hidden;
  background: var(--hsd-blue-deep);
}

.slides,
.slide {
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s ease;
}

.slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero-image {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slide-1 .hero-image {
  background-image: url("/images/hsd/hero-1-animated.webp");
}

.slide-2 .hero-image {
  background-image: url("/images/hsd/hero-2.jpg");
}

.slide-3 .hero-image {
  background-image: url("/images/hsd/hero-3.jpg");
  background-position: right center;
  background-size: 118.5% auto;
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-start;
}

.hero-copy {
  width: 650px;
  margin-top: 57px;
  margin-left: 54px;
  color: #fff;
}

.eyebrow {
  color: var(--hsd-gold-bright);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0.2px;
}

.hero h1,
.hero h2 {
  margin: 17px 0 11px;
  font-size: clamp(46px, 3.25vw, 58px);
  font-weight: 760;
  letter-spacing: -1.6px;
  line-height: 1.1;
}

.hero p {
  margin: 0 0 14px;
  color: #f7f9fc;
  font-size: 18px;
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.hero .btn {
  min-width: 189px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 25px;
  border: 0;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

.hero .btn span {
  font-size: 19px;
  line-height: 1;
}

.hero .btn.gold {
  background: linear-gradient(180deg, var(--hsd-gold-bright), var(--hsd-gold));
  color: #07111f;
}

.hero .btn.ghost {
  border: 1px solid rgba(231, 241, 252, 0.88);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.slider-arrow {
  position: absolute;
  z-index: 6;
  top: 50%;
  width: 51px;
  height: 51px;
  display: grid;
  place-items: center;
  padding: 0 0 5px;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: rgba(0, 16, 37, 0.7);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
}

.slider-arrow.prev {
  left: 17px;
}

.slider-arrow.next {
  right: 17px;
}

.slider-dots {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 15px;
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
}

.slider-dots [data-home-hero-dot] {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: transparent;
  cursor: pointer;
}
.slider-dots .home-hero-dot-mark {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.slider-dots [data-home-hero-dot]:focus-visible {
  outline: 2px solid var(--hsd-gold);
  outline-offset: 3px;
}
.slider-dots [data-home-hero-dot].is-active { width: 32px; }

.slider-dots .home-hero-autoplay {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 99px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  display: grid;
  margin-left: 3px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .82);
  background: rgba(0, 16, 37, .72);
  color: #fff;
  font-size: 11px;
}

.home-hero-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, .18);
}

.home-hero-progress::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--hsd-gold), var(--hsd-electric-bright));
}

.home-hero-carousel.is-timing:not(.is-paused) .home-hero-progress::after {
  animation: hsdHeroProgress var(--home-hero-delay, 7000ms) linear forwards;
}

.hero :is(.btn, .slider-arrow, .slider-dots button):focus-visible,
.ai-card:focus-visible,
.quick-card:focus-visible {
  outline: 3px solid var(--hsd-gold);
  outline-offset: 3px;
}

@keyframes hsdHeroProgress {
  to { transform: scaleX(1); }
}

/* Test-page tool shelf: one shared surface and equal, compact panels. */
.hsd-home-test { --home-card-overlap: 22px; }
.hsd-home-test .hero-copy { margin-top: 74px; }
.hsd-home-test .hero-content { z-index: 3; }
.hsd-home-test .hero::before {
  content: ''; position: absolute; z-index: 2; inset: auto 0 0; height: 76px;
  background: linear-gradient(180deg, rgba(0,34,75,0), var(--hsd-blue)); pointer-events: none;
}
.hsd-home-test .slider-dots { bottom: calc(var(--home-card-overlap) + 18px); }
.hsd-home-test .ai-strip {
  position: relative; z-index: 9; margin-top: calc(-1 * var(--home-card-overlap));
  padding: 0 0 6px; background: transparent;
}
.hsd-home-test .ai-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  padding: 8px; border: 1px solid #e2e7ed; border-radius: 18px;
  background: #e2e7ed; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(0,34,75,.1);
}
.hsd-home-test .ai-card {
  position: relative; isolation: isolate; display: block; min-width: 0; height: 210px;
  overflow: hidden; container-type: inline-size; border: 1px solid rgba(255,255,255,.08); border-radius: 11px;
  background: var(--hsd-blue); color: #fff; box-shadow: none; text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hsd-home-test .ai-card::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background-image: linear-gradient(rgba(0,144,225,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,144,225,.045) 1px,transparent 1px);
  background-size: 24px 24px; pointer-events: none;
}
.hsd-home-test .ai-card:hover { border-color: rgba(0,144,225,.55); box-shadow: inset 0 0 0 1px rgba(0,144,225,.12); }
.hsd-home-test .ai-card-copy { position: absolute; z-index: 2; top: 17px; left: 66px; right: 16px; }
.hsd-home-test .ai-card-title { display: block; font-size: clamp(21px,1.4vw,24px); font-weight: 800; letter-spacing: -.6px; line-height: 1.2; }
.hsd-home-test .ai-card-title > span { color: var(--hsd-gold-bright); }
.hsd-home-test .ai-card-description { display: block; margin-top: 6px; color: #e4edf7; font-size: 13px; font-weight: 500; line-height: 1.4; }
.hsd-home-test .ai-icon,
.hsd-home-test .search-mark { position: absolute; z-index: 2; top: 16px; left: 16px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; box-shadow: none; }
.hsd-home-test .search-mark { overflow: hidden; border-radius: 6px; }
.hsd-home-test .search-mark img { position: absolute; width: 300px; max-width: none; height: auto; top: -10px; left: -6px; }
.hsd-home-test .sealaiq-icon svg { width: 34px; height: 34px; stroke: var(--hsd-gold-bright); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hsd-home-test .sealaiq-icon-focus { stroke: var(--hsd-electric); stroke-width: 1.25; }
.hsd-home-test .kit-icon i { position: absolute; width: 16px; height: 12px; border: 2px solid #fff; transform: rotate(-30deg) skew(25deg); }
.hsd-home-test .kit-icon i:nth-child(1) { top: 6px; }
.hsd-home-test .kit-icon i:nth-child(2) { top: 11px; border-top: 0; }
.hsd-home-test .kit-icon i:nth-child(3) { top: 16px; border-top: 0; }
.hsd-home-test .card-action { position: absolute; z-index: 3; left: 18px; bottom: 15px; display: inline-flex; align-items: center; gap: 10px; color: var(--hsd-gold-bright); font-size: 13px; font-weight: 750; line-height: 20px; }
.hsd-home-test .card-action > span { font-size: 19px; transition: transform .2s ease; }
.hsd-home-test .ai-card:hover .card-action > span { transform: translateX(3px); }
/* Recompose existing artwork; no miniature interface text or new image assets. */
.hsd-home-test .search-workflow { position: absolute; top: 78px; left: 18px; right: 16px; height: 96px; }
.hsd-home-test .search-wave { position: absolute; left: 0; top: 50%; width: 47%; max-width: 220px; aspect-ratio: 420 / 145; transform: translateY(-50%); overflow: hidden; container-type: inline-size; }
.hsd-home-test .search-wave img { position: absolute; left: 0; top: -51cqw; width: auto; max-width: none; height: 96cqw; }
.hsd-home-test .search-stack { position: absolute; right: 0; bottom: -4px; width: 41%; height: 145px; overflow: hidden; }
.hsd-home-test .search-stack img { position: absolute; right: 0; bottom: 0; width: auto; max-width: none; height: 145px; clip-path: polygon(76% 0,100% 0,100% 100%,64% 100%,64% 86%,76% 80%); }
.hsd-home-test .search-connection { position: absolute; left: 49%; right: 40%; top: 50%; height: 1px; background: rgba(0,144,225,.5); }
.hsd-home-test .search-connection::after { content: ''; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--hsd-electric); border-right: 1px solid var(--hsd-electric); transform: rotate(45deg); }
.hsd-home-test .sealaiq-lab { position: absolute; top: 79px; left: 50%; width: 220px; height: 100px; max-width: calc(100% - 36px); transform: translateX(-50%); }
.hsd-home-test .scanner-product { position: absolute; inset: 0 22px; overflow: hidden; }
.hsd-home-test .scanner-product img { position: absolute; left: 50%; top: -13px; height: 116px; width: auto; max-width: none; transform: translateX(-50%); }
.hsd-home-test .lab-brackets { position: absolute; inset: 1px 0; opacity: .7; background: linear-gradient(var(--hsd-electric),var(--hsd-electric)) left top / 15px 1px no-repeat,linear-gradient(var(--hsd-electric),var(--hsd-electric)) left top / 1px 15px no-repeat,linear-gradient(var(--hsd-electric),var(--hsd-electric)) right top / 15px 1px no-repeat,linear-gradient(var(--hsd-electric),var(--hsd-electric)) right top / 1px 15px no-repeat,linear-gradient(var(--hsd-electric),var(--hsd-electric)) left bottom / 15px 1px no-repeat,linear-gradient(var(--hsd-electric),var(--hsd-electric)) left bottom / 1px 15px no-repeat,linear-gradient(var(--hsd-electric),var(--hsd-electric)) right bottom / 15px 1px no-repeat,linear-gradient(var(--hsd-electric),var(--hsd-electric)) right bottom / 1px 15px no-repeat; }
.hsd-home-test .scan-line { position: absolute; z-index: 2; top: 46%; left: 8px; right: 8px; height: 1px; background: var(--hsd-gold-bright); opacity: .7; animation: scan 3s ease-in-out infinite alternate; }
@keyframes scan { from { transform: translateY(-30px); opacity: .3; } to { transform: translateY(30px); opacity: .7; } }
.hsd-home-test .kit-assembly { position: absolute; top: 64px; left: 16px; right: 16px; height: 135px; }
.hsd-home-test .kit-assembly img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1100px) {
  .hsd-home-test .ai-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 680px) {
  .hsd-home-test { --home-card-overlap: 10px; }
  .hsd-home-test .hero-copy { margin-top: 52px; }
  .hsd-home-test .slider-dots { top: 10px; bottom: auto; }
  .hsd-home-test .ai-grid { padding: 6px; border-radius: 16px; }
  .hsd-home-test .ai-card-title { font-size: 21px; }
}
@media (max-width: 360px) {
  .hsd-home-test .hero { height: 500px; }
  .hsd-home-test.hsd-home-page .slide-1 .hsd-fx { width: max(100%,calc(500px * 2048 / 695)); }
  .hsd-home-test .ai-card-copy { left: 60px; right: 12px; }
  .hsd-home-test .ai-card-title { font-size: 18px; }
  .hsd-home-test .ai-card-description { font-size: 11.5px; }
  .hsd-home-test .search-stack { width: 42%; }
}
@container (max-width: 360px) {
  .hsd-home-test .search-stack, .hsd-home-test .search-stack img { height: 125px; }
}
@media (prefers-reduced-motion: reduce) {
  .hsd-home-test .scan-line { animation: none; }
  .hsd-home-test .ai-card, .hsd-home-test .card-action > span { transition: none; }
}

/* Local timing feedback: the selected pill fills without a full-width divider. */
.hsd-home-test .home-hero-progress { display: none; }
.hsd-home-test [data-home-hero-dot].is-active .home-hero-dot-mark {
  position: relative; width: 32px; height: 12px; overflow: hidden;
  border: 1px solid var(--hsd-gold);
  background: var(--hsd-blue);
}
.hsd-home-test [data-home-hero-dot].is-active .home-hero-dot-mark::after {
  content: ''; display: block; width: 100%; height: 100%;
  background: var(--hsd-gold); transform: scaleX(0); transform-origin: left;
}
.hsd-home-test .home-hero-carousel.is-timing [data-home-hero-dot].is-active .home-hero-dot-mark::after {
  animation: hsdHeroProgress var(--home-hero-delay, 6500ms) linear forwards;
}
.hsd-home-test .home-hero-carousel.is-paused [data-home-hero-dot].is-active .home-hero-dot-mark::after {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .hsd-home-test [data-home-hero-dot].is-active .home-hero-dot-mark::after {
    animation: none; transform: scaleX(1);
  }
}

/* Lower-page content */
.quicklinks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  padding-block: 30px;
}

.quick-card {
  padding: 0;
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  border: 1px solid var(--hsd-line);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(0, 25, 55, 0.08);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.quick-card img {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid #e4e9ee;
}

.quick-card > span {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  padding: 14px;
}

.quick-card b,
.quick-card small {
  display: block;
}

.quick-card b {
  font-size: 15px;
}

.quick-card small {
  margin-top: 4px;
  color: var(--hsd-muted);
  font-size: 11px;
}

.quick-card > strong {
  grid-column: 2;
  grid-row: 2;
  color: var(--hsd-electric);
  font-size: 24px;
}

.section-dark {
  padding: 35px 0 40px;
  background: linear-gradient(180deg, var(--hsd-blue), var(--hsd-blue-card));
  color: #fff;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.section-heading h2,
.section-heading p {
  margin: 0;
}

.section-heading h2 {
  font-size: 30px;
}

.section-heading p {
  margin-top: 5px;
  color: var(--hsd-muted);
}

.section-heading > a {
  font-size: 13px;
  font-weight: 700;
}

.equipment-grid,
.seal-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.equipment-grid a,
.seal-grid a {
  display: grid;
  grid-template-rows: auto 48px;
  overflow: hidden;
  border-radius: 10px;
  text-align: center;
  font-weight: 800;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.equipment-grid a {
  border: 1px solid rgba(108, 183, 231, 0.72);
  background: var(--hsd-blue-mid);
  box-shadow: 0 6px 16px rgba(0, 10, 28, 0.18);
}

.equipment-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 26 / 17;
  object-fit: cover;
  object-position: center;
  background: #dce7ef;
}

.seal-grid a {
  border: 1px solid var(--hsd-line);
  background: #fff;
  box-shadow: 0 5px 15px rgba(0, 21, 50, 0.08);
}

.seal-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 26 / 15;
  object-fit: cover;
  object-position: center;
  background: #f4f7fa;
}

.equipment-grid span,
.seal-grid span {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 10px 12px;
  line-height: 1.15;
}

.equipment-grid span {
  border-top: 1px solid rgba(103, 193, 245, 0.28);
  background: linear-gradient(180deg, #12385c 0%, #0b2a49 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.34);
}

.seal-grid span {
  border-top: 1px solid #e3e9ef;
  background: #fff;
  color: var(--hsd-text);
}

.equipment-grid a:hover,
.seal-grid a:hover {
  transform: translateY(-3px);
}

.equipment-grid a:hover {
  border-color: rgba(66, 202, 255, 0.95);
  box-shadow: 0 10px 22px rgba(0, 9, 25, 0.28);
}

.seal-grid a:hover {
  border-color: #b8c8d7;
  box-shadow: 0 10px 22px rgba(0, 21, 50, 0.14);
}

.equipment-grid a:focus-visible,
.seal-grid a:focus-visible {
  outline: 3px solid var(--hsd-gold);
  outline-offset: 3px;
}

.featured {
  padding-block: 36px 42px;
}

.section-heading-light h2 {
  color: var(--hsd-blue);
}

.small-btn {
  padding: 12px 20px;
  border: 1px solid var(--hsd-line);
  border-radius: 6px;
}

.trust {
  padding: 25px 0;
  border-top: 1px solid #dde8f0;
  background: #f2f8fc;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trust-grid > div {
  padding: 0 32px;
  border-right: 1px solid #d8e1ea;
}

.trust-grid > div:first-child {
  padding-left: 0;
}

.trust-grid > div:last-child {
  border-right: 0;
}

.trust-grid b,
.trust-grid small {
  display: block;
}

.trust-grid b {
  color: var(--hsd-blue);
}

.trust-grid small {
  margin-top: 4px;
  color: var(--hsd-muted);
  line-height: 1.4;
}

@media (max-width: 1400px) {
  /* Keep the carousel controls inside the gutter beside the aligned copy. */
  .hsd-home-test .slider-arrow { width: 32px; height: 32px; font-size: 26px; }
  .hsd-home-test .slider-arrow.prev { left: 8px; }
  .hsd-home-test .slider-arrow.next { right: 8px; }
.sealaiq-copy > span {
    font-size: 14px;
  }
}

@media (max-width: 1100px) {
  .hero-copy {
    margin-left: 30px;
  }

.ai-grid {
    height: auto;
    grid-template-columns: 1fr;
  }

.sealaiq-card {
    aspect-ratio: auto;
    height: 234px;
  }

  .quicklinks {
    grid-template-columns: repeat(2, 1fr);
  }

  .equipment-grid,
  .seal-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 0;
  }

}

@media (max-width: 1000px) {
  .hsd-home-test .slider-arrow { width: 20px; height: 32px; }
  .hsd-home-test .slider-arrow.prev { left: 1px; }
  .hsd-home-test .slider-arrow.next { right: 1px; }
}

@media (max-width: 680px) {
  .hsd-home-page .wide-shell {
    width: calc(100% - 20px);
  }

  .hero {
    height: 470px;
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 16, 37, 0.82), rgba(0, 16, 37, 0.2));
    pointer-events: none;
  }

  .hero-image {
    background-position: 61% center;
  }

  .hero-copy {
    width: 100%;
    margin: 68px 21px 0;
  }

  .eyebrow {
    font-size: 14px;
  }

  .hero h1,
  .hero h2 {
    font-size: clamp(33px, 9.2vw, 37px);
    letter-spacing: -1px;
  }

  .hero p {
    font-size: 15px;
  }

  .desktop-break {
    display: none;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .hero .btn {
    height: 46px;
  }

  .slider-arrow {
    display: none;
  }

  .quicklinks,
  .trust-grid {
    grid-template-columns: 1fr;
  }

  .equipment-grid,
  .seal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .equipment-grid a,
  .seal-grid a {
    grid-template-rows: auto 44px;
    font-size: 13px;
  }

  .equipment-grid span,
  .seal-grid span {
    padding-inline: 8px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .trust-grid > div {
    padding: 0;
    border-right: 0;
  }
}

/* Approved storm effects: slide 1 only, aligned to its cover background. */


.hsd-home-page .slide-1 .hsd-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.hsd-home-page .slide-1 .hsd-fx i,.hsd-home-page .slide-1 .hsd-fx span{position:absolute;display:block}
.hsd-home-page .slide-1 .hsd-worklamp{left:var(--x);top:var(--y);width:1.1%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff 0 9%,#fff7d1 15%,rgba(255,214,126,.7) 25%,rgba(255,191,86,.13) 48%,transparent 72%);box-shadow:0 0 10px #ffe4ae;animation:hsd-lamp 4s ease-in-out infinite}
.hsd-home-page .slide-1 .hsd-light-spill{left:64%;top:18%;width:17%;height:35%;background:radial-gradient(ellipse,rgba(255,219,135,.12),transparent 68%);mix-blend-mode:screen;filter:blur(6px)}
.hsd-home-page .slide-1 .hsd-beacon{left:72.4%;top:11.6%;width:2.1%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff6bf 0 6%,#ffb434 17%,rgba(255,145,21,.4) 35%,transparent 70%);animation:hsd-beacon 2.3s ease-in-out infinite}
.hsd-home-page .slide-1 .hsd-cloud-light{left:44%;top:0;width:39%;height:38%;background:radial-gradient(ellipse at 57% 25%,rgba(205,228,255,.65),rgba(100,163,226,.18) 37%,transparent 72%);mix-blend-mode:screen;opacity:0;animation:hsd-lightning 11s linear infinite}
.hsd-home-page .slide-1 .hsd-rain{left:40%;top:-16%;width:70%;height:132%;opacity:.3;mask-image:linear-gradient(90deg,transparent,#000 24%);background-image:repeating-linear-gradient(108deg,transparent 0 91px,rgba(179,214,246,.32) 92px,transparent 93px 147px);background-size:173px 117px;animation:hsd-rain .85s linear infinite}
.hsd-home-page .slide-1 .hsd-rain-far{opacity:.13;background-size:119px 81px;animation-duration:1.4s}
.hsd-home-page .slide-1 .hsd-puddle{left:46%;top:61%;width:15%;height:26%;opacity:.45;mix-blend-mode:screen;background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(255,184,65,.24) 9px,rgba(99,186,230,.2) 10px,transparent 12px 19px);mask-image:radial-gradient(ellipse,#000,transparent 69%);animation:hsd-water 3.2s ease-in-out infinite}
.hsd-home-page .slide-1 .hsd-ripple{left:var(--x);top:var(--y);width:4%;height:1.5%;border:1px solid rgba(183,217,238,.35);border-radius:50%;opacity:0;animation:hsd-ripple 3s ease-out var(--delay) infinite}
.hsd-home-page .slide-1 .hsd-seal-shine{left:59%;top:24%;width:39%;height:70%;mix-blend-mode:screen;clip-path:polygon(0 62%,23% 30%,41% 28%,47% 50%,64% 25%,92% 18%,100% 64%,74% 95%,32% 98%,2% 84%);background:linear-gradient(112deg,transparent 38%,rgba(140,214,255,.08) 43%,rgba(255,247,214,.65) 49%,rgba(255,255,255,.85) 50%,rgba(152,208,255,.13) 54%,transparent 60%);background-size:300% 100%;animation:hsd-seal-shine 6s ease-in-out infinite;opacity:0}
.hsd-home-page .slide-1 .hsd-seal-glint{left:var(--x);top:var(--y);width:1.7%;aspect-ratio:1;background:radial-gradient(circle,#fff 0 7%,rgba(222,240,255,.8) 14%,transparent 65%);transform:translate(-50%,-50%);animation:hsd-glint 6s ease-in-out var(--delay) infinite;opacity:0}
.hsd-home-page .slide-1 .hsd-seal-glint:before,.hsd-home-page .slide-1 .hsd-seal-glint:after{content:'';position:absolute;left:48%;top:0;width:4%;height:100%;background:linear-gradient(transparent,#fff,transparent)}
.hsd-home-page .slide-1 .hsd-seal-glint:after{transform:rotate(90deg)}
@keyframes hsd-lamp{0%,100%{opacity:.78}50%{opacity:1}}
@keyframes hsd-beacon{0%,100%{opacity:.3;scale:.85}45%,55%{opacity:1;scale:1.25}}
@keyframes hsd-lightning{0%,15%,19%,100%{opacity:0}16%{opacity:.65}17%{opacity:.14}18%{opacity:.45}}
@keyframes hsd-rain{to{background-position:-38px 117px}}
@keyframes hsd-water{0%,100%{transform:translateY(0) scaleX(1);opacity:.25}50%{transform:translateY(3px) scaleX(1.04);opacity:.5}}
@keyframes hsd-ripple{0%{opacity:0;transform:scale(.3)}15%{opacity:.5}100%{opacity:0;transform:scale(2)}}
@keyframes hsd-seal-shine{0%{background-position:120% 0;opacity:0}12%{opacity:.5}47%{background-position:-20% 0;opacity:.7}55%,100%{background-position:-20% 0;opacity:0}}
@keyframes hsd-glint{0%,15%,40%,100%{opacity:0;scale:.6}25%{opacity:.9;scale:1.1}}
@media(max-width:767px){.hsd-home-page .slide-1 .hsd-worklamp{box-shadow:0 0 4px #ffe4ae}.hsd-home-page .slide-1 .hsd-rain{opacity:.2}.hsd-home-page .slide-1 .hsd-seal-shine{opacity:.5}}
@media(prefers-reduced-motion:reduce){.hsd-home-page .slide-1 .hsd-fx *{animation:none!important}.hsd-home-page .slide-1 .hsd-worklamp{opacity:.8}.hsd-home-page .slide-1 .hsd-beacon{opacity:.5}.hsd-home-page .slide-1 .hsd-rain,.hsd-home-page .slide-1 .hsd-ripple,.hsd-home-page .slide-1 .hsd-cloud-light,.hsd-home-page .slide-1 .hsd-seal-shine,.hsd-home-page .slide-1 .hsd-seal-glint{display:none}}

/* V2: full-scene atmosphere and more visible equipment lighting. */
.hsd-home-page .slide-1 .hero-image:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(2,14,27,.64) 0%,rgba(2,14,27,.48) 20%,rgba(2,14,27,.22) 35%,rgba(2,14,27,.06) 46%,transparent 57%)}
.hsd-home-page .slide-1 .hsd-worklamp{width:1.6%;box-shadow:0 0 14px #ffe4ae,0 0 32px rgba(255,216,141,.5)}
.hsd-home-page .slide-1 .hsd-light-spill{opacity:1;background:radial-gradient(ellipse,rgba(255,220,148,.24),transparent 70%)}
.hsd-home-page .slide-1 .hsd-beacon{width:2.8%;animation-duration:1.7s}
.hsd-home-page .slide-1 .hsd-cloud-light{left:12%;width:70%;height:49%;animation-duration:8s}
.hsd-home-page .slide-1 .hsd-rain{left:0;width:110%;opacity:.48;background-image:repeating-linear-gradient(108deg,transparent 0 42px,rgba(179,214,246,.42) 43px,transparent 44px 83px);mask-image:linear-gradient(90deg,rgba(0,0,0,.2),#000 48%)}
.hsd-home-page .slide-1 .hsd-rain-far{opacity:.22}
.hsd-home-page .slide-1 .hsd-seal-shine{animation-duration:4.2s}
.hsd-home-page .slide-1 .hsd-seal-glint{width:2.2%;animation-duration:4.2s}
.hsd-home-page .slide-1 .hsd-mist{left:37%;top:64%;width:65%;height:24%;background:radial-gradient(ellipse at 20% 55%,rgba(160,198,219,.13),transparent 43%),radial-gradient(ellipse at 60% 50%,rgba(181,203,214,.16),transparent 55%);filter:blur(12px);mix-blend-mode:screen;animation:hsd-mist-drift 9s ease-in-out infinite alternate}
.hsd-home-page .slide-1 .hsd-lamp-beam{left:69.6%;top:15.2%;width:16%;height:51%;transform-origin:5% 0;clip-path:polygon(0 0,12% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,241,199,.28),rgba(213,230,240,.09) 62%,transparent);filter:blur(5px);mix-blend-mode:screen;animation:hsd-beam-breathe 4s ease-in-out infinite}
.hsd-home-page .slide-1 .hsd-lamp-reflection{left:58%;top:70%;width:11%;height:20%;background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,224,163,.32) 7px,transparent 10px);mask-image:radial-gradient(ellipse,#000,transparent 67%);mix-blend-mode:screen;animation:hsd-water 2.4s ease-in-out infinite}
@keyframes hsd-mist-drift{from{transform:translateX(-4%) scaleX(.96);opacity:.5}to{transform:translateX(4%) scaleX(1.08);opacity:.95}}
@keyframes hsd-beam-breathe{0%,100%{opacity:.55;transform:rotate(-3deg)}50%{opacity:.9;transform:rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.hsd-home-page .slide-1 .hsd-mist,.hsd-home-page .slide-1 .hsd-lamp-beam,.hsd-home-page .slide-1 .hsd-lamp-reflection{animation:none!important}.hsd-home-page .slide-1 .hsd-rain,.hsd-home-page .slide-1 .hsd-cloud-light,.hsd-home-page .slide-1 .hsd-seal-shine,.hsd-home-page .slide-1 .hsd-seal-glint{display:none}}

/* Keep lighting inside the image and illuminate the wet ground below. */
.hsd-home-page .slide-1 .hsd-worklamp{width:1%;box-shadow:0 2px 8px rgba(255,235,180,.8)}
.hsd-home-page .slide-1 .hsd-beacon{width:1.8%;background:radial-gradient(circle at 50% 40%,#fff6bf 0 7%,#ffb434 20%,rgba(255,145,21,.4) 37%,transparent 69%)}
.hsd-home-page .slide-1 .hsd-lamp-beam{left:65%;top:15%;width:20%;height:62%;clip-path:polygon(24% 0,28% 0,97% 96%,5% 100%);transform-origin:26% 0;background:linear-gradient(180deg,rgba(255,242,204,.42),rgba(215,232,244,.2) 44%,rgba(255,219,147,.08) 82%,transparent);filter:blur(4px);animation:hsd-downlight 4s ease-in-out infinite}
.hsd-home-page .slide-1 .hsd-light-spill{left:62%;top:25%;width:20%;height:36%;background:radial-gradient(ellipse,rgba(255,224,163,.2),transparent 72%)}
.hsd-home-page .slide-1 .hsd-lamp-reflection{left:56%;top:69%;width:13%;height:25%;opacity:.8}
.hsd-home-page .slide-1 .hsd-ripple{display:none}
.hsd-home-page .slide-1 .hsd-rain-impact{left:var(--x);top:var(--y);width:var(--w);height:1.8%;transform:translate(-50%,-50%);}
.hsd-home-page .slide-1 .hsd-rain-impact:before,.hsd-home-page .slide-1 .hsd-rain-impact:after{content:'';position:absolute;inset:0;border:1px solid rgba(189,222,240,.58);border-radius:50%;opacity:0;transform:scale(.15);animation:hsd-impact-ring var(--period) linear var(--delay) infinite}
.hsd-home-page .slide-1 .hsd-rain-impact:after{inset:14%;border-color:rgba(234,241,239,.4);animation-delay:calc(var(--delay) + .13s)}
.hsd-home-page .slide-1 .hsd-rain-impact i{left:44%;top:8%;width:12%;height:40%;border-radius:50%;background:rgba(234,242,248,.75);box-shadow:-3px 1px 0 -1px rgba(213,235,245,.55),3px 1px 0 -1px rgba(213,235,245,.55);opacity:0;animation:hsd-impact-splash var(--period) linear var(--delay) infinite}
@keyframes hsd-downlight{0%,100%{opacity:.65;transform:rotate(-1deg)}50%{opacity:.95;transform:rotate(1deg)}}
@keyframes hsd-impact-ring{0%{opacity:0;transform:scale(.12)}5%{opacity:.7;transform:scale(.22)}46%{opacity:.28;transform:scale(1.3)}65%,100%{opacity:0;transform:scale(1.7)}}
@keyframes hsd-impact-splash{0%{opacity:0;transform:translateY(0) scale(.5)}3%{opacity:.8;transform:translateY(-3px) scale(1)}10%{opacity:0;transform:translateY(1px) scale(.5)}100%{opacity:0}}
@media(max-width:767px){.hsd-home-page .slide-1 .hsd-rain-impact:nth-of-type(2n){display:none}}
@media(prefers-reduced-motion:reduce){.hsd-home-page .slide-1 .hsd-rain-impact{display:none}.hsd-home-page .slide-1 .hsd-lamp-beam{animation:none!important}}

/* Stronger storm: individual short rain streaks rather than continuous lines. */
.hsd-home-page .slide-1 .hsd-storm-drops{inset:0;overflow:hidden;mask-image:linear-gradient(90deg,rgba(0,0,0,.25),#000 43%)}
.hsd-home-page .slide-1 .hsd-storm-drops i{left:var(--x);top:var(--y);width:1px;height:4%;background:linear-gradient(transparent,rgba(203,229,247,.8),transparent);opacity:var(--drop-alpha);animation:hsd-drop-fall var(--drop-time) linear var(--delay) infinite}
@keyframes hsd-drop-fall{from{transform:translate(0,-25px) rotate(15deg)}to{transform:translate(-38px,170px) rotate(15deg)}}
.hsd-home-page .slide-1 .hsd-rain{opacity:.18}.hsd-home-page .slide-1 .hsd-rain-far{opacity:.1}
.hsd-home-page .slide-1 .hsd-rain-impact:before{border-color:rgba(204,230,245,.72);border-width:1.2px}
.hsd-home-page .slide-1 .hsd-rain-impact:after{border-color:rgba(236,244,250,.55)}
.hsd-home-page .slide-1 .hsd-puddle{width:19%;left:43%;opacity:.6}
.hsd-home-page .slide-1 .hsd-cloud-light{animation:hsd-storm-cloud 9s linear infinite;background:radial-gradient(ellipse at 57% 25%,rgba(219,235,255,.82),rgba(115,173,233,.32) 40%,transparent 74%)}
.hsd-home-page .slide-1 .hsd-lightning-bolt{position:absolute;left:45%;top:0;width:8%;height:40%;overflow:visible;fill:none;stroke:#d5eaff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px #8cb9ff);opacity:0;animation:hsd-storm-bolt 9s linear infinite}
.hsd-home-page .slide-1 .hsd-bolt-branch{stroke-width:.6;opacity:.6}
@keyframes hsd-storm-cloud{0%,27%,36%,100%{opacity:0}29%{opacity:.25}30%{opacity:.9}32%{opacity:.12}33%{opacity:.65}35%{opacity:0}}
@keyframes hsd-storm-bolt{0%,28%,32%,36%,100%{opacity:0}30%{opacity:.9}33%{opacity:.55}}
@media(max-width:767px){.hsd-home-page .slide-1 .hsd-storm-drops i:nth-child(2n){display:none}}
@media(prefers-reduced-motion:reduce){.hsd-home-page .slide-1 .hsd-storm-drops,.hsd-home-page .slide-1 .hsd-lightning-bolt,.hsd-home-page .slide-1 .hsd-cloud-light{display:none!important}}

/* Visible foreground rain, with softer coverage over the text. */
.hsd-home-page .slide-1 .hsd-storm-drops{z-index:3;mask-image:linear-gradient(90deg,rgba(0,0,0,.23) 0%,rgba(0,0,0,.35) 28%,#000 45%)}
.hsd-home-page .slide-1 .hsd-storm-drops i{width:clamp(1.5px,.12vw,2.5px);height:6.5%;background:linear-gradient(180deg,transparent,rgba(218,237,255,.9) 40%,#eaf5ff 72%,transparent);filter:drop-shadow(0 0 1px rgba(182,219,250,.4));animation-name:hsd-visible-drop;animation-duration:calc(var(--drop-time) * 1.45);}
.hsd-home-page .slide-1 .hsd-storm-drops i:nth-child(3n){height:9%;width:clamp(2px,.15vw,3px);opacity:.88}
.hsd-home-page .slide-1 .hsd-storm-drops i:nth-child(4n){height:4%;opacity:.58}
@keyframes hsd-visible-drop{0%{transform:translate(30px,-110px) rotate(14deg);opacity:0}8%{opacity:var(--drop-alpha)}82%{opacity:var(--drop-alpha)}100%{transform:translate(-90px,480px) rotate(14deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.hsd-home-page .slide-1 .hsd-storm-drops{display:none!important}}

/* Softer rainfall: retain streak size and motion, reduce brightness. */
.hsd-home-page .slide-1 .hsd-storm-drops{opacity:.58}

/* Equal rainfall intensity across the hero; headline stays above effects. */
.hsd-home-page .slide-1 .hsd-storm-drops{mask-image:none;-webkit-mask-image:none}
.hsd-home-page .slide-1 .hsd-rain{mask-image:none;-webkit-mask-image:none}

.hsd-home-page .slide-1 .hero-image { isolation:isolate; }
.hsd-home-page .slide-1 .hsd-fx {
  inset:auto; left:50%; top:50%;
  width:max(100%, calc(414px * 2048 / 695));
  height:max(100%, calc(100vw * 695 / 2048));
  transform:translate(-50%,-50%);
}
.hsd-home-page .slide-1 .hero-image:after { z-index:2; }
.hsd-home-page .slide-1 .hsd-fx *,
.hsd-home-page .slide-1 .hsd-fx *:before,
.hsd-home-page .slide-1 .hsd-fx *:after { animation-play-state:paused; }
.hsd-home-page .slide-1.is-active .hsd-fx *,
.hsd-home-page .slide-1.is-active .hsd-fx *:before,
.hsd-home-page .slide-1.is-active .hsd-fx *:after { animation-play-state:running; }
@media(max-width:680px) {
  .hsd-home-page .slide-1 .hsd-fx {
    left:61%; width:max(100%,calc(470px * 2048 / 695));
    height:max(100%,calc(100vw * 695 / 2048));
    transform:translate(-61%,-50%);
  }
  .hsd-home-page .slide-1 .hero-image:after { background:linear-gradient(90deg,rgba(2,14,27,.2),transparent 58%); }
}

/* Fit the complete first hero within the existing slider window. */
.hsd-home-page .slide-1 .hero-image { background-size:100% 100%; background-position:center; }
.hsd-home-page .slide-1 .hsd-fx {
  inset:0; left:0; top:0; width:100%; height:100%; transform:none;
}
.hsd-home-page .slide-1 .hsd-storm-drops { opacity:.44; }
@media(max-width:680px) {
  /* Keep natural equipment proportions on narrow phones, with its cab visible. */
  .hsd-home-page .slide-1 .hero-image { background-size:cover; background-position:61% top; }
  .hsd-home-page .slide-1 .hsd-fx {
    inset:auto; left:61%; top:0;
    width:max(100%,calc(470px * 2048 / 695));
    height:max(100%,calc(100vw * 695 / 2048));
    transform:translateX(-61%);
  }
}
