@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivo-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/archivo-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/archivo-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/figtree-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/figtree-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/figtree-latin-700-normal.woff2) format('woff2')}
:root{
  --orange:#EF7D1A; --orange-ink:#B35A0B; --orange-tint:#FDEBD9;
  --ink:#1C1B19; --ink-2:#2B2926; --muted:#5A564F; --muted-dark:#CFC8BC;
  --ground:#F7F4EF; --card:#FFFFFF; --line:#E6E0D6; --field:#FBFAF7; --field-line:#CFC8BC;
  --wa:#128C4A;
  --display:'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --body:'Figtree', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --wrap:1200px; --gutter:20px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; scroll-padding-top:96px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0; -webkit-text-size-adjust:100%; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6}
img,video{max-width:100%; display:block}
a{color:var(--orange-ink)} a:hover{color:#8A4408}
h1,h2,h3{font-family:var(--display); text-wrap:balance; margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--orange); outline-offset:2px}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.eyebrow{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-ink)}
.on-dark .eyebrow{color:var(--orange)}
.h2{font-weight:800; font-size:clamp(30px,4.2vw,48px); line-height:1.08; letter-spacing:-.02em}
.btn{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px; border-radius:8px; font-weight:700; font-size:16px; text-decoration:none; border:0; cursor:pointer; font-family:inherit}
.btn-primary{background:var(--orange); color:var(--ink)} .btn-primary:hover{background:#F48E33; color:var(--ink)}
.btn-ghost{border:1.5px solid var(--ink); color:var(--ink); background:transparent} .btn-ghost:hover{background:var(--ink); color:#fff}
.ico{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* top bar + header */
.topbar{background:var(--ink); color:#E9E4DB; font-size:14px}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; min-height:40px; gap:16px}
.topbar .mail{display:flex; gap:8px; align-items:center; color:#E9E4DB; text-decoration:none; overflow-wrap:anywhere}
.lang{display:flex; gap:6px; align-items:center; margin-left:auto}
.lang button{background:none; border:0; color:#E9E4DB; font:inherit; cursor:pointer; padding:6px 4px}
.lang button[aria-pressed="true"]{color:#fff; font-weight:700; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:4px}
.lang span{color:#8C857A}
header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:#fff; border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; min-height:80px; gap:20px}
.brand img{height:48px; width:auto}
nav.main{display:flex; gap:28px; font-weight:600}
nav.main a{color:var(--ink); text-decoration:none} nav.main a:hover{color:var(--orange-ink)}
.head-cta{display:flex; gap:10px; align-items:center}
.menu-btn{display:none; background:none; border:1.5px solid var(--ink); border-radius:8px; width:48px; height:48px; align-items:center; justify-content:center; cursor:pointer; color:var(--ink)}
nav.main a, .head-cta .btn{white-space:nowrap}
@media (max-width: 1240px){ .head-cta .btn-ghost{display:none} }
@media (max-width: 1040px){
  nav.main{display:none; position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:8px var(--gutter) 16px}
  nav.main.open{display:flex}
  nav.main a{padding:12px 0; border-bottom:1px solid var(--line)}
  .menu-btn{display:inline-flex}
  .head-cta .btn-ghost{display:none}
}
@media (max-width: 560px){ .topbar .mail span{display:none} .head-cta .btn-primary{display:none} .brand img{height:40px} }

/* hero */
.hero{background:var(--ink); color:#fff; padding-block:72px}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:64px; align-items:center}
.hero .kicker{display:flex; gap:10px; align-items:center; font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange)}
.hero .kicker::before{content:""; width:32px; height:3px; background:var(--orange)}
.hero h1{font-weight:800; font-size:clamp(40px,6vw,68px); line-height:1.02; letter-spacing:-.02em; margin-top:22px}
.hero .lead{font-size:clamp(17px,1.6vw,20px); line-height:1.55; color:#D6D0C6; max-width:34em; margin-top:22px}
.hero .actions{margin-top:28px}
.checks{display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:28px; font-size:15px; color:#E9E4DB; padding:0; list-style:none}
.checks li{display:flex; gap:8px; align-items:center}
.checks .ico{stroke:var(--orange); stroke-width:2.4; width:18px; height:18px}
.hero-media{position:relative; aspect-ratio:1/1; max-width:100%}
.hero-media .block{position:absolute; right:0; top:0; width:92%; height:92%; background:var(--orange); border-radius:6px}
.hero-media video{position:absolute; left:0; bottom:0; width:92%; height:92%; object-fit:cover; border-radius:6px; background:var(--ink-2)}
.hero-media .note{position:absolute; left:-20px; bottom:28px; background:#fff; color:var(--ink); border-radius:10px; padding:14px 18px; display:flex; gap:12px; align-items:center; box-shadow:0 12px 32px rgba(0,0,0,.28)}
.note .badge{width:40px; height:40px; border-radius:8px; background:var(--orange-tint); color:var(--orange-ink); display:flex; align-items:center; justify-content:center}
.note strong{display:block; font-size:15px} .note small{font-size:13px; color:var(--muted)}
@media (max-width: 860px){
  .hero{padding-block:48px}
  .hero .wrap{grid-template-columns:1fr; gap:40px}
  .hero-media{max-width:520px}
  .hero-media .note{left:12px}
}

/* sections */
section.block-s{padding-block:96px}
.sec-head{display:flex; flex-direction:column; gap:14px; margin-bottom:48px; max-width:720px}
@media (max-width: 700px){ section.block-s{padding-block:64px} .sec-head{margin-bottom:32px} }

.services{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.service{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:32px; display:flex; flex-direction:column; gap:16px}
.service .ib{width:56px; height:56px; border-radius:10px; background:var(--orange-tint); color:var(--orange-ink); display:flex; align-items:center; justify-content:center}
.service .ib .ico{width:28px; height:28px}
.service h3{font-weight:700; font-size:23px}
.service p{color:var(--muted)}
@media (max-width: 960px){ .services{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 620px){ .services{grid-template-columns:1fr} }

.on-dark{background:var(--ink); color:#fff}
.why{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px}
.why div{border-top:3px solid var(--orange); padding-top:26px; display:flex; flex-direction:column; gap:14px}
.why .ico{width:32px; height:32px; stroke:var(--orange)}
.why h3{font-weight:700; font-size:22px}
.why p{color:var(--muted-dark)}
@media (max-width: 820px){ .why{grid-template-columns:1fr; gap:32px} }

/* works */
.works{display:flex; flex-direction:column; gap:40px}
.work{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.work.flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.work.flip .w-media{order:2}
.w-media{position:relative; background:var(--ink); min-height:420px}
.w-media > img, .w-media > video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.w-media.pair{display:grid; grid-template-columns:1fr 1fr; gap:4px}
.w-media.pair figure{position:relative; margin:0; min-height:420px}
.w-media.pair video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.tag{position:absolute; left:16px; top:16px; z-index:2; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:4px; background:var(--orange); color:var(--ink); display:inline-flex; gap:8px; align-items:center}
.tag.dark{background:var(--ink); color:#fff}
.tag .dot{width:8px; height:8px; border-radius:4px; background:var(--orange)}
.w-body{padding:44px; display:flex; flex-direction:column; gap:18px}
.w-body h3{font-weight:800; font-size:clamp(26px,2.6vw,34px); line-height:1.1; letter-spacing:-.01em}
.where{display:flex; gap:8px; align-items:center; font-weight:600; color:var(--muted); font-size:15px}
.where .ico{width:18px; height:18px}
.w-body > p{color:var(--muted); font-size:17px}
.done{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.done li{display:flex; gap:10px; align-items:flex-start}
.done .ico{stroke:var(--orange-ink); stroke-width:2.4; width:18px; height:18px; margin-top:4px}
.thumbs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding-top:6px}
.thumbs.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.thumbs figure{margin:0; display:flex; flex-direction:column; gap:6px}
.thumbs button{padding:0; border:0; background:none; cursor:zoom-in; border-radius:8px; overflow:hidden; display:block}
.thumbs img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .25s}
.thumbs button:hover img{transform:scale(1.04)}
.thumbs figcaption{font-size:13px; color:var(--muted)}
.work.wide{grid-template-columns:1fr}
.work.wide .w-media{min-height:0; aspect-ratio:16/7}
.work.wide .w-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; padding:44px}
.work.wide .w-split .w-body{padding:0}
.work.wide .thumbs video{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px}
.single-thumb{max-width:240px}
@media (max-width: 900px){
  .work, .work.flip{grid-template-columns:1fr}
  .work.flip .w-media{order:0}
  .w-media{min-height:0; aspect-ratio:4/3}
  .w-media.pair{aspect-ratio:auto}
  .w-media.pair figure{min-height:0; aspect-ratio:9/14}
  .w-body{padding:28px}
  .work.wide .w-media{aspect-ratio:16/9}
  .work.wide .w-split{grid-template-columns:1fr; padding:28px; gap:28px}
}
@media (max-width: 520px){ .thumbs{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* process */
.process{background:var(--card); border-block:1px solid var(--line)}
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; list-style:none; padding:0; margin:0}
.steps li{display:flex; flex-direction:column; gap:10px}
.steps .n{font-family:var(--display); font-weight:900; font-size:52px; line-height:1; color:var(--orange); font-variant-numeric:tabular-nums}
.steps h3{font-weight:700; font-size:20px}
.steps p{color:var(--muted)}
@media (max-width: 860px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 480px){ .steps{grid-template-columns:1fr} }

/* contact */
.contact{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:start}
.contact-info{display:flex; flex-direction:column; gap:24px}
.contact-info > p{color:var(--muted); font-size:18px}
.cards{display:flex; flex-direction:column; gap:16px}
.cline{display:flex; gap:14px; align-items:center}
.cline .ib{width:48px; height:48px; border-radius:10px; background:var(--orange-tint); color:var(--orange-ink); display:flex; align-items:center; justify-content:center; flex:none}
.cline small{display:block; color:var(--muted); font-size:14px}
.cline b{font-size:17px; overflow-wrap:anywhere; user-select:all}
.copy{margin-left:auto; background:none; border:1px solid var(--line); border-radius:6px; padding:6px 10px; font:inherit; font-size:13px; cursor:pointer; color:var(--muted)}
form.quote{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:40px; display:flex; flex-direction:column; gap:20px}
.row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.field{display:flex; flex-direction:column; gap:8px}
.field label{font-weight:600; font-size:15px}
.field input,.field select,.field textarea{min-height:52px; padding:12px 16px; border:1px solid var(--field-line); border-radius:8px; font:inherit; background:var(--field); color:var(--ink)}
.field textarea{min-height:140px; resize:vertical}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"]{border-color:#B42318; background:#FFF6F5}
.err{color:#B42318; font-size:13px; min-height:0}
.files{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:14px 16px; border:1.5px dashed var(--field-line); border-radius:8px; color:var(--muted); font-size:15px}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--muted)}
.consent input{width:18px; height:18px; margin:2px 0 0}
.sent.fail{background:#FFF6F5; border-color:#F1B5AE; color:#912018}
.sent{background:#EAF6EE; border:1px solid #9CCFAE; color:#1D5B34; border-radius:10px; padding:16px 18px; font-size:15px}
@media (max-width: 900px){ .contact{grid-template-columns:1fr; gap:40px} form.quote{padding:24px} .row2{grid-template-columns:1fr} }

/* footer */
footer.site{background:var(--ink); color:var(--muted-dark); padding-block:64px 40px}
.foot{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.3fr); gap:40px}
.foot .mailline{overflow-wrap:anywhere}
@media (min-width: 861px){ .foot .mailline{white-space:nowrap; overflow-wrap:normal} }
.foot img{height:56px; width:auto}
.foot h4{font-family:var(--display); color:#fff; font-size:16px; margin:0 0 12px}
.foot ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:15px}
.foot a,.legal a{color:var(--muted-dark); text-decoration:none} .foot a:hover,.legal a:hover{color:#fff}
.legal{border-top:1px solid #3A3733; margin-top:48px; padding-top:24px; padding-right:76px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:14px; color:#A39C90}
.legal div{display:flex; flex-wrap:wrap; gap:20px}
.legal button{background:none; border:0; font:inherit; cursor:pointer; padding:0}
@media (max-width: 860px){ .foot{grid-template-columns:1fr 1fr} .foot > div:first-child{grid-column:1/-1} }
@media (max-width: 480px){ .foot{grid-template-columns:1fr} }

/* whatsapp + lightbox + toast */
.wa{position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:40; width:60px; height:60px; border-radius:30px; background:var(--wa); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.25)}
.wa:hover{color:#fff; transform:translateY(-2px)}
.wa .ico{width:28px; height:28px}
.lb{position:fixed; inset:0; z-index:50; background:rgba(20,19,17,.92); display:flex; align-items:center; justify-content:center; padding:24px}
.lb img{max-height:86vh; width:auto; border-radius:8px}
.lb button{position:absolute; top:calc(16px + env(safe-area-inset-top,0px)); right:16px; width:48px; height:48px; border-radius:24px; border:0; background:#fff; color:var(--ink); font-size:24px; cursor:pointer}
.lb p{position:absolute; bottom:calc(20px + env(safe-area-inset-bottom,0px)); left:0; right:0; text-align:center; color:#E9E4DB; font-size:15px}
.toast{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:60; background:var(--ink); color:#fff; padding:12px 18px; border-radius:8px; font-size:14px; max-width:calc(100% - 40px)}

/* ---------- works: cards, listing and detail ---------- */
.sec-row{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:40px}
.sec-row .sec-head{margin-bottom:0}
.cards-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.wcard{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; color:var(--ink); text-decoration:none; transition:transform .2s, box-shadow .2s}
.wcard:hover{color:var(--ink); transform:translateY(-3px); box-shadow:0 14px 30px rgba(28,27,25,.12)}
.wcard[hidden]{display:none}
.wimg{position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--ink)}
.wimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.wimg .tag{z-index:2}
.wbody{display:flex; flex-direction:column; gap:8px; padding:20px 22px 22px; flex:1}
.wcat{font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-ink)}
.wcard h3{font-weight:800; font-size:21px; line-height:1.2}
.wmore{margin-top:auto; padding-top:8px; display:inline-flex; gap:8px; align-items:center; font-weight:700; color:var(--orange-ink)}
.wmore .ico{width:18px; height:18px}
.wcard:hover .wmore .ico{transform:translateX(3px)}
.tag.inline{position:static; margin-left:0; vertical-align:middle; width:fit-content; align-self:flex-start}
.cards-grid.single{grid-template-columns:1fr}
.cards-grid.single .wcard{flex-direction:row}
.cards-grid.single .wimg{flex:0 0 58%; aspect-ratio:16/10}
.cards-grid.single .wbody{padding:36px 40px; justify-content:center; gap:12px}
.cards-grid.single .wcard h3{font-size:clamp(24px,2.6vw,32px)}
.cards-grid.single .wmore{margin-top:12px}
@media (max-width: 760px){ .cards-grid.single .wcard{flex-direction:column} .cards-grid.single .wimg{flex:none; aspect-ratio:4/3} .cards-grid.single .wbody{padding:22px} }
@media (max-width: 960px){ .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 620px){ .cards-grid{grid-template-columns:1fr} }

.page-head{background:var(--card); border-bottom:1px solid var(--line); padding-block:48px 40px}
.page-head .wrap{display:flex; flex-direction:column; gap:12px}
.lead-muted{color:var(--muted); font-size:18px}
.crumb{display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--muted); margin-bottom:8px}
.crumb a{color:var(--muted)} .crumb a:hover{color:var(--orange-ink)}
section.block-s.tight{padding-block:48px 96px}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px}
.chip{min-height:44px; padding:0 18px; border-radius:22px; border:1.5px solid var(--line); background:var(--card); font:inherit; font-weight:600; color:var(--ink); cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}

.detail{padding-top:40px}
.d-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; margin-top:12px}
.d-top.wide{grid-template-columns:1fr; gap:32px}
.d-text{display:flex; flex-direction:column; gap:14px}
.d-text .h2{margin-top:2px}
.d-desc{color:var(--muted); font-size:18px}
.h3{font-family:var(--display); font-weight:800; font-size:24px; line-height:1.2}
.d-text .h3{font-size:19px; margin-top:10px}
.d-media{position:relative; border-radius:14px; overflow:hidden; background:var(--ink); aspect-ratio:4/5}
.d-media img,.d-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.d-media.wide{aspect-ratio:16/7}
.d-media.pair{display:grid; grid-template-columns:1fr 1fr; gap:4px; aspect-ratio:auto}
.d-media.pair figure{position:relative; margin:0; aspect-ratio:9/15}
.d-media.pair img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.gal-title{margin:56px 0 20px}
.gallery{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.gallery figure{margin:0; display:flex; flex-direction:column; gap:8px}
.gallery button{padding:0; border:0; background:none; cursor:zoom-in; border-radius:10px; overflow:hidden; display:block}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .25s}
.gallery button:hover img{transform:scale(1.04)}
.gallery video{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; background:var(--ink)}
.gallery figcaption{font-size:14px; color:var(--muted)}
.cta-box{margin-top:64px; border-radius:16px; padding:36px 40px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.cta-box p{color:var(--muted-dark); margin-top:6px}
.more{background:var(--card); border-top:1px solid var(--line)}
.more .sec-row{margin-bottom:28px; align-items:center}
@media (max-width: 900px){
  .d-top{grid-template-columns:1fr; gap:28px}
  .d-media{aspect-ratio:4/3}
  .d-media.wide{aspect-ratio:16/9}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-box{padding:28px}
}
@media (max-width: 480px){ .gallery{grid-template-columns:1fr} .d-media.pair figure{aspect-ratio:9/16} }