@import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500&display=swap");
:root{--bk:#0a0a0a;--wh:#f5f3ee;--gr:#8a8a85}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:var(--wh);color:var(--bk);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo,.btn,.n,.marquee{font-family:Anton,Impact,"Arial Narrow",sans-serif;text-transform:uppercase;font-weight:400;letter-spacing:.01em}
img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;color:#fff;mix-blend-mode:difference}
.logo{font-size:1.5rem;color:#fff;text-decoration:none}
.top nav{display:flex;gap:22px}
.top nav a{color:#fff;text-decoration:none;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em}
.hero{position:relative;height:100vh;min-height:560px;background:#000;color:#fff;overflow:hidden}
.hero img{position:absolute;inset:0;opacity:.55;animation:zoom 22s ease-out forwards}
@keyframes zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero-inner{position:absolute;left:0;right:0;bottom:12vh;padding:0 24px;max-width:1200px;margin:0 auto}
.kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.22em;margin-bottom:18px;color:#ddd}
.kicker.dark{color:var(--gr)}
h1{font-size:clamp(4rem,17vw,13rem);line-height:.88;margin-bottom:32px}
h2{font-size:clamp(2.6rem,8vw,6.5rem);line-height:.95;margin-bottom:28px}
h3{font-size:1.7rem;margin-bottom:6px}
.btn{display:inline-block;padding:14px 30px;background:#fff;color:#000;text-decoration:none;font-size:1rem;letter-spacing:.1em;border:2px solid #fff;transition:.25s}
.btn:hover{background:transparent;color:#fff}
.btn.big{padding:18px 44px;font-size:1.2rem}
.btn.ghost{background:transparent;color:#fff}
.btn.ghost:hover{background:#fff;color:#000}
.scroll{position:absolute;right:24px;bottom:24px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;writing-mode:vertical-rl}
.band{background:var(--bk);color:var(--wh);overflow:hidden;padding:18px 0;white-space:nowrap}
.marquee{display:inline-block;font-size:1.6rem;animation:mq 30s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
section{padding:110px 0}
.hero,.band{padding:0}
.band{padding:18px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.text p{font-size:1.15rem;margin-bottom:18px;max-width:34em}
.draft{font-size:.9rem!important;color:var(--gr);border-left:3px solid var(--gr);padding-left:12px;font-style:italic}
.draft.light{margin-top:40px}
.about .wide{height:60vh;margin-top:80px}
.services{background:var(--bk);color:var(--wh)}
.list{list-style:none;margin-top:20px}
.list li{display:flex;gap:32px;align-items:baseline;padding:34px 0;border-top:1px solid #333}
.list li:last-child{border-bottom:1px solid #333}
.list .n{font-size:1.2rem;color:var(--gr)}
.list h3{font-size:clamp(2rem,6vw,4.2rem);line-height:1}
.list p{color:#bbb;margin-top:8px}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:40px 0 24px}
.gallery figure{position:relative;aspect-ratio:4/5;overflow:hidden;background:#000}
.gallery img{transition:transform .8s}
.gallery figure:hover img{transform:scale(1.06)}
figcaption{position:absolute;left:14px;bottom:12px;color:#fff;font-family:Anton,sans-serif;text-transform:uppercase;font-size:1.2rem;text-shadow:0 1px 8px #000}
.contact{background:var(--bk);color:#fff;text-align:center}
.contact .lead{font-size:1.15rem;color:#ccc;margin:0 auto 36px;max-width:30em}
.actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.small{margin-top:40px;color:var(--gr);font-size:.85rem;letter-spacing:.15em;text-transform:uppercase}
footer{background:#000;color:var(--gr);text-align:center;padding:26px;font-size:.8rem}
.wa{position:fixed;right:18px;bottom:18px;z-index:30;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .2s}
.wa:hover{transform:scale(1.08)}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s,transform .9s}
.reveal.in{opacity:1;transform:none}
@media(max-width:800px){
 .grid2{grid-template-columns:1fr;gap:20px}
 .gallery{grid-template-columns:repeat(2,1fr)}
 section{padding:70px 0}
 .top nav{gap:12px}.top nav a{font-size:.65rem;letter-spacing:.08em}
 .list li{gap:16px}
 .scroll{display:none}
 .about .wide{height:40vh;margin-top:50px}
}
@media(prefers-reduced-motion:reduce){.hero img,.marquee{animation:none}.reveal{opacity:1;transform:none}}

/* A consistent dark header keeps navigation readable on photos and light sections. */
.top{mix-blend-mode:normal;background:rgba(10,10,10,.94);gap:24px;border-bottom:1px solid #ffffff20}
.top nav{margin-left:auto}
.language-control select{font:500 .72rem Inter,system-ui,sans-serif;letter-spacing:.08em;color:#fff;background:#151515;border:1px solid #777;border-radius:0;padding:10px 8px;min-height:40px;cursor:pointer}
.language-control select:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
section[id]{scroll-margin-top:80px}
@media(max-width:800px){.top{padding:12px 16px;gap:12px;flex-wrap:wrap}.top .logo{order:0}.language-control{order:1;margin-left:auto}.top nav{order:2;width:100%;justify-content:space-between;margin-left:0;gap:8px}.top nav a{font-size:.65rem}.hero-inner{bottom:12vh}section[id]{scroll-margin-top:110px}}