/* ===========================================================================
   inner.css - paginas internas (servico, cidade, bairro, condado, entidade,
   editorial). E onde aterrissa a quase totalidade do trafego de busca: ~4.700
   das ~4.720 paginas.

   A anatomia segue a do metodo (secao 8 da metodologia): migalha, cabecalho,
   fatos-chave, secoes com frase-resposta, callout local, tabela, FAQ, bloco de
   FONTES VISIVEL, relacionados e CTA.
   =========================================================================== */

/* --- migalha --------------------------------------------------------------- */
.crumb{border-bottom:1px solid var(--line);background:var(--paper)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  padding:.7rem 0;font-size:.8rem;color:var(--ink-soft)}
.crumb a{color:var(--ink-soft);text-decoration:none}
.crumb a:hover{color:var(--wood-act);text-decoration:underline}
.crumb li + li::before{content:"/";margin-right:.5rem;color:var(--line);
  display:inline-block}
.crumb [aria-current]{color:var(--ink);font-weight:600}

/* --- cabecalho da pagina ---------------------------------------------------
   Sem foto de fundo por padrao: em pagina de texto longo o hero fotografico
   empurra o conteudo para baixo e piora o LCP. Onde houver foto, ela entra como
   `.pghero--photo` e o texto ganha a classe `.on-photo`. */
.pghead{padding:2.6rem 0 2.2rem;border-bottom:2px solid var(--ink)}
.pghead h1{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:18ch}
/* MANCHETE nao e rotulo. O `max-width: 18ch` e certo para um titulo de pagina
   ("Wood Floors in Ardmore, PA") e errado para o titulo de um artigo: o H1 de
   um post quebrou em CINCO linhas numa coluna de 486px ao lado da foto. Aqui
   ele ganha largura e um corpo um pouco menor, que e o que uma manchete longa
   pede. */
.post-head h1{max-width:26ch;font-size:clamp(1.9rem,3.4vw,2.7rem);
  line-height:1.1}
.post-head .lead{max-width:46ch}
.pghead .lead{margin-top:1.1rem;max-width:52ch}
.pghead .eyebrow{margin-bottom:.9rem}

/* --- corpo do documento ----------------------------------------------------
   `.doc` e o container de texto corrido. Tudo dentro dele herda medida de
   leitura; blocos que precisam de largura maior usam `.wide` da grade. */
.doc{padding:2.6rem 0 3.5rem}
.doc > * + *{margin-top:1.1rem}
.doc h2{margin-top:2.8rem;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.doc h3{margin-top:2rem}
/* Cada H2 e seguido de uma FRASE-RESPOSTA autocontida. E o padrao AEO: o
   seletor `.doc h2 + .answer` vai no `speakable` do schema. */
.doc .answer{font-family:var(--display);font-weight:700;font-size:1.1rem;
  line-height:1.42;color:var(--ink);margin-top:.9rem}
.doc ul,.doc ol{margin-left:1.15rem}
.doc li + li{margin-top:.4rem}
.doc a{text-underline-offset:2px}
.doc figure{margin:2rem 0}
.doc figure img{width:100%}
.doc figcaption{font-size:.82rem;color:var(--ink-soft);margin-top:.5rem}
.doc strong{color:var(--ink)}

/* --- fatos-chave -----------------------------------------------------------
   `<dl>` so aceita dt/dd/div como filho direto: um <h3> aqui dentro reprova a
   arvore de acessibilidade (axe `definition-list`). */
.facts{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);
  padding:1.4rem 0;margin:2.2rem 0}
.facts dl{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:.55rem 1.5rem;font-size:.94rem}
.facts dt{font-size:.72rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);padding-top:.2rem}
.facts dd{color:var(--ink)}

/* --- callout ---------------------------------------------------------------
   SEM barra vertical de acento: `border-left: 4px solid <cor da marca>` num
   bloco de texto e o ornamento mais associado a pagina gerada por IA, e o repo
   registra que ele foi reprovado. O destaque sai de superficie + hairline. */
.callout{background:var(--paper-alt);border:1px solid var(--line);
  padding:1.3rem 1.4rem;margin:2rem 0;font-size:.97rem}
.callout h3{font-size:1rem;margin:0 0 .5rem}
.callout.local{background:var(--sand)}

/* --- tabela dentro do documento -------------------------------------------- */
.doc .tbl{overflow-x:auto;margin:2rem 0}
.doc .tbl table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.93rem}
.doc .tbl th{text-align:left;font-family:var(--body);font-size:.67rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
  padding:0 .9rem .6rem 0;border-bottom:2px solid var(--ink);white-space:nowrap}
.doc .tbl td{padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--line);
  vertical-align:top}

/* --- passos (HowTo) -------------------------------------------------------- */
.steps{list-style:none;margin:2rem 0 0;padding:0;counter-reset:step}
.steps li{counter-increment:step;display:grid;
  grid-template-columns:2.6rem minmax(0,1fr);gap:1.1rem;
  padding:1.1rem 0;border-top:1px solid var(--line)}
.steps li::before{content:counter(step,decimal-leading-zero);
  font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;
  color:var(--sand)}
/* `::before` do contador E um item de grid. Com <b> e <span> soltos sao TRES
   itens numa grade de duas colunas: o <span> cai na linha 2, coluna 1 - a
   coluna de 2,6rem do numero - e o texto renderiza uma palavra por linha.
   Ancorar os dois na coluna 2 resolve. Mesma familia do "elemento vaza da
   CELULA": o texto nao estoura nada, ele e espremido pela celula. */
.steps li > b,.steps li > span{grid-column:2}
.steps b{display:block;font-family:var(--display);font-size:1.05rem;
  letter-spacing:-.01em}
.steps span{display:block;color:var(--ink-soft);font-size:.94rem;margin-top:.25rem}

/* --- FAQ -------------------------------------------------------------------
   O atributo `[hidden]` perde para qualquer `display` explicito, entao todo
   painel que recebe display proprio precisa da regra `[hidden]{display:none}`. */
.faq{margin:2.4rem 0 0;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:1.06rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.85rem;
  font-family:var(--display);font-size:1.4rem;color:var(--wood-act);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 0 1.1rem;color:var(--ink-soft)}
.faq .a[hidden]{display:none}

/* --- fontes: bloco VISIVEL, nao so `citation` no schema --------------------
   O leitor ve ASTM, 40 CFR, ACS com link. E o E-E-A-T que o metodo pede, e o
   que separa uma pagina de referencia de um texto reescrito do concorrente. */
.sources{margin:2.8rem 0 0;padding-top:1.2rem;border-top:2px solid var(--ink)}
.sources h2{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-family:var(--body);color:var(--ink-soft);margin:0 0 .8rem}
.sources ol{list-style:none;margin:0;padding:0;font-size:.86rem}
.sources li{margin-bottom:.45rem;color:var(--ink-soft)}
.sources a{overflow-wrap:anywhere}

/* --- relacionados ----------------------------------------------------------
   Miniatura em toda linha: e a peca que traz foto para dentro das paginas de
   texto. Sem ela a pagina interna volta a ser um documento sem produto a vista. */
.related{margin-top:3rem;border-top:2px solid var(--ink);padding-top:1.6rem}
.related h2{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-family:var(--body);color:var(--ink-soft);margin-bottom:1rem}
.rel-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2rem;padding:0;margin:0}
.rel-list a{display:block;text-decoration:none;color:var(--ink)}
.rel-list img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:2px}
.rel-list b{display:block;font-family:var(--display);font-size:1rem;
  margin-top:.6rem;letter-spacing:-.01em}
.rel-list span{display:block;font-size:.85rem;color:var(--ink-soft);margin-top:.15rem}
.rel-list a:hover b{color:var(--wood-act)}

/* --- cidades vizinhas ------------------------------------------------------
   Proximidade por centroide, NAO adjacencia de fronteira: o rotulo diz "Towns
   near", nunca "bordering". */
.nearby{margin-top:2.4rem}
.nearby h2{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-family:var(--body);color:var(--ink-soft);margin-bottom:.8rem}
.nearby ul{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0}
.nearby a{display:inline-block;padding:.3rem .7rem;font-size:.85rem;
  text-decoration:none;color:var(--ink);background:var(--paper-alt);
  border:1px solid var(--line);border-radius:2px}
.nearby a:hover{background:var(--sand);color:var(--wood-deep)}

/* --- CTA de fim de pagina --------------------------------------------------- */
.cta{background:var(--bark);color:var(--on-bark);padding:3.4rem 0}
.cta h2{color:var(--cream);max-width:20ch}
.cta p{color:var(--on-bark-mut);max-width:48ch;margin-top:.9rem}
.cta .row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.cta .row .btn-primary{background:var(--cream);color:var(--bark)}
.cta .row .btn-ghost{border-color:var(--cream);color:var(--cream)}
.cta .row .btn-ghost:hover{background:var(--cream);color:var(--bark)}

/* --- barra de chamada fixa no mobile ---------------------------------------
   Abaixo de 40rem o masthead encolhe e o telefone perde peso. Nas paginas
   internas - que sao as que recebem trafego - ele volta como faixa no rodape. */
.callbar{display:none}
@media (max-width:40rem){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    align-items:center;justify-content:center;gap:.5rem;
    padding:.85rem 1rem;background:var(--wood-act);color:var(--paper);
    font-weight:700;text-decoration:none;font-size:1rem}
  body.has-callbar{padding-bottom:3.6rem}
}

/* --- responsivo ------------------------------------------------------------ */
@media (max-width:62rem){
  .rel-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:40rem){
  .facts dl{grid-template-columns:minmax(0,1fr);gap:.15rem}
  .facts dd{margin-bottom:.7rem}
  .rel-list{grid-template-columns:minmax(0,1fr)}
  .steps li{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .pghead{padding-top:1.8rem}
}

/* --- CTA no cabecalho da pagina --- */
.head-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}

/* --- lista do hub de silo: miniatura nao, porque o hub ja e curto e a foto
   viria repetida da pagina de servico. Aqui o peso e do nome. --- */
.silo-list{border-top:2px solid var(--ink)}
.silo-list li{border-bottom:1px solid var(--line)}
/* A linha passou a ser MINIATURA + texto. E a peca mais barata que traz o
   produto para dentro de uma pagina de texto, e o hub de silo nao tinha uma
   foto sequer. Grid, e nao flex, para a coluna de texto ja nascer com
   `minmax(0,1fr)` em vez de depender de `min-width:0` em cada filho. */
.silo-list a{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1.25rem;
  align-items:center;padding:1.15rem 0;text-decoration:none;color:var(--ink)}
.silo-thumb{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:2px}
.silo-txt{display:block;min-width:0}
/* a miniatura ENCOLHE no mobile, nao some: some-la devolve a pagina de texto
   puro, que e o defeito que ela veio corrigir. Vem DEPOIS da regra base de
   proposito - mesma especificidade, quem vence e a ordem. */
@media (max-width:40rem){
  .silo-list a{grid-template-columns:5.5rem minmax(0,1fr);gap:.9rem}
}
.silo-list b{display:block;font-family:var(--display);font-size:1.25rem;
  letter-spacing:-.015em}
.silo-list span{display:block;color:var(--ink-soft);font-size:.95rem;margin-top:.25rem}
.silo-list a:hover b{color:var(--wood-act)}

/* --- cabecalho com foto ---
   Pagina de piso precisa mostrar piso acima da dobra. `minmax(0,...)` nas duas
   colunas: sem isso um H1 longo em display estoura a propria coluna e engole a
   da imagem. */
.pgh-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:2.6rem;align-items:center}
.pgh-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}

/* --- faixa de respiro ------------------------------------------------------
   Sangra de borda a borda porque e filha `.full` do `.sheet`, e NAO por
   `margin-right: calc(50% - 50vw)`: essa porcentagem se resolve contra a
   COLUNA do grid e joga a foto para fora da tela (armadilha registrada).
   `max-height` alem do `aspect-ratio` porque numa tela de 1800px uma foto 16:6
   de borda a borda ainda passaria de 600px de altura. */
/* Sem margem EMBAIXO: a foto encosta na secao seguinte, que ja traz o proprio
   respiro no topo (`.doc` tem 2,6rem; a faixa de CTA tem a dela). Com margem
   sobrava uma tira de papel entre a foto e a faixa escura, e a legenda caia
   nela como uma linha solta - foi assim que o Insider viu. */
.band{margin:3.2rem 0 0}
.band figure{margin:0}
.band img{display:block;width:100%;height:auto;aspect-ratio:16/6;
  max-height:26rem;object-fit:cover}
/* Nao ha chamada usando legenda hoje: sobre foto de BANCO ela vira uma linha
   solta entre duas superficies, sem dizer nada que a foto ja nao diga. A regra
   fica para quando entrarem as fotos REAIS do cliente, onde a legenda passa a
   ter conteudo ("Our work in <cidade>") - e ai a foto ganha respiro embaixo. */
.band:has(figcaption){margin-bottom:3.2rem}
.band figcaption{width:min(100% - 2*var(--pad),var(--sheet-w));margin:.7rem auto 0;
  font-size:.82rem;color:var(--ink-soft)}
@media (max-width:62rem){
  .band{margin:2.4rem 0 0}
  .band img{aspect-ratio:16/9;max-height:18rem}
}
@media (max-width:62rem){
  .pgh-grid{grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .pgh-photo{order:-1}
}

/* --- listas de cobertura --- */
.nearby-grid{columns:4;column-gap:1.6rem;margin-top:1.2rem;font-size:.92rem}
.nearby-grid li{break-inside:avoid;padding:.22rem 0}
.nearby-grid a{text-decoration:none;color:var(--ink)}
.nearby-grid a:hover{color:var(--wood-act);text-decoration:underline}
.county-list{margin-top:1rem;border-top:1px solid var(--line)}
.county-list li{display:flex;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--line-soft)}
.county-list a{text-decoration:none;color:var(--ink);font-weight:600}
.county-list a:hover{color:var(--wood-act)}
.county-list em{font-style:normal;color:var(--ink-soft);font-family:var(--mono);
  font-size:.82rem}
@media (max-width:62rem){ .nearby-grid{columns:2} }
@media (max-width:40rem){ .nearby-grid{columns:1} }

/* ---------------------------------------------------------------------------
   Formulario de orcamento (/estimate/)

   O `:not(.visually-hidden)` no seletor de campo nao e zelo: `input[type=text]`
   vale (0,1,1) e VENCE `.visually-hidden` (0,1,0). Sem ele o honeypot herda
   `width:100%`, vira um input invisivel de centenas de pixels e empurra o
   documento inteiro na horizontal em toda a pagina.
   --------------------------------------------------------------------------- */
.est{margin:2rem 0 2.6rem;display:grid;gap:1.15rem}
.est-first{margin-bottom:1.4rem}
.est-first .head-cta{margin-top:1.1rem}
.est-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.15rem}
/* `align-content:start` obrigatorio: o `.est-two` estica as duas celulas para
   a mesma altura, e sem isto o <select> (que nao tem linha de dica embaixo)
   cresce para preencher a sobra - saia 22px mais baixo e 23px mais alto que o
   campo ao lado. */
.est-row{display:grid;gap:.35rem;align-content:start}
.est-row label{font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft)}
.est-row abbr{color:var(--wood-act);text-decoration:none;border:0}
.est input:not(.visually-hidden):not([type="checkbox"]),
.est select,
.est textarea{width:100%;font:inherit;font-size:.98rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-bottom-width:2px;
  border-bottom-color:var(--ink);padding:.7rem .8rem;border-radius:0;
  appearance:none}
.est textarea{resize:vertical;min-height:7rem}
.est select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
  linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:right 1.05rem center,right .8rem center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.est input:focus-visible,.est select:focus-visible,.est textarea:focus-visible{
  outline:2px solid var(--wood-act);outline-offset:2px}
.est-hint{font-size:.82rem;color:var(--ink-soft);line-height:1.5}
.est-consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.65rem;
  align-items:start}
/* o checkbox fica FORA da regra de campo (ver o `:not([type=checkbox])` acima):
   `appearance:none` num checkbox apaga o desenho da marca e marcar a caixa nao
   mostra nada. Aqui ele so ganha tamanho e a cor da marca. */
.est-consent input{width:1.15rem;height:1.15rem;margin-top:.15rem;
  accent-color:var(--wood-act)}
.est-consent label{font-size:.85rem;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ink-soft);line-height:1.55}
.est-send{justify-self:start;padding-inline:1.8rem}
.est-note{font-size:.85rem;color:var(--ink-soft);margin:0}
@media (max-width:40rem){
  .est-two{grid-template-columns:minmax(0,1fr)}
  .est-send{justify-self:stretch}
}

/* ---------------------------------------------------------------------------
   Editorial (/blog/)
   --------------------------------------------------------------------------- */
/* etiqueta de formato: e um SINAL de tipo de conteudo, nao enfeite. Vai junto
   para `genre` no schema. */
.post-fmt{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wood-act);background:var(--paper-alt);
  border:1px solid var(--line);padding:.22rem .5rem;border-radius:2px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  font-size:.78rem;color:var(--ink-soft);margin-bottom:.9rem}
.post-meta time{font-family:var(--mono);font-size:.74rem}

/* "The short version": os fatos que sustentam o artigo, antes do corpo. */
.takeaways{background:var(--paper-alt);border:1px solid var(--line);
  padding:1.4rem 1.5rem;margin:0 0 2.4rem}
.takeaways h2{margin:0 0 .8rem;font-size:1rem;letter-spacing:.02em}
.takeaways ul{margin:0;padding-left:1.1rem}
.takeaways li{font-size:.95rem;line-height:1.55}
.takeaways li + li{margin-top:.5rem}

/* lista de artigos: miniatura nao, porque aqui quem carrega o peso e a
   ETIQUETA de formato mais o titulo. Foto em toda linha viraria ruido num
   indice cujo trabalho e deixar escolher. */
.post-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.post-list li{border-bottom:1px solid var(--line)}
.post-list a{display:block;padding:1.15rem 0;text-decoration:none;color:var(--ink)}
.post-list b{display:block;font-family:var(--display);font-size:1.2rem;
  line-height:1.25;margin-top:.5rem}
/* O RESUMO tem classe propria. Escrito como `.post-list span` ele valia (0,1,1)
   e vencia `.post-fmt` (0,1,0): a etiqueta de formato herdava `display:block` e
   virava uma barra da largura da coluna. Mesma familia do `.nav a` vencendo
   `.btn`, e a saida certa e nomear o elemento, nao disputar especificidade. */
.post-list .post-ex{display:block;color:var(--ink-soft);font-size:.93rem;
  margin-top:.3rem}
.post-list a:hover b{color:var(--wood-act)}

/* os DOIS eixos do metodo, lado a lado: tema e formato */
.axes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;
  margin-bottom:2.6rem}
.axes h2{margin-top:0;font-size:1rem}
.axis{margin:0}
.axis li{display:flex;align-items:baseline;gap:.5rem;padding:.4rem 0;
  border-bottom:1px solid var(--line-soft);font-size:.92rem}
.axis a{text-decoration:none;color:var(--ink);display:flex;width:100%;
  align-items:baseline;gap:.5rem}
.axis a:hover{color:var(--wood-act)}
.axis em{margin-left:auto;font-style:normal;font-family:var(--mono);
  font-size:.8rem;color:var(--ink-soft)}
@media (max-width:40rem){
  .axes{grid-template-columns:minmax(0,1fr);gap:1.6rem}
}

/* linha de artigo COM miniatura, mesma grade da lista de servicos */
.post-list a{display:grid;grid-template-columns:8.5rem minmax(0,1fr);
  gap:1.25rem;align-items:center}
.post-txt{display:block;min-width:0}
.post-list b{margin-top:.45rem}
@media (max-width:40rem){
  .post-list a{grid-template-columns:5.5rem minmax(0,1fr);gap:.9rem}
}

/* ---------------------------------------------------------------------------
   MOBILE: titulos ao centro e botao de largura cheia
   ---------------------------------------------------------------------------
   Centralizar titulo no mobile e uma CASCATA, nao uma linha de CSS. O que vem
   junto, e o porque de cada exececao:

   - escopado em `main`: exclui o rodape de graca, onde o `h2` e ROTULO de
     coluna e centralizado descola da lista logo abaixo;
   - o `.lead` e a `.answer` ACOMPANHAM o titulo. Titulo centralizado com o
     paragrafo seguinte a esquerda le como coisa pela metade;
   - mas TEXTO CORRIDO continua a esquerda: centralizar tres paragrafos de
     explicacao e pessima tipografia. Por isso a regra nomeia `.lead` e
     `.answer`, e nao `p`;
   - LISTA, TABELA e CAIXA ficam a esquerda. Numa lista com miniatura o texto
     centralizado descola da figura, e num passo numerado o numero e que da o
     prumo;
   - `text-wrap: balance` importa mais centralizado do que alinhado a esquerda:
     uma ultima linha orfa no meio da coluna e muito mais visivel.
   -------------------------------------------------------------------------- */
@media (max-width:40rem){
  main .pghead .eyebrow,
  main .pghead h1,
  main .pghead .lead,
  main .post-meta,
  main .doc > div > h2,
  main .doc > div > .answer,
  main .process h2,
  main .takeaways h2,
  main .faq > h2,
  main .related > h2,
  main .nearby > h2,
  main .sources > h2,
  main .cta h2,
  main .cta p{text-align:center}

  /* titulo ganha `balance`; corpo NAO, porque `balance` so vale ate ~6 linhas
     e num paragrafo longo o navegador ignora de qualquer forma */
  main h1,
  main h2,
  main .doc > div > .answer{text-wrap:balance}

  /* o `.post-meta` e flex: quem centraliza e o `justify-content` */
  main .post-meta{justify-content:center}

  /* BOTAO de largura cheia. O `.btn` ja traz `text-align:center`, que e o que
     falta quando o rotulo quebra em duas linhas: `justify-content` centraliza
     o ITEM flex, nao o texto dentro dele. */
  main .head-cta,
  main .cta .row{flex-direction:column}
  main .head-cta .btn,
  main .cta .row .btn{width:100%}

  /* --- o que NAO acompanha ------------------------------------------------
     Listas com miniatura, passos numerados, fatos, tabelas e caixas mantem o
     alinhamento a esquerda: neles o prumo vem da figura, do numero ou da
     borda, e o texto centralizado descola do que o ancora. */
  main .silo-list a,
  main .post-list a,
  main .rel-list a,
  main .steps li,
  main .facts,
  main .callout,
  main .takeaways ul,
  main .axis li,
  main .tbl{text-align:left}
}

/* ---------------------------------------------------------------------------
   Cabecalho de SERVICO: a foto sangra ate a borda
   ---------------------------------------------------------------------------
   A foto era um retangulo modesto a direita, com muito branco em volta, nas
   paginas que mais convertem. Agora ela vai ate a borda direita da janela e
   ganha altura.

   A margem NAO e `calc(50% - 50vw)`: dentro de um item de grid essa
   porcentagem se resolve contra a COLUNA, nao contra o bloco central, e a foto
   termina centenas de pixels FORA da tela - armadilha registrada no repo, e o
   `overflow` da secao esconde isso de todo medidor de `scrollWidth`.
   A conta certa e: o padding do bloco MAIS a sobra de cada lado quando a
   janela e mais larga que o bloco central (60,5rem).
   -------------------------------------------------------------------------- */
@media (min-width:62.01rem){
  .pghead--photo:has(.pgh-bleed){overflow:hidden}
  .pgh-bleed{margin-right:calc(-1 * (var(--pad) + max(0px,(100vw - var(--sheet-w))/2)))}
  /* A foto ACOMPANHA a altura do cabecalho em vez de flutuar centrada nele:
     com `align-items:center` ela media 416px numa faixa de 677 e sobravam 260px
     de papel vazio dividido em cima e embaixo do proprio hero - exatamente a
     leitura de "pagina pobre" que a foto veio corrigir. */
  .pgh-bleed{height:100%;min-height:22rem}
  .pgh-bleed img{aspect-ratio:auto;height:100%;min-height:22rem;
    object-fit:cover;border-radius:0}
  /* O texto fica com a fatia MAIOR da grade: a foto ja ganha de volta toda a
     sobra da janela pelo sangramento, entao apertar a coluna do titulo aqui so
     quebrava o H1 em quatro linhas dentro de 434px. */
  .pghead--photo:has(.pgh-bleed) .pgh-grid{
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    align-items:stretch;gap:3rem}
  .pghead--photo:has(.pgh-bleed) .pgh-grid > div:first-child{
    display:flex;flex-direction:column;justify-content:center}
}

/* ===========================================================================
   PAGINA DE SERVICO: anatomia diferente por bloco
   ===========================================================================
   Ate aqui a pagina era secao apos secao com o MESMO ritmo (h2, frase-resposta,
   dois paragrafos, quatro vezes seguidas). E o que o repo registra como o que
   faz uma pagina parecer datada, e nao se resolve com cor nem com fonte: cada
   bloco precisa de FORMA propria. Sao tres.
   ========================================================================= */

/* --- 1. FICHA TECNICA, em main+note ----------------------------------------
   Ela e a primeira coisa depois do cabecalho, entao e ela que da o tom.
   Espremida na coluna de leitura de 44rem lia como tabela de rodape; agora
   ocupa texto+margem e cada par e uma CELULA com fio de cabelo, que e como uma
   ficha de especificacao se le de verdade. */
.facts--wide{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  padding:1.5rem 0 .3rem;margin:0}
.facts-k{font-family:var(--body);font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wood-act);
  margin:0 0 1.25rem}
.facts--wide dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 3.2rem;font-size:inherit}
.facts--wide dl > div{padding:1.05rem 0 1.15rem;border-top:1px solid var(--line)}
/* a primeira LINHA nao leva fio: o fio de 2px do bloco ja esta logo acima */
.facts--wide dl > div:nth-child(-n+2){border-top:0;padding-top:0}
.facts--wide dt{font-family:var(--body);font-size:.69rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
  padding:0;margin:0 0 .45rem}
.facts--wide dd{margin:0;font-family:var(--display);font-size:1.02rem;
  line-height:1.42;color:var(--ink)}

/* --- 2. TEXTO CORRIDO NUMERADO ---------------------------------------------
   O bloco de leitura continua sendo o bloco de leitura, mas cada secao passa a
   abrir com fio + numeral. O numeral fica PEQUENO de proposito: numero grande
   so cabe em largura cheia, e dentro de uma coluna de 44rem ele encosta no
   titulo (armadilha registrada). */
.doc--num > div:not(.facts){counter-reset:sec}
.doc--num > div:not(.facts) > h2{counter-increment:sec;margin-top:3.4rem;padding-top:1.6rem;
  border-top:1px solid var(--line)}
.doc--num > div:not(.facts) > h2::before{content:counter(sec,decimal-leading-zero);
  display:block;font-family:var(--body);font-size:.69rem;font-weight:700;
  letter-spacing:.16em;color:var(--wood-act);margin-bottom:.75rem}
/* a primeira secao ja vem logo abaixo do fio de 2px da ficha */
.doc--num > div:not(.facts) > h2:first-child{margin-top:2.4rem;padding-top:0;border-top:0}

/* --- 3. O PROCESSO COMO CAPITULO -------------------------------------------
   Sangra de borda a borda por ser filha `.full` do `.sheet`. Encosta na foto
   de cima sem folga nenhuma: a `.band` nao tem margem embaixo de proposito, e
   uma tira de papel entre as duas superficies e exatamente o defeito que o
   Insider ja apontou uma vez.
   O numeral do passo troca `--sand` por `--wood`: sobre `--paper-alt` o sand
   da 1,1:1 e simplesmente nao existe na tela. */
.process-bg{background:var(--paper-alt);border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);padding:3.4rem 0 3.7rem}
.process-in{width:min(100% - 2*var(--pad),var(--sheet-w));margin-inline:auto}
.process h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0}
.steps--big{margin-top:2.3rem;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3.2rem}
.steps--big li{grid-template-columns:3.3rem minmax(0,1fr);gap:1rem;
  padding:1.35rem 0 1.45rem;border-top:1px solid var(--sand)}
.steps--big li:nth-child(-n+2){border-top:0;padding-top:0}
.steps--big li::before{font-size:2.15rem;color:var(--wood)}
.steps--big b{font-size:1.1rem}

@media (max-width:52rem){
  .facts--wide dl{grid-template-columns:minmax(0,1fr);gap:0}
  .facts--wide dl > div:nth-child(2){border-top:1px solid var(--line);
    padding-top:1.05rem}
  .steps--big{grid-template-columns:minmax(0,1fr);gap:0}
  .steps--big li:nth-child(2){border-top:1px solid var(--sand);
    padding-top:1.35rem}
}
@media (max-width:40rem){
  .process-bg{padding:2.6rem 0 2.8rem}
  .doc--num > div:not(.facts) > h2{margin-top:2.6rem;padding-top:1.3rem}
  .steps--big li{grid-template-columns:minmax(0,1fr);gap:.2rem}
}
/* Com UMA coluna, `grid-column:2` da regra base manda `b` e `span` para uma
   coluna IMPLICITA, que e `auto`, ou seja MAX-CONTENT: a linha inteira estoura
   a tela e nenhum medidor de `scrollWidth` do documento precisa acusar, porque
   quem vaza e a celula. Devolver os dois para a coluna 1. */
@media (max-width:40rem){
  .steps li > b,.steps li > span{grid-column:1}
}

/* Relacionados em largura cheia na pagina de servico: na coluna de leitura as
   tres miniaturas ficavam com 220px cada, que nao mostra piso nenhum. Como
   filha `.wide` do `.sheet` a lista ocupa texto+margem e cada foto passa de
   300px. `.doc` fecha em 3,5rem embaixo, entao aqui a margem propria basta. */
.related.wide{margin-top:2.6rem}
.related.wide .rel-list{gap:1.6rem}

/* --- CTA em duas colunas ----------------------------------------------------
   Manchete a esquerda, apoio e acao a direita, com os FUNDOS alinhados.
   Empilhada numa coluna so ela ocupava 704px de uma faixa de 968 e deixava
   metade da superficie escura morta - o arranjo que o repo registra como o que
   le "pobre". A manchete perde o `max-width: 20ch` aqui: agora quem limita a
   largura dela e a propria coluna. */
.cta-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:2rem 3.2rem;align-items:end}
.cta-grid h2{max-width:none}
.cta-side p{margin-top:0}
@media (max-width:52rem){
  .cta-grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:1.2rem}
}

/* `.rel-list` e so uma CLASSE (0,1,0) e perde para `.doc ul` (0,1,1): a lista
   de relacionados herdava o recuo de 1,15rem do texto corrido e as tres
   miniaturas ficavam 18px fora do prumo do resto da pagina. E `.doc li + li`
   (0,1,2) empurrava o segundo e o terceiro item 6px para baixo, entao a
   primeira foto da fileira comecava mais alto que as outras duas. Nenhum gate
   pega nenhuma das duas: nao e overflow, nao e contraste, o HTML e valido. */
.doc .rel-list{margin-left:0}
.doc .rel-list li + li{margin-top:0}