/* ProcessBI motion system (approved 2026-10-07)
   1) Report orbit: reports revolve on a 3D ring, scrubbed by scroll (FundChecker-style pinned scene), 2560px posters.
   2) Design deck: Process -> Architecture -> Report as one compact presentation with one consistent transition. */

/* ---------- 1. report orbit ---------- */
.orb{position:relative;background:radial-gradient(1200px 600px at 50% 30%,rgba(26,127,255,.20),transparent 62%),linear-gradient(180deg,#0B1A2E 0%,#0D2347 100%);color:#E8EEF7}
.orb.is-3d{height:300vh}
.orb-sticky{box-sizing:border-box;padding:clamp(56px,7vh,88px) 0}
.orb.is-3d .orb-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(12px,2vh,24px);padding:clamp(64px,8vh,96px) 0 clamp(24px,4vh,40px)}
.orb-head{width:var(--dr-site,94vw);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.orb-kicker{display:block;margin-bottom:10px;color:#7FD3FF;font:600 .75rem/1.4 var(--ds-sans,Inter,sans-serif);letter-spacing:.12em;text-transform:uppercase}
section.orb .orb-head h2{margin:0;color:#fff!important;font:600 clamp(1.5rem,1.2rem + 1vw,2.25rem)/1.15 var(--ds-display,"Space Grotesk",sans-serif)!important;letter-spacing:-.01em}
.orb-head p{margin:10px 0 0;color:#B9C7DA;font-size:1rem;line-height:1.6;max-width:56ch}
.orb-scene{display:none;position:relative;min-height:0;perspective:2200px;perspective-origin:50% 42%}
.orb.is-3d .orb-scene{display:block}
.orb-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.orb-card{position:absolute;left:0;top:0;width:var(--cw);aspect-ratio:1280/800;margin:calc(var(--cw) * -.3125) 0 0 calc(var(--cw) * -.5);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.14);backface-visibility:hidden;cursor:pointer;transition:box-shadow .3s}
.orb-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.orb-card::after{content:"";position:absolute;inset:0;background:#0B1A2E;opacity:var(--shade,0);pointer-events:none;transition:opacity .2s linear}
.orb-card.is-front{box-shadow:0 40px 110px rgba(0,0,0,.55),0 0 0 2px #7FD3FF}
.orb-card:focus-visible{outline:3px solid #7FD3FF;outline-offset:4px}
/* settled front report: a flat, pixel-exact copy over the 3D card so the 4K poster renders at full sharpness */
.orb-flat{position:absolute;left:50%;top:50%;z-index:500;width:var(--cw);aspect-ratio:1280/800;transform:translate(-50%,-50%);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 40px 110px rgba(0,0,0,.55),0 0 0 2px #7FD3FF;opacity:0;pointer-events:none;transition:opacity .18s ease-out}
.orb-flat.is-on{opacity:1;pointer-events:auto}
.orb-flat img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.orb-foot{display:none;width:var(--dr-site,94vw);margin:0 auto;justify-content:space-between;align-items:center;gap:20px}
.orb.is-3d .orb-foot{display:flex}
.orb-cap b{display:block;color:#fff;font:600 1.125rem/1.3 var(--ds-display,"Space Grotesk",sans-serif)}
.orb-cap span{display:block;margin-top:4px;color:#9FB2C9;font-size:.9375rem}
.orb-cap em{display:block;margin-bottom:6px;color:#7FD3FF;font:normal 600 .6875rem/1.4 var(--ds-sans,Inter,sans-serif);letter-spacing:.12em;text-transform:uppercase}
.orb-actions{display:flex;align-items:center;gap:10px;flex:none}
.orb:not(.is-3d) .orb-head .orb-actions{display:none}
.orb-btn{min-height:44px;padding:0 18px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff!important;font:600 .9375rem/1 var(--ds-sans,Inter,sans-serif);cursor:pointer;text-decoration:none!important;display:inline-flex;align-items:center;gap:6px}
.orb-btn.primary{background:#1A7FFF;border-color:#1A7FFF}
.orb-btn:hover,.orb-btn:focus-visible{border-color:#fff}
.orb-progress{position:absolute;left:0;bottom:0;height:3px;width:var(--p,0%);background:linear-gradient(90deg,#1A7FFF,#00C2FF)}
.orb.is-3d .orb-mobile{display:none}
.orb-mobile{width:var(--dr-site,94vw);margin:28px auto 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.orb-mobile a{display:block;border-radius:12px;overflow:hidden;background:#0F2748;border:1px solid rgba(255,255,255,.12);text-decoration:none!important}
.orb-mobile img{display:block;width:100%;height:auto;aspect-ratio:1280/800;object-fit:cover;object-position:top;background:#fff}
.orb-mobile span{display:block;padding:12px 14px;color:#fff;font:600 .9375rem/1.35 var(--ds-sans,Inter,sans-serif)}
.orb-mobile em{display:block;margin-bottom:4px;color:#7FD3FF;font:normal 600 .6875rem/1.4 var(--ds-sans,Inter,sans-serif);letter-spacing:.1em;text-transform:uppercase}

/* ---------- 2. design deck ---------- */
.deck{position:relative;width:min(var(--dr-site,94vw),1280px);margin:clamp(32px,4vw,56px) auto;border:1px solid #E3E9F1;border-radius:16px;background:#fff;box-shadow:0 18px 46px rgba(11,42,82,.06);overflow:hidden;text-align:left}
.deck:focus-visible{outline:3px solid #1A7FFF;outline-offset:3px}
.deck-anchor{position:absolute;top:-96px;left:0;width:0;height:0}
.deck-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid #EEF2F7}
.deck-kicker{display:block;margin-bottom:4px;color:#087B79;font:600 .6875rem/1.4 var(--ds-sans,Inter,sans-serif);letter-spacing:.12em;text-transform:uppercase}
section.deck .deck-top h2{margin:0;font:600 1.25rem/1.25 var(--ds-display,"Space Grotesk",sans-serif)!important;letter-spacing:-.005em;color:#0A1626}
.deck-tabs{display:flex;gap:6px;flex:none}
.deck-tab{position:relative;min-height:40px;padding:0 16px;border:1px solid #D7E0EB;border-radius:999px;background:#fff;color:#26354C;font:600 .8125rem/1 var(--ds-sans,Inter,sans-serif);cursor:pointer;overflow:hidden}
.deck-tab b{color:#087B79;margin-right:6px;font-weight:600}
.deck-tab[aria-selected="true"]{border-color:#054186;color:#054186;background:#F4F8FD}
.deck-tab:focus-visible{outline:3px solid #1A7FFF;outline-offset:2px}
.deck-tab i{position:absolute;left:0;bottom:0;height:2px;width:0;background:#054186}
.deck-tab[aria-selected="true"] i{width:var(--t,0%)}
.deck-stage{position:relative;height:clamp(300px,40vw,560px);background:#F7F9FC;transition:height .35s cubic-bezier(.2,.7,.2,1)}
.deck-slide{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;opacity:0;transform:translateX(4%) scale(.985);transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.deck-slide.is-prev{transform:translateX(-4%) scale(.985)}
.deck-slide.is-on{opacity:1;transform:none;pointer-events:auto}
.deck-media{position:relative;min-height:0;padding:16px 20px 0;display:flex;align-items:center;justify-content:center}
.deck-media img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto}
.deck-live{position:relative;overflow:hidden;border-radius:8px;background:#fff;box-shadow:0 0 0 1px #E3E9F1,0 10px 30px rgba(11,42,82,.08)}
.deck-live iframe{position:absolute;left:0;top:0;border:0;background:#fff;transform-origin:0 0}
.deck-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:12px 20px 14px;color:#4A5A70;font-size:.875rem;line-height:1.5}
.deck-cap-text{min-width:0;max-width:92ch}
.deck-cap-text em{display:block;margin-bottom:2px;color:#087B79;font:normal 600 .6875rem/1.4 var(--ds-sans,Inter,sans-serif);letter-spacing:.1em;text-transform:uppercase}
.deck-step{margin-left:8px;color:#6B7A90;letter-spacing:.04em}
.deck-cap-text b{display:block;color:#0A1626;font:600 .9375rem/1.4 var(--ds-sans,Inter,sans-serif)}
.deck-cap-text>span{display:block;margin-top:2px}
.deck-slide.is-live .deck-cap-text>span{display:none}   /* live report: the frame gets the room */
.deck-cap-act{display:flex;gap:18px;flex:none;align-items:center}
.deck-cap-act a,.deck-cap-act button{color:#054186;font:600 .875rem/1 var(--ds-sans,Inter,sans-serif);text-decoration:none;background:none;border:0;cursor:pointer;padding:8px 0;white-space:nowrap}
.deck-cap-act a:hover,.deck-cap-act button:hover{text-decoration:underline}
.deck-live-btn{color:#fff!important;background:#054186!important;border-radius:8px;padding:10px 14px!important}
.deck-live-btn:hover{background:#0B5CC0!important;text-decoration:none!important}
.deck-eq{display:inline-block;margin-top:4px}
.deck-eq summary{cursor:pointer;color:#054186;font-weight:600;font-size:.8125rem}
.deck-eq[open] ul{position:absolute;left:20px;bottom:calc(100% - 8px);z-index:3;max-height:60%;overflow:auto;margin:0;padding:12px 16px 12px 32px;background:#fff;border:1px solid #D7E0EB;border-radius:10px;box-shadow:0 12px 30px rgba(11,42,82,.14);font-size:.8125rem}
.deck-cap{position:relative}
.deck-foot{display:grid;gap:8px;padding:14px 20px 16px;border-top:1px solid #EEF2F7;background:#fff}
.deck-foot .dr-meta{margin:0!important}
.deck-foot .dr-note{margin:0!important;font-size:.8125rem!important;color:#5A6A80}
@media(max-width:900px){.deck-top{display:block}.deck-tabs{margin-top:12px;overflow-x:auto}}
@media(max-width:767px){
  /* phones: the whole diagram is shown, fitted to the width (nothing cropped); "Full size" opens it for detail */
  .deck-slide{grid-template-rows:auto auto;align-content:start}   /* caption sits right under the diagram; spare room falls below */
  .deck-media{display:block;padding:12px 12px 0;overflow:hidden}
  .deck-media .deck-diagram,.deck-media img{width:100%;max-width:100%;height:auto;object-fit:contain;cursor:zoom-in}
  .deck-top{padding:14px 12px}
  .deck-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible}
  .deck-tab{min-width:0;padding:0 6px;font-size:.8125rem;white-space:nowrap}
  .deck-tab b{display:none}
  .deck-cap{display:block;padding:10px 12px 12px}.deck-cap-act{margin-top:6px}
  .deck-live-btn{display:none}
}
@media(prefers-reduced-motion:reduce){.deck-slide,.deck-stage{transition:none}}

/* ---------- 3. our methodology: eight steps (deck strip + homepage) ---------- */
.deck-method{list-style:none;margin:0;padding:12px 20px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;border-bottom:1px solid #EEF2F7;background:#fff;counter-reset:none}
.deck-method li{position:relative;display:flex;align-items:baseline;gap:6px;padding:7px 10px;border-radius:10px;border:1px solid #E6ECF3;background:#FAFBFD;transition:background .35s,border-color .35s,opacity .35s;opacity:.72}
.deck-method li.is-hl{opacity:1;background:#F0F6FD;border-color:#9FC2EA}
.deck-method b{flex:none;color:#087B79;font:600 .6875rem/1.2 var(--ds-sans,Inter,sans-serif);letter-spacing:.08em}
.deck-method span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0A1626;font:600 .8125rem/1.25 var(--ds-sans,Inter,sans-serif)}
.deck-method small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* full wording is on the homepage; kept for screen readers */
.deck-method li.is-hl b{color:#054186}
@media(max-width:1100px){.deck-method{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:767px){.deck-method{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:10px 12px}.deck-method li{min-width:0;padding:5px 8px}.deck-method span{font-size:.75rem}}
.home-method{padding:clamp(48px,6vw,88px) 0;background:#F7F9FC;border-top:1px solid #EEF2F7;border-bottom:1px solid #EEF2F7}
.home-method-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.home-method-steps li{padding:18px 18px 20px;border:1px solid #E3E9F1;border-radius:14px;background:#fff}
.home-method-steps b{display:block;color:#087B79;font:600 .75rem/1.2 var(--ds-sans,Inter,sans-serif);letter-spacing:.1em}
section.home-method .home-method-steps h3{margin:8px 0 6px!important;color:#0A1626;font:600 1.0625rem/1.3 var(--ds-display,"Space Grotesk",sans-serif)!important}
.home-method-steps p{margin:0;color:#4A5A70;font-size:.9375rem;line-height:1.55}
.home-method-note{margin:18px 0 0;color:#4A5A70;font-size:.9375rem}
@media(max-width:900px){.home-method-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.home-method-steps{grid-template-columns:1fr}}

/* report slide: the same gentle drift as the report gallery (no play button anywhere) */
@keyframes deck-drift{0%{transform:scale(1)}100%{transform:scale(1.03) translateY(-1%)}}
.deck-media{overflow:hidden}.deck-slide.is-on .deck-media img[srcset]{transform-origin:50% 0;animation:deck-drift 14s ease-in-out infinite alternate}   /* all widths (phone parity, 2026-10-09) */
@media(prefers-reduced-motion:reduce){.deck-slide .deck-media img{animation:none!important}}

/* transition: the outgoing slide fades out first, so two dense images are never seen on top of each other (no double image) */
.deck-slide{transition:opacity .22s ease-out,transform .45s cubic-bezier(.2,.7,.2,1)}
.deck-slide.is-on{transition:opacity .4s ease-in .18s,transform .45s cubic-bezier(.2,.7,.2,1) .1s}
.deck-stage{background:#F7F9FC}

/* ---------- 4. phones: the methodology as a vertical value chain (see ProcessBI mobile design reference, rule 1) ---------- */
.vchain{display:none}
@media(max-width:767px){
  .deck.has-vchain .deck-tabs,.deck.has-vchain .deck-method,.deck.has-vchain .deck-stage{display:none!important}
  .deck.has-vchain .deck-top{border-bottom:0;padding-bottom:4px}
  .vchain{display:block;list-style:none;margin:0;padding:8px 16px 4px;counter-reset:none}
  .vc-stage{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:0 0 28px}
  .vc-stage:not(:last-child)::before{content:"";position:absolute;left:21px;top:48px;bottom:6px;width:2px;background:linear-gradient(#9FC2EA,#D7E0EB)}
  .vc-num{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#054186;color:#fff;font:700 1rem/1 var(--ds-display,"Space Grotesk",sans-serif);letter-spacing:.02em}
  .vc-stage[data-key="architecture"] .vc-num{background:#0B5CC0}
  .vc-stage[data-key="report"] .vc-num{background:#087B79}
  .vc-body{min-width:0;padding-top:6px}
  section.deck .vc-body h3{margin:0 0 6px!important;color:#0A1626;font:600 1.375rem/1.2 var(--ds-display,"Space Grotesk",sans-serif)!important;letter-spacing:-.01em}
  .vc-body>p{margin:0 0 12px;color:#4A5A70;font-size:.9375rem;line-height:1.6}
  .vc-steps{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 14px;padding:0}
  .vc-steps li{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 10px;border:1px solid #D7E6F5;border-radius:999px;background:#F4F8FD;color:#0A1626;font:600 .8125rem/1.2 var(--ds-sans,Inter,sans-serif)}
  .vc-steps b{color:#087B79;font-size:.75rem;letter-spacing:.06em}
  .vc-shot{position:relative;display:block;margin:0 0 12px;padding:10px;border:1px solid #E3E9F1;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(11,42,82,.07);overflow:hidden}
  .vc-shot img{display:block;width:100%;height:auto;border-radius:6px}
  .vc-zoom{display:block;margin-top:8px;color:#054186;font:600 .75rem/1.2 var(--ds-sans,Inter,sans-serif);text-align:right}.vc-zoom::after{content:" ↗"}
  .vc-items{list-style:none;margin:0;padding:0;border-top:1px solid #EEF2F7}
  .vc-items li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 0;border-bottom:1px solid #EEF2F7}
  .vc-t{min-width:0;color:#26354C;font-size:.875rem;line-height:1.4}
  .vc-open{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:#054186;font:600 .8125rem/1 var(--ds-sans,Inter,sans-serif);text-decoration:none;white-space:nowrap}
  .deck-cap-text em{font-size:.75rem}
  .sr-breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- 5. phones: featured reports, compact methodology stepper (mobile reference rules 1, 6, 8) ---------- */
@media(max-width:767px){
  .orb-mobile a:not(.orb-all):nth-child(n+5){display:none!important}
  .orb-mobile .orb-all{display:flex!important;align-items:center;justify-content:center;min-height:48px;margin-top:4px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff!important;font:600 .9375rem/1 var(--ds-sans,Inter,sans-serif);text-decoration:none}
  .home-method-steps{position:relative;gap:0;margin-top:20px}
  .home-method-steps li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;padding:0 0 20px;border:0;border-radius:0;background:none}
  .home-method-steps li:not(:last-child)::before{content:"";position:absolute;left:19px;top:42px;bottom:4px;width:2px;background:#D7E0EB}
  .home-method-steps b{grid-row:span 2;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#054186;color:#fff;letter-spacing:0}
  .home-method-steps li:nth-child(n+4) b{background:#0B5CC0}.home-method-steps li:nth-child(n+6) b{background:#087B79}
  section.home-method .home-method-steps h3{margin:8px 0 4px!important;font-size:1.0625rem!important}
  .home-method-steps p{font-size:.875rem;line-height:1.55}
}


/* ---------- 6. phone parity (Manish, 2026-10-09): the same cinematic effects as desktop ----------
   3D report ring on phones, and the methodology value chain plays the deck's 2.5 s sequence. */
@media(max-width:767px){
  .orb.is-3d .orb-sticky{padding:76px 0 18px;gap:10px}
  .orb.is-3d .orb-head{display:block}
  .orb.is-3d .orb-head .orb-actions{display:flex;margin-top:14px}
  .orb.is-3d .orb-scene{perspective:1100px;perspective-origin:50% 45%}
  .orb.is-3d .orb-card,.orb-flat{border-radius:10px}
  .orb.is-3d .orb-foot{flex-direction:column;align-items:stretch;gap:12px}
  .orb.is-3d .orb-foot .orb-actions{flex-wrap:wrap}
  .orb.is-3d .orb-foot .orb-btn{flex:1 1 auto;justify-content:center}
  .orb-cap b{font-size:1rem}.orb-cap span{font-size:.875rem}
  /* lighter shadows on phones: the ring repaints 8 cards every frame while it turns, so big blurred shadows cost frames */
  .orb.is-3d .orb-card{box-shadow:0 12px 30px rgba(0,0,0,.36),0 0 0 1px rgba(255,255,255,.12);transition:none}
  .orb.is-3d .orb-card.is-front,.orb-flat{box-shadow:0 16px 40px rgba(0,0,0,.42),0 0 0 2px #7FD3FF}
  .orb.is-3d .orb-card::after{transition:none}
  .vchain[data-live] .vc-stage{transition:opacity .35s ease}
  .vchain[data-live] .vc-stage:not(.is-active){opacity:.62}
  .vc-num{position:relative}
  .vc-stage.is-active .vc-num{box-shadow:0 0 0 4px rgba(26,127,255,.18)}
  .vc-stage.is-active .vc-num::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(#1A7FFF calc(var(--t,0) * 1%),rgba(215,224,235,.9) 0);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px))}
  .vc-stage[data-key="report"].is-active .vc-num::after{background:conic-gradient(#087B79 calc(var(--t,0) * 1%),rgba(215,224,235,.9) 0)}
  .vc-shot img{transition:opacity .22s ease-out}
  .vc-shot img.vc-out{opacity:0}
  .vc-stage[data-key="report"].is-active .vc-shot img{transform-origin:50% 0;animation:deck-drift 14s ease-in-out infinite alternate}
  .vc-items li{position:relative;transition:background .3s}
  .vc-items li.is-on{background:linear-gradient(90deg,#F0F6FD,transparent)}
  .vc-items li.is-on::before{content:"";position:absolute;left:-8px;top:10px;bottom:10px;width:3px;border-radius:2px;background:#1A7FFF}
  .vc-items li.is-on .vc-t{color:#0A1626;font-weight:600}
}
@media(prefers-reduced-motion:reduce){.vc-shot img{animation:none!important;transition:none!important}.vchain[data-live] .vc-stage:not(.is-active){opacity:1}}