/* Let the photographs carry the composition; captions sit directly on the image. */
.hero-showcase {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  isolation: isolate;
}
.hero-showcase::before {
  content: "";
  position: absolute;
  inset: -25px -30px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse, #132a3b70 0%, #132a3b40 40%, transparent 73%);
}
.hero-project { min-height: 34px; }
.hero-showcase .project-info strong {
  color: #fff;
  text-shadow: 0 1px 3px #0b203dc9, 0 2px 12px #0b203da8;
}
.hero-showcase .project-open,
.hero-showcase .showcase-controls button {
  color: #fff;
  background: #253c4b24;
  border: 1px solid #ffffff45;
  box-shadow: 0 2px 8px #182f431a;
}
.hero-showcase .showcase-controls { gap: 5px; }
.hero-showcase .showcase-controls button:hover {
  background: #ffffff35;
  border-color: #ffffffb3;
}
.hero-showcase .hero-dot span { background: #ffffff9c; box-shadow: 0 1px 5px #18304266; }
.hero-showcase .hero-dot[aria-pressed="true"] span { background: #ea514c; }
.hero-showcase .carousel-track { display: none; }
.hero-showcase :focus-visible { outline-color: #fff; }

.solution-visual::after {
  content: "";
  position: absolute;
  inset: 47% 0 0;
  background: linear-gradient(180deg, transparent, #122b3c22 35%, #122b3cb3);
  pointer-events: none;
}
.visual-caption,
.visual-caption:hover,
.visual-caption:focus-within {
  left: 28px;
  right: 28px;
  bottom: 25px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 1;
}
.visual-caption strong,
.visual-caption small {
  color: #fff;
  text-shadow: 0 1px 4px #142638, 0 2px 16px #14263880;
}
.visual-caption strong { font-size: 18px; font-weight: 530; }
.visual-caption small { margin-bottom: 7px; opacity: .84; font-weight: 450; }
.visual-caption > a {
  width: 44px;
  height: 44px;
  color: #fff;
  border-color: #ffffff80;
  background: #ffffff14;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.visual-caption > a:hover { background: #ffffff30; border-color: #fff; color: #fff; }
.visual-coordinate {
  z-index: 1;
  isolation: isolate;
  padding: 0;
  color: #fff;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 1px 3px #102735cc, 0 2px 12px #102735aa;
}
.visual-coordinate::before {
  content: "";
  position: absolute;
  inset: -11px -15px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse, #142c3a65 0%, #142c3a2e 50%, transparent 76%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  mask-image: radial-gradient(ellipse, #000 15%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse, #000 15%, transparent 74%);
}

.hero-actions .play-button { text-align: left; color: #2d4656; }
.hero-actions .play-button > span { display: grid; gap: 5px; }
.hero-actions .play-button strong { font-size: 13px; font-weight: 560; }
.hero-actions .play-button small { font-size: 10px; line-height: 1.6; color: #536c7b; font-weight: 430; }
.hero-actions .play-button i { flex-shrink: 0; background: #ffffff35; }
.hero-copy { text-shadow: 0 1px 10px #f6f9fb9c; }
.hero-bottom {
  border-top: 0;
  background: linear-gradient(0deg, #dfe9efed, #e5edf3b3 68%, #e5edf359);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-bottom strong,
.hero-bottom p,
.hero-bottom .bottom-label { text-shadow: 0 1px 8px #ffffffa6; }
.hero-bottom .bottom-label { color: #5e7686; }

@media(max-width:960px) {
  .hero-photo { inset: 0; }
  .hero-wash {
    background: linear-gradient(180deg,#f4f7f9e8 0%,#edf3f6e3 22%,#edf3f6a8 46%,#edf3f617 69%,#dce7ee6b 100%),
      linear-gradient(100deg,#f5f8fac7,transparent 86%);
  }
  .hero-bottom { background: linear-gradient(0deg,#dee8eff2,#e3ecf2b5 64%,#e3ecf24a); }
}
@media(max-width:640px) {
  .hero {
    min-height: 0;
    grid-template-rows: auto 140px auto;
  }
  .hero-content { padding-top: 30px; padding-bottom: 20px; }
  .hero .eyebrow { margin-bottom: 17px; }
  .hero-copy { margin-top: 16px; font-size: 13px; line-height: 1.9; }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    margin-top: 20px;
    gap: 16px;
  }
  .hero-actions .play-button { min-height: 44px; gap: 11px; }
  .hero-actions .play-button i { width: 36px; height: 36px; }
  .hero-actions .play-button strong { font-size: 13px; }
  .hero-actions .play-button small { font-size: 11px; }
  .hero-showcase {
    margin-bottom: 17px;
    padding: 0;
    border-radius: 0;
  }
  .hero-showcase .project-info strong { font-size: 11px; }
  .hero-showcase .showcase-controls button { width: 34px; height: 34px; }
  .hero-bottom { padding-block: 20px; }
  .hero-photo { inset: 0; }
  .hero-photo .hero-frame { background-position: 61% 50%; }
  .hero-wash {
    background: linear-gradient(180deg,#f1f5f8eb 0%,#f1f5f8e0 32%,#edf3f6a8 52%,#e1ebf226 75%,#d9e6ef4d 100%),
      linear-gradient(95deg,#f2f7fab3,transparent 95%);
  }
  .hero-grid { opacity: .1; }
  .visual-caption,
  .visual-caption:hover,
  .visual-caption:focus-within { left: 19px; right: 19px; bottom: 19px; padding: 0; }
  .visual-caption strong { font-size: 16px; }
  .visual-caption small { font-size: 8px; }
}
@media(max-width:359px) {
  .hero-content { padding-top: 25px; }
  .hero-copy { font-size: 12px; }
  .hero-actions { gap: 14px; }
  .hero-actions .play-button small { font-size: 10px; }
}