/* =========================================================
   POLEZI ADVOGADOS — style.css
   Direito sob medida.
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face{
  font-family:"PP Hatton";
  src:url("../fonts/PPHatton/PPHatton-Ultralight.otf") format("opentype");
  font-weight:200; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PP Hatton";
  src:url("../fonts/PPHatton/PPHatton-Medium.otf") format("opentype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PP Hatton";
  src:url("../fonts/PPHatton/PPHatton-MediumItalic.otf") format("opentype");
  font-weight:500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"PP Hatton";
  src:url("../fonts/PPHatton/PPHatton-Bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Neue Montreal";
  src:url("../fonts/NeueMontreal/NeueMontreal-Light.otf") format("opentype");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Neue Montreal";
  src:url("../fonts/NeueMontreal/NeueMontreal-Regular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Neue Montreal";
  src:url("../fonts/NeueMontreal/NeueMontreal-Italic.otf") format("opentype");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Neue Montreal";
  src:url("../fonts/NeueMontreal/NeueMontreal-Medium.otf") format("opentype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Neue Montreal";
  src:url("../fonts/NeueMontreal/NeueMontreal-Bold.otf") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --deep:      #0A2D27;   /* near-black petrol green */
  --teal:      #076457;   /* brand teal */
  --teal-2:    #0a7a68;   /* hover state */
  --mist:      #EDEFF3;   /* light section bg */
  --sand:      #E6D8BD;   /* warm accent bg */
  --stone:     #CACACA;   /* hairlines / muted */
  --paper:     #FFFFFF;

  --ink:       var(--deep);
  --ink-soft:  rgba(10,45,39,.66);
  --ink-faint: rgba(10,45,39,.45);
  --on-dark:       #F4F5F2;
  --on-dark-soft:  rgba(244,245,242,.72);
  --on-dark-faint: rgba(244,245,242,.45);

  --serif: "PP Hatton", "Iowan Old Style", Georgia, serif;
  --sans:  "Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --content: 1180px;
  --gutter: clamp(20px, 6.26vw, 130px);
  --edge: 1px solid var(--stone);
  --grid-gap: clamp(16px, 1.6vw, 32px);  /* gap da grade de 4 colunas (áreas + profissionais) */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html, body{ height:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
svg{ display:block; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

/* ---------- Layout helpers ---------- */
.wrap{
  max-width:var(--content);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.grid-wrap{
  /* Mesma largura/margem das seções em 4 colunas (áreas, profissionais) */
  padding-inline:var(--gutter);
}
.section{
  padding-block: clamp(64px, 10vw, 128px);
}
.section--tight{ padding-block: clamp(48px, 7vw, 88px); }
.section--dark{ background:var(--deep); color:var(--on-dark); }
.section--teal{ background:var(--teal); color:var(--on-dark); }
.section--mist{ background:var(--mist); }
.section--sand{ background:var(--sand); }
.rule{ border:0; border-top:var(--edge); }
.rule--dark{ border-top:1px solid rgba(244,245,242,.16); }

.heading-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  padding-bottom:22px;
  border-bottom:var(--edge);
  margin-bottom:44px;
}
.section--dark .heading-row{ border-bottom-color:rgba(244,245,242,.16); }
.heading-row h2{ margin:0; }
.heading-row .kicker-link{
  flex:none;
  font-size:.95rem;
  padding-bottom:.4rem;
}

/* ---------- Type scale ---------- */
.label{
  font-family:var(--sans);
  font-weight:500;
  font-size:.8rem;
  letter-spacing:.02em;
  color:var(--teal);
}
.section--dark .label{ color:#8fd9c9; }

h1{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.04;
  font-size:clamp(2.3rem, 4.6vw, 4.1rem);
}
h2{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.08;
  font-size:clamp(1.9rem, 3.4vw, 2.9rem);
}
h3{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.15;
  font-size:clamp(1.25rem, 1.8vw, 1.5rem);
}
.eyebrow-serif{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  color:var(--teal);
  font-size:1.05rem;
}
.lede{
  font-size:clamp(1.05rem, 1.4vw, 1.25rem);
  color:var(--ink-soft);
  max-width:46ch;
  line-height:1.55;
}
.section--dark .lede{ color:var(--on-dark-soft); }
p.body{
  font-size:1rem;
  color:var(--ink-soft);
  max-width:58ch;
  line-height:1.6;
}
.section--dark p.body{ color:var(--on-dark-soft); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--sans);
  font-weight:500;
  font-size:.95rem;
  padding:.85rem 1.5rem;
  border-radius:2px;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:14px; height:14px; flex:none; transition:transform .2s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

.btn--solid{ background:var(--teal); color:#fff; }
.btn--solid:hover{ background:var(--teal-2); }

.btn--ghost{
  border:1px solid var(--stone);
  color:var(--ink);
}
.btn--ghost:hover{ border-color:var(--teal); color:var(--teal); }

.section--dark .btn--ghost{ border-color:rgba(244,245,242,.35); color:var(--on-dark); }
.section--dark .btn--ghost:hover{ border-color:#8fd9c9; color:#8fd9c9; }

.btn--sand{ background:var(--sand); color:var(--deep); }
.btn--sand:hover{ background:#dccba7; }

.link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:500;
  font-size:.95rem;
  color:var(--teal);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .2s var(--ease), gap .2s var(--ease);
}
.link svg{ width:12px; height:12px; transition:transform .2s var(--ease); }
.link:hover{ border-color:currentColor; }
.link:hover svg{ transform:translateX(3px); }
.section--dark .link{ color:#8fd9c9; }

/* Small-caps, always-underlined variant used for a few CTAs
   (matches the tracked-uppercase treatment used in the nav). */
.link--caps{
  text-transform:uppercase;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.04em;
  border-color:currentColor;
}

/* ---------- Header (injected by js/menu.js) ---------- */
.site-header{
  position:sticky; top:0; z-index:80;
  background:rgba(244,245,242,.86);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid rgba(10,45,39,.1);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(244,245,242,.96);
  border-bottom-color:rgba(10,45,39,.14);
}
.site-header__inner{
  padding-inline:var(--gutter);
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:24px;
}
.site-header__logo{ flex:none; display:flex; align-items:center; margin-right:auto; }
.site-header__logo img{ height:50px; width:auto; }

/* Desktop nav is a fixed-width block, right-aligned to the page's
   right margin, with that width matching the hero photo column's
   width (25.57vw) — see reference layout. */
.site-nav{
  display:flex;
  align-items:center;
  gap:clamp(24px, 2.6vw, 44px);
  flex:none;
}
.site-nav .nav-link{
  font-size:.8rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-soft);
  position:relative;
  padding-block:4px;
  white-space:nowrap;
}
.site-nav .nav-link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--teal);
  transform:scaleX(0); transform-origin:right;
  transition:transform .25s var(--ease);
}
.site-nav .nav-link:hover{ color:var(--ink); }
.site-nav .nav-link:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav-item{ position:relative; display:flex; align-items:center; gap:2px; }
.nav-sub-toggle{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  color:var(--ink-soft);
  border-radius:2px;
  transition:transform .2s var(--ease), color .2s var(--ease);
}
.nav-sub-toggle svg{ width:12px; height:12px; }
.nav-item.is-open .nav-sub-toggle,
.nav-item:hover .nav-sub-toggle{ color:var(--ink); }
.nav-item.is-open .nav-sub-toggle{ transform:rotate(180deg); }

/* Submenu (dropdown) */
.nav-sub{
  position:absolute;
  top:calc(100% + 18px);
  left:-22px;
  min-width:260px;
  padding:10px 0;
  background:var(--paper);
  border:1px solid rgba(10,45,39,.1);
  box-shadow:0 18px 40px -18px rgba(10,45,39,.28);
  display:flex;
  flex-direction:column;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index:90;
}
/* ponte invisível para o mouse não "cair" entre o item e o submenu */
.nav-sub::before{ content:""; position:absolute; left:0; right:0; top:-19px; height:19px; }
@media (min-width:901px){
  .nav-item.has-sub:hover .nav-sub,
  .nav-item.has-sub.is-open .nav-sub{ opacity:1; visibility:visible; transform:none; }
}
.nav-sub a{
  display:block;
  padding:10px 22px;
  font-size:.92rem;
  color:var(--ink-soft);
  white-space:nowrap;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.nav-sub a:hover{ background:var(--mist); color:var(--ink); }
.nav-sub a[aria-current="page"]{ color:var(--teal); font-weight:500; }
.nav-sub__all{
  font-size:.72rem !important;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--teal) !important;
  border-bottom:1px solid rgba(10,45,39,.08);
  margin-bottom:6px;
  padding-bottom:12px !important;
}

.site-header__actions{ display:flex; align-items:center; gap:1.4rem; flex:none; }
@media (min-width:901px){
  /* Only holds the mobile nav toggle; removing it from the flex
     flow at desktop keeps the nav flush against the right margin
     (no leftover flex-gap eating into that edge). */
  .site-header__actions{ display:none; }
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:8px;
  margin:-8px;
}
.nav-toggle span{
  width:22px; height:1px; background:var(--ink);
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Hero ----------
   Desktop: a hero ocupa exatamente a altura da tela, descontado o
   cabeçalho (92px). Texto centralizado na vertical; à direita, foto
   (32vw) + faixa verde (8vw). A legenda tem altura fixa e compacta. */
:root{ --header-h:92px; }
.hero{
  position:relative;
  overflow:hidden;
}
.hero__inner{
  display:flex;
  align-items:stretch;
}
.hero__copy{
  box-sizing:border-box;
  width:60vw;
  flex:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(40px, 6vh, 96px) clamp(24px, 4vw, 72px) clamp(40px, 6vh, 96px) var(--gutter);
}
.hero h1{ max-width:555px; margin-bottom:26px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.hero__media{
  width:40vw;      /* foto 32vw + faixa verde 8vw */
  flex:none;
  display:flex;
}
.hero__media-row{
  display:flex;
  align-items:stretch;
  flex:1 1 auto;
  min-height:0;
  width:100%;
}
.hero__photo-col{
  flex:0 0 80%;    /* 32vw dentro dos 40vw */
  display:flex;
  flex-direction:column;
  min-width:0;
}
.hero__photo{
  position:relative;
  flex:1 1 auto;
  overflow:hidden;
  min-height:0;
}
/* Foto em posição absoluta: ela preenche o espaço, mas não define
   a altura da hero (quem define é a tela, ou o texto no celular). */
.hero__photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 18%;
  display:block;
  filter:grayscale(1) contrast(1.02);
}
.hero__accent{
  flex:1 1 auto;
  background-image:url("../assets/hero-accent.jpg");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
}
.hero__caption{
  flex:none;
  background:var(--mist);
  padding:18px clamp(16px, 2vw, 28px) 22px;
}
.hero__caption p{
  font-size:.85rem;
  color:var(--ink-soft);
  line-height:1.55;
}

@media (min-width:901px){
  .hero__inner{
    /* -1px = linha inferior do cabeçalho */
    height:calc(100vh - var(--header-h) - 1px);
    height:calc(100svh - var(--header-h) - 1px);
    min-height:540px;
  }
}

/* ---------- Vídeo institucional (largura total, logo abaixo da hero) ---------- */
.film{
  position:relative;
  background:#000;
  line-height:0;
}
.film__video{
  width:100%;
  aspect-ratio:16/9;
  max-height:calc(100vh - var(--header-h));
  object-fit:cover;
  display:block;
}
.film__sound{
  position:absolute;
  right:var(--gutter);
  bottom:clamp(16px, 3vw, 36px);
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  line-height:1;
  padding:.6rem .95rem .6rem .75rem;
  border:1px solid rgba(244,245,242,.4);
  border-radius:999px;
  color:var(--on-dark);
  background:rgba(10,45,39,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.film__sound:hover{ background:rgba(10,45,39,.6); border-color:rgba(244,245,242,.7); }
.film__icon{ width:18px; height:18px; }
.film__icon--on{ display:none; }
.film__sound[aria-pressed="true"] .film__icon--on{ display:block; }
.film__sound[aria-pressed="true"] .film__icon--off{ display:none; }

/* Photo placeholder component — flag where real photography goes.
   (Kept for any section that still needs a placeholder.) */
.photo-ph{
  position:relative;
  border-radius:2px;
  overflow:hidden;
  background:
    radial-gradient(120% 140% at 15% 0%, #123c34 0%, var(--deep) 60%);
  min-height:220px;
  display:flex;
  align-items:flex-end;
}
.photo-ph::before{
  content:"";
  position:absolute; inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:78%;
  opacity:.65;
  mix-blend-mode:screen;
}
/* Decorative diamond graphics (from the brand's "apoios gráficos") —
   defined here, with paths relative to this stylesheet, since CSS
   custom properties holding url() resolve against the stylesheet
   that reads them rather than the page that sets them. */
.photo-ph--g10::before{ background-image:url("../assets/Apoios_Gra_ficos_-_10.png"); }
.photo-ph--g11::before{ background-image:url("../assets/Apoios_Gra_ficos_-_11.png"); }
.photo-ph--g12::before{ background-image:url("../assets/Apoios_Gra_ficos_-_12.png"); }
.photo-ph--g01::before{ background-image:url("../assets/Apoios_Gra_ficos_-_01.png"); }
.photo-ph--g02::before{ background-image:url("../assets/Apoios_Gra_ficos_-_02.png"); }
.photo-ph--g03::before{ background-image:url("../assets/Apoios_Gra_ficos_-_03.png"); }
.photo-ph--g04::before{ background-image:url("../assets/Apoios_Gra_ficos_-_04.png"); }
.photo-ph__tag{
  position:relative;
  margin:18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  font-size:.72rem;
  letter-spacing:.02em;
  color:var(--on-dark-soft);
  background:rgba(10,45,39,.55);
  border:1px solid rgba(244,245,242,.2);
  border-radius:2px;
}
.photo-ph__tag svg{ width:13px; height:13px; flex:none; opacity:.9; }

/* ---------- Direito sob medida (statement) ---------- */
.statement{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
}
.statement h2{ max-width:11ch; }
.statement__body{ padding-top:6px; }

/* ---------- Story (dark, first section) ----------
   Text row uses the same column split as the hero: heading 59.75%,
   supporting copy 40.25%. Below it, a 4-column grid of professional
   portraits, each with a frosted "glass" name/role caption. Margins
   follow the page's usual side gutter (no edge bleed this time). */
.story{ padding-block:0; }
.story__inner{
  box-sizing:border-box;
  padding-inline:var(--gutter);
  padding-block:max(var(--gutter), 56px);
}
.story__row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--grid-gap);
  align-items:start;
}
.story__heading{
  grid-column:1 / span 2;
  margin:0;
}
.story__text{
  grid-column:3 / span 2;
  padding-top:.6em;
}
.story__text p.body{ margin-bottom:16px; color:rgba(244,245,242,.86); }
.story .link{ color:var(--on-dark); }
.story__cta{ margin-top:30px; }

.pro-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--grid-gap);
  margin-top:calc(var(--gutter) * 1.15);
}
.pro-card{
  position:relative;
  aspect-ratio:317/467;
  overflow:hidden;
  background:#333;
}
.pro-card img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.001);
  transition:transform .8s var(--ease), filter .6s var(--ease);
}
/* Hover: leve aproximação da foto, legenda sobe e ganha o verde da marca */
.pro-card::after{
  content:"";
  position:absolute; inset:0;
  border:1px solid rgba(230,216,189,0);
  pointer-events:none;
  transition:border-color .4s var(--ease), inset .4s var(--ease);
}
.pro-card:hover img{ transform:scale(1.05); filter:contrast(1.04); }
.pro-card:hover::after{ inset:10px; border-color:rgba(230,216,189,.55); }
.pro-card__caption{ transition:background .4s var(--ease), padding .4s var(--ease); }
.pro-card:hover .pro-card__caption{
  padding-bottom:22px;
  background:linear-gradient(to top, rgba(7,100,87,.85), rgba(7,100,87,.25) 100%);
}
.pro-card__caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:14px 16px 16px;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:linear-gradient(to top, rgba(10,45,39,.55), rgba(10,45,39,.08) 100%);
}
.pro-card__name{
  color:#fff;
  font-weight:700;
  font-size:.92rem;
  margin:0;
  line-height:1.3;
}
.pro-card__role{
  color:rgba(255,255,255,.82);
  font-size:.78rem;
  margin:2px 0 0;
  line-height:1.3;
}

/* ---------- Diferenciais ---------- */
.diff-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--stone);
  border:1px solid var(--stone);
}
.diff-card{
  background:var(--paper);
  padding: 34px 30px 40px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.diff-card__icon{ width:52px; height:52px; }
.diff-card__icon img{ width:100%; height:100%; object-fit:contain; }
.diff-card h3{ max-width:16ch; }
.diff-card p{
  font-size:.94rem;
  color:var(--ink-soft);
  line-height:1.6;
}

/* ---------- Áreas de atuação (segunda seção) ----------
   Mesma grade de 4 colunas e mesmo gap da seção de profissionais.
   Linha 1: introdução ocupando as colunas 1–2 + dois cards.
   Linha 2: quatro cards. */
.areas{ padding-block:0; }
.areas__inner{
  padding-inline:var(--gutter);
  padding-block:max(var(--gutter), 56px);
}
.areas-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--grid-gap);
}
.areas__intro{
  grid-column:1 / span 2;
  display:flex;
  flex-direction:column;
  align-self:start;
  padding-right:clamp(0px, 3vw, 48px);
}
.areas__heading{
  color:var(--sand);
  margin-bottom:22px;
}
.areas__intro p.body{ max-width:50ch; }
.areas__cta{ margin-top:30px; }
.areas .link{ color:var(--on-dark); }

.area-card{
  background:rgba(244,245,242,.035);
  border:1px solid rgba(244,245,242,.1);
  padding:clamp(22px, 2vw, 32px) clamp(20px, 1.8vw, 28px) clamp(22px, 2vw, 30px);
  display:flex;
  flex-direction:column;
  gap:20px;
  min-height:clamp(250px, 21vw, 320px);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.area-card:hover{ background:rgba(244,245,242,.07); border-color:rgba(244,245,242,.2); }
.area-card__icon{ width:44px; height:44px; }
.area-card__icon img{ width:100%; height:100%; object-fit:contain; }
.area-card__title{
  color:var(--on-dark);
  max-width:18ch;
  font-size:clamp(1.15rem, 1.6vw, 1.35rem);
}
.area-card__desc{
  font-size:.9rem;
  line-height:1.6;
  color:var(--on-dark-soft);
  max-width:32ch;
}
.area-card__arrow{
  margin-top:auto;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(244,245,242,.3);
  border-radius:50%;
  color:var(--on-dark);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.area-card__arrow svg{ width:14px; height:14px; }
.area-card:hover .area-card__arrow{
  border-color:#8fd9c9;
  background:rgba(143,217,201,.12);
  transform:translateX(2px);
}

.area-card--featured{
  background:var(--sand);
  border-color:var(--sand);
}
.area-card--featured:hover{ background:#dfcda6; border-color:#dfcda6; }
.area-card--featured .area-card__title{ color:var(--deep); }
.area-card--featured .area-card__desc{ color:rgba(10,45,39,.7); }
.area-card--featured .area-card__arrow{
  border-color:rgba(10,45,39,.3);
  color:var(--deep);
}
.area-card--featured:hover .area-card__arrow{
  border-color:var(--deep);
  background:rgba(10,45,39,.08);
}


/* ---------- Pull statement (light, quote-led) ---------- */
.pull{
  text-align:left;
}
.pull__quote{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.18;
  font-size:clamp(1.6rem, 3vw, 2.35rem);
  max-width:20ch;
  margin-bottom:28px;
}
.pull__body{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:clamp(24px,5vw,72px);
  align-items:start;
  padding-top:28px;
  border-top:var(--edge);
}
.pull__promise{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:1.2rem;
  color:var(--teal);
  margin-top:18px;
}
.pull__cta{ margin-top:26px; }

/* ---------- Team band ---------- */
.team{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:40px;
  align-items:center;
}
.team__copy{ max-width:56ch; }
.team__copy p{ margin-top:16px; }
.team__mark{
  width:180px; height:auto; opacity:.9;
  justify-self:end;
}
.team__mark img{ width:100%; }

/* ---------- Articles ---------- */
.article-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--grid-gap);
}
.article-card{ display:flex; flex-direction:column; }
.article-card__thumb{
  aspect-ratio:4/3;
  margin-bottom:22px;
}
.article-card__thumb{ overflow:hidden; background:var(--stone); }
.article-card__thumb img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(1);
  transition:transform .8s var(--ease);
}
.article-card:hover .article-card__thumb img{ transform:scale(1.04); }
.article-card h3{ margin-bottom:10px; }
.article-card p{
  font-size:.95rem;
  color:var(--ink-soft);
  line-height:1.6;
  margin-bottom:16px;
}
.article-card .link{ margin-top:auto; }

.articles__all{
  margin-top:48px;
  display:flex;
  justify-content:center;
}

/* ---------- CTA final ---------- */
.cta-final{
  text-align:center;
  position:relative;
}
.cta-final__inner{
  max-width:1180px;
  margin-inline:auto;
}
.cta-final h2{ margin-bottom:8px; }
/* Título em duas linhas no desktop; no celular quebra naturalmente */
.cta-final h2 .nowrap{ display:block; white-space:nowrap; }
.cta-final .lede{ margin-inline:auto; margin-bottom:34px; max-width:46ch; }
.cta-final__prompt{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.3rem;
  margin-bottom:30px;
  color:#8fd9c9;
}

/* ---------- Footer (injected by js/footer.js) ---------- */
.site-footer{ background:#071f1b; color:var(--on-dark); }
.site-footer__top{
  padding-block: clamp(56px, 8vw, 88px) 48px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--grid-gap);
}
.site-footer__brand{ grid-column:1 / span 2; }
.site-footer__brand img{ width:clamp(120px, 12vw, 170px); height:auto; }
.site-footer__brand p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.15rem;
  color:#8fd9c9;
}
.footer-heading{
  font-size:.78rem;
  letter-spacing:.02em;
  color:var(--on-dark-faint);
  margin-bottom:18px;
}
.footer-nav li{ margin-bottom:12px; }
.footer-nav a{ font-size:.95rem; color:var(--on-dark-soft); }
.footer-nav a:hover{ color:#8fd9c9; }

.footer-contact p{ font-size:.95rem; color:var(--on-dark-soft); line-height:1.7; margin-bottom:6px; }
.footer-contact a{ color:var(--on-dark); }
.footer-contact a:hover{ color:#8fd9c9; }

.btn-whatsapp{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-top:14px;
  padding:.75rem 1.2rem;
  border-radius:2px;
  background:var(--sand);
  color:var(--deep) !important;
  font-weight:500;
  font-size:.92rem;
  transition:background .2s var(--ease);
}
.btn-whatsapp svg{ width:18px; height:18px; flex:none; }
.btn-whatsapp:hover{ background:#dccba7; }
.footer-social{ display:flex; gap:14px; margin-top:20px; }
.footer-social a{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(244,245,242,.25);
  border-radius:50%;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.footer-social a svg{ width:15px; height:15px; }
.footer-social a:hover{ border-color:#8fd9c9; background:rgba(143,217,201,.08); }

.site-footer__bottom{
  border-top:1px solid rgba(244,245,242,.14);
  padding-block:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:.82rem;
  color:var(--on-dark-faint);
}

/* ---------- Reveal on load (single orchestrated moment) ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(14px);
}
.is-ready [data-reveal]{
  opacity:1;
  transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.is-ready [data-reveal="1"]{ transition-delay:.05s; }
.is-ready [data-reveal="2"]{ transition-delay:.16s; }
.is-ready [data-reveal="3"]{ transition-delay:.27s; }
.is-ready [data-reveal="4"]{ transition-delay:.38s; }


/* =========================================================
   PÁGINA — ÁREAS DE ATUAÇÃO (areas-de-atuacao.html)
   Mesma grade de 4 colunas da home (--gutter + --grid-gap).
   ========================================================= */
.pa-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--grid-gap);
  padding-inline:var(--gutter);
}
[id]{ scroll-margin-top:calc(var(--header-h) + 8px); }

/* Hero — fundo branco, como na home. Título + texto + botão nas
   colunas 1–2; números do escritório em 2×2 nas colunas 3–4. */
.pa-hero{
  background:var(--paper);
  padding-block:clamp(64px, 9vw, 128px);
}
.pa-hero__head{ grid-column:1 / span 2; padding-right:clamp(0px, 3vw, 48px); }
.pa-hero__label{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:22px;
}
.pa-hero__title{ max-width:11ch; margin-bottom:26px; }
.pa-hero__cta{ margin-top:34px; }

.pa-stats{
  grid-column:3 / span 2;
  align-self:center;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  column-gap:var(--grid-gap);
  row-gap:clamp(36px, 4vw, 56px);
}
.pa-stat{
  padding-top:18px;
  border-top:1px solid var(--stone);
}
.pa-stat__num{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.6rem, 4.4vw, 4rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--deep);
  margin-bottom:12px;
}
.pa-stat__label{
  font-size:.9rem;
  line-height:1.45;
  color:var(--ink-soft);
  max-width:18ch;
}

/* Blocos de cada área */
.pa-area{
  background:var(--paper);
  padding-block:clamp(64px, 8vw, 120px);
}
.pa-area--alt{ background:var(--mist); }
.pa-area__head{
  grid-column:1 / span 2;
  align-self:start;
  padding-right:clamp(0px, 3vw, 48px);
}
@media (min-width:901px){
  /* título acompanha a leitura da lista ao rolar */
  .pa-area__head{ position:sticky; top:calc(var(--header-h) + 40px); }
}
.pa-area__meta{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:26px;
}
.pa-area__num{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--teal);
  padding:6px 10px;
  border:1px solid rgba(7,100,87,.35);
  border-radius:2px;
  line-height:1;
}
.pa-area__icon{ width:40px; height:40px; object-fit:contain; }
.pa-area__title{ margin-bottom:22px; }
.pa-area__quote{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.15rem, 1.55vw, 1.4rem);
  line-height:1.4;
  letter-spacing:-.005em;
  color:var(--teal);
  max-width:30ch;
}
.pa-area__body{
  grid-column:3 / span 2;
  padding-top:clamp(0px, 4.2vw, 66px);   /* alinha o texto com o título */
}
.pa-area__label{
  margin-top:34px;
  margin-bottom:6px;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.pa-list li{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:15px 0;
  border-bottom:1px solid rgba(10,45,39,.12);
  font-size:1rem;
  color:var(--ink);
}
.pa-list li::before{
  content:"";
  flex:none;
  width:7px; height:7px;
  transform:translateY(-2px) rotate(45deg);
  border:1px solid var(--teal);
}

/* Fechamento — verde, igual à seção dos profissionais da home */
.pa-closing{
  background:var(--teal);
  color:var(--on-dark);
  padding-block:clamp(72px, 9vw, 128px);
}
.pa-closing__title{
  grid-column:1 / span 2;
  max-width:13ch;
}
.pa-closing__text{
  grid-column:3 / span 2;
  padding-top:.6em;
}
.pa-closing__text p.body{ color:rgba(244,245,242,.86); margin-bottom:16px; }
.pa-closing .btn{ margin-top:18px; }

/* Item ativo no menu */
.site-nav .nav-link[aria-current="page"], .site-nav .nav-link.is-active{ color:var(--ink); }
.site-nav .nav-link[aria-current="page"]::after, .site-nav .nav-link.is-active::after{ transform:scaleX(1); }

@media (max-width:900px){
  .pa-hero__head, .pa-stats,
  .pa-area__head, .pa-area__body,
  .pa-closing__title, .pa-closing__text{ grid-column:1 / -1; }
  .pa-hero__head{ padding-right:0; }
  .pa-stats{ margin-top:48px; }
  .pa-area__head{ padding-right:0; }
  .pa-area__body{ padding-top:8px; }
  .pa-closing__title{ max-width:none; }
}


/* =========================================================
   PÁGINAS DE ÁREA (ex.: direito-empresarial.html)
   Hero reaproveita .hero da home; o resto usa a grade .pa-grid.
   ========================================================= */
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:24px;
}
.breadcrumb a{ color:var(--teal); border-bottom:1px solid transparent; transition:border-color .2s var(--ease); }
.breadcrumb a:hover{ border-color:currentColor; }
.hero--area h1{ max-width:12ch; }
.area-hero__quote{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.2rem, 1.7vw, 1.55rem);
  line-height:1.38;
  letter-spacing:-.005em;
  color:var(--teal);
  max-width:30ch;
}
.hero--area .hero__photo img{ object-position:62% 40%; }

/* Como atuamos — fundo verde, texto à esquerda, card claro à direita */
.area-detail{
  background:var(--teal);
  color:var(--on-dark);
  padding-block:clamp(72px, 9vw, 128px);
}
.area-detail__intro{
  grid-column:1 / span 2;
  padding-right:clamp(0px, 3vw, 48px);
  padding-top:clamp(0px, 2vw, 28px);
}
.area-detail__label{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(230,216,189,.85);
  margin-bottom:22px;
}
.area-detail__text{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.45rem, 2.2vw, 2rem);
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--on-dark);
  max-width:24ch;
}
.area-detail__card{
  grid-column:3 / span 2;
  background:var(--paper);
  color:var(--ink);
  padding:clamp(28px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(20px, 2.4vw, 32px);
}
.area-detail__card .pa-area__label{ margin-top:0; }
.area-detail__card .pa-list li:last-child{ border-bottom:0; }

.area-articles__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding-bottom:22px;
  margin-bottom:40px;
  border-bottom:var(--edge);
}
.pa-area__more{ margin-top:28px; }

/* Home: o card de área inteiro é clicável (link "esticado" da seta) */
.area-card{ position:relative; }
.area-card__arrow::after{ content:""; position:absolute; inset:0; }

@media (max-width:900px){
  .area-detail__intro, .area-detail__card{ grid-column:1 / -1; }
  .area-detail__intro{ padding:0 0 12px; }
  .hero--area .hero__media-row{ aspect-ratio:4/3; }
}


/* Página de área — hero com lista: altura mínima = tela (pode crescer) */
@media (min-width:901px){
  .hero--area .hero__inner{
    height:auto;
    min-height:calc(100vh - var(--header-h) - 1px);
    min-height:calc(100svh - var(--header-h) - 1px);
  }
}
.hero--area h1{ max-width:12ch; margin-bottom:26px; }
.hero--area .lede{ max-width:44ch; }
.area-hero__label{
  margin-top:30px;
  margin-bottom:4px;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.area-hero__list{ max-width:520px; }
.area-hero__list li{ padding:11px 0; font-size:.95rem; }
.hero--area .hero__cta{ margin-top:30px; }

/* Perguntas frequentes */
.faq{
  background:var(--mist);
  padding-block:clamp(72px, 9vw, 128px);
}
.faq__title{
  grid-column:1 / span 2;
  align-self:start;
  max-width:10ch;
}
@media (min-width:901px){
  .faq__title{ position:sticky; top:calc(var(--header-h) + 40px); }
}
.faq__list{
  grid-column:3 / span 2;
  border-top:1px solid rgba(10,45,39,.16);
}
.faq__item{ border-bottom:1px solid rgba(10,45,39,.16); }
.faq__q{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:24px 0;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.08rem, 1.35vw, 1.25rem);
  line-height:1.35;
  color:var(--ink);
  transition:color .2s var(--ease);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ color:var(--teal); }
.faq__icon{
  position:relative;
  flex:none;
  width:28px; height:28px;
  margin-top:-2px;
  border:1px solid rgba(10,45,39,.25);
  border-radius:50%;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .3s var(--ease);
}
.faq__icon::before, .faq__icon::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:10px; height:1.4px;
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease);
}
.faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq__item[open] .faq__icon{ background:var(--teal); border-color:var(--teal); color:#fff; }
.faq__item[open] .faq__icon::after{ transform:translate(-50%,-50%) rotate(0deg); }
.faq__a{ padding:0 52px 26px 0; }
.faq__a p{
  font-size:1rem;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:60ch;
}
@media (max-width:900px){
  .faq__title, .faq__list{ grid-column:1 / -1; }
  .faq__title{ max-width:none; margin-bottom:16px; }
  .faq__a{ padding-right:0; }
}


/* Página de área — hero branco + faixa de foto (largura total) */
.area-hero{
  background:var(--paper);
  padding-block:clamp(64px, 7vw, 104px) clamp(56px, 6.5vw, 96px);
}
.area-hero__head{ grid-column:1 / -1; }
.area-hero h1{ max-width:19ch; }

.area-band{
  display:flex;
  height:clamp(240px, 24vw, 460px);
}
.area-band__photo{
  position:relative;
  flex:1 1 auto;
  overflow:hidden;
}
.area-band__photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 30%;
  filter:grayscale(1) contrast(1.04);
}
.area-band__accent{
  flex:0 0 8vw;
  background-image:url("../assets/hero-accent.jpg");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
}

/* Experiência + atuação (fundo verde) */
.area-exp{
  background:var(--teal);
  color:var(--on-dark);
  padding-block:clamp(72px, 9vw, 128px);
}
.area-exp .pa-grid{ row-gap:clamp(36px, 4vw, 56px); }
.area-exp__intro{
  grid-column:1 / span 2;
  grid-row:1 / span 2;
  align-self:start;
  padding-right:clamp(0px, 3vw, 48px);
}
.area-exp__title{ max-width:14ch; margin-bottom:32px; }
.area-exp__p{
  grid-row:1;
  font-size:1rem;
  line-height:1.6;
  color:rgba(244,245,242,.9);
  padding-top:.5em;
}
.area-exp__p--1{ grid-column:3; }
.area-exp__p--2{ grid-column:4; }
.area-exp__list{
  grid-column:3 / span 2;
  grid-row:2;
  max-width:560px;
}
.area-exp__label{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(230,216,189,.85);
  margin-bottom:4px;
}
.pa-list--light li{
  color:var(--on-dark);
  border-bottom-color:rgba(244,245,242,.2);
}
.pa-list--light li::before{ border-color:var(--sand); }

/* Botão verde-escuro (sobre fundo verde) */
.btn--deep{ background:var(--deep); color:#fff; }
.btn--deep:hover{ background:#0f3b33; }

@media (max-width:900px){
  .area-exp__intro, .area-exp__p--1, .area-exp__p--2, .area-exp__list{
    grid-column:1 / -1; grid-row:auto;
  }
  .area-exp .pa-grid{ row-gap:20px; }
  .area-exp__intro{ padding:0 0 12px; }
  .area-exp__title{ margin-bottom:24px; }
  .area-exp__list{ margin-top:16px; }
  .area-band{ height:220px; }
  .area-band__accent{ flex-basis:14vw; }
}


/* Seção "O escritório" — foto da equipe de fundo, texto embaixo */
.office{
  position:relative;
  background:var(--deep);
  color:var(--on-dark);
  min-height:clamp(620px, 62vw, 1000px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.office__media{ position:absolute; inset:0; }
.office__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 22%;
  filter:grayscale(1) contrast(1.05);
}
.office__media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,45,39,.97) 0%, rgba(10,45,39,.9) 26%, rgba(10,45,39,.35) 52%, rgba(10,45,39,0) 70%);
}
.office__content{
  position:relative;
  width:100%;
  padding-block:clamp(56px, 6vw, 96px);
}
.office__lead{ grid-column:1 / span 2; padding-right:clamp(0px, 3vw, 48px); }
.office__label{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(230,216,189,.85);
  margin-bottom:18px;
}
.office__big{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.35rem, 2.1vw, 1.9rem);
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--on-dark);
  max-width:30ch;
}
.office__side{
  grid-column:3 / span 2;
  align-self:end;
}
.office__side p{
  font-size:1rem;
  line-height:1.65;
  color:rgba(244,245,242,.86);
  max-width:52ch;
  margin-bottom:28px;
}
@media (max-width:900px){
  .office{ display:block; min-height:0; }
  .office__media{ position:relative; aspect-ratio:4/3; }
  .office__media img{ object-position:50% 60%; }
  .office__media::after{ background:linear-gradient(to top, rgba(10,45,39,1) 0%, rgba(10,45,39,0) 40%); }
  .office__lead, .office__side{ grid-column:1 / -1; }
  .office__content{ padding-top:24px; }
  .office__side{ margin-top:20px; }
}


/* Bloco "O escritório" com título (páginas de área) */
h2.office__title{ font-size:clamp(1.6rem, 2.6vw, 2.4rem); line-height:1.15; max-width:20ch; }

/* Artigos relacionados ainda não publicados (pautas) — sem link */
.article-card--soon .article-card__thumb .photo-ph{ height:100%; }
.article-card__soon{
  margin-top:auto;
  align-self:flex-start;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding:5px 9px;
  border:1px solid var(--stone);
  border-radius:2px;
}


/* =========================================================
   PÁGINA — QUEM SOMOS (quem-somos.html)
   ========================================================= */
.about-hero__head{ grid-column:1 / span 2; padding-right:clamp(0px, 3vw, 48px); }
.about-hero__head h1{ max-width:15ch; }
.about-hero__lede{ grid-column:3 / span 2; align-self:end; max-width:46ch; }
.area-band--tall{ height:clamp(300px, 38vw, 640px); }

.way__head{ max-width:640px; margin-bottom:clamp(40px, 5vw, 64px); }
.way__head h2{ max-width:18ch; }
.way-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--grid-gap);
}
.way-card{
  border-top:1px solid var(--stone);
  padding-top:26px;
}
.way-card__icon{ width:44px; height:44px; object-fit:contain; margin-bottom:22px; }
.way-card h3{ margin-bottom:12px; max-width:14ch; }
.way-card p{ font-size:.95rem; line-height:1.6; color:var(--ink-soft); }

.team-sec{ background:var(--mist); }
.team-sec .pa-grid{ padding-inline:0; }
.team-sec__title{ grid-column:1 / span 2; padding-right:clamp(0px, 3vw, 48px); }
.team-sec__title h2{ max-width:16ch; }
.team-sec__text{ grid-column:3 / span 2; align-self:end; }
.team-sec .pro-grid{ margin-top:clamp(40px, 5vw, 64px); }

@media (max-width:900px){
  .about-hero__head, .about-hero__lede, .team-sec__title, .team-sec__text{ grid-column:1 / -1; }
  .about-hero__lede{ margin-top:16px; }
  .team-sec__text{ margin-top:12px; }
  .way-grid{ grid-template-columns:repeat(2, 1fr); row-gap:36px; }
  .area-band--tall{ height:260px; }
}
@media (max-width:560px){
  .way-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width:900px){
  .site-nav{
    /* o cabeçalho usa backdrop-filter, que vira a referência do "fixed";
       por isso altura explícita = tela menos o cabeçalho */
    position:fixed; top:var(--header-h); left:0; right:0;
    height:calc(100vh - var(--header-h));
    height:calc(100dvh - var(--header-h));
    width:auto;
    background:var(--mist);
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    padding: 28px var(--gutter) 40px;
    gap:0;
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
    overflow-y:auto;
  }
  .site-nav.is-open{ opacity:1; transform:none; visibility:visible; }
  .site-nav .nav-link{ width:100%; padding-block:14px; border-bottom:1px solid rgba(10,45,39,.08); font-size:1.05rem; }
  .site-nav .nav-link::after{ display:none; }
  /* No celular o submenu fica sempre aberto, recuado abaixo de "Áreas" */
  .nav-item.has-sub{ width:100%; display:block; }
  .nav-item.has-sub .nav-link{ display:block; }
  .nav-sub-toggle{ display:none; }
  .nav-sub{
    position:static; transform:none; opacity:1; visibility:visible;
    min-width:0; box-shadow:none; border:0; background:none;
    padding:6px 0 10px 16px;
    border-bottom:1px solid rgba(10,45,39,.08);
  }
  .nav-sub a{ padding:9px 0; font-size:.98rem; }
  .nav-sub a:hover{ background:none; }
  .nav-sub__all{ display:none !important; }
  .nav-toggle{ display:flex; }

  .hero__inner{
    flex-direction:column;
  }
  .hero__copy{ width:100%; max-width:none; padding:48px var(--gutter) 56px; }
  .hero__media{ width:100%; order:-1; }
  .hero__photo-col{ flex-basis:78%; }
  .hero__media-row{ aspect-ratio:4/5; }

  .statement{ grid-template-columns:1fr; }
  .statement h2{ max-width:none; }

  .story__row{ grid-template-columns:1fr; }
  .story__heading, .story__text{ grid-column:1 / -1; max-width:none; }
  .story__text{ margin-top:8px; padding-top:0; }
  .pro-grid{ grid-template-columns:repeat(2, 1fr); }

  .diff-grid{ grid-template-columns:repeat(2, 1fr); }

  .areas-grid{ grid-template-columns:repeat(2, 1fr); }
  .areas__intro{ grid-column:1 / -1; padding-right:0; margin-bottom:12px; }

  .pull__body{ grid-template-columns:1fr; }

  .team{ grid-template-columns:1fr; text-align:left; }
  .team__mark{ justify-self:start; width:110px; }

  .article-grid{ grid-template-columns:repeat(2, 1fr); row-gap:40px; }
  .cta-final h2 .nowrap{ display:inline; white-space:normal; }

  .site-footer__top{ grid-template-columns:1fr 1fr; }
  .site-footer__brand{ grid-column:1 / -1; }
}

@media (max-width:560px){
  .site-footer__top{ grid-template-columns:1fr; }
  .article-grid{ grid-template-columns:1fr; }
  .film__label{ display:none; }
  .film__sound{ padding:.6rem; }
  .diff-grid{ grid-template-columns:1fr; }
  .areas-grid{ grid-template-columns:1fr; }
  .area-card{ min-height:0; }
  .site-footer__bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
}