/* ==== T1 motion pass 6 (review build) ====
   Active ONLY when motion.js adds html.mo — gated behind ?motionDemo=1. Without the flag this
   stylesheet is inert and the page behaves exactly as the locked baseline. html[data-mo-pre]
   is set by a tiny inline head script (same gate, incl. reduced-motion) BEFORE first paint —
   no flash of finished hero content, zero headline glyph pixels at frame one.
   Pass-5: the opening event is a Navy veil across the hero photography that retracts
   horizontally (900ms) with a feathered diagonal edge; the photograph settles from
   scale(1.015) with 10px horizontal depth — exposed by light, not a sliding panel.
   Core hero composed by ~1.5–1.7s; above-fold Audience Routing
   concludes the opening (delays set by motion.js). Section entrances are content-anchored. */
html.mo{--mo-ease:cubic-bezier(.22,1,.36,1);--mo-ui:200ms;--mo-sm:520ms;--mo-lg:650ms;--radius-media:6px}
/* The baseline whole-section .rv reveal is superseded by per-element choreography. */
html.mo .rv{opacity:1;transform:none;transition:none}
/* --- Step 7H hero: architectural reveal. Pre-paint (data-mo-pre, before motion.js): photograph
   beneath a solid Navy veil, hero copy not yet painted. :not(.mo-hero) hands control to motion.js;
   the inline 3s failsafe un-gates everything if motion.js never runs. --- */
html[data-mo-pre] .hero--media:not(.mo-hero) .rule48{transform:scaleX(0)}
html[data-mo-pre] .hero--media:not(.mo-hero) .eyebrow,html[data-mo-pre] .hero--media:not(.mo-hero) h1,html[data-mo-pre] .hero--media:not(.mo-hero) .lead,html[data-mo-pre] .hero--media:not(.mo-hero) .heroactions .ds-btn,html[data-mo-pre] .hero--media:not(.mo-hero) .hero-tert{opacity:0}
/* Veil: Navy field with ONE clean vertical edge. A 1px Sky hairline on the edge with a ~64px
   low-opacity Sky falloff onto the photograph side (restrained architectural light, no glow).
   The edge starts 120px off-canvas left and travels off-canvas right (100 to 800ms); transform
   only. Removed from the tree when the opening settles. */
html[data-mo-pre] .hero--media:not(.mo-hero)::after,html.mo .mo-hero::after{content:"";position:absolute;top:0;bottom:0;left:-120px;right:0;background:linear-gradient(90deg,rgba(145,195,235,0) 119px,rgba(145,195,235,.5) 119px,rgba(145,195,235,.5) 120px,rgba(145,195,235,0) 120px),linear-gradient(90deg,rgba(145,195,235,0) 56px,rgba(145,195,235,.09) 119px,rgba(145,195,235,0) 119px),linear-gradient(90deg,rgba(0,27,54,0) 119px,var(--navy-800) 119px);z-index:1;pointer-events:none;will-change:transform}
html.mo .mo-hero::after{transition:transform 700ms cubic-bezier(.65,0,.25,1) 100ms}
html.mo .mo-hero.mo-hero-in::after{transform:translate3d(calc(100% + 2px),0,0)}
html.mo .mo-hero.mo-hero-done::after{content:none}
html.mo .mo-hero .container{position:relative;z-index:2}
/* Photograph settle, felt more than noticed: scale 1.015 / -10px to rest across the reveal. */
html.mo .mo-hero .hero__img{transform:translate3d(-10px,0,0) scale(1.015)}
html.mo .mo-hero:not(.mo-hero-done) .hero__img{will-change:transform;transition:transform 1100ms cubic-bezier(.2,.6,.2,1) 100ms}
html.mo .mo-hero.mo-hero-in .hero__img{transform:translate3d(0,0,0) scale(1)}
@media (min-width:761px){
html.mo .mo-hero .hero__img{top:-16px;height:calc(100% + 32px)}
}
/* Copy, three beats (7I: first beat shifted +130ms so the veil edge has cleared the text column):
   rule + eyebrow + whole H1 as one composition 430 to 830ms; lead 660 to 1020ms; both Fund CTAs
   860 to 1200ms; financing link last 990 to 1270ms. Opacity + 10px rise only. */
html.mo .mo-hero .rule48{transform:scaleX(0);transform-origin:0 50%;transition:transform 400ms cubic-bezier(.2,.6,.2,1) 430ms}
html.mo .mo-hero.mo-hero-in .rule48{transform:scaleX(1)}
html.mo .mo-hero .eyebrow,html.mo .mo-hero h1,html.mo .mo-hero .lead,html.mo .mo-hero .heroactions .ds-btn,html.mo .mo-hero .hero-tert{opacity:0;transform:translate3d(0,10px,0);transition:opacity 400ms cubic-bezier(.2,.6,.2,1) 430ms,transform 400ms cubic-bezier(.2,.6,.2,1) 430ms}
html.mo .mo-hero .lead{transition-duration:360ms;transition-delay:660ms}
html.mo .mo-hero .heroactions .ds-btn{transition-duration:340ms;transition-delay:860ms}
html.mo .mo-hero .hero-tert{transition-duration:280ms;transition-delay:990ms}
html.mo .mo-hero.mo-hero-in .eyebrow,html.mo .mo-hero.mo-hero-in h1,html.mo .mo-hero.mo-hero-in .lead,html.mo .mo-hero.mo-hero-in .heroactions .ds-btn,html.mo .mo-hero.mo-hero-in .hero-tert{opacity:1;transform:none}
/* --- reveal atoms (classes applied by motion.js; --mo-d carries the per-element delay) --- */
html.mo .mo-r{opacity:0;transform:translateY(24px);transition:opacity var(--mo-lg) var(--mo-ease) var(--mo-d,0ms),transform var(--mo-lg) var(--mo-ease) var(--mo-d,0ms)}
html.mo .mo-rx{opacity:0;transform:translateX(24px);transition:opacity var(--mo-lg) var(--mo-ease) var(--mo-d,0ms),transform var(--mo-lg) var(--mo-ease) var(--mo-d,0ms)}
html.mo .mo-l{transform:scaleX(0);transform-origin:0 50%;transition:transform 680ms var(--mo-ease) var(--mo-d,0ms)}
html.mo .mo-img{clip-path:inset(0 100% 0 0);transition:clip-path 820ms var(--mo-ease) var(--mo-d,0ms)}
/* Direct photo reveal: the frame stays put and the photograph itself comes up out of a soft
   under-exposure with a feathered bottom-edge mask. Nothing is clipped into hard bands, so no
   placeholder colour blocks are ever exposed mid-reveal. */
html.mo .mo-photo{opacity:.001;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0%,#000 62%,rgba(0,0,0,0) 100%);-webkit-mask-size:100% 190%;mask-size:100% 190%;-webkit-mask-position:0 -90%;mask-position:0 -90%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:opacity 900ms var(--mo-ease) var(--mo-d,0ms),-webkit-mask-position 1050ms var(--mo-ease) var(--mo-d,0ms),mask-position 1050ms var(--mo-ease) var(--mo-d,0ms)}
html.mo .mo-photo>*{filter:brightness(.82) saturate(.88);transform:scale(1.028);transition:filter 1100ms var(--mo-ease) var(--mo-d,0ms),transform 1250ms var(--mo-ease) var(--mo-d,0ms)}
html.mo .mo-in .mo-photo{opacity:1;-webkit-mask-position:0 0;mask-position:0 0}
html.mo .mo-in .mo-photo>*{filter:none;transform:none}
html.mo .mo-in .mo-r,html.mo .mo-in .mo-rx{opacity:1;transform:none}
html.mo .mo-in .mo-l{transform:scaleX(1)}
html.mo .mo-in .mo-img{clip-path:inset(0 0 0 0)}
/* Sections already scrolled past (load position or fast scroll-past) resolve instantly. */
html.mo .mo-skip .mo-r,html.mo .mo-skip .mo-rx,html.mo .mo-skip .mo-l,html.mo .mo-skip .mo-img,html.mo .mo-skip .mo-photo,html.mo .mo-skip .mo-photo>*{transition:none}
/* --- header: quiet compaction past the hero; height never changes (no layout shift) --- */
@media (min-width:1200px){
html.mo header.site{transition:background-color var(--mo-ui) var(--mo-ease),box-shadow var(--mo-ui) var(--mo-ease)}
html.mo .brand .ds-logo{transition:height var(--mo-ui) var(--mo-ease)}
html.mo.mo-scrolled header.site{background:rgba(247,244,238,.985);box-shadow:0 8px 24px rgba(0,43,84,.07)}
html.mo.mo-scrolled .brand .ds-logo{height:46px !important}
}
/* --- navigation panel entrance + gentle row stagger --- */
html.mo .navpanel[data-open="true"]{animation:mo-panel 220ms var(--mo-ease)}
@keyframes mo-panel{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
html.mo .navpanel[data-open="true"] .mega-row,html.mo .navpanel[data-open="true"] .mega-mini{animation:mo-fade 300ms var(--mo-ease) backwards}
@keyframes mo-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
html.mo .navpanel[data-open="true"] .mega-group .mega-row:nth-child(3){animation-delay:35ms}
html.mo .navpanel[data-open="true"] .mega-group .mega-row:nth-child(4){animation-delay:70ms}
html.mo .navpanel[data-open="true"] .mega-group .mega-row:nth-child(5){animation-delay:105ms}
html.mo .navpanel[data-open="true"] .mega-group .mega-row:nth-child(6){animation-delay:140ms}
html.mo .navpanel[data-open="true"] .mega-group .mega-row:nth-child(7){animation-delay:175ms}
html.mo .navpanel[data-open="true"] .mega-rail .mega-mini{animation-delay:80ms}
html.mo .navpanel[data-open="true"] .mega-rail .mega-mini+.mega-mini{animation-delay:150ms}
/* --- triage hover refinement (3–4px arrow travel per the motion brief) --- */
html.mo .tri-panel:hover .tri-panel__ar{transform:translateX(4px)}
/* --- track record: heading first, dividers draw, then the metrics uncover --- */
html.mo .proofband .ds-proof__item{border-left-color:transparent;position:relative}
html.mo .proofband .ds-proof__item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--border-inverse);transform:scaleY(0);transform-origin:50% 0;transition:transform 620ms var(--mo-ease) var(--mo-d,0ms)}
html.mo .proofband.mo-in .ds-proof__item::before{transform:scaleY(1)}
/* 7M/7N Fund proof: every column keeps its anchor hairline; 8px settle over 560ms for value, label
   and description (the shared 24px/650ms rise is too much at 56px). */
html.mo .fproof .ds-proof__value.mo-r,html.mo .fproof .ds-proof__label.mo-r,html.mo .fproof .ds-proof__qual.mo-r{transform:translateY(8px);transition-duration:560ms}
html.mo .fproof.mo-in .ds-proof__value.mo-r,html.mo .fproof.mo-in .ds-proof__label.mo-r,html.mo .fproof.mo-in .ds-proof__qual.mo-r{transform:none}
/* --- 7R operating timeline: each connector segment draws DOWNWARD (scaleY, transform only) after its
   step resolves, so the line appears to be drawn top to bottom in step with the stagger --- */
html.mo .plat .plat-step::after{transform:scaleY(0);transform-origin:50% 0;transition:transform 300ms var(--mo-ease) var(--mo-d,0ms)}
html.mo .plat.mo-in .plat-step::after{transform:scaleY(1)}
html.mo .plat .plat-step.mo-r{transform:translateY(8px)}
/* --- section-opener Sun rules draw --- */
html.mo .stories-eyebrow::before,html.mo .insv-eyebrow::before{transform:scaleX(0);transform-origin:0 50%;transition:transform 680ms var(--mo-ease)}
html.mo .mo-in .stories-eyebrow::before,html.mo .mo-in .insv-eyebrow::before{transform:scaleX(1)}
/* --- Success Stories carousel (Motion Pass 3.2, demo layer): fixed-card horizontal
   scroll-snap carousel built by motion.js from #ap-stories-rail. Three equal landscape
   cards + a peek of the fourth on desktop (~2.2 tablet, ~1.1 mobile); native scroll/drag
   with snap; prev/next move one card; no autoplay, no card resizing, no image scaling
   during movement. Each card is self-contained: photo → Navy proof band (ROI + investment,
   payoff/rate/position/LTV) → location/headline/description/link, all in the established
   type, gradient and 6px-radius language. --- */
html.mo .stories-list.srail{display:block}
html.mo .srail-clip{overflow-x:auto;overflow-y:hidden;padding-top:26px;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
html.mo .srail-clip::-webkit-scrollbar{display:none}
html.mo .srail-clip.is-drag{scroll-snap-type:none;cursor:grabbing}
html.mo .srail-track{display:flex;gap:16px;align-items:stretch}
html.mo .srail-card{flex:0 0 var(--sr-w,404px);scroll-snap-align:start;display:flex;flex-direction:column;padding-top:0;color:inherit;text-decoration:none}
html.mo .srail-card .story__photo{margin:0}
html.mo .srail-card .story__meta{margin-top:14px}
/* proof band: ROI block over a metadata row — same band, stacked for the fixed card */
html.mo .srail-card .ssb{display:block;border-radius:0 0 var(--radius-media) var(--radius-media);padding:14px 18px 13px}
html.mo .srail-card .ssb__ctx{white-space:nowrap}
html.mo .srail-card .ssb__row{display:flex;margin:12px 0 0;padding:0;list-style:none}
html.mo .srail-card .ssb__row li{flex:0 0 auto;display:flex;flex-direction:column;gap:3px}
html.mo .srail-card .ssb__row li+li{border-left:1px solid rgba(145,195,235,.28);margin-left:10px;padding-left:11px}
html.mo .srail-card .ssb__row strong{font-family:var(--font-sans);font-weight:600;font-size:13px;line-height:1.2;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
html.mo .srail-card .ssb__row span{font-family:var(--font-sans);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-sky);white-space:nowrap}
html.mo .srail-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:20px}
/* Moved into the section heading row: right-aligned, sitting on the rail's top hairline. */
html.mo .srail-foot--head{grid-column:9 / span 4;justify-self:end;align-self:end;margin:0 0 -6px}
@container page (max-width:1100px){html.mo .srail-foot--head{grid-column:1 / -1;justify-self:start;margin:14px 0 -4px}}
html.mo .srail-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:4px;color:var(--brand-navy);cursor:pointer;transition:background var(--mo-ui) var(--mo-ease),border-color var(--mo-ui) var(--mo-ease),opacity var(--mo-ui) var(--mo-ease)}
html.mo .srail-btn:hover{background:var(--navy-050,#EDF2F7);border-color:var(--brand-navy)}
html.mo .srail-btn:focus-visible{outline:2px solid var(--brand-accent);outline-offset:2px}
html.mo .srail-btn[disabled]{opacity:.35;cursor:default;background:#fff;border-color:var(--line)}
html.mo .srail-btn svg{width:18px;height:18px}
/* --- Proof-band core (shared by the rail's active card; also the no-JSON grid fallback):
   Navy result band with ROI + investment context. Withheld figures render in the
   one-sheet's own marker style — approved figures required, never invented. The metadata
   row stays hidden except on the rail's active desktop card (rules above). --- */
html.mo .ssb{background:#002B54;padding:14px 18px;display:flex;align-items:center;justify-content:flex-start;gap:24px}
html.mo .ssb p,html.mo .ssb ul{margin:0}
html.mo .ssb__roi{font-family:var(--font-display);font-weight:500;font-size:var(--roi-rest,38px);line-height:1;letter-spacing:-.015em;color:#F7F4EE;white-space:nowrap;font-variant-numeric:tabular-nums}
html.mo .ssb__ctx{margin-top:6px;font-family:var(--font-sans);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-sky)}
html.mo .ssb__row{display:none;list-style:none;padding:0}
/* Photo→Navy: matched to the LinkedIn Success Story graphics — top ~70% of the photograph
   untouched, a subtle dissolve beginning around 70%, density arriving only in the bottom
   10–15%, meeting the solid Navy proof band at the seam. Photo + band stay ONE 6px-radius
   surface. Never animated. */
html.mo .stories-list .story__photo{position:relative;border-radius:var(--radius-media) var(--radius-media) 0 0}
html.mo .stories-list .story__photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,rgba(0,43,84,0) 0%,rgba(0,43,84,.08) 27%,rgba(0,43,84,.28) 55%,rgba(0,43,84,.66) 80%,#002B54 100%);pointer-events:none}
html.mo .stories-list .ssb{border-radius:0 0 var(--radius-media) var(--radius-media)}
/* Contained editorial imagery joins the same restrained radius language (full-bleed and
   environmental surfaces stay square). */
html.mo .ilead__media .ds-media,html.mo .irow .ds-media{border-radius:var(--radius-media);overflow:hidden}
/* Editorial stack: explicit rhythm — metadata→7px→title→11px→description→16px→CTA. The
   CTA follows the narrative (no bottom pinning); reserved regions keep geometry stable. */
html.mo .stories-list .story__meta{margin-top:14px}
html.mo .stories-list .story__h{margin-top:7px}
html.mo .stories-list .story__t{margin-top:9px}
html.mo .stories-list .story__a{margin-top:16px;padding-top:0}
/* --- California judgment: the photography frame is environment — never hidden. Depth is
   rAF-interpolated in motion.js (no CSS transition on that transform; will-change is
   applied only while the section is near the viewport). --- */
/* --- insights rail hairlines draw, then rows resolve --- */
html.mo .insv .irow{border-top-color:transparent;position:relative}
html.mo .insv .irow::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform 620ms var(--mo-ease) var(--mo-d,0ms)}
html.mo .insv.mo-in .irow::before{transform:scaleX(1)}
html.mo .insv .irow:last-child{border-bottom-color:transparent;transition:border-bottom-color 480ms var(--mo-ease) 800ms}
html.mo .insv.mo-in .irow:last-child{border-bottom-color:var(--line)}
html.mo .ilead__media .ds-media>img{transition:transform 620ms var(--mo-ease)}
html.mo .ilead:hover .ilead__media .ds-media>img{transform:scale(1.015)}
/* --- final CTA audience-row hairlines --- */
html.mo .final .fpath{border-top-color:transparent;position:relative}
html.mo .final .fpath::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:rgba(145,195,235,.28);transform:scaleX(0);transform-origin:0 50%;transition:transform 620ms var(--mo-ease) var(--mo-d,0ms)}
html.mo .final.mo-in .fpath::before{transform:scaleX(1)}
html.mo .final .fpath:last-of-type{border-bottom-color:transparent;transition:border-bottom-color 480ms var(--mo-ease) 900ms}
html.mo .final.mo-in .fpath:last-of-type{border-bottom-color:rgba(145,195,235,.28)}
/* --- arrow + link microinteractions (3px travel, 200ms) --- */
html.mo .story__a span,html.mo .stories-all span,html.mo .insv-all span,html.mo .caj-link span,html.mo .ilead__a span,html.mo .irow__a span,html.mo .final-alt__a span{display:inline-block;transition:transform var(--mo-ui) var(--mo-ease)}
html.mo .story:hover .story__a span,html.mo .stories-all:hover span,html.mo .insv-all:hover span,html.mo .caj-link:hover span,html.mo .ilead:hover .ilead__a span,html.mo .irow:hover .irow__a span,html.mo .final-alt__a:hover span{transform:translateX(3px)}
/* --- mobile: same language, ~50–60% of desktop travel; triggers set in motion.js --- */
@media (max-width:760px){
html.mo .mo-r{transform:translateY(13px)}
html.mo .mo-rx{transform:translateX(13px)}
html.mo .ssb__roi{font-size:34px}
html.mo .stories-list .story__h{margin-top:6px}
html.mo .stories-list .story__t{margin-top:8px}
html.mo .stories-list .story__a{margin-top:14px}
}
/* --- 26. ?motionDebug=1 anchor overlays (never present without the flag) --- */
html.mo.mo-debug .mo-dbg{position:absolute;left:0;right:0;height:0;border-top:1px solid #E5007A;z-index:400;pointer-events:none}
html.mo.mo-debug .mo-dbg span{position:absolute;top:2px;left:12px;font:600 10px/1.7 "Instrument Sans",sans-serif;letter-spacing:.08em;color:#fff;background:#E5007A;padding:1px 8px;white-space:nowrap}
html.mo.mo-debug .mo-dbg--major{border-top-color:#7A00E5}
html.mo.mo-debug .mo-dbg--major span{background:#7A00E5}
html.mo.mo-debug .mo-dbg--open{border-top-color:#0B8A5C}
html.mo.mo-debug .mo-dbg--open span{background:#0B8A5C}
html.mo.mo-debug .mo-vpline{position:fixed;left:0;right:0;border-top:1px dashed #E5007A;z-index:401;pointer-events:none}
html.mo.mo-debug .mo-vpline span{position:absolute;right:12px;bottom:2px;font:600 10px/1.7 "Instrument Sans",sans-serif;letter-spacing:.08em;color:#fff;background:#E5007A;padding:1px 8px;white-space:nowrap}
html.mo.mo-debug .mo-vpline--major{border-top-style:dotted;border-top-color:#7A00E5}
html.mo.mo-debug .mo-vpline--major span{background:#7A00E5}
/* --- safety net: the inline gate never sets data-mo-pre and motion.js never adds .mo under
   reduced motion; this covers a mid-session preference change --- */
@media (prefers-reduced-motion:reduce){
html.mo .srail-clip{scroll-behavior:auto}
html[data-mo-pre] .hero--media .rule48,html[data-mo-pre] .hero--media h1,html[data-mo-pre] .hero--media .eyebrow,html[data-mo-pre] .hero--media .lead,html[data-mo-pre] .hero--media .heroactions .ds-btn,html[data-mo-pre] .hero--media .hero-tert,html.mo .mo-hero .hero-tert{opacity:1;transform:none}
html[data-mo-pre] .hero--media::after,html.mo .mo-hero::after{content:none}
html.mo .mo-photo,html.mo .mo-photo>*,html.mo .mo-r,html.mo .mo-rx,html.mo .mo-l,html.mo .mo-img,html.mo .mo-hero .hero__img,html.mo .mo-hero h1,html.mo .mo-hero .hero-tert,html.mo .mo-hero .rule48,html.mo .mo-hero .eyebrow,html.mo .mo-hero .lead,html.mo .mo-hero .heroactions .ds-btn{opacity:1;transform:none;clip-path:none;transition:none}
html.mo .mo-hero .hero__img{top:0;height:100%}
html.mo .navpanel[data-open="true"],html.mo .navpanel[data-open="true"] .mega-row,html.mo .navpanel[data-open="true"] .mega-mini{animation:none}
html.mo .proofband .ds-proof__item{border-left-color:var(--border-inverse)}
html.mo .insv .irow{border-top-color:var(--line)}
html.mo .insv .irow:last-child{border-bottom-color:var(--line)}
html.mo .final .fpath{border-top-color:rgba(145,195,235,.28)}
html.mo .final .fpath:last-of-type{border-bottom-color:rgba(145,195,235,.28)}
html.mo .plat .plat-step::after,html.mo .proofband .ds-proof__item::before,html.mo .insv .irow::before,html.mo .final .fpath::before,html.mo .stories-eyebrow::before,html.mo .insv-eyebrow::before{transform:none;transition:none}
}

@media (prefers-reduced-motion:reduce){html.mo .mo-photo{opacity:1;-webkit-mask-image:none;mask-image:none}html.mo .mo-photo>*{filter:none;transform:none}}