/* ==========================================================================
   Hero — Figma 91:18 + 95:811
   Section 814 · content 1053 @ y=265 · 48/64 Cal Sans · 24 Inter · CTA 319x81
   ========================================================================== */

.gw-hero {
  position: relative;
  min-height: 46.375rem;        /* 814 comp px less the 72px nav bar */
  padding-top: 12.0625rem;      /* content lands at comp y=265 */
  padding-bottom: 5rem;
  background: var(--gw-white);
  overflow: hidden;
}

.gw-hero__bg {
  position: absolute;
  inset: -4.5rem 0 0;           /* the pattern begins above, behind the nav */
  z-index: 0;
  pointer-events: none;
}
.gw-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.7; /* Figma: image fill at 70% */
  /* DEVIATION. The asset only ranges 235-255, so at the comp's 70% the pattern
     lands within 5% of the white ground — it measures the same as Figma's own
     render and is invisible on anything but a calibrated screen. invert /
     brightness / invert scales that gap away from white instead of toward
     mid-grey (which is what contrast() would do, and it would wash the pattern
     out rather than deepen it), so white stays exactly white and only the
     drawing darkens. 2.2 puts the deepest tone near 224 — still a whisper, but
     one you can actually see. */
  filter: invert(1) brightness(2.2) invert(1);
}

.gw-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gw-hero__title {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  font-weight: 400;
}
.gw-hero__title-a,
.gw-hero__title-b {
  display: block;   /* full 1053 box: the gradient spans the box, as in Figma */
  width: 100%;
  font-family: var(--gw-font-display);
  font-weight: 400;
}
.gw-hero__title-a {
  font-size: var(--gw-t-hero-1);
  line-height: var(--gw-lh-hero-1);
  color: var(--gw-ink);
}
.gw-hero__title-b {
  font-size: var(--gw-t-hero-2);
  line-height: var(--gw-lh-hero-2);
  /* line-height equals font-size here, so the descender needs the extra box */
  padding-bottom: 0.24em;
  margin-bottom: -0.24em;
}

.gw-hero__lede {
  margin-top: 32px;
  /* Figma's 640px is the text's own measured width, not a constraint: sizing to
     content keeps the two authored lines intact (our Inter renders 640.5px). */
  width: fit-content;
  max-width: 100%;
  font-size: var(--gw-t-hero-body);
  line-height: var(--gw-lh-hero-body);
  color: var(--gw-ink);
}

.gw-hero__cta {
  margin-top: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 24px;
  background: var(--gw-black);
  color: var(--gw-white);
  border: 1px solid var(--gw-line);
  font-family: var(--gw-font-display);
  font-weight: 400;
  font-size: var(--gw-t-btn-lg);
  line-height: var(--gw-lh-btn-lg);
  transition: transform var(--gw-dur) var(--gw-ease), background var(--gw-dur) var(--gw-ease);
}
.gw-hero__cta:hover { background: #1a1a1a; }
.gw-hero__cta-icon { width: 1.1875rem; height: 1.375rem; flex: none; }

/* ---- responsive (no comp below 1440 — proposed, see audit note) ---- */
@media (max-width: 64rem) {
  .gw-hero { min-height: 0; padding-top: 7rem; padding-bottom: 4rem; }
  .gw-hero__title-a { font-size: 40px; line-height: 44px; }
  .gw-hero__title-b { font-size: 52px; line-height: 56px; }
  .gw-hero__lede { font-size: 20px; line-height: 30px; }
}

@media (max-width: 51.25rem) {
  .gw-hero { padding-top: 5rem; }
  .gw-hero__title-a { font-size: 30px; line-height: 34px; }
  .gw-hero__title-b { font-size: 36px; line-height: 42px; }
  .gw-br-lg { display: none; }
  .gw-hero__lede { margin-top: 20px; font-size: 17px; line-height: 26px; }
  .gw-hero__cta { margin-top: 32px; padding: 18px 22px; font-size: 18px; line-height: 24px; }
  .gw-hero__cta-icon { width: 20px; height: 20px; }
}

@media (max-width: 480px) {
  .gw-hero__title-a { font-size: 26px; line-height: 30px; }
  .gw-hero__title-b { font-size: 30px; line-height: 36px; }
  .gw-hero__cta { width: 100%; justify-content: center; }
}