/* Project-led assets: actual websites and an explorable process example. */
.hero{background:#202c23;border-bottom-color:var(--line);min-height:640px;padding-bottom:42px}
.hero:before{display:none}
.hero h1{font-size:clamp(72px,8.4vw,132px);margin-top:46px;line-height:.95}
.hero-line.serif{font-size:1.07em;margin-left:13%;line-height:1.03;color:var(--mint)}
.hero-bottom{margin-top:35px}
.hero-intro{font-size:18px;max-width:420px}
.hero-intro .muted{font-size:13px}
.work-scroll{border-top:1px solid var(--line)}
.project-two-image{aspect-ratio:1.45}
.project-two-image img{height:115%;object-position:center top}
.responsive-study{margin-top:35px}
.study-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;padding-bottom:16px;font-size:10px;color:var(--soft)}
.study-toolbar>div{display:flex;gap:6px}
.study-toolbar button{background:none;color:var(--soft);border:1px solid transparent;padding:8px 10px;min-height:40px;font-size:10px}
.study-toolbar button[aria-pressed=true]{color:var(--paper);border-color:var(--line)}
.study-stage{background:#152219;aspect-ratio:1.35;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;border:1px solid #59694f}
.study-stage img{height:100%;width:100%;object-fit:cover;object-position:center top;transition:width .55s cubic-bezier(.2,.7,.2,1),opacity .2s}
.study-stage[data-mode=mobile] img{width:auto;max-width:60%;object-fit:contain}
.flow-demo{border-top:1px solid #81936e;border-bottom:1px solid #81936e;padding-block:25px;align-self:start}
.demo-label{display:flex;align-items:center;justify-content:space-between;gap:16px}
.demo-label>span:last-child{font-size:10px;color:var(--soft)}
.demo-brief{font-family:var(--serif);font-style:italic;font-size:30px;line-height:1.2;margin-top:30px;max-width:450px;color:var(--paper)}
.demo-route{position:relative;display:flex;justify-content:space-between;margin-top:36px;margin-bottom:35px}
.demo-route>button{position:relative;z-index:1;width:80px;text-align:center;background:none;border:0;color:#d4ddc8;font-size:11px;padding:0;min-height:74px}
.demo-route>button>span{display:grid;place-items:center;width:42px;height:42px;margin:0 auto 10px;background:#34452e;border:1px solid #a1b18c;border-radius:50%;font-size:10px;transition:background .3s,color .3s}
.demo-route>button[aria-pressed=true]>span{background:var(--mint);color:#202c23}
.demo-track{height:1px;background:#81936e;position:absolute;left:40px;right:40px;top:21px}
.demo-track i{display:block;width:100%;height:2px;background:var(--paper);transform:scaleX(var(--demo-progress,0));transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.demo-detail{border-top:1px solid #81936e;padding-top:25px;min-height:300px}
.demo-detail h3{font-size:30px;margin-top:15px;line-height:1.1}
.demo-detail>p:not(.eyebrow){color:#d4ddc8;font-size:14px;line-height:1.6;margin-top:20px;max-width:430px}
.demo-output{border-left:2px solid var(--mint);padding:2px 0 2px 18px;margin-top:25px;font-size:13px;line-height:1.75;color:var(--paper);white-space:pre-line}
.demo-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px}
.demo-footer button{background:var(--mint);border:1px solid var(--mint);color:#202c23;padding:13px 18px;min-height:46px;font-size:12px;display:flex;gap:25px;align-items:center}
.demo-footer>p{font-size:10px;line-height:1.6;color:#d4ddc8}
@media(max-width:1000px){.hero{min-height:590px}.hero h1{font-size:10.8vw}}
@media(max-width:700px){
 .hero{min-height:0;padding-bottom:35px}.hero h1{font-size:12.9vw;margin-top:42px;line-height:1.03}.hero-line.serif{margin-left:0;font-size:1.11em}
 .hero-intro{font-size:18px}.hero-bottom{margin-top:25px;gap:22px}.hero-intro .muted{font-size:12px}
 .responsive-study{margin-top:25px}.study-toolbar{font-size:9px;gap:8px}.study-toolbar button{font-size:9px;padding-inline:7px}.study-stage{aspect-ratio:1.2}
 .workflow-grid .flow-demo{margin-top:35px}.demo-brief{font-size:28px}.demo-detail h3{font-size:28px}.demo-detail{min-height:320px}.demo-label>.eyebrow{font-size:9px}.demo-label>span:last-child{font-size:9px}
 .demo-footer{gap:12px}.demo-footer button{font-size:11px;padding-inline:12px;gap:15px}.demo-footer>p{font-size:9px}
 .project-two-image{aspect-ratio:1.2}
}
@media(prefers-reduced-motion:reduce){.study-stage img,.demo-route>button>span,.demo-track i{transition:none!important}}

/* One project feature; scroll reveals lead the page rhythm. */
.work-scroll{height:160vh}
.work-count{display:none}
.work-home img{transform:scale(calc(1.07 - var(--work-p,0)*.07))}
.hero h1{overflow:clip;padding-bottom:.08em}
.scroll-reveal{opacity:calc(.35 + var(--reveal,1)*.65);transform:translate3d(0,calc((1 - var(--reveal,1))*55px),0)}
.about{grid-template-columns:.65fr 1.35fr}
.about-visual{align-self:start}
.about-visual>.eyebrow{max-width:190px;line-height:1.8;border-top:1px solid var(--line);padding-top:22px}
.contact-head{transform-origin:left bottom}
@media(max-width:700px){.work-scroll{height:auto}.scroll-reveal{transform:translate3d(0,calc((1 - var(--reveal,1))*25px),0)}.about-visual{margin-bottom:35px}}
@media(prefers-reduced-motion:reduce){.scroll-reveal,.hero-line{transform:none!important;opacity:1!important}.work-home img{transform:none!important}.work-scroll{height:auto}}

/* Single, unpinned work feature and a consistent section rhythm. */
.work-scroll{height:auto;min-height:0;padding-bottom:0}
.work-sticky{position:relative;top:auto;min-height:0;padding-top:24px}
.work-canvas{width:calc(100% - var(--gutter)*2);aspect-ratio:1.9;max-height:none;max-width:none}
.work-home img{transform:none;will-change:auto}
.work-foot{padding-top:24px;padding-bottom:44px}
.statement{padding-block:90px}
.services{padding-block:80px}
.service-story{min-height:0;padding-bottom:60px}.service-story+.service-story{padding-top:60px}.service-story:last-child{min-height:0}
.project-two{padding-block:80px;row-gap:24px;column-gap:6%;align-items:start}
.project-two-image{aspect-ratio:1.6}.project-caption{padding-top:0;margin-top:0}
.about{padding-block:90px}
.delivery,.faq{padding-block:90px;border-top:1px solid var(--line)}
.delivery h2,.faq h2{font-size:clamp(42px,4.6vw,70px);margin-top:26px;line-height:1.06}
.delivery-steps{list-style:none;padding:0;margin:55px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:42px}
.delivery-steps li{border-top:1px solid var(--line);padding-top:22px}.delivery-steps li>span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--soft)}
.delivery-steps h3{font-size:27px;margin-top:28px}.delivery-steps p{font-size:14px;line-height:1.7;color:var(--soft);margin-top:18px;max-width:330px}
.faq{display:grid;grid-template-columns:1fr 1.2fr;gap:9%}.faq-list details{border-bottom:1px solid var(--line)}.faq-list details:first-child{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:24px;list-style:none;cursor:pointer;padding:25px 0;font-size:18px;line-height:1.4}.faq summary::-webkit-details-marker{display:none}.faq summary span{font-size:24px}.faq details[open] summary span{transform:rotate(45deg)}.faq details p{font-size:14px;line-height:1.8;color:var(--soft);padding-bottom:25px;max-width:520px}
@media(max-width:700px){.work-sticky{padding-top:20px}.work-canvas{aspect-ratio:1.3}.work-foot{padding-bottom:35px}.statement,.services,.project-two,.about,.delivery,.faq{padding-block:60px}.service-story{padding-bottom:40px}.service-story+.service-story{padding-top:40px}.project-two-heading h2{margin-bottom:25px}.project-caption{margin-top:20px}.delivery-steps{grid-template-columns:1fr;gap:30px;margin-top:35px}.delivery-steps h3{margin-top:18px}.delivery-steps p{max-width:none}.faq{display:block}.faq-list{margin-top:35px}.faq summary{font-size:17px}.project-two-image{aspect-ratio:1.3}}

/* Espresso is one full-width project composition, with no orphaned caption column. */
.project-two{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding-block:72px}
.project-two-heading{display:grid;grid-template-columns:1fr 2fr;gap:32px;align-items:start;margin-bottom:32px;transform:none;opacity:1}
.project-two-heading>.eyebrow{padding-top:10px}
.project-two-heading h2{font-size:clamp(42px,5vw,72px);margin:0;max-width:800px}
.project-two-image{grid-column:1;aspect-ratio:2;clip-path:inset(0 calc(var(--project-edge,0)*1%) round 0px)}
.project-two-image img{height:115%;object-position:center top}
.project-caption{grid-column:1;grid-template-columns:1fr 1.4fr auto;gap:28px;align-items:start;margin:24px 0 0;padding:0}
.project-caption p{grid-row:auto;max-width:460px}.project-caption>span{padding-top:4px}
.motion-title{clip-path:inset(0 0 calc((1 - var(--title-reveal,1))*100%) 0);transform:translate3d(calc((1 - var(--title-reveal,1))*-45px),0,0)}
@media(max-width:700px){.project-two{padding-block:55px}.project-two-heading{display:block;margin-bottom:25px}.project-two-heading>.eyebrow{padding-top:0;margin-bottom:22px}.project-two-heading h2{font-size:46px;margin:0}.project-two-image{aspect-ratio:1.3}.project-caption{grid-template-columns:1fr auto;gap:12px;margin-top:20px}.project-caption p{grid-row:2;grid-column:1/-1}.project-caption>span{grid-column:2;grid-row:1}.motion-title{transform:translate3d(calc((1 - var(--title-reveal,1))*-20px),0,0)}}
@media(prefers-reduced-motion:reduce){.motion-title{clip-path:none!important;transform:none!important}.project-two-image{clip-path:none!important}}

/* A scroll-driven triangular type prism: three services in one dimensional object. */
.hero{overflow:clip}.depth-stage{position:relative;perspective:1100px;height:330px;margin-top:38px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);isolation:isolate}
.depth-label,.depth-cue{position:absolute;left:0;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);z-index:2}.depth-label{top:18px}.depth-cue{bottom:18px;display:flex;gap:25px}
.depth-object{position:absolute;left:12%;right:7%;height:180px;top:75px;transform-style:preserve-3d;transform:translateZ(-52px) rotateY(var(--depth-yaw,-10deg)) rotateX(var(--depth-turn,0deg))}
.depth-face{position:absolute;inset:0;backface-visibility:hidden;background:#293b2b;border:1px solid #889777;display:flex;align-items:center;justify-content:center;font-size:clamp(45px,6.9vw,108px);letter-spacing:-.065em;font-weight:500;line-height:1;transform:rotateX(0deg) translateZ(52px)}
.depth-face>span{position:absolute;top:15px;left:22px;font-size:9px;letter-spacing:.09em;text-transform:uppercase;font-weight:450;color:var(--soft)}
.face-ai{transform:rotateX(120deg) translateZ(52px);background:#c5d1b5;color:#202c23}.face-ai>span{color:#35442e}.face-consult{transform:rotateX(240deg) translateZ(52px);background:#43573b}
.project-two{perspective:1600px}.project-two-image{clip-path:none;transform-origin:center bottom;transform:rotateX(var(--project-tilt,0deg)) scale(var(--project-scale,1));backface-visibility:hidden}
@media(max-width:700px){.depth-stage{height:240px;margin-top:30px}.depth-object{left:0;right:0;height:120px;top:60px;transform:translateZ(-35px) rotateX(var(--depth-turn,0deg))}.depth-face{font-size:12vw;transform:rotateX(0deg) translateZ(35px)}.face-ai{transform:rotateX(120deg) translateZ(35px)}.face-consult{transform:rotateX(240deg) translateZ(35px)}.depth-face>span{font-size:7px;top:12px;left:14px}.depth-label,.depth-cue{font-size:8px}.project-two-image{transform:none}}
@media(prefers-reduced-motion:reduce){.depth-object{transform:none!important}.depth-face{transform:none!important}.face-ai,.face-consult{display:none}.depth-cue{display:none}.project-two-image{transform:none!important}}