/* ==== 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;--mo-line: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}
/* --- pre-paint hero state: at frame one the header and Navy environment are visible, the
   photograph sits beneath the opening veil, and no hero copy is paintable. :not(.mo-hero)
   hands control to motion.js the moment the hero is prepared, so a script failure can
   never hide content forever. --- */
html[data-mo-pre] .hero--media:not(.mo-hero) h1{visibility:hidden}
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) .lead,html[data-mo-pre] .hero--media:not(.mo-hero) .heroactions .ds-btn{opacity:0}
/* --- the hero veil: existing Alliance Navy (the hero's own ground), full-bleed over the
   photography, under the copy. Retracts left→right at 100ms over 900ms with a ~160px
   feathered trailing edge on a shallow crossed diagonal (±4° — two stacked gradients give
   the edge a faint organic contour, no hard wipe line, no wave). The extra 300px lives
   off-canvas left at frame one so the pre-paint cover stays solid (.hero--media clips).
   The photograph settles from scale(1.015)/‒10px as light reaches it. Removed from the
   tree once 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:-300px;right:0;background:linear-gradient(94deg,rgba(0,27,54,0) 30px,rgba(0,27,54,.30) 140px,rgba(0,27,54,.88) 250px,var(--navy-800) 300px),linear-gradient(86deg,rgba(0,27,54,0) 0px,rgba(0,27,54,.32) 120px,var(--navy-800) 260px);z-index:1;pointer-events:none}
html.mo .mo-hero::after{transition:transform 900ms var(--mo-ease) 100ms}
html.mo .mo-hero.mo-hero-in::after{transform:translate3d(100.5%,0,0)}
html.mo .mo-hero.mo-hero-done::after{content:none}
html.mo .mo-hero .container{position:relative;z-index:2}
/* --- 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>*,html.mo .mo-skip .mo-line__in{transition:none}
/* --- masked line reveal (hero H1, final CTA H2 only; markup restored after the sequence).
   Structural mask per line: the wrapper clips with symmetric padding/negative margins (net
   zero layout) so Newsreader ascenders/descenders render during the rise, and the inner
   text parks at 100% + .4em — fully below the clip incl. glyph overflow above the line box.
   Zero glyph pixels are visible before a line's scheduled entrance. --- */
html.mo .mo-line{display:block;overflow:clip;padding:.12em 0 .14em;margin:-.12em 0 -.14em}
/* Split headlines are PERMANENT (never unwrapped — zero layout shift on completion). The
   flex column keeps the padding/negative-margin clip compensation geometry-exact: no
   margin collapsing, every line's text sits precisely where the raw headline renders,
   and total height is identical before, during and after the sequence. */
html.mo .mo-split{display:flex;flex-direction:column}
html.mo .mo-line__in{display:block;transform:translate3d(0,calc(100% + .4em),0);transition:transform var(--mo-line) var(--mo-ease) calc(var(--mo-base,0ms) + var(--mo-i,0)*var(--mo-step,160ms))}
html.mo .mo-hero-in .mo-line__in,html.mo .mo-in .mo-line__in{transform:translate3d(0,0,0)}
html.mo .mo-hero h1{--mo-base:360ms;--mo-step:0ms}
html.mo .final .final-h{--mo-base:200ms;--mo-step:140ms;--mo-line:620ms}
/* --- hero beats (simplified — the image reveal is the event, copy supports): veil 100ms,
   Sun rule + eyebrow together 180ms, the full headline as ONE composed masked rise 360ms
   (all lines together, ends ~1010ms), lead 780ms, both CTAs together 1040ms. Core hero
   composed ~1.6s. The photograph settles scale(1.015)→1 with 10px of horizontal depth
   alongside the veil (1150ms, same 100ms start); scroll depth uses a 16px vertical bleed,
   the frame never moves. --- */
html.mo .mo-hero .hero__img{will-change:transform;transform:translate3d(-10px,0,0) scale(1.015)}
html.mo .mo-hero:not(.mo-hero-done) .hero__img{transition:transform 1150ms var(--mo-ease) 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)}
}
html.mo .mo-hero .rule48{transform:scaleX(0);transform-origin:0 50%;transition:transform 560ms var(--mo-ease) 180ms}
html.mo .mo-hero.mo-hero-in .rule48{transform:scaleX(1)}
html.mo .mo-hero .eyebrow,html.mo .mo-hero .lead,html.mo .mo-hero .heroactions .ds-btn{opacity:0;transform:translateY(16px);transition:opacity var(--mo-sm) var(--mo-ease),transform var(--mo-sm) var(--mo-ease)}
html.mo .mo-hero .lead{transform:translateY(20px)}
html.mo .mo-hero .eyebrow{transition-delay:180ms}
html.mo .mo-hero .lead{transition-delay:780ms}
html.mo .mo-hero .heroactions .ds-btn:nth-child(1){transition-delay:1040ms}
html.mo .mo-hero .heroactions .ds-btn:nth-child(2){transition-delay:1040ms}
html.mo .mo-hero.mo-hero-in .eyebrow,html.mo .mo-hero.mo-hero-in .lead,html.mo .mo-hero.mo-hero-in .heroactions .ds-btn{opacity:1;transform: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)}
/* --- 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 h1{visibility:visible}
html[data-mo-pre] .hero--media .rule48,html[data-mo-pre] .hero--media .eyebrow,html[data-mo-pre] .hero--media .lead,html[data-mo-pre] .hero--media .heroactions .ds-btn{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-line__in,html.mo .mo-hero .hero__img,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 .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}}