/* Scroll scenes modeled on HDC Holdings main motion (pin + step snap + cover).
   Desktop only: script.js adds .has-motion at >=1024px when reduced motion is off. */

/* 02 Integrated: step circles removed on every screen size. */
.process-track::before,.process-track article::before{display:none!important}

.has-motion{scroll-behavior:auto}
.has-motion body{--head:72px;--scene-top:max(112px,calc((100vh - 620px) / 2))}
/* 01·02: the left eyebrow and the right list share one top line, at the same height in both scenes. */
.has-motion .business .section-intro .eyebrow,.has-motion .integrated .section-intro .eyebrow{margin-top:0}
.has-motion .projects,.has-motion .landscape,.has-motion .numbers{height:100vh;box-sizing:border-box;overflow:hidden}
.has-motion .section-intro h2,.has-motion .section-heading h2{font-size:clamp(40px,3.6vw,56px)}

/* 01 Our Business: five cards stack bottom-up, headers stay visible. */
.has-motion .business{padding:0}
.has-motion .business .sticky-viewport{height:100vh;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:64px;align-items:start;align-content:start;padding-top:var(--scene-top);padding-bottom:56px}
.has-motion .business .section-intro{display:block;margin:0}
.has-motion .business .section-intro h2{margin:28px 0}
.has-motion .business .intro-copy{max-width:420px}
.has-motion .business-count{margin:40px 0 0;font-size:14px;letter-spacing:.08em;color:var(--muted)}
.has-motion .business-count b{color:var(--ink);font-weight:600}
.has-motion .business-list{position:relative;height:min(620px,calc(100vh - 168px));overflow:hidden;border-top:0}
.has-motion .business-row,.has-motion .business-row:hover,.has-motion .business-row.is-active{position:absolute;left:0;right:0;top:calc(var(--i) * var(--head));height:calc(100% - 4 * var(--head));min-height:0;box-sizing:border-box;display:grid;grid-template-columns:56px minmax(0,1fr) 24px;grid-template-rows:var(--head) auto auto auto;column-gap:24px;row-gap:0;align-items:start;align-content:start;padding:0 8px;background:var(--paper);border-top:1px solid var(--line);border-bottom:0;box-shadow:none;will-change:transform}
.has-motion .business-row.is-active{background:var(--paper);border-top-color:var(--ink)}
.has-motion .business-list::after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid var(--line)}
.has-motion .business-row .index,.has-motion .business-row h3{transition:color .3s}
.has-motion .business-row.is-active .index{color:#8b4320}
.has-motion .business-row>div{display:contents}
.has-motion .business-row .index{grid-column:1;grid-row:1;align-self:center}
.has-motion .business-row h3{grid-column:2;grid-row:1;align-self:center;margin:0;font-size:26px;transition:color .3s}
.has-motion .business-row .row-arrow{grid-column:3;grid-row:1;align-self:center}
.has-motion .business-row .kicker{grid-column:2;grid-row:2;margin:28px 0 0}
.has-motion .business-row>div>p:last-child{grid-column:2;grid-row:3;margin:14px 0 0;max-width:560px;font-size:20px;line-height:1.6;text-align:left}
.has-motion .business-row .service-tags{grid-column:2;grid-row:4;margin:20px 0 0}

/* 02 Integrated: all four steps listed, the current one lit, progress rail on the left. */
.has-motion .integrated{padding:0}
.has-motion .integrated-inner{height:100vh;box-sizing:border-box;padding-top:var(--scene-top);padding-bottom:56px;align-items:start;align-content:start}
.has-motion .process-track{position:relative}
.has-motion .process-progress{position:absolute;left:0;top:0;bottom:0;width:2px;background:#f19a66;transform-origin:top;transform:scaleY(.25)}
.has-motion .process-track article{opacity:.32;transition:opacity .4s ease;padding:28px 0 28px 32px;min-height:0}
.has-motion .process-track article.is-done{opacity:.55}
.has-motion .process-track article.is-active{opacity:1}
.has-motion .process-track .accent strong{color:inherit}
.has-motion .process-track .accent span{color:#f19a66}
.has-motion .process-track article.is-active strong{color:#f19a66}

/* 03 Projects: one card enlarged at a time. */
.has-motion .projects{display:flex;flex-direction:column;padding-top:104px;padding-bottom:48px}
.has-motion .projects .section-heading{margin-bottom:32px;align-items:end}
.has-motion .projects .section-heading .eyebrow{margin-bottom:16px}
.has-motion .projects .section-heading h2 br{display:none}
.has-motion .project-grid{display:flex;gap:24px;flex:1;min-height:0}
.has-motion .project-card{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.has-motion .project-card:first-child{flex-grow:2.4}
.has-motion .project-visual,.has-motion .project-main .project-visual{height:auto;flex:1;min-height:0;margin-bottom:20px;transition:filter .4s ease}
.has-motion .project-card.is-active .project-visual{transform:none}
.has-motion .project-card:not(.is-active) .project-visual{filter:saturate(.55) brightness(.82)}
.has-motion .project-meta{min-height:118px}
.has-motion .project-meta h3{font-size:22px;transition:font-size .4s ease,color .3s}
.has-motion .project-card.is-active .project-meta h3{font-size:28px}

/* 04 Landscape: image window opens to full screen, then the copy settles in. */
.has-motion .landscape{min-height:0}
.has-motion .landscape-copy{min-height:100vh;box-sizing:border-box;padding-top:104px;padding-bottom:64px}
.has-motion .landscape-image{will-change:clip-path}

/* 05 Numbers: pinned sequential reveal (replaces the nearest-to-centre flicker). */
.has-motion .numbers{display:flex;flex-direction:column;justify-content:center;padding-top:96px;padding-bottom:48px}
.has-motion .numbers .section-intro{margin-bottom:56px}
.has-motion .number-grid>div{transition:none}