/* /clients/financial-planning: family CLIENTS "Light", signature instrument LIGHT PATH.
   One caustic line of warm light runs from the last word of the headline through six planning areas, a calm rail
   through How it works, and ends in a sunrise behind the closing invitation. Spectrum is light, never text colour. */
.fp { --rail-l: 9%; --rail-r: 91%; }
[data-hue="amber"] { --h: 244, 221, 181; --h2: 246, 226, 190; }
[data-hue="rose"] { --h: 231, 159, 196; --h2: 245, 196, 215; }
[data-hue="mint"] { --h: 174, 228, 205; --h2: 195, 237, 219; }
.lp-debug, .lp-debug body { scroll-behavior: auto !important; }

/* ---- layers ---- */
#caustic { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.8s var(--ease); }
.caustic-on #caustic { opacity: 1; }
main { position: relative; z-index: 1; display: block; overflow-x: clip; }
.lp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; display: none; }
.js .lp.is-ready { display: block; }
/* stacking inside main: hero wash, pools, then the caustic canvas (-1, in that DOM order) < the light path (0) < every word (1) */
.hero, .stage, .stage-in, .how, .close, .close-in { position: relative; }
.hero-in, .txt, .num, .how-in, .close h2, .close-cta, .small-print { position: relative; z-index: 1; }

/* the line: nine stacked strokes, widest and faintest first, so the glow falls off smoothly (no SVG filters, so a
   redraw on scroll stays cheap), and a warm-white filament on top */
.lp-s { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lp-s1 { stroke: url(#lp-hue-soft); stroke-width: 112; opacity: .035; }
.lp-s2 { stroke: url(#lp-hue-soft); stroke-width: 84; opacity: .045; }
.lp-s3 { stroke: url(#lp-hue-soft); stroke-width: 62; opacity: .055; }
.lp-s4 { stroke: url(#lp-hue-soft); stroke-width: 45; opacity: .065; }
.lp-s5 { stroke: url(#lp-hue-soft); stroke-width: 32; opacity: .09; }
.lp-s6 { stroke: url(#lp-hue); stroke-width: 22; opacity: .11; }
.lp-s7 { stroke: url(#lp-hue); stroke-width: 14; opacity: .17; }
.lp-s8 { stroke: url(#lp-hue); stroke-width: 8; opacity: .32; }
.lp-s9 { stroke: url(#lp-hue); stroke-width: 4.4; opacity: .78; }
.lp-core { stroke: #FFFDF8; stroke-width: 1.9; }
.lp-head { opacity: 0; transition: opacity .6s var(--ease); }
.lp.is-drawing .lp-head { opacity: 1; }
.lp.is-done .lp-head { opacity: .85; }

/* ---- hero: quiet, tall, the headline alone ---- */
.hero { position: relative; min-height: min(calc(100vh - 76px), 980px); display: flex; align-items: center; padding: 64px 0 150px; }
.hero::before {
  content: ""; position: absolute; inset: -76px 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46vw 34vw at 88% 6%, rgba(246, 226, 190, 0.22), transparent 70%),
    radial-gradient(40vw 30vw at 62% -4%, rgba(245, 196, 215, 0.14), transparent 70%),
    radial-gradient(36vw 28vw at -6% 96%, rgba(195, 237, 219, 0.12), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.hero h1 { font: 400 clamp(56px, 8.7vw, 140px)/.95 var(--serif); letter-spacing: -.024em; margin: 0; }
.hero h1 .l { display: block; }
.hero h1 .l:nth-child(2) { padding-left: .9em; }
.hero h1 .l:nth-child(3) { padding-left: 1.8em; }
.lp-origin { position: relative; white-space: nowrap; }
/* the source: light leaves the full stop of the headline (glow is light behind the glyph, the glyph stays graphite) */
.lp-dot { position: relative; }
.lp-dot::before {
  content: ""; position: absolute; left: 50%; bottom: .29em; width: .62em; height: .62em; transform: translate(-50%, 50%);
  z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #FFFFFF 0 7%, rgba(255, 246, 226, .95) 13%, rgba(246, 226, 190, 0.45) 28%, rgba(245, 196, 215, 0.16) 48%, transparent 70%);
}
.lede { font-size: 20px; line-height: 1.62; color: var(--ink-2); max-width: min(27em, 56%); margin: 56px 0 0; }

/* ---- the six areas: a winding sequence the light visits ---- */
.stages { list-style: none; margin: 0; padding: 0; }
.stage { position: relative; }
.stage-in { position: relative; display: grid; align-items: center; min-height: clamp(470px, 64vh, 620px); }
.s-l .stage-in { grid-template-columns: 18% minmax(0, 48%) 1fr; }
.s-r .stage-in { grid-template-columns: 1fr minmax(0, 46%) 18%; }
.s-l .num { grid-column: 1; grid-row: 1; }
.s-l .txt { grid-column: 2; grid-row: 1; }
.s-r .txt { grid-column: 2; grid-row: 1; }
.s-r .num { grid-column: 3; grid-row: 1; }
.num {
  position: relative; z-index: 1; justify-self: center; font: italic 400 clamp(110px, 11vw, 172px)/.8 var(--serif);
  color: var(--ink-2); transition: text-shadow 1.4s var(--ease);
}
.txt { position: relative; z-index: 1; padding-inline: 3%; }
.txt h2 { font: 400 clamp(40px, 4.3vw, 64px)/1.03 var(--serif); letter-spacing: -.014em; margin: 0 0 18px; max-width: 11em; }
.txt p { font-size: 19px; line-height: 1.62; color: var(--ink-2); margin: 0; max-width: 23em; }

/* the pool of light behind each title: a hot spot at the numeral, a soft ellipse spreading under the title */
.bloom {
  position: absolute; z-index: -1; top: 50%; width: 900px; height: 560px; pointer-events: none;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side at var(--hx, 26%) 50%, rgba(255, 252, 245, .95), rgba(var(--h2), .62) 22%, rgba(var(--h2), .18) 58%, transparent 80%),
    radial-gradient(closest-side, rgba(var(--h2), .36), rgba(var(--h), .12) 52%, transparent);
}
.s-l .bloom { left: calc(var(--rail-l) + 240px); --hx: 23%; }
.s-r .bloom { left: calc(var(--rail-r) - 240px); --hx: 77%; }
.js .bloom { opacity: 0; transform: translate(-50%, -50%) scale(.5); transition: opacity 1.3s var(--ease), transform 1.8s var(--ease); }
.js .is-lit .bloom { opacity: .92; transform: translate(-50%, -50%) scale(1); }
.js .is-pooling .bloom { animation: pool 2s var(--ease) both; }
@keyframes pool {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.36); }
  32% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: .92; transform: translate(-50%, -50%) scale(1); }
}
@keyframes pool-end {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.36); }
  32% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: .92; transform: translate(-50%, -50%) scale(1); }
}
.is-lit .num, html:not(.js) .num { text-shadow: 0 0 34px rgba(var(--h2), .9), 0 0 2px rgba(255, 255, 255, .9); }

/* ---- how it works: the light settles into one calm, straight rail ---- */
.how { padding: 140px 0 40px; }
.how-in { display: grid; grid-template-columns: 18% minmax(0, 1fr); }
.how h2 { grid-column: 2; font: 400 clamp(46px, 5.2vw, 80px)/1 var(--serif); letter-spacing: -.016em; margin: 0 0 40px; padding-left: 3%; }
.steps { grid-column: 2; list-style: none; margin: 0; padding: 0; }
.steps li { position: relative; padding: 30px 0 30px 3%; font: 400 clamp(28px, 2.7vw, 40px)/1.22 var(--serif); color: var(--ink); }
/* the node sits on the rail: rail is 9% of the wrap, the list column starts at 18%, so 9 / 82 of the list width back */
.node {
  position: absolute; left: -10.9756%; top: calc(30px + .62em); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, rgba(246, 226, 190, 0.65) 46%, rgba(245, 196, 215, 0) 72%);
  box-shadow: 0 0 0 1px rgba(29, 33, 38, .16);
  transition: box-shadow 1s var(--ease), transform 1s var(--ease);
}
.js .steps li:not(.is-lit) .node { transform: scale(.6); background: var(--pearl); }
.steps li.is-lit .node, html:not(.js) .node { box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 0 22px 8px rgba(246, 226, 190, 0.4), 0 0 60px 18px rgba(245, 196, 215, 0.18); }
.fee { grid-column: 2; margin: 36px 0 0 3%; padding-top: 22px; border-top: 1px solid rgba(29, 33, 38, .14); max-width: 36em; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.fee a { color: var(--ink); text-decoration-color: rgba(29, 33, 38, .45); text-underline-offset: 3px; }
.fee a:hover { text-decoration-color: currentColor; }

/* ---- closing: where the light arrives ---- */
.close { padding: 230px 0 120px; text-align: center; }
.close-in { position: relative; }
.close h2 { position: relative; z-index: 1; font: 400 clamp(58px, 8.2vw, 132px)/.96 var(--serif); letter-spacing: -.022em; margin: 0 auto 48px; max-width: 9em; }
.close-cta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center; align-items: center; }
.text-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; font: 500 15px/1 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: rgba(29, 33, 38, .4); text-underline-offset: 6px; }
.text-link:hover { text-decoration-color: currentColor; }
.bloom-end {
  /* centred on the light's end point (fp.js sets --ex / --ey from the path; these defaults match the CSS layout) */
  left: var(--ex, 50%); top: var(--ey, -36px); width: min(1240px, 120vw); height: 720px; --h: 244, 221, 181; --h2: 246, 226, 190;
  background:
    radial-gradient(closest-side, rgba(255, 252, 245, .92), rgba(246, 226, 190, 0.4) 17%, rgba(245, 196, 215, 0.19) 42%, rgba(195, 237, 219, 0.09) 66%, transparent 86%),
    radial-gradient(closest-side, rgba(245, 196, 215, 0.1), transparent);
}
.close.is-lit .btn-ink, html:not(.js) .close .btn-ink { box-shadow: 0 10px 24px -12px rgba(29, 33, 38, .6), 0 0 0 5px rgba(255, 250, 240, .9), 0 0 40px 12px rgba(246, 226, 190, 0.32); }
.btn-ink { transition: transform .35s var(--ease), box-shadow 1.2s var(--ease), background .35s; }

.small-print { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); text-align: center; margin: 0 auto; padding: 8px 0 72px; }

/* ---- phone: the light runs down one side (right), every area on the same rail ---- */
@media (max-width: 760px) {
  .hero { min-height: auto; padding: 52px 0 84px; }
  .hero-in { padding-right: 46px; }
  .hero h1 { font-size: clamp(44px, 12.6vw, 62px); line-height: .98; }
  .hero h1 .l { display: inline; padding-left: 0 !important; }
  .lede { font-size: 17.5px; margin-top: 30px; max-width: none; }
  .stage-in, .s-l .stage-in, .s-r .stage-in { grid-template-columns: minmax(0, 1fr) 46px; align-items: start; min-height: 0; padding: 58px 0; }
  .s-l .txt, .s-r .txt { grid-column: 1; grid-row: 1; padding: 0; }
  .s-l .num, .s-r .num { grid-column: 2; grid-row: 1; font-size: 50px; line-height: .9; margin-top: -2px; }
  .txt h2 { font-size: clamp(34px, 9.6vw, 44px); margin-bottom: 12px; }
  .txt p { font-size: 17px; }
  .bloom, .s-l .bloom, .s-r .bloom { left: auto; right: -170px; top: 90px; width: 560px; height: 340px; transform: translate(0, -50%); --hx: 63%; }
  .lp-s1 { stroke-width: 64; } .lp-s2 { stroke-width: 50; } .lp-s3 { stroke-width: 38; } .lp-s4 { stroke-width: 28; } .lp-s5 { stroke-width: 20; }
  .lp-s6 { stroke-width: 14; } .lp-s7 { stroke-width: 9; } .lp-s8 { stroke-width: 6; } .lp-s9 { stroke-width: 3.4; } .lp-core { stroke-width: 1.6; }
  .js .bloom { transform: translate(0, -50%) scale(.5); }
  .js .is-lit .bloom { transform: translate(0, -50%) scale(1); }
  @keyframes pool { 0% { opacity: 0; transform: translate(0, -50%) scale(.36); } 32% { opacity: 1; transform: translate(0, -50%) scale(1.08); } 100% { opacity: .92; transform: translate(0, -50%) scale(1); } }
  .how { padding: 80px 0 20px; }
  .how-in { grid-template-columns: minmax(0, 1fr) 46px; }
  .how h2, .steps, .fee { grid-column: 1; padding-left: 0; margin-left: 0; }
  .how h2 { margin-bottom: 18px; }
  .steps li { padding: 22px 0; font-size: 26px; }
  .node { left: auto; right: -23px; top: calc(22px + .62em); margin: -7px -7px 0 0; }
  .close { padding: 140px 0 72px; text-align: left; }
  .close h2 { margin: 0 0 32px; font-size: clamp(50px, 14vw, 64px); max-width: 7em; padding-right: 40px; }
  .close-cta { justify-content: flex-start; }
  .bloom-end { left: var(--ex, calc(100% - 23px)); right: auto; top: var(--ey, 54px); width: 640px; height: 460px; }
  .js .bloom-end { transform: translate(-50%, -50%) scale(.5); }
  .js .is-lit .bloom-end { transform: translate(-50%, -50%) scale(1); }
  .js .is-pooling .bloom-end { animation: pool-end 2s var(--ease) both; }
  .small-print { text-align: left; padding-bottom: 56px; }
}