/* ============================================================
   Home page
   ============================================================ */

.hero{
  position: relative;
  background: var(--wl-blue);
  overflow: hidden;
  padding: 96px 0 84px;
}
@media (max-width: 680px){
  .hero{ padding: 56px 0 44px; }
}
.hero .lattice-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .16;
  animation: driftLattice 40s linear infinite;
}
@keyframes driftLattice{
  from{ transform: translate3d(0,0,0) scale(1.05); }
  to{ transform: translate3d(-2%,-2%,0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
  .hero .lattice-bg{ animation: none; }
}
/* No max-width here on purpose: .hero-inner also carries .container,
   whose own margin:0 auto centers based on THIS element's final width.
   Capping the width here would make it re-center independently in the
   full viewport instead of sitting at the container's normal left inset
   (the same class-collision shape as the .eyebrow-line/.figure bugs) —
   so the measure is capped on the heading/paragraph below instead. */
.hero-inner{ position: relative; z-index: 1; }
.hero-tag{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9fb3e0;
  margin-bottom: 20px;
}
.hero h1{
  font-size: clamp(32px, 5.2vw, 52px);
  color: #fff;
  margin-bottom: 22px;
  max-width: clamp(720px, 62vw, 860px);
}
.hero p{
  font-size: 17px;
  color: var(--on-dark-body);
  max-width: clamp(560px, 46vw, 680px);
  margin-bottom: 32px;
  line-height: 1.65;
}
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 480px){
  .hero-actions{ flex-direction: column; align-items: stretch; }
}

.section-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.section-head h2{ font-size: clamp(22px, 3vw, 28px); }
.section-head .doc-id{ font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
@media (max-width: 480px){
  .section-head .doc-id{ display: none; }
}

/* Gavel band: the banner is the band's dark background, full-bleed, with the
   quote below it. The band's own gradient is the image's sampled bottom-edge
   colors (warm black fading to navy), and the image fades into it, so the
   strip under the picture continues it with no seam. object-fit:cover keeps
   the centered gavel in frame on narrow screens. */
.gavel-band{
  margin: 0;
  background: linear-gradient(to right,
    #1a1a18 0%, #1a1a18 8%, #1a1b16 17%, #1a1b16 25%, #1b1c17 33%, #1b1b16 42%,
    #181816 50%, #181715 58%, #111110 67%, #0d0d0f 75%, #02050b 83%, #010006 92%, #000000 100%);
}
.gavel-band img{
  display: block;
  width: 100%;
  height: clamp(260px, 36vw, 520px);
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
          mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.gavel-quote{
  text-align: center;
  padding: 4px 22px 64px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3.1vw, 36px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
}
@media (max-width: 720px){ .gavel-quote{ padding-bottom: 44px; } }

/* Split-face band: one illustration cut down its seam, each half pinned to
   a screen edge with its face looking inward at the statement between them.
   The halves were lighting-flattened to this exact background color, and
   fade into it on the side facing the text, so there's no visible box. On
   narrow screens the halves sit side by side above the statement and rejoin
   into the whole illustration. */
.face-band{
  --face-bg: #e4e5e8;
  background: var(--face-bg);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
}
.face-band .face{
  display: block;
  height: clamp(260px, 30vw, 420px);
  width: auto;
}
.face-light{
  grid-column: 1; justify-self: start;
  -webkit-mask-image: linear-gradient(to right, #000 62%, transparent);
          mask-image: linear-gradient(to right, #000 62%, transparent);
}
.face-dark{
  grid-column: 3; justify-self: end;
  -webkit-mask-image: linear-gradient(to left, #000 62%, transparent);
          mask-image: linear-gradient(to left, #000 62%, transparent);
}
.face-quote{
  grid-column: 2;
  text-align: center;
  padding-inline: clamp(12px, 3vw, 40px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3.1vw, 36px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--wl-blue);
  text-wrap: balance;
  max-width: 22em;
  justify-self: center;
}
@media (max-width: 720px){
  .face-band{ grid-template-columns: 1fr 1fr; padding-bottom: 36px; }
  .face-band .face{ height: 220px; -webkit-mask-image: none; mask-image: none; }
  .face-dark{ grid-column: 1; grid-row: 1; justify-self: end; }
  .face-light{ grid-column: 2; grid-row: 1; justify-self: start; }
  .face-quote{ grid-column: 1 / -1; grid-row: 2; padding-inline: 22px; margin-top: 8px; }
}

.who-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px){ .who-grid{ grid-template-columns: 1fr; } }
.who-card{ background: var(--dotpaper); border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.who-card .doc-id{ font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); margin-bottom: 10px; }
.who-card h3{ font-size: 15.5px; margin-bottom: 6px; }
.who-card p{ font-size: 13.5px; color: var(--muted); }

.future-band{ background: var(--dotpaper); }
.future-band .section{ padding-block: 88px; }
@media (max-width: 680px){ .future-band .section{ padding-block: 56px; } }
@media (max-width: 480px){ .future-band .section{ padding-block: 40px; } }