/* ------------------------------------------------------------------
   Croa Incorporadora — sistema visual.
   Tons terrosos, Fraunces + Work Sans, grão de papel, bordas de 1px.
   Uma única inversão de contraste: a seção de portfólio.
------------------------------------------------------------------ */

:root{
  /* Linen e bark vêm do manual da marca. Sand e stone são derivados
     delas, no mesmo eixo quente; o moss é a exceção deliberada — um
     oliva que puxa a paleta para o verde da mata. */
  --croa-linen:#f3efe4;   /* marca */
  --croa-bark:#34261f;    /* marca */

  --croa-sand:#efe7da;    /* superfície das seções alternadas */
  --croa-stone:#c7bda8;   /* bordas e divisores */
  --croa-moss:#6b6a4c;    /* rótulos e texto de apoio */

  /* acento, nas três versões que o contraste exige */
  --croa-clay:#b56a4a;
  --croa-clay-dark:#8f4f34;   /* sobre fundo claro */
  --croa-clay-light:#d9906b;  /* sobre fundo escuro */

  --line:rgba(199,189,168,.55);
  --line-dark:rgba(255,255,255,.1);

  --display:"Fraunces","Iowan Old Style","Times New Roman",Georgia,serif;
  --sans:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --r:16px;
  --r-lg:24px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --max:80rem;
  --ease:cubic-bezier(.22,1,.36,1);

  /* Escala tipográfica — quatro degraus, e nada fora deles. Antes cada
     componente escolhia o seu tamanho (12, 13, 16, 17px, além de clamps
     quase iguais entre si); o resultado era texto pequeno demais em
     lugares diferentes por motivo nenhum.
       eyebrow  14px — rótulos em caixa-alta, botões, links de seta
       meta     15px — legendas, notas, rodapé, linhas de apoio
       body     18px — todo o texto corrido
       body-lg       — aberturas de seção e de página, fluido */
  --fs-eyebrow:.875rem;
  --fs-meta:.9375rem;
  --fs-body:1.125rem;
  --fs-body-lg:clamp(1.1875rem,1.6vw,1.3125rem);

  /* Escala de display (Fraunces). Seis degraus para os títulos, pelo
     mesmo motivo: eram 16 clamps escritos à mão, vários separados por
     2px — diferença que ninguém vê, mas que faz cada seção parecer
     calibrada sozinha. Aqui a hierarquia é explícita e os saltos entre
     degraus são grandes o bastante para serem lidos como hierarquia.
       d1  hero da home
       d2  hero das páginas internas
       d3  título de seção, menu mobile
       d4  frase de abertura, citação, números
       d5  título de item em lista (pilar, etapa, empreendimento)
       d6  título menor (pessoa) e links em display */
  --fs-d1:clamp(2.75rem,7.4vw,6rem);
  --fs-d2:clamp(2.25rem,5.6vw,4.5rem);
  --fs-d3:clamp(2rem,3.6vw,3rem);
  --fs-d4:clamp(1.75rem,2.8vw,2.5rem);
  --fs-d5:clamp(1.375rem,2vw,1.75rem);
  --fs-d6:clamp(1.25rem,1.6vw,1.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* O header é fixo: sem esta folga a âncora encosta o título da seção
     atrás dele. Acompanha a altura do .header-inner. */
  scroll-padding-top:76px;
}

body{
  margin:0;
  background:var(--croa-linen);
  color:var(--croa-bark);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--croa-clay);color:var(--croa-linen)}

.shell{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

.skip{position:absolute;left:-9999px;top:0;background:var(--croa-bark);color:var(--croa-linen);padding:12px 20px;border-radius:999px;z-index:200}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:1px solid var(--croa-clay-dark);outline-offset:4px;border-radius:2px}

section{padding-block:clamp(4rem,8vw,8rem)}

/* ---------------- grão de papel ----------------
   Overlay fixo sobre toda a página. Sutil e permanente. */

body::after{
  content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* ---------------- transição entre páginas ---------------- */

@view-transition{navigation:auto}

::view-transition-old(root){animation:vt-out .26s var(--ease) both}
::view-transition-new(root){animation:vt-in .5s var(--ease) both}

@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

.site-header{view-transition-name:site-header}
.site-footer{view-transition-name:site-footer}

.no-vt body{animation:page-in .45s var(--ease) both}
.no-vt body.is-leaving{
  opacity:0;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
@keyframes page-in{from{opacity:0;transform:translateY(12px)}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .no-vt body,.no-vt body.is-leaving{animation:none;transition:none;opacity:1;transform:none}
}

/* ---------------- tipografia ---------------- */

.font-display{font-family:var(--display)}

.display{
  font-family:var(--display);
  font-size:var(--fs-d1);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.02em;
  max-width:64rem;
  /* Distribui as palavras entre as linhas em vez de encher a primeira:
     sem isto a última linha fica com uma palavra órfã. */
  text-wrap:balance;
}
.display.sm{font-size:var(--fs-d2);line-height:1.02}
.display em{font-style:italic;font-weight:400;color:var(--croa-clay-dark)}

.h2{
  font-family:var(--display);
  font-size:var(--fs-d3);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.015em;
}
.h2.tight{max-width:18ch}

/* Eyebrow de seção — mesmo degrau do rótulo de campo (`dt`, cargo,
   índice), do botão e do link de seta: todos em --fs-eyebrow. Já foram
   11px e 12px, mas caixa-alta com tracking aperta, e legibilidade vence
   uma hierarquia que ninguém percebia. */
.label{
  font-size:var(--fs-eyebrow);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--croa-moss);
  font-weight:400;
}

.lede{
  color:rgba(52,38,31,.75);
  font-size:var(--fs-body-lg);
  line-height:1.75;
  max-width:36rem;
}

/* ---------------- botões e links ---------------- */

.btn{
  display:inline-flex;align-items:center;gap:.625rem;
  padding:.875rem 1.75rem;border-radius:999px;border:1px solid transparent;
  background:var(--croa-clay-dark);color:var(--croa-linen);
  font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;font-weight:400;
  cursor:pointer;
  transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn:hover{transform:translateY(-2px);background:var(--croa-bark)}

.btn.ghost{background:transparent;color:var(--croa-bark);border-color:var(--line)}
.btn.ghost:hover{background:var(--croa-bark);color:var(--croa-linen);border-color:var(--croa-bark)}

.btn.light{background:var(--croa-linen);color:var(--croa-bark)}
.btn.light:hover{background:var(--croa-sand)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.625rem;
  font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  color:var(--croa-clay-dark);
  border-bottom:1px solid var(--line);padding-bottom:.5rem;
  transition:border-color .45s var(--ease),color .45s var(--ease);
}
.link-arrow.sm{border-bottom:0;padding-bottom:0}
.link-arrow:hover{border-color:var(--croa-clay-dark)}
.link-arrow svg,.link-big svg{
  width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--ease);
}
.link-arrow:hover svg,.link-big:hover svg{transform:translateX(5px)}

.link-big{
  display:inline-flex;align-items:center;gap:.875rem;
  font-family:var(--display);
  font-size:var(--fs-d4);font-weight:300;letter-spacing:-.015em;
  transition:color .4s var(--ease);
}
.link-big:hover{color:var(--croa-clay-dark)}

/* ---------------- header ---------------- */

.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
.site-header.stuck{
  background:rgba(247,242,234,.85);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom-color:var(--line);
}
.header-inner{display:flex;align-items:center;gap:2rem;height:76px}

.wordmark{margin-right:auto;display:flex;align-items:center}
/* Aplicação horizontal oficial (cópia de ~/Documents/Croa/logos). Abaixo de 32px de altura
   os anéis do símbolo fecham, então 30px é o piso no mobile. */
.wordmark img{width:auto;height:38px;display:block}
@media (max-width:52rem){.wordmark img{height:30px}}

.nav{display:flex;gap:2.25rem}
.nav a{
  font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(52,38,31,.68);transition:color .4s var(--ease);
}
.nav a:hover,.nav a[aria-current]{color:var(--croa-bark)}

.burger{
  display:none;width:42px;height:42px;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;background:transparent;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;
  transition:border-color .4s var(--ease);
}
.burger span{display:block;width:16px;height:1px;background:var(--croa-bark);transition:transform .45s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.menu[hidden]{display:none}
.menu{
  position:fixed;inset:0;z-index:90;background:var(--croa-linen);
  display:flex;flex-direction:column;justify-content:center;
  padding:7rem var(--gutter) 2.5rem;animation:fade .4s var(--ease);
}
.menu nav{display:flex;flex-direction:column;gap:.25rem}
.menu nav a{
  font-family:var(--display);
  font-size:var(--fs-d3);font-weight:300;letter-spacing:-.02em;line-height:1.5;
}
.menu-foot{
  margin-top:auto;padding-top:2.5rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.5rem;
  color:rgba(52,38,31,.68);font-size:var(--fs-meta);
}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------------- hero ---------------- */

.hero{
  position:relative;overflow:hidden;
  padding-top:clamp(8rem,17vh,11rem);
  padding-bottom:clamp(3.5rem,7vw,6rem);
}
.hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:-12rem;right:-10rem;width:44rem;height:44rem;border-radius:999px;
  background:var(--croa-clay);opacity:.25;filter:blur(64px);
}
.hero .shell{position:relative;z-index:1}
.hero .label{display:block;margin-bottom:clamp(2rem,4vw,3rem)}
.hero .display{margin-bottom:clamp(2rem,3.5vw,2.75rem)}
.hero-foot{margin-top:clamp(2.25rem,4vw,3rem);display:flex;gap:.875rem;flex-wrap:wrap}

/* ---------------- manifesto ---------------- */

.manifesto{background:var(--croa-sand)}
.grid-12{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:60rem){
  .grid-12{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(2rem,4vw,4rem)}
  .col-4{grid-column:span 4}
  .col-8{grid-column:span 8}
}
.manifesto .label{display:block}
.manifesto-body{display:flex;flex-direction:column;gap:1.75rem}
.manifesto-body p{
  font-family:var(--display);
  font-size:var(--fs-d4);
  font-weight:300;line-height:1.25;letter-spacing:-.015em;
}
.manifesto-body p+p{
  font-size:var(--fs-body-lg);
  font-family:var(--sans);line-height:1.75;letter-spacing:0;
  color:rgba(52,38,31,.75);max-width:42rem;
}
.manifesto-body em{font-style:italic;color:var(--croa-clay-dark)}

/* ---------------- pilares ---------------- */

.pillars-head{margin-bottom:clamp(2.5rem,4vw,3.5rem)}
.pillars-head .label{display:block;margin-bottom:1.25rem}

.pillars{
  display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
}
@media (min-width:48rem){.pillars{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:var(--r-lg)}}

.pillar{
  background:var(--croa-linen);
  padding:clamp(1.75rem,3vw,2.75rem);
  display:flex;flex-direction:column;gap:1rem;
}
.pillar{transition:background-color .4s cubic-bezier(.33,0,.25,1)}
.pillar:hover{background-color:var(--croa-sand);transition-duration:.28s}
.pillar .num{font-family:var(--display);font-size:var(--fs-body);color:var(--croa-clay-dark);letter-spacing:.06em;transition:color .28s cubic-bezier(.33,0,.25,1)}
.pillar:hover .num{color:var(--croa-bark)}
.pillar h3{font-family:var(--display);font-size:var(--fs-d5);font-weight:400;letter-spacing:-.012em;line-height:1.15}
.pillar p{color:rgba(52,38,31,.75);font-size:var(--fs-body);max-width:34ch}

/* ---------------- portfólio (inversão de contraste) ---------------- */

.portfolio{background:var(--croa-bark);color:var(--croa-linen)}
.portfolio .label{color:var(--croa-stone)}
.portfolio .lede{color:rgba(247,242,234,.75)}
.portfolio .h2{color:var(--croa-linen)}
.portfolio .link-arrow{color:var(--croa-stone);border-color:var(--line-dark)}
.portfolio .link-arrow:hover{color:var(--croa-linen);border-color:var(--croa-stone)}

.portfolio-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
  margin-bottom:clamp(2.5rem,4vw,3.5rem);
}
.portfolio-head .label{display:block;margin-bottom:1.25rem}

/* peça principal: um único empreendimento em destaque */
.feature{display:block}
.feature-media{
  margin:0 0 clamp(1.75rem,3vw,2.5rem);
  border:1px solid var(--line-dark);border-radius:var(--r);overflow:hidden;
}
@media (min-width:48rem){.feature-media{border-radius:var(--r-lg)}}
.feature-media img{
  width:100%;aspect-ratio:21/9;object-fit:cover;
  transition:transform .8s var(--ease);
}
.feature:hover .feature-media img{transform:scale(1.02)}

.feature-status{
  display:inline-flex;align-items:center;gap:.625rem;
  font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--croa-stone);
}
.feature-status::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--croa-clay)}

.feature-title{
  font-family:var(--display);
  font-size:var(--fs-d3);font-weight:300;letter-spacing:-.02em;line-height:1.04;
  margin-top:1.25rem;
  transition:color .4s var(--ease);
}
.feature:hover .feature-title{color:var(--croa-stone)}
.feature-place{margin-top:.75rem;font-size:var(--fs-meta);color:rgba(247,242,234,.55);letter-spacing:.02em}
.feature-text{margin-top:1.5rem;color:rgba(247,242,234,.75);font-size:var(--fs-body);max-width:38rem;line-height:1.75}

.feature-attrs{
  margin-top:clamp(2rem,3.5vw,2.75rem);
  border-top:1px solid var(--line-dark);
  display:grid;
}
@media (min-width:48rem){.feature-attrs{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.5rem}}
.feature-attrs li{
  border-bottom:1px solid var(--line-dark);
  padding-block:1rem;
  font-size:var(--fs-body);color:rgba(247,242,234,.75);
}
.feature-more{margin-top:clamp(2rem,3.5vw,2.75rem);display:flex}

/* ---------------- grid de empreendimentos ---------------- */

.work-grid{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
/* uma coluna: cada empreendimento ocupa uma faixa horizontal inteira. */

.work{
  position:relative;display:flex;flex-direction:column;
  background:var(--croa-linen);
  /* só padding vertical: o card divide a página por linhas de 1px, não é
     uma superfície própria. Com padding lateral o conteúdo ficava 32px
     para dentro da régua onde o título e a própria linha se apoiam. */
  padding-block:clamp(1.5rem,2.4vw,2rem);
}
/* Hover igual ao do destaque na home (.feature): a moldura fica parada e
   a imagem amplia por dentro dela, com o título virando terracota. Sem
   troca de fundo — numa faixa desta largura o bloco chapado brigava com
   o raio da capa e repetia um limite que a linha de 1px já mostra. */
.work-media{
  display:block;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:1.5rem;
}
.work-cover{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .8s var(--ease),opacity .5s var(--ease);
}
.work:not(.soon):hover .work-cover{transform:scale(1.02)}
/* na faixa larga a capa vira panorâmica, cobrindo a largura do container. */
@media (min-width:48rem){
  .work-media{border-radius:var(--r-lg)}
  .work-cover{aspect-ratio:21/9}
}
.work-idx{font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--croa-clay-dark);transition:color .28s cubic-bezier(.33,0,.25,1)}
.work:not(.soon):hover .work-idx{color:var(--croa-bark)}
.work-meta{margin-top:.75rem}
.work-meta h2{
  font-family:var(--display);font-size:var(--fs-d5);
  font-weight:300;letter-spacing:-.015em;line-height:1.1;
  transition:color .4s var(--ease);
}
.work:not(.soon):hover .work-meta h2{color:var(--croa-clay-dark)}
.work-meta span{display:block;margin-top:.625rem;font-size:var(--fs-meta);color:rgba(52,38,31,.68)}
/* título à esquerda, localização à direita, aproveitando a largura da faixa. */
@media (min-width:48rem){
  .work-meta{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:1.5rem;flex-wrap:wrap;
  }
  .work-meta span{margin-top:0;text-align:right}
}
.work.soon{cursor:default}
.work.soon .work-meta h2{color:rgba(52,38,31,.68)}
.work.soon .work-cover{opacity:.6}

/* ---------------- processo ---------------- */

.process{background:var(--croa-sand)}
.process .label{display:block;margin-bottom:1.25rem}

.steps{border-top:1px solid var(--line)}
.steps li{
  border-bottom:1px solid var(--line);
  padding-block:clamp(1.5rem,2.6vw,2rem);
  display:flex;align-items:baseline;gap:1.25rem;flex-wrap:wrap;
  transition:padding-inline .5s var(--ease);
}
.steps li:hover{padding-inline:.75rem}
.steps .num{font-family:var(--display);font-size:var(--fs-body);color:var(--croa-clay-dark);letter-spacing:.06em}
.steps h3{
  font-family:var(--display);font-size:var(--fs-d5);
  font-weight:300;letter-spacing:-.015em;line-height:1.2;
}
.steps .when{margin-left:auto;font-size:var(--fs-meta);color:rgba(52,38,31,.68);letter-spacing:.04em}

/* ---------------- contato ---------------- */

.contact{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:60rem){.contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.contact-left .label{display:block;margin-bottom:1.5rem}
.contact-left .h2{margin-bottom:1.75rem}
.contact-mail{
  display:inline-block;margin-top:2rem;
  font-family:var(--display);font-size:var(--fs-d6);font-weight:300;
  border-bottom:1px solid var(--line);padding-bottom:.5rem;
  transition:border-color .45s var(--ease),color .45s var(--ease);
}
.contact-mail:hover{color:var(--croa-clay-dark);border-color:var(--croa-clay-dark)}

/* informações práticas, no mesmo sistema de linhas de 1px das outras fichas */
.contact-details{margin:0;border-top:1px solid var(--line)}
.contact-details div{border-bottom:1px solid var(--line);padding-block:1.125rem}
.contact-details dt{font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--croa-moss)}
.contact-details dd{margin:.625rem 0 0;font-size:var(--fs-body);line-height:1.7;color:rgba(52,38,31,.75)}
.contact-details a{border-bottom:1px solid var(--line);padding-bottom:.15rem;transition:border-color .45s var(--ease),color .45s var(--ease)}
.contact-details a:hover{color:var(--croa-clay-dark);border-color:var(--croa-clay-dark)}

/* ---------------- formulário de contato ---------------- */

.contact-left .contact-details{margin-top:clamp(2rem,4vw,3rem)}
.form-card{
  background:var(--croa-sand);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(1.5rem,3.5vw,2.75rem);
}
@media (min-width:48rem){.form-card{border-radius:var(--r-lg)}}
.field{display:block;margin-bottom:1.75rem}
.field span{
  display:block;margin-bottom:.625rem;
  font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--croa-moss);
}
.field input,.field textarea,.field select{
  width:100%;background:transparent;color:var(--croa-bark);
  font-family:var(--sans);font-size:var(--fs-body);font-weight:300;line-height:1.6;
  border:0;border-bottom:1px solid var(--croa-stone);
  border-radius:0;padding:.5rem 0;
  transition:border-color .4s var(--ease);
}
.field textarea{resize:vertical;min-height:5.5rem}
.field select{
  appearance:none;cursor:pointer;padding-right:1.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238f4f34' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .125rem center;background-size:12px 8px;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-bottom-color:var(--croa-clay-dark);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(52,38,31,.5)}
.form-foot{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-top:2rem}
.form-note{font-size:.8125rem;color:rgba(52,38,31,.68);max-width:22ch}
.form-status{margin-top:1.25rem;font-size:.875rem;color:var(--croa-clay-dark)}
.form-status.erro{color:#a33a24}
.form-status:empty{display:none}
.form-card [disabled]{opacity:.55;cursor:not-allowed}

/* ---------------- newsletter ---------------- */

.news-section{background:var(--croa-sand)}
.news{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:60rem){.news{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end}}
.news-intro .label{display:block;margin-bottom:1.25rem}
.news-intro .h2{margin-bottom:1.25rem;max-width:18ch}

.news-form{display:grid;gap:1.25rem}
@media (min-width:34rem){
  /* Nome e sobrenome dividem a primeira linha; e-mail e botão ocupam a
     largura toda. Três colunas não cabem: no desktop o formulário já
     vive na coluna estreita da grade de .news. */
  .news-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:1.25rem 1.5rem}
  .news-form .news-field-wide,
  .news-form button,
  .news-form .news-status{grid-column:1/-1}
  .news-form button{justify-self:start}
}
.news-field{display:block}
.news-field span{
  display:block;margin-bottom:.625rem;
  font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--croa-moss);
}
.news-field input{
  width:100%;background:transparent;color:var(--croa-bark);
  font-family:var(--sans);font-size:var(--fs-body);font-weight:300;line-height:1.6;
  border:0;border-bottom:1px solid var(--croa-stone);
  border-radius:0;padding:.5rem 0;
  transition:border-color .4s var(--ease);
}
.news-field input:focus{outline:0;border-bottom-color:var(--croa-clay-dark)}
.news-field input::placeholder{color:rgba(52,38,31,.5)}
.news-form button[disabled]{opacity:.55;cursor:default;transform:none}
.news-status{margin:0;font-size:var(--fs-body);color:var(--croa-clay-dark);max-width:44ch}
.news-status.erro{color:var(--croa-bark)}
.news-status:empty{display:none}

/* ---------------- rodapé ---------------- */

.site-footer{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem) 2rem}

/* A marca ocupa a coluna larga e as listas dividem o resto; abaixo de
   48rem tudo empilha numa coluna só. */
.footer-grid{
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  align-items:start;
}
@media (max-width:48rem){.footer-grid{grid-template-columns:1fr;gap:2.5rem}}

/* Assinatura de fecho: o símbolo em 76px, tamanho em que os dois anéis
   ainda se distinguem. Carregado como <img>, então a cor vem de dentro
   do arquivo (bark) — sobre fundo escuro seria preciso outra versão. */
.footer-symbol{width:76px;height:auto;margin-bottom:1.25rem}

.footer-brand .mark{
  font-family:var(--display);font-size:var(--fs-d5);color:var(--croa-bark);
  font-weight:400;display:block;
}
.footer-brand .mark em{font-style:italic;font-weight:300;color:var(--croa-clay-dark)}
.footer-tag{
  margin-top:.875rem;max-width:24ch;
  font-size:var(--fs-meta);color:rgba(52,38,31,.68);line-height:1.6;
}

.site-footer .label{display:block;margin-bottom:1.125rem}
.footer-col ul{display:grid;gap:.75rem;font-size:var(--fs-meta);color:rgba(52,38,31,.75);line-height:1.6}
.footer-col a{
  border-bottom:1px solid transparent;
  transition:border-color .45s var(--ease),color .45s var(--ease);
}
.footer-col a:hover{color:var(--croa-clay-dark);border-color:var(--line)}
.footer-col .quiet{color:rgba(52,38,31,.55)}

/* Linha legal: separada por um filete, como o resto do site faz. */
.footer-base{
  display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:var(--fs-meta);color:rgba(52,38,31,.55);
}
/* a razão social é longa demais para dividir a linha com o © em tela
   estreita: empilha, em vez de espremer. */
@media (max-width:48rem){.footer-base{flex-direction:column;gap:.625rem}}

/* ---------------- cabeçalho de página ---------------- */

.page-head{padding-top:clamp(8rem,18vh,11rem);padding-bottom:clamp(2rem,4vw,3.5rem)}
.page-head .label{display:block;margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.page-head .display{margin-bottom:1.75rem}
.page-sub{color:rgba(52,38,31,.75);max-width:36rem;font-size:var(--fs-body-lg);line-height:1.75}
.works.all{padding-top:clamp(1.5rem,3vw,2.5rem)}

/* ---------------- página de empreendimento ---------------- */

.case-hero{padding-top:clamp(8rem,17vh,11rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.case-hero .back{margin-bottom:clamp(2rem,4vw,3rem);color:rgba(52,38,31,.68)}
.case-hero .back svg{transition:transform .5s var(--ease)}
.case-hero .back:hover{color:var(--croa-bark)}
.case-hero .back:hover svg{transform:translateX(-5px)}
.case-hero .display{margin-bottom:1.75rem}
.case-intro{color:rgba(52,38,31,.75);max-width:42rem;font-size:var(--fs-body-lg);line-height:1.75}

.case-facts{display:grid;gap:1.5rem 2.5rem;margin:0;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
.case-facts.head{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line);padding-top:1.75rem}
.case-facts dt{font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--croa-moss)}
.case-facts dd{margin:.625rem 0 0;font-size:var(--fs-body);color:rgba(52,38,31,.75)}

/* Capa contida, dentro do .shell. Foi full-bleed por um tempo; voltou
   porque em largura total a imagem é esticada além do detalhe que ela
   tem de verdade, e porque a capa traz a marca do empreendimento —
   ocupando a tela inteira, lia como banner de outra empresa. */
/* respiro antes da faixa seguinte: sem ele a borda inferior da imagem
   cai exatamente na troca de cor de fundo e a capa parece colada */
.case-cover{margin:0 0 clamp(2.5rem,5vw,4rem)}
.case-cover img{
  display:block;width:100%;aspect-ratio:21/9;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r);
}
@media (min-width:48rem){.case-cover img{border-radius:var(--r-lg)}}
/* em tela estreita o 21/9 vira uma fita fina; 4/3 respira */
@media (max-width:48rem){.case-cover img{aspect-ratio:4/3}}
.case-cover figcaption{margin-top:.875rem;font-size:var(--fs-meta);color:rgba(52,38,31,.68)}

/* faixas do corpo — o tom vem do tipo do bloco (ver toneFor em main.js).
   Redefinir --line dentro da faixa acerta, de uma vez, todas as linhas
   de 1px dos blocos que ela contém. */
.case-band{padding-block:clamp(2.5rem,5vw,4rem)}
.case-band.tone-sand,.case-band.tone-dark{padding-block:clamp(3rem,6vw,5rem)}
.tone-sand{background:var(--croa-sand);--line:rgba(52,38,31,.14)}
.tone-dark{background:var(--croa-bark);color:var(--croa-linen);--line:var(--line-dark)}
.case-stack{display:flex;flex-direction:column;gap:clamp(2.5rem,4.5vw,4rem)}
/* título e lista do bloco andam juntos, com respiro menor que o das faixas */
.case-group{display:flex;flex-direction:column;gap:clamp(1.25rem,2vw,1.75rem)}
.case-text{display:grid;gap:1rem 3rem;align-items:start}
@media (min-width:60rem){.case-text{grid-template-columns:minmax(0,11rem) minmax(0,1fr)}}
.case-text .label{margin:0;padding-top:.5rem}
.case-text p{max-width:40rem;font-size:var(--fs-body);line-height:1.8;color:rgba(52,38,31,.75)}

.case-gallery{display:grid;gap:clamp(1rem,1.6vw,1.25rem);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.case-gallery .case-figure img{aspect-ratio:4/3;object-fit:cover}
.case-figure{margin:0}
.case-figure img{width:100%;border:1px solid var(--line);border-radius:var(--r)}
.case-figure figcaption{margin-top:.875rem;font-size:var(--fs-meta);color:rgba(52,38,31,.68)}

.case-quote{margin:0;border-block:1px solid var(--line);padding-block:clamp(2rem,4vw,3.25rem)}
.case-quote p{
  font-family:var(--display);
  font-size:var(--fs-d4);font-weight:300;
  letter-spacing:-.015em;line-height:1.24;max-width:24ch;
}
.case-quote cite{display:block;margin-top:1.25rem;font-style:normal;font-size:var(--fs-meta);color:rgba(52,38,31,.68);letter-spacing:.04em}
.tone-sand .case-quote{border-block:0;padding-block:0}

/* andamento das obras — barra fina, no mesmo sistema de linhas de 1px */
.case-progress{display:flex;flex-direction:column;gap:clamp(1.25rem,2.4vw,1.75rem)}
.case-progress li{
  display:grid;grid-template-columns:1fr auto;
  align-items:baseline;gap:.625rem 1rem;
}
.case-progress .pk{font-size:var(--fs-body);color:rgba(52,38,31,.75)}
.case-progress .pv{
  font-family:var(--display);font-size:var(--fs-body);color:var(--croa-clay-dark);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.case-progress .ptrack{
  grid-column:1/-1;height:3px;border-radius:999px;
  background:var(--croa-stone);
}
.case-progress .ptrack i{
  display:block;height:100%;border-radius:inherit;
  background:var(--croa-clay);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--ease) .15s;
}
.case-progress li.in .ptrack i{transform:scaleX(var(--p,0))}

.tone-dark .label{color:rgba(247,242,234,.55)}
.tone-dark .case-text p{color:rgba(247,242,234,.75)}
.tone-dark .case-attrs li{color:rgba(247,242,234,.75)}
.tone-dark .case-facts dt{color:rgba(247,242,234,.55)}
.tone-dark .case-facts dd,
.tone-dark .case-progress .pk{color:rgba(247,242,234,.75)}
.tone-dark .case-progress .pv,
.tone-dark .case-progress .ptrack i{color:var(--croa-clay-light);background-color:var(--croa-clay-light)}
.tone-dark .case-progress .pv{background:none}
.tone-dark .case-progress .ptrack{background:rgba(247,242,234,.16)}
.tone-dark .case-quote cite,
.tone-dark .case-figure figcaption{color:rgba(247,242,234,.55)}
.tone-dark .link-arrow{color:var(--croa-clay-light)}
.tone-dark .link-arrow:hover{border-color:var(--croa-clay-light)}

.case-site{margin:0;display:flex}

.case-next{border-top:1px solid var(--line);padding-block:clamp(2.5rem,5vw,4rem)}
.case-next .label{display:block;margin-bottom:1rem}

.case-empty{padding-top:clamp(9rem,20vh,12.5rem);padding-bottom:clamp(3.5rem,7vw,6rem)}
.case-empty .label{display:block;margin-bottom:1.5rem}
.case-empty .display{margin-bottom:2rem}

/* ---------------- placeholder de conteúdo ----------------
   O texto marcado assim é FICTÍCIO — existe só para o layout ser lido
   com conteúdo de tamanho realista. O sublinhado pontilhado é discreto
   de propósito: não atrapalha a leitura, mas denuncia o que ainda é
   invenção. Some do site junto com a última marcação:
       grep -c 'class="todo"' index.html
   Ao chegar a zero, apague esta regra. */

.todo{
  font-style:normal;
  text-decoration:underline dotted var(--croa-clay) 1px;
  text-underline-offset:.25em;
}

/* ---------------- quem incorpora ---------------- */

.about-section .lede+.lede{margin-top:1.25rem}
.people{margin-top:clamp(2.5rem,4vw,3.5rem);display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:48rem){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
.people li{border-top:1px solid var(--line);padding-top:1.25rem}
.people h3{font-family:var(--display);font-size:var(--fs-d6);font-weight:400;letter-spacing:-.012em}
.people-role{margin-top:.375rem;font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--croa-moss)}
.people li p:last-child{margin-top:.875rem;font-size:var(--fs-body);color:rgba(52,38,31,.75);line-height:1.75}

/* ---------------- números ---------------- */

.figures-section{background:var(--croa-sand);padding-block:clamp(3rem,6vw,5rem)}
.figures-section .label{display:block;margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.figures{display:grid;gap:1.5rem 2.5rem;margin:0;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.figures dt{font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--croa-moss)}
.figures dd{
  margin:.75rem 0 0;
  font-family:var(--display);font-size:var(--fs-d4);
  font-weight:300;letter-spacing:-.015em;line-height:1;
  white-space:nowrap;
}
/* a unidade acompanha o número sem disputar tamanho com ele */
.figures-unit{font-size:.42em;letter-spacing:.02em;margin-left:.3em;color:rgba(52,38,31,.68)}

/* ---------------- como incorporamos ---------------- */

.practices{margin:0}
.practices div{border-top:1px solid var(--line);padding-block:1.5rem}
.practices div:last-child{border-bottom:1px solid var(--line)}
.practices dt{font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--croa-moss)}
.practices dd{margin:.75rem 0 0;color:rgba(52,38,31,.75);font-size:var(--fs-body);line-height:1.75;max-width:52ch}

/* ---------------- para quem tem terra ---------------- */

.land-section{background:var(--croa-sand)}
.land-criteria{margin-top:clamp(2rem,3.5vw,2.75rem);border-top:1px solid var(--line)}
.land-criteria li{
  border-bottom:1px solid var(--line);padding-block:1rem;
  display:flex;gap:1rem;flex-wrap:wrap;align-items:baseline;
  font-size:var(--fs-body);color:rgba(52,38,31,.75);
}
.land-criteria li>span:first-child{
  flex:0 0 7rem;
  font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--croa-moss);
}
.land-foot{margin-top:clamp(2rem,3.5vw,2.75rem);display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.land-note{font-size:var(--fs-meta);color:rgba(52,38,31,.68);max-width:24ch}

/* ---------------- reveal ---------------- */

/* A aparição é ANIMAÇÃO, não transition, de propósito: `transition` é um
   shorthand, e qualquer regra mais específica que declarasse a sua
   (.steps li, .pillar, .work) apagava a daqui e o elemento entrava seco.
   Animação e transition convivem no mesmo elemento, então cada um cuida
   do que é seu: o reveal da entrada, a regra do componente do hover.
   `backwards` faz o atraso do escalonamento segurar o estado inicial;
   sem `forwards`, ao terminar a animação devolve o controle ao CSS. */
.reveal{opacity:0;transform:translateY(24px)}
.reveal.in{opacity:1;transform:none;animation:reveal-in 1.1s var(--ease) backwards}
@keyframes reveal-in{from{opacity:0;transform:translateY(24px)}}

/* ---------------- responsivo ---------------- */

@media (max-width:52rem){
  .nav{display:none}
  .burger{display:flex}
  .header-inner{height:66px}
  html{scroll-padding-top:66px}
  .steps .when{margin-left:0;width:100%}
  .land-criteria li>span:first-child{flex-basis:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  /* o atraso do escalonamento vem inline, do JS; sem zerar aqui o elemento
     ficaria invisível durante ele, por causa do fill `backwards`. */
  .reveal{opacity:1;transform:none;animation-delay:0s!important}
}

/* atributos do empreendimento, no topo do corpo da página */
.case-attrs{border-top:1px solid var(--line);display:grid}
@media (min-width:48rem){.case-attrs{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2.5rem}}
.case-attrs li{
  border-bottom:1px solid var(--line);
  padding-block:1rem;
  font-size:var(--fs-body);color:rgba(52,38,31,.75);
}