/* About / Product development. Built on the shared About inner-page kit in
   /assets/about-story/css/story.css (hero, section template, chapters, tiles, timelines,
   final CTA). Only the pieces this page needs beyond that kit live here. */
.pd-page .st-hero::before{background-image:url("../img/hero/development-hero.webp")}
@media(min-width:1041px){
/* Photo-led hero: the photo is exactly as tall as the section and dissolves horizontally into an
     ambient background built from its own tones (a blurred copy of the photo over a matching gradient),
     so it reads as part of the surface. The figure lives inside the shell, so it is offset back to the
     viewport's left edge first. */
.pd-page .st-hero{background:linear-gradient(90deg,#d4d9e0 0%,#e3e7ec 38%,#eff1f4 68%,#f7f8fa 100%)}
.pd-page .st-hero::before{inset:-40px;background-size:cover;background-position:left center;filter:blur(38px) saturate(.6);opacity:.6;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 84%);mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 84%)}
.pd-page .st-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 90% at 62% 55%,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 70%)}
.pd-page .st-hero__media{top:0;bottom:0;left:calc((100% - 100vw) / 2 + 95px);width:min(58vw,860px);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 17%,#000 80%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 17%,#000 80%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
.pd-page .st-hero__media img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:left center}
}
}

/* Chapter helpers */
.st-question{margin:14px 0 0;color:var(--st-muted);font-size:14px;line-height:1.8;font-weight:700}
.st-question b{color:var(--st-blue);font-weight:800}
.st-caption{margin:14px 0 0;color:var(--st-muted);font-size:12.5px;line-height:1.7;font-weight:600;text-align:center}
.st-caption--top{margin:34px 0 0;color:var(--st-text);font-size:14px;font-weight:750}
.st-evlist--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.st-evlist--2 .st-evitem{display:flex;align-items:center;gap:12px;padding:14px 16px 12px;text-align:right}
.st-evlist--2 .st-evitem p{font-size:13.5px}
/* Overview timeline (5 clickable stages, each with the question it answers) */
.st-journey--5{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:20px}
.st-journey--5::before, .st-journey--5 .st-journey__line{left:10%;right:10%}
.st-journey--5 .st-journey__item{display:block}
.st-journey--5 .st-journey__dot{width:26px;height:26px;margin-bottom:12px;background:#0f2a4d;border-color:var(--st-teal);transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}
.st-journey--5 .st-journey__step{color:#fff;font-size:22px;font-weight:850;letter-spacing:.02em;transition:color .2s ease}
.st-journey__name{color:#8fb8ff;font-size:14px;font-weight:750}
.st-journey__q{max-width:14em;margin-top:6px;color:#dbe8f8;font-size:14px;line-height:1.7;font-weight:600}
.st-axis{display:flex;justify-content:space-between;margin-top:34px;padding:0 4px;color:#8fb8ff;font-size:13px;font-weight:750}
.st-axis span:first-child::before{content:"";display:inline-block;width:8px;height:8px;margin-inline-end:8px;border-radius:50%;background:#5d7fa8}
.st-axis span:last-child::after{content:"";display:inline-block;width:8px;height:8px;margin-inline-start:8px;border-radius:50%;background:var(--st-teal)}
/* Feedback loop: a return path from the last stage (left) back to the first (right) */
.st-loop{position:relative;height:54px;margin:14px 10% 0}
.st-loop__path{position:absolute;inset:0 0 14px 0;border:3px dashed rgba(143,184,255,.8);border-top:0;border-radius:0 0 22px 22px}
.st-loop__path::after{content:"";position:absolute;top:-9px;right:-9px;border-inline:7.5px solid transparent;border-bottom:11px solid #8fb8ff}
.st-loop__label{position:absolute;left:50%;bottom:0;transform:translateX(-50%);padding:6px 18px;border-radius:999px;background:var(--st-blue);color:#fff;font-size:13px;font-weight:800;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.st-loop__text{max-width:640px;margin:22px auto 0;color:#dbe8f8;font-size:15px;line-height:1.85;font-weight:700;text-align:center}
@media(prefers-reduced-motion:no-preference){
.st-axis, .st-loop__text{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.is-revealed .st-axis{opacity:1;transform:none;transition-delay:.15s}
.st-loop__path{clip-path:inset(-20px 100% -20px 0);transition:clip-path 1.2s cubic-bezier(.4,0,.2,1) 1.6s}
.st-loop__label{opacity:0;transition:opacity .5s ease 2.3s}
.is-revealed .st-loop__path{clip-path:inset(-20px -20px -20px -20px)}
.is-revealed .st-loop__label{opacity:1}
.is-revealed .st-loop__text{opacity:1;transform:none;transition-delay:2.4s}
}
@media(min-width:1041px) and (max-width:1320px){
.pd-page .st-hero__media{left:calc((100% - 100vw) / 2 + 40px)}
}
@media(max-width:1040px){
.st-journey--5{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:860px){
.st-journey--5{grid-template-columns:1fr}
.st-journey--5::before, .st-journey--5 .st-journey__line{left:auto;right:23px}
.st-journey--5 .st-journey__link{display:grid;grid-template-columns:26px 1fr;column-gap:16px;row-gap:1px;align-items:center;padding:8px 10px;text-align:right}
.st-journey--5 .st-journey__dot{grid-row:1/4;margin:0}
.st-journey__q{max-width:none;margin-top:2px}
.st-axis, .st-loop{display:none}
.st-loop__text{margin-top:30px}
}
@media(max-width:680px){
.st-evlist--2{grid-template-columns:1fr}
}
.st-s08 .st-caption--top{color:#b9c8da}
/* Chapters 03-07: copy on the right, an animated diagram on the left, plain tinted backgrounds.
   Only the DVT section carries a pattern (rings around its core), because it echoes that diagram. */
.pd-sec{position:relative;isolation:isolate;overflow:hidden}
.pd-sec__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:40px}
.pd-sec__copy .st-head{margin:0}
.pd-sec__copy .st-lead{margin-inline:0}
.pd-q{margin:18px 0 0;color:var(--st-muted);font-size:14px;line-height:1.8;font-weight:700}
.pd-q b{color:var(--st-blue);font-weight:800}
.pd-bg-a{background:#eef2f7}
.pd-bg-b{background:#fff}
.pd-bg-c{background:linear-gradient(180deg,#e6eef8 0%,#f1f6fc 100%)}
.pd-conv svg, .pd-stack svg, .pd-gauge svg, .pd-orb svg, .pd-path svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* 03: six inputs converge on one definition */
.pd-conv{display:flex;align-items:center;width:100%;max-width:620px;margin:0 auto}
.pd-conv__chips{position:relative;flex:1;display:grid;gap:10px;list-style:none;margin:0;padding:0}
.pd-conv__chips li{position:relative;display:flex;align-items:center;gap:12px;height:52px;padding:0 14px;border:1.5px solid #4f7ea6;border-radius:12px;background:#fff;color:var(--st-ink);font-size:14px;font-weight:780;box-shadow:0 6px 16px rgba(15,32,52,.08)}
.pd-conv__chips li::after{content:"";position:absolute;left:-24px;top:50%;width:24px;height:2px;margin-top:-1px;background:#9db3cc}
.pd-conv__chips i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:#eaf0f7;color:#34506f}
.pd-conv__chips i svg{width:19px;height:19px}
.pd-conv__gap{align-self:stretch;position:relative;width:24px}
.pd-conv__gap::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:2px;background:#9db3cc}
.pd-conv__link{position:relative;width:34px;height:3px;border-radius:2px;background:#34506f}
.pd-conv__link::after{content:"";position:absolute;left:-2px;top:50%;margin-top:-6px;border-block:6px solid transparent;border-right:9px solid #34506f}
.pd-conv__node{display:grid;place-content:center;justify-items:center;gap:3px;flex:none;width:136px;height:136px;border-radius:50%;background:#0e1b2b;color:#fff;box-shadow:0 0 0 8px rgba(14,27,43,.08),0 16px 34px rgba(14,27,43,.32)}
.pd-conv__node b{font-size:26px;font-weight:850;letter-spacing:.04em}
.pd-conv__node small{color:#8fb8ff;font-size:13px;font-weight:700}
/* 04: layers stacked into one testable sample */
.pd-stack{display:grid;gap:12px;width:100%;max-width:480px;margin:0 auto}
.pd-stack__cap{display:flex;align-items:center;justify-content:center;gap:10px;width:76%;margin:0 auto;padding:12px 20px;border-radius:14px;background:#2f9e6b;color:#fff;font-size:16px;font-weight:850;box-shadow:0 12px 24px rgba(47,158,107,.3)}
.pd-stack__cap i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:#2f9e6b}
.pd-stack__cap svg{width:14px;height:14px;stroke-width:3}
.pd-stack ol{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.pd-stack ol li{display:flex;align-items:center;gap:14px;width:calc(100% - var(--k) * 6%);margin-inline:auto;padding:12px 18px;border-radius:14px;background:#34506f;color:#fff;font-size:15px;font-weight:800;box-shadow:0 10px 20px rgba(52,80,111,.25)}
.pd-stack ol li:nth-child(2){background:#3d6089}
.pd-stack ol li:nth-child(3){background:#4f7ea6}
.pd-stack ol li:nth-child(4){background:#6b92b5}
.pd-stack ol li:nth-child(5){background:#fff;color:#34506f;border:2px dashed #4f7ea6;box-shadow:none}
.pd-stack ol i{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18)}
.pd-stack ol li:nth-child(5) i{background:#eaf0f7}
.pd-stack ol i svg{width:21px;height:21px}
/* 05: four engineering checks */
.pd-gauge{list-style:none;display:grid;gap:14px;width:100%;max-width:560px;margin:0 auto;padding:0}
.pd-gauge li{display:grid;grid-template-columns:38px 150px 1fr 30px;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--st-line);border-radius:14px;background:#fff;box-shadow:0 8px 20px rgba(15,32,52,.07)}
.pd-gauge i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#eaf0f7;color:#34506f}
.pd-gauge i svg{width:22px;height:22px}
.pd-gauge span{color:var(--st-ink);font-size:14.5px;font-weight:800}
.pd-gauge em{position:relative;display:block;height:10px;border-radius:5px;background:#dbe5f1;overflow:hidden}
.pd-gauge em b{position:absolute;inset:0;border-radius:5px;background:linear-gradient(270deg,#34506f,#4f7ea6)}
.pd-gauge u{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#2f9e6b;color:#fff;text-decoration:none}
.pd-gauge u svg{width:16px;height:16px;stroke-width:2.8}
/* 06: the finished product with the conditions it is judged under */
.pd-orb{--r:150px;position:relative;width:100%;max-width:640px;height:calc(var(--r) * 1.5 + 130px);margin:0 auto}
.pd-orb::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:1400px;height:1400px;transform:translate(-50%,-50%);pointer-events:none;background:repeating-radial-gradient(circle,transparent 0 calc(var(--r) / 2 - 1px),rgba(52,80,111,.16) calc(var(--r) / 2 - 1px) calc(var(--r) / 2));-webkit-mask-image:radial-gradient(circle,#000 0%,#000 14%,transparent 46%);mask-image:radial-gradient(circle,#000 0%,#000 14%,transparent 46%)}
.pd-orb__core{position:absolute;left:50%;top:50%;z-index:2;display:grid;justify-items:center;align-content:center;gap:6px;width:116px;height:116px;margin:-58px 0 0 -58px;border-radius:50%;background:#0e1b2b;color:#fff;font-size:13px;font-weight:820;text-align:center;box-shadow:0 0 0 8px rgba(14,27,43,.08),0 16px 34px rgba(14,27,43,.35)}
.pd-orb__core svg{width:30px;height:30px;stroke:#8fb8ff}
.pd-orb__arm{position:absolute;left:50%;top:50%;width:var(--r);height:2px;transform-origin:left center;transform:rotate(var(--a))}
.pd-orb__arm::before{content:"";position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,#0e1b2b,#4f7ea6)}
.pd-orb__sat{position:absolute;right:0;top:50%;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 20px;border:2px solid #4f7ea6;border-radius:16px;background:#fff;color:var(--st-ink);white-space:nowrap;box-shadow:0 8px 20px rgba(15,32,52,.12);transform:translate(50%,-50%) rotate(calc(var(--a) * -1))}
.pd-orb__sat i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eaf0f7;color:#34506f}
.pd-orb__sat svg{width:22px;height:22px}
.pd-orb__sat b{display:block;font-size:14.5px;font-weight:800}
.pd-orb__sat small{display:block;margin-top:1px;color:#4f7ea6;font-size:11.5px;font-weight:800}
/* 07: four pilot steps on a line, each with the production aid it relies on */
.pd-path{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:640px;margin:0 auto;padding:0}
.pd-path__line{position:absolute;top:40px;left:12.5%;right:12.5%;height:5px;border-radius:3px;background:linear-gradient(270deg,#34506f,#4f7ea6,#d9822b,#2f9e6b)}
.pd-path__node{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;gap:4px;text-align:center}
.pd-path__circle{display:grid;place-items:center;width:82px;height:82px;margin-bottom:12px;border-radius:50%;background:var(--c);color:#fff;box-shadow:0 10px 22px color-mix(in srgb,var(--c) 35%,transparent)}
.pd-path__circle svg{width:38px;height:38px}
.pd-path__node>b{color:var(--st-ink);font-size:15px;font-weight:830;line-height:1.4}
.pd-path__node ul{list-style:none;margin:10px 0 0;padding:0}
.pd-path__node ul li{padding:5px 12px;border:1.5px solid var(--c);border-radius:999px;background:#fff;color:var(--st-ink);font-size:12.5px;font-weight:760;line-height:1.5}
/* entrance: everything draws in when the section scrolls into view */
@media(prefers-reduced-motion:no-preference){
.pd-conv__chips li{opacity:0;transform:translateX(22px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i) * .12s + .1s)}
.pd-conv__chips li::after, .pd-conv__gap::before, .pd-conv__link{transform:scale(0);transition:transform .5s ease;transition-delay:.9s}
.pd-conv__chips li::after{transform-origin:right}
.pd-conv__gap::before{transform-origin:top;transition-duration:.6s}
.pd-conv__link{transform-origin:right}
.pd-conv__node{opacity:0;transform:scale(.6);transition:opacity .5s ease 1.4s,transform .6s cubic-bezier(.3,1.5,.5,1) 1.4s}
.is-revealed .pd-conv__chips li{opacity:1;transform:none}
.is-revealed .pd-conv__chips li::after, .is-revealed .pd-conv__gap::before, .is-revealed .pd-conv__link{transform:none}
.is-revealed .pd-conv__node{opacity:1;transform:none}
.pd-stack ol li, .pd-stack__cap{opacity:0;transform:translateY(-18px);transition:opacity .5s ease,transform .55s cubic-bezier(.3,1.4,.5,1);transition-delay:calc(var(--i, 5) * .18s + .15s)}
.pd-stack__cap{transition-delay:1.15s}
.is-revealed .pd-stack ol li, .is-revealed .pd-stack__cap{opacity:1;transform:none}
.pd-gauge li{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i) * .3s + .1s)}
.pd-gauge em b{transform:scaleX(0);transform-origin:right;transition:transform .9s cubic-bezier(.4,0,.2,1);transition-delay:calc(var(--i) * .3s + .3s)}
.pd-gauge u{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i) * .3s + 1.15s)}
.is-revealed .pd-gauge li{opacity:1;transform:none}
.is-revealed .pd-gauge em b, .is-revealed .pd-gauge u{transform:none}
.pd-orb__core{opacity:0;transform:scale(.6);transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.5,.5,1)}
.pd-orb__arm::before{transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.4,0,.2,1);transition-delay:calc(var(--i) * .25s + .35s)}
.pd-orb__sat{opacity:0;transform:translate(50%,-50%) rotate(calc(var(--a) * -1)) scale(.7);transition:opacity .4s ease,transform .55s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--i) * .25s + .8s)}
.is-revealed .pd-orb__core{opacity:1;transform:none}
.is-revealed .pd-orb__arm::before{transform:scaleX(1)}
.is-revealed .pd-orb__sat{opacity:1;transform:translate(50%,-50%) rotate(calc(var(--a) * -1))}
.pd-path__line{transform:scaleX(0);transform-origin:right;transition:transform 1.2s cubic-bezier(.4,0,.2,1) .2s}
.pd-path__node{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i) * .35s + .15s)}
.is-revealed .pd-path__line{transform:none}
.is-revealed .pd-path__node{opacity:1;transform:none}
}
@media(max-width:1040px){
.pd-sec__grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:620px){
.pd-conv__chips li{height:46px;gap:8px;padding:0 10px;font-size:12px}
.pd-conv__chips i{width:24px;height:24px}
.pd-conv__chips i svg{width:15px;height:15px}
.pd-conv__gap::before{top:23px;bottom:23px}
.pd-conv__gap{width:16px}
.pd-conv__chips li::after{left:-16px;width:16px}
.pd-conv__link{width:18px}
.pd-conv__node{width:78px;height:78px}
.pd-conv__node b{font-size:17px}
.pd-conv__node small{font-size:11px}
.pd-stack ol li{padding:10px 12px;gap:10px;font-size:13px}
.pd-stack ol i{width:28px;height:28px}
.pd-gauge li{grid-template-columns:30px 1fr 24px;gap:10px;padding:12px}
.pd-gauge em{grid-column:1/-1;grid-row:2}
.pd-gauge i{width:30px;height:30px}
.pd-gauge span{font-size:13px}
.pd-orb{--r:104px;height:calc(var(--r) * 1.5 + 120px)}
.pd-orb__core{width:92px;height:92px;margin:-46px 0 0 -46px;font-size:12px}
.pd-orb__sat{padding:7px 10px;gap:6px}
.pd-orb__sat i{display:none}
.pd-orb__sat b{font-size:12px}
.pd-orb__sat small{display:none}
.pd-path__circle{width:56px;height:56px}
.pd-path__circle svg{width:28px;height:28px}
.pd-path__line{top:28px}
.pd-path__node>b{font-size:11.5px}
.pd-path__node ul li{padding:4px 8px;font-size:11px}
}
/* DVT: equal-width practice chips and a footnote instead of a second text line inside one chip */
.pd-orb__sat{min-width:176px}
.pd-orb__note{margin:6px 0 0;text-align:center;color:var(--st-muted);font-size:13px;font-weight:700}
@media(max-width:620px){
.pd-orb__sat{min-width:118px;justify-content:center}
.pd-orb__note{font-size:11.5px}
}