.procurement-page{--proc-blue:#0673ff;--proc-teal:#00a6a7;background:#fbfdff}
.proc-icons{position:absolute;width:0;height:0;overflow:hidden}
.procurement-page main svg{width:30px;height:30px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.procurement-page h1,.procurement-page h2,.procurement-page h3,.procurement-page h4{font-family:inherit;letter-spacing:0}
.procurement-page h2,.procurement-page h3,.procurement-page h4,.procurement-page p{margin:0}
.procurement-page button{cursor:pointer}
.procurement-page :is(a,button):focus-visible{outline:3px solid #075fd5;outline-offset:4px}
.skip-link{position:fixed;top:-70px;left:16px;z-index:200;padding:12px;background:white}.skip-link:focus{top:10px}
.proc-hero{position:relative;isolation:isolate;overflow:hidden;padding:18px var(--side) 20px;background:linear-gradient(100deg,#ecf6ff,#f5fbff)}
.proc-hero-inner{position:relative;max-width:1800px;margin:auto}
.proc-hero-art{position:absolute;z-index:-1;right:5%;top:50%;transform:translateY(-50%);width:32%;aspect-ratio:510/180;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 13%,#000 88%,transparent)}
.proc-hero-art img{position:absolute;width:326.3%;max-width:none;left:-182.35%;top:-33.33%}
.proc-breadcrumb{display:flex;gap:10px;color:#587899;font-size:12px!important;margin-bottom:13px!important}
.proc-hero h1{font-size:clamp(25px,2.2vw,40px);font-weight:750;line-height:1.3;text-wrap:balance;text-align:left;max-width:1100px}
.proc-lead{font-size:clamp(13px,1vw,17px);line-height:1.8;color:#36587a;max-width:990px;margin-top:10px!important}
.proc-cta{display:inline-flex;align-items:center;gap:25px;border:1px solid var(--proc-blue);background:#ffffffed;color:#0053ba;padding:9px 16px;border-radius:5px;font-size:13px;font-weight:650;margin-top:18px;transition:background .2s}
.proc-cta:hover{background:#e8f3ff}
.proc-core{max-width:1920px;padding:8px var(--side) 12px;margin:auto}
.proc-core>h2{text-align:center;font-size:clamp(20px,1.6vw,28px);line-height:1.4;margin-bottom:18px}
.proc-columns{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,1fr) minmax(0,1.24fr);gap:16px}
.proc-axis{--axis:var(--proc-blue);border-radius:9px;background:#fff;overflow:hidden;border:1px solid #e6eef6;border-top:5px solid var(--axis);box-shadow:0 6px 24px #1e5c9110;min-width:0;padding:16px 19px 9px;display:flex;flex-direction:column}
.supplier-axis{--axis:var(--proc-teal)}
.proc-axis>header{display:flex;align-items:center;gap:20px;padding:0 5px 15px}
.proc-axis>header svg{width:43px;height:43px;color:var(--axis);stroke-width:1.5}
.proc-eyebrow{display:block;color:var(--axis);font-size:11px;letter-spacing:1.1px;margin-bottom:2px}
.proc-axis h3{font-size:clamp(19px,1.45vw,25px);line-height:1.4}
.proc-axis header p{font-size:clamp(12px,1vw,16px);color:#345578;line-height:1.6}
.proc-capabilities{flex:1;display:grid;grid-template-rows:repeat(5,1fr)}
.proc-capabilities button{color:var(--ink);background:transparent;border:0;border-top:1px solid #e7eef5;display:flex;align-items:center;gap:20px;text-align:left;width:100%;padding:8px 5px;min-height:60px;border-radius:0;transition:background .18s}
.proc-capabilities button:hover{background:#f4f9ff}.supplier-axis .proc-capabilities button:hover{background:#f0fbfa}
.proc-capabilities button>svg{color:var(--axis);width:28px;height:28px}
.proc-capabilities button>span{flex:1;min-width:0}
.proc-capabilities strong{display:block;font-size:clamp(13px,1vw,16px);line-height:1.5;font-weight:700}
.proc-capabilities small{display:block;font-size:clamp(11px,.8vw,13px);line-height:1.6;color:#557292;margin-top:1px}
.proc-capabilities i{font-size:24px;font-style:normal;color:#7596b4}
.proc-axis-note{text-align:center;background:#edf5ff;color:#355c8b;padding:8px 4px;border-radius:5px;font-size:clamp(11px,.9vw,14px);line-height:1.5;margin-top:3px!important}
.supplier-axis .proc-axis-note{background:#eff9f9;color:#346d79}
.proc-value{border-radius:9px;padding:20px 28px 12px;background:linear-gradient(120deg,#e9f5ff,#f0fbfb);display:flex;flex-direction:column;min-width:0}
.value-eyebrow{text-align:center;font-size:13px;font-weight:650;color:#315d82}
.proc-value h3{text-align:center;font-size:clamp(23px,1.95vw,34px);line-height:1.35;margin-top:13px}
.value-items{display:flex;flex-direction:column;justify-content:space-evenly;flex:1;gap:20px;padding:22px 4px}
.value-items>div{display:flex;gap:19px;align-items:center}
.value-items svg{width:38px!important;height:38px!important;color:var(--proc-blue)}
.value-items>div:nth-child(2) svg{color:#009eb3}.value-items>div:nth-child(3) svg{color:var(--proc-teal)}
.value-items h4{font-size:clamp(17px,1.35vw,24px);line-height:1.5}
.value-items p{font-size:clamp(11px,.95vw,15px);color:#426685;line-height:1.7;margin-top:3px}
.value-footer{border-top:1px solid #cde5ee;padding-top:10px;text-align:center;font-size:clamp(12px,1vw,16px);font-weight:650;line-height:1.5;color:#18497d}
.proc-agent{display:grid;grid-template-columns:23% minmax(0,1fr);gap:20px;padding:18px var(--side);background:linear-gradient(100deg,#eaf5ff,#f3faff);margin-top:0}
.agent-intro h2{font-size:clamp(21px,1.7vw,28px);line-height:1.4}
.agent-intro p{font-size:13px;line-height:1.7;color:#537395;margin-top:7px}
.decision-steps{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.decision-steps li{position:relative;flex:1;text-align:center;padding:8px 4px;color:#10487f;font-size:clamp(12px,.95vw,15px);font-weight:650;background:#fff;border-radius:5px}
.decision-steps li:not(:last-child)::after{content:'›';position:absolute;right:-20px;top:1px;font-size:26px;color:var(--proc-blue);font-weight:400}
.agent-foundations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:15px}
.agent-foundations>*,.proc-results>div:not(:first-child){display:flex;align-items:center;gap:13px}
.agent-foundations>*+*{padding-left:20px;border-left:1px solid #caddea}
.agent-foundations svg,.proc-results svg{color:var(--proc-blue)}
.agent-foundations h3,.proc-results h3{font-size:clamp(12px,.95vw,15px);line-height:1.5}
.agent-foundations p,.proc-results p{color:#577597;font-size:clamp(11px,.8vw,13px);line-height:1.6;margin-top:3px}
.agent-foundations a:hover h3{text-decoration:underline}
.proc-results{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:20px;padding:19px var(--side) 22px;background:#fff}
.proc-results h2{font-size:clamp(17px,1.25vw,21px);line-height:1.5}
.proc-results>div:nth-child(n+3){border-left:1px solid #d6e3ef;padding-left:20px}
.proc-dialog{--detail-accent:#0874ef;width:min(1120px,calc(100% - 32px));max-height:90dvh;padding:0;border:1px solid #d1e4f1;border-radius:16px;color:var(--ink);box-shadow:0 25px 90px #09234235;overscroll-behavior:contain}
.proc-dialog[data-axis="supplier"]{--detail-accent:#009d9f}
.detail-hero{border-bottom:1px solid #dfebf3;padding-bottom:22px}
.proc-dialog .detail-kicker{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--detail-accent);margin-bottom:8px}
.proc-dialog .detail-question{font-size:20px;font-weight:650;color:#123761;margin-bottom:8px;line-height:1.6}
.detail-input{display:grid;grid-template-columns:90px 1fr;gap:18px;background:#f3f8fc;border-radius:8px;padding:16px 20px;margin-top:22px}
.proc-dialog .detail-input h3{margin:0;color:var(--detail-accent)}
.detail-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.detail-card-grid article{display:flex;gap:14px;border:1px solid #deebf3;border-radius:10px;padding:20px;background:#fff}
.detail-index{font-size:20px;font-weight:700;color:var(--detail-accent);line-height:1.5}
.detail-card-grid h4{font-size:16px;margin:0 0 8px;color:#15355b;line-height:1.5}
.proc-dialog .detail-card-grid p{font-size:14px;line-height:1.8}
.detail-table-wrap{overflow:auto;border:1px solid #d7e6f2;border-radius:8px}
.detail-matrix table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}
.detail-matrix th,.detail-matrix td{padding:13px 16px;border-bottom:1px solid #e3edf4;line-height:1.6}
.detail-matrix thead{background:#edf6fd;color:#17446d}
.detail-matrix tbody th{font-weight:600;background:#f7fafc}
.proc-dialog .detail-note{font-size:12px;line-height:1.8;color:#637e97;margin-top:10px}
.proc-dialog .detail-output{border-left:3px solid var(--detail-accent)}
.proc-dialog .detail-output ul{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0;list-style:none;margin-bottom:0}
.proc-dialog .detail-output li{font-size:15px;font-weight:600;color:#21466b;padding-left:14px;border-left:1px solid #c7dfe9}
.detail-loop ol{display:flex;gap:22px;list-style:none!important;padding:0!important}
.detail-loop li{position:relative;flex:1;background:#f0f6fb;padding:10px 8px;text-align:center;border-radius:6px;font-size:13px!important;font-weight:600}
.detail-loop li:not(:last-child)::after{content:'›';position:absolute;right:-16px;top:8px;color:var(--detail-accent);font-size:20px}
.detail-example{padding:18px 22px;background:#f7fafc;border-radius:8px;margin-top:24px}
.proc-dialog .detail-example h3{margin-top:0}
.detail-handoff{border-top:1px solid #dfeaf3;margin-top:24px}
@media(max-width:700px){.detail-card-grid{grid-template-columns:1fr}.detail-input{grid-template-columns:1fr;gap:5px}.proc-dialog .detail-question{font-size:18px}.proc-dialog .detail-output ul{grid-template-columns:1fr}.detail-loop ol{flex-direction:column;gap:15px}.detail-loop li:not(:last-child)::after{content:'↓';top:auto;bottom:-19px;right:50%;font-size:16px}.detail-matrix th,.detail-matrix td{padding:10px 8px;font-size:12px}}
.proc-dialog::backdrop{background:#0b234c66;backdrop-filter:blur(5px)}
.proc-dialog-top{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;background:#f0f7fc;padding:12px 24px;border-bottom:1px solid #deebf4;font-size:13px;color:#547494;z-index:1}
.proc-dialog-top button{border:0;background:transparent;font-size:30px;color:var(--ink);width:40px;height:40px}
.proc-dialog-body{padding:26px 32px 32px}.proc-dialog h2{font-size:27px;line-height:1.4;margin:0 0 14px}.proc-dialog h3{font-size:17px;margin:22px 0 10px}
.proc-dialog p,.proc-dialog li{font-size:15px;line-height:1.9;color:#456380}.proc-dialog ul,.proc-dialog ol{padding-left:24px;margin:10px 0}
.proc-dialog .detail-output{background:#eff8fc;padding:18px;border-radius:8px;margin-top:20px}.detail-output h3{margin-top:0}.proc-dialog .detail-boundary{font-size:13px;margin-top:18px;border-left:3px solid #0698a7;padding-left:12px}
.scenario-list{display:grid;gap:16px}.scenario-list article{padding:18px;border:1px solid #d9e7f2;border-radius:8px}.scenario-list h3{margin-top:0}.scenario-list strong{color:#163d65}
@media(min-width:1921px){.proc-agent,.proc-results{padding-left:max(var(--side),calc((100vw - 1796px)/2));padding-right:max(var(--side),calc((100vw - 1796px)/2))}}
@media(min-width:981px) and (max-width:1150px){.procurement-page .site-header{grid-template-columns:225px 1fr auto;gap:10px;padding-inline:24px}.procurement-page .brand-name{font-size:17px}.procurement-page .brand-latin{font-size:15px}.procurement-page .brand{gap:7px}.procurement-page .main-nav{gap:21px}.procurement-page .main-nav a{font-size:12px}.procurement-page .contact-button{min-width:85px;font-size:13px;padding-inline:10px}.proc-columns{gap:10px}.proc-axis{padding-inline:12px}.proc-axis>header,.proc-capabilities button{gap:12px}.proc-value{padding-inline:18px}.value-items>div{gap:12px}}
@media(max-width:980px){.proc-columns{grid-template-columns:1fr 1fr}.proc-value{grid-column:1/-1;grid-row:2;margin-top:4px}.value-items{flex-direction:row;padding:22px 0}.value-items>div{flex:1;gap:12px}.proc-value h3 br{display:none}.proc-value h3{font-size:26px}.proc-agent{grid-template-columns:1fr}.agent-intro p br{display:none}.proc-results{grid-template-columns:1fr 1fr}.proc-results>div:nth-child(n){border:0;padding-left:0}.proc-lead{max-width:75%}.proc-core>h2{font-size:22px}.proc-axis h3{font-size:22px}.proc-capabilities strong{font-size:15px}.proc-capabilities small{font-size:12px}.proc-capabilities button{gap:14px}}
@media(max-width:600px){.proc-hero{padding:22px var(--side);background:linear-gradient(90deg,#eef7fff5,#eef7ffdf),url('./assets/planning-decision/overview-panorama-v2.png') center/cover}.proc-hero h1{font-size:28px;line-height:1.45;text-wrap:initial}.proc-lead{max-width:none;font-size:14px}.proc-core{padding-top:22px}.proc-core>h2{text-align:left;font-size:22px}.proc-columns{display:flex;flex-direction:column;gap:16px}.proc-axis{padding:18px 16px 10px}.proc-value{order:3;padding:22px}.value-items{flex-direction:column;gap:22px}.value-items h4{font-size:20px}.value-items p{font-size:13px}.proc-value h3{font-size:26px}.proc-value h3 br{display:initial}.value-footer{font-size:14px}.proc-axis header p{font-size:14px}.proc-axis-note{font-size:13px}.decision-steps{gap:16px;flex-wrap:wrap}.decision-steps li{flex:0 0 calc((100% - 32px)/3);font-size:12px}.decision-steps li:not(:last-child)::after{right:-13px;font-size:23px}.decision-steps li:nth-child(3)::after{display:none}.agent-foundations{grid-template-columns:1fr;gap:14px}.agent-foundations>*+*{border-left:0;border-top:1px solid #d7e6f2;padding:12px 0 0}.agent-foundations h3,.proc-results h3{font-size:14px}.agent-foundations p,.proc-results p{font-size:12px}.proc-results{grid-template-columns:1fr;gap:17px}.proc-results h2{font-size:20px}.proc-dialog-body{padding:22px}.proc-dialog h2{font-size:23px}.proc-dialog-top{padding:8px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.procurement-page *{transition:none!important}}
@media(max-width:980px){.proc-hero-art{opacity:.22}.proc-hero-inner{z-index:1}}
@media(max-width:600px){.proc-hero-art{display:none}.proc-hero{background:#eef7ff}}
/* Match the planning/order hero composition without coupling the page bodies. */
.proc-cta{border-radius:14px;padding:10px 18px;min-height:38px;box-shadow:0 2px 7px #347db51c;gap:12px}
@media(min-width:1100px) and (min-height:680px){
 .procurement-page{--header-height:64px}
 .proc-hero{height:calc((100svh - var(--header-height) - 18px)*.2);padding:14px 3%;display:flex;align-items:center}
 .proc-hero-inner{width:100%;max-width:none;margin:0}
 .proc-breadcrumb{font-size:11px!important;line-height:1.4;margin-bottom:8px!important}
 .proc-hero h1{font-size:clamp(28px,2.42vw,43px);line-height:1.25;font-weight:700;max-width:none;margin-bottom:10px}
 .proc-lead{max-width:56%;font-size:clamp(12px,1vw,17px);line-height:1.6;margin-top:0!important}
 .proc-cta{position:absolute;left:61.6%;top:65%;transform:translateY(-50%);margin:0;font-size:clamp(12px,.88vw,15px);white-space:nowrap}
 .proc-hero-art{right:0;width:28%;opacity:.75}
}
@media(min-width:1100px) and (min-height:680px) and (max-height:800px){
 .proc-hero{height:120px}
 .proc-hero h1{font-size:28px;margin-bottom:6px}
 .proc-lead{font-size:12px}
}
@media(max-width:1099px){.proc-hero{padding:22px 4%}.proc-cta{margin-top:16px}.proc-core{padding-top:8px}}
/* Original prototype sprite windows retain the source pixels without recompression. */
.proc-sprite{position:relative;display:block;width:38px;height:38px;flex:0 0 auto;overflow:hidden;mix-blend-mode:darken}
.proc-sprite img{position:absolute;max-width:none;width:calc(1672 / var(--sw) * 100%);height:auto;left:calc(-1 * var(--sx) / var(--sw) * 100%);top:calc(-1 * var(--sy) / var(--sw) * 100%)}
.proc-axis>header>.proc-sprite{width:54px;height:54px}
.proc-capabilities button>.proc-sprite{flex:0 0 36px;width:36px;height:36px}
.value-items>div>.proc-sprite{width:58px;height:58px}
.decision-steps li{display:flex;align-items:center;justify-content:center;gap:9px;filter:drop-shadow(0 3px 6px #327daf0c)}
.decision-steps li::before{content:"";position:absolute;inset:0;background:white;clip-path:polygon(6% 0,93% 0,100% 50%,93% 100%,6% 100%,0 50%);z-index:-1}
.decision-steps li{background:transparent;border-radius:0}
.decision-steps .proc-sprite{width:25px;height:25px}
/* Desktop overview fills one viewport; smaller/zoomed screens scroll naturally. */
@media(min-width:1100px) and (min-height:680px){
 #procurement-main{height:calc(100svh - var(--header-height));display:grid;grid-template-rows:auto minmax(0,1fr) 104px 74px}
 .proc-core{width:100%;min-height:0;margin:0 auto;padding-block:6px 10px;display:flex}
 .proc-columns{width:100%;min-height:0;flex:1}
 .proc-axis{padding:12px 18px 8px;min-height:0}
 .proc-axis>header{padding-bottom:10px;gap:16px}
 .proc-axis>header svg{width:36px;height:36px}
 .proc-axis h3{font-size:clamp(18px,1.4vw,24px)}
 .proc-axis header p{font-size:clamp(12px,.9vw,15px)}
 .proc-capabilities{min-height:0}
 .proc-capabilities button{min-height:0;padding:5px;gap:16px}
 .proc-capabilities strong{font-size:clamp(15px,1.1vw,18px);line-height:1.4}
 .proc-capabilities small{font-size:clamp(13px,.9vw,15px);line-height:1.45}
 .proc-axis-note{padding:5px 3px;font-size:12px}
 .proc-value{padding:14px 25px 10px;min-height:0}
 .proc-value h3{font-size:clamp(23px,1.8vw,32px);margin-top:8px}
 .value-items{min-height:0;gap:clamp(18px,3vh,36px);padding:24px 0 12px;justify-content:flex-start;width:max-content;max-width:100%;margin:0 auto}
 .value-items>div{gap:18px}
 .proc-value h3{font-weight:750}
 .agent-foundations .proc-sprite,.proc-results .proc-sprite{width:38px;height:38px}
 .value-items h4{font-size:clamp(17px,1.25vw,22px)}
 .value-items p{font-size:clamp(11px,.85vw,14px)}
 .value-footer{padding-top:8px;font-size:clamp(12px,.9vw,15px)}
 .proc-agent{min-height:0;padding-block:10px;gap:18px;align-items:center}
 .agent-intro h2{font-size:clamp(20px,1.5vw,26px)}
 .agent-intro p{font-size:12px;margin-top:4px;line-height:1.5}
 .decision-steps li{padding:6px 4px}
 .agent-foundations{margin-top:9px}
 .agent-foundations p,.proc-results p{font-size:clamp(11px,.75vw,13px);line-height:1.45}
 .proc-results{min-height:0;padding-block:10px;align-items:center}
 .proc-results h2{font-size:clamp(16px,1.15vw,20px)}
}
@media(min-width:1100px) and (min-height:680px) and (max-height:800px){
 #procurement-main{grid-template-rows:120px minmax(0,1fr) 88px 62px}
 .proc-axis{padding:8px 14px 6px}
 .proc-axis>header{padding-bottom:6px;gap:12px}
 .proc-axis>header svg{width:30px;height:30px}
 .proc-eyebrow{font-size:10px;margin:0}
 .proc-axis h3{font-size:18px;line-height:1.3}
 .proc-axis header p{font-size:12px;line-height:1.4}
 .proc-capabilities button{padding:3px;gap:12px}
 .proc-capabilities button>svg{width:24px;height:24px}
 .proc-capabilities strong{font-size:15px}
 .proc-capabilities small{font-size:13px}
 .proc-axis-note{font-size:11px;padding:4px 2px}
 .proc-value{padding:10px 22px 8px}
 .value-eyebrow{font-size:11px}
 .proc-value h3{font-size:23px;line-height:1.25;margin-top:6px}
 .value-items{padding:22px 0 10px;gap:22px}
 .value-items>div>.proc-sprite{width:48px;height:48px}
 .proc-axis>header>.proc-sprite{width:44px;height:44px}
 .proc-capabilities button>.proc-sprite{width:30px;height:30px;flex-basis:30px}
 .agent-foundations .proc-sprite,.proc-results .proc-sprite{width:30px;height:30px}
 .decision-steps .proc-sprite{width:20px;height:20px}
 .value-items svg{width:30px!important;height:30px!important}
 .value-items h4{font-size:17px}
 .value-items p{font-size:11px;margin-top:0}
 .value-footer{font-size:12px;padding-top:5px}
 .proc-agent{padding-block:6px}
 .agent-intro h2{font-size:21px}
 .agent-intro p{font-size:11px}
 .agent-foundations{margin-top:6px}
 .decision-steps li{font-size:12px;padding:4px}
 .agent-foundations svg,.proc-results svg{width:24px;height:24px}
 .agent-foundations h3,.proc-results h3{font-size:12px}
 .proc-results{padding-block:7px}
 .proc-results h2{font-size:16px}
}
