/* Casa Òrten — marrom, cinza claro e branco. Fonte: Outfit (geométrica, como o logotipo).
   Apresentação em capítulos de tela cheia: cada serviço ocupa o seu momento da rolagem. */
:root{
  --brown:#44382A;
  --brown-deep:#352B20;
  --stone:#B4ACA9;
  --stone-soft:#D9D4D0;
  --mist:#F0EDEA;
  --white:#FFFFFF;
  --text:#54483B;
  --line:rgba(68,56,42,.16);
  --line-light:rgba(180,172,169,.28);
  --font:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1180px;
  --shot:1240px;
  --gutter:clamp(20px,4vw,48px);
  --radius:28px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-weight:400;font-size:1.0625rem;line-height:1.65;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font);color:var(--brown);font-weight:300;line-height:1.08;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2.5rem,6.6vw,5.4rem);letter-spacing:-.035em}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
h3{font-size:1.4rem;font-weight:400;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:760px}
.center{text-align:center}
.skip{position:absolute;left:-999px;top:8px;background:var(--brown);color:var(--white);padding:10px 16px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--brown);outline-offset:3px}
.on-brown :focus-visible,.dark :focus-visible,.site-footer :focus-visible{outline-color:var(--stone)}

/* ---------- Cabeçalho ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.brand img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px)}
.nav a{text-decoration:none;font-size:.95rem;color:var(--brown);padding:6px 0;opacity:.82}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]{border-bottom:1px solid var(--brown)}
.nav .btn{opacity:1;color:var(--white);padding:8px 20px;font-size:.92rem}
.nav .btn[aria-current="page"]{border-bottom:1px solid var(--brown)}
.menu-toggle{display:none;background:none;border:1px solid var(--line);color:var(--brown);font:inherit;padding:7px 16px;cursor:pointer;border-radius:999px}

/* ---------- Botões (pílulas) ---------- */
.btn{display:inline-block;font-family:var(--font);font-size:1.05rem;font-weight:400;text-decoration:none;padding:13px 28px;border:1px solid var(--brown);background:var(--brown);color:var(--white);border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--brown-deep)}
.btn.ghost{background:transparent;color:var(--brown)}
.btn.ghost:hover{background:var(--brown);color:var(--white)}
.on-brown .btn,.dark .btn{background:var(--stone);border-color:var(--stone);color:var(--brown)}
.on-brown .btn:hover,.dark .btn:hover{background:var(--white);border-color:var(--white)}
.on-brown .btn.ghost,.dark .btn.ghost{background:transparent;color:var(--stone-soft);border-color:var(--stone)}
.on-brown .btn.ghost:hover,.dark .btn.ghost:hover{background:var(--stone);color:var(--brown)}
.on-stone .btn{background:var(--brown);border-color:var(--brown);color:var(--white)}
.on-stone .btn:hover{background:var(--brown-deep)}
.on-stone .btn.ghost{background:transparent;color:var(--brown)}
.on-stone .btn.ghost:hover{background:var(--brown);color:var(--white)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.center .btn-row{justify-content:center}
.link{display:inline-block;text-decoration:none;color:var(--brown);font-size:1.15rem}
.link::after{content:" ›";transition:margin .2s}
.link:hover{text-decoration:underline;text-underline-offset:5px}
.link:hover::after{margin-left:3px}
.dark .link,.on-brown .link{color:var(--stone-soft)}

/* ---------- Capítulo de abertura ---------- */
.on-brown,.dark{background:var(--brown);color:var(--stone-soft)}
.on-brown h1,.on-brown h2,.on-brown h3,.dark h1,.dark h2,.dark h3{color:var(--white)}
.hero{text-align:center;padding-top:clamp(56px,9vw,112px);overflow:hidden}
.hero h1{color:var(--white);max-width:13ch;margin:0 auto}
.hero .lead{font-size:clamp(1.1rem,2vw,1.5rem);font-weight:300;max-width:31em;margin:26px auto 0;color:var(--stone-soft)}
.hero .btn-row{justify-content:center}

/* Imagem grande que cresce ao rolar */
.shot{display:block;margin:clamp(40px,6vw,72px) auto 0;width:min(var(--shot),calc(100% - 2*var(--gutter)));border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;aspect-ratio:16/9;background:var(--mist);transform:scale(var(--s,1));transform-origin:50% 100%;will-change:transform}
.shot img{width:100%;height:100%;object-fit:cover}

/* ---------- Capítulos (um por serviço) ---------- */
.tile{text-align:center;padding:clamp(64px,10vw,128px) 0 0;overflow:hidden;background:var(--white)}
.tile.light{background:var(--mist)}
.tile.dark{background:var(--brown);color:var(--stone-soft)}
.tile h2{max-width:15ch;margin:0 auto}
.tile .sub{font-size:clamp(1.1rem,2vw,1.45rem);font-weight:300;max-width:28em;margin:20px auto 0}
.tile .links{margin-top:22px;display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
.tile.dark .sub{color:var(--stone-soft)}
.tile.split{padding-bottom:clamp(64px,10vw,128px);text-align:left}
.tile.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,104px);align-items:center}
.tile.split h2{margin:0;max-width:12ch}
.tile.split .sub{margin-left:0}
.tile.split .links{justify-content:flex-start}
.tile.split .tall{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;max-height:82vh;justify-self:end;width:100%;background:var(--mist);transform:scale(var(--s,1));transform-origin:50% 60%}
.tile.split .tall img{width:100%;height:100%;object-fit:cover}

/* Grade de quatro serviços (peças de cor) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px}
.cell{min-height:clamp(340px,42vw,520px);border-radius:var(--radius);padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;background:var(--mist);color:var(--text)}
.cell h3{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:300;letter-spacing:-.025em;line-height:1.1;max-width:12ch;color:var(--brown)}
.cell p{font-size:1.15rem;font-weight:300;max-width:22em;margin:14px 0 0}
.cell.c1{background:var(--brown);color:var(--stone-soft)}
.cell.c1 h3{color:var(--white)}
.cell.c1 .link{color:var(--stone-soft)}
.cell.c2{background:var(--stone);color:var(--brown)}
.cell.c4{background:var(--brown-deep);color:var(--stone-soft)}
.cell.c4 h3{color:var(--white)}
.cell.c4 .link{color:var(--stone-soft)}

/* Declaração e dados */
.statement{padding:clamp(72px,10vw,136px) 0;text-align:center}
.statement p.big{font-size:clamp(1.6rem,3.6vw,2.8rem);line-height:1.25;font-weight:300;color:var(--brown);letter-spacing:-.02em;max-width:24em;margin:0 auto}
.facts{margin:clamp(40px,6vw,64px) auto 0;max-width:820px;border-top:1px solid var(--line);text-align:left}
.facts div{display:grid;grid-template-columns:8em 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--brown);font-weight:500}
.facts dd{margin:0}

/* Rolo horizontal de projetos */
.reel-section{padding:clamp(72px,10vw,128px) 0;background:var(--white);overflow:hidden}
.reel-section .head{text-align:center;margin-bottom:clamp(32px,5vw,56px)}
.reel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.reel::-webkit-scrollbar{display:none}
.reel figure{flex:0 0 min(80vw,520px);aspect-ratio:4/5;scroll-snap-align:center;border-radius:24px;overflow:hidden;margin:0;position:relative;background:var(--mist)}
.reel figure:first-child{margin-left:max(0px,calc((100vw - var(--wrap))/2))}
.reel img{width:100%;height:100%;object-fit:cover}
.reel figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 22px 20px;color:var(--white);font-size:1.1rem;background:linear-gradient(to top,rgba(35,28,20,.72),rgba(35,28,20,0))}
.reel-section .foot{text-align:center;margin-top:32px}

/* Arquitetas */
.people{padding:clamp(72px,10vw,128px) 0;background:var(--mist);text-align:center}
.names-big{list-style:none;margin:clamp(36px,5vw,64px) auto 0;padding:0;max-width:980px;border-top:1px solid var(--line)}
.names-big li{padding:clamp(14px,2vw,22px) 0;border-bottom:1px solid var(--line);font-size:clamp(2rem,6.2vw,4.8rem);font-weight:300;letter-spacing:-.035em;line-height:1.1;color:var(--brown)}
.people .sub{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:300;max-width:30em;margin:20px auto 0}
.people .links{margin-top:32px}

/* Regiões */
.region{padding:clamp(72px,10vw,128px) 0;text-align:center;background:var(--white)}
.cities{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 36px;margin:clamp(32px,5vw,56px) auto 0;padding:0;list-style:none;max-width:1000px}
.cities li{font-size:clamp(1.7rem,4vw,3.2rem);font-weight:300;letter-spacing:-.03em;color:var(--brown);line-height:1.3}
.cities li.home{border-bottom:1px solid var(--brown)}
.cities-note{margin:28px auto 0;max-width:560px}

/* FAQ */
.faq-section{padding:clamp(72px,10vw,128px) 0;background:var(--mist)}
.faq-section h2{text-align:center;margin-bottom:clamp(32px,5vw,56px)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-size:1.2rem;font-weight:400;color:var(--brown);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:1.5px solid var(--brown);border-bottom:1.5px solid var(--brown);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .answer{padding:0 0 24px;max-width:46em}
.faq-section .foot{text-align:center;margin-top:32px}

/* Chamada final */
.on-stone{background:var(--stone);color:var(--brown)}
.on-stone h2{color:var(--brown)}
.cta{padding:clamp(72px,10vw,128px) 0;text-align:center}
.cta h2{max-width:14ch;margin:0 auto}
.cta p{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:300;max-width:28em;margin:20px auto 0}

/* ---------- Páginas internas ---------- */
.page-hero{padding:clamp(56px,8vw,104px) 0 clamp(48px,7vw,88px);text-align:center}
.page-hero h1{max-width:14ch;margin:0 auto}
.page-hero p{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:300;max-width:30em;margin:24px auto 0;color:var(--stone-soft)}
.crumbs{font-size:.92rem;margin-bottom:28px;color:var(--stone)}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--line-light)}
section.block{padding:clamp(56px,8vw,104px) 0}
.mist{background:var(--mist)}
.service-block{display:grid;grid-template-columns:1fr;gap:clamp(24px,5vw,80px);padding:clamp(40px,6vw,72px) 0;border-bottom:1px solid var(--line);align-items:center}
.service-block:first-of-type{border-top:1px solid var(--line)}
.service-block.has-img{grid-template-columns:1fr 1fr}
.service-block.has-img.flip .sb-img{order:-1}
.service-block h2{font-size:clamp(1.8rem,3.4vw,2.8rem);margin-bottom:18px}
.service-block ul{margin:0 0 1em;padding-left:1.1em}
.service-block li{margin-bottom:.35em}
.sb-img{border-radius:var(--radius);overflow:hidden;background:var(--mist);aspect-ratio:4/3}
.sb-img img{width:100%;height:100%;object-fit:cover}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:start}
.checklist{padding-left:1.1em}
.checklist li{margin-bottom:.5em}
.prose h2{margin:56px 0 18px;font-size:clamp(1.6rem,2.8vw,2.2rem)}
.prose h2:first-child{margin-top:0}

/* Galeria de obras */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(24px,4vw,40px)}
.chip{border:1px solid var(--line);background:none;border-radius:999px;padding:8px 20px;font:inherit;font-size:.98rem;color:var(--brown);cursor:pointer;transition:background .2s,color .2s}
.chip:hover{background:var(--mist)}
.chip[aria-pressed="true"]{background:var(--brown);color:var(--white);border-color:var(--brown)}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px}
.work{display:block;width:100%;margin:0;padding:0;border:0;background:none;text-align:left;cursor:zoom-in;font:inherit;color:inherit}
.work[hidden]{display:none}
.work .ph{display:block;border-radius:22px;overflow:hidden;background:var(--mist);aspect-ratio:4/5}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.work:hover img{transform:scale(1.035)}
.work .info{display:block;padding:12px 4px 0}
.work strong{display:block;color:var(--brown);font-weight:400;font-size:1.1rem}
.work .meta{display:block;font-size:.95rem}
.works-empty{padding:40px 0}
dialog.lightbox{border:0;padding:0;background:transparent;width:min(1200px,94vw);max-width:94vw;max-height:94vh;overflow:visible;color:var(--white)}
dialog.lightbox::backdrop{background:rgba(30,24,17,.92)}
.lb-body{display:flex;align-items:center;justify-content:center;gap:12px}
.lb-body img{max-height:76vh;max-width:min(1000px,calc(94vw - 120px));width:auto;border-radius:16px}
.lb-nav{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:var(--white);font-size:1.6rem;line-height:1;cursor:pointer}
.lb-nav:hover{background:rgba(255,255,255,.25)}
.lb-nav[hidden]{display:none}
.lb-cap{text-align:center;margin:16px 0 0;color:var(--stone-soft)}
dialog.lightbox form{position:absolute;top:-48px;right:0}
.lb-close{background:var(--white);color:var(--brown);border:0;padding:8px 18px;font:inherit;cursor:pointer;border-radius:999px}

/* ---------- Rodapé ---------- */
.site-footer{background:var(--brown);color:var(--stone-soft);padding:64px 0 36px}
.site-footer .grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.site-footer img{height:40px;width:auto;margin-bottom:20px}
.site-footer h2{font-size:1rem;font-weight:500;color:var(--white);letter-spacing:0;margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.site-footer .legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-light);font-size:.92rem;color:var(--stone)}
.site-footer p{margin:0 0 .6em}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .menu-toggle{display:block}
  .nav{position:absolute;left:0;right:0;top:64px;background:var(--white);flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gutter) 24px;border-bottom:1px solid var(--line);display:none}
  .nav.open{display:flex}
  .nav a{width:100%;padding:14px 0;border-bottom:1px solid var(--line);opacity:1}
  .nav .btn{margin-top:16px;width:auto;text-align:center;padding:12px 24px}
  .tile.split .wrap,.two-col,.service-block.has-img{grid-template-columns:1fr}
  .tile.split{text-align:center}
  .tile.split h2{margin:0 auto}
  .tile.split .sub{margin-left:auto}
  .tile.split .links{justify-content:center}
  .tile.split .tall{justify-self:center;max-width:460px}
  .service-block.has-img.flip .sb-img{order:0}
  .duo{grid-template-columns:1fr}
  .shot{aspect-ratio:4/3}
  .works{grid-template-columns:repeat(2,1fr)}
  .site-footer .grid{grid-template-columns:1fr 1fr}
  .site-footer .grid>div:first-child{grid-column:1/-1}
}
@media (max-width:520px){
  .works{grid-template-columns:1fr}
  .site-footer .grid{grid-template-columns:1fr}
  .facts div{grid-template-columns:1fr;gap:2px}
  .lb-nav{width:38px;height:38px}
  .lb-body img{max-width:calc(94vw - 100px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .shot,.tile.split .tall{transform:none!important}
  .work img{transition:none}
}