:root{
  --ink:#1a1c20; --ink-2:#3c3e44; --muted:#4a4c52; --line:#e4e3df; --soft:#f6f5f2; --tint:#f7efe9;
  --accent:#c65d1e; --accent-dark:#9f4714; --white:#fff;
  --pad:clamp(20px,5.5vw,80px); --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:var(--white); color:var(--ink); font-family:'DM Sans',system-ui,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:var(--accent)}
a:hover{color:var(--accent-dark)}
h1,h2,h3{font-family:'Manrope',sans-serif; letter-spacing:-0.02em; margin:0; line-height:1.1}
p{margin:0}
.wrap{padding-left:var(--pad); padding-right:var(--pad); max-width:1600px; margin:0 auto}
.label{font-size:15px; font-weight:600; color:var(--accent)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 28px; border-radius:999px; font-weight:600; font-size:16px; text-decoration:none; border:none; cursor:pointer; font-family:inherit; transition:background .15s, color .15s}
.btn-accent{background:var(--accent); color:#fff}
.btn-accent:hover{background:var(--accent-dark); color:#fff}
.btn-white{background:#fff; color:var(--ink)}
.btn-white:hover{background:#ebeae6; color:var(--ink)}
.btn-line{border:1px solid #c9c7c1; color:var(--ink); background:transparent}
.btn-line:hover{background:var(--soft); color:var(--ink)}
.btn svg{width:18px; height:18px}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}

/* header */
.header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid #ebeae6}
.header .wrap{height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand span{font-family:'Manrope',sans-serif; font-size:24px; font-weight:800; letter-spacing:-0.02em}
.nav-area{display:flex; align-items:center; gap:24px}
.nav{display:flex; align-items:center; gap:26px}
.nav a{color:var(--ink-2); text-decoration:none; font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{font-weight:700; box-shadow:inset 0 -2px 0 var(--accent)}
.langs{display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px}
.langs button{min-width:40px; height:34px; padding:0 10px; border:none; border-radius:999px; cursor:pointer; font-family:inherit; font-size:14px; font-weight:700; background:transparent; color:#55575c}
.langs button[aria-pressed="true"]{background:var(--ink); color:#fff}
.menu-btn{display:none; width:48px; height:48px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; align-items:center; justify-content:center}
.menu-btn svg{width:24px; height:24px}

/* hero */
.hero{position:relative; min-height:min(760px,88vh); display:flex; align-items:center; color:#fff; overflow:hidden}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,14,18,.8) 0%,rgba(12,14,18,.5) 50%,rgba(12,14,18,.1) 85%)}
.hero .wrap{position:relative; z-index:1; width:100%; padding-top:80px; padding-bottom:80px}
.hero-inner{max-width:700px; display:flex; flex-direction:column; gap:26px}
.badge{align-self:flex-start; padding:8px 16px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); border-radius:999px; font-size:15px; font-weight:500}
.hero h1{font-size:clamp(40px,6vw,74px); font-weight:800; line-height:1.04}
.hero p{font-size:clamp(18px,1.6vw,21px); color:#e6e6e3; max-width:580px}
.hero .actions{display:flex; flex-wrap:wrap; gap:12px}

/* icon strip */
.strip{border-bottom:1px solid #ebeae6}
.strip .wrap{padding-top:56px; padding-bottom:56px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px}
.strip-item{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px}
.icon-circle{width:72px; height:72px; border-radius:999px; background:var(--tint); display:flex; align-items:center; justify-content:center}
.icon-circle svg,.icon-box svg{width:30px; height:30px}
.strip-item span{font-family:'Manrope',sans-serif; font-weight:700; font-size:18px}

section.block{padding-top:clamp(64px,8vw,112px); padding-bottom:clamp(64px,8vw,112px)}
.soft{background:var(--soft)}
.section-h{font-size:clamp(32px,4vw,52px); font-weight:800}

/* about */
.about{display:grid; grid-template-columns:5fr 1fr 6fr; gap:24px; align-items:start}
.about .col-a{display:flex; flex-direction:column; gap:16px}
.about .col-b{grid-column:3; display:flex; flex-direction:column; gap:20px; font-size:19px; line-height:1.7; color:var(--muted)}

/* services */
.head-center{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; margin-bottom:56px}
.head-center p{max-width:620px; color:var(--muted); font-size:18px}
.services{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.service{background:#fff; border-radius:var(--radius); padding:clamp(24px,3vw,40px); display:flex; gap:24px; align-items:flex-start; box-shadow:0 1px 2px rgba(20,20,20,.05),0 8px 24px rgba(20,20,20,.05)}
.service.wide{grid-column:span 2}
.icon-box{flex-shrink:0; width:60px; height:60px; border-radius:16px; background:var(--tint); display:flex; align-items:center; justify-content:center}
.service h3{font-size:24px; font-weight:700; margin-bottom:8px}
.service p{color:var(--muted)}

/* works */
.head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; flex-wrap:wrap}
.head-row > div{display:flex; flex-direction:column; gap:14px}
.gallery{display:grid; gap:24px}
.gallery img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius); background:var(--soft)}
.gallery.c2 img{aspect-ratio:4/3}
.gallery.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
figure{margin:0; display:flex; flex-direction:column; gap:12px}
figcaption{font-weight:500; color:var(--ink-2)}
.project{padding-top:clamp(56px,6vw,88px)}
.project-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-bottom:22px; margin-bottom:28px; border-bottom:1px solid #ebeae6; flex-wrap:wrap}
.project-head h2{font-size:clamp(28px,3vw,40px); font-weight:800; margin-top:6px}
.project-head .work{color:var(--muted)}
.page-intro{padding-top:clamp(56px,7vw,96px); padding-bottom:clamp(48px,5vw,72px)}
.page-intro .back{display:inline-flex; align-items:center; gap:8px; font-weight:600; text-decoration:none; margin-bottom:18px}
.page-intro h1{font-size:clamp(40px,6vw,72px); font-weight:800; margin-bottom:16px}
.page-intro p{max-width:680px; font-size:20px; color:var(--muted)}
.cta{margin-top:clamp(64px,8vw,96px); margin-bottom:clamp(64px,8vw,96px); background:var(--ink); color:#fff; border-radius:24px; padding:clamp(32px,4vw,56px) clamp(24px,4.5vw,64px); display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap}
.cta h2{font-size:clamp(28px,3vw,40px); font-weight:800; margin-bottom:8px}
.cta p{color:#c9c8c4; font-size:18px}

/* contact */
.contact{display:grid; grid-template-columns:5fr 1fr 6fr; gap:24px; align-items:start}
.contact .col-a{display:flex; flex-direction:column; gap:36px}
.contact .col-a > div:first-child{display:flex; flex-direction:column; gap:14px}
.contact .col-a p{color:var(--muted); font-size:18px}
.cards{display:flex; flex-direction:column; gap:14px}
.card{display:flex; gap:18px; align-items:center; padding:20px 24px; background:#fff; border-radius:16px}
.card svg{width:26px; height:26px; flex-shrink:0}
.card strong{display:block; font-family:'Manrope',sans-serif; font-size:19px}
.card a{font-size:18px; font-weight:500; text-decoration:none; word-break:break-word}
form.quote{grid-column:3; display:flex; flex-direction:column; gap:18px; padding:clamp(24px,3.2vw,44px); background:#fff; border-radius:24px; box-shadow:0 1px 2px rgba(20,20,20,.06),0 12px 32px rgba(20,20,20,.08)}
form.quote h3{font-size:26px; font-weight:700}
.row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.field{display:flex; flex-direction:column; gap:8px}
.field label{font-size:14px; font-weight:500; color:var(--ink-2)}
.field input,.field textarea{min-height:52px; padding:12px 16px; background:var(--soft); border:1px solid var(--line); color:var(--ink); font-size:16px; font-family:inherit; border-radius:12px; width:100%}
.field textarea{min-height:140px; resize:vertical; line-height:1.5}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
.hp{position:absolute; left:-9999px}

/* footer */
.footer{background:var(--ink); color:#b9b9b5; font-size:14px}
.footer .wrap{min-height:120px; padding-top:28px; padding-bottom:28px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.footer .brand span{color:#fff; font-size:22px}

[hidden]{display:none !important}

/* responsive */
@media (max-width:1100px){
  .nav-area{position:fixed; inset:76px 0 auto 0; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:18px; padding:20px var(--pad) 28px; display:none; box-shadow:0 16px 32px rgba(0,0,0,.08)}
  .nav-area.open{display:flex}
  .nav{flex-direction:column; align-items:stretch; gap:0}
  .nav a{padding:14px 0; border-bottom:1px solid #efeeea; font-size:18px}
  .nav a[aria-current="page"]{box-shadow:none; color:var(--accent)}
  .langs{align-self:flex-start}
  .menu-btn{display:inline-flex}
  .strip .wrap{grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:32px}
  .about,.contact{grid-template-columns:1fr; gap:40px}
  .about .col-b,form.quote{grid-column:auto}
  .gallery.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:16px}
  .strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .services{grid-template-columns:1fr}
  .service.wide{grid-column:auto}
  .service{flex-direction:column; gap:16px}
  .gallery.c3,.gallery.c2,.gallery.c4{grid-template-columns:1fr}
  .gallery img,.gallery.c2 img{aspect-ratio:4/3}
  .row2{grid-template-columns:1fr}
  .hero::after{background:linear-gradient(180deg,rgba(12,14,18,.55) 0%,rgba(12,14,18,.75) 100%)}
  .hero .actions .btn{flex:1 1 auto}
  .footer .wrap{flex-direction:column; align-items:flex-start}
}

/* language links */
.langs a{min-width:40px; height:34px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-size:14px; font-weight:700; text-decoration:none; color:#55575c}
.langs a:hover{background:var(--soft); color:var(--ink)}
.langs a[aria-current="true"]{background:var(--ink); color:#fff}
.footer .brand{color:#fff}
.footer .brand:hover{color:#fff}
.footer a:hover{color:#fff !important}