:root{--ink:#172b30;--paper:#e9edef;--line:#c4d0d2;--accent:#bd8862}body{background:var(--paper);color:var(--ink)}header{height:84px;background:#142a30;color:#f7f7f1;border:0;max-width:none;padding-left:max(5vw,calc((100vw - 1280px)/2));padding-right:max(5vw,calc((100vw - 1280px)/2))}.logo b,.logo span{color:#a8c5c6}nav a{color:#f2f4ef}main{max-width:none}body:not(.project-page) main>.hero{position:relative;isolation:isolate;min-height:calc(100svh - 84px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;color:#fff;padding:90px 0 130px}body:not(.project-page) main>.hero:before{content:'';position:absolute;z-index:-2;inset:0 calc(-1 * clamp(22px,5vw,80px));background:linear-gradient(90deg,rgba(9,27,32,.91) 0%,rgba(10,31,36,.7) 48%,rgba(10,28,33,.24) 100%),url('/assets/barchinet-concept-v2.png') center 48%/cover no-repeat;animation:hero-arrive 1.8s ease-out both}body:not(.project-page) main>.hero:after{content:'SCROLL TO EXPLORE  ↓';position:absolute;bottom:35px;left:0;color:#d1dfdb;font-size:10px;letter-spacing:.19em;animation:drift 2.8s ease-in-out infinite}body:not(.project-page) .hero h1{max-width:1050px;color:white;text-wrap:balance}body:not(.project-page) .hero h1 em{color:#e4b695}body:not(.project-page) .hero p{color:#e5eeeb;font-size:18px}body:not(.project-page) .hero .eyebrow{color:#cae0da}body:not(.project-page) .hero .btn{background:#fff;color:#142b30}body:not(.project-page) .hero .textlink{color:white}.hero>*{animation:rise-in .9s both;animation-delay:.12s}.hero h1{animation-delay:.22s}.hero p{animation-delay:.34s}.hero .actions,.hero .btn{animation-delay:.45s}.btn{border-radius:4px}.banner{margin-top:clamp(60px,8vw,120px)}.scene .label{background:linear-gradient(transparent,rgba(8,22,26,.86))}.project h3,.section-head h2{color:#152c31}.tools{background:#15343a;color:#f5f7f4}.tools .section-head h2{color:#fff}.tools .section-head p{color:#c0d1ce}.tools .eyebrow{color:#e1b393}.tool{color:#183038;background:#f1f4f0}.tool .screen{height:280px}.contact{color:#173037}.textlink{transition:color .25s,border-color .25s}.textlink:hover{color:#bd7954}.js-reveal .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.65,.2,1)}.js-reveal .reveal.is-visible{opacity:1;transform:none}.js-reveal .tool.reveal:nth-child(2){transition-delay:.08s}.js-reveal .tool.reveal:nth-child(3){transition-delay:.16s}.js-reveal .tool.reveal:nth-child(4){transition-delay:.24s}
body.project-page{background:#e8eeee}body.project-page .hero{min-height:calc(100svh - 84px);padding:clamp(42px,5vw,70px) 0;grid-template-columns:.9fr 1.1fr}body.project-page h1{color:#173039}body.project-page .visual{height:min(70vh,680px);min-height:400px}body.project-page .eyebrow{color:#9b644d}body.project-page .btn{background:#15343a}body.pattern-page{background:#ece5df;--accent:#9e5c46}body.pattern-page .btn{background:#6c463e}body.pattern-page .hero h1{color:#412f30}body.pattern-page .bottom{background:#dfd0c8}.sections h2{color:inherit}.bottom{background:#d3e0dd}.project-page .hero .visual img{animation:slow-reveal 1.5s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes hero-arrive{from{opacity:.65;filter:brightness(.7)}to{opacity:1;filter:brightness(1)}}@keyframes slow-reveal{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:800px){body:not(.project-page) main>.hero:before{background-position:58% center;background-image:linear-gradient(90deg,rgba(9,27,32,.91),rgba(9,27,32,.58)),url('/assets/barchinet-concept-v2.png')}body.project-page .hero{min-height:auto}body.project-page .visual{height:440px}.tool .screen{height:230px}}
@media(max-width:480px){header{height:72px}.hero{padding-top:50px}body:not(.project-page) main>.hero{min-height:calc(100svh - 72px);padding:55px 0 105px}.hero h1{font-size:clamp(43px,12vw,64px)}body:not(.project-page) .hero p{font-size:16px}.banner{margin-top:50px}.tool .screen{height:180px}body.project-page .visual{height:365px;min-height:0}body.project-page .hero{gap:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js-reveal .reveal{opacity:1;transform:none}}
body.mini-page main>.hero:before{background:linear-gradient(90deg,rgba(10,35,42,.97),rgba(12,54,60,.84)),url('/assets/tank.png') center 30%/cover no-repeat}body.mini-page .hero h1{max-width:900px}
/* Project-specific movement: soft light across imagery, staggered reveals and tactile links. */
body.project-page .visual{position:relative;isolation:isolate}body.project-page .visual:after{content:'';pointer-events:none;position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 35%,rgba(255,241,210,.2) 48%,transparent 58%);transform:translateX(-100%);animation:project-light 11s ease-in-out 1.8s infinite}body.pattern-page .visual:after{background:linear-gradient(115deg,transparent 35%,rgba(245,186,131,.23) 48%,transparent 58%)}
body.project-page .caption{animation:caption-in 1s .7s both}.project-page .sections article,.project-page .bottom,.project-page .contact{will-change:opacity,transform}.js-reveal .sections article:nth-child(2){transition-delay:.14s}.js-reveal .project:nth-child(2){transition-delay:.12s}.tool .screen img{transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .75s}.tool:hover .screen img{transform:scale(1.045);filter:saturate(1.08)}.project a,.bottom a{transition:color .25s}.project a:hover,.bottom a:hover{color:#ad795d}
body.mini-page .hero:before{animation:mini-breathe 12s ease-in-out infinite alternate!important}.mini-page .tool:nth-child(1) .screen{background:#c6e1de}.mini-page .tool:nth-child(2) .screen{background:#e7c9ba}.mini-page .tool:nth-child(3) .screen{background:#cbd8e0}.mini-page .tool:nth-child(4) .screen{background:#d9cfe1}
@keyframes project-light{0%,15%{transform:translateX(-100%)}70%,100%{transform:translateX(100%)}}@keyframes caption-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes mini-breathe{from{filter:brightness(.85)}to{filter:brightness(1.1)}}
@media(prefers-reduced-motion:reduce){body.project-page .visual:after,body.mini-page .hero:before{animation:none!important}.tool .screen img{transition:none}}
/* Distinct, directional motion across the project family. */
body.project-page .hero .visual{box-shadow:0 26px 65px #10252a26}body.project-page .hero .visual img{animation:project-entry 1.8s cubic-bezier(.17,.65,.2,1) both}
.js-reveal .project.reveal,.js-reveal .sections article.reveal{transform:translateY(38px)}.js-reveal .project.reveal.is-visible,.js-reveal .sections article.reveal.is-visible{transform:translateY(0)}
.js-reveal .tool.reveal{transform:translateY(42px) scale(.975)}.js-reveal .tool.reveal.is-visible{transform:translateY(0) scale(1)}
.scene img,.tool .screen img{transform-origin:center;transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .8s}.scene:hover img,.tool:hover .screen img{transform:scale(1.06)}
.project-page .hero h1,.project-page .hero .lead{animation:project-copy 1s cubic-bezier(.2,.7,.2,1) both}.project-page .hero .lead{animation-delay:.16s}.project-page .hero .btn{animation-delay:.3s}
@keyframes project-entry{from{opacity:0;transform:scale(1.075) translateY(14px);filter:blur(4px)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}@keyframes project-copy{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){body.project-page .hero .visual img,.project-page .hero h1,.project-page .hero .lead{animation:none}.js-reveal .tool.reveal,.js-reveal .project.reveal,.js-reveal .sections article.reveal{opacity:1;transform:none}}