/*
Theme Name: SATO Arquitetura
Version: 1.1.1
Requires at least: 5.2
*/
:root{color-scheme:light;--ink:#181816;--paper:#ffffff;--red:#fc2d2d;--muted:#57564f;--line:#d9d5cd}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 "Instrument Sans",Arial,sans-serif}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:5px}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid #bb2020;outline-offset:4px}
img{display:block;width:100%;height:auto}
.wrap{width:min(1350px,calc(100% - 96px));margin-inline:auto}
.top,.foot{display:flex;align-items:center;justify-content:space-between;gap:16px}
.top{border-bottom:1px solid var(--line);min-height:104px}
.brand img{width:100px;height:100px}
nav{display:flex;gap:clamp(18px,4vw,52px)}
nav a,.foot a{font-weight:600}
.hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:clamp(24px,5vw,84px);align-items:center;padding-block:clamp(36px,6vw,88px)}
.label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
h1,h2,h3,p,figure{margin:0}
h1,h2{font-weight:500;letter-spacing:-.065em;line-height:.99}
h1{font-size:clamp(44px,6.05vw,106px);margin:18px 0 32px}
h1 span,h2 span{color:var(--red)}
.cta{display:inline-flex;gap:26px;align-items:center;min-height:48px;background:var(--ink);color:white;padding:0 17px;font-weight:600}
.hero img{aspect-ratio:1.42;object-fit:cover}
figcaption{margin-top:10px;font-size:.8rem;color:var(--muted)}
.portfolio{border-top:1px solid var(--line);padding-block:clamp(36px,6vw,80px)}
.section-head{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;align-items:end;margin-bottom:28px}
h2{font-size:clamp(44px,6vw,88px)}
.filters{display:flex;flex-wrap:wrap;gap:6px}
[hidden]{display:none!important}
.filters button{padding:8px 12px;min-height:44px;border:1px solid var(--line);background:transparent;color:var(--ink)}
.filters button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 22px}
article{border-bottom:1px solid var(--line)}
.photo{display:block;position:relative}
.photo img{aspect-ratio:4/3;object-fit:cover;object-position:center 43%}
.photo span{position:absolute;right:10px;bottom:10px;background:var(--paper);padding:8px 12px}
.caption{padding:14px 0 22px}
.caption h3{font-size:clamp(22px,2.5vw,35px);line-height:1.15;letter-spacing:-.035em;margin-block:5px}
.caption p{color:var(--muted)}
.caption .scope{margin-top:7px;color:var(--ink)}
.contact{background:var(--ink);color:var(--paper);padding-block:clamp(38px,7vw,94px)}
.contact-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,76px);align-items:start}
.contact h2{margin-top:12px}
address{display:grid;gap:10px;font-style:normal}
address a{width:fit-content;text-decoration:underline;text-underline-offset:4px}
.foot{padding-block:22px;font-size:.85rem}
dialog{border:0;padding:0;background:var(--ink);color:white;max-width:94vw;max-height:92dvh}
dialog::backdrop{background:#000d}
dialog img{width:auto;max-width:94vw;max-height:88dvh;object-fit:contain}
dialog button{position:absolute;right:8px;top:8px;border:0;background:var(--ink);color:white;width:44px;height:44px;font-size:28px}
@media(max-width:700px){.wrap{width:calc(100% - 36px)}.hero,.contact-inner,.grid{grid-template-columns:1fr}.hero img{aspect-ratio:auto}.top{min-height:84px}.brand img{width:80px;height:80px}.grid{gap:24px}.photo img{aspect-ratio:4/3}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.office{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;border-top:1px solid var(--line);padding-block:clamp(38px,7vw,94px)}
.office h2{margin-top:12px}
.office div>p+p{margin-top:16px}
@media(max-width:700px){.office{grid-template-columns:1fr;gap:22px}nav{gap:12px;font-size:.87rem}}
.top{border-bottom:3px solid var(--red)}
.brand img{width:175px;height:175px}
nav{align-items:center;gap:clamp(12px,2.4vw,32px)}
.intro .label,.office .label{color:#a81b1b}
.contact h2{max-width:9ch}
address .whatsapp{font-size:clamp(1rem,2vw,1.35rem);background:transparent;color:var(--paper);border:1px solid #a8a49d;padding:10px 14px;font-weight:700;text-decoration:none}
address .whatsapp:hover{text-decoration:underline}
.contact-details address{margin-top:24px}
.contact-form{display:grid;gap:14px}
.contact-form h3{font-size:1.45rem}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form label{display:grid;gap:5px;font-weight:600}
.contact-form input,.contact-form textarea{width:100%;padding:10px 12px;border:1px solid #89847b;background:var(--paper);color:var(--ink);font:inherit}
.contact-form button{justify-self:start;background:var(--paper);color:var(--ink);border:0;padding:10px 14px;font-weight:700}
@media(max-width:700px){.brand img{width:118px;height:118px}.top nav{justify-content:flex-end;flex-wrap:wrap;gap:5px 12px}.fields{grid-template-columns:1fr}}

.intro,.office-title{position:relative;isolation:isolate}
.blueprint{position:absolute;z-index:-1;pointer-events:none;inset:-22px 0 -16px;overflow:hidden;color:#18181619}
.blueprint i{position:absolute;display:block}
.blueprint i:nth-child(1){inset:10% 5% 7% 20%;background:linear-gradient(to right,currentColor 1px,transparent 1px),linear-gradient(to bottom,currentColor 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(125deg,transparent 22%,black)}
.blueprint i:nth-child(2){inset:16% 10% 11% 43%;border:2px solid;border-left:0}
.blueprint i:nth-child(3){width:37%;height:29%;right:10%;top:16%;border-left:2px solid;border-bottom:2px solid}
.blueprint i:nth-child(4){width:28%;aspect-ratio:1;right:10%;bottom:11%;border:2px solid #fc2d2d36;border-top-left-radius:100%;border-right:0;border-bottom:0;background:#fc2d2d08}
.office-title .blueprint{inset:-22px 0 -25px 22%}

address .whatsapp::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:9px;vertical-align:middle;background:var(--red)}
address .whatsapp:hover{background:#ffffff12}
.form-note{font-size:.85rem;color:#d1cec8}

.contact{
  background:#fff;
  color:var(--ink);
  border-top:2px solid #cf292e;
}
.contact .label,.contact h2{color:var(--ink)}
address .whatsapp{background:#fff;color:var(--ink);border-color:#bd3038}
address .whatsapp:hover{background:#ffe4e2}
.contact-form input,.contact-form textarea{background:#fff;border-color:#ae8385}
.contact-form button{background:#a81b25;color:#fff}
.contact-form button:hover{background:#861520}
.form-note{color:var(--muted)}

@media(min-width:701px){
  .hero,.portfolio{max-width:940px}
  .hero figure{width:min(100%,480px);justify-self:end}
}

@media(max-width:700px){
  .hero figure,.portfolio .grid{width:90%;margin-inline:auto}
}

.intro h1{font-size:clamp(34px,4.6vw,59px);letter-spacing:-.055em}
@media(max-width:700px){
  .intro h1{font-size:clamp(34px,8.8vw,56px)}
}

.portfolio .grid{max-width:782px;margin-inline:auto}
.contact h2{font-size:clamp(38px,4.8vw,70px)}
.contact address,.contact-form{font-size:.9375rem}
.contact-form h3{font-size:1.25rem}
.contact-form input,.contact-form textarea{font-size:1rem}
address .whatsapp{font-size:clamp(.9375rem,1.5vw,1.125rem)}
@media(max-width:700px){
  .portfolio .grid{width:84%;max-width:380px}
}

.hero .hero-art img{aspect-ratio:auto;object-fit:contain}