/* ==========================================================================
   Homepage hero — Fluted glass (approved concept E)
   Markup + behaviour: assets/js/components/hero-lab.js; the final copy,
   layout and buttons: pages/home.css › Part 2. Base grid: 4 columns
   anchored to the bottom of a full-height hero.
   ========================================================================== */

/* ------------------------------------------------------------ the hero */

/* full viewport, like the Home Hero.
   --hl-bg: the hero's dark (default #050505). A page may override it, and
   --hl-glass-base, which the glass shader settles into at the bottom fade
   (read by hero-lab.js; unset = pure black, the original look). */
.hl-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  background: var(--hl-bg, #050505);
  color: var(--c-on-inverse);
}

.hl-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hl-bg canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* content sits on the column grid at the bottom of the hero */
.hl-content {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
}

/* rows: 1 badge · 2 heading + intro · 3 clients + award */
.hl-layout {
  align-items: end;
  padding-bottom: 36px;
}

/* badge (col 1, above the heading) */
.hl-badge-cell {
  grid-column: 1 / span 1;
  grid-row: 1;
  margin-bottom: 6px;      /* ~42px of visible space to the heading's cap height (line-height adds the rest) */
}

/* heading (left, cols 1–3) */
.hl-head { grid-column: 1 / span 3; grid-row: 2; }

.hl-title {
  font-size: clamp(52px, 6.1vw, 88px);   /* 88px from 1440px up, 78px at 1280, 52px on tablet; phones: pages/home.css */
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

/* intro (right, col 4) — bottom-aligned with the heading */
.hl-intro {
  grid-column: 4 / span 1;
  grid-row: 2;
  padding-right: 0;
  padding-bottom: 12px;
  text-align: right;
}

.hl-intro p { color: var(--c-on-inverse-muted); }
.hl-hl { color: var(--c-on-inverse); }

/* clients + award (left, under the heading) */
.hl-proof-cell {
  grid-column: 1 / span 3;
  grid-row: 3;
  margin-top: 48px;
}

/* proof row: client avatars · count · award */
.hl-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
}

.hl-clients {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hl-avatars {
  display: flex;
}

.hl-avatars img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--hl-bg, #050505);
}

.hl-avatars img + img { margin-left: -12px; }

.hl-clients b {
  display: block;
  font-size: var(--fs-title-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.hl-clients div > span {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  text-transform: uppercase;
  opacity: 0.6;
}

/* ------------------------------------------------------ text entrances
   .hl-w = one word in a mask; the hero gets .is-in when it scrolls into view */

.hl-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.hl-w > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--i) * 0.045s + 0.1s);
}

.is-in .hl-w > span { transform: none; }

.hl-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease), transform 1s var(--ease-out);
  transition-delay: var(--d, 0.5s);
}

.is-in .hl-fade { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- responsive
   As on the Home Hero, the intro moves to the top; then badge · heading · proof */
@media (max-width: 1199px) {
  /* the stacked content reaches up into the light: a soft scrim keeps it
     legible. One S-curve ramp (eased in and out, no sudden change of slope
     anywhere — a sharp 0 → 78% ramp that then flattened used to show as a
     dusty band just above the label): ~70% where the content starts, 90%
     from ~120px below it; the light above stays as bright as before */
  .hl-content::before {
    content: "";
    position: absolute;
    inset: -180px 0 0;
    z-index: -1;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--hl-bg, #050505) 0%, transparent) 0px,
      color-mix(in srgb, var(--hl-bg, #050505) 4%, transparent) 30px,
      color-mix(in srgb, var(--hl-bg, #050505) 12%, transparent) 60px,
      color-mix(in srgb, var(--hl-bg, #050505) 25%, transparent) 90px,
      color-mix(in srgb, var(--hl-bg, #050505) 42%, transparent) 120px,
      color-mix(in srgb, var(--hl-bg, #050505) 58%, transparent) 150px,
      color-mix(in srgb, var(--hl-bg, #050505) 70%, transparent) 180px,
      color-mix(in srgb, var(--hl-bg, #050505) 79%, transparent) 215px,
      color-mix(in srgb, var(--hl-bg, #050505) 85%, transparent) 255px,
      color-mix(in srgb, var(--hl-bg, #050505) 89%, transparent) 300px,
      color-mix(in srgb, var(--hl-bg, #050505) 90%, transparent) 100%);
    pointer-events: none;
  }
  .hl-intro {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 360px;
    justify-self: end;
    padding-bottom: 30px;
  }
  .hl-badge-cell { grid-column: 1 / -1; grid-row: 2; }
  .hl-head { grid-column: 1 / -1; grid-row: 3; }
  .hl-proof-cell { grid-column: 1 / -1; grid-row: 4; }
}

@media (max-width: 809px) {
  .hl-intro { justify-self: start; text-align: left; }
  .hl-badge-cell { grid-column: 1 / -1; margin-bottom: 0; }
  .hl-proof-cell { margin-top: 36px; }
  .hl-layout { padding-bottom: 24px; }
}