/* /clients: family CLIENTS "Light", signature instrument PRISM.
   One white beam falls in from the top of the page into an acrylic prism. Three straight sheets of warm light leave
   its far face (mint, amber, rose = portfolio management, financial planning, retirement). Each travels in a straight
   line until it lands on an acrylic edge (a hairline across the page) and lights it: that is where its chapter begins.
   At the close a small prism, turned the other way, takes the three back into one white beam that falls on the button.
   Every piece is placed here, from the same numbers, so the instrument renders whole with JS off; prism.js only
   straightens the sheets to the live layout and adds the motion. Spectrum colour is light, never text. */

.pr {
  --W: min(1240px, calc(100vw - 48px));     /* the shell's .wrap width */
  --pc: .80;                                /* prism centre, fraction of the wrap */
  --pw: clamp(210px, 21vw, 300px);          /* prism width */
  --pt: 104px;                              /* prism top, inside the hero */
  --exr: .3733;                             /* where the light leaves the glass: 112 / 300 of the prism width */
  --eyr: .70;                               /* ...and 210 / 280 of its height, written as a share of its width */
  --enr: .0733;                             /* where the beam meets the top face: 22 / 280 of its height, per width */
  --w0: .006;                               /* a sheet's width where it leaves the glass, fraction of the wrap */
  --lm: .60; --la: .60; --lr: .60;          /* where mint, amber, rose land, fraction of the wrap */
  --lw: .10;                                /* a sheet's width where it lands */
}
@media (max-width: 420px) { .pr { --W: calc(100vw - 32px); } }

[data-band="mint"] { --c: 174, 228, 205; --c2: 195, 237, 219; }
[data-band="amber"] { --c: 244, 221, 181; --c2: 246, 226, 190; }
[data-band="rose"] { --c: 231, 159, 196; --c2: 245, 196, 215; }
#portfolio { --l: var(--lm); }
#planning { --l: var(--la); }
#retirement { --l: var(--lr); }
.pr-debug, .pr-debug body { scroll-behavior: auto !important; }

main { position: relative; z-index: 1; display: block; overflow-x: clip; }
.hero, .part, .close { position: relative; }

/* ---- the sheets: straight trapezoids, one per band per section, joined at the section edges ---- */
.sheets { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sheets-hero { top: calc(var(--pt) + var(--eyr) * var(--pw)); }
.sh {
  position: absolute; inset: 0;
  --ax: calc(50% + (var(--a) - .5) * var(--W));
  --bx: calc(50% + (var(--b) - .5) * var(--W));
  --awl: calc(var(--aw) * var(--W));
  --bwl: calc(var(--bw) * var(--W));
}
.sheets-hero .sh { --ax: calc(50% + (var(--pc) - .5) * var(--W) - var(--pw) / 2 + var(--exr) * var(--pw)); --aw: var(--w0); }
.sh-glow { position: absolute; inset: 0; filter: blur(5px); }
.sh-o, .sh-m, .sh-c, .sh-w, .sh-p {
  position: absolute; inset: 0;
  clip-path: polygon(
    calc(var(--ax) - var(--awl) * var(--k) / 2) 0,
    calc(var(--ax) + var(--awl) * var(--k) / 2) 0,
    calc(var(--bx) + var(--bwl) * var(--k) / 2) 100%,
    calc(var(--bx) - var(--bwl) * var(--k) / 2) 100%);
}
.sh-o { --k: 1.5; background: rgba(var(--c2), .16); }
.sh-m { --k: .9; background: rgba(var(--c), .34); }
.sh-c { --k: .34; background: rgba(var(--c2), .34); }
.sh-w { --k: .12; background: rgba(255, 253, 247, .5); }
.sh-p { --k: .6; overflow: hidden; }
.sh-x {
  /* a passing sheet meets an acrylic edge: a small refraction glint at the crossing */
  position: absolute; top: 0; left: var(--ax); width: calc(var(--awl) * 1.6 + 18px); height: 22px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #FFFFFF, rgba(255, 252, 245, .9) 25%, rgba(var(--c2), .55) 55%, transparent);
}

/* where each band runs (CSS defaults for an even layout; prism.js replaces them with the measured, straight line) */
.sheets-hero [data-band="mint"] { --b: var(--lm); --bw: var(--lw); }
.sheets-hero [data-band="amber"] { --b: .703; --bw: .044; }
.sheets-hero [data-band="rose"] { --b: .728; --bw: .030; }
#portfolio .sh[data-band="amber"] { --a: .703; --aw: .044; --b: var(--la); --bw: var(--lw); }
#portfolio .sh[data-band="rose"] { --a: .728; --aw: .030; --b: .664; --bw: .065; }
#planning .sh[data-band="rose"] { --a: .664; --aw: .065; --b: var(--lr); --bw: var(--lw); }

/* ---- the beam: from above the page, behind the glass header, into the prism's top face ---- */
.beam {
  /* 120 px wide box centred on the line (a zero-width box would mask its own glow away) */
  position: absolute; z-index: 0; top: -76px; width: 120px; pointer-events: none;
  left: calc(50% + (var(--pc) - .5) * var(--W) - var(--pw) / 2 + var(--exr) * var(--pw) - 60px);
  height: calc(76px + var(--pt) + var(--enr) * var(--pw));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26px); mask-image: linear-gradient(180deg, transparent, #000 26px);
}
.beam i { position: absolute; top: 0; bottom: 0; }
.beam-glow {
  left: calc(50% - 46px); width: 92px; filter: blur(8px);
  background: linear-gradient(90deg, rgba(244, 221, 181, 0), rgba(244, 221, 181, 0.19) 24%, rgba(246, 226, 190, 0.3) 38%, rgba(255, 244, 222, 1) 46%, #FFFFFF 50%, rgba(255, 244, 222, 1) 54%, rgba(246, 226, 190, 0.3) 62%, rgba(244, 221, 181, 0.19) 76%, rgba(244, 221, 181, 0));
}
.beam-core { left: calc(50% - 2px); width: 4px; background: #FFFFFF; box-shadow: 0 0 3px 1px #FFFFFF, 0 0 0 1.5px rgba(246, 226, 190, 0.25); }

/* ---- the prism ---- */
.prism {
  position: absolute; z-index: 1; pointer-events: none;
  top: var(--pt); left: calc(50% + (var(--pc) - .5) * var(--W) - var(--pw) / 2); width: var(--pw);
}
.prism-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 24px 30px rgba(84, 68, 52, .13)); }

/* ---- hero: the text on the left, the light on the right ---- */
.hero { min-height: clamp(760px, calc(100vh - 76px), 920px); }
.hero::before {
  /* a slightly deeper, warmer ground around the prism so white light reads on pearl */
  content: ""; position: absolute; inset: -76px 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34vw 30vw at 80% 22%, rgba(214, 206, 192, .30), transparent 70%),
    radial-gradient(42vw 30vw at 66% 100%, rgba(195, 237, 219, 0.1), transparent 70%),
    radial-gradient(30vw 26vw at 96% 70%, rgba(245, 196, 215, 0.09), transparent 70%);
}
.hero-in { position: relative; z-index: 2; padding: 112px 0 120px; }
.hero h1 { font: 400 clamp(56px, 7.3vw, 116px)/.96 var(--serif); letter-spacing: -.024em; margin: 0; max-width: calc(var(--W) * .58); text-wrap: balance; }
.hero h1 em { font-style: italic; }
.lede { font-size: 20px; line-height: 1.6; color: var(--ink-2); max-width: min(30em, calc(var(--W) * .5)); margin: 40px 0 0; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 40px; }
.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; }

/* ---- the three parts: one service per screen, each opened by the edge its band lands on ---- */
.part { min-height: clamp(760px, 100vh, 940px); scroll-margin-top: 96px; }
#retirement { min-height: 0; }
#retirement .part-in { padding-bottom: 40px; }
.edge { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 0; pointer-events: none; }
.edge::before {
  /* the acrylic surface: a hairline across the whole wrap */
  content: ""; position: absolute; top: 0; left: calc(50% - var(--W) / 2); width: var(--W); height: 1px;
  background: linear-gradient(90deg, rgba(29, 33, 38, .14), rgba(29, 33, 38, .1) 70%, rgba(29, 33, 38, .04));
}
.edge i { position: absolute; display: block; }
.edge-line {
  /* lit from the landing point back across the page, the way an acrylic edge carries light */
  top: -1px; height: 3px; border-radius: 2px; left: calc(50% - var(--W) / 2); width: calc((var(--l) + var(--lw) * .5) * var(--W));
  background: linear-gradient(90deg, rgba(var(--c), .5), rgba(var(--c), .85) 55%, rgba(var(--c2), 1) 82%, #FFFFFF 94%, rgba(var(--c2), .9));
  box-shadow: 0 0 10px 1px rgba(var(--c2), .8), 0 0 34px 8px rgba(var(--c2), .32);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%); mask-image: linear-gradient(90deg, transparent, #000 38%);
  transform-origin: 100% 50%; transition: transform 1.8s var(--ease), opacity .8s var(--ease);
}
.edge-knot {
  top: 0; left: calc(50% + (var(--l) - .5) * var(--W)); width: calc(var(--lw) * var(--W) * 2.2); height: 64px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #FFFFFF, rgba(255, 252, 245, .95) 18%, rgba(var(--c2), .7) 42%, rgba(var(--c), .18) 72%, transparent);
  transition: opacity 1.2s var(--ease), transform 1.4s var(--ease);
}
.edge-spill {
  /* the light that comes through the edge, washing down over the chapter */
  top: 0; left: calc(50% + (var(--l) - .5) * var(--W)); width: 1800px; height: 700px; transform: translateX(-62%);
  background:
    radial-gradient(38% 62% at 62% 0, rgba(var(--c2), .30), rgba(var(--c), .13) 34%, rgba(var(--c), .055) 58%, rgba(var(--c), .018) 80%, rgba(var(--c), 0) 100%),
    radial-gradient(12% 34% at 62% 0, rgba(255, 252, 245, .7), transparent 96%);
  transition: opacity 1.6s var(--ease);
}
.part-in { position: relative; z-index: 1; padding: 132px 0 150px; }
.part-in > * { max-width: calc(var(--W) * .56); }
.part h2 { font: 400 clamp(46px, 5.3vw, 82px)/1 var(--serif); letter-spacing: -.018em; margin: 0; max-width: 10em; text-wrap: balance; }
.part-body { font-size: 20px; line-height: 1.62; color: var(--ink-2); margin: 30px 0 0; max-width: min(31em, calc(var(--W) * .5)); }
.covers { list-style: none; margin: 30px 0 0; padding: 0; font: 500 14.5px/1.9 var(--sans); color: var(--ink-2); }
.covers li { display: inline-block; white-space: nowrap; } /* inline-block: rows wrap between items at phone width (PENTA 11-08) */
.covers li:not(:last-child)::after { content: "/"; margin: 0 .75em; color: var(--ink-3); font-weight: 400; }
.go {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 22px; padding: 0 2px;
  font: 600 15px/1 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: rgba(29, 33, 38, .35);
  text-underline-offset: 6px;
}
.go::after { content: "\2192"; text-decoration: none; display: inline-block; transition: transform .35s var(--ease); }
.go:hover { text-decoration-color: currentColor; }
.go:hover::after { transform: translateX(4px); }

/* ---- close: the three go back into one ---- */
.close { padding: 150px 0 90px; text-align: center; }
.close::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40vw 34vw at 50% 58%, rgba(255, 252, 245, .9), transparent 70%);
}
.close-in { position: relative; z-index: 1; }
.close h2 { font: 400 clamp(52px, 7vw, 112px)/.98 var(--serif); letter-spacing: -.022em; margin: 0 auto; max-width: 10em; text-wrap: balance; }
.close h2 em { font-style: italic; }
.recombine { position: relative; width: min(520px, 92vw); aspect-ratio: 520 / 360; margin: 28px auto 0; }
.rc-sheets { position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible; }
.rc-prism { position: absolute; left: calc(50% - .3733 * 38.46%); top: 33.33%; width: 38.46%; filter: drop-shadow(0 -18px 24px rgba(84, 68, 52, .12)); }
.rc-prism svg { display: block; width: 100%; height: auto; overflow: visible; transform: scaleY(-1); }
.rc-beam { left: calc(50% - 60px); top: 81.1%; bottom: 0; height: auto; -webkit-mask-image: none; mask-image: none; }
.rc-in, .rc-white, .rc-beam { transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.close-btn { position: relative; z-index: 1; margin-top: -1px; transition: transform .35s var(--ease), box-shadow 1.4s var(--ease), background .35s; }
.close.is-lit .close-btn, html:not(.js) .close .close-btn {
  box-shadow: 0 10px 24px -12px rgba(29, 33, 38, .6), 0 0 0 6px rgba(255, 255, 255, .95), 0 0 0 7.5px rgba(244, 221, 181, 0.4), 0 0 40px 12px rgba(246, 226, 190, 0.27);
}
.close-lede { position: relative; z-index: 2; max-width: 30em; margin: 34px auto 0; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.before { max-width: 42em; margin: 72px auto 0; padding-top: 22px; border-top: 1px solid var(--line); text-align: left; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.before p { margin: 0 0 10px; }
.before a { color: var(--ink); text-decoration-color: rgba(29, 33, 38, .45); text-underline-offset: 3px; padding-block: 12px; }
.before a:hover { text-decoration-color: currentColor; }
.small-print { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); text-align: center; margin: 0 auto; padding: 8px 0 72px; }

/* ---- motion (only when prism.js adds .pr-anim: motion allowed and no ?p=; JS off and reduced motion show the end state) ---- */
.js.pr-anim .beam { animation: pr-beam 1.1s var(--ease) .2s both; transform-origin: 50% 0; }
.js.pr-anim .pr-inbeam { animation: pr-fade .6s var(--ease) 1.05s both; }
.js.pr-anim .pr-flare, .js.pr-anim .pr-exitglow { animation: pr-flare 1.6s var(--ease) 1.25s both; transform-box: fill-box; transform-origin: 50% 50%; }
.js.pr-anim .sheets-hero { animation: pr-sheets 1.9s var(--ease) 1.35s both; }
.js.pr-anim .pr-sheen { animation: pr-sheen 11s ease-in-out 2s infinite alternate; }
.js.pr-anim .sh-p::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0));
  transform: translateY(-110%); animation: pr-pulse 8s linear infinite;
}
.js.pr-anim [data-band="amber"] > .sh-p::after { animation-duration: 9.5s; animation-delay: -3s; }
.js.pr-anim [data-band="rose"] > .sh-p::after { animation-duration: 11s; animation-delay: -6.5s; }
.js.pr-anim .part .sh-p::after { animation-delay: -1.5s; }
.js.pr-anim section:not(.in-view) .sh-p::after, .js.pr-anim section:not(.in-view) .pr-sheen,
.pr-paused .sh-p::after, .pr-paused .pr-sheen, .pr-paused * { animation-play-state: paused !important; }

.js.pr-anim .part:not(.is-lit) .edge-line { transform: scaleX(0); opacity: 0; }
.js.pr-anim .part:not(.is-lit) .edge-knot { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
.js.pr-anim .part:not(.is-lit) .edge-spill { opacity: 0; }
.js.pr-anim .part.is-arriving .edge-knot { animation: pr-land 2.2s var(--ease) both; }

.js.pr-anim .close:not(.is-lit) .rc-in { opacity: 0; }
.js.pr-anim .close:not(.is-lit) .rc-white { opacity: 0; }
.js.pr-anim .close:not(.is-lit) .rc-beam { opacity: 0; transform: scaleY(0); }
.rc-beam { transform-origin: 50% 0; }
.js.pr-anim .close.is-lit .rc-white { transition-delay: .8s; }
.js.pr-anim .close.is-lit .rc-beam { transition-delay: 1.1s; transition-duration: 1.2s; }

@keyframes pr-beam { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pr-flare { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pr-sheets { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pr-sheen { from { transform: translate(0, 0); opacity: .55; } to { transform: translate(-34px, 58px); opacity: .25; } }
@keyframes pr-pulse { from { transform: translateY(-110%); } to { transform: translateY(345%); } }
@keyframes pr-land {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.45); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---- phone: the prism turns to face the right edge; the bands run down that side, each lighting its edge ---- */
@media (max-width: 760px) {
  .pr {
    --pc: .80; --pw: 128px; --pt: 18px; --exr: .6267; --w0: .01;
    --lm: .955; --la: .915; --lr: .875; --lw: .065;
  }
  .prism-svg { transform: scaleX(-1); filter: drop-shadow(0 14px 18px rgba(84, 68, 52, .13)); }
  .sh-glow { filter: blur(3px); }
  .sheets-hero [data-band="amber"] { --b: .878; --bw: .034; }
  .sheets-hero [data-band="rose"] { --b: .854; --bw: .024; }
  #portfolio .sh[data-band="amber"] { --a: .878; --aw: .034; }
  #portfolio .sh[data-band="rose"] { --a: .854; --aw: .024; --b: .865; --bw: .045; }
  #planning .sh[data-band="rose"] { --a: .865; --aw: .045; }
  .beam-glow { left: calc(50% - 22px); width: 44px; filter: blur(4px); }
  .hero { min-height: 0; }
  .hero::before { background: radial-gradient(70vw 60vw at 84% 6%, rgba(214, 206, 192, .32), transparent 70%), radial-gradient(80vw 50vw at 90% 100%, rgba(195, 237, 219, 0.12), transparent 70%); }
  .hero-in { padding: 46px 64px 84px 0; }
  .hero-in .eyebrow { margin-bottom: 96px; }
  .hero h1 { font-size: clamp(42px, 12.2vw, 60px); line-height: 1; max-width: none; }
  .lede { font-size: 17.5px; max-width: none; margin-top: 28px; }
  .hero-cta { margin-top: 30px; gap: 8px 22px; }
  .part { min-height: 0; }
  .part-in { padding: 76px 64px 96px 0; }
  .part-in > * { max-width: none; }
  .part h2 { font-size: clamp(36px, 10.4vw, 48px); line-height: 1.02; }
  .part-body { font-size: 17px; margin-top: 20px; max-width: none; }
  .covers { font-size: 14px; margin-top: 22px; }
  .edge-knot { height: 44px; }
  .edge-spill { width: 760px; height: 460px; transform: translateX(-80%); }
  .close { padding: 120px 0 64px; }
  .close h2 { font-size: clamp(44px, 12.4vw, 60px); }
  .recombine { width: min(360px, 92vw); margin-top: 18px; }
  .close-lede { font-size: 17px; }
  .before { margin-top: 56px; font-size: 14.5px; }
  .small-print { text-align: left; padding-bottom: 56px; }
}