/* ==========================================================================
   Hero — "Websites that make waves. Built to grow."
   Desktop: a headline built from absolutely positioned chunks (Anton + wide
   glyph swaps), a cyan pen-tool line that weaves over/under the letters,
   progress-gated stickers and an asymmetric wave into About.
   ≤991px: stacked adaptive title + repositioned stickers (no line).
   ========================================================================== */

.s-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 101vh;
  min-height: 1240rem;
  padding: 220rem 0 170rem;
  background: var(--ink);
  color: var(--ice);
  overflow-x: clip;   /* the pen line runs past the right edge; don't let it widen the page */
}
.hero__inner { height: 840rem; }

/* ---------- Headline (desktop) ---------- */
.hero__title {
  position: relative;
  height: 3em;
  margin-top: 20rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 220rem;
  line-height: .78;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ice);
}
.hero__visual { position: absolute; inset: 0; isolation: isolate; }

/* each chunk sits on a manual em grid (left = --x em); rows 1.07em apart */
.hero__chunk {
  position: absolute;
  top: 0;
  left: calc(var(--x) * 1em);
  z-index: 1;                 /* under the pen line … */
  display: block;
  white-space: pre;
  will-change: transform;
}
.hero__chunk[data-row="2"] { top: 1.07em; }
.hero__chunk[data-row="3"] { top: 2.14em; }
.hero__chunk.is-over { z-index: 3; }   /* … or over it (the weave) */

/* Wide glyphs in the hero: a touch heavier so they hold their own next to
   Anton, and anchored on the baseline — line-height .584 puts the box bottom
   on the baseline (no line-box growth), scaleY 1.46 then reaches cap height. */
.s-hero .wide { font-weight: 560; font-variation-settings: "wdth" 150, "wght" 560; line-height: .584; transform: scaleY(1.46); }

/* ---------- Pen-tool line ----------
   One SVG unit = 1rem; the viewBox origin is the headline's top-left, so the
   path is authored directly in headline coordinates (it starts far off-screen left). */
.hero__line {
  position: absolute;
  z-index: 2;
  left: -1800rem;
  top: -200rem;
  width: 3700rem;
  height: 1000rem;
  overflow: visible;
  pointer-events: none;
}
.hero__draw { fill: none; stroke: var(--cyan); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.hero__dot { fill: var(--ink); stroke: var(--cyan); stroke-width: 3; }
.hero__pixel { fill: var(--red); }
.hero__pen { opacity: 0; }
.hero__pen path { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Stickers ---------- */
.hero__decor { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero__dec { position: absolute; }
.hero__dec-shape svg { display: block; width: 100%; height: auto; overflow: visible; }
.hero__dec-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  font-size: 14rem;
  font-weight: 600;
  line-height: 1.3;
}
.hero__dec-label--light { color: rgba(255, 255, 255, .92); }
.hero__dec-num { display: block; font-size: 22rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }

/* 1 — red rounded star, top-left of row 1 */
.hero__dec--star { top: -110rem; left: 196rem; width: 136rem; }
.hero__dec--star .hero__dec-shape { fill: var(--red); }
/* 2 — cyan pill between rows 1 and 2 */
.hero__dec--pill { top: 178rem; left: 996rem; width: 196rem; height: 54rem; transform: rotate(-7deg); }
.hero__dec--pill .hero__dec-shape { width: 100%; height: 100%; border-radius: 120rem; background: var(--cyan); }
/* 3 — yellow scalloped badge, far right */
.hero__dec--scallop { top: 176rem; right: 70rem; width: 100rem; }
.hero__dec--scallop .hero__dec-shape { fill: var(--yellow); }
.hero__dec--scallop .hero__dec-label { font-size: 13rem; line-height: 1.12; }
/* 4 — blue leaf (two rounded opposite corners), left of row 2 */
.hero__dec--leaf { top: 402rem; left: 190rem; width: 188rem; height: 56rem; transform: rotate(8deg); transform-origin: 100% 100%; }
.hero__dec--leaf .hero__dec-shape { width: 100%; height: 100%; border-radius: 120rem 0; background: var(--blue); }
.hero__dec--leaf .hero__dec-label { line-height: 1.15; }
/* 5 — white burst star under row 3 */
.hero__dec--burst { top: 604rem; left: 468rem; width: 136rem; }
.hero__dec--burst .hero__dec-shape { fill: var(--white); }
.hero__dec--burst .hero__dec-label { line-height: 1.15; }
/* 6 — indigo "sausage" of four capsule lobes, bottom right */
.hero__dec--sausage { top: 664rem; left: 1566rem; width: 170rem; transform: rotate(8deg); }
.hero__dec--sausage .hero__dec-shape { fill: var(--indigo); }
.hero__dec--sausage .hero__dec-label { line-height: 1.15; }

/* ---------- Adaptive title (tablet + phone only) ---------- */
.hero__adaptive { display: none; }
.hero__mtitle {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--ice);
}
.hero__mline { display: block; white-space: nowrap; }
.hero__mline--r { text-align: right; }

/* ---------- Wave hand-off into About (static) ---------- */
.hero__wave { position: relative; z-index: 1; height: 0; line-height: 0; pointer-events: none; }
.hero__wave svg { display: block; width: 100%; height: auto; transform: translateY(-99.4%); }
.hero__wave path { fill: var(--ice); }

/* ---------- Start states (only when the motion engine will run) ---------- */
html.js:not(.is-ready) .hero__chunk,
html.js:not(.is-ready) .hero__mtitle { opacity: 0; }
html.js:not(.reduced-motion):not(.no-gsap) .s-hero [data-hero-dec] { opacity: 0; }
html.js:not(.reduced-motion):not(.no-gsap) .hero__draw { opacity: 0; }
html.js:not(.reduced-motion):not(.no-gsap) .hero__nodes { opacity: 0; }

/* ==========================================================================
   Tablet (≤991px, 744 artboard)
   ========================================================================== */
@media (max-width: 991px) {
  .s-hero {
    display: block;
    position: relative;
    height: 100vh;
    height: var(--vhx, 100svh);
    min-height: 885rem;         /* short landscape screens (phone on its side): grow to fit the 885rem stage instead of clipping it */
    padding: 0;
    overflow: hidden;
  }
  .hero__visual { display: none; }
  .hero__title { position: absolute; height: auto; margin: 0; }
  .hero__inner,
  .hero__adaptive {
    position: absolute;
    top: calc(50% - 442.5rem);
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: 885rem;
    padding: 0;
    pointer-events: none;
  }
  .hero__adaptive { display: block; padding-top: 214rem; }
  .hero__decor { z-index: 3; }
  .hero__mline { font-size: 106rem; margin-top: -3rem; padding: 0 24rem; }
  .hero__mline:first-child { margin-top: 0; }

  .hero__dec-label { font-size: 11rem; }
  .hero__dec-num { font-size: 17rem; }
  .hero__dec--star { top: 118rem; left: 60rem; width: 104rem; }
  .hero__dec--pill { top: 252rem; left: 516rem; width: 150rem; height: 42rem; }
  .hero__dec--scallop { top: 334rem; right: auto; left: 96rem; width: 80rem; }
  .hero__dec--scallop .hero__dec-label { font-size: 10rem; }
  .hero__dec--leaf { top: 552rem; left: 64rem; width: 148rem; height: 44rem; }
  .hero__dec--burst { top: 428rem; left: 474rem; width: 106rem; }
  .hero__dec--sausage { top: 652rem; left: 424rem; width: 134rem; }
  .hero__wave svg { transform: translateY(-96%); }
}

/* ==========================================================================
   Phone (≤743px, 390 artboard)
   ========================================================================== */
@media (max-width: 743px) {
  .s-hero { height: 700rem; min-height: 0; }
  .hero__inner,
  .hero__adaptive { top: 0; height: 100%; }
  .hero__adaptive { padding-top: 196rem; }
  .hero__mline { font-size: 70rem; margin-top: -2rem; padding: 0 16rem; }
  .hero__mline:first-child { margin-top: 0; }

  .hero__dec-label { font-size: 9.5rem; }
  .hero__dec-num { font-size: 15rem; }
  .hero__dec--star { top: 108rem; left: 10rem; width: 84rem; }
  .hero__dec--pill { top: 146rem; left: 244rem; width: 118rem; height: 34rem; }
  .hero__dec--scallop { top: 334rem; left: 296rem; width: 62rem; }
  .hero__dec--scallop .hero__dec-label { font-size: 8rem; }
  .hero__dec--leaf { top: 410rem; left: 6rem; width: 112rem; height: 34rem; }
  .hero__dec--burst { top: 470rem; left: 272rem; width: 84rem; }
  .hero__dec--sausage { top: 560rem; left: 34rem; width: 108rem; }
}