/* Preserved brand tokens: Inter / Noto Sans JP, ink, white, existing blue + local acid.
   Focus: dialogue and connected expertise, with the original editorial sequence.
   Intentional motion 5 / composition 6 / density 4. Copy adjusted only at annotated locations. */
body:not(.inner-page) .section-pad{padding-block:88px}
body:not(.inner-page) .section-heading{margin-bottom:38px}
body:not(.inner-page) .section-end-link{margin-top:24px}
.hero-3d.hero-pixel-daylight:after{background:linear-gradient(180deg,#102e4e50,transparent 21%,transparent 65%,#102537ad)}
.hero-pixel-daylight .hero-3d-copy h1{filter:none;text-wrap:balance;text-shadow:0 1px 2px #102537b3,0 3px 7px #10253780}
.hero-pixel-daylight .hero-3d-copy h1:before{content:"";position:absolute;inset:-.16em -2% -.22em -5vw;z-index:-1;background:radial-gradient(ellipse at 22% 40%,#0e2c4c70,transparent 72%);pointer-events:none}
.hero-pixel-daylight .hero-3d-copy h1{position:relative;isolation:isolate}
.hero-pixel-daylight .city-view-buttons{gap:8px}
.hero-pixel-daylight .city-view-buttons>button{border-radius:5px;background:#102c3bc9;border:1px solid #ffffff50;min-height:44px;padding:8px 12px;font-size:12px;box-shadow:none}
.hero-pixel-daylight .city-view-buttons>button[data-view-toggle]{background:transparent;border-color:#ffffff85;text-shadow:0 1px 4px #102b3c}
.city-is-loading{overflow:auto!important}
.city-loading{z-index:150}
#services .service-card{padding-block:22px!important}
#services .service-diagram{max-height:164px;overflow:hidden}
#services .service-diagram svg{height:128px}
#services .service-card h3{font-size:clamp(26px,2.1vw,34px)}
#services .service-body{color:#59625b;line-height:1.9}
#services .service-tags li{color:#697165}
#cases .portfolio-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:38px;margin-top:38px}
#cases .portfolio-project-group{min-width:0;display:grid;gap:26px;padding-right:32px;border-right:1px solid var(--line)}
#cases .portfolio-project-group .portfolio-card-link{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
#cases .portfolio-project-group .portfolio-media{aspect-ratio:1.17;padding:10px;background:#e8ece8}
#cases .portfolio-project-group .portfolio-media img{object-fit:contain}
#cases .portfolio-project-group .portfolio-caption{padding:0}
#cases .portfolio-caption h3{font-size:23px;line-height:1.5}
#cases .portfolio-kind{font-size:10px;letter-spacing:.08em}
#cases .portfolio-client{font-size:12px;margin-top:8px}
#cases .portfolio-description{font-size:14px;line-height:1.9;margin-top:12px}
#cases .portfolio-tags{padding-top:12px;margin-top:14px;gap:4px 12px}
#cases .portfolio-tags li{font-size:11px}
#cases .portfolio-media--product{aspect-ratio:1.75}
#about.philosophy{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:9%;align-items:center}
#about .philosophy-content h2{font-size:clamp(36px,3.65vw,57px);line-height:1.5;margin-bottom:24px}
#about .philosophy-content>p:not(.overline){font-size:15px;line-height:2}
.dialogue-composition{margin-top:34px;max-width:455px}
.dialogue-composition>small{display:block;font-size:11px;line-height:1.8;color:#6e6e73;margin-top:20px}
.dialogue-art{position:relative;aspect-ratio:46/31}
.dialogue-art svg{display:block;width:100%;height:100%;overflow:visible}
.dialogue-art.in-view .dialogue-contours{animation:dialogue-contours-enter 1s var(--ease) both}
.dialogue-art.in-view .dialogue-fold{animation:dialogue-fold-enter .9s .12s var(--ease) both}
@keyframes dialogue-contours-enter{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}
@keyframes dialogue-fold-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes panel-enter{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#why.why{column-gap:8%;row-gap:16px}
#why .why-intro h2{font-size:clamp(34px,3.35vw,52px);margin-top:24px}
#why .reason-list article{padding-block:22px}
#why .reason-list h3{font-size:20px}
#why .reason-list p{line-height:1.95;font-size:15px}
#why .why-perspective{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;font-size:15px;letter-spacing:-.015em}
#why .why-perspective{font-family:var(--font);line-height:1.65}
#why .why-perspective small{width:100%;margin-top:4px}
.expertise-layers{position:relative;aspect-ratio:1.7;max-width:360px;margin-top:20px;margin-bottom:78px;perspective:900px}
.expertise-layer{position:absolute;inset:0 10% 13% 5%;border:1px solid #c7d0c2;transform:rotateX(50deg) rotateZ(-22deg);background:#eff2e9;box-shadow:0 8px 0 #d6ddd2;overflow:hidden}
.expertise-layer--0{translate:0 -8%}
.expertise-layer--1{translate:6% 15%;background:#253126;box-shadow:0 8px 0 #172b1d}
.expertise-layer--2{translate:12% 38%;background:var(--local-acid);box-shadow:0 8px 0 var(--brand-lime)}
.expertise-layer svg{width:100%;height:100%;padding:4%}
.expertise-layers.in-view .expertise-layer{animation:expertise-connect 900ms cubic-bezier(.16,1,.3,1) both}
.expertise-layers.in-view .expertise-layer--1{animation-delay:90ms}
.expertise-layers.in-view .expertise-layer--2{animation-delay:180ms}
@keyframes expertise-connect{from{opacity:0;transform:translateY(18px) rotateX(50deg) rotateZ(-22deg)}to{opacity:1;transform:translateY(0) rotateX(50deg) rotateZ(-22deg)}}
/* Retain the five-column design while providing one scroll stage per step.
   No sticky/spacer styles until enhancement is ready; static content stays compact. */
@media(min-width:851px){
 .process-track-ready:not(.process-track-compact):after,.process-track-compact>.process-sticky-content:after{content:"";display:block;height:var(--process-travel,0px)}
 .process-track-ready:not(.process-track-compact)>.process-sticky-content,.process-track-compact .process-sequence{position:sticky;top:var(--process-pin-top,104px)}
}
.process-sequence .process-line{height:14px;top:40px;background:transparent;overflow:hidden}
.process-sequence .process-line:before{content:"";position:absolute;inset:6px 0 auto;height:2px;background:var(--line)}
.process-sequence .process-line i{position:absolute;top:6px;width:100%;height:2px;transform:scaleX(var(--process,1));will-change:auto;opacity:1}
.process-sequence .process-dot{width:7px;height:7px;border:0;position:relative;z-index:1}
.process-sequence article{opacity:1!important;transform:none!important}
.process-scroll-ready article>.process-number,.process-scroll-ready article>h3,.process-scroll-ready article>p{opacity:var(--step-reveal,1);transform:translateY(calc((1 - var(--step-reveal,1))*18px))}
.process-scroll-ready article>.process-dot{opacity:var(--step-reveal,1)}
@media(max-width:1050px){
 #cases .portfolio-grid{grid-template-columns:1fr;gap:30px}
 #cases .portfolio-project-group{padding:0 0 28px;border-right:0;border-bottom:1px solid var(--line)}
 #cases .portfolio-card-link{grid-template-columns:1fr 1fr;gap:25px}
 #cases .portfolio-project-group .portfolio-media{aspect-ratio:1.5}
 #cases .portfolio-media--product{aspect-ratio:1.35}
}
@media(max-width:850px){
 body:not(.inner-page) .section-pad{padding-block:62px}
 #about.philosophy{grid-template-columns:1fr;gap:32px}
 #about .philosophy-label{display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:center}
 .dialogue-composition{margin:0}
 #about .philosophy-content h2{font-size:clamp(36px,6.4vw,52px)}
 #why .why-intro{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
 #why .why-intro>p,#why .why-intro>h2{grid-column:1}
 #why .expertise-layers{grid-column:2;grid-row:1/4;align-self:center;margin:0 0 50px}
 #why .why-perspective{grid-column:2;font-size:13px}
 .process-sequence .process-line{display:none}
 .process-sequence .process-dot{position:absolute}
 .process-sequence article:before,.process-sequence article:after{content:"";position:absolute;left:2px;top:8px;bottom:-8px;width:2px;transform-origin:top}
 .process-sequence article:before{background:var(--line)}
 .process-sequence article:after{background:var(--local-acid);transform:scaleY(var(--segment-progress,1))}
 .process-sequence article:last-child:before,.process-sequence article:last-child:after{display:none}
}
@media(max-width:600px){
 body:not(.inner-page) .section-pad{padding-block:50px}
 body:not(.inner-page) .section-heading{gap:18px;margin-bottom:28px}
 #services .service-card{padding-block:20px!important}
 #services .service-diagram{max-height:110px}
 #services .service-diagram-caption{font-size:8px;padding:10px 10px 0}
 #services .service-diagram svg{height:82px}
 #services .service-card h3{font-size:25px}
 #cases .portfolio-grid{margin-top:24px}
 #cases .portfolio-project-group{gap:30px}
 #cases .portfolio-card-link,#cases .portfolio-project-group .portfolio-card-link{display:block}
 #cases .portfolio-project-group .portfolio-media{aspect-ratio:1.5;padding:8px}
 #cases .portfolio-caption,#cases .portfolio-project-group .portfolio-caption{padding-top:17px}
 #cases .portfolio-description{font-size:14px;line-height:1.85}
 #cases .portfolio-media--product{aspect-ratio:1.6}
 #about .philosophy-label{gap:22px;grid-template-columns:1fr;padding-right:0}
 #about .section-label{margin:0}
 .dialogue-composition{max-width:340px;width:100%;justify-self:center}
 .dialogue-composition>small{margin-top:10px}
 #about .philosophy-content>p:not(.overline){line-height:1.95}
 #why .why-intro{display:block}
 #why .expertise-layers{width:75%;max-width:270px;margin:12px 0 64px}
 #why .why-perspective{font-size:14px}
 #why .reason-list article{padding-block:19px}
 #why .reason-list h3{font-size:19px}
 #why .reason-list p{font-size:14px;line-height:1.9}
 .hero-3d.hero-pixel-daylight:after{background:linear-gradient(180deg,#0e2c4c96,transparent 44%,transparent 56%,#102537d6)}
 .hero-pixel-daylight .hero-3d-copy h1:before{background:radial-gradient(ellipse at 28% 35%,#102b465c,transparent 85%)}
}
@media print{
 .process-scroll-track:after,.process-sticky-content:after{display:none!important}
 .process-sticky-content,.process-scroll-track .process-sequence{position:relative!important;top:auto!important}
 .process-sequence .process-line i,.process-sequence article:after{transform:none!important}
 .process-scroll-ready article>*{opacity:1!important;transform:none!important}
}
/* Keep the second line hollow at every viewport; the surrounding copy stays solid. */
@supports (-webkit-text-stroke:1px white){
 #hero-title>span:nth-of-type(2){color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:2.5px #fff;text-shadow:none;filter:drop-shadow(0 1px 1px #102537e6)}
}
.pricing-brief{display:flex;justify-content:space-between;align-items:center;gap:28px;margin-top:52px;padding-top:30px;border-top:1px solid var(--line);scroll-margin-top:110px}
.pricing-brief h3{display:flex;align-items:center;gap:12px;font-size:22px;line-height:1.5;font-weight:600}
.pricing-brief h3:before{content:"";width:7px;height:7px;flex-shrink:0;background:var(--local-acid)}
.pricing-brief p{margin-top:12px;font-size:14px;line-height:1.9;color:var(--muted)}
.pricing-brief .text-link{flex-shrink:0;margin:0}
@media(max-width:850px){
 .pricing-brief{align-items:flex-start;flex-direction:column;gap:22px;margin-top:34px;padding-top:26px}
}
@media(max-width:600px){
 #hero-title>span:nth-of-type(2){-webkit-text-stroke-width:1.5px}
 .pricing-brief h3{font-size:20px}
}
/* Match the lime punctuation already used in the About heading. */
#services .service-conversation>span{color:var(--brand-lime)}

@media(prefers-reduced-motion:reduce){
 .process-scroll-track:after,.process-sticky-content:after{display:none!important}
 .process-sticky-content,.process-scroll-track .process-sequence{position:relative!important;top:auto!important}
 .dialogue-art.in-view .dialogue-contours,.dialogue-art.in-view .dialogue-fold{animation:none}
 .process-sequence .process-line i,.process-sequence article:after{transform:none!important}
 .process-scroll-ready article>*{opacity:1!important;transform:none!important}
}

/* A travelling lime edge and a soft checkpoint halo, both driven by scroll. */
.process-sequence .process-line i{background:linear-gradient(90deg,#7da943 0%,#a7ed32 48%,#c9ff3b 83%,#eaffb4 100%)}
.process-scroll-ready .process-line:after{content:"";position:absolute;top:3px;left:calc(var(--process,0)*100%);width:30px;height:8px;transform:translateX(-100%);background:radial-gradient(ellipse,#f5ffde 0%,#c9ff3b 35%,transparent 75%);opacity:.9}
.process-sequence .process-dot:before,.process-sequence .process-dot:after{content:"";position:absolute;pointer-events:none;opacity:var(--step-highlight,0)}
.process-sequence .process-dot:before{inset:-10px;border:1px solid #9dd92d;border-radius:50%;transform:scale(calc(.7 + var(--step-highlight,0)*.3));background:radial-gradient(circle,#c9ff3b55,transparent 70%)}
.process-sequence .process-dot:after{inset:-2px;background:#eaffbd;box-shadow:0 0 12px 4px #baff4570}
@media(max-width:850px){
 .process-sequence article:after{background:linear-gradient(180deg,#7da943,#b8f638 70%,#eaffb4)}
}
@media(prefers-reduced-motion:reduce){
 .process-sequence .process-dot:before,.process-sequence .process-dot:after,.process-sequence .process-line:after{display:none}
}