/* Continuous narrative. The original content remains the no-JS / motion-off layout. */
.project-controls[hidden]{display:none}
.project-controls{display:flex;align-items:center;gap:28px;margin-top:32px;font-size:12px}
.project-index{display:flex;gap:8px;margin-left:auto}
.project-index button,.flow-motion{font:inherit;color:inherit;border:0;background:none;padding:14px 10px;min-height:44px}
.project-index button{min-width:44px;border-bottom:1px solid currentColor;opacity:.5}
.project-index button[aria-current]{opacity:1;border-bottom-color:#ceb482}
.project-skip{display:flex;gap:16px;align-items:center;min-height:44px}
.flow-motion{font-size:11px}
.flow-rings{display:none}
.flow-word{display:block}
.flow-on .projects{padding:0;height:420svh;background:#151915;color:#f0f0e8;isolation:isolate}
.flow-on .project-stage{position:sticky;top:0;height:100svh;min-height:621px;overflow:hidden;background:#151915}
.flow-on .project-stage>.section-label{position:absolute;inset:32px var(--pad) auto;z-index:5;padding:0;pointer-events:none}
.flow-on .project-stage>.section-label span{color:#ebece4;text-shadow:0 1px 12px #0008}
.flow-on .project-stage>.section-heading{position:absolute;left:var(--pad);right:var(--pad);top:88px;z-index:5;margin:0;pointer-events:none;opacity:1;transform:none;transition:none}
.flow-on .project-stage>.section-heading h2{font-size:clamp(25px,2.3vw,42px);line-height:1.1;letter-spacing:-.045em}
.flow-on .project-stage>.section-heading h2>span{color:#e1e3d8}
.flow-on .project-stage>.section-heading p{color:#d6d9cf;font-size:14px;text-align:right}
.flow-on .project-list{position:absolute;inset:0;display:block}
.flow-on .project{position:absolute;inset:0;margin:0;opacity:1;transform:none;transition:none;isolation:isolate}
.flow-on .project:not(:first-child){clip-path:inset(100% 0 0)}
.flow-on .project>a{display:block;position:absolute;inset:0}
.flow-on .project a:focus-visible{outline-offset:-8px;outline-width:3px}
.flow-on .project-photo,.flow-on .project-wide .project-photo{position:absolute;inset:0;aspect-ratio:auto}
.flow-on .project-photo>img,.flow-on .project-word{animation:none;transition:none}
.flow-on .project-photo>img{will-change:transform}
.flow-on .project .photo-shade{background:linear-gradient(180deg,#080e0dcc,transparent 43%,#080e0d38 55%,#080e0df2)}
.flow-on .project-topline{top:auto;bottom:calc(170px + 21vw);left:var(--pad);letter-spacing:.09em}
.flow-on .project .project-word{font-size:clamp(100px,24vw,540px);left:calc(var(--pad) - .035em);bottom:164px;letter-spacing:-.08em;line-height:.87}
.flow-on .project .project-word.smaller{font-size:clamp(85px,12vw,270px);letter-spacing:-.075em;line-height:.9}
.flow-on .project .project-word.smaller~.project-open{bottom:165px}
.flow-on .project .project-open{right:var(--pad);bottom:165px;width:64px;height:64px;background:#10170f36;border-color:#f2f0e899}
.flow-on .project-caption{position:absolute;left:var(--pad);right:var(--pad);bottom:99px;padding:0;gap:12px 24px;color:#eceee6}
.flow-on .project-caption h3,.flow-on .project:not(.project-wide) .project-caption h3{width:auto;font-size:clamp(18px,1.6vw,26px)}
.flow-on .project-caption>span{color:#b9c1b1;font-size:12px}
.flow-on .project-controls{position:absolute;z-index:6;left:var(--pad);right:var(--pad);bottom:max(18px,env(safe-area-inset-bottom));margin:0;border-top:1px solid #e9efdc40;padding-top:8px;color:#e0e6d7}
.flow-on .project-index button{border-bottom-width:2px}

/* The frame motif becomes a lightweight line drawing: no second WebGL scene. */
.flow-on .expertise{overflow:clip;padding-top:10svh;padding-bottom:0;background:#161d18}
.flow-on .expertise-grid{position:relative;grid-template-columns:1fr 1fr;gap:10%}
.flow-on .expertise-intro{position:sticky;top:9svh;align-self:start;opacity:1;transform:none;transition:none}
.flow-on .expertise-intro h2{font-size:clamp(62px,6.5vw,126px)}
.flow-on .expertise-intro>p:not(.eyebrow){max-width:440px}
.flow-on .expertise-intro .circle-link{margin-top:26px}
.flow-on .flow-rings{display:block;position:relative;height:clamp(190px,28svh,360px);width:100%;margin-top:28px;perspective:700px;pointer-events:none;overflow:hidden}
.flow-ring-object{position:absolute;width:clamp(120px,11vw,220px);aspect-ratio:1;left:30px;top:10%;transform-style:preserve-3d}
.flow-ring-object i{position:absolute;inset:0;border:1px solid #abbcac7a;border-radius:18%;transform:translateZ(calc(var(--layer) * -14px));background:none}
.flow-ring-object i:nth-child(3){border-color:#c4a977}
.flow-on .service-list{border:0;position:relative}
.flow-on .service-list:before{content:'';position:absolute;top:0;bottom:0;left:-28px;width:1px;background:#68765b40}
.flow-on .service-list:after{content:'';position:absolute;top:0;bottom:0;left:-28px;width:1px;background:#c9ad79;transform:scaleY(var(--service-progress,0));transform-origin:top}
.flow-on .service-list details{min-height:40svh;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid #4c5a465c;padding:26px 0}
.flow-on .service-list summary{padding:18px 0;gap:22px}
.flow-on .service-list summary>span{font-size:14px;color:#bfa673}
.flow-on .service-list h3{font-size:clamp(25px,2.4vw,44px);line-height:1.2}
.flow-on .service-content{padding-left:40px;padding-right:0}
.flow-on .service-content p{font-size:clamp(16px,1.25vw,20px);max-width:560px;color:#bac4b2}
.flow-on .capability-strip{animation:none;font-size:clamp(64px,11vw,230px);margin:12svh 0 -1.5vw;width:max-content;color:#414f3e;gap:4vw}

/* A quiet pinned manifesto, then four illuminated steps. Native page scroll throughout. */
.flow-on .studio{height:240svh;padding:0;background:#e9eae5}
.flow-on .studio-stage{height:100svh;min-height:680px;position:sticky;top:0;padding:7svh var(--pad) 6svh;display:flex;flex-direction:column}
.flow-on .studio .section-label{padding-bottom:6svh}
.flow-on .studio-statement{opacity:1;transform:none;transition:none;grid-template-columns:1.6fr .7fr;gap:9%;align-items:center;margin-block:auto}
.flow-on .studio-statement>p{font-size:clamp(46px,6.6vw,170px);line-height:1.14}
.flow-on .flow-word{color:#969e91;background:linear-gradient(90deg,#181f19 var(--word-fill,0%),#969e91 var(--word-fill,0%));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.flow-on .studio-statement>div>p{font-size:clamp(15px,1.25vw,20px);line-height:1.8}
.flow-on .process{position:relative;margin-top:6svh;gap:0;border-top:1px solid #303d2c30}
.flow-on .process:before{content:'';position:absolute;inset:-1px 0 auto;height:2px;background:#ab884b;transform:scaleX(var(--process-progress,0));transform-origin:left}
.flow-on .process article{position:relative;opacity:1;transition:none;transform:none;padding-top:30px}
.flow-on .process article>span{color:#5b6952}
.flow-on .process h3{font-size:clamp(20px,1.8vw,32px)}
.flow-on .process p{font-size:clamp(15px,1.1vw,18px)}
.flow-on .contact-heading{opacity:1;transition:none;transform-origin:left center}
.flow-on .footer{overflow:clip}
.flow-on .footer-word{will-change:transform}

@media(max-width:1050px){
 .flow-on .project-caption{display:block}
 .flow-on .project-caption>span{display:inline-block;margin-top:8px}
 .flow-on .project-caption .project-number{float:right}
 .flow-on .studio-stage{min-height:700px}
 .flow-on .studio-statement{grid-template-columns:1.4fr 1fr;gap:6%}
 .flow-on .studio-statement>p{font-size:4.8vw}
 .flow-on .studio-statement>div>p{font-size:15px}
}
@media(max-width:700px){
 .project-controls{flex-wrap:wrap;gap:8px 20px;font-size:11px}
 .project-direction{display:none}
 .project-index{margin:0 auto 0 0;gap:0}
 .project-index button{padding:12px 9px}
 .project-skip{font-size:11px;gap:7px}
 .flow-motion{padding:10px 0;min-width:84px}
 .flow-on .projects{height:360svh}
 .flow-on .project-stage{height:100svh;min-height:621px}
 .flow-on .project-stage>.section-label{top:24px;font-size:10px;gap:20px}
 .flow-on .project-stage>.section-label span:last-child{max-width:120px;font-size:10px}
 .flow-on .project-stage>.section-heading{top:84px;display:block}
 .flow-on .project-stage>.section-heading h2{font-size:30px}
 .flow-on .project-stage>.section-heading p{font-size:12px;text-align:left;margin-top:16px;line-height:1.6;max-width:210px}
 .flow-on .project .project-word{font-size:26vw;bottom:202px;left:20px}
 .flow-on .project .project-word.smaller{font-size:19vw;bottom:196px;line-height:.94}
 .flow-on .project-topline{bottom:calc(220px + 26vw);left:22px;font-size:11px;letter-spacing:.025em}
 .flow-on .project .project-open,.flow-on .project .project-word.smaller~.project-open{bottom:139px;width:44px;height:44px;right:22px}
 .flow-on .project-caption{bottom:91px;right:22px;left:22px;display:block}
 .flow-on .project-caption h3,.flow-on .project:not(.project-wide) .project-caption h3{font-size:17px;max-width:calc(100% - 55px);line-height:1.4;min-height:48px}
 .flow-on .project-caption>span{font-size:10px;line-height:1.5;margin:5px 0 0;max-width:calc(100% - 50px)}
 .flow-on .project-caption .project-number{float:right;max-width:none}
 .flow-on .project-controls{left:16px;right:16px;bottom:max(10px,env(safe-area-inset-bottom));gap:8px;flex-wrap:nowrap}
 .flow-on .project .photo-shade{background:linear-gradient(180deg,#07100ed9,transparent 48%,#07100e88 60%,#07100ef5 85%)}
 .flow-on .expertise{padding:64px var(--pad) 0}
 .flow-on .expertise-grid{display:block}
 .flow-on .expertise-intro{position:relative;top:0}
 .flow-on .expertise-intro h2{font-size:16vw}
 .flow-on .flow-rings{height:180px;margin-top:24px}
 .flow-ring-object{width:125px;left:40px}
 .flow-on .service-list{margin-top:15px}
 .flow-on .service-list:before,.flow-on .service-list:after{left:-10px}
 .flow-on .service-list details{min-height:0;padding:30px 0 22px}
 .flow-on .service-list summary{gap:12px}
 .flow-on .service-list h3{font-size:26px;line-height:1.2}
 .flow-on .service-list summary>span{font-size:12px}
 .flow-on .service-content{padding:0 0 18px 29px}
 .flow-on .service-content p{font-size:15px}
 .flow-on .capability-strip{font-size:19vw;margin:64px 0 -5px;gap:6vw}
 .flow-on .studio{height:auto;padding:64px var(--pad)}
 .flow-on .studio-stage{height:auto;min-height:0;position:relative;top:auto;padding:0;display:block}
 .flow-on .studio .section-label{padding-bottom:46px}
 .flow-on .studio-statement{display:block}
 .flow-on .studio-statement>p{font-size:11.8vw;line-height:1.22}
 .flow-on .studio-statement>div>p{font-size:15px}
 .flow-on .process{margin-top:60px;grid-template-columns:1fr}
 .flow-on .process article,.flow-on .process article+article{padding:26px 0 26px 62px;border-left:0;border-top:0;border-bottom:1px solid #303d2c30}
 .flow-on .process article>span{display:block;font-size:11px}
 .flow-on .process article:before{content:'+';position:absolute;left:8px;top:25px;color:#a68951;font-size:30px;font-weight:400}
 .flow-on .process h3{font-size:25px;margin-top:14px}
 .flow-on .process p{font-size:15px;margin-top:10px}
 .flow-on .process:before{inset:0 auto 0 0;height:auto;width:2px;transform:scaleY(var(--process-progress,0));transform-origin:top}
}
@media(max-width:360px){.flow-on .project-stage>.section-heading h2{font-size:25px}.flow-on .project-skip{font-size:10px}.flow-on .project-index button{min-width:36px}}
@media(prefers-reduced-motion:reduce){.flow-word{-webkit-text-fill-color:currentColor}.project-photo>img{animation:none}}

/* V4.9.4.1 — capability strip scale lock
   Keep the cinematic continuity layout, but preserve the responsive strip sizing
   from the stable V4.9.4 base on both desktop and mobile. */
.flow-on .capability-strip{
  width:100%;
  max-width:100%;
  margin:76px 0 0;
  padding:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:clamp(3px,1vw,18px);
  white-space:nowrap;
  overflow:visible;
  font-size:clamp(17px,5.45vw,82px);
  letter-spacing:-.06em;
  line-height:.92;
  color:#414f3e;
  transform:none !important;
  animation:none !important;
}
.flow-on .capability-strip span,
.flow-on .capability-strip i{
  flex:0 0 auto;
  min-width:0;
}
.flow-on .capability-strip i{
  font-size:.62em;
  line-height:1;
  color:#a58e61;
}

@media(max-width:700px){
  .flow-on .capability-strip{
    margin-top:44px;
    margin-bottom:0;
    gap:clamp(3px,.8vw,7px);
    font-size:clamp(17px,5.45vw,24px);
    letter-spacing:-.055em;
  }
}

/* V4.9.4.9 — fixed-duration contact card choreography */
.flow-on .idea-card-stage{opacity:1;transform:none}
.flow-on .idea-card{will-change:transform,opacity}


/* V4.9.4.15 — responsive project-stage audit */
.flow-on .project-live .project-preview-surface{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.flow-on .project-live .project-photo{background:#111713}
.flow-on .project-live .photo-shade{background:linear-gradient(180deg,rgba(7,13,10,.24),transparent 42%,rgba(7,13,10,.38) 58%,rgba(7,13,10,.91) 90%)}
@media(max-width:700px){.flow-on .project-live .photo-shade{background:linear-gradient(180deg,rgba(7,13,10,.30),transparent 38%,rgba(7,13,10,.48) 57%,rgba(7,13,10,.95) 82%)}.flow-on .project-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:8px}.flow-on .project-index{margin:0;min-width:0}.flow-on .flow-motion,.flow-on .project-skip{white-space:nowrap;min-width:0;font-size:10px}.flow-on .flow-motion{padding-inline:2px}.flow-on .project-skip{gap:4px}}
@media(max-width:360px){.flow-on .project-controls{column-gap:4px}.flow-on .project-index button{min-width:32px;padding-inline:6px}.flow-on .flow-motion,.flow-on .project-skip{font-size:9px}}

/* V4.9.4.21.2 — project-cover headline scale correction
   Keep the responsive cover artwork visible on desktop/tablet/mobile. */
.flow-on .project .project-word.smaller{
  font-size:clamp(58px,7.2vw,125px);
  line-height:.90;
  letter-spacing:-.06em;
  max-width:min(68vw,920px);
  bottom:164px;
}
.flow-on .project-topline{
  bottom:clamp(300px,25vw,410px);
}

@media (min-width:701px) and (max-width:1100px){
  .flow-on .project .project-word.smaller{
    font-size:clamp(54px,8.4vw,88px);
    line-height:.91;
    max-width:72vw;
    bottom:166px;
  }
  .flow-on .project-topline{
    bottom:clamp(285px,30vw,330px);
  }
}

@media (max-width:700px){
  .flow-on .project .project-word.smaller{
    font-size:clamp(38px,12vw,52px);
    line-height:.93;
    letter-spacing:-.055em;
    max-width:calc(100% - 44px);
    left:22px;
    bottom:184px;
  }
  .flow-on .project-topline{
    left:22px;
    bottom:286px;
    max-width:calc(100% - 90px);
  }
}

@media (max-width:360px){
  .flow-on .project .project-word.smaller{
    font-size:clamp(36px,11.5vw,42px);
    bottom:182px;
  }
  .flow-on .project-topline{
    bottom:274px;
  }
}