/* v13 — engagement layer: keyword sweep, long headlines, counters, step draw-in, autoplay progress */

/* Keyword sweep: an orange underline that draws itself when the section enters view */
mark.kw{background:none;color:inherit;padding:0 .06em;background-image:linear-gradient(transparent 82%,rgba(230,119,66,.75) 82%,rgba(230,119,66,.75) 94%,transparent 94%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size 1.1s cubic-bezier(.22,1,.36,1);transition-delay:var(--kw-delay,.35s);white-space:inherit}
.in-view mark.kw,.hero mark.kw{background-size:100% 100%}
.hero mark.kw{transition-delay:1.1s}
.hero mark.kw:nth-of-type(2){transition-delay:1.5s}
.hero mark.kw:nth-of-type(3){transition-delay:1.9s}
section mark.kw:nth-of-type(2){--kw-delay:.75s}
section mark.kw:nth-of-type(3){--kw-delay:1.15s}
@media(prefers-color-scheme:light){mark.kw{color:inherit}}

/* Longer, sentence-style headlines set a size down from the display titles */
.study-heading h2.study-title.long{font-size:clamp(3rem,5.4vw,6rem);line-height:.95;letter-spacing:-.04em}
.field-proof-copy h2.study-title.long{font-size:clamp(3.2rem,6vw,6.8rem);line-height:.95;letter-spacing:-.045em}
.hero h1{font-size:clamp(4.6rem,8.6vw,8.8rem)}
.hero h1 em{font-style:italic}
.hero-content{padding-top:clamp(7.5rem,14vh,11rem)}
.hero-intro{margin-top:2rem;margin-bottom:1.6rem}
@media(min-width:761px) and (max-height:860px){.hero h1{font-size:clamp(4.2rem,7.6vw,7.4rem)}.hero-content{padding-top:clamp(6rem,11vh,8.5rem)}}
.hero h1 .period{color:var(--orange,#c45b32)}
.contact-intro h2{font-size:clamp(2.8rem,4.6vw,5rem);line-height:1}
.tools-heading h2{font-size:clamp(2.8rem,4.6vw,5.2rem)}
.approach-section h2{font-size:clamp(3.2rem,5.4vw,6.2rem)}
@media(max-width:760px){
  .study-heading h2.study-title.long,.field-proof-copy h2.study-title.long{font-size:clamp(2.4rem,9.5vw,3.6rem)}
  .contact-intro h2,.tools-heading h2,.approach-section h2{font-size:clamp(2.3rem,9vw,3.4rem)}
}

/* Approach steps: a line draws down the left as the steps reveal */
.approach-steps[data-steps]{position:relative}
.approach-steps[data-steps] article{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.approach-steps[data-steps] article:nth-child(2){transition-delay:.25s}
.approach-steps[data-steps] article:nth-child(3){transition-delay:.5s}
.in-view .approach-steps[data-steps] article{opacity:1;transform:none}
.approach-steps[data-steps] article span{position:relative;display:inline-block}
.approach-steps[data-steps] article span:after{content:'';position:absolute;left:0;bottom:-.35rem;height:1px;width:100%;background:#ef8e5c;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.22,1,.36,1) .4s}
.in-view .approach-steps[data-steps] article span:after{transform:scaleX(1)}

/* Tools grid: staggered rise */
.tools-grid article{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.tools-grid article:nth-child(2){transition-delay:.1s}.tools-grid article:nth-child(3){transition-delay:.2s}.tools-grid article:nth-child(4){transition-delay:.3s}.tools-grid article:nth-child(5){transition-delay:.4s}.tools-grid article:nth-child(6){transition-delay:.5s}
.in-view .tools-grid article{opacity:1;transform:none}

/* Autoplay: a thin progress line on the active control shows the panel is moving on its own */
[data-autoplay] .is-autoplaying{position:relative}
[data-autoplay] .is-autoplaying:after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:#ef8e5c;transform:scaleX(0);transform-origin:left;animation:autoplay-progress var(--autoplay-ms,4200ms) linear forwards}
@keyframes autoplay-progress{to{transform:scaleX(1)}}

@media(prefers-reduced-motion:reduce){
  mark.kw{transition:none;background-size:100% 100%}
  .approach-steps[data-steps] article,.tools-grid article{opacity:1;transform:none;transition:none}
  .approach-steps[data-steps] article span:after{transform:scaleX(1)}
  [data-autoplay] .is-autoplaying:after{animation:none}
}

/* ---------- v13.1 edits from owner review ---------- */
/* 1. Client Voices reads as a sub-head of block 03, not a second headline */
.field-voices h2.voices-subhead{font-size:clamp(1.9rem,2.8vw,3rem);line-height:1.05;letter-spacing:-.025em;margin:.6rem 0 0;max-width:none}
.field-voices h2.voices-subhead em{color:var(--orange,#c45b32);font-style:italic}
/* 2. 5M: map and narrative are separate layout zones; neither can overlap */
.m-stage{display:flex;flex-direction:column;min-height:0}
.m-map{position:relative;isolation:isolate;flex:0 0 620px;height:620px;overflow:hidden}
.m-detail{position:relative;left:auto;right:auto;bottom:auto;width:100%;min-height:205px;padding:1.7rem 2.2rem}
.m-map .node-man{top:13.5%}
.m-map .node-machine,.m-map .node-management{top:41%}
.m-map .node-method,.m-map .node-material{top:85.5%}
.m-map .performance-core{top:41%}

/* Split-screen and tablet widths: selectors above a full-width 5M canvas. */
@media(min-width:761px) and (max-width:1180px){
  .five-m-interface{grid-template-columns:1fr}
  .m-controls{display:grid;grid-template-columns:1fr 1fr;padding:1rem;border-right:0;border-bottom:1px solid #aeb4ab}
  .control-instruction,.control-thought{grid-column:1/-1}
  .m-control{min-height:88px;margin:-.5px;border:1px solid #bbb8ae;grid-template-columns:2rem 1fr 1.2rem}
  .m-control:last-of-type{grid-column:1/-1}
  .m-control.active,.m-control:hover{padding-left:1rem;box-shadow:inset 4px 0 0 #8e351c}
  .control-thought{margin:1rem .5rem .3rem}
  .m-detail{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2.5rem;min-height:215px;padding:1.7rem 2.2rem}
}

@media(max-width:760px){
  .m-map{flex-basis:560px;height:560px}
  .m-detail{grid-template-columns:1fr;min-height:0;padding:1.4rem}
}
@media(max-width:430px){.m-map{flex-basis:510px;height:510px}}
/* 4. "A change in one M travels through all five" — deep green, bigger, legible on cream */
.control-thought p{color:#10211e;font-size:1.55rem;font-weight:500;max-width:260px;line-height:1.1}
/* 5. The system-releases rail breathes: signal crosses in 10 s instead of 4 */
.outcome-rail i:after{animation-duration:10s}
.outcome-rail i:nth-of-type(2):after{animation-delay:1.1s}
.outcome-rail i:nth-of-type(3):after{animation-delay:2.2s}
.outcome-rail i:nth-of-type(4):after{animation-delay:3.3s}
.outcome-rail i:nth-of-type(5):after{animation-delay:4.4s}
/* 6. Block 05 breaks away from block 04: different ground, a rule, more air */
.expertise-study{background:#0f1f1b;border-top:3px solid #c45b32;padding-top:clamp(4.5rem,7vw,7rem)}
#expertise-study-title{max-width:1100px;text-wrap:balance}
.transform-study{padding-bottom:clamp(4rem,6vw,6rem)}

/* ---------- Block 06: three steps, three facts ---------- */
.approach-steps[data-steps]{position:relative;padding-left:2.2rem}
.approach-steps[data-steps]:before{content:'';position:absolute;left:6px;top:1.4rem;bottom:1.6rem;width:2px;background:rgba(255,255,255,.18)}
.approach-steps[data-steps]:after{content:'';position:absolute;left:6px;top:1.4rem;bottom:1.6rem;width:2px;background:#ef8e5c;transform:scaleY(0);transform-origin:top;transition:transform 1.8s cubic-bezier(.22,1,.36,1) .3s}
.in-view .approach-steps[data-steps]:after{transform:scaleY(1)}
.approach-steps[data-steps] article{position:relative}
.approach-steps[data-steps] article:before{content:'';position:absolute;left:calc(-2.2rem + 1px);top:1.55rem;width:12px;height:12px;border-radius:50%;background:#18332d;border:2px solid #ef8e5c;box-sizing:border-box;transform:scale(0);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.approach-steps[data-steps] article:nth-child(1):before{transition-delay:.5s}
.approach-steps[data-steps] article:nth-child(2):before{transition-delay:1.1s}
.approach-steps[data-steps] article:nth-child(3):before{transition-delay:1.7s}
.in-view .approach-steps[data-steps] article:before{transform:scale(1)}
.step-fact{display:inline-block;margin:0 0 .7rem;padding:.38rem .7rem;background:#c45b32;color:#fff;font:600 .78rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.approach-steps[data-steps] article span{display:block}
@media(max-width:760px){.approach-steps[data-steps]{padding-left:1.6rem}.approach-steps[data-steps] article:before{left:calc(-1.6rem + 1px)}}

/* v13 production pass — preserve the approved design while making the opening
   experience fit real phone widths without horizontal clipping. */
html,body{max-width:100%;overflow-x:clip}
@media(max-width:760px){
  .hero-image{background-image:url('assets/concept-apparel-hero-mobile.webp')}
  .field-proof-image{background-image:url('assets/apparel-floor-story-mobile.webp')}
  .about-image{background-image:url('assets/concept-apparel-hero-mobile.webp')}
  .hero-content{width:100%;max-width:none;padding-left:1.25rem;padding-right:1.25rem}
  .hero h1{max-width:100%;font-size:clamp(3.25rem,15.5vw,4.1rem);line-height:.86;letter-spacing:-.05em;text-wrap:wrap}
  .hero h1 em{white-space:normal}
  .hero-intro{width:100%;max-width:none;font-size:.96rem;line-height:1.5}
  .hero-actions{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:.55rem;width:100%}
  .primary-action,.secondary-action{min-width:0;justify-content:center;gap:.45rem;padding:.8rem .55rem;font-size:.55rem;white-space:nowrap}
  .hero-bottom{gap:.75rem;font-size:.5rem;letter-spacing:.11em}
  .hero-bottom a{gap:.45rem;white-space:nowrap}
}
@media(max-width:380px){
  .hero h1{font-size:clamp(3.05rem,15vw,3.55rem)}
  .hero-intro{font-size:.9rem}
  .primary-action,.secondary-action{font-size:.51rem}
}