/* Fonte da marca: Glacial Indifference (a Sofia Pro é paga; esta é livre). Usada no menu, no hero, nas letras e no título do Instagram. */
@font-face { font-family: "Glacial Indifference"; src: url("assets/fonts/GlacialIndifference-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Glacial Indifference"; src: url("assets/fonts/GlacialIndifference-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

/* Tokens — cores amostradas do manual de marca */
:root {
  --terracota: #974315;
  --offwhite: #F3EFEC;
  --salvia: #8D957E;
  --grafite: #1F1F1F;
  --azul: #313D65;

  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --brand-sans: "Glacial Indifference", "Jost", "Helvetica Neue", Arial, sans-serif;

  --gutter: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));   /* celular deitado com notch: conteúdo não fica sob o recorte */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--offwhite); touch-action: manipulation; }   /* sem atraso/zoom de toque duplo; cor certa no "puxão" (overscroll) */
body {
  margin: 0;
  overflow-x: clip;                     /* nada mais largo que a tela pode alargar a página (o Safari do iPhone "encolhe" tudo para caber) */
  background: var(--offwhite);
  color: var(--grafite);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, canvas { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.eyebrow {
  margin: 0 0 1.1em;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: lowercase;
  color: var(--terracota);
}

/* ---------- Wordmark provisório (trocar pelo SVG oficial) ---------- */
.brand { display: inline-flex; align-items: baseline; gap: .7em; line-height: 1; }
.brand span { font-size: 13px; letter-spacing: .32em; font-weight: 400; }
.brand b { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: .02em; }
/* Logotipo "ÓRI" da marca (extraído do PDF de logotipo): máscara de uma cor, herda a cor do texto.
   O tamanho vem do font-size do <b> (altura = .86em), então cada contexto só ajusta o font-size. */
.wm { display: inline-block; flex: none; height: .86em; aspect-ratio: 1000 / 509; background: currentColor;
      -webkit-mask: url("assets/ori-wordmark.png") center / contain no-repeat; mask: url("assets/ori-wordmark.png") center / contain no-repeat; }
.brand--mark .wm, .lockup .wm { height: 1.12em; }   /* ao lado do símbolo, o logotipo acompanha a altura das folhas */
/* Letras do logotipo oficial (Ó, R, I): máscaras de uma cor, herdam a cor do texto; a altura acompanha o tamanho da letra do contexto */
.glyph--o, .glyph--r, .glyph--i { display: inline-block; width: auto; background: currentColor; transform: none; }
.glyph--o { height: .8em; aspect-ratio: 414 / 478; -webkit-mask: url("assets/ori-o.png") center / contain no-repeat; mask: url("assets/ori-o.png") center / contain no-repeat; }
.glyph--r { height: .62em; aspect-ratio: 520 / 428; -webkit-mask: url("assets/ori-r.png") center / contain no-repeat; mask: url("assets/ori-r.png") center / contain no-repeat; }
.glyph--i { height: .6em; aspect-ratio: 61 / 322; -webkit-mask: url("assets/ori-i.png") center / contain no-repeat; mask: url("assets/ori-i.png") center / contain no-repeat; }
.brand--mark { align-items: center; gap: .42em; }
.brand__leaf { width: 34px; height: auto; aspect-ratio: 1996 / 1969; flex: none; }
.brand--lg span { font-size: 15px; }
.brand--lg b { font-size: 46px; }

/* ---------- Navegação ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--gutter);
  color: var(--grafite);
  transition: color .5s ease;
}
.nav.is-solid { background: rgba(243, 239, 236, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--grafite); }
.nav.on-dark { color: var(--offwhite); }
.nav::before {   /* degradê sutil para manter o menu legível sobre o vídeo */
  content: ""; position: absolute; inset: 0 0 -20px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(31, 31, 31, .32), rgba(31, 31, 31, 0)); opacity: 0; transition: opacity .5s ease;
}
.nav.on-dark::before { opacity: 1; }
.nav__links { display: flex; gap: clamp(20px, 2.4vw, 40px); margin-left: auto; margin-right: clamp(14px, 2vw, 32px); font-family: var(--brand-sans); font-size: 18.5px; letter-spacing: .02em; font-weight: 400; color: var(--terracota); }
.nav__social { display: flex; align-items: center; gap: 2px; color: var(--terracota); }
.nav__social a { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; transition: background .3s ease, color .3s ease; }
.nav__social a:hover, .nav__social a:focus-visible { background: var(--terracota); color: var(--offwhite); }
.nav__social a:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }
.nav__social svg { width: 27px; height: 27px; }
@media (max-width: 860px) {            /* celular: só o WhatsApp fica à vista (os outros estão no menu) */
  .nav__social { margin-left: auto; }
  .nav__social a:not(:first-child) { display: none; }
  .nav__social a { width: 44px; height: 44px; border: 1px solid rgba(151, 67, 21, .5); }
  .nav__social svg { width: 24px; height: 24px; }
}
.nav__links a { position: relative; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); }
.pill {
  border: 1px solid currentColor; border-radius: 999px;
  padding: 10px 20px; font-size: 13px; letter-spacing: .06em; font-weight: 400; white-space: nowrap;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.pill:hover, .pill:focus-visible { background: var(--terracota); border-color: var(--terracota); color: var(--offwhite); }
.pill__short { display: none; }

/* ---------- Hero (estático: foto + logotipo + frase + botão) ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--offwhite); }
.photo { position: absolute; inset: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }

.headline { position: absolute; z-index: 2; right: var(--gutter); top: 31%; width: min(46vw, 640px); }
/* logotipo oficial ÓRI + "arquitetura e interiores" ao lado (como no PDF de alterações) */
.lockup { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); margin: 0 0 clamp(18px, 3vh, 32px); color: var(--terracota); line-height: 1; }
.lockup .lockup__wm { height: clamp(66px, 7.6vw, 124px); }
.lockup__tag { font-family: var(--brand-sans); font-size: clamp(13px, 1.2vw, 19px); letter-spacing: .32em; text-transform: lowercase; line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) {
  .lockup > * { animation: lockIn 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .lockup__tag { animation-delay: .2s; }
  .headline h1 { animation: lockIn 1.1s .3s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__cta { animation: lockIn 1.1s .45s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes lockIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.headline h1 { margin: 0; font-family: var(--brand-sans); font-weight: 400; font-size: clamp(34px, 4.2vw, 68px); line-height: 1.1; letter-spacing: -.005em; }
.headline em { font-style: normal; color: var(--terracota); }
.hero__cta { margin-top: clamp(22px, 4vh, 40px); }

.btn { display: inline-flex; align-items: center; gap: .7em; padding: 15px 28px; border-radius: 999px; font-size: 14px; font-weight: 400; letter-spacing: .04em; border: 1px solid var(--terracota); transition: background .3s ease, color .3s ease; }
.btn--solid { background: var(--terracota); color: var(--offwhite); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--grafite); border-color: var(--grafite); }
.btn--white { background: #fff; border-color: #fff; color: var(--terracota); }
.btn--white:hover, .btn--white:focus-visible { background: var(--terracota); border-color: var(--terracota); color: var(--offwhite); }
.btn--ghost { color: var(--terracota); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--terracota); color: var(--offwhite); }

/* ---------- Botões com o símbolo das folhas ----------
   O símbolo (sem fundo) vem antes do texto, na MESMA cor do texto do botão (currentColor):
   off-white no botão cheio, terracota no vazado, e a cor do menu no botão do topo.
   Feito com ::before (primeiro item do flex), então o HTML dos botões não muda.
   Hover: o símbolo gira 72° (1/5 de volta, uma folha). */
.btn::before, .pill::before {
  content: ""; flex: none; display: block;
  width: 1.55em; height: 1.55em;                  /* proporcional à fonte do botão */
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1996 1969'%3E%3Cpath fill-rule='evenodd' d='M1581,58 L1540,83 L1515,103 L1494,123 L1464,159 L1446,186 L1426,224 L1414,253 L1405,280 L1399,306 L1397,310 L1395,308 L1389,283 L1380,258 L1356,210 L1345,193 L1322,163 L1279,120 L1247,95 L1209,71 L1174,53 L1135,37 L1108,28 L1061,16 L1020,9 L980,5 L927,4 L926,5 L904,5 L903,6 L880,7 L842,12 L804,19 L798,19 L785,22 L779,22 L766,25 L760,25 L747,28 L741,28 L728,31 L722,31 L684,38 L678,38 L665,41 L659,41 L646,44 L640,44 L627,47 L621,47 L608,50 L602,50 L583,54 L577,54 L353,90 L359,119 L372,159 L389,195 L413,233 L432,257 L463,289 L494,315 L536,343 L535,344 L526,343 L472,344 L444,348 L410,356 L373,369 L339,385 L298,410 L269,432 L242,456 L209,491 L192,512 L168,546 L146,583 L130,615 L117,645 L100,694 L88,740 L87,750 L83,766 L4,1268 L29,1271 L49,1271 L50,1272 L79,1271 L111,1267 L153,1257 L193,1242 L234,1221 L269,1198 L301,1172 L302,1174 L292,1198 L283,1230 L276,1273 L275,1328 L278,1359 L283,1387 L290,1415 L301,1448 L314,1479 L326,1503 L353,1548 L368,1569 L394,1601 L435,1643 L460,1665 L494,1691 L537,1719 L595,1750 L1015,1964 L1017,1963 L1027,1941 L1038,1910 L1046,1877 L1051,1840 L1051,1787 L1045,1741 L1036,1704 L1029,1682 L1017,1653 L1018,1651 L1037,1667 L1057,1681 L1077,1693 L1110,1709 L1158,1725 L1185,1731 L1212,1735 L1235,1736 L1236,1737 L1283,1737 L1330,1732 L1389,1719 L1423,1708 L1456,1695 L1499,1674 L1538,1651 L1579,1622 L1615,1592 L1991,1217 L1984,1209 L1969,1196 L1936,1172 L1893,1149 L1868,1139 L1827,1127 L1787,1120 L1777,1120 L1765,1118 L1707,1118 L1706,1119 L1695,1119 L1694,1118 L1709,1109 L1735,1090 L1751,1076 L1777,1049 L1801,1018 L1812,1001 L1838,950 L1847,927 L1857,895 L1865,860 L1870,828 L1872,793 L1873,792 L1873,740 L1872,739 L1871,714 L1866,676 L1855,625 L1841,579 L1825,538 L1801,488 Z M1392,330 L1393,337 L1389,359 L1387,396 L1386,397 L1386,443 L1387,444 L1388,472 L1394,516 L1400,545 L1410,583 L1420,613 L1442,666 L1674,1121 L1670,1123 L1638,1128 L1606,1136 L1580,1144 L1541,1159 L1505,1176 L1476,1192 L1440,1215 L1418,1231 L1374,1268 L1008,1633 L993,1604 L969,1566 L949,1539 L928,1514 L882,1468 L862,1451 L826,1424 L792,1402 L762,1385 L352,1177 L317,1158 L344,1129 L364,1105 L381,1082 L404,1046 L435,985 L447,955 L459,919 L467,890 L475,853 L553,356 L555,353 L578,365 L622,383 L646,391 L688,402 L751,412 L773,413 L774,414 L796,414 L797,415 L827,415 L828,414 L863,413 L899,409 L1051,384 L1133,372 L1152,368 L1253,353 L1272,349 L1354,337 L1373,333 L1379,333 Z'/%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 1996 1969'%3E%3Cpath fill-rule='evenodd' d='M1581,58 L1540,83 L1515,103 L1494,123 L1464,159 L1446,186 L1426,224 L1414,253 L1405,280 L1399,306 L1397,310 L1395,308 L1389,283 L1380,258 L1356,210 L1345,193 L1322,163 L1279,120 L1247,95 L1209,71 L1174,53 L1135,37 L1108,28 L1061,16 L1020,9 L980,5 L927,4 L926,5 L904,5 L903,6 L880,7 L842,12 L804,19 L798,19 L785,22 L779,22 L766,25 L760,25 L747,28 L741,28 L728,31 L722,31 L684,38 L678,38 L665,41 L659,41 L646,44 L640,44 L627,47 L621,47 L608,50 L602,50 L583,54 L577,54 L353,90 L359,119 L372,159 L389,195 L413,233 L432,257 L463,289 L494,315 L536,343 L535,344 L526,343 L472,344 L444,348 L410,356 L373,369 L339,385 L298,410 L269,432 L242,456 L209,491 L192,512 L168,546 L146,583 L130,615 L117,645 L100,694 L88,740 L87,750 L83,766 L4,1268 L29,1271 L49,1271 L50,1272 L79,1271 L111,1267 L153,1257 L193,1242 L234,1221 L269,1198 L301,1172 L302,1174 L292,1198 L283,1230 L276,1273 L275,1328 L278,1359 L283,1387 L290,1415 L301,1448 L314,1479 L326,1503 L353,1548 L368,1569 L394,1601 L435,1643 L460,1665 L494,1691 L537,1719 L595,1750 L1015,1964 L1017,1963 L1027,1941 L1038,1910 L1046,1877 L1051,1840 L1051,1787 L1045,1741 L1036,1704 L1029,1682 L1017,1653 L1018,1651 L1037,1667 L1057,1681 L1077,1693 L1110,1709 L1158,1725 L1185,1731 L1212,1735 L1235,1736 L1236,1737 L1283,1737 L1330,1732 L1389,1719 L1423,1708 L1456,1695 L1499,1674 L1538,1651 L1579,1622 L1615,1592 L1991,1217 L1984,1209 L1969,1196 L1936,1172 L1893,1149 L1868,1139 L1827,1127 L1787,1120 L1777,1120 L1765,1118 L1707,1118 L1706,1119 L1695,1119 L1694,1118 L1709,1109 L1735,1090 L1751,1076 L1777,1049 L1801,1018 L1812,1001 L1838,950 L1847,927 L1857,895 L1865,860 L1870,828 L1872,793 L1873,792 L1873,740 L1872,739 L1871,714 L1866,676 L1855,625 L1841,579 L1825,538 L1801,488 Z M1392,330 L1393,337 L1389,359 L1387,396 L1386,397 L1386,443 L1387,444 L1388,472 L1394,516 L1400,545 L1410,583 L1420,613 L1442,666 L1674,1121 L1670,1123 L1638,1128 L1606,1136 L1580,1144 L1541,1159 L1505,1176 L1476,1192 L1440,1215 L1418,1231 L1374,1268 L1008,1633 L993,1604 L969,1566 L949,1539 L928,1514 L882,1468 L862,1451 L826,1424 L792,1402 L762,1385 L352,1177 L317,1158 L344,1129 L364,1105 L381,1082 L404,1046 L435,985 L447,955 L459,919 L467,890 L475,853 L553,356 L555,353 L578,365 L622,383 L646,391 L688,402 L751,412 L773,413 L774,414 L796,414 L797,415 L827,415 L828,414 L863,413 L899,409 L1051,384 L1133,372 L1152,368 L1253,353 L1272,349 L1354,337 L1373,333 L1379,333 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.btn:hover::before, .btn:focus-visible::before, .pill:hover::before, .pill:focus-visible::before { transform: rotate(72deg); }
.pill { display: inline-flex; align-items: center; gap: .6em; padding-left: 16px; }
@media (prefers-reduced-motion: reduce) { .btn::before, .pill::before { transition: none; } }

/* ---------- Retrato / mobile ---------- */
@media (max-width: 860px) {
  .nav { padding: 16px var(--gutter); }
  .nav__links { display: none; }
  .brand b { font-size: 26px; }
  .brand__leaf { width: 30px; }
  .pill { padding: 9px 16px 9px 12px; min-height: 44px; }
  .pill__long { display: none; }
  .pill__short { display: inline; }
  .photo img { object-position: 12% 50%; }   /* enquadra as duas sócias */
  /* celular: logotipo centralizado no topo; frase na altura dos braços, com um halo off-white leve; botão logo abaixo */
  .headline { left: var(--gutter); right: var(--gutter); top: 0; bottom: 0; width: auto; }
  .lockup { position: absolute; left: 0; right: 0; top: 14%; margin: 0; justify-content: center; gap: 14px; }
  .lockup .lockup__wm { height: 56px; }
  .lockup__tag { font-size: 12px; letter-spacing: .28em; }
  .headline h1 {
    position: absolute; left: 0; right: 0; top: 43%; text-align: center; font-size: clamp(30px, 8.6vw, 48px);
    text-shadow: 0 0 10px rgba(243, 239, 236, .9), 0 0 22px rgba(243, 239, 236, .8), 0 0 40px rgba(243, 239, 236, .6);
  }
  .hero__cta { position: absolute; left: 50%; top: calc(43% + clamp(100px, 27vw, 140px)); margin: 0; transform: translateX(-50%); white-space: nowrap; animation: none; }
  .btn { justify-content: center; }
}

/* utilitário: visível só para leitor de tela */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* ---------- Menu do celular ---------- */
.nav__burger { -webkit-appearance: none; appearance: none; display: none; flex: none; min-width: 44px; width: 44px; height: 44px; margin-left: 8px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; place-items: center; align-content: center; gap: 7px; -webkit-tap-highlight-color: transparent; }
.nav__burger i { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.nav__burger:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; border-radius: 6px; }
.menu-open .nav__burger i:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-open .nav__burger i:last-child  { transform: translateY(-4.25px) rotate(-45deg); }
.menu-open .nav, .menu-open .nav.on-dark, .menu-open .nav.is-solid { color: var(--grafite); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu-open .nav::before { opacity: 0; }

.navpanel {
  position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: space-between;
  padding: 104px var(--gutter) 32px; background: var(--offwhite); color: var(--grafite);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s;
}
.navpanel[hidden] { display: none; }
.menu-open .navpanel { opacity: 1; visibility: visible; transition-delay: 0s; }
.navpanel nav { display: grid; }
.navpanel nav a {
  padding: 18px 0; border-bottom: 1px solid rgba(31, 31, 31, .14);
  font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 10vw, 52px); line-height: 1.05;
  opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1), color .3s ease;
}
.navpanel nav a:hover, .navpanel nav a:focus-visible { color: var(--terracota); }
.navpanel nav a:focus-visible { outline: 2px solid var(--terracota); outline-offset: 4px; }
.menu-open .navpanel nav a { opacity: 1; transform: none; }
.menu-open .navpanel nav a:nth-child(2) { transition-delay: .05s; } .menu-open .navpanel nav a:nth-child(3) { transition-delay: .1s; }
.menu-open .navpanel nav a:nth-child(4) { transition-delay: .15s; } .menu-open .navpanel nav a:nth-child(5) { transition-delay: .2s; }
.navpanel__social { display: flex; gap: 6px; margin: 22px 0 0; color: var(--terracota); }
.navpanel__social a { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(151, 67, 21, .45); border-radius: 50%; }
.navpanel__social svg { width: 24px; height: 24px; }
.navpanel__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 0; font-size: 14px; color: rgba(31, 31, 31, .72); }
.navpanel__foot em { font-style: normal; color: var(--terracota); }
.navpanel__foot a { color: var(--terracota); border-bottom: 1px solid currentColor; }
@media (max-width: 860px) { .nav__burger { display: grid; } }
@media (min-width: 861px) { .navpanel { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .navpanel, .navpanel nav a, .nav__burger i { transition: none; } }

/* ---------- Revisão de usabilidade (celular) ---------- */
/* logo do menu: área de toque de 44px de altura */
.nav .brand { position: relative; }
.nav .brand--mark { color: var(--terracota); transition: color .4s ease; }   /* logo terracota, como no PDF; claro sobre seções escuras */
.nav.on-dark .brand--mark { color: var(--offwhite); }
.menu-open .nav .brand--mark { color: var(--terracota); }
.nav .brand::after { content: ""; position: absolute; inset: -10px -6px; }   /* área de toque de 44px sem mexer no layout */

/* pular para o conteúdo (teclado / leitor de tela) */
.skiplink { position: fixed; z-index: 200; left: 12px; top: -64px; padding: 10px 16px; border-radius: 999px; background: var(--offwhite); color: var(--grafite); font-size: 14px; transition: top .2s ease; }
.skiplink:focus { top: 12px; }

/* telas estreitas (360px): o menu não estoura e o botão hambúrguer mantém 44px */
@media (max-width: 400px) {
  .nav { gap: 8px; }
  .brand span { letter-spacing: .22em; }
  .brand b { font-size: 24px; }
  .pill { padding: 9px 12px 9px 10px; font-size: 12.5px; min-height: 44px; }
  .nav__burger { margin-left: 0; }
}

/* painel do menu: rola se não couber (celular deitado) e não "vaza" a rolagem para a página */
.navpanel { overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 560px) {
  .navpanel { padding-top: 84px; padding-bottom: 20px; }
  .navpanel nav a { padding: 10px 0; font-size: clamp(26px, 6vw, 34px); }
}

/* ---------- Topo sobre seções escuras: fundo da própria seção + texto claro (sempre legível) ---------- */
.nav.on-dark, .nav.is-solid.on-dark { color: var(--offwhite); box-shadow: none; }
.nav.is-solid.on-dark[data-tone="terracota"] { background: rgba(151, 67, 21, .96); }
.nav.is-solid.on-dark[data-tone="azul"] { background: rgba(49, 61, 101, .96); }
.nav.on-dark .nav__links, .nav.on-dark .nav__social, .nav.on-dark .brand--mark { color: var(--offwhite); }
.nav.on-dark .nav__social a:hover, .nav.on-dark .nav__social a:focus-visible { background: var(--offwhite); color: var(--terracota); }
.nav.on-dark .nav__social a:focus-visible { outline-color: var(--offwhite); }
@media (max-width: 860px) { .nav.on-dark .nav__social a { border-color: rgba(243, 239, 236, .55); } }
.nav.on-dark::before { opacity: 0; }
.nav, .nav__links, .nav__social { transition: background-color .35s ease, color .35s ease; }
/* menu aberto: volta ao claro */
.menu-open .nav.is-solid.on-dark, .menu-open .nav.on-dark { color: var(--grafite); background: transparent; }
.menu-open .nav.on-dark .nav__social, .menu-open .nav.on-dark .brand--mark { color: var(--terracota); }

/* ---------- Efeitos nos botões com as folhas da logo (sem brilho) ---------- */
.btn::before, .pill::before { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.btn > span[aria-hidden="true"]:last-child { display: inline-block; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.btn:hover > span[aria-hidden="true"]:last-child, .btn:focus-visible > span[aria-hidden="true"]:last-child { transform: translateX(5px); }
.btn:hover::before, .btn:focus-visible::before, .pill:hover::before, .pill:focus-visible::before { transform: rotate(72deg) scale(1.12); }
.btn:active::before, .pill:active::before { transform: rotate(144deg) scale(.94); transition-duration: .25s; }
@media (prefers-reduced-motion: reduce) { .btn > span[aria-hidden="true"]:last-child { transition: none; } }

/* topo 100% parado: camada própria na GPU (sem repintar junto com a rolagem) e logo sem subpixel */
.nav { transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden; }
.nav .brand--mark, .nav .brand__leaf, .nav .wm { transform: translate3d(0, 0, 0); backface-visibility: hidden; }
.nav .brand--mark { -webkit-font-smoothing: antialiased; }

/* ---------- Menu do celular: entrada em cascata fluida (todos os itens, do primeiro ao último) ---------- */
.navpanel nav a, .navpanel__social, .navpanel__foot { will-change: opacity, transform; }
.navpanel nav a { transition: opacity .3s ease, transform .3s ease, color .3s ease; transition-delay: 0s; }
.navpanel__social, .navpanel__foot { opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease; }
.menu-open .navpanel nav a, .menu-open .navpanel__social, .menu-open .navpanel__foot {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .65s cubic-bezier(.2, .7, .2, 1), color .3s ease;
}
.menu-open .navpanel nav a:nth-child(1) { transition-delay: 0s; }
.menu-open .navpanel nav a:nth-child(2) { transition-delay: .06s; }
.menu-open .navpanel nav a:nth-child(3) { transition-delay: .12s; }
.menu-open .navpanel nav a:nth-child(4) { transition-delay: .18s; }
.menu-open .navpanel nav a:nth-child(5) { transition-delay: .24s; }
.menu-open .navpanel__social { transition-delay: .30s; }
.menu-open .navpanel__foot { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .navpanel nav a, .navpanel__social, .navpanel__foot, .menu-open .navpanel nav a, .menu-open .navpanel__social, .menu-open .navpanel__foot { transition: none; transition-delay: 0s; }
}