:root{
  --paper:#F5F1EA; --paper-white:#FBFAF6; --light-sand:#E6DDCE;
  --warm-gray:#B3A28E; --stone:#706A5E; --ink:#1A1A18;
  --sienna:#8A3A15; --sakura:#E7C4C0; --sakura-soft:#F2DCD9;
  --hairline:rgba(26,26,24,.10);
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1200px;
  --branch:url("images/sakura.webp");
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Hanken Grotesk',sans-serif; background:var(--paper); color:var(--stone); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
body::after{content:""; position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif; color:var(--ink); font-weight:500; line-height:1.08;}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.25rem,5vw,4rem)}
.eyebrow{font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sienna); font-weight:500}

.divider{display:flex; align-items:center; justify-content:center; gap:1.4rem; max-width:540px; margin:0 auto clamp(2.6rem,5vw,3.6rem)}
.divider .ln{height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--hairline))}
.divider .ln.r{background:linear-gradient(90deg,var(--hairline),transparent)}
.divider .mk{width:7px; height:7px; border-radius:50%; border:1px solid var(--sienna); flex:none}

.loader{position:fixed; inset:0; z-index:200; background:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; transition:transform 1s var(--ease), opacity .7s ease; cursor:pointer}
.loader.done{transform:translateY(-100%); opacity:0}
.le-img{width:92px; height:auto; display:block; opacity:0; transform:scale(.8) rotate(-14deg); animation:ensoIn 1.15s var(--ease) .15s forwards}
@keyframes ensoIn{to{opacity:1; transform:scale(1) rotate(0)}}
.loader-name{font-family:'Cormorant Garamond',serif; font-size:1.35rem; letter-spacing:.06em; color:var(--ink); margin-top:1rem; opacity:0; animation:fadeUp .7s ease .75s forwards}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

.cursor{position:fixed; left:0; top:0; width:30px; height:30px; border:1.5px solid var(--sienna); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:150; opacity:0; mix-blend-mode:multiply; transition:width .3s var(--ease), height .3s var(--ease), background-color .3s, border-color .3s, opacity .3s}
.cursor.show{opacity:.85}
.cursor.grow{width:56px; height:56px; background:rgba(231,196,192,.4); border-color:transparent}

.scroll-ink{position:fixed; top:0; right:0; width:2px; height:100vh; background:rgba(26,26,24,.05); z-index:90}
.scroll-ink span{display:block; width:100%; height:0; background:var(--sienna); opacity:.8}

.btn{display:inline-flex; align-items:center; gap:.7em; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; font-weight:500; padding:.95em 1.6em; border:1px solid var(--ink); transition:all .4s var(--ease); cursor:pointer; background:transparent; color:var(--ink); border-radius:2px; position:relative; overflow:hidden}
.btn span.arr{transition:transform .4s var(--ease); position:relative; z-index:1}
.btn .lbl{position:relative; z-index:1}
.btn::before{content:""; position:absolute; inset:0; background:var(--ink); transform:translateY(101%); transition:transform .45s var(--ease); z-index:0}
.btn:hover{color:var(--paper-white); border-color:var(--ink)}
.btn:hover::before{transform:translateY(0)}
.btn:hover span.arr{transform:translateX(5px)}
.btn--solid{background:var(--sienna); border-color:var(--sienna); color:var(--paper-white)}
.btn--solid::before{background:var(--ink)}
.btn--solid:hover{border-color:var(--ink)}
.magnetic{transition:transform .25s var(--ease), color .4s var(--ease), border-color .4s}
.tlink{display:inline-flex; align-items:center; gap:.5em; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--ink); position:relative}
.tlink .arr{transition:transform .35s var(--ease); color:var(--sienna)}
.tlink::after{content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:var(--sienna); transition:width .4s var(--ease)}
.tlink:hover::after{width:100%}
.tlink:hover .arr{transform:translateX(4px)}

.s-head{text-align:center; margin-bottom:3.4rem}
.s-head h2{font-size:clamp(1.9rem,1.5rem+1.6vw,2.7rem)}
.s-head .rule{width:0; height:2px; background:var(--sienna); margin:1.1rem auto 0; transition:width .7s var(--ease) .25s}
.s-head.in .rule{width:46px}

.js [data-reveal]{opacity:0; transform:translateY(28px) scale(.985); filter:blur(4px); transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1; transform:none; filter:blur(0)}

.nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .4s, box-shadow .4s, border-color .4s; border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(251,250,246,.9); backdrop-filter:blur(10px); border-color:var(--hairline); box-shadow:0 8px 30px -22px rgba(26,26,24,.3)}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:1.3rem clamp(1.25rem,5vw,4rem); display:flex; align-items:center; gap:1.5rem}
.nav-inner .brand{margin-right:auto}
.lang{display:flex; align-items:center; gap:.45rem; font-size:.7rem; letter-spacing:.06em; font-weight:600}
.lang button{background:none; border:none; cursor:pointer; color:var(--warm-gray); padding:.2em .15em; font:inherit; letter-spacing:inherit; transition:color .3s}
.lang button:hover{color:var(--ink)}
.lang button.on{color:var(--sienna)}
.lang .sep{color:var(--hairline)}
.brand{font-family:'Cormorant Garamond',serif; font-size:1.45rem; color:var(--ink); display:flex; align-items:center; gap:.55em}
.brand .dot{width:7px; height:7px; border-radius:50%; background:var(--sienna)}
.menu{display:flex; gap:2.1rem; list-style:none}
.menu a{font-size:.82rem; letter-spacing:.05em; color:var(--ink); position:relative; padding:.2em 0}
.menu a::after{content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0; background:var(--sienna); transition:width .35s var(--ease)}
.menu a:hover::after{width:100%}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px}
.burger span{width:24px; height:1.6px; background:var(--ink); transition:.3s}

.hero{position:relative; padding-top:clamp(8rem,16vh,11rem); padding-bottom:clamp(3rem,7vh,5rem); overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center; min-height:62vh}
.hero h1{font-size:clamp(2.7rem,2rem+3.6vw,4.6rem); font-weight:500}
.hero h1 .ln{display:block; animation:rise .95s var(--ease) both}
.hero h1 .ln:nth-child(2){animation-delay:.12s}
.hero h1 .ln:nth-child(3){animation-delay:.24s}
.brush{width:min(330px,74%); height:22px; margin:.5rem 0 0; clip-path:inset(0 100% 0 0); animation:brushIn 1s var(--ease) .95s forwards}
.brush svg{width:100%; height:100%; display:block}
@keyframes brushIn{to{clip-path:inset(0 0 0 0)}}
.hero .sub{max-width:30ch; margin:1.5rem 0 2.2rem; font-size:1.08rem; color:var(--stone); animation:rise .95s var(--ease) .42s both}
.hero .cta-row{animation:rise .95s var(--ease) .56s both}
@keyframes rise{from{opacity:0; transform:translateY(26px); filter:blur(6px)} to{opacity:1; transform:none; filter:blur(0)}}
.hero-art{position:relative; height:clamp(360px,46vw,520px); display:flex; align-items:center; justify-content:center; will-change:transform}
.portrait-img{position:relative; z-index:2; max-width:min(600px,100%); max-height:100%; width:auto; height:auto; opacity:0; will-change:transform; animation:fadeBlur 1.5s var(--ease) .35s both}
@keyframes fadeBlur{from{opacity:0; filter:blur(10px)} to{opacity:1; filter:blur(0)}}
.branch-img{position:absolute; top:-12%; right:-7%; width:min(300px,56%); aspect-ratio:408/520; background:var(--branch) center/contain no-repeat; z-index:3; transform-origin:top right; pointer-events:none; opacity:0; animation:fadeBlur 1.3s var(--ease) .7s both, sway 8s ease-in-out 2.2s infinite}
@keyframes sway{0%,100%{transform:rotate(0deg)} 50%{transform:rotate(2.2deg)}}
.petal{position:absolute; top:-20px; width:11px; height:11px; background:var(--sakura); border-radius:0 100% 0 100%; opacity:0; z-index:4; animation:fall linear infinite}
@keyframes fall{0%{opacity:0; transform:translateY(-10px) translateX(0) rotate(0)} 10%{opacity:.9} 90%{opacity:.8} 100%{opacity:0; transform:translateY(440px) translateX(40px) rotate(220deg)}}
.scroll-cue{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); width:1px; height:50px; background:linear-gradient(var(--warm-gray),transparent); overflow:hidden; z-index:5}
.scroll-cue span{position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--sienna); animation:cue 1.9s var(--ease) infinite}
@keyframes cue{0%{top:-55%}100%{top:105%}}
body.js .hero h1 .ln,body.js .hero .sub,body.js .hero .cta-row,body.js .brush,body.js .portrait-img,body.js .branch-img{animation-play-state:paused}
body.js.loaded .hero h1 .ln,body.js.loaded .hero .sub,body.js.loaded .hero .cta-row,body.js.loaded .brush,body.js.loaded .portrait-img,body.js.loaded .branch-img{animation-play-state:running}

.strip{border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); background:var(--paper-white)}
.strip-inner{display:flex; flex-wrap:wrap}
.strip h4{width:100%; font-family:'Cormorant Garamond',serif; font-size:1.4rem; padding:1.6rem 0 .4rem}
.strip-items{display:flex; width:100%; flex-wrap:wrap; padding-bottom:1.4rem}
.strip-item{flex:1 1 0; min-width:150px; display:flex; align-items:center; gap:.8rem; padding:1rem 1.4rem; border-left:1px solid var(--hairline); color:var(--stone)}
.strip-item:first-child{border-left:none; padding-left:0}
.strip-item svg{width:26px; height:26px; flex:none; color:var(--ink); stroke-width:1.4; transition:transform .4s var(--ease), color .3s}
.strip-item:hover svg{color:var(--sienna); transform:translateY(-3px)}
.strip-item span{font-size:.92rem; line-height:1.3}

.about{padding:clamp(4.5rem,9vw,8rem) 0; background:var(--paper)}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center}
.about-art{position:relative; overflow:hidden; border-radius:4px}
.about-art img{width:100%; height:auto; display:block; will-change:transform}
.about-copy h2{font-size:clamp(1.9rem,1.4rem+2vw,2.9rem); margin:.7rem 0 1.3rem}
.about-copy p{margin-bottom:1rem; max-width:46ch}
.about-copy .btn{margin-top:1rem}

.services{padding:clamp(4rem,8vw,7rem) 0; background:var(--paper-white)}
.scards{display:grid; grid-template-columns:repeat(5,1fr); gap:1.4rem}
.scard{text-align:center; padding:1.4rem .7rem 1.6rem; position:relative; border-radius:6px; transition:transform .5s var(--ease), background .5s var(--ease)}
.scard::after{content:""; position:absolute; left:50%; bottom:0; width:0; height:2px; background:var(--sienna); transform:translateX(-50%); transition:width .45s var(--ease)}
.scard:hover{transform:translateY(-8px); background:var(--paper)}
.scard:hover::after{width:42px}
.icon-circle{width:64px; height:64px; border-radius:50%; background:var(--sakura-soft); display:flex; align-items:center; justify-content:center; margin:0 auto 1.3rem; position:relative; overflow:hidden; transition:transform .5s var(--ease)}
.icon-circle::before{content:""; position:absolute; inset:0; background:var(--ink); border-radius:50%; transform:scale(0); transition:transform .55s var(--ease)}
.icon-circle svg{width:28px; height:28px; color:var(--sienna); stroke-width:1.4; position:relative; z-index:1; transition:color .45s var(--ease)}
.scard:hover .icon-circle{transform:scale(1.06) translateY(-2px)}
.scard:hover .icon-circle::before{transform:scale(1)}
.scard:hover .icon-circle svg{color:var(--paper-white)}
.scard h3{font-size:1.22rem; margin-bottom:.7rem; line-height:1.2}
.scard p{font-size:.92rem; color:var(--stone); margin-bottom:1.1rem; min-height:3.6em}

.approach{padding:clamp(4.5rem,9vw,7.5rem) 0; background:var(--paper); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline)}
.approach-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,5rem); align-items:center}
.enso-wrap{display:flex; justify-content:center}
.enso-img{width:min(300px,82%); height:auto; display:block}
.steps-wrap{position:relative}
.connectors{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.connectors .cnx{fill:none; stroke:var(--warm-gray); stroke-width:1.4; vector-effect:non-scaling-stroke; opacity:.55}
.steps{list-style:none; display:flex; flex-direction:column; gap:1.5rem; position:relative; z-index:1; justify-content:space-around; min-height:300px}
.steps li{display:flex; gap:1.3rem; align-items:flex-start; transition:transform .4s var(--ease)}
.steps li:hover{transform:translateX(8px)}
.step-num{font-family:'Cormorant Garamond',serif; font-size:2.1rem; color:var(--sienna); line-height:1; min-width:1.7em; font-weight:600}
.steps h4{font-family:'Cormorant Garamond',serif; font-size:1.4rem; color:var(--ink); margin-bottom:.15rem; font-weight:500}
.steps p{font-size:.95rem; color:var(--stone)}

.cases{padding:clamp(4.5rem,9vw,8rem) 0; background:var(--paper)}
.ccards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.7rem}
.ccard{background:var(--paper-white); border:1px solid var(--hairline); border-radius:6px; overflow:hidden; position:relative; transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.ccard::before{content:""; position:absolute; top:14px; left:14px; width:0; height:0; border-top:2px solid var(--sienna); border-left:2px solid var(--sienna); opacity:0; transition:width .4s var(--ease), height .4s var(--ease), opacity .4s; z-index:2}
.ccard:hover{transform:translateY(-7px); box-shadow:0 28px 52px -30px rgba(26,26,24,.4)}
.ccard:hover::before{width:24px; height:24px; opacity:1}
.case-art{height:184px; background:var(--paper-white); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:12px; border-bottom:1px solid var(--hairline)}
.case-art img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; transition:transform .8s var(--ease)}
.ccard:hover .case-art img{transform:scale(1.06)}
.ccard-body{padding:1.7rem 1.6rem 1.9rem}
.ccard-body h3{font-size:1.35rem; margin-bottom:.7rem; line-height:1.15}
.ccard-body p{font-size:.93rem; color:var(--stone); margin-bottom:1.2rem}
.stat-row{display:flex; align-items:baseline; gap:.6rem; margin-bottom:1.3rem; padding-top:1.1rem; border-top:1px solid var(--hairline)}
.stat{font-family:'Cormorant Garamond',serif; font-size:2.2rem; color:var(--sienna); font-weight:600; line-height:1}
.stat-label{font-size:.74rem; letter-spacing:.05em; color:var(--warm-gray); text-transform:uppercase}

.testi{padding:clamp(4rem,8vw,7rem) 0; background:var(--paper-white); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); position:relative; overflow:hidden}
.testi .bg-enso{position:absolute; right:-4%; top:50%; transform:translateY(-50%); width:340px; height:auto; opacity:.06; pointer-events:none; z-index:0}
.testi .wrap{position:relative; z-index:1}
.testi-track{display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem}
.tcard{padding:.5rem .5rem; transition:transform .4s var(--ease)}
.tcard:hover{transform:translateY(-5px)}
.tcard .q{font-family:'Cormorant Garamond',serif; font-size:2.4rem; color:var(--sienna); line-height:0; display:block; height:.6em}
.tcard p{font-size:1.02rem; color:var(--stone); margin:.6rem 0 1.3rem}
.tcard .who{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); font-weight:500}
.dots{display:none; justify-content:center; gap:.6rem; margin-top:2rem}
.dots button{width:8px; height:8px; border-radius:50%; border:none; background:var(--light-sand); cursor:pointer; transition:.3s; padding:0}
.dots button.on{background:var(--sienna); transform:scale(1.25)}

.cta{position:relative; padding:clamp(4rem,8vw,6.5rem) 0; background:var(--sakura-soft); text-align:center; overflow:hidden}
.cta .branch-cta{position:absolute; width:220px; aspect-ratio:408/520; background:var(--branch) center/contain no-repeat; opacity:.9; pointer-events:none; z-index:1}
.cta .bc-l{top:-20px; left:-26px; transform:scaleX(-1)}
.cta .bc-r{top:-20px; right:-26px}
.cta h2{font-size:clamp(1.9rem,1.4rem+2vw,2.9rem); margin-bottom:1rem; position:relative; z-index:2}
.cta p{max-width:48ch; margin:0 auto 2rem; color:var(--stone); position:relative; z-index:2}
.cta .cta-btn{position:relative; z-index:2}

.scene{padding:clamp(3.5rem,7vw,6rem) 0 clamp(2rem,4vw,3rem); background:var(--paper); overflow:hidden; text-align:center}
.scene .eyebrow{display:block; margin-bottom:1.4rem; opacity:.9}
.scene-wrap{max-width:1080px; margin:0 auto; padding:0 clamp(1.25rem,5vw,4rem); position:relative}
.scene-img{width:100%; height:auto; display:block; will-change:transform,opacity,filter}

footer{padding:clamp(2.5rem,5vw,4rem) 0 2.5rem; background:var(--paper)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid var(--hairline)}
.foot-brand .brand{margin-bottom:.7rem}
.foot-brand p{font-size:.9rem; max-width:30ch; margin-bottom:1.4rem}
.socials{display:flex; gap:.7rem}
.socials a{width:38px; height:38px; border-radius:50%; background:var(--light-sand); display:flex; align-items:center; justify-content:center; transition:.3s}
.socials a:hover{background:var(--sienna); transform:translateY(-3px)}
.socials a:hover svg{color:var(--paper-white)}
.socials svg{width:17px; height:17px; color:var(--ink); transition:.3s}
.foot-col h5{font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin-bottom:1.1rem; font-weight:600}
.foot-col a, .foot-col p{display:block; font-size:.9rem; color:var(--stone); margin-bottom:.6rem; transition:color .3s}
.foot-col a:hover{color:var(--sienna)}
.copy{text-align:center; padding-top:2rem; font-size:.8rem; color:var(--warm-gray)}

@media(max-width:980px){ .scards{grid-template-columns:repeat(3,1fr); gap:1.6rem 1rem} .foot-grid{grid-template-columns:1fr 1fr; gap:2rem} }
@media(max-width:820px){
  .menu{position:fixed; inset:0 0 0 auto; width:74%; max-width:320px; background:var(--paper-white); flex-direction:column; padding:6rem 2rem; gap:1.4rem; transform:translateX(100%); transition:transform .45s var(--ease); box-shadow:-20px 0 50px -30px rgba(0,0,0,.4)}
  .nav.open .menu{transform:none}
  .burger{display:flex; z-index:60}
  .nav.open .burger span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  .nav.open .burger span:nth-child(2){opacity:0}
  .nav.open .burger span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
  .hero-grid{grid-template-columns:1fr; gap:1rem; min-height:auto}
  .hero-art{order:-1; height:320px}
  .about-grid{grid-template-columns:1fr; gap:2.2rem}
  .approach-grid{grid-template-columns:1fr; gap:2.5rem} .connectors{display:none} .steps{min-height:0}
  .scards{grid-template-columns:repeat(2,1fr)}
  .scard p{min-height:auto}
  .ccards{grid-template-columns:1fr}
  .testi-track{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:1.2rem; scrollbar-width:none; padding-bottom:.4rem}
  .testi-track::-webkit-scrollbar{display:none}
  .tcard{flex:0 0 86%; scroll-snap-align:center; background:var(--paper); border:1px solid var(--hairline); border-radius:6px; padding:1.6rem}
  .dots{display:flex}
  .strip-item{flex:1 1 45%; border-left:none}
  .cursor{display:none!important}
}
@media(max-width:520px){ .scards{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
  .js [data-reveal]{opacity:1!important; transform:none!important; filter:none!important}
  .petal,.scroll-cue,.cursor{display:none!important}
  .portrait-img,.branch-img{opacity:1!important}
  .scene-img{opacity:1!important; transform:none!important; filter:none!important}
  .brush{clip-path:inset(0 0 0 0)!important}
  .cnx{stroke-dashoffset:0!important}
  .loader{display:none!important}
}