/* Homepage-only carousel; the first slide retains the established hero layout. */
.hero[data-hero-slider] { isolation: isolate; }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .55s ease, visibility 0s linear .55s; }
.hero-slide:first-child { position: relative; }
.hero-slide[data-active="true"] { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .55s ease; }
.hero-slide .hero-inner { height: 100%; }
.hero-slide .hero-copy h2 { font-size: clamp(34px, 3.55vw, 52px); line-height: 1.24; letter-spacing: -.035em; color: #fff; margin: 0 0 26px; max-width: 16ch; }
.hero-slide .hero-copy h2 em { color: var(--gold-light); }
.hero-slide .hero-copy { padding-bottom: 115px; }
.hero-slide:not(:first-child) .hero-photo img { object-fit: cover; object-position: center; }
.hero-slide .hero-caption { position: absolute; z-index: 3; right: 4%; bottom: 24px; font-size: 11px; line-height: 1.4; letter-spacing: .06em; text-shadow: 0 1px 8px #000; color: #fff; }
.hero-slider-controls { position: absolute; z-index: 6; bottom: 20px; left: max(48px, calc((100% - 1312px) / 2)); display: flex; gap: 7px; align-items: center; }
.hero-slider-controls button { min-width: 44px; min-height: 44px; border-radius: 50%; display: grid; place-items: center; background: #082c48d9; border: 1px solid #ffffff7d; color: #fff; }
.hero-slider-controls button:hover, .hero-slider-controls button:focus-visible { color: #082c48; background: #f7cc58; border-color: #f7cc58; }
.hero-slider-controls .hero-dots { display: flex; align-items: center; }
.hero-slider-controls .hero-dot { min-width: 26px; width: 26px; min-height: 44px; background: transparent; border: 0; border-radius: 0; }
.hero-slider-controls .hero-dot::after { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: #a7b8c2; }
.hero-slider-controls .hero-dot[aria-current="true"]::after { background: #f7cc58; box-shadow: 0 0 0 3px #f7cc5840; }
.hero-slider-controls .hero-dot:focus-visible { outline: 3px solid #f7cc58; }
@media(max-width: 780px) {
  .hero-slide .hero-copy { padding-bottom: 0; }
  .hero-slide .hero-copy h2 { font-size: clamp(30px, 7vw, 40px); max-width: 17ch; }
  .hero-slide .hero-photo { height: 410px; }
  .hero-slide .hero-caption { bottom: 72px; right: 20px; }
  .hero-slider-controls { left: 20px; bottom: 16px; }
  .hero[data-hero-slider] .image-caption { bottom: 70px; }
  .hero[data-hero-slider] .scene-detail { bottom: 90px; }
}
@media(prefers-reduced-motion: reduce) { .hero-slide, .hero-slide[data-active="true"] { transition: none; } }

/* Homepage design: construction hero and quick links to the four main fields. */
.hero-slide:first-child .hero-photo img { object-fit: cover; object-position: center; }
.hero-team-badge { position: absolute; z-index: 3; right: max(48px, calc((100% - 1312px) / 2)); bottom: 70px; display: flex; gap: 14px; align-items: center; max-width: min(420px, 35vw); padding: 15px 20px; border: 1px solid #ffffff70; border-left: 5px solid #f7cc58; border-radius: 4px; background: #082c48d9; color: #fff; }
.hero-team-badge .icon { width: 34px; height: 34px; color: #f7cc58; }
.hero-team-badge span { display: grid; gap: 4px; }
.hero-team-badge strong { font-size: 19px; line-height: 1.2; }
.hero-team-badge small { color: #d4dfe5; font-size: 13px; line-height: 1.3; }
.hero-categories { padding: 0 0 28px; background: #082c48; }
.hero-category-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.hero-category { position: relative; display: block; overflow: hidden; min-width: 0; min-height: 175px; border: 1px solid #ffffffb5; border-radius: 7px; color: #fff; background: #0d3b66; }
.hero-category::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#041f35f5 0%,#082c48b8 28%,#082c4800 82%); }
.hero-category:hover, .hero-category:focus-visible { border-color: #f7cc58; box-shadow: 0 0 0 2px #f7cc58; }
.hero-category img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.hero-category:hover img { transform: scale(1.035); }
.hero-category-copy { position: absolute; inset: auto 14px 14px; display: flex; gap: 10px; align-items: end; z-index: 1; }
.hero-category-copy .icon { color: #f7cc58; width: 30px; height: 30px; }
.hero-category-copy > span { display: grid; gap: 3px; min-width: 0; }
.hero-category-copy strong { font-size: 17px; line-height: 1.2; }
.hero-category-copy small { color: #e3ecf2; font-size: 12px; line-height: 1.3; }
@media(max-width: 1000px) { .hero-category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .hero-category { min-height: 160px; } }
@media(max-width: 780px) {
  .hero-team-badge { right: 20px; bottom: 95px; max-width: min(300px, 65vw); padding: 10px 12px; }
  .hero-team-badge strong { font-size: 15px; } .hero-team-badge small { font-size: 11px; }
  .hero-team-badge .icon { width: 25px; height: 25px; }
  .hero-category-grid { gap: 10px; } .hero-category { min-height: 145px; }
  .hero-category-copy { inset: auto 9px 10px; gap: 7px; }
  .hero-category-copy .icon { width: 24px; height: 24px; }
  .hero-category-copy strong { font-size: 15px; }
  .hero-category-copy small { font-size: 11px; }
}
@media(prefers-reduced-motion: reduce) { .hero-category img { transition: none; } }

/* Compact the homepage's above-the-fold area on wide screens only. */
@media (min-width: 1001px) {
  .hero[data-hero-slider], .hero[data-hero-slider] .hero-inner { min-height: 400px; }
  .hero[data-hero-slider] .hero-copy { padding: 18px 0 62px; }
  .hero[data-hero-slider] #hero-title,
  .hero[data-hero-slider] .hero-copy h2 {
    font-size: clamp(30px, 2.55vw, 37px);
    line-height: 1.16;
    margin-bottom: 12px;
  }
  .hero[data-hero-slider] .hero-description { line-height: 1.5; margin-bottom: 12px; }
  .hero-slider-controls { bottom: 10px; }
  .hero-team-badge { bottom: 52px; }
  .hero-slide .hero-caption { bottom: 12px; }
  .hero-categories { padding-bottom: 14px; }
  .hero-category { min-height: 124px; }
  .hero-category-copy { bottom: 9px; }
}
@media (min-width: 1600px) {
  .hero[data-hero-slider], .hero[data-hero-slider] .hero-inner { min-height: 440px; }
  .hero-category { min-height: 130px; }
}
