.diids-hero {
  position: relative;
  width: 100%;
  min-height: calc(100svh - 132px);
  background: var(--diids-paper);
  overflow: hidden;
}

/* Models — bigger, centered, standing on the page, IN FRONT of the type so
   they occlude the letters (depth). */
.diids-hero__figure {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 2;
  /* Sized by height, width follows the cutout's aspect (763/1500) so the WebGL
     plane matches the image and nothing crops or stretches. Bigger than before
     but tuned so heads clear the header. */
  height: min(72svh, 720px);
  aspect-ratio: 763 / 1500;
  pointer-events: auto;
  will-change: transform;
}
/* WebGL canvas mount fills the figure box */
.diids-hero__gl {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.diids-hero__gl canvas { display: block; }
/* <img> fallback stack (crossfades). Hidden entirely once WebGL takes over. */
.diids-hero__img {
  display: block;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.16));
  opacity: 0;
  transition: opacity 0.9s ease;
}
.diids-hero__img.is-active { opacity: 1; }
.diids-hero__gl.hero-gl--ready ~ .diids-hero__img { opacity: 0 !important; }

/* slide dots (bottom center) */
.diids-hero__dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  z-index: 4;
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.diids-hero__dot {
  width: 28px;
  height: 2px;
  background: rgba(10,10,10,0.22);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.4s ease, width 0.4s ease;
}
.diids-hero__dot.is-active { background: var(--diids-ink); width: 44px; }
.diids-hero__dot:hover { background: rgba(10,10,10,0.5); }

/* index counter in the marker */
.diids-hero__count { display: inline-flex; gap: 0.35em; }
.diids-hero__count em { font-style: normal; }

/* Oversized display words, BLENDED over the image. */
.diids-hero__type {
  position: absolute;
  inset: 0;
  z-index: 1;                      /* BEHIND the models */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 6svh;
  gap: 0.02em;
  pointer-events: none;
  user-select: none;
}
/* Solid ink words — always fully legible on the white page; the models (z2)
   pass in front and occlude the letters where they overlap, giving depth. No
   blend math, so the thin Magste serifs never drop out. */
.diids-hero__word {
  display: block;
  font-family: var(--diids-font-hero);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--diids-ink);
  /* Web/desktop: smaller, more refined. */
  font-size: clamp(2.5rem, 12.5vw, 11.5rem);
  white-space: nowrap;
  will-change: transform;
}
.diids-hero__word--top    { transform: translateX(-4vw); }
.diids-hero__word--bottom { transform: translateX(5vw); }

/* Top marker hairline */
.diids-hero__marker {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 5vw, 4rem);
  font-family: var(--diids-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--diids-ink);
}

/* Lower-left intro copy */
.diids-hero__lede {
  position: absolute;
  left: clamp(1.25rem, 5vw, 4rem);
  bottom: clamp(2.5rem, 6vw, 4rem);
  z-index: 3;
  max-width: 22rem;
  font-family: var(--diids-font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--diids-ink);
}

/* Lower-right actions */
.diids-hero__actions {
  position: absolute;
  right: clamp(1.25rem, 5vw, 4rem);
  bottom: clamp(2.5rem, 6vw, 4rem);
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Scroll cue bottom-center */
.diids-hero__scroll {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--diids-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--diids-muted);
}
.diids-hero__scroll-line {
  display: block;
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: diids-scrollcue 2.4s ease-in-out infinite;
}
@keyframes diids-scrollcue {
  0%, 100% { transform: scaleX(0.35); opacity: 0.4; }
  50%      { transform: scaleX(1);    opacity: 1;   }
}

/* ---- Tablet / mobile hero: clean stacked flow ---------------------------- *
 * The absolute-positioned desktop composition doesn't work on narrow screens
 * (overlaps). Below 992px the hero becomes a normal column:
 *   marker  ->  description  ->  image + Magste type  ->  buttons  ->  dots
 * so the copy reads directly under the "DIIDS / 0X / 04" marker.
 */
@media (max-width: 991px) {
  .diids-hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 5vw, 2rem);
    gap: 1.25rem;
    overflow: visible;
  }

  .diids-hero__marker {
    position: static;
    padding: 0;
  }

  /* description right under the marker */
  .diids-hero__lede {
    position: static;
    order: 2;
    max-width: 34rem;
    font-size: 0.9375rem;
  }

  /* image: a PORTRAIT box (matches the cutout aspect) centered in the column.
     Keeping the box close to the image aspect means the WebGL plane is ~square-
     portrait and the cutout fills it centered — no wide-box off-centering. */
  .diids-hero__figure {
    position: relative;
    order: 3;
    left: auto;
    bottom: auto;
    transform: none;
    height: min(58svh, 520px);
    width: auto;
    aspect-ratio: 3 / 4;         /* stable portrait stage for every slide */
    max-width: 100%;
    margin: 0 auto;
    align-self: center;
    z-index: 2;
  }
  .diids-hero__gl { position: absolute; inset: 0; }
  .diids-hero__img { object-fit: contain; object-position: center bottom; }
  /* type overlays the figure region: pin it to the figure's flow position by
     making it absolute over the hero but vertically aligned to the figure via
     the same order + a translate. Simpler: center it over the whole column and
     let the figure (z2) sit in front. */
  .diids-hero__type {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    order: 0;
    padding-bottom: 0;
    z-index: 1;
    justify-content: center;
  }
  /* Tablet/mobile: bigger, bolder presence. */
  .diids-hero__word { font-size: clamp(3rem, 17vw, 6.5rem); }

  .diids-hero__actions {
    position: static;
    order: 4;
    justify-content: flex-start;
  }
  .diids-hero__actions .diids-btn { flex: 1 1 auto; }

  .diids-hero__dots {
    position: static;
    order: 5;
    transform: none;
    justify-content: center;
    margin-top: 0.25rem;
  }

  .diids-hero__scroll { display: none; }
}

/* ==========================================================================
   DIIDS BUTTONS — modern, sharp, monochrome
   ========================================================================== */
.diids-btn {
  --pad-y: 0.95rem;
  --pad-x: 1.9rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--diids-font-body);
  font-weight: 700;              /* heavier so Grift's M/W hold at small size */
  font-size: 0.8125rem;          /* 13px — a touch larger for crisp rasterizing */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--diids-ink);
  border-radius: 0;
  cursor: pointer;
  transition: color 0.4s cubic-bezier(0.65,0,0.35,1), background 0.4s ease;
  pointer-events: auto;
}
/* wipe fill on hover — clipped to a wrapper span instead of overflow:hidden on
   the button, so the button itself never becomes a clipping/stacking context
   that muddies text rasterization. */
.diids-btn > span {
  position: relative;
  z-index: 1;
}
.diids-btn--solid { background: var(--diids-ink); color: var(--diids-paper); }
.diids-btn--solid:hover { background: var(--diids-paper); color: var(--diids-ink); }

.diids-btn--ghost { background: transparent; color: var(--diids-ink); }
.diids-btn--ghost:hover { background: var(--diids-ink); color: var(--diids-paper); }

/* On-dark solid button (white on image) */
.diids-btn--ondark { background: var(--diids-paper); color: var(--diids-ink); border-color: var(--diids-paper); }
.diids-btn--ondark:hover { background: transparent; color: var(--diids-paper); }

/* ==========================================================================
   DIIDS HOMEPAGE EDITORIAL BANDS
   ========================================================================== */