@font-face{font-family:Poppins;src:url(assets/Poppins-Regular.ttf)}
@font-face{font-family:Poppins;src:url(assets/Poppins-SemiBold.ttf);font-weight:600}
@font-face{font-family:Bebas;src:url(assets/BebasNeue-Regular.ttf);font-style:normal;font-weight:400;font-display:swap}
:root{--gold:#e7a72e;--ink:#11131a;--paper:#f7f8fb;--shadow:12px 16px 10px rgba(0,0,0,.24);--cut:20px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Poppins,Arial,sans-serif}
body{overflow-x:hidden}main{width:100%}h1,h2{font-family:Bebas,Impact,sans-serif;line-height:1.04}h2{font-size:42px;text-align:center;margin:55px 0 35px}h2 em,h1{color:var(--gold);font-style:normal}p{line-height:1.35}
.cut-card,.phase{position:relative;isolation:isolate;background:transparent;filter:drop-shadow(var(--shadow))}
.cut-card::before,.phase::before{content:"";position:absolute;inset:0;z-index:0;background:#fff;clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));pointer-events:none}
.cut-card>* ,.phase>*{position:relative;z-index:1}.texture{position:relative;background:var(--paper);padding:20px max(24px,calc((100% - 1280px)/2)) 70px}.texture::after{display:none}.texture>*{position:relative}
.phase-wrap{padding:55px 20px 30px;background:var(--paper)}.phases{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;max-width:1260px;margin:auto;overflow:visible}.phase{--cut:18px;min-height:225px;padding:46px 16px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#111;text-decoration:none;text-align:center;overflow:visible}.phase:not(:last-child)::after{content:"";position:absolute;z-index:3;right:-29px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:22px solid var(--gold);border-top:34px solid transparent;border-bottom:34px solid transparent;filter:none}.phase span{position:absolute;z-index:4;top:0;left:50%;transform:translate(-50%,-48%);width:58px;height:51px;display:grid;place-items:center;background:var(--gold);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);font:28px Bebas}.phase img{width:76px;height:76px;object-fit:contain;margin-bottom:15px}.phase b{font-size:15px;line-height:1.25}.phase.muted{color:#969696}.phase.muted img{filter:grayscale(1);opacity:.47}.phase.muted span{background:#f1d69a}.phase.muted:not(:last-child)::after{border-left-color:#efd290}
.hero{max-width:1280px;margin:10px auto 45px;padding:30px 55px 40px;text-align:center}.hero small{font:24px Bebas}.hero h1{font-size:46px;margin:15px 0}.hero p{font-size:18px;max-width:1100px;margin:auto}.process{position:relative;max-width:1280px;margin:auto;display:grid;grid-template-columns:1fr 1fr 350px;gap:34px;align-items:stretch}.process-main{display:contents}.source,.output,.data-origin{padding:32px;text-align:center}.source,.output{min-height:220px}.source img,.output img,.data-origin img{width:78px;height:78px;object-fit:contain}.source h3,.output h3{margin:12px 0 6px}.hub{grid-column:1/3;grid-row:2;min-height:230px;padding:34px;text-align:center}.hub img{width:min(430px,80%);height:112px}.hub h3{font-size:25px}.data-origin{grid-column:3;grid-row:1/3;z-index:2}.data-origin h3{font-size:24px;margin:0 0 30px}.data-origin h4{font-size:18px;margin:9px 0}.data-origin img:nth-of-type(2){margin-top:45px}.side{grid-column:3;grid-row:3;z-index:2;min-height:230px}.process-connectors{position:absolute;z-index:1;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.process-connectors path{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round;stroke-dasharray:1 17;marker-end:url(#gold-arrow)}
.gold{padding:65px max(24px,calc((100% - 1280px)/2)) 70px;background:var(--gold)}.gold h2{margin-top:0}.gold h2 strong{color:#111}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:90px 36px;padding-top:44px}.feature-grid article{min-height:185px;padding:58px 30px 26px;text-align:center}.feature-grid img{position:absolute;z-index:3;top:-46px;left:50%;transform:translateX(-50%);width:92px;height:92px;object-fit:contain}.feature-grid h3{font-size:18px;margin-top:4px}.benefits{padding-top:55px;background:var(--paper)}.benefits h2{margin-top:0}.benefit-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;max-width:1280px;margin:auto}.benefit-grid article{min-height:190px;padding:32px 18px;text-align:center}.eco-grid{display:grid;grid-template-columns:240px 240px 250px 1fr;gap:28px;align-items:stretch}.eco-grid>.cut-card{padding:30px;text-align:center}.eco-grid img{width:90px;height:90px;object-fit:contain}.eco-logo img{width:170px;height:135px}.eco-targets{display:grid;gap:24px}.eco-targets article{display:flex;align-items:center;gap:25px;padding:24px 35px}.eco-targets img{width:74px;height:74px}.eco-targets h3,.eco-targets p{margin:3px}.final{padding-top:65px;padding-bottom:65px;background:var(--paper)}.final article{max-width:1280px;margin:auto;padding:47px}.final h2{font-size:34px;margin:0}.final em{color:var(--gold);font-style:normal}
@media(max-width:900px){h2{font-size:34px}.phase-wrap{overflow:hidden;padding:30px 0 28px}.phases{grid-template-columns:repeat(5,180px);gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px 28px 24px;scrollbar-color:var(--gold) #e9ebf1;scrollbar-width:thin}.phase{scroll-snap-align:center;min-height:225px}.phase:not(:last-child)::after{right:-29px}.hero{padding:38px 28px}.hero h1{font-size:42px}.process{grid-template-columns:1fr}.process-main{display:grid;grid-template-columns:1fr;gap:34px}.hub,.data-origin,.side{grid-column:auto;grid-row:auto}.process-connectors{display:none}.feature-grid{grid-template-columns:1fr;gap:94px}.benefit-grid{grid-template-columns:1fr 1fr}.eco-grid{grid-template-columns:1fr}.eco-targets article{flex-direction:column;text-align:center}.gold,.texture{padding-left:22px;padding-right:22px}.final h2{font-size:29px}.cut-card,.phase{filter:drop-shadow(9px 13px 13px rgba(0,0,0,.20))}}
@media(max-width:560px){.hero h1{font-size:36px}.hero p{font-size:16px}.benefit-grid{grid-template-columns:1fr}.process-main{gap:26px}.gold h2,.texture h2{font-size:31px}.final article{padding:36px 22px}.final h2{font-size:26px}.phase{min-height:240px}.eco-grid{gap:24px}.benefit-grid article{min-height:170px}}

/* Match the phase navigation and connection lanes in the reference. */
.phase{transition:transform .2s ease,color .2s ease;cursor:pointer}
.phase:hover,.phase:focus-visible{transform:translateY(-4px);color:#555}
.phase.active:hover,.phase.active:focus-visible{color:#111}
.phase:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.process{grid-template-columns:repeat(3,minmax(0,1fr));gap:72px}
.process-connectors,.eco-connectors{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.process-connectors path,.eco-connectors path{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;stroke-dasharray:1 17;marker-end:none}
.process-connectors polygon{fill:var(--gold)}
.eco-grid{position:relative;grid-template-columns:1fr 1fr 1fr 2fr;gap:42px}
.eco-targets{margin-left:40px;gap:36px}
.eco-logo img{width:145px;height:170px;object-fit:contain}
.eco-logo h3{margin:14px 0 0}
.eco-grid>.cut-card{padding:28px 20px}
.eco-targets article{padding:24px;gap:18px}
.eco-connectors path{stroke:#fff}
.eco-connectors polygon{fill:#fff}
@media(max-width:900px){.process{grid-template-columns:1fr;gap:34px}.process-connectors,.eco-connectors{display:none}.eco-grid{grid-template-columns:1fr}.eco-targets{margin-left:0}.eco-logo img{width:145px;height:170px}}
@media(prefers-reduced-motion:reduce){.phase{transition:none}.phase:hover,.phase:focus-visible{transform:none}}

/* Keep the complete diagrams intact on touch screens. */
.phases{scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x pan-y}
.phases::-webkit-scrollbar{display:none}
.diagram-viewport{position:relative;max-width:1320px;margin:0 auto;padding:0 20px 30px;overflow:visible}
.diagram-viewport:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.final{isolation:isolate;overflow:hidden}
.final::after{content:"";display:block;position:absolute;inset:0;z-index:0;background:url(assets/hex-network.png) center center/1000px auto no-repeat;opacity:.5;pointer-events:none}
.final>article{position:relative;z-index:1}
@media(max-width:900px){
 .diagram-viewport{max-width:none;width:calc(100% + 44px);margin:0 -22px;padding:10px 22px 34px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
 .diagram-viewport::-webkit-scrollbar{display:none}
 .diagram-viewport .process{width:1120px;max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:72px}
 .diagram-viewport .process-main{display:contents}
 .diagram-viewport .hub{grid-column:1/3;grid-row:2}
 .diagram-viewport .data-origin{grid-column:3;grid-row:1/3}
 .diagram-viewport .side{grid-column:3;grid-row:3}
 .diagram-viewport .process-connectors,.diagram-viewport .eco-connectors{display:block}
 .diagram-viewport .eco-grid{width:1120px;grid-template-columns:1fr 1fr 1fr 2fr;gap:42px}
 .diagram-viewport .eco-targets{margin-left:40px;gap:36px}
 .diagram-viewport .eco-targets article{flex-direction:row;text-align:left}
 .final::after{background-size:850px auto}
}

/* Use the same regular title face as the other GGAP modules. */
h1,h2,h1 strong,h2 strong,h1 em,h2 em{font-family:Bebas,"Arial Narrow",sans-serif;font-weight:400;font-synthesis:none}

/* Share the same outer grid across the introduction, diagrams and other sections. */
@media(min-width:901px){.diagram-viewport{padding-left:0;padding-right:0}}