/* Hallmark · component: sourcing process · theme: Loom adapted to locked NUSAPACT · genre: editorial · v2.0.0
 * Existing hero/materials preserved. Ruled paper, local fonts and material photographs; state-only motion.
 * Brand exception: Heritage Green replaces indigo; local Cormorant/Manrope replace theme fonts. */
:root{--loom-paper:var(--ivory);--loom-paper-step:#efe9dd;--loom-ink:var(--green);--loom-muted:var(--muted);--loom-rule:var(--line);--loom-display:Cormorant,Georgia,serif;--loom-body:var(--body);--loom-xs:8px;--loom-sm:12px;--loom-md:16px;--loom-lg:24px;--loom-xl:40px;--loom-2xl:64px;--loom-state:220ms;--loom-ease:cubic-bezier(.22,1,.36,1)}
#sourcing{padding-block:var(--loom-2xl);color:var(--loom-ink);background:var(--loom-paper)}
#sourcing .section-heading{align-items:end;margin-bottom:var(--loom-xl);gap:var(--loom-xl)}
#sourcing .section-heading h2{font:500 clamp(42px,4.3vw,64px)/1.04 var(--loom-display);letter-spacing:-.015em}
#sourcing .section-heading>p{font-size:16px;line-height:1.65;max-width:40ch;text-align:left}
.loom-process{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--loom-2xl);align-items:start}
.loom-process .approach-workspace{position:sticky;top:110px;min-width:0}
.loom-material-study,.loom-material-photos figure{margin:0}
.loom-material-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--loom-sm)}
.loom-material-photos img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.loom-material-photos figcaption{font:500 13px/1.5 var(--loom-body);color:var(--loom-muted);margin-top:var(--loom-xs)}
.loom-outcome{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--loom-lg);align-items:start;border-block:1px solid var(--loom-rule);padding-block:var(--loom-lg);margin-top:var(--loom-lg)}
.loom-current-step{font:500 48px/1 var(--loom-display);font-variant-numeric:tabular-nums;color:var(--loom-ink)}
.loom-output-label{display:block;font:500 13px/1.5 var(--loom-body);color:var(--loom-muted);margin-bottom:var(--loom-xs)}
.loom-current-output{display:block;font:500 clamp(23px,2.2vw,30px)/1.25 var(--loom-display);color:var(--loom-ink);max-width:25ch}
.approach-hint{font-size:13px;line-height:1.65;color:var(--loom-muted);margin-top:var(--loom-md)}
#sourcing .sourcing-steps{display:block;margin:0;padding:0;list-style:none}
#sourcing .sourcing-steps:before,#sourcing .sourcing-steps:after,#sourcing .sourcing-steps li:before{display:none}
#sourcing .sourcing-steps li{display:block;padding:0;border-top:1px solid var(--loom-rule)}
#sourcing .sourcing-steps li:last-child{border-bottom:1px solid var(--loom-rule)}
.approach-step>summary{display:grid;grid-template-columns:36px minmax(0,1fr) 24px;align-items:center;gap:var(--loom-lg);min-height:96px;padding:var(--loom-lg) var(--loom-md);cursor:pointer;list-style:none;transition:background-color var(--loom-state) var(--loom-ease)}
.approach-step>summary::-webkit-details-marker{display:none}
#sourcing .approach-step .step-number{font:500 28px/1 var(--loom-display);font-variant-numeric:tabular-nums;letter-spacing:0;margin:0;color:var(--loom-muted);transform:none}
#sourcing .approach-step h3{font:500 clamp(22px,2.2vw,30px)/1.2 var(--loom-body);margin:0;letter-spacing:-.025em;min-width:0;overflow-wrap:break-word}
.approach-step[open]>summary,.approach-step>summary:hover{background:var(--loom-paper-step)}
#sourcing .approach-step[open] .step-number{color:var(--loom-ink)}
#sourcing .approach-step .disclosure-icon{position:static;transform:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4}
.approach-step .disclosure-vertical{transition:opacity var(--loom-state) var(--loom-ease)}
.approach-step[open] .disclosure-vertical{opacity:0}
.approach-step summary:focus-visible{outline:2px solid var(--loom-ink);outline-offset:-2px}
.approach-step-body{padding:var(--loom-lg) var(--loom-md) var(--loom-xl);margin:0}
.approach-step-body>p{font-size:16px;line-height:1.65;color:var(--loom-muted);max-width:52ch}
#sourcing .sourcing-deliverable{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--loom-lg);margin-top:var(--loom-lg);padding-top:var(--loom-md);border-top:1px solid var(--loom-rule)}
#sourcing .sourcing-deliverable dt{font-size:13px;color:var(--loom-muted);font-weight:500}
#sourcing .sourcing-deliverable dd{font-size:14px;line-height:1.65;color:var(--loom-ink);margin-top:var(--loom-xs)}
.approach-cta{display:inline-flex;align-items:center;gap:var(--loom-md);margin-top:var(--loom-lg);min-height:44px;font-size:14px}
@media(max-width:1100px){.loom-process{gap:var(--loom-xl)}.approach-step>summary{gap:var(--loom-md)}}
@media(max-width:760px){#sourcing{padding-block:var(--loom-xl)}#sourcing .section-heading{display:block;margin-bottom:var(--loom-lg)}#sourcing .section-heading h2{font-size:44px}#sourcing .section-heading>p{margin-top:var(--loom-lg);max-width:45ch}.loom-process{grid-template-columns:minmax(0,1fr);gap:var(--loom-xl)}.loom-process .approach-workspace{position:static}.loom-material-photos{gap:var(--loom-xs)}.loom-material-photos img{aspect-ratio:1}.loom-material-photos figcaption{font-size:12px}.loom-outcome{grid-template-columns:44px minmax(0,1fr);gap:var(--loom-md)}.loom-current-step{font-size:40px}.loom-current-output{font-size:27px}.approach-step>summary{min-height:88px;gap:var(--loom-sm);grid-template-columns:30px minmax(0,1fr) 20px;padding-inline:var(--loom-xs)}#sourcing .approach-step h3{font-size:24px}.approach-step-body{padding-inline:var(--loom-xs)}#sourcing .sourcing-deliverable{gap:var(--loom-md)}}
@media(max-width:370px){#sourcing .section-heading h2{font-size:40px}#sourcing .sourcing-deliverable{grid-template-columns:minmax(0,1fr)}#sourcing .approach-step h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){.approach-step>summary,.approach-step .disclosure-vertical{transition:none}}