/* ============================================================
   Hero — a photograph, graded to blue, with the page's first
   paper edge sitting on the bottom of it.

   The old hero was a drawn navy composition because there was no
   photography. There is now, and a room does the work three gradients
   were doing: you see the product in the first second.

   The blue wash that used to sit over the photograph has gone, along
   with the three drawn marks and the scroll hint. What is left is the
   room, the grid, the headline and the paper edge — so the grade on
   the image is now the only thing standing between the type and an
   unlucky patch of ceiling, which is why it is stronger than it was.
   ============================================================ */

.hero {
  position: relative;
  min-height: 600px;
  height: 100svh;
  overflow: hidden;
  background: var(--blue);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* ---- Layer 1: the room ----
   Deliberately taller than the section. hero.js drifts the photograph
   against the scroll, and an image that is exactly its frame has
   nowhere to drift to — it just slides an edge into view. The extra
   8% top and bottom is the travel budget. */
.hero__media {
  position: absolute;
  inset: -8% 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  /* Graded, not tinted, and now doing the job the scrim used to do.

     With the blue wash gone this grade is the only thing between the
     headline and the photograph. Measured against the pixels actually
     behind the type, white on the ungraded room ran to 1.5:1 in its
     worst patches — a white shirt and two laptop screens sit directly
     under the first line — against the 3:1 large text needs. Pulling
     brightness down and holding contrast recovers the highlights
     without greying the room off or tinting it back toward blue. */
  filter: saturate(0.72) contrast(1.1) brightness(0.72);
  will-change: transform;
}

/* ---- Layer 2: drafting grid, vignette-masked ---- */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.07) 1px, transparent 1px),
    linear-gradient(to right, rgb(255 255 255 / 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.14) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
  -webkit-mask-image: radial-gradient(ellipse 78% 70% at 50% 45%, #000 10%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 70% at 50% 45%, #000 10%, transparent 78%);
}

/* ---- The drafting-mark canvas ---- */
.hero .draft-field { z-index: 2; }

/* ---- Headline block, lower-left quadrant ---- */

.hero__body {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-h);
  padding-bottom: clamp(2rem, 5vh, 4rem);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
  color: var(--paper);
  opacity: 0.82;
}
.hero__eyebrow::before {
  content: '';
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: currentColor;
}

.hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-hero);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--paper);
  max-width: 15em;
  text-shadow: 0 2px 40px rgb(6 14 28 / 0.4);
}
/* Each line is its own block so the stepped indent lands and the
   split masks stack tightly instead of forming separate line boxes. */
.hero__title-line { display: block; }
/* Line 2 steps in, matching the reference composition. */
.hero__title-line--2 { padding-left: clamp(1.5rem, 8vw, 9rem); }
.hero__title em { font-style: italic; }

/* The last of the contrast, and deliberately local.

   The grade above fixes the room on average; this fixes the handful
   of bright patches the headline happens to cross. A shadow tight to
   the glyphs buys that contrast exactly where it is needed and
   nowhere else — unlike a scrim, which pays for the worst pixel in
   the frame by darkening every other one. */
.hero__title,
.hero__eyebrow {
  text-shadow:
    0 1px 2px rgb(6 14 28 / 0.42),
    0 2px 22px rgb(6 14 28 / 0.55);
}

/* ---- The paper edge along the bottom ----
   Not glass over the image: an actual white band, so the first thing
   the page does is show you the ground the rest of it is set on. */

.hero__bar {
  position: relative;
  z-index: 3;
  background: var(--paper);
  color: var(--blue);
  border-top: 1px solid rgb(10 22 40 / 0.1);
}

.hero__bar-inner {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding: clamp(1.25rem, 2.6vh, 1.85rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.hero__pitch {
  font-size: var(--t-body);
  line-height: 1.6;
  color: rgb(10 22 40 / 0.62);
  max-width: 62ch;
  text-wrap: pretty;
}
.hero__pitch strong {
  color: var(--blue);
  font-weight: 500;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The stepped indent only reads as deliberate while line 2 fits on
   one line; once it wraps it just looks ragged. */
@media (max-width: 639px) {
  .hero__title-line--2 { padding-left: 0; }
}

@media (max-width: 1023px) {
  .hero__bar-inner { grid-template-columns: 1fr; }
  .hero__actions { flex-wrap: wrap; }
}

@media (max-width: 479px) {
  .hero__actions .btn { flex: 1 1 100%; }
}

/* ---- Reduced motion: everything visible, nothing moving ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__media img { transform: none !important; }
}