/* =========================================================================
   Brisa Engenharia — folha de estilo única
   Paleta e tipografia derivadas da marca real (ver design-system/).
   ========================================================================= */

:root{
  /* cor */
  --ink:#27292E;          /* traço do logo (vetor)            */
  --ink-deep:#1E2024;     /* rodapé                            */
  --slate:#53575B;        /* banda da capa da apresentação     */
  --bone:#EEE9E6;         /* IDV: fundos e elementos maiores   */
  --paper:#FFFFFF;
  --mist:#D9D9D9;
  --olive:#73784F;        /* headline serifada da apresentação */
  --olive-ink:#5C6140;    /* acento p/ texto pequeno em claro  */
  --olive-soft:#A8AE7E;   /* acento sobre ink                  */
  --muted:#5A5E62;
  --line:rgba(39,41,46,.16);
  --line-dark:rgba(238,233,230,.22);

  /* tipografia */
  /* Rufina: serifada de título, pesos 400 e 700 reais.
     Average Sans: humanista de corpo, EXISTE SÓ NO PESO 400. Por isso
     nenhuma regra da sans pede 500/600/700: o navegador responderia com
     negrito sintético, que engorda o traço de forma irregular e muda de
     engine para engine. A hierarquia da sans vem de caixa alta, entreletra,
     tamanho e cor. */
  --ff-display:"Rufina",Georgia,"Times New Roman",serif;
  --ff-ui:"Average Sans","Helvetica Neue",Arial,sans-serif;
  --ff-body:"Average Sans","Helvetica Neue",Arial,sans-serif;

  --fs-display:clamp(2.05rem,5.3vw,3.9rem);
  --fs-h2:clamp(1.62rem,3.05vw,2.6rem);
  --fs-h3:clamp(1.06rem,1.42vw,1.24rem);
  --fs-lede:clamp(1.02rem,1.35vw,1.16rem);
  --fs-small:.875rem;
  --fs-eyebrow:.72rem;

  /* ritmo */
  --pad-sec:clamp(76px,9.6vw,152px);
  --gap:clamp(28px,3.4vw,56px);

  /* espaco: escala unica. Toda grade da pagina referencia estes tokens, em
     vez de um clamp proprio. Regra de ouro das grades de cartao: o vao de
     LINHA e sempre maior que o de COLUNA, senao a legenda de uma linha cola
     na imagem da linha seguinte. */
  --sp-1:8px;
  --sp-2:12px;                     /* tira de imagens colada        */
  --sp-3:18px;
  --sp-4:26px;
  --sp-5:clamp(22px,2.2vw,30px);   /* coluna de grade densa         */
  --sp-6:clamp(32px,3.6vw,52px);   /* coluna de grade padrao        */
  --sp-7:clamp(44px,5vw,72px);     /* linha de grade, bloco a bloco */
  --sp-8:clamp(56px,6.4vw,96px);   /* separacao de bloco maior      */

  /* alvo de toque minimo: WCAG 2.2 SC 2.5.8 pede 24x24 CSS px. Links de
     navegacao isolados usam 44px, que e o conforto real de dedo. */
  --alvo:24px;
  --alvo-conf:44px;

  /* Empilhamento. O widget do Merlin injeta z-index 9999 no runtime, e esta
     escala existe para as camadas modais do site ficarem ACIMA dele: sem
     isso a bolha flutuante do vendor aparece em cima do lightbox da galeria.
     --z-widget nao e aplicado a nada, e a referencia declarada. */
  --z-hdr:90;
  --z-widget:9999;        /* Merlin, injetado por script                */
  --z-cookie:10020;
  --z-scrim:10040;
  --z-drawer:10041;
  --z-lb:10060;
  --z-skip:10080;         /* atalho de teclado: sempre no topo de tudo   */
  --e:cubic-bezier(.16,.84,.28,1);
  --e2:cubic-bezier(.4,0,.2,1);
  --hdr:88px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;            /* as âncoras ficam com o motor de scroll */
  scroll-padding-top:calc(var(--hdr) + 8px);
}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font:400 1rem/1.72 var(--ff-body);
  overflow-x:hidden;
  overflow-wrap:anywhere;          /* anywhere, não break-word: entra no min-content */
}

img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--olive-ink);outline-offset:3px}
.bg-dark :focus-visible{outline-color:var(--olive-soft)}

::selection{background:var(--olive);color:var(--paper)}

.skip{
  position:absolute;left:12px;top:-64px;z-index:var(--z-skip);
  background:var(--ink);color:var(--paper);
  padding:12px 18px;font:400 var(--fs-small)/1 var(--ff-ui);
  transition:top .2s var(--e2);
}
.skip:focus{top:12px}

/* titulo que existe so para a arvore de acessibilidade: da nome a secao do
   diptico, que visualmente nao tem cabecalho */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------- layout */

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

section{position:relative}
.sec{padding:var(--pad-sec) 0}

.bg-bone{background:var(--bone)}
.bg-paper{background:var(--paper)}
.bg-slate{background:var(--slate);color:var(--paper)}
.bg-ink{background:var(--ink);color:var(--bone)}

/* ------------------------------------------- assinatura: escadinha de 3 filetes
   Três <span> REAIS (nunca ::before) — requisito do cliente e do design system. */

.rule3{
  display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:24px;flex:0 0 24px;margin-right:14px;
}
.rule3 i{
  display:block;height:1.5px;background:var(--olive);
  transform-origin:left center;
}
.bg-slate .rule3 i,.bg-ink .rule3 i{background:var(--olive-soft)}

.eyebrow{
  display:flex;align-items:center;
  font:400 var(--fs-eyebrow)/1.2 var(--ff-ui);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--olive-ink);
  margin-bottom:22px;
}
.bg-slate .eyebrow,.bg-ink .eyebrow{color:var(--bone)}

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

.display{
  font-family:var(--ff-display);font-weight:400;
  /* 1.28 e nao 1.18: a Rufina tem ascendente e descendente mais longos que a
     serifada anterior, e em 1.18 o vao de tinta entre duas linhas caiu para
     6,5px. O alvo e o vao medido, nao a razao: em 1.28 volta para ~12px. */
  line-height:1.28;letter-spacing:-.004em;
}
h1.display{font-size:var(--fs-display);hyphens:auto}
h2.display{font-size:var(--fs-h2)}

.lede{
  font-size:var(--fs-lede);line-height:1.62;color:var(--muted);
  max-width:62ch;
}
.bg-slate .lede,.bg-ink .lede{color:var(--mist)}

.prose p{max-width:62ch;color:var(--muted)}
.prose p + p{margin-top:1.05em}
.prose strong,p strong{
  /* Average Sans nao tem peso 700. Pedir negrito aqui geraria traço
     sintetico. A enfase vem do salto de cor (muted -> ink, mais de 2x de
     luminancia) somado a um respiro de entreletra. O <strong> segue no
     HTML, então a enfase chega igual em leitor de tela. */
  font-weight:400;color:var(--ink);letter-spacing:.008em;
}
.bg-slate .prose strong,.bg-ink .prose strong,
.bg-slate p strong,.bg-ink p strong{color:var(--paper)}

.small{font:400 var(--fs-small)/1.6 var(--ff-ui);color:var(--muted)}
.bg-slate .small,.bg-ink .small{color:var(--mist)}

.num{
  font:400 clamp(1.75rem,2.9vw,2.45rem)/1 var(--ff-ui);
  letter-spacing:.02em;color:var(--olive-ink);
  font-variant-numeric:tabular-nums;
}
.bg-ink .num,.bg-slate .num{color:var(--olive-soft)}

/* ------------------------------------------------------------------ botões */

.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 30px;border-radius:999px;              /* pill do IDV p8 */
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font:400 .8rem/1 var(--ff-ui);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background .3s var(--e2),color .3s var(--e2),border-color .3s var(--e2);
}
.btn:hover{background:var(--olive-ink);border-color:var(--olive-ink)}
.btn:active{transform:scale(.985)}
.btn svg{width:15px;height:15px;flex:0 0 15px;transition:transform .3s var(--e2)}
.btn:hover svg{transform:translateX(4px)}

.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(39,41,46,.4)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.btn--light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--light:hover{background:var(--olive-soft);border-color:var(--olive-soft);color:var(--ink)}

.btn--sm{padding:14px 24px;font-size:.7rem;min-height:var(--alvo-conf)}

.btn--outline-dark{background:transparent;color:var(--bone);border-color:rgba(238,233,230,.42)}
.btn--outline-dark:hover{background:rgba(238,233,230,.14);border-color:var(--bone);color:var(--paper)}

.linkline{
  display:inline-flex;align-items:center;gap:10px;
  font:400 var(--fs-small)/1 var(--ff-ui);letter-spacing:.08em;
  text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--olive);
  padding:8px 0 6px;min-height:var(--alvo);  /* WCAG 2.5.8 */
  transition:color .3s var(--e2),border-color .3s var(--e2);
}
.linkline:hover{color:var(--olive-ink)}
.bg-ink .linkline,.bg-slate .linkline{color:var(--paper);border-color:var(--olive-soft)}
.bg-ink .linkline:hover,.bg-slate .linkline:hover{color:var(--olive-soft)}

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

.hdr{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-hdr);
  background:var(--bone);
  border-bottom:1px solid var(--line);
  transition:height .4s var(--e2),background .4s var(--e2);
}
.hdr__in{
  height:var(--hdr);display:flex;align-items:center;gap:24px;
  transition:height .4s var(--e2);
}
.hdr[data-compact="true"] .hdr__in{height:64px}
.hdr[data-compact="true"]{background:rgba(238,233,230,.94);backdrop-filter:blur(10px)}

.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand img{height:44px;width:auto;transition:height .4s var(--e2)}
.hdr[data-compact="true"] .brand img{height:36px}

.nav{margin-inline:auto}
.nav ul{display:flex;align-items:center;gap:clamp(14px,2vw,34px)}
.nav a{
  position:relative;display:block;padding:8px 2px;
  font:400 .74rem/1 var(--ff-ui);letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);
  transition:color .3s var(--e2);
}
.nav a .mk{
  position:absolute;left:50%;bottom:0;height:2px;width:100%;
  transform:translateX(-50%) scaleX(0);transform-origin:center;
  background:var(--olive);transition:transform .38s var(--e);
}
.nav a:hover{color:var(--olive-ink)}
.nav a:hover .mk,.nav a[aria-current="true"] .mk{transform:translateX(-50%) scaleX(1)}

.hdr__cta{flex:0 0 auto}

.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:40px;padding:0 9px;flex:0 0 auto;
  background:none;border:1px solid rgba(39,41,46,.28);border-radius:999px;cursor:pointer;
}
.burger i{display:block;height:1.5px;background:var(--ink);transition:transform .35s var(--e),opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0 0 0 auto;width:min(84vw,352px);z-index:var(--z-drawer);
  background:var(--ink);color:var(--bone);
  padding:104px 30px 40px;
  transform:translateX(101%);
  /* visibility:hidden tira o menu fechado da ordem de tabulação */
  visibility:hidden;
  transition:transform .5s var(--e),visibility .5s;
  overflow-y:auto;
}
.drawer[data-open="true"]{transform:translateX(0);visibility:visible}
.drawer ul{display:flex;flex-direction:column;gap:2px}
.drawer a{
  display:block;padding:15px 0;border-bottom:1px solid var(--line-dark);
  font:400 .92rem/1 var(--ff-ui);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
}
.drawer .btn{margin-top:30px;width:100%;justify-content:center}
.scrim{
  position:fixed;inset:0;z-index:var(--z-scrim);background:rgba(30,32,36,.5);
  opacity:0;visibility:hidden;transition:opacity .4s var(--e2),visibility .4s;
}
.scrim[data-open="true"]{opacity:1;visibility:visible}

/* -------------------------------------------------------------------- hero
   Arquitetura da capa da própria marca: foto limpa em cima, banda de
   assinatura sólida ancorada na base (sem véu por cima do texto). */

.hero{min-height:100svh;display:flex;flex-direction:column;padding-top:var(--hdr)}

.hero__media{
  position:relative;flex:1 1 auto;
  min-height:clamp(260px,58vh,680px);       /* a foto ganha a primeira tela */
  overflow:hidden;background:var(--mist);
}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;
}
.hero__credit{
  position:absolute;right:16px;bottom:14px;z-index:2;
  padding:7px 14px;border-radius:999px;
  background:rgba(24,26,29,.84);color:var(--paper);
  font:400 .68rem/1 var(--ff-ui);letter-spacing:.1em;text-transform:uppercase;
}

.hero__band{                    /* recebe .bg-slate no HTML: herda cor de texto do contexto escuro */
  padding:clamp(30px,3.6vw,50px) 0 clamp(34px,4vw,54px);
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  gap:var(--sp-6);align-items:end;
}
/* dimensionado para caber UMA frase por linha na coluna do hero */
.hero h1{color:var(--paper);font-size:clamp(1.6rem,4.5vw,2.42rem);line-height:1.28}
.hero h1 span{display:block}
.hero .eyebrow{color:var(--bone)}
.hero__aside{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero__aside .lede{max-width:36ch}
.hero__phone{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font:400 .82rem/1 var(--ff-ui);letter-spacing:.1em;color:var(--bone);
  min-height:var(--alvo);                    /* WCAG 2.5.8 */
  padding:5px 0;
}
.hero__phone svg{width:16px;height:16px;flex:0 0 16px}
.hero__phone:hover{color:var(--paper)}

/* -------------------------------------------------------------------- sobre */

.sobre__grid{
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:var(--sp-8);align-items:start;
}
.sobre h2{max-width:21ch;margin-bottom:26px}

.attrs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:34px;border-top:1px solid var(--line);
}
.attrs li{
  min-width:0;padding:18px 18px 0 0;
  font:400 .74rem/1.5 var(--ff-ui);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);
  border-right:1px solid var(--line);
}
.attrs li:last-child{border-right:0;padding-right:0}

.crea{margin-top:24px}

.framed{margin:0}
.framed__box{position:relative}
/* a moldura deslocada é irmã da imagem: fica FORA do clip da cortina e
   não desce até a legenda (o inset é relativo ao box da imagem, não ao figure) */
.framed .frame{
  position:absolute;inset:16px -16px -16px 16px;z-index:0;
  border:1px solid var(--olive);pointer-events:none;
}
.framed__img{position:relative;z-index:1;overflow:hidden}
.framed__img img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--mist)}
.framed figcaption{
  margin-top:34px;font:400 var(--fs-small)/1.5 var(--ff-ui);color:var(--muted);
}

/* --------------------------------------------------------- faixa de imagem */

.band{position:relative;overflow:hidden;isolation:isolate;background:var(--ink)}
.band__bg{position:absolute;inset:-12% 0;z-index:0;will-change:transform}
.band__bg img{width:100%;height:100%;object-fit:cover}
.band__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(24,26,29,.86) 0%,rgba(24,26,29,.72) 48%,rgba(24,26,29,.5) 100%);
}
.band__in{
  position:relative;z-index:2;
  padding:clamp(100px,13.5vw,214px) 0;
}
.band q{quotes:none;display:block}
.band q::before,.band q::after{content:none}
.band .display{color:var(--paper);max-width:21ch;font-size:clamp(1.72rem,3.7vw,2.95rem)}
.band .lede{color:var(--bone);margin-top:22px;max-width:52ch}

/* ----------------------------------------------------------------- serviços */

.sechead{max-width:50ch;margin-bottom:clamp(40px,5vw,72px)}
.sechead .lede{margin-top:20px}

.svc{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-8) var(--sp-7);          /* linha > coluna, era 63 contra 72 */
}
.svc__item{min-width:0;padding-top:22px;position:relative}
.svc__item .top{
  position:absolute;left:0;top:0;height:1px;width:100%;
  background:var(--olive);transform-origin:left center;
}
.svc__item h3{
  /* Rufina: e o h3 do titulo de servico, e "Header: Rufina" vale para todo
     nivel de cabecalho. Na sans de peso unico ele ficava indistinguivel do
     paragrafo logo abaixo. */
  font:400 var(--fs-h3)/1.35 var(--ff-display);letter-spacing:0;
  color:var(--ink);margin:14px 0 11px;
}
.svc__item p{color:var(--muted);max-width:46ch}
.svc__item .num{display:block}

/* -------------------------------------------------------- nossa forma de atuar */

.atuar{position:relative;background:var(--paper)}
.atuar__fig{margin:0;position:relative;overflow:hidden;background:var(--mist)}
.atuar__fig img{width:100%;height:100%;min-height:260px;object-fit:cover}
.atuar__body{padding:var(--pad-sec) 0}
.atuar h2{max-width:17ch;margin-bottom:24px}

/* ≥981px: a foto sangra até a borda esquerda da tela; o texto continua
   ancorado no mesmo container do header (coluna 2 do grid interno). */
@media (min-width:981px){
  .atuar__fig{position:absolute;left:0;top:0;bottom:0;width:45%;z-index:1}
  .atuar__inner{display:grid;grid-template-columns:47% minmax(0,1fr)}
  .atuar__body{grid-column:2;padding-left:clamp(30px,4vw,70px)}
}

.chain{
  display:flex;flex-wrap:wrap;margin-top:36px;
  border-top:1px solid var(--line);padding-top:20px;
}
.chain li{
  min-width:0;padding:2px 0 2px 13px;margin-right:13px;
  border-left:2px solid var(--olive);
  font:400 .69rem/1.4 var(--ff-ui);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);
}
@media (min-width:981px){
  .chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .chain li{margin-right:0;padding-right:8px}
}

/* -------------------------------------------------------------- compromisso */

.dots{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(238,233,230,.11) 1px,transparent 1px);
  background-size:22px 22px;
}
.dots--ink{background-image:radial-gradient(rgba(168,174,126,.14) 1px,transparent 1px)}

.compromisso{position:relative;overflow:hidden}
.compromisso .container{position:relative;z-index:1}
.compromisso h2{color:var(--paper);max-width:23ch}

.pillars{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  margin-top:clamp(42px,5vw,72px);
  border-top:1px solid var(--line-dark);
}
.pillars li{
  min-width:0;padding:28px 26px 0 0;
  border-right:1px solid var(--line-dark);
}
.pillars li:last-child{border-right:0;padding-right:0}
.pillars h3{
  font:400 .8rem/1.3 var(--ff-ui);letter-spacing:.13em;text-transform:uppercase;
  color:var(--paper);margin-bottom:12px;
}
.pillars p{font-size:.92rem;line-height:1.62;color:var(--mist)}

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

.proc{position:relative;padding-left:clamp(22px,3.6vw,54px)}
.proc__track{
  position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:var(--line);
}
.proc__fill{
  position:absolute;left:0;top:0;width:1px;height:100%;
  background:var(--olive);transform-origin:top center;
  transform:scaleY(var(--p,0));
}
.proc__list{display:block}
.proc__item{
  display:grid;grid-template-columns:minmax(0,238px) minmax(0,1fr);
  gap:clamp(14px,3vw,44px);align-items:baseline;
  padding:clamp(24px,3vw,36px) 0;
  border-bottom:1px solid var(--line);
}
.proc__item:first-child{padding-top:0}
.proc__item:last-child{border-bottom:0;padding-bottom:0}
.proc__head{display:flex;align-items:baseline;gap:16px;min-width:0}
.proc__head h3{
  font:400 var(--fs-h3)/1.3 var(--ff-display);letter-spacing:0;
  color:var(--ink);
}
.proc__item p{color:var(--muted);max-width:56ch}

/* ------------------------------------------------------------------- obras */

/* placa: imagem sozinha em largura total, sem texto por cima. Abre a secao
   de obras. A secao perde o padding de cima porque a placa encosta na
   anterior; o respiro entra depois da imagem. */
.obras{padding-top:0}
.plate{
  width:100%;overflow:hidden;background:var(--mist);
  margin-bottom:var(--pad-sec);
}
.plate img{
  width:100%;height:clamp(220px,38vw,540px);object-fit:cover;
  will-change:transform;
}

.grid3{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  /* linha 2,4x a coluna: e o que separa a legenda de uma linha da imagem
     da linha seguinte. Era 34 contra 30, praticamente igual. */
  gap:var(--sp-7) var(--sp-5);
}

.obra{position:relative;display:block;width:100%;min-width:0}
.obra__btn{
  position:absolute;inset:0;width:100%;height:100%;
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;z-index:4;
}
.obra__btn:focus-visible{outline:2px solid var(--olive-ink);outline-offset:4px}
.obra__fig{position:relative;margin:0;overflow:hidden;background:var(--mist)}
.obra__fig img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform 1.1s var(--e);
}
.obra:hover .obra__fig img,
.obra:has(.obra__btn:focus-visible) .obra__fig img{transform:scale(1.045)}
.obra__ring{
  position:absolute;inset:12px;z-index:2;border:1px solid rgba(238,233,230,.72);
  opacity:0;transform:scale(1.04);
  transition:opacity .45s var(--e2),transform .55s var(--e);
  pointer-events:none;
}
.obra:hover .obra__ring,
.obra:has(.obra__btn:focus-visible) .obra__ring{opacity:1;transform:scale(1)}
.obra__zoom{
  position:absolute;right:14px;top:14px;z-index:3;
  width:38px;height:38px;border-radius:999px;
  display:grid;place-items:center;
  background:rgba(30,32,36,.62);color:var(--paper);
  opacity:0;transform:translateY(-6px);
  transition:opacity .4s var(--e2),transform .4s var(--e);
}
.obra:hover .obra__zoom,
.obra:has(.obra__btn:focus-visible) .obra__zoom{opacity:1;transform:translateY(0)}
.obra__zoom svg{width:16px;height:16px}

.obra__meta{padding-top:16px}
.obra__status{
  display:inline-block;
  font:400 .66rem/1 var(--ff-ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--olive-ink);margin-bottom:9px;
}
.obra__meta h3{
  font:400 1.14rem/1.32 var(--ff-display);letter-spacing:0;color:var(--ink);
}
.obra__sub{
  margin-top:7px;display:flex;flex-wrap:wrap;gap:6px 12px;
  font:400 .8rem/1.5 var(--ff-ui);color:var(--muted);
}
.obra__sub .dot{color:var(--olive-ink)}

/* ---------------------------------------------------------------- essência */

.essencia__h{max-width:21ch;margin-bottom:clamp(34px,4vw,56px)}
.eyebrow--tight{margin-bottom:6px}
.essencia__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-8);align-items:start;
}
.mv{padding-left:clamp(20px,2.4vw,32px);border-left:1px solid var(--olive)}
.mv + .mv{margin-top:clamp(30px,3.4vw,44px)}
.mv h3{
  font:400 .76rem/1 var(--ff-ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--olive-ink);margin-bottom:14px;
}
.mv p{color:var(--muted);max-width:50ch}

.vals{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--sp-5);
}
.vals li{
  min-width:0;padding:15px 0;border-bottom:1px solid var(--line);
  font:400 .92rem/1.4 var(--ff-ui);letter-spacing:.02em;
  display:flex;align-items:baseline;gap:12px;
}
.vals .ix{
  font:400 .68rem/1.6 var(--ff-ui);color:var(--olive-ink);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}

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

.contato{position:relative;overflow:hidden}
.contato .container{position:relative;z-index:1}
.contato__grid{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:var(--sp-8);align-items:start;
}
.contato h2{color:var(--paper);max-width:19ch;margin-bottom:22px}

.steps{position:relative;padding-left:38px;margin-top:clamp(34px,4vw,48px)}
.steps__track{position:absolute;left:11px;top:10px;bottom:10px;width:1px;background:var(--line-dark)}
.steps__fill{
  position:absolute;left:11px;top:10px;width:1px;height:calc(100% - 20px);
  background:var(--olive-soft);transform-origin:top center;
  transform:scaleY(0);transition:transform 1.35s var(--e) .12s;
}
.steps[data-on="true"] .steps__fill{transform:scaleY(1)}
.steps__list{display:block}
.steps li{position:relative;padding-bottom:28px}
.steps li:last-child{padding-bottom:0}
.steps li .bullet{
  position:absolute;left:-38px;top:2px;
  width:23px;height:23px;border-radius:999px;
  border:1px solid var(--olive-soft);
  display:grid;place-items:center;
  font:400 .64rem/1 var(--ff-ui);color:var(--olive-soft);
  background:var(--ink);
}
.steps li h3{
  font:400 1.02rem/1.38 var(--ff-display);letter-spacing:0;
  color:var(--paper);margin-bottom:5px;
}
.steps li p{color:var(--mist);font-size:.94rem;max-width:44ch}
.steps li{opacity:0;transform:translateY(14px);transition:opacity .8s var(--e),transform .8s var(--e)}
.steps[data-on="true"] li{opacity:1;transform:none}
.steps[data-on="true"] li:nth-child(1){transition-delay:.18s}
.steps[data-on="true"] li:nth-child(2){transition-delay:.38s}
.steps[data-on="true"] li:nth-child(3){transition-delay:.58s}

.card-contato a{
  display:inline-flex;align-items:center;min-height:var(--alvo);
  padding:3px 0;
}
.card-contato{
  background:rgba(238,233,230,.06);
  border:1px solid var(--line-dark);
  padding:clamp(26px,3vw,40px);
}
.card-contato dl{margin:0;display:grid;gap:0}
.card-contato .row{padding:16px 0;border-bottom:1px solid var(--line-dark)}
.card-contato .row:last-child{border-bottom:0;padding-bottom:0}
.card-contato .row:first-child{padding-top:0}
.card-contato dt{
  font:400 .66rem/1 var(--ff-ui);letter-spacing:.18em;text-transform:uppercase;
  color:var(--olive-soft);margin-bottom:8px;
}
.card-contato dd{margin:0;font:400 1rem/1.5 var(--ff-ui);color:var(--paper)}
.card-contato dd a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s}
.card-contato dd a:hover{border-color:var(--olive-soft)}
.card-contato .btn{margin-top:28px;width:100%;justify-content:center}

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

.ftr{background:var(--ink-deep);color:var(--bone);position:relative;overflow:hidden}
.ftr__mark{
  position:absolute;right:-40px;bottom:-70px;width:min(320px,42vw);
  opacity:.05;z-index:0;pointer-events:none;
}
.ftr .container{position:relative;z-index:1}
.ftr__top{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr);
  gap:var(--sp-7);
  padding:clamp(56px,6vw,86px) 0 clamp(34px,4vw,50px);
}
.ftr__brand img{height:56px;width:auto}
.ftr__brand p{margin-top:18px;font:400 var(--fs-small)/1.6 var(--ff-ui);color:var(--mist);max-width:30ch}
.ftr h3{
  font:400 .66rem/1 var(--ff-ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--olive-soft);margin-bottom:18px;
}
.ftr__nav a,.ftr__contato a{
  /* alvo de 44px: sao links de navegacao isolados, nao links dentro de frase,
     entao a excecao "inline" da 2.5.8 nao se aplica a eles. */
  display:inline-flex;align-items:center;min-height:var(--alvo-conf);
  text-decoration:none;
  font:400 .92rem/1.4 var(--ff-ui);color:var(--bone);
  border-bottom:1px solid transparent;transition:border-color .3s,color .3s;
}
.ftr__nav li,.ftr__contato li{margin-bottom:0}
.ftr__contato li span{min-height:var(--alvo-conf);display:flex;align-items:center}
.ftr__nav a:hover,.ftr__contato a:hover{color:var(--paper);border-color:var(--olive-soft)}
.ftr__contato li span{display:block;font:400 .92rem/1.4 var(--ff-ui);color:var(--mist)}

.ftr__bot{
  border-top:1px solid var(--line-dark);
  padding:14px 0 22px;
  display:flex;flex-wrap:wrap;gap:4px 26px;align-items:center;justify-content:space-between;
  font:400 .8rem/1.5 var(--ff-ui);color:var(--mist);
}
.ftr__bot nav{display:flex;flex-wrap:wrap;gap:0 22px}
.ftr__bot a{
  display:inline-flex;align-items:center;min-height:var(--alvo);
  text-decoration:none;color:var(--mist);border-bottom:1px solid transparent;
}
.ftr__bot a:hover{color:var(--bone);border-color:var(--olive-soft)}


/* -------------------------------------------------------- duo de imagens
   Diptico em largura total: duas fotos grandes coladas, de borda a borda da
   tela. As legendas descem para o container, alinhadas com todo o resto da
   pagina (a imagem sangra, o texto nunca). Sem 100vw: a secao ja e block e
   ocupa 100% sem contar a barra de rolagem. */

.duo{padding-bottom:0}
.duo__pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px;width:100%;
}
.duo__cell{display:block;overflow:hidden;background:var(--mist);min-width:0}
.duo__cell img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  will-change:transform;
}
.duo__legend{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-6);
  padding-top:var(--sp-4);padding-bottom:var(--pad-sec);
}
.duo__legend span{
  display:block;max-width:42ch;
  font:400 var(--fs-small)/1.6 var(--ff-ui);color:var(--muted);
}

/* ---------------------------------------------------------- feed instagram */

.feed__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px 32px;margin-bottom:clamp(36px,4.2vw,58px);
}
.feed__h{max-width:19ch}
.feed__link{flex:0 0 auto}

/* a tira sangra de borda a borda, com vao de 2px entre as pecas: o feed
   vira uma faixa de imagem, nao quatro cartoes soltos no container.
   A tira e 26px mais larga que a tela e recuada 13px: a deriva horizontal
   do scroll (+/-11px) corre dentro dessa folga e nunca abre uma faixa vazia
   na borda. O overflow escondido na secao garante que nada seja pintado
   fora, mesmo se a folga mudar. */
.feed{overflow:hidden;padding-bottom:0}
.feed__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2px;width:calc(100% + 26px);margin-left:-13px;
}
.feed__grid li{min-width:0}
.feed__grid a{
  display:block;position:relative;overflow:hidden;background:var(--mist);
}
.feed__grid img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1s var(--e);
}
.feed__grid a:hover img,
.feed__grid a:focus-visible img{transform:scale(1.05)}


/* --------------------------------------------- widget do Merlin, na paleta
   O vendor injeta o proprio <style> no <head> DEPOIS desta folha, entao aqui
   e um dos poucos lugares onde !important e a ferramenta certa: sem ele a
   regra do vendor ganha por ordem de fonte.

   Ele entrega um disco #1B98D2 com o logo do WhatsApp em verde dentro. A
   imagem tem 64px num botao de 72px, ou seja, mudar so o fundo deixaria um
   anel de 4px na cor do site e o resto continuaria azul e verde. Entao o
   disco vai para --ink, igual a todo CTA da pagina, e o PNG do vendor da
   lugar ao glifo do WhatsApp em --paper, desenhado por mascara: o canal
   continua reconhecivel e a cor passa a ser a da marca. */

.merlin-button.merlin-button-popup{
  background:var(--ink) !important;
  display:grid !important;place-items:center !important;
  box-shadow:0 8px 26px rgba(39,41,46,.26) !important;
  transition:background .3s var(--e2),transform .3s var(--e2) !important;
}
.merlin-button.merlin-button-popup:hover{background:var(--olive-ink) !important}
.merlin-button.merlin-button-popup:active{transform:scale(.96) !important}
.merlin-button.merlin-button-popup:focus-visible{
  outline:2px solid var(--olive-soft) !important;outline-offset:3px !important;
}
.merlin-popup-icon{display:none !important}
.merlin-button.merlin-button-popup::after{
  content:"" !important;
  width:32px !important;height:32px !important;
  background:var(--paper) !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.966 1.164-.198.198-.396.223-.693.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.347-.446.52-.644.174-.198.232-.34.347-.567.116-.226.058-.421-.024-.567-.082-.145-.62-1.612-.85-2.204-.223-.582-.457-.5-.633-.51-.163-.008-.348-.01-.53-.01-.183 0-.48.069-.73.343-.25.274-.958.936-.958 2.283 0 1.347.98 2.65 1.117 2.831.137.182 1.928 3.086 4.75 4.216 2.822 1.13 2.822.753 3.33.706.507-.047 1.639-.67 1.87-1.317.232-.646.232-1.2.163-1.317-.07-.116-.256-.186-.553-.335zm-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884zm8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.966 1.164-.198.198-.396.223-.693.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.347-.446.52-.644.174-.198.232-.34.347-.567.116-.226.058-.421-.024-.567-.082-.145-.62-1.612-.85-2.204-.223-.582-.457-.5-.633-.51-.163-.008-.348-.01-.53-.01-.183 0-.48.069-.73.343-.25.274-.958.936-.958 2.283 0 1.347.98 2.65 1.117 2.831.137.182 1.928 3.086 4.75 4.216 2.822 1.13 2.822.753 3.33.706.507-.047 1.639-.67 1.87-1.317.232-.646.232-1.2.163-1.317-.07-.116-.256-.186-.553-.335zm-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884zm8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L0 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* com movimento reduzido, nada de escala nem transicao */
@media (prefers-reduced-motion:reduce){
  .merlin-button.merlin-button-popup{transition:none !important}
  .merlin-button.merlin-button-popup:active{transform:none !important}
}

/* ---------------------------------------------------------------- lightbox */


.lb{
  position:fixed;inset:0;z-index:var(--z-lb);display:none;
  background:rgba(24,26,29,.95);
}
.lb[data-open="true"]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.lb__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(14px,3vw,30px);color:var(--bone);
}
.lb__title{font:400 .84rem/1.4 var(--ff-ui);letter-spacing:.06em;min-width:0}
.lb__count{font:400 .78rem/1 var(--ff-ui);letter-spacing:.14em;color:var(--olive-soft);font-variant-numeric:tabular-nums}
.lb__stage{
  position:relative;display:grid;place-items:center;
  padding:0 clamp(10px,6vw,74px) clamp(20px,3.4vw,38px);min-height:0;
}
.lb__stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
}
.icon-btn{
  width:46px;height:46px;border-radius:999px;flex:0 0 46px;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(238,233,230,.08);border:1px solid rgba(238,233,230,.3);color:var(--bone);
  transition:background .3s var(--e2)}
.icon-btn:hover{background:rgba(238,233,230,.2)}
.icon-btn svg{width:18px;height:18px}
.lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
}
.lb__nav--prev{left:clamp(6px,2vw,20px)}
.lb__nav--next{right:clamp(6px,2vw,20px)}

/* ---------------------------------------------------------- banner cookies */

.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-cookie);
  background:var(--ink);color:var(--bone);
  border-top:1px solid var(--line-dark);
  transform:translateY(102%);transition:transform .6s var(--e);
}
.cookie[data-open="true"]{transform:translateY(0)}
.cookie__in{
  display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between;
  padding:20px 0 22px;
}
.cookie p{font:400 .86rem/1.6 var(--ff-body);color:var(--mist);max-width:64ch}
.cookie p a{color:var(--bone)}
.cookie__acts{display:flex;flex-wrap:wrap;gap:10px}

/* ------------------------------------------------------- páginas internas */

.ph{padding:calc(var(--hdr) + clamp(52px,6vw,90px)) 0 clamp(38px,4vw,56px);position:relative;overflow:hidden}
.ph .container{position:relative;z-index:1}
.ph h1{color:var(--paper);font-size:clamp(2rem,4.6vw,3.2rem)}
.ph .lede{margin-top:16px;color:var(--mist)}
.ph__lede{max-width:56ch}
.doc{padding:clamp(50px,6vw,86px) 0}
.doc__back{margin-top:34px}
/* 74ch resolvia com a Chivo; Average Sans tem ch 17% mais largo, e a mesma
   caixa passou de ~78 para ~92 caracteres por linha. 62ch devolve ~74. */
.doc__body{max-width:62ch}
/* cabecalho das paginas internas tambem em Rufina: na sans de peso unico o
   h2 nao se separava do paragrafo, mesmo problema dos h3 da home */
.doc__body h2{font:400 1.34rem/1.34 var(--ff-display);letter-spacing:0;margin:40px 0 12px;color:var(--ink)}
.doc__body h2:first-child{margin-top:0}
.doc__body h3{font:400 1.08rem/1.4 var(--ff-display);margin:26px 0 8px;color:var(--ink)}
.doc__body p,.doc__body li{color:var(--muted)}
.doc__body p + p{margin-top:1em}
.doc__body ul{margin:12px 0 0;padding-left:20px;list-style:disc}
.doc__body li{margin-bottom:8px}
.doc__body a{color:var(--olive-ink)}

.form{max-width:640px;margin-top:clamp(32px,4vw,46px)}
.form .field{margin-bottom:20px}
.form label{display:block;font:400 .72rem/1 var(--ff-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:9px}
.form input,.form select,.form textarea{
  width:100%;padding:13px 15px;background:var(--paper);
  border:1px solid rgba(39,41,46,.24);border-radius:2px;
  font:400 .95rem/1.5 var(--ff-body);
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--olive);outline:2px solid rgba(115,120,79,.28);outline-offset:0}
.form textarea{min-height:130px;resize:vertical}
.form .hint{font:400 .8rem/1.5 var(--ff-ui);color:var(--muted);margin-top:7px}
.form .consent{display:flex;flex-wrap:wrap;gap:11px;align-items:flex-start}
/* 24x24: alvo minimo da WCAG 2.5.8. Em 18px o quadradinho reprovava. */
.form .consent input{width:24px;height:24px;flex:0 0 24px;margin-top:1px;accent-color:var(--olive)}
.form .consent label{
  /* flex:1 1 0 com min-width:0 mantem o rotulo AO LADO da caixa depois que o
     flex-wrap foi ligado para o erro poder descer para a linha de baixo */
  flex:1 1 0;min-width:0;
  text-transform:none;letter-spacing:0;font:400 .88rem/1.55 var(--ff-body);color:var(--muted);margin:0;
}

/* erro por campo (WCAG 3.3.1 e 3.3.3): texto, nunca so a cor. O aviso tem
   um marcador em traco e o campo ganha borda e fundo proprios. */
.form input[aria-invalid],.form select[aria-invalid],.form textarea[aria-invalid]{
  border-color:#8C3A2B;background:#FDF7F5;
}
.form .field__err{
  display:flex;gap:8px;margin-top:8px;
  font:400 .8rem/1.45 var(--ff-ui);color:#7A3224;
}
.form .field__err::before{
  content:"";flex:0 0 2px;align-self:stretch;background:#8C3A2B;
}
/* o erro do consentimento e o terceiro item do flex: sem width:100% ele
   fica ao lado do rotulo em vez de abaixo dele */
.form .consent .field__err{flex:0 0 100%;margin-left:35px}

.form__msg{
  margin-top:18px;padding:14px 16px;border-left:2px solid var(--olive);
  background:var(--paper);font-size:.92rem;
}
.form__msg[data-state="erro"]{border-left-color:#8C3A2B;color:#7A3224;background:#FDF7F5}

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

@media (max-width:1180px){
  .pillars{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pillars li:nth-child(3){border-right:0;padding-right:0}
  .pillars li:nth-child(n+4){border-top:1px solid var(--line-dark);margin-top:26px;padding-top:26px}
}

@media (max-width:980px){
  :root{--hdr:74px}
  .feed__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav,.hdr__cta{display:none}
  .burger{display:flex;margin-left:auto}

  .hero__grid{grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
  .hero h1{max-width:26ch}

  .sobre__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .framed .frame{inset:12px -12px -12px 12px}

  .svc{grid-template-columns:minmax(0,1fr)}

  .atuar__fig img{min-height:300px;max-height:56vh}
  .atuar__body{padding:clamp(44px,7vw,64px) 0}

  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}

  .essencia__h{max-width:24ch;margin-bottom:clamp(34px,4vw,56px)}
.eyebrow--tight{margin-bottom:6px}
.essencia__grid{grid-template-columns:minmax(0,1fr);gap:44px}

  .contato__grid{grid-template-columns:minmax(0,1fr);gap:44px}

  .ftr__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}
  .ftr__brand{grid-column:1 / -1}
}

@media (max-width:700px){
  /* No celular o diptico empilha e cada legenda precisa ficar logo abaixo
     da SUA foto, nao as duas juntas no fim. display:contents dissolve as
     duas caixas intermediarias, os quatro filhos viram itens da propria
     secao e a ordem passa a ser foto, legenda, foto, legenda. */
  .duo{
    display:grid;grid-template-columns:minmax(0,1fr);
    row-gap:var(--sp-3);padding-bottom:var(--pad-sec);
  }
  .duo__pair,.duo__legend{display:contents}
  .duo__cell:nth-of-type(1){order:1}
  .duo__legend span:nth-of-type(1){order:2}
  .duo__cell:nth-of-type(2){order:3;margin-top:var(--sp-5)}
  .duo__legend span:nth-of-type(2){order:4}
  .duo__legend span{padding:0 24px;max-width:none}
  .proc__item{grid-template-columns:minmax(0,1fr);gap:10px}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars li{border-right:1px solid var(--line-dark)}
  .pillars li:nth-child(2n){border-right:0;padding-right:0}
  .pillars li:nth-child(n+3){border-top:1px solid var(--line-dark);margin-top:22px;padding-top:22px}
}

@media (max-width:560px){
  :root{--pad-sec:clamp(52px,12vw,76px)}
  h1.display{hyphens:manual}
  .grid3{grid-template-columns:minmax(0,1fr)}
  .pillars{grid-template-columns:minmax(0,1fr)}
  .pillars li{border-right:0;padding-right:0}
  .pillars li:nth-child(n+2){border-top:1px solid var(--line-dark);margin-top:20px;padding-top:20px}
  .vals{grid-template-columns:minmax(0,1fr)}
  .attrs{grid-template-columns:minmax(0,1fr)}
  .attrs li{border-right:0;padding:14px 0}
  .attrs li + li{border-top:1px solid var(--line)}
  .chain li{margin-right:0;width:100%;padding:7px 0 7px 14px}
  .cookie__in{flex-direction:column;align-items:stretch}
  .cookie__acts{flex-direction:column}
  .cookie__acts .btn{width:100%;justify-content:center}
  .ftr__top{grid-template-columns:minmax(0,1fr)}
  .ftr__bot{flex-direction:column;align-items:flex-start}
  }