/* ===== GROWTH-LINE HERO (landing pages) =====
   One schematic growth line across the first screen, headline on the chart,
   verified client results annotated on the line. Markup:
   index.html (.hero-growth), motion: scripts/hero-growth.js.
   Entry states are armed by .js-ready, so without JS everything is visible. */
.hero-growth {
  --hero-growth-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hero-growth-rule: rgb(from var(--color-heading) r g b / 0.14);
  position: relative;
  min-height: max(100svh, 720px);
  padding-top: calc(var(--header-height) + 8vh);
  overflow: clip;
  color: var(--color-heading);
}
.hero-growth-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Chart layer */
.hero-growth-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-growth-grid line {
  stroke: var(--hero-growth-rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.hero-growth-path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.hero-growth-stop-start { stop-color: var(--color-secondary); }
.hero-growth-stop-end { stop-color: var(--color-link); }
.hero-growth-stop-wash { stop-color: var(--color-primary); stop-opacity: 0.12; }
.hero-growth-stop-clear { stop-color: var(--color-primary); stop-opacity: 0; }

/* Copy */
.hero-growth-inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}
.hero-growth-kicker {
  font-family: var(--font-heading);
  font-size: var(--font-size-meta);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.hero-growth-title {
  margin-top: 22px;
  font-size: clamp(50px, 8.2vw, 132px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.048em;
  color: var(--color-heading);
}
.hero-growth-line {
  display: block;
  overflow: clip;
  /* room for descenders inside the mask */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.hero-growth-line-in { display: inline-block; }
/* Darker end of the brand purple: about 4:1 on white, holds as large text */
.hero-growth-accent-text {
  background: linear-gradient(90deg, var(--color-link), var(--color-primary-bold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-growth-lead {
  max-width: 430px;
  margin: 30px 0;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--color-body);
}

/* Primary action: square black slab, arrow grows on hover */
.hero-growth-cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  padding: 0 26px 0 28px;
  font-family: var(--font-heading);
  font-size: var(--font-size-cta);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-white);
  background: var(--color-heading);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--transition-base);
}
.hero-growth-cta:hover { background: var(--color-link); }
.hero-growth-cta:focus-visible { outline: 2px solid var(--color-link); outline-offset: 3px; }
.hero-growth-arrow {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: width 0.45s var(--hero-growth-ease);
}
.hero-growth-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.hero-growth a:hover .hero-growth-arrow { width: 34px; }

/* Result points on the line */
.hero-growth-points {
  list-style: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-growth-point { position: absolute; left: var(--x); top: var(--y); }
.hero-growth-point a {
  position: relative;
  display: block;
  pointer-events: auto;
  color: var(--color-heading);
}
.hero-growth-point a:focus-visible { outline: 2px solid var(--color-link); outline-offset: 6px; }
.hero-growth-dot {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-white);
  border: 3px solid var(--color-link);
  transition: scale 0.4s var(--hero-growth-ease);
}
.hero-growth-point a:hover .hero-growth-dot,
.hero-growth-point a:focus-visible .hero-growth-dot { scale: 1.35; }
.hero-growth-note {
  position: absolute;
  display: grid;
  gap: 5px;
  width: 240px;
}
.hero-growth-point--tl .hero-growth-note { right: 22px; bottom: 18px; text-align: right; }
.hero-growth-point--tr .hero-growth-note { left: 22px; bottom: 18px; }
.hero-growth-point--bl .hero-growth-note { right: 22px; top: 18px; text-align: right; }
.hero-growth-point--br .hero-growth-note { left: 22px; top: 18px; }
.hero-growth-num {
  font-family: var(--font-heading);
  font-size: clamp(28px, 2.7vw, 40px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.hero-growth-affix { color: var(--color-link); }
.hero-growth-label {
  font-size: var(--font-size-caption);
  line-height: 1.4;
  color: var(--color-body);
}
.hero-growth-client {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  font-family: var(--font-heading);
  font-size: var(--font-size-tiny);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.hero-growth-point--tl .hero-growth-client,
.hero-growth-point--bl .hero-growth-client { justify-content: flex-end; }
.hero-growth-point a:hover .hero-growth-client { color: var(--color-link); }

/* Entry: headline rises out of its mask, the line draws, each point lights
   when the line reaches it (delay from --t), then is-settled drops delays. */
.hero-growth.js-ready .hero-growth-line-in { translate: 0 108%; }
.hero-growth.js-ready.is-in .hero-growth-line-in {
  translate: 0 0;
  transition: translate 1.15s var(--hero-growth-ease);
}
.hero-growth.js-ready.is-in .hero-growth-line:nth-child(2) .hero-growth-line-in { transition-delay: 0.09s; }
.hero-growth.js-ready .hero-growth-fade { opacity: 0; translate: 0 14px; }
.hero-growth.js-ready.is-in .hero-growth-fade {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.9s var(--hero-growth-ease) var(--d, 0.45s), translate 0.9s var(--hero-growth-ease) var(--d, 0.45s);
}
.hero-growth.js-ready .hero-growth-path { stroke-dashoffset: 1; }
.hero-growth.js-ready .hero-growth-wash,
.hero-growth.js-ready .hero-growth-grid { opacity: 0; }
.hero-growth.js-ready .hero-growth-dot { scale: 0; }
.hero-growth.js-ready .hero-growth-note { opacity: 0; translate: 0 10px; }
.hero-growth.js-ready.is-in .hero-growth-path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.4s cubic-bezier(0.45, 0, 0.2, 1) 0.35s;
}
.hero-growth.js-ready.is-in .hero-growth-grid { opacity: 1; transition: opacity 1.2s ease 0.1s; }
.hero-growth.js-ready.is-in .hero-growth-wash { opacity: 1; transition: opacity 1.6s ease 1.4s; }
.hero-growth.js-ready.is-in .hero-growth-dot {
  scale: 1;
  transition: scale 0.5s var(--hero-growth-ease) calc(0.35s + var(--t) * 2.2s);
}
.hero-growth.js-ready.is-in .hero-growth-note {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.7s var(--hero-growth-ease) calc(0.45s + var(--t) * 2.2s), translate 0.7s var(--hero-growth-ease) calc(0.45s + var(--t) * 2.2s);
}
.hero-growth.is-settled .hero-growth-line-in,
.hero-growth.is-settled .hero-growth-fade { transition-delay: 0s !important; }
.hero-growth.is-settled .hero-growth-dot { transition: scale 0.4s var(--hero-growth-ease); }

/* Tablet */
@media (max-width: 1024px) {
  .hero-growth-point--br .hero-growth-note,
  .hero-growth-point--bl .hero-growth-note { width: 200px; }
}

/* Mobile: the line moves under the copy, results become a snap row of cards */
@media (max-width: 768px) {
  .hero-growth { min-height: 0; padding-top: calc(var(--header-height) + 32px); padding-bottom: 40px; }
  .hero-growth-inner { padding: 0 20px; }
  .hero-growth-title { font-size: 12.6vw; }
  .hero-growth-chart { top: auto; bottom: 0; height: 62%; }
  .hero-growth-points {
    position: relative;
    display: flex;
    gap: 12px;
    margin-top: 36px;
    padding: 0 20px 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    pointer-events: auto;
  }
  .hero-growth-point { position: relative; left: auto; top: auto; flex: 0 0 74%; scroll-snap-align: start; }
  .hero-growth-point a {
    height: 100%;
    padding: 20px 20px 18px;
    background: var(--color-white);
    border-top: 2px solid var(--color-link);
    box-shadow: var(--shadow-card);
  }
  .hero-growth-dot { display: none; }
  .hero-growth-note,
  .hero-growth-point--tl .hero-growth-note,
  .hero-growth-point--tr .hero-growth-note,
  .hero-growth-point--bl .hero-growth-note,
  .hero-growth-point--br .hero-growth-note { position: static; width: auto; text-align: left; }
  .hero-growth-point .hero-growth-client { justify-content: flex-start; }
}

/* Preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-growth *,
  .hero-growth *::before,
  .hero-growth *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .hero-growth-accent-text { background: none; color: CanvasText; }
  .hero-growth-wash,
  .hero-growth-grid { display: none; }
  .hero-growth-path { stroke: CanvasText; }
  .hero-growth-dot { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
}