/* ============================================================
   Brightest Light — homepage
   Hero + the starburst signature ("the brightest light")
   ============================================================ */

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(3rem,6vw,5rem) clamp(3.25rem,6.5vw,5.5rem);
  background:
    radial-gradient(120% 100% at 78% 8%, #4a6b75 0%, var(--teal) 46%, var(--teal-800) 100%);
  isolation:isolate;
}
.hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.hero__copy .display{
  color:var(--ice-bright);
  margin-top:1.1rem;
}
.hero__copy .display em{color:var(--gold);font-style:italic}
/* the hero is its own type tier — it keeps the larger lead the section leads dropped */
.hero__copy .lead{color:var(--ice-dim);margin-top:1.4rem;max-width:44ch;font-size:var(--fs-lead-hero)}
.hero__copy .btn-row{margin-top:2rem}
.hero__phone{color:var(--ice-bright)}
.hero__phone:hover{color:var(--gold)}

.hero__trust{
  display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;
  /* padding matches margin so the gap below the rule equals the gap above it */
  margin-top:2.2rem;padding-top:2.2rem;
  border-top:1px solid var(--teal-line);
}
.hero__trust li{
  display:flex;align-items:center;gap:.55em;
  font-weight:600;font-size:var(--fs-md);color:var(--ice);
}
.hero__trust svg{width:1.2rem;height:1.2rem;color:var(--gold);flex:none}

.hero__media{position:relative}
.hero__media .media-frame{
  /* Portrait frame, and the hero photo is portrait (2:3) to match — cover then trims
     only ~17% off the height rather than the ~44% of the width it took off the 3:2
     landscape shot that used to sit here. */
  aspect-ratio:4/5;box-shadow:0 40px 80px -32px rgba(15,30,35,.75);
  border:6px solid rgba(255,255,255,.08);
}
@media (max-width:820px){
  .hero__inner{grid-template-columns:1fr;gap:2.5rem}
  .hero__media{max-width:26rem;margin-inline:auto;width:100%}
}

/* ---------- The starburst signature ---------- */
/* the star — one connected radiant burst (matches the brand mark) */
.hero__glow{
  position:absolute;z-index:1;pointer-events:none;
  top:-20%;right:-8%;
  width:min(70vw,720px);aspect-ratio:1;
}
.starburst{width:100%;height:100%;transform-origin:center;overflow:visible;
  animation:bl-twinkle 5.5s ease-in-out infinite}
html:not(.loaded) .starburst{animation:none}
@keyframes bl-twinkle{0%,100%{transform:scale(.88);opacity:.72}50%{transform:scale(1.08);opacity:1}}
/* Mobile-only pulse: grows more, cycles a little quicker, and brightens as it grows.
   The trough is pulled down to .28 to compensate for the container going .38 -> .52
   below, so the small end of the pulse stays as faint as it was (~.15 effective) and all
   the extra range lands on the peak — the star reads as swelling INTO brightness rather
   than the whole thing sitting lighter. */
@keyframes bl-twinkle-sm{0%,100%{transform:scale(.76);opacity:.28}50%{transform:scale(1.28);opacity:1}}
@media (prefers-reduced-motion:reduce){.starburst{animation:none!important}}
@media (max-width:820px){
  /* On mobile the hero stacks, so the star sits directly behind the headline instead
     of beside it. Dim it so the type stays legible on top. */
  /* .38 -> .52 raises the ceiling the pulse can reach. This is the one number that trades
     against headline legibility, since the star sits behind the type here — the keyframe
     trough drops to match so only the bright end moves. Dial this down first if the
     headline ever starts to wash out. */
  .hero .hero__glow{top:-8%;right:-16%;width:min(88vw,480px);opacity:.52}
  /* That dimming also flattens the pulse: .72->1 inside a container at .38 opacity is
     an effective .27->.38, a 1.4x swing on an already-faint element, which is why it
     read as "not animating at all" on a phone. Wider swing, same peak brightness — the
     top of the pulse still lands exactly where Noah signed it off, only the trough goes
     lower, so the headline stays just as legible. */
  .hero .starburst{animation-name:bl-twinkle-sm;animation-duration:4.2s}
  /* drop the trust row on small screens — it pushes the photo and CTA below the fold.
     The divider rule is its border-top, so it goes with it. */
  .hero__trust{display:none}
}

/* ---------- Stat strip block padding ---------- */
/* The strip is three short numbers with no heading, so a full --section-y above and
   below (5.25rem at the desktop end) left it floating in its own band. Tighten it on
   desktop only — below 680px the strip has its own compressed rules in site.css and
   the default section rhythm is already tight there. */
@media (min-width:681px){
  #glance{padding-block:clamp(2rem,3.25vw,3rem)}
}

/* small inline star used as section accent / divider */
.star-mark{width:1.5rem;height:1.5rem;color:var(--gold-deep);flex:none}
.section--teal .star-mark{color:var(--gold)}

/* ---------- "The difference" emphasis line ---------- */
/* A section headline that carries a gold italic accent. It IS an <h2> and now has no
   measure of its own, so size, weight, line-height, colour and `text-wrap:balance` all
   come from the heading rules — it wraps to its container exactly like every other
   section heading. (It used to be capped at 20ch, but `ch` scales with font-size, so
   the cap tightened as the type shrank and the heading stopped filling its column.) */
.pullpoint em{font-style:italic;color:var(--gold-deep)}
.section--teal .pullpoint em,.section--deep .pullpoint em{color:var(--gold)}

/* ---------- included-in-care checklist ---------- */
/* gap BETWEEN items must exceed the leading WITHIN an item, or a wrapped bullet
   reads as two bullets and the list stops looking like a list */
.checklist{display:grid;grid-template-columns:1fr;gap:1.6rem}
.checklist li{display:flex;gap:.8rem;align-items:flex-start;font-size:var(--fs-md);line-height:1.45}
.checklist svg{width:1.5rem;height:1.5rem;color:var(--gold-deep);flex:none;margin-top:.15rem}
.section--teal .checklist svg{color:var(--gold)}

/* ---------- Final CTA ---------- */
.cta-final{position:relative;overflow:hidden;text-align:center}
.cta-final .hero__glow{top:1%;bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:min(42vw,320px);opacity:.4}
.cta-final .wrap{position:relative;z-index:2}
.cta-final .display{color:var(--ice-bright)}
.cta-final .lead{margin-inline:auto;color:var(--ice-dim)}
.cta-final .btn-row{justify-content:center;margin-top:2rem}
.cta-final address{font-style:normal;margin-top:2rem;color:var(--ice-dim);font-size:var(--fs-md);line-height:1.7}
.cta-final address a{color:var(--ice);text-decoration:none;font-weight:700}