/* The opening is a short, scroll-driven manufacturing diagram. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero{--header-height:84px;--hero-progress:0;position:relative;background:var(--navy);color:#fff;min-width:0}
.hero.is-interactive{height:calc(200svh - var(--header-height))}
.hero-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(24px,4vw,72px);position:sticky;top:var(--header-height);height:calc(100svh - var(--header-height));min-height:620px;padding:36px var(--gutter) 74px;overflow:hidden;isolation:isolate}
.hero-copy{align-self:center;min-width:0;position:relative;z-index:2}
.hero .eyebrow{color:#acbdd2;margin-bottom:26px}
.hero h1{font-size:clamp(60px,6.8vw,108px);letter-spacing:-.075em;line-height:.98;white-space:nowrap}
html[lang=id] .hero h1{font-size:clamp(50px,5.6vw,90px)}
.hero-emphasis{color:#9ec2ff}
.hero-intro{max-width:390px;color:#c4cfdd;font-size:17px;line-height:1.65;margin-top:28px}
.hero-cta{display:flex;align-items:center;gap:22px;margin-top:34px;flex-wrap:wrap}
.hero .text-link{font-size:14px;color:#fff}
.hero .text-link:hover{color:#a8caff}
.hero-workbench{align-self:center;min-width:0;position:relative}
.hero-diagram-heading{display:flex;justify-content:space-between;gap:20px;color:#c4cfdd;font-size:11px;letter-spacing:.12em;border-bottom:1px solid #70859e55;padding-bottom:15px}
.hero-diagram-heading>span:last-child{color:#8eabc9;letter-spacing:.06em}
.hero-diagram{width:100%;height:min(53svh,540px);min-height:340px}
.hero-diagram svg{display:block;width:100%;height:100%;overflow:visible}
.diagram-guides{stroke:#526982;stroke-width:1;stroke-dasharray:2 7}
.diagram-cross{stroke:#b4c9df;stroke-dasharray:none}
.hero-sheet-group{transform-box:view-box}
.hero-ink{opacity:1}
.hero-layer{fill:#9bc3ff;stroke:#b6d2fd;stroke-width:1;opacity:0}
.hero-layer-back{fill:#edab9e;stroke:#eeb6a8}
.hero-sheet-border{stroke:#fff9;stroke-width:1.2;fill:none}
.sheet-word{fill:#101e30;font-family:'DM Sans',Arial,sans-serif;font-size:82px;font-weight:700;letter-spacing:-6px}
.sheet-small{fill:#101e30;font-size:11px;letter-spacing:2px;font-weight:700}
.hero-pack-seals{opacity:0;fill:#e4f0ff88;stroke:#101e3070;stroke-width:1.3}
.hero-pack-fold{fill:none;stroke:#102e60;stroke-dasharray:5 5}
.hero-dimension{stroke:#9bbbd355;stroke-width:1}
.hero-step-copy{min-height:37px;text-align:center;margin:0 0 14px}
.hero-step-copy p{color:#dae6f4;font-size:16px}
.hero-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hero-steps button{position:relative;display:flex;align-items:center;gap:9px;min-height:46px;padding:6px 0 12px;border:0;background:none;color:#adc0d6;font-size:14px;text-align:left}
.hero-steps button[aria-pressed=true]{color:#fff}
.hero-steps button:hover{color:#fff}
.hero-step-number{font-size:11px;color:#a9c8f7}
.hero-step-track{position:absolute;left:0;right:0;bottom:0;height:2px;background:#7388a04d}
.hero-step-track i{display:block;width:100%;height:100%;background:#ffd45f;transform-origin:left;transform:scaleX(var(--step-progress,0))}
.hero-footer{position:absolute;bottom:22px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:20px;color:#bdcde0;font-size:12px}
.hero-scroll-cue{display:flex;align-items:center;gap:13px;font-size:13px}
.scroll-cue-arrow{display:grid;place-items:center;border:1px solid #839ab666;width:29px;height:36px;border-radius:16px;color:#ffd45f;font-size:19px}
#hero-end{position:absolute;bottom:0;height:calc(100svh - var(--header-height));width:1px;pointer-events:none;scroll-margin-top:var(--header-height)}
/* Seal and fold diagrams share a scale, colour key and visible captions. */
.formats{margin-top:52px;border-top:1px solid #bbc8d5;padding-top:30px;display:block}
.formats-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:25px}
.formats h3{font-size:24px;letter-spacing:-.035em}
.formats-heading p{font-size:15px}
.formats ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;padding:0;margin:0;list-style:none}
.formats li::before{content:none}
.format-drawing{background:#f7fafc;position:relative;border-bottom:2px solid #c7d7e8;aspect-ratio:1.1;display:grid;place-items:center}
.format-drawing svg{width:84%;height:94%;max-height:215px;fill:none;stroke:#25456a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.format-number{position:absolute;top:10px;left:12px;font-size:11px;color:#6c8298}
.pack-fill{fill:#e8f0fb}
.seal{fill:#9ab9e9;stroke:#416da8;stroke-width:1.2}
.fold{fill:none;stroke:#5b7b9f;stroke-dasharray:4 4;stroke-width:1.3}
.formats h4{font-size:16px;line-height:1.3;font-weight:600;letter-spacing:-.025em;margin:16px 0 6px}
.formats li p{font-size:14px;line-height:1.5;font-weight:400}
.format-key{display:flex;align-items:center;gap:10px;font-size:12px;margin-top:28px;color:#60758a}
.format-key>span[aria-hidden]{width:12px;height:12px;flex:none;background:#9ab9e9;border:1px solid #416da8}
@media(max-width:1100px){.hero-stage{gap:28px}.hero h1{font-size:7vw}html[lang=id] .hero h1{font-size:6vw}.hero-diagram-heading{font-size:10px}.hero-step-number{display:none}.hero-steps{gap:12px}.formats ul{gap:12px}.formats h4{font-size:15px}}
@media(max-width:850px){.hero{--header-height:72px}.hero.is-interactive{height:auto}.hero-stage{height:auto;min-height:0;position:relative;top:auto;grid-template-columns:minmax(0,1fr);gap:38px;padding-top:48px;padding-bottom:76px}.hero-copy{max-width:560px}.hero h1{font-size:clamp(60px,11vw,90px)}html[lang=id] .hero h1{font-size:clamp(50px,9.3vw,78px)}.hero-intro{max-width:490px;font-size:16px;margin-top:22px}.hero .eyebrow{margin-bottom:20px}.hero-cta{margin-top:26px}.hero-workbench{width:100%;max-width:520px;justify-self:center}.hero-diagram{height:400px;min-height:0}.hero-diagram-heading{font-size:11px}.hero-step-number{display:inline}.hero-scroll-cue{display:none}.hero-footer{justify-content:flex-end}.hero-footer>span:last-child{display:block}.formats ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}.formats-heading{align-items:flex-start;flex-direction:column;gap:10px}#hero-end{height:0}}
@media(max-width:560px){.hero{--header-height:68px}.hero-stage{padding-top:36px;gap:30px}.hero h1{font-size:clamp(52px,13vw,70px)}html[lang=id] .hero h1{font-size:clamp(40px,11.5vw,60px)}.hero .eyebrow{font-size:10px;letter-spacing:.11em}.hero-intro{font-size:15px;line-height:1.6}.hero .button{font-size:14px;padding:14px 18px;min-height:51px;gap:18px}.hero .text-link{font-size:13px;gap:12px}.hero-cta{gap:18px}.hero-diagram{height:315px}.hero-diagram-heading{font-size:10px;gap:10px}.hero-step-copy p{font-size:15px}.hero-steps button{font-size:13px;gap:6px}.hero-step-number{font-size:10px}.hero-steps{gap:12px}.hero-footer{font-size:11px}.formats{margin-top:36px}.formats ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}.formats h4{font-size:16px}.formats li p{font-size:13px}.format-key{align-items:flex-start;font-size:12px}.format-key>span[aria-hidden]{margin-top:4px}.formats-heading p{font-size:14px}}
@media(min-width:851px) and (max-height:740px){.hero.is-interactive{height:auto}.hero-stage{position:relative;top:auto;height:auto;min-height:620px}.hero-scroll-cue{display:none}}
@media(prefers-reduced-motion:reduce){.hero.is-interactive{height:auto}.hero-stage{position:relative;top:auto;height:auto}.hero-scroll-cue{display:none}}