/* Reference-specific homepage adjustments only. Other slides and interior pages keep their own layouts. */
@media (min-width:761px) {
  .hero-banner {height:clamp(420px,36.46vw,700px);}
  .intro-gallery .category-photo {width:325px;height:500px;flex:0 0 325px;}
  .intro-gallery .category-track {gap:20px;}
}
#hero[data-slide-state="0"] .hero-stage {
  background:#e5fbba;
}
#hero[data-slide-state="0"] .hero-stage::before,
#hero[data-slide-state="0"] .hero-showcase {display:none;}
.hero-buyer-reference-art {
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:fill;z-index:1;pointer-events:none;user-select:none;
}
#hero:not([data-slide-state="0"]) .hero-buyer-reference-art {display:none;}
#hero[data-slide-state="0"] .hero-copy {
  top:25.6%;left:8.1%;right:auto;width:47%;max-width:900px;z-index:3;
}
#hero[data-slide-state="0"] .hero-copy h1 {
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(38px,3.25vw,63px);font-weight:700;
  line-height:1.12;letter-spacing:-.018em;
  max-width:none;margin:0 0 25px;color:#0c0c0c;white-space:nowrap;
}
#hero[data-slide-state="0"] .hero-description {
  font-family:Arial,Helvetica,sans-serif;
  color:#111;font-size:clamp(15px,1.15vw,22px);
  line-height:1.65;font-weight:400;white-space:pre-line;
  max-width:900px;margin:0 0 49px;
}
#hero[data-slide-state="0"] .hero-cta {
  display:inline-flex;justify-content:center;align-items:center;
  min-width:240px;min-height:63px;
  padding:14px 28px;border-radius:40px;
  background:#101010;color:#fff;font-size:18px;font-weight:700;
  letter-spacing:0;box-shadow:none;
}
#hero[data-slide-state="0"] .hero-cta:hover,
#hero[data-slide-state="0"] .hero-cta:focus-visible {background:#292929;color:#fff;}
#hero[data-slide-state="0"] .hero-cta span {display:none;}
#hero[data-slide-state="0"] .slide-controls button {
  width:40px;height:3px;background:rgba(255,255,255,.56);
}
#hero[data-slide-state="0"] .slide-controls button.active {
  width:40px;background:#fff;
}
/* Reference interaction: carousel arrows are revealed by hover, not always visible. */
@media (hover:hover) and (pointer:fine) {
  .hero-banner .hero-nav {
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .18s ease,visibility .18s ease,background .18s ease;
  }
  .hero-banner:hover .hero-nav,
  .hero-banner:focus-within .hero-nav {
    opacity:1;visibility:visible;pointer-events:auto;
  }
  .intro-gallery .gallery-arrows {
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .18s ease,visibility .18s ease;
  }
  .intro-gallery:hover .gallery-arrows,
  .intro-gallery:focus-within .gallery-arrows {
    opacity:1;visibility:visible;pointer-events:auto;
  }
}
/* Reference interaction: category cards have no visible caption until hover/focus. */
.intro-gallery .category-photo .category-caption {
  position:absolute;inset:0;bottom:0;left:0;right:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:13px;margin:0;padding:20px;text-align:center;
  background:rgba(0,0,0,.4);color:#fff;
  font-size:28px;line-height:1.2;font-weight:700;text-shadow:none;
  opacity:0;visibility:hidden;
  transition:opacity .23s ease,visibility .23s ease;
}
.intro-gallery .category-photo:hover .category-caption,
.intro-gallery .category-photo:focus-visible .category-caption {
  opacity:1;visibility:visible;
}
.intro-gallery .category-shop-now {
  display:block;font-size:14px;line-height:1.4;font-weight:400;
  text-decoration:underline;text-underline-offset:3px;
}
@media(max-width:760px) {
  #hero[data-slide-state="0"] .hero-copy {
    top:70px;left:20px;right:20px;width:auto;max-width:none;
  }
  #hero[data-slide-state="0"] .hero-copy h1 {
    font-size:clamp(24px,6.7vw,33px);
    line-height:1.12;letter-spacing:-.02em;margin:0 0 11px;
    white-space:normal;
  }
  #hero[data-slide-state="0"] .hero-description {
    font-size:clamp(10px,2.7vw,12px);line-height:1.35;
    max-width:355px;margin:0 0 12px;
  }
  #hero[data-slide-state="0"] .hero-cta {
    min-width:0;min-height:0;padding:10px 17px;font-size:12px;
  }
  #hero[data-slide-state="0"] .hero-buyer-reference-art {
    width:100%;height:49%;top:auto;bottom:0;
    object-fit:fill;
  }
  .intro-gallery .category-photo .category-caption {font-size:19px;}
  .intro-gallery .category-shop-now {font-size:12px;}
}
@media(hover:none) {
  .intro-gallery .category-photo .category-caption {
    opacity:1;visibility:visible;inset:auto 0 0;
    display:flex;padding:18px 12px 14px;gap:5px;
    background:linear-gradient(transparent,rgba(0,0,0,.6));
  }
  .intro-gallery .category-shop-now {font-size:12px;}
}

/* Tablet widths: keep the reference headline and CTA inside the banner, without
   allowing the preexisting news two-column grid to widen the document. */
@media (min-width:761px) and (max-width:1100px) {
  .hero-banner {height:clamp(450px,44vw,510px);}
  #hero[data-slide-state="0"] .hero-copy {
    top:19%;left:6.5%;width:49%;
  }
  #hero[data-slide-state="0"] .hero-copy h1 {
    font-size:clamp(34px,4vw,43px);
    line-height:1.1;white-space:normal;margin-bottom:13px;
  }
  #hero[data-slide-state="0"] .hero-description {
    font-size:clamp(13px,1.45vw,16px);
    line-height:1.4;margin-bottom:20px;
  }
  #hero[data-slide-state="0"] .hero-cta {
    min-width:190px;min-height:48px;font-size:14px;padding:10px 20px;
  }
  .news-container {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(24px,4vw,55px);padding:0 24px;
  }
  .news-picture {width:100%;min-width:0;}
}

/* Mobile homepage hero: reserve space for the 62px overlay header and center carousel chevrons. */
@media (max-width: 760px) {
  /* The homepage header overlaps the first 62px of the hero (30px spacer).
     Use the same safe text zone across all three slides. */
  #hero[data-slide-state="1"] .hero-copy,
  #hero[data-slide-state="2"] .hero-copy {
    top: 82px;
  }

  /* Mobile buttons: equal edge offsets, no text-glyph baseline or font
     fallback offsets. Desktop hover-reveal behavior stays unchanged. */
  #hero .hero-nav {
    display: grid;
    place-items: center;
    top: 80%;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 0;
    line-height: 0;
  }
  #hero .hero-prev { left: 12px; }
  #hero .hero-next { right: 12px; }
  #hero .hero-nav::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
  }
  #hero .hero-prev::after { transform: rotate(135deg); }
  #hero .hero-next::after { transform: rotate(-45deg); }
}

/* Center all homepage arrow glyphs */
#hero .hero-nav { display:flex; align-items:center; justify-content:center; font-size:0; line-height:0; padding:0; }
@media (min-width:761px) {
  #hero .hero-nav::after {content:"";display:block;width:14px;height:14px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;}
  #hero .hero-prev::after {transform:rotate(135deg);}
  #hero .hero-next::after {transform:rotate(-45deg);}
}

/* Optical centering based on mobile and desktop icon pixel bounds. */
#hero .hero-prev::after { transform: translateX(3px) rotate(135deg); }
#hero .hero-next::after { transform: translateX(-3px) rotate(-45deg); }