/* Kinetic edition: motion follows attention, pointer and native scroll. */
.title-mask{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.title-line{display:inline-block}
.hero-copy h1>.title-mask{color:inherit}
.hero-copy h1>.title-accent{color:var(--brand)}
.kinetic-enabled .title-line{animation:title-arrival 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--line-index)*130ms)}
@keyframes title-arrival{from{transform:translateY(115%) rotate(5deg);opacity:.3}to{transform:translateY(0) rotate(0);opacity:1}}
.signal-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.kinetic-enabled .hero-copy{transform:translateY(calc(var(--hero-out,0)*40px));opacity:calc(1 - var(--hero-out,0)*.45)}
.kinetic-enabled .hero-art.modern-art>img{transform:perspective(1100px) translateY(var(--hero-shift,0px)) rotateY(var(--pointer-x,0deg)) rotateX(var(--pointer-y,0deg)) rotate(calc(-9deg + var(--hero-out,0)*26deg)) scale(calc(1 + var(--pulse,0)*.06));transition:none;will-change:transform}
.kinetic-enabled .modern-art.impulse>img{animation:form-impulse 1.5s cubic-bezier(.16,1,.3,1)}
@keyframes form-impulse{0%{filter:brightness(1)}20%{filter:brightness(1.35);rotate:12deg}100%{filter:brightness(1);rotate:0deg}}
.form-play{position:absolute;bottom:20px;right:0;z-index:4;display:flex;align-items:center;gap:14px;padding:12px 0;background:none;color:#ddd;font-size:11px;min-height:44px}
.play-dot{height:8px;width:8px;border:1px solid var(--brand);border-radius:50%;transition:background .2s,box-shadow .2s}
.form-play:hover .play-dot{background:var(--brand);box-shadow:0 0 0 5px #ff5a2b20}.form-play>span:last-child{color:var(--brand);font-size:19px}
.modern-art .art-caption{bottom:30px;left:0}
.motion-toggle{display:flex;align-items:center;gap:8px;min-height:44px;background:none;font-size:10px;color:#c7c7c7;padding:0 4px;margin-left:20px}
.motion-toggle>span:first-child{color:var(--brand);font-size:17px;width:18px;text-align:center}.hero-bottom>span{margin-left:auto}
.reading-progress{position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--brand);transform-origin:left;transform:scaleX(0);pointer-events:none}
.kinetic-enabled .motion-enter{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--enter-delay,0ms)}
.kinetic-enabled .motion-enter.motion-entered{opacity:1;transform:none}
.kinetic-enabled .button>span,.kinetic-enabled .header-cta>svg{translate:var(--magnet-x,0px) var(--magnet-y,0px);transition:translate .2s var(--ease)}
.kinetic-enabled .project-image{clip-path:inset(calc((1 - var(--project-reveal,1))*13%) calc((1 - var(--project-reveal,1))*7%) round 8px);transform:perspective(1400px) rotateY(var(--tilt,0deg));transition:transform .4s var(--ease)}
.kinetic-enabled .project-image>img{transform:translateY(var(--project-parallax,0px)) scale(1.12);transition:transform .3s ease-out}
.case-cursor{position:absolute;top:0;left:0;width:86px;height:86px;display:grid;place-content:center;border-radius:50%;background:var(--brand);color:var(--ink);font-size:12px;line-height:1.4;text-align:center;pointer-events:none;opacity:0;transform:translate(calc(var(--case-x,0px) - 43px),calc(var(--case-y,0px) - 43px)) scale(.6);transition:opacity .2s,scale .2s;z-index:3}
@media(hover:hover) and (pointer:fine){.kinetic-enabled .project.pointer-tracking:hover .case-cursor{opacity:1;transform:translate(calc(var(--case-x,0px) - 43px),calc(var(--case-y,0px) - 43px)) scale(1)}.kinetic-enabled .project:hover .project-open{opacity:0}.kinetic-enabled .service-row summary{position:relative;isolation:isolate}.kinetic-enabled .service-row summary:before{content:'';position:absolute;inset:0 calc(var(--gutter)*-1);background:#f2eeec;z-index:-1;opacity:0;transform:none;transition:opacity .36s ease-out}.kinetic-enabled .service-row summary:hover:before{opacity:1;transform:none}.kinetic-enabled .service-row summary:hover{color:inherit}.kinetic-enabled .service-row summary:hover .service-number,.kinetic-enabled .service-row summary:hover .expand{color:var(--brand)}.kinetic-enabled .service-row summary:hover .service-teaser{color:#75646e}}
.kinetic-strip{display:block;overflow:clip;border:0;padding:20px 0 0;margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1);width:calc(100% + var(--gutter)*2);font-size:clamp(44px,7.5vw,112px);line-height:1.2}
.kinetic-strip-row{display:flex;align-items:center;justify-content:center;gap:38px;white-space:nowrap;width:max-content;min-width:110%;transform:translateX(calc(var(--strip-shift,0px) - 90px));letter-spacing:-.03em}
.kinetic-strip-row svg{width:.5em;height:.5em;color:var(--brand);flex-shrink:0}
.kinetic-strip-row.reverse{transform:translateX(calc(var(--strip-shift,0px)*-1 - 10px));color:transparent;-webkit-text-stroke:1px var(--ink);margin-top:8px}
.kinetic-strip-row.reverse svg{fill:var(--brand)}
.scene-word,.chapter-rail,.scene-counter,.theatre-progress{display:none}
.kinetic-enabled .approach{height:300svh;min-height:2100px;position:relative;padding-top:65px;padding-bottom:0}
.kinetic-enabled .approach>.section-label{margin-bottom:30px}
.kinetic-enabled .approach-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:9%;position:sticky;top:calc(var(--header-height) + 14px);height:calc(100svh - var(--header-height) - 28px);min-height:510px;isolation:isolate;align-items:center;border-top:1px solid #ffffff20;overflow:clip}
.kinetic-enabled .approach-sticky{position:relative;top:auto;align-self:center;z-index:1;padding-bottom:40px}
.kinetic-enabled .approach-sticky h2{font-size:clamp(35px,3vw,50px);line-height:1.06;position:relative;z-index:2;margin-top:20px}
.kinetic-enabled .approach-sticky h2 br{display:none}.kinetic-enabled .approach-sticky h2>span{display:block}
.kinetic-enabled .approach-visual.modern-scenes{height:clamp(230px,39vh,400px);margin-top:10px}
.kinetic-enabled .modern-scenes img{width:90%;left:5%;opacity:0;transform:translateX(-50px) rotate(-18deg) scale(.72);filter:blur(10px);transition:opacity .6s,transform .9s var(--ease),filter .8s}
.kinetic-enabled .modern-scenes img.active{opacity:1;transform:translateX(0) rotate(var(--scene-drift,0deg)) scale(1);filter:blur(0)}
.kinetic-enabled .approach-steps{position:relative;height:390px;z-index:2;align-self:center;margin-bottom:40px}
.kinetic-enabled .approach-step{position:absolute;inset:0;padding:0;min-height:0;border:0;opacity:0;visibility:hidden;transform:translateY(40px);filter:blur(5px);transition:opacity .45s,transform .7s var(--ease),filter .5s,visibility .45s}
.kinetic-enabled .approach-step.chapter-active{opacity:1;visibility:visible;transform:none;filter:blur(0)}
.kinetic-enabled .approach-step h3{font-size:clamp(28px,3.1vw,47px)}
.kinetic-enabled .scene-word{display:block;position:absolute;left:-.01em;top:3%;font-size:clamp(100px,15vw,235px);line-height:1;letter-spacing:-.055em;color:transparent;-webkit-text-stroke:1px #ffffff10;white-space:nowrap;pointer-events:none;z-index:-1;transform:translateX(calc(var(--scene-progress,0)*-65px))}
.kinetic-enabled .scene-progress{display:none}
.kinetic-enabled .chapter-rail{position:absolute;bottom:17px;left:0;right:0;display:flex;gap:35px;z-index:3}
.chapter-rail button{background:none;border-top:1px solid #ffffff30;color:#aaa;display:flex;align-items:center;gap:20px;padding:15px 0;flex:1;font-size:13px;min-height:48px;transition:color .3s,border-color .3s}
.chapter-rail button>span{font-size:10px}.chapter-rail button.current{color:white;border-color:var(--brand)}.chapter-rail button.current>span{color:var(--brand)}
.kinetic-enabled .scene-counter{display:block;position:absolute;right:0;top:20px;font-size:13px;color:#777;z-index:2}.scene-counter>span:first-child{color:var(--brand)}
.kinetic-enabled .theatre-progress{display:block;position:absolute;bottom:0;left:0;width:100%;height:2px;transform-origin:left;background:var(--brand)}
.kinetic-enabled .build-grid{position:relative}.kinetic-enabled .build-grid:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--brand);transform:scaleX(var(--build-progress,0));transform-origin:left}
.kinetic-enabled .contact{clip-path:inset(0 calc((1 - var(--contact-open,1))*3%) round calc((1 - var(--contact-open,1))*32px));transition:clip-path .1s}
.kinetic-enabled .contact-star{transform:rotate(calc(var(--contact-open,0)*135deg)) scale(calc(.7 + var(--contact-open,0)*.3));transition:transform .2s ease-out}
.kinetic-enabled .contact-heading h2{transform:translateX(calc((1 - var(--contact-open,1))*-35px));transition:transform .2s ease-out}
.kinetic-paused .signal-field,.kinetic-paused .form-play{display:none}
.kinetic-paused .motion-enter{opacity:1;transform:none}.kinetic-paused .kinetic-strip-row{transform:none}.kinetic-paused .case-cursor{display:none}
@media(max-width:1100px){.kinetic-enabled .approach-grid{gap:5%;grid-template-columns:1fr 1fr}.kinetic-enabled .approach-step>p{font-size:15px}.kinetic-enabled .approach-step h3{font-size:31px}.kinetic-enabled .approach-steps{height:365px}.kinetic-enabled .deliverable{font-size:13px}.kinetic-enabled .approach-sticky h2{font-size:34px}.kinetic-enabled .approach-sticky h2 br{display:block}}
@media(max-width:700px){.kinetic-enabled .approach{height:270svh;min-height:1800px;padding-top:40px}.kinetic-enabled .approach>.section-label{margin-bottom:20px}.kinetic-enabled .approach-grid{top:calc(var(--header-height) + 8px);height:calc(100svh - var(--header-height) - 16px);min-height:570px;display:flex;flex-direction:column;gap:0;align-items:stretch;padding-top:10px;overflow:clip}.kinetic-enabled .approach-sticky{display:flex;align-items:center;justify-content:space-between;width:100%;height:205px;align-self:auto;margin:0;padding:0;flex-shrink:0}.kinetic-enabled .approach-sticky h2{font-size:30px;margin:0;flex:1}.kinetic-enabled .approach-sticky h2 br{display:block}.kinetic-enabled .approach-visual.modern-scenes{width:49%;height:205px;margin:0;flex-shrink:0}.kinetic-enabled .modern-scenes img{width:100%;left:0}.kinetic-enabled .approach-steps{align-self:auto;height:auto;flex:1;min-height:300px;margin-bottom:65px;margin-top:5px}.kinetic-enabled .approach-step h3{font-size:28px}.kinetic-enabled .approach-step h3 br{display:none}.kinetic-enabled .approach-step>p{font-size:14px;line-height:1.6;margin-top:16px}.kinetic-enabled .step-index{font-size:10px;margin-bottom:12px}.kinetic-enabled .deliverable{font-size:12px;line-height:1.5;margin-top:18px;padding-top:14px}.kinetic-enabled .deliverable>span{font-size:10px;margin-bottom:5px}.kinetic-enabled .chapter-rail{gap:13px;bottom:6px}.chapter-rail button{font-size:11px;gap:9px;min-height:50px}.chapter-rail button>span{font-size:9px}.kinetic-enabled .scene-word{font-size:24vw;top:20%;opacity:.8}.kinetic-enabled .scene-counter{top:10px;font-size:10px}.kinetic-strip-row{gap:24px}.kinetic-strip{font-size:56px;padding:10px 0}.form-play{bottom:9px;font-size:10px;gap:8px}.modern-art .art-caption{max-width:125px;bottom:18px}.hero-bottom{gap:10px}.hero-bottom>a{width:auto;flex:1}.motion-toggle{margin-left:0;flex-shrink:0}.hero-art.modern-art{margin-bottom:15px}.case-cursor{display:none}.kinetic-enabled .contact{clip-path:none}.kinetic-enabled .contact-heading h2{transform:none}}
@media(max-width:360px){.kinetic-enabled .approach-sticky h2{font-size:25px}.kinetic-enabled .approach-sticky{height:175px}.kinetic-enabled .approach-visual.modern-scenes{height:170px}.kinetic-enabled .approach-step h3{font-size:25px}.kinetic-enabled .approach-step>p{font-size:13px}.kinetic-enabled .approach-steps{min-height:320px}.chapter-rail button{font-size:10px;gap:6px}.form-play{font-size:9px}.modern-art .art-caption{font-size:7px}.hero-bottom>a{font-size:9px;gap:8px}}
/* Short windows use the complete editorial layout, so every paragraph stays reachable. */
@media(max-height:700px){.kinetic-enabled .approach{height:auto;min-height:0;padding-bottom:65px}.kinetic-enabled .approach-grid{position:relative;top:auto;height:auto;min-height:0;display:grid;overflow:visible}.kinetic-enabled .approach-sticky{position:relative;top:auto}.kinetic-enabled .approach-steps{height:auto;margin:0}.kinetic-enabled .approach-step{position:relative;inset:auto;visibility:visible;opacity:1;filter:none;transform:none;margin:45px 0}.kinetic-enabled .scene-word,.kinetic-enabled .scene-counter,.kinetic-enabled .chapter-rail,.kinetic-enabled .theatre-progress{display:none}}
@media(max-width:700px) and (max-height:700px){.kinetic-enabled .approach-grid{display:block}.kinetic-enabled .approach-steps{min-height:0}}
@media(prefers-reduced-motion:reduce){.signal-field,.form-play,.case-cursor{display:none}.title-line{animation:none!important;transform:none!important}.kinetic-strip-row{transform:none!important}}

.kinetic-paused *, .kinetic-paused *::before, .kinetic-paused *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.kinetic-paused .hero-art>img,.kinetic-paused .contact-star{transform:none!important}

.kinetic-paused{scroll-behavior:auto!important}

/* Keep service headings stationary on mobile, including emulated mouse hover. */
@media(max-width:800px),(hover:none),(pointer:coarse){
  .service-row summary,.service-row summary:hover,
  .kinetic-enabled .service-row summary,.kinetic-enabled .service-row summary:hover{
    padding-left:0;padding-right:0;transition:none;
  }
  .kinetic-enabled .service-row summary::before{transition:none}
}
/* Keep every word inside the shared content grid, including during motion. */
.kinetic-strip{margin-left:0;margin-right:0;width:100%;overflow:visible;padding:24px 12px 0;font-size:clamp(24px,4.4vw,88px);line-height:1.25}
.kinetic-strip-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;width:100%;min-width:0;white-space:normal;transform:translateX(var(--strip-shift,0px));letter-spacing:-.025em}
.kinetic-strip-row.reverse{transform:translateX(calc(var(--strip-shift,0px)*-1));margin-top:18px}
.strip-token{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.strip-token b{font-weight:400;white-space:nowrap;line-height:1.3}
.kinetic-strip-row .strip-token svg{width:.38em;height:.38em;flex-shrink:0;transform:rotate(var(--strip-turn,0deg))}
.kinetic-strip-row.reverse .strip-token svg{transform:rotate(calc(var(--strip-turn,0deg)*-1))}
@media(max-width:700px){.kinetic-strip{font-size:clamp(24px,6.8vw,45px);padding:16px 9px 0}.kinetic-strip-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;transform:translateX(clamp(-3px,var(--strip-shift,0px),3px))}.kinetic-strip-row.reverse{margin-top:16px;transform:translateX(clamp(-3px,calc(var(--strip-shift,0px)*-1),3px))}.strip-token{gap:8px}.kinetic-strip-row svg{width:.4em;height:.4em}}
@media(max-width:360px){.kinetic-strip{font-size:23px}.kinetic-strip-row{column-gap:18px}}
@media(prefers-reduced-motion:reduce){.kinetic-strip-row,.kinetic-strip-row .strip-token svg{transform:none!important}}
@media(min-width:701px){.kinetic-strip-row{grid-template-columns:1fr 1.05fr 1.4fr 1.25fr}.kinetic-strip-row.reverse{grid-template-columns:1.25fr 1.4fr 1.05fr 1fr}}
.strip-token{padding-right:4px}

/* Large opposing lanes, with soft full-bleed boundaries. */
@media(min-width:701px){
.kinetic-strip{width:100vw;margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1);overflow:hidden;padding:28px 0 12px;font-size:clamp(72px,7.6vw,160px);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.kinetic-strip-row,.kinetic-strip-row.reverse{display:flex;justify-content:flex-start;gap:.38em;min-width:0;width:max-content;white-space:nowrap;letter-spacing:-.02em;transform:translateX(calc(-340px + var(--strip-shift,0px)))}
.kinetic-strip-row.reverse{transform:translateX(calc(-340px - var(--strip-shift,0px)));margin-top:12px}
.strip-token{flex:none;gap:.32em;padding:0}.strip-token b{line-height:1.22}
.strip-repeat{display:flex;align-items:center;gap:.38em}
.kinetic-strip-row .strip-token svg{width:.48em;height:.48em}
}
@media(max-width:700px){.strip-repeat{display:none}.strip-token:nth-child(5){grid-column:1/-1;justify-content:center;gap:24px}}

/* Keep the opposing scroll lanes on phones as well. */
.kinetic-strip-row.reverse{-webkit-text-stroke-width:.5px}
@media(max-width:700px){
 .kinetic-strip{width:100vw;margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1);overflow:hidden;padding:24px 0 12px;font-size:clamp(42px,12vw,72px);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
 .kinetic-strip-row,.kinetic-strip-row.reverse{display:flex;justify-content:flex-start;gap:.38em;width:max-content;min-width:0;white-space:nowrap;letter-spacing:-.02em;transform:translateX(calc(-200px + var(--strip-shift,0px)))}
 .kinetic-strip-row.reverse{transform:translateX(calc(-200px - var(--strip-shift,0px)));margin-top:12px}
 .kinetic-strip .strip-token,.kinetic-strip .strip-token:nth-child(5){flex:none;justify-content:space-between;gap:.32em;padding:0}
 .kinetic-strip .strip-repeat{display:flex;align-items:center;gap:.38em}
 .kinetic-strip-row .strip-token svg{width:.48em;height:.48em}
}
@media(prefers-reduced-motion:reduce){.kinetic-strip-row,.kinetic-strip-row.reverse{transform:none!important}}

/* Services: stable geometry; the surface and text colors transition together. */
@media(min-width:801px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .service-row summary,.kinetic-enabled .service-row summary{
    transition:color .3s ease;
  }
  .service-row .service-number,.service-row .service-teaser{
    transition:color .3s ease;
  }
  .service-row .expand{
    transition:color .3s ease,transform .3s ease;
  }
  .kinetic-enabled .service-row summary::before{
    opacity:0;transform:none;
    transition:opacity .36s ease-out;
  }
  .kinetic-enabled .service-row summary:hover::before{opacity:1;transform:none}
}

/* Touch and reduced-motion retain a stable native summary. */
@media(hover:none),(pointer:coarse){.kinetic-enabled .service-row summary:hover{color:inherit}.kinetic-enabled .service-row summary:hover::before{opacity:0;transform:none}.kinetic-enabled .service-row summary:hover .service-teaser{color:inherit}}
@media(prefers-reduced-motion:reduce){.kinetic-enabled .service-row summary::before{transition:none;transform:none}.service-row summary,.service-row .service-number,.service-row .service-teaser{transition:none!important}}

/* Keep the expanded dark row in its own color scheme while hovering. */
@media(hover:hover) and (pointer:fine){.kinetic-enabled .service-row[open] summary::before{background:#171717}.kinetic-enabled .service-row[open] summary:hover .service-teaser{color:#b9b9b9}}

/* Homepage service hover is independent of the legacy hero motion controller. */
@media(hover:hover) and (pointer:fine){
 body.home-page #services .service-row summary{position:relative;isolation:isolate}
 body.home-page #services .service-row summary::before{content:'';position:absolute;inset:0 -24px;z-index:-1;background:#f2eeec;opacity:0;transform:none;transition:opacity .36s ease-out}
 body.home-page #services .service-row summary:hover::before{opacity:1}
 body.home-page #services .service-row summary:hover{color:inherit}
 body.home-page #services .service-row .service-number,body.home-page #services .service-row .expand{transition:color .3s ease}
 body.home-page #services .service-row summary:hover .service-number,body.home-page #services .service-row summary:hover .expand{color:var(--brand)}
 body.home-page #services .service-row[open] summary::before{background:#171717}
}
@media(prefers-reduced-motion:reduce){body.home-page #services .service-row summary::before,body.home-page #services .service-row .service-number,body.home-page #services .service-row .expand{transition:none}}
/* An expanded service is one static surface; hover is only for closed rows. */
body.home-page #services .service-row[open]>summary::before,
body.home-page #services .service-row[open]>summary:hover::before{opacity:0!important;background:transparent!important;transition:none!important}
body.home-page #services .service-row[open]>summary:hover{background:transparent;color:inherit}
body.home-page #services .service-row[open]>summary:hover .service-teaser{color:#b9b9b9}