/* One quiet, reversible story on the site's warm ivory. */
#materials.wp-story { position:relative; padding:0; background:var(--paper); color:var(--ink); }
.wp-story-stage { position:relative; width:100%; height:100svh; min-height:660px; overflow:clip; isolation:isolate; }
.wp-story-copy { position:absolute; z-index:2; left:var(--story-copy-left,50%); top:var(--story-copy-top,50%); width:var(--story-copy-width,90%); transform:translate(var(--story-copy-x,-50%),-50%); text-align:var(--story-align,center); }
.wp-story-copy h2 { display:grid; font-size:var(--story-font,clamp(52px,5.5vw,88px)); line-height:1.08; letter-spacing:-.055em; font-weight:200; }
.wp-thought { grid-area:1/1; opacity:0; visibility:hidden; }
.wp-thought:first-child { opacity:1; visibility:visible; }
.wp-thought > span { display:block; }
.wp-story-eyebrow { position:absolute; bottom:calc(100% + 28px); opacity:var(--story-intro,0); color:#6b6071; }
.wp-story-support { display:grid; margin-top:24px; max-width:35ch; opacity:var(--story-support,0); color:#625b65; font-size:clamp(15px,1.25vw,20px); line-height:1.6; text-align:left; }
.wp-story-support p { grid-area:1/1; opacity:0; visibility:hidden; }
.wp-story-support p:first-child { opacity:1; visibility:visible; }
.wp-story-graph { position:absolute; left:44%; right:4.5%; top:18%; bottom:14%; opacity:var(--story-graph,0); }
.wp-story-aura { position:absolute; inset:8%; border-radius:50%; background:radial-gradient(ellipse,#a28ab013,transparent 65%); opacity:var(--story-converge,0); }
.wp-story-paths { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.wp-story-route,.wp-story-trunk { fill:none; stroke:#947ba8; stroke-width:1.1; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.wp-story-route { stroke-dasharray:1; stroke-dashoffset:var(--route-dash,1); opacity:var(--route-opacity,.45); }
.wp-story-trunk { stroke-width:1.5; stroke:#795c9b; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--story-converge,0)); opacity:var(--story-converge,0); }
.wp-business { position:absolute; top:50%; left:10%; transform:translate(-50%,-50%); font-size:clamp(11px,1.05vw,15px); white-space:nowrap; color:#554b5c; background:var(--paper); padding:9px 11px; opacity:var(--story-business,0); }
.wp-partner { position:absolute; top:50%; left:39%; transform:translate(-50%,-50%) scale(var(--partner-scale,.94)); text-align:center; padding:18px 20px; border:1px solid #ffffffb0; border-radius:18px; background:linear-gradient(135deg,#ffffff9c,#ffffff30); box-shadow:inset 0 1px 1px #fff,0 8px 28px #6753700c; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); opacity:var(--story-converge,0); white-space:nowrap; }
.wp-partner > span { font-size:clamp(11px,1.1vw,16px); letter-spacing:.17em; font-weight:400; }
.wp-partner small { display:block; font-size:clamp(9px,.8vw,12px); margin-top:7px; color:#786d80; }
.wp-specialist { position:absolute; left:78%; width:140px; transform:translate(-50%,-50%); opacity:0; text-align:center; }
.wp-specialist-icon { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 10px; border-radius:18px; border:1px solid #ffffffd0; background:linear-gradient(140deg,#ffffffa0,#ffffff32); box-shadow:inset 0 1px 1px #fff,0 5px 18px #49345107; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#795c9b; }
.wp-service-icon { width:36px; height:36px; }
.wp-specialist > span { font-size:clamp(11px,1vw,15px); color:#4d4651; }
.wp-repeated-task { position:absolute; left:43%; transform:translate(-50%,-50%); display:flex; gap:8px; font-size:clamp(9px,.78vw,12px); color:#867591; white-space:nowrap; opacity:0; }
.wp-repeated-task span { padding:3px 0; background:var(--paper); }
.wp-story-ready .wp-story-stage { position:sticky; top:0; }
.wp-story-ready::after { content:''; display:block; height:320svh; }
@media(max-width:899px) {
 .wp-story-stage { min-height:620px; }
 .wp-story-copy h2 { line-height:1.12; }
 .wp-story-support { max-width:44ch; font-size:13px; margin-top:16px; }
 .wp-story-eyebrow { bottom:calc(100% + 16px); font-size:8px; }
 .wp-story-graph { left:4%; right:4%; top:44%; bottom:5%; }
 .wp-specialist { width:100px; }
 .wp-specialist-icon { width:44px; height:44px; border-radius:13px; margin-bottom:5px; }
 .wp-service-icon { width:28px; height:28px; }
 .wp-specialist > span { font-size:10px; }
 .wp-partner { padding:12px 10px; border-radius:13px; }
 .wp-partner > span { font-size:9px; letter-spacing:.11em; }
 .wp-partner small { font-size:8px; margin-top:4px; }
 .wp-business { font-size:10px; padding:6px; }
 .wp-repeated-task { font-size:8px; gap:4px; left:42%; }
}
/* Readable final composition when scripting or motion is unavailable. */
@media(prefers-reduced-motion:reduce), (max-height:499px) {
 .wp-story-ready::after { display:none; }
 .wp-story-ready .wp-story-stage { position:relative; }
 .wp-story-stage { min-height:700px; }
}
.wp-story-support { position:absolute; top:100%; left:0; width:100%; }
@media(prefers-reduced-motion:reduce), (max-height:499px) {
 #materials .wp-story-stage { min-height:780px; }
}

.wp-story-copy { text-align:left; }
.wp-thought > span { position:relative; left:var(--line-left,50%); transform:translateX(var(--line-x,-50%)); width:max-content; max-width:100%; }

.wp-task-sequence { position:absolute; left:50%; bottom:-1%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:14px; opacity:0; color:#796b83; font-size:clamp(11px,.95vw,14px); white-space:nowrap; }
.wp-task-sequence i { font-style:normal; color:#b6a7c2; font-size:12px; }
.wp-task-sequence small { position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%); font-size:10px; color:#968c9c; letter-spacing:.03em; }
@media(max-width:899px) { .wp-task-sequence { bottom:-2%; gap:10px; font-size:11px; } .wp-task-sequence small { font-size:9px; } }

/* Read the centered thought and explanation together before the move left. */
.wp-story-support { left:var(--support-left,50%); transform:translateX(var(--support-x,-50%)); text-align:var(--support-align,center); }

/* Opening: brand first, then the supplier thought on its own uninterrupted line. */
.wp-opening-brand { opacity:var(--brand-reveal,0); filter:blur(var(--brand-blur,9px)); }
.wp-opening-suppliers { opacity:var(--suppliers-reveal,0); filter:blur(var(--suppliers-blur,6px)); white-space:nowrap; font-size:.66em; line-height:1.3; margin-top:12px; }
.wp-thought[data-thought="0"] .wp-opening-suppliers { max-width:none; }
@media (max-width:899px) { .wp-opening-suppliers { font-size:.56em; margin-top:10px; } }
@media(prefers-reduced-motion:reduce) { .wp-opening-brand,.wp-opening-suppliers { filter:none; } }

/* Keep repeated effort beside the specialist it belongs to. */
.wp-specialist { display:flex; align-items:center; gap:16px; width:250px; text-align:left; }
.wp-specialist-icon { flex:0 0 54px; width:54px; height:54px; margin:0; border-radius:16px; }
.wp-service-label > span { display:block; font-size:clamp(12px,1vw,16px); color:#312c35; line-height:1.3; }
.wp-service-tasks { display:block; margin-top:5px; font-size:clamp(10px,.8vw,13px); color:#795c9b; white-space:nowrap; opacity:0; }
.wp-service-tasks i { font-style:normal; margin-inline:4px; font-size:.9em; }
@media(max-width:899px) {
 .wp-specialist { gap:8px; width:166px; }
 .wp-specialist-icon { flex-basis:35px; width:35px; height:35px; border-radius:11px; }
 .wp-service-label > span { font-size:10px; }
 .wp-service-tasks { font-size:8px; margin-top:4px; }
 .wp-service-tasks i { margin-inline:1px; }
}

@media(max-width:899px) { .wp-specialist { width:156px; gap:6px; } }

/* A tighter opening and a wider, calmer explanation. */
.wp-opening-suppliers { margin-top:3px; line-height:1.12; }
.wp-story-support { max-width:var(--support-width,62ch); width:100%; line-height:1.5; }
@media(max-width:899px) { .wp-opening-suppliers { margin-top:3px; } }

/* Let the opening thought disappear before the explanation stands alone. */
.wp-story-support { top:var(--support-top,100%); transform:translate(var(--support-x,-50%),var(--support-y,0%)); font-size:var(--support-font,20px); }
@media(min-width:900px) {
 .wp-story-support { width:var(--standalone-width,100%); }
}

/* Keep the opening explanation with its headline, in two calm lines. */
@media(min-width:900px) {
 [data-story-copy="0"] > span { display:block; white-space:nowrap; }
}
@media(max-width:899px) { [data-story-copy="0"] > span { display:block; } }
.wp-partner { left:var(--partner-left,39%); }
.wp-business { opacity:calc(var(--story-business,0) * var(--specialists-opacity,1)); }
.wp-story-trunk { opacity:calc(var(--story-converge,0) * var(--specialists-opacity,1)); }
/* A quiet specialist constellation unfolds behind the existing glass partner. */
.wp-network-mesh { position:absolute; inset:-7% -3%; width:106%; height:114%; overflow:visible; opacity:var(--mesh-opacity,0); transform:scale(var(--mesh-scale,.94)); transform-origin:50% 50%; pointer-events:none; }
.wp-network-mesh path { fill:none; stroke:#997cab; stroke-width:.85; vector-effect:non-scaling-stroke; opacity:.40; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--mesh-draw,0)); }
.wp-network-mesh circle { fill:url(#wp-mesh-pearl); }
.wp-partner { z-index:3; }
.wp-specialist,.wp-business { z-index:2; }
@media(max-width:899px) { .wp-network-mesh { inset:-3% -2%; width:104%; height:106%; } .wp-network-mesh path { stroke-width:.7; opacity:.42; } }
@media(prefers-reduced-motion:reduce) { .wp-network-mesh { transform:none; } }