:root{--ink:#152022;--ink2:#0f1719;--ink3:#1d2b2d;--paper:#f2f1eb;--gold:#bd9e71;--teal:#7fb3aa;--mute:#a9b4ad;--line:#33423f}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:Poppins,Arial,Helvetica,sans-serif;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button,input,textarea{font:inherit;color:inherit}img{max-width:100%}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;line-height:1.12;margin:0;text-wrap:balance}h2{font-size:clamp(30px,3.6vw,52px)}
.wrap{max-width:1360px;margin:0 auto;padding:0 6vw}
.kicker{font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--gold);margin:0 0 18px}
.lead{font-size:clamp(18px,1.6vw,22px);color:var(--paper);font-weight:400}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;font-size:14px;font-weight:500;border:1px solid var(--paper);border-radius:2px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn.solid{background:var(--paper);color:var(--ink)}.btn.solid:hover{background:var(--gold);border-color:var(--gold)}.btn.ghost{background:transparent;color:var(--paper)}.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:50;height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 6vw;background:rgba(15,23,25,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.07)}
.logo img{display:block;height:40px;width:auto}.top nav{display:flex;gap:34px;font-size:14px;font-weight:400}.top nav a:hover{color:var(--gold)}
.talk{font-size:14px;font-weight:500;border:1px solid var(--gold);color:var(--gold);padding:10px 20px;border-radius:2px;white-space:nowrap}.talk:hover{background:var(--gold);color:var(--ink)}
/* hero */
.hero{position:relative;min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:2vw;padding:120px 6vw 90px;background:radial-gradient(1200px 700px at 78% 45%,#1f3033 0%,var(--ink) 55%,var(--ink2) 100%);overflow:hidden}
.hero h1{font-size:clamp(34px,4.5vw,66px);max-width:15em}.tagline{font-size:clamp(17px,1.5vw,21px);color:var(--mute);margin:26px 0 36px;max-width:30em}.cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{min-width:0}.scroll-hint{position:absolute;left:6vw;bottom:34px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
/* scene */
.scene{width:100%;height:auto;display:block;overflow:visible}
.scene .plate{fill:rgba(15,23,25,.55);stroke:#51615d;stroke-width:1}.scene .ln{fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.scene .thin{stroke:#6f7e79;stroke-width:1}.scene .gold{stroke:var(--gold)}.scene .wet{stroke:var(--teal)}.scene .ln.wet{stroke-width:3}.scene .node.wet{fill:var(--ink);stroke:var(--teal);stroke-width:2}.scene .box.wet{fill:rgba(127,179,170,.25);stroke:var(--teal);stroke-width:1.6}
.scene .dry{stroke:var(--gold)}.scene .ln.dry{stroke-width:2.2}.scene .box.dry{fill:var(--gold);stroke:none}.scene .lamp{fill:var(--paper)}
.scene .road{fill:#3a4947;stroke:none}.scene .dash{stroke:var(--gold);stroke-dasharray:7 6;stroke-width:1.4}.scene .rbt{fill:var(--ink);stroke:var(--paper);stroke-width:1.4}
.scene .bl{stroke:var(--paper);stroke-width:1.2;stroke-linejoin:round}.scene .f1{fill:#24383a}.scene .f2{fill:#1a2a2c}.scene .f3{fill:#31494a}.scene .floor{stroke:#7d8c87;stroke-width:.8}
.scene .lbl{font-family:Poppins,Arial,sans-serif;font-size:11px;font-weight:500;letter-spacing:.14em;fill:var(--mute)}.scene .lead{stroke:#51615d;stroke-width:1}
.scene .layer{transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.hero-art .lbl,.hero-art .lead{display:none}
/* journey */
.journey{position:relative;height:500vh;background:var(--ink2)}
.sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:96px 6vw 22px;overflow:hidden}
.j-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:1px solid var(--line);padding-bottom:14px}.j-head h2{font-size:clamp(22px,2.2vw,32px)}
.counter{font-size:13px;letter-spacing:.08em;color:var(--mute);white-space:nowrap}.counter b{font-size:26px;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums}
.j-body{flex:1;min-height:0;display:grid;grid-template-columns:1.25fr 1fr;gap:4vw;align-items:center}
.j-art{min-width:0;display:flex;align-items:center;justify-content:center;height:100%}.j-art .scene{max-height:100%;width:auto;max-width:100%}
.j-text{position:relative;min-height:340px}
.stage{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(18px);transition:opacity .45s,transform .45s;pointer-events:none}
.stage-no{font-size:12px;letter-spacing:.2em;color:var(--gold);font-weight:500}.stage h3{font-size:clamp(30px,3.4vw,50px);margin:10px 0 12px}.stage-lead{font-size:19px;font-weight:400;margin:0 0 8px}.stage p{color:var(--mute);margin:0 0 18px;max-width:30em}.stage .stage-lead{color:var(--paper)}
.stage ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.stage li{border:1px solid var(--line);padding:7px 14px;font-size:13px;font-weight:400;border-radius:2px}
.marks{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding-top:14px}
.mark{background:none;border:0;border-top:2px solid var(--line);padding:12px 0 0;text-align:left;font-size:12px;font-weight:400;color:var(--mute);cursor:pointer;min-height:44px;transition:color .3s,border-color .3s}.mark span{display:block;font-size:11px;letter-spacing:.16em;margin-bottom:2px}
.journey .layer{opacity:0;transform:translateY(-34px)}
.journey[data-stage="0"] .stage[data-stage="0"]{opacity:1;transform:none;pointer-events:auto}.journey[data-stage="0"] .mark[data-go="0"]{color:var(--paper);border-color:var(--gold)}.journey[data-stage="1"] .stage[data-stage="1"]{opacity:1;transform:none;pointer-events:auto}.journey[data-stage="1"] .mark[data-go="1"]{color:var(--paper);border-color:var(--gold)}.journey[data-stage="2"] .stage[data-stage="2"]{opacity:1;transform:none;pointer-events:auto}.journey[data-stage="2"] .mark[data-go="2"]{color:var(--paper);border-color:var(--gold)}.journey[data-stage="3"] .stage[data-stage="3"]{opacity:1;transform:none;pointer-events:auto}.journey[data-stage="3"] .mark[data-go="3"]{color:var(--paper);border-color:var(--gold)}.journey[data-stage="4"] .stage[data-stage="4"]{opacity:1;transform:none;pointer-events:auto}.journey[data-stage="4"] .mark[data-go="4"]{color:var(--paper);border-color:var(--gold)}.journey[data-stage="0"] .layer[data-layer="0"]{opacity:1;transform:none}.journey[data-stage="1"] .layer[data-layer="0"]{opacity:0.28;transform:none}.journey[data-stage="1"] .layer[data-layer="1"]{opacity:1;transform:none}.journey[data-stage="2"] .layer[data-layer="0"]{opacity:0.28;transform:none}.journey[data-stage="2"] .layer[data-layer="1"]{opacity:0.28;transform:none}.journey[data-stage="2"] .layer[data-layer="2"]{opacity:1;transform:none}.journey[data-stage="3"] .layer[data-layer="0"]{opacity:0.28;transform:none}.journey[data-stage="3"] .layer[data-layer="1"]{opacity:0.28;transform:none}.journey[data-stage="3"] .layer[data-layer="2"]{opacity:0.28;transform:none}.journey[data-stage="3"] .layer[data-layer="3"]{opacity:1;transform:none}.journey[data-stage="4"] .layer[data-layer="0"]{opacity:0.28;transform:none}.journey[data-stage="4"] .layer[data-layer="1"]{opacity:0.28;transform:none}.journey[data-stage="4"] .layer[data-layer="2"]{opacity:0.28;transform:none}.journey[data-stage="4"] .layer[data-layer="3"]{opacity:0.28;transform:none}.journey[data-stage="4"] .layer[data-layer="4"]{opacity:1;transform:none}
/* stats */
.stats{background:var(--gold);color:var(--ink)}.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-top:44px;padding-bottom:44px}.stats b{display:block;font-size:clamp(32px,3.6vw,52px);font-weight:600;line-height:1;letter-spacing:-.02em}.stats span{display:block;margin-top:10px;font-size:14px;font-weight:400}
/* sections */
.projects,.clients,.about,.contact{padding:110px 0}.clients{background:var(--ink2)}.about{background:var(--paper);color:var(--ink)}.about .kicker{color:#8a6f45}.about .lead{color:var(--ink)}.about p{color:#4c5853}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:38px}.sec-head>p{max-width:24em;color:var(--mute);margin:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.filters button{min-height:40px;padding:0 18px;background:none;border:1px solid var(--line);border-radius:2px;font-size:13px;font-weight:400;cursor:pointer;color:var(--mute)}.filters button.on{background:var(--paper);color:var(--ink);border-color:var(--paper);font-weight:500}
.map-row{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;align-items:stretch}
.map-box{background:var(--ink2);border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;justify-content:center}.map{width:100%;height:auto;display:block}
.map .grid{stroke:#24322f;stroke-width:1}.map .tick{font-family:Poppins,Arial,sans-serif;font-size:10px;fill:#5f6f69}.map .land{fill:#1d2b2d;stroke:#56655f;stroke-width:1.2;stroke-linejoin:round}
.map .country{font-family:Poppins,Arial,sans-serif;font-size:13px;font-weight:500;letter-spacing:.3em;fill:#75847e;text-anchor:middle}.map .sea{font-family:Poppins,Arial,sans-serif;font-size:10px;letter-spacing:.3em;fill:#4f5e59}
.pin .halo{fill:rgba(189,158,113,.18);stroke:none;transition:r .2s,fill .2s}.pin .core{fill:var(--gold);stroke:var(--ink2);stroke-width:2;transition:r .2s}.pin:hover .halo,.pin.hot .halo,.pin:focus-visible .halo{r:20px;fill:rgba(189,158,113,.35)}.pin.hot .core,.pin:hover .core{r:7px;fill:var(--paper)}.pin.off{opacity:.12;pointer-events:none}.pin:focus-visible{outline:none}.pin:focus-visible .core{stroke:var(--paper)}
.map-note{font-size:11px;color:#6f7e79;margin:8px 4px 0}
.plist{display:flex;flex-direction:column;gap:8px;max-height:640px;overflow:auto;padding-right:6px}
.pcard{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);padding:8px;transition:border-color .2s,background .2s}.pcard img{width:96px;height:66px;object-fit:cover;display:block}.pcard-body{display:flex;flex-direction:column;min-width:0}.pcard strong{font-weight:500;font-size:15px;line-height:1.3}.pcard-body span{font-size:12px;color:var(--mute)}.pcard em{font-style:normal;font-size:11px;letter-spacing:.06em;color:var(--gold)}.pcard-go{padding:0 10px;color:var(--mute)}
.pcard:hover,.pcard.hot{border-color:var(--gold);background:var(--ink3)}.pcard.off{display:none}
.dl{margin-top:30px}
.client-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.client-grid a{display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:150px;padding:22px;background:var(--ink2);transition:background .2s}.client-grid a:hover{background:var(--ink3)}.client-grid strong{font-size:18px;font-weight:500;line-height:1.25}.client-grid span{font-size:12px;color:var(--mute)}
.about-in,.contact-in{display:grid;grid-template-columns:1fr 1.15fr;gap:7vw;align-items:start}
.caps{margin:34px 0;display:grid;gap:0}.caps>div{display:grid;grid-template-columns:120px 1fr;gap:16px;border-top:1px solid #c6cbc2;padding:16px 0}.caps dt{font-weight:600;color:var(--ink)}.caps dd{margin:0;color:#4c5853}
.about .btn.ghost{border-color:var(--ink);color:var(--ink)}.about .btn.ghost:hover{background:var(--ink);color:var(--paper)}
.direct{list-style:none;margin:34px 0 0;padding:0}.direct li{display:grid;grid-template-columns:100px 1fr;gap:14px;border-top:1px solid var(--line);padding:16px 0}.direct span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding-top:4px}.direct a{font-size:17px;font-weight:400;overflow-wrap:anywhere}.direct a:hover{color:var(--gold)}
form{display:grid;gap:16px}.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:grid;gap:7px;font-size:13px;font-weight:400;color:var(--mute)}
input,textarea{width:100%;background:var(--ink2);border:1px solid var(--line);border-radius:2px;padding:13px 14px;color:var(--paper);font-weight:300;min-height:48px}textarea{resize:vertical}input:focus,textarea:focus{outline:none;border-color:var(--gold)}
.send{display:flex;gap:12px;flex-wrap:wrap}.form-note{font-size:12px;color:#7f8d87;margin:0}.form-err{margin:0;color:#f0b9a8;font-size:14px;font-weight:400}
footer{background:var(--ink2);border-top:1px solid var(--line)}.foot{display:grid;grid-template-columns:auto 1fr auto auto;gap:40px;align-items:center;padding-top:44px;padding-bottom:44px;font-size:13px}.foot nav{display:flex;gap:26px;flex-wrap:wrap}.foot a:hover{color:var(--gold)}.foot p{margin:0;color:var(--mute)}.foot .logo img{height:46px}
@media(max-width:900px){.top nav{display:none}.top{height:66px}.logo img{height:34px}
.hero{grid-template-columns:1fr;padding:100px 6vw 80px;gap:10px}.hero-art{order:-1;max-width:420px;margin:0 auto}.hero h1{font-size:32px}
.sticky{padding:80px 6vw 14px}.j-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:6px}.j-art .scene{max-height:100%}.j-text{min-height:250px}.stage{justify-content:flex-start}.stage h3{font-size:28px;margin:6px 0 6px}.stage-lead{font-size:16px}.stage p{font-size:14px;margin-bottom:10px}.stage li{font-size:12px;padding:5px 10px}
.mark{font-size:0;padding-top:8px;min-height:44px}.mark span{font-size:11px}.j-head h2{font-size:19px}.counter b{font-size:20px}
.stats-in{grid-template-columns:1fr 1fr}.projects,.clients,.about,.contact{padding:72px 0}.sec-head{display:block}.sec-head>p{margin-top:14px}
.map-row,.about-in,.contact-in{grid-template-columns:1fr}.plist{max-height:none}.client-grid{grid-template-columns:1fr 1fr}.row{grid-template-columns:1fr}.foot{grid-template-columns:1fr;gap:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene .layer,.stage{transition:none}}