/* Full-screen hero after 01.tech: a still render fills the viewport under the floating nav,
   the headline sits bottom-left, and the next section rides over it as a rounded sheet.
   Image: branding-area/render/hero-render.html → render/build.py → img/hero-*.{avif,webp}
   (placeholder for the Blender master renders, CLAUDE.md, Visual style). */

.hero--full {
  --nav-h: 73px;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 100vh; min-height: 100svh;
  margin-top: calc(-1 * var(--nav-h));
  padding: calc(var(--nav-h) + 40px) 0 calc(clamp(56px, 9vh, 112px) + 28px);
  background: #dfe3e6;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }

.hero__content { width: 100%; }
.hero--full .hero__title { font-size: clamp(52px, 7.6vw, 132px); line-height: 0.96; letter-spacing: -0.04em; max-width: 9.5ch; }
.hero--full .lead { margin-top: clamp(20px, 2.4vw, 32px); max-width: 40ch; color: var(--ink-2); }
.hero--full .cta-row { margin-top: clamp(28px, 3vw, 40px); }

/* the section after the hero overlaps it as a sheet */
.sheet {
  position: relative; z-index: 1;
  margin-top: -28px;
  border-radius: 28px 28px 0 0;
  background: var(--bg);
  box-shadow: 0 -18px 50px rgb(23 25 29 / 0.07);
}

/* portrait screens: tall render, sign in the upper half, text over the floor */
@media (max-aspect-ratio: 1/1) {
  .hero--full { background: linear-gradient(180deg, #e6e9eb 40%, #d2d7db 100%); }
  .hero__bg { bottom: auto; height: 50vh; height: 50svh; top: var(--nav-h);
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .hero__bg img { object-position: 50% 8%; }
  .hero--full { padding-top: calc(var(--nav-h) + 48vh); padding-top: calc(var(--nav-h) + 48svh); }
  .hero--full .hero__title { font-size: clamp(46px, 13vw, 96px); }
}
@media (max-width: 600px) {
  .hero--full { --nav-h: 73px; padding-bottom: calc(48px + 28px); }
  .sheet { border-radius: 22px 22px 0 0; margin-top: -22px; }
}