/* ==========================================================================
   S-03 HERO, Financial X-Ray rebuild (2026-09-13)
   Lifted from the live hero (lp.css sections 3, 14) and written clean: the
   one-view hero, centered stack, Fraunces display, gold payload, gold CTA.
   NEW: .lp-dots, the Arbor tree mark as a polka-dot field in gold, fading
   from bright to nothing, with a barely-there wave running bottom-left to
   top-right. Palette from ag-tokens.css (Arbor block); no hex in this file.
   ========================================================================== */

:root {
  --lp-navy:       var(--arbor-navy);
  --lp-err:        #A4342A;          /* the live page's error red (lp.css), for the form's messages */
  --lp-navy-deep:  var(--arbor-navy-deep);
  --lp-gold:       var(--arbor-gold);
  --lp-gold-lit:   var(--arbor-gold-light);
  --lp-gold-60:    color-mix(in srgb, var(--lp-gold) 60%, transparent);
  --lp-w-14:       rgba(255, 255, 255, 0.14);
  --lp-lift-1:     0 6px 21px rgba(0, 0, 0, 0.21);
  --lp-r-cta:      999px;
  --lp-stack:      clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  --lp-t-display:  clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
  --lp-t-lead:     clamp(1.0625rem, 1rem + 0.36vw, 1.25rem);
  --lp-t-body:     clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --lp-t-small:    0.875rem;
  --font-display:  'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --fw-h2:         600;
  --measure-display: 880px;
  /* the ad-set gold bar ramp, as lp.css :root (brand values, allowed here) */
  --lp-bar-1: #DFC68C; --lp-bar-2: #CDAF6F; --lp-bar-3: #BE9C57; --lp-bar-4: #C7A65E; --lp-bar-5: #CCAB61;
  --lp-bar-h1: #E8D29C; --lp-bar-h2: #D8BA7C; --lp-bar-h3: #C9A862; --lp-bar-h4: #D2B269; --lp-bar-h5: #D7B76C;

  /* The field. One knob each: mark size, spacing, peak and floor of the fade,
     wave travel, wave period, and the delay step between diagonals. */
  --lp-dots-peak:   0.95;   /* brightest mark (s03.py PEAK mirrors this) */
  --lp-dots-floor:  0;      /* "non existent" */
  --lp-dots-travel: -7px;   /* the AGH lift (DNA 7) */
  --lp-band:        820px;   /* band period in (x - y), read by s03.py for --d */
  --lp-lift-dur:    3.5s;    /* one lift per band pass */
  --lp-gold-dark:   color-mix(in srgb, var(--lp-gold) 58%, var(--lp-navy-deep));
  --lp-gold-light:  var(--lp-bar-h1);
  --lp-dots-size:   30px;
  --lp-dots-w:      1920px;  /* the stage, centred; bigger than any viewport */
  --lp-dots-h:      1200px;
}

/* ---- The section: one view, centered ---------------------------------- */
/* The bare page's reset rules every div with a top rule and a margin; the
   hero's own wrappers are not sections and must not inherit that. */
.lp-hero div { border-top: 0; margin-block: 0; padding-top: 0; }
.lp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-inline: clamp(21px, 2vw + 7px, 42px);
  background: var(--lp-navy-deep);
  color: var(--arbor-white);
  border-top: 0;
  margin-block: 0;
  font-family: var(--font-body);
  text-align: center;
}
.lp-hero__inner {
  position: relative;
  width: 100%;
  max-width: 900px;   /* Quinten 2026-09-13: content spreads to 900 */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lp-stack);
}
/* Readability (Quinten 2026-09-13): a soft navy scrim behind the copy so the
   words sit on clear ground while the field stays visible around them. */
.lp-hero__inner::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -12% -10%;
  background: radial-gradient(60% 60% at 50% 50%,
    color-mix(in srgb, var(--lp-navy-deep) 88%, transparent) 0%,
    color-mix(in srgb, var(--lp-navy-deep) 72%, transparent) 42%,
    transparent 100%);
}
/* the reversed lockup is already warm off-white with the gold tree; no filter (lp.css 4) */
.lp-hero__logo { height: clamp(38px, 3.4vw, 54px); width: auto; filter: none; opacity: 0.94; }
.lp-hero__h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-h2);
  font-size: min(var(--lp-t-display), calc(var(--measure-display) / 8));
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 100%;   /* the 900 measure; 62vw once left one word alone on line 3 at 950-1100 */
  margin: 0 auto;
  color: var(--arbor-white);
}
.lp-gold { color: var(--lp-gold); }
/* the line ends at the colon on every width (Quinten 2026-09-14): what
   follows "Downey:" is its own block, balanced on its own. Before this the
   break fell there by measure at 1100-1440 only; phones ran "Downey: Claim"
   and 950 ran "Entrepreneurs in Downey: Claim". */
.lp-hero__h1-b { display: block; }
/* "Your Complimentary" held together on desktop (the 09-13 NBSP, as a span);
   under 900 the pair is free so the second block balances as
   "Claim Your / Complimentary / Financial X-Ray" rather than "Claim" alone */
.lp-hero__glue { white-space: nowrap; }
.lp-hero__sub {
  font-size: var(--lp-t-lead);
  line-height: 1.55;
  text-wrap: pretty;
  color: color-mix(in srgb, var(--c-white) 84%, var(--lp-navy));
  max-width: 100%;
  margin: 0 auto;
}
.lp-hero__act { display: flex; flex-direction: column; align-items: center; gap: var(--lp-stack); }
.lp-hero__note {
  font-size: var(--lp-t-body); font-weight: 500; letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--c-white) 90%, var(--lp-navy));
  max-width: 48ch; text-wrap: balance; margin: 0 auto;
}

/* ---- CTA: the gold bar, popped, with the house hover ------------------
   Rest: the ad-set ramp, a gold bloom and a lift so it reads as the one
   object on the ground. Hover (pointer devices only): the brighter ramp, a
   3px lift, the bloom widens, the AG sheen sweeps once, the arrow rolls
   (ag-button base). Symmetric curves in and out (taste rule 6); the sweep
   runs on the way in only. Timings 0.3s / 0.7s, on the DNA grid.           */
.ag-button--gold {
  background: linear-gradient(180deg,
    var(--lp-bar-1) 0%, var(--lp-bar-2) 28%, var(--lp-bar-3) 58%,
    var(--lp-bar-4) 84%, var(--lp-bar-5) 100%);
  border: 0; color: var(--lp-navy);
  font-family: var(--font-body); font-weight: 700; font-size: var(--lp-t-small);
  text-transform: uppercase; letter-spacing: 0.155em;
  border-radius: var(--lp-r-cta); width: fit-content; min-height: 63px;
  padding-inline: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--c-white) 46%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--lp-navy) 26%, transparent),
    0 3px 6px color-mix(in srgb, var(--lp-navy) 28%, transparent),
    0 14px 34px color-mix(in srgb, var(--lp-navy) 36%, transparent),
    0 0 42px color-mix(in srgb, var(--lp-gold) 28%, transparent);
  transform: translateY(0);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, background-position 0.3s ease-out;
}
.ag-button--gold .arrow { letter-spacing: 0; margin-left: -0.1em; }
/* Arrow (Quinten 2026-09-13): slides UP out of view on hover, and the same
   arrow slides up in from below to take its place. The ag-button base rolls
   DOWN and swaps to a NE arrow; this keeps its two-pseudo clipped window and
   its 0.42s curve, reverses the direction, and keeps one glyph. */
.ag-button--gold .arrow::after  { content: "\2192"; transform: translateY(0); }      /* in view at rest */
.ag-button--gold .arrow::before { content: "\2192"; transform: translateY(105%); }   /* waiting below */
/* the sheen: waits off the left edge, sweeps across on hover */
.ag-button--gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1;
  pointer-events: none; border-radius: var(--lp-r-cta);
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--c-white) 55%, transparent), transparent);
  transform: translateX(-220%) skewX(-14deg);
}
@media (hover: hover) {
  .ag-button--gold:hover {
    background: linear-gradient(180deg,
      var(--lp-bar-h1) 0%, var(--lp-bar-h2) 28%, var(--lp-bar-h3) 58%,
      var(--lp-bar-h4) 84%, var(--lp-bar-h5) 100%);
    color: var(--lp-navy);
    transform: translateY(-3px);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--c-white) 60%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--lp-navy) 26%, transparent),
      0 6px 9px color-mix(in srgb, var(--lp-navy) 28%, transparent),
      0 21px 42px color-mix(in srgb, var(--lp-navy) 42%, transparent),
      0 0 63px color-mix(in srgb, var(--lp-gold) 46%, transparent);
  }
  .ag-button--gold:hover::after { transform: translateX(520%) skewX(-14deg); transition: transform 0.7s ease-out; }
  .ag-button--gold:hover .arrow::after  { transform: translateY(-105%); }   /* up and out */
  .ag-button--gold:hover .arrow::before { transform: translateY(0); }       /* up and in */
}
.ag-button--gold:active { transform: translateY(0); opacity: 0.63; transition-duration: 0.21s; }
/* A wrapped button is a MICRO-WRAP orphan. 26 tracked capitals at 14px need
   ~380px; a 350px phone offers 308. Sized by arithmetic, not by nudging:
   13px x (0.68 + 0.08)em x 26 = 257, plus 2 x 21 padding = 299 with the
   decorative arrow hidden. */
@media (max-width: 900px) {
  .ag-button--gold { font-size: 0.8125rem; letter-spacing: 0.08em; padding-inline: 21px; min-height: 58px; }
  .ag-button--gold .arrow { display: none; }
}

/* ---- Stage light, unchanged from the live hero ------------------------- */
.lp-hero__spot {
  position: absolute; left: 50%; top: 54%; width: min(1120px, 118%); height: min(760px, 86%);
  transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--lp-gold) 10%, transparent) 0%,
    color-mix(in srgb, var(--lp-gold) 7%,  transparent) 20%,
    color-mix(in srgb, var(--lp-gold) 4.5%, transparent) 38%,
    color-mix(in srgb, var(--lp-gold) 2.5%, transparent) 54%,
    color-mix(in srgb, var(--lp-gold) 1%,  transparent) 72%,
    transparent 100%);
}

/* ---- THE FIELD: the mark as a gold monogram, the A Greater Hope way -----
   Ported 2026-09-13 from the AGH presentation background (toys/toy-wave):
   a dense half-drop repeat of one motif, ONE color band flowing along a
   diagonal, and every motif lifting (7px up, scale 1.16) as the band reaches
   it, its delay taken from its position so crest and color travel together.
   Here: the Arbor tree only, gold only, DARK gold to LIGHT gold, and the axis
   is Quinten's, bottom-left to top-right.

   Mechanics. Each dot is an <i> masked with the mark. All dots share ONE
   stage-wide gradient: the band tile is 820 x 820, repeated, and every dot
   offsets it by its own --x/--y so the field reads as one continuous sheet.
   The tile is a 45deg gradient whose stops repeat twice (dark, light, dark,
   light, dark), so it tiles without a seam and the band period along the
   diagonal is 820/sqrt2 = 580px. Flow: the tile slides (+820, -820) per 7s,
   two periods, 165.7px/s along the diagonal, the AGH speed. The lift runs
   once per band pass (3.5s) with --d computed by s03.py so a dot rises at
   the moment the light stripe crosses it. Transform + background-position.
   Field-level opacity (--o) is the recede from hero.js, floored so the
   marks stay visible everywhere.                                           */
.lp-dots {
  position: absolute; left: 50%; top: 50%; z-index: -2; pointer-events: none;
  width: var(--lp-dots-w); height: var(--lp-dots-h);
  transform: translate(-50%, -50%);
}
/* LAG FIX (Quinten 2026-09-13, "its kind of laggy"). The first port gave
   every dot a slice of one shared gradient and slid it with
   background-position: that is a PAINT per dot per frame, and 195 painting
   dots measured 42.6ms a frame at 1200 wide. Now nothing paints after load:
   the dot is a dark-gold mark (painted once) and its ::after is a light-gold
   copy whose OPACITY breathes on the same clock as the lift. Opacity and
   transform both run on the compositor. The colour band is the same wave of
   light crossing the field; the flow inside a 28px mark was never visible. */
.lp-dot {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--lp-dots-size); height: var(--lp-dots-size);
  opacity: var(--o, 0.6);
  /* a Material Symbols glyph, dark gold (Quinten 2026-09-13: finance
     graphics instead of the logo); the mark file is no longer used here */
  display: grid; place-items: center;
  font-family: 'Material Symbols Rounded';
  font-size: var(--lp-dots-size); line-height: 1; font-weight: normal; font-style: normal;
  letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;   /* outlined, light: reads as line work, not stickers */
  color: var(--lp-gold-dark);
  transform-origin: center;
  animation: lp-dots-lift var(--lp-lift-dur) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.lp-dot::after {
  content: attr(data-i); position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--lp-gold-light);
  opacity: 0;
  animation: lp-dots-glow var(--lp-lift-dur) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
/* the AGH lift, verbatim shape: up and larger, then back, then rest */
@keyframes lp-dots-lift {
  0%   { transform: translateY(0) scale(1); }
  22%  { transform: translateY(var(--lp-dots-travel)) scale(1.16); }
  55%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); }
}
/* the light reaches the mark exactly as it lifts */
@keyframes lp-dots-glow {
  0%   { opacity: 0; }
  22%  { opacity: 1; }
  55%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ---- Mobile: literal centering is inherited; the field thins out -------- */
@media (max-width: 900px) {
  .lp-hero__h1  { max-width: 100%; }
  .lp-hero__glue { white-space: normal; }
  .lp-hero__sub, .lp-hero__note { max-width: 100%; }
  .lp-hero { --lp-dots-travel: -5px; --lp-dots-size: 24px; }
}

/* ---- Reduced motion: the field stands still ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lp-dot, .lp-dot::after { animation: none; }
  .lp-dot::after { opacity: 0.5; }
  .ag-button--gold, .ag-button--gold::after { transition: none; }
}

/* the opening (Quinten 2026-09-13): the logo, the title, the line, the CTA
   and the note rise in one after the other; ag-motion's reveal-hero carries
   the rise, this sets the beat (140ms apart, on the 7 grid) */
.lp-hero .reveal-hero { transition-delay: calc(var(--i, 0) * 140ms); }

/* the CTA stays ONE line at every width: under 430 the label goes smaller
   and tighter rather than wrapping (Quinten 2026-09-14) */
.ag-button--gold { white-space: nowrap; }
@media (max-width: 430px) {
  .ag-button--gold { font-size: 0.75rem; letter-spacing: 0.06em; padding-inline: 18px; }
}