/* =============================================================
   Agro Lichimua, homepage
   Tokens → base → components → sections → responsive → motion
   ============================================================= */

:root{
  /* brand */
  --green:        #256833;
  --green-2:      #328042;
  --green-dark:   #154e25;
  --ink:          #063214;

  --gold:         #f3b800;
  --gold-md:      #f4b62d;
  --gold-lt:      #f9c95d;

  --tint:         #b3d0b8;
  --tint-soft:    #dfeae1;
  --muted:        #829889;

  --surface:      #ffffff;
  --surface-alt:  #f6f9f6;
  --line:         #e2eae4;
  --body:         #3f5548;

  /* layout */
  --container: 1280px;
  --gutter: clamp(20px, 5vw, 80px);
  --section-y: clamp(64px, 9vw, 120px);
  --radius: 8px;

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .5s;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--surface);
  color:var(--body);
  font-family:'Archivo','DIN Next',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(6,50,20,.12);
  overflow-x:clip;
}
body.is-locked{ overflow:hidden; }

img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1.1em; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

.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;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:14px 22px; border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{ left:0; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }

/* fixed header must not swallow the top of an anchored section */
section[id],aside[id],main[id]{ scroll-margin-top:96px; }
@media (max-width:767px){ section[id],aside[id],main[id]{ scroll-margin-top:70px; } }

/* ---------------------------------------------------------------
   Type
   --------------------------------------------------------------- */
.h2{
  margin:.1em 0 .55em;
  font-size:clamp(1.85rem, 3.6vw, 2.85rem);
  line-height:1.13;
  font-weight:500;
  letter-spacing:-.018em;
  font-variation-settings:'wdth' 112;
  color:var(--ink);
  text-wrap:balance;
}
.h2--center{ text-align:center; }
.h3{
  margin:.1em 0 .6em;
  font-size:clamp(1.4rem, 2.4vw, 1.95rem);
  line-height:1.2; font-weight:500; letter-spacing:-.018em;
  font-variation-settings:'wdth' 110;
  color:var(--ink); text-wrap:balance;
}
.h3--onDark{ color:#fff; }
.lead{ font-size:clamp(1.05rem,1.35vw,1.2rem); color:var(--ink); opacity:.86; }

.eyebrow{
  margin:0 0 1rem;
  font-size:.8125rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; color:var(--green-2);
  display:flex; align-items:center; gap:12px;
}
.eyebrow__idx{
  font-weight:700; color:var(--gold-md); font-variant-numeric:tabular-nums;
}
.eyebrow__idx::after{
  content:""; display:inline-block; width:26px; height:1px; margin-left:12px;
  background:currentColor; vertical-align:.28em; opacity:.55;
}
.eyebrow--gold{ color:var(--gold); }
.eyebrow--center,.cta .eyebrow{ justify-content:center; }
.eyebrow--onDark{ color:var(--gold-lt); }

/* ---------------------------------------------------------------
   Signature arrow motif  ( ↘ → → on hover )
   --------------------------------------------------------------- */
.btn__arrow,.inline-arrow,.factlist__arrow{
  --sz:30px;
  position:relative; flex:none;
  width:var(--sz); height:var(--sz); border-radius:999px;
  display:inline-grid; place-items:center;
  background:rgba(6,50,20,.10);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.btn__arrow::before,.inline-arrow::before,.factlist__arrow::before{
  content:""; width:9px; height:9px;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:rotate(-45deg) translate(-.5px,-.5px);
  transition:transform .35s var(--ease);
}
.inline-arrow{ --sz:20px; background:none; vertical-align:-4px; }
.inline-arrow::before{ width:7px; height:7px; }

.btn:hover .btn__arrow::before,
.factlist__row:hover .factlist__arrow::before,
a:hover > .inline-arrow::before{ transform:rotate(-90deg) translate(0,0); }

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:11px 12px 11px 28px; border-radius:999px;
  font-size:.9375rem; font-weight:600; letter-spacing:.005em;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }

.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:var(--gold-md); }
.btn--gold .btn__arrow{ background:rgba(6,50,20,.14); }

.btn--green{ background:var(--green); color:#fff; }
.btn--green:hover{ background:var(--green-2); }
.btn--green .btn__arrow{ background:rgba(255,255,255,.18); }

.btn--ghost{ color:#fff; border:1px solid rgba(255,255,255,.42); }
.btn--ghost:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.7); }
.btn--ghost .btn__arrow{ background:rgba(255,255,255,.16); }

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
.header{
  position:fixed; inset:0 0 auto; z-index:90;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.header__inner{
  max-width:calc(var(--container) + var(--gutter)*2);
  margin-inline:auto;
  height:84px;
  padding-left:var(--gutter);
  display:flex; align-items:center; gap:32px;
  min-width:0;
}
.header__logo{ position:relative; display:block; height:42px; flex:none; }
.header__utils{ flex:none; }
.header__logo-img{ height:42px; width:auto; transition:opacity .3s var(--ease); }
.header__logo-img--colour{ position:absolute; inset:0; opacity:0; }

.header__nav{ display:flex; gap:34px; margin-left:auto; }
.header__nav a{
  position:relative; font-size:.9375rem; font-weight:500; color:#fff;
  padding-block:6px; transition:color .3s var(--ease);
}
.header__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.header__nav a:hover::after{ transform:scaleX(1); }

.header__utils{ display:flex; align-items:center; gap:20px; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.lang{ position:relative; flex:none; }

.lang__trigger{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px 6px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.32);
  font-size:.75rem; font-weight:600; letter-spacing:.08em; color:#fff;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.lang__trigger:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.55); }
.lang__caret{
  width:14px; height:14px; opacity:.7;
  transition:transform .3s var(--ease);
}
.lang__trigger[aria-expanded="true"] .lang__caret{ transform:rotate(180deg); }

.lang__flag{
  width:18px; height:12px; border-radius:2px; flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.14);
}

.lang__menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:5;
  min-width:232px; padding:6px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 20px 44px -20px rgba(6,50,20,.4), 0 2px 6px -2px rgba(6,50,20,.14);
  opacity:0; transform:translateY(-6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.lang__menu.is-open{ opacity:1; transform:none; }
.lang__menu::before{
  content:""; position:absolute; top:-5px; right:20px;
  width:9px; height:9px; background:#fff;
  border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg);
}

.lang__item{
  position:relative; display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:8px;
  font-size:.9375rem; font-weight:500; color:var(--ink);
  cursor:pointer; transition:background .2s var(--ease);
}
.lang__item:hover{ background:var(--surface-alt); }
.lang__name{ flex:1; }
.lang__item.is-active{ color:var(--green); font-weight:600; }
.lang__tick{
  width:6px; height:11px; flex:none; margin-right:3px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
}
.lang__item.is-disabled{ cursor:not-allowed; color:var(--muted); }
.lang__item.is-disabled:hover{ background:none; }
.lang__item.is-disabled .lang__flag{ opacity:.6; }
.lang__soon{
  padding:3px 9px; border-radius:999px; background:var(--tint-soft);
  font-size:.6875rem; font-weight:600; letter-spacing:.06em; color:var(--green-dark);
  white-space:nowrap;
}

.burger{
  width:84px; height:84px; flex:none;
  background:var(--green); display:grid; place-items:center;
  transition:background .3s var(--ease);
}
.burger:hover{ background:var(--green-2); }
.burger__lines{ display:grid; gap:6px; width:22px; }
.burger__lines i{ height:1.8px; background:#fff; border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.burger__lines i:last-child{ width:14px; margin-left:auto; }
.burger[aria-expanded="true"] .burger__lines i:first-child{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines i:last-child{ width:22px; transform:translateY(-4px) rotate(-45deg); }

/* solid state */
.header.is-solid{ background:#fff; box-shadow:0 1px 0 var(--line); }
.header.is-solid .header__logo-img--white{ opacity:0; }
.header.is-solid .header__logo-img--colour{ opacity:1; }
.header.is-solid .header__nav a{ color:var(--ink); }
.header.is-solid .header__nav a:hover{ color:var(--green); }
.header.is-solid .lang__trigger{ color:var(--green-dark); border-color:var(--line); }
.header.is-solid .lang__trigger:hover{ background:var(--surface-alt); border-color:var(--muted); }

/* menu open: the panel behind the header is dark green, so the header keeps
   its over-image colours however far the page was scrolled */
body.is-locked .header{ background:none; box-shadow:none; }
body.is-locked .header__logo-img--white{ opacity:1; }
body.is-locked .header__logo-img--colour{ opacity:0; }
body.is-locked .lang__trigger{ color:#fff; border-color:rgba(255,255,255,.32); }

/* ---------------------------------------------------------------
   Full-screen menu
   --------------------------------------------------------------- */
.menu{
  position:fixed; inset:0; z-index:85;
  background:var(--green-dark);
  display:grid; align-items:center;
  /* eight rows plus the meta block can outgrow a short viewport */
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.menu.is-open{ opacity:1; visibility:visible; }
.menu[hidden]{ display:none; }
.menu__inner{
  width:100%; max-width:var(--container); margin-inline:auto;
  padding:104px var(--gutter) 48px;
}
.menu__nav{ display:grid; gap:2px; border-top:1px solid rgba(255,255,255,.14); }
.menu__nav .menu__row > a{
  display:flex; align-items:baseline; gap:20px;
  padding:clamp(9px,1.3vw,14px) 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:clamp(1.3rem,3.4vw,2.1rem); font-weight:500;
  letter-spacing:-.015em; font-variation-settings:'wdth' 110;
  opacity:0; transform:translateY(14px);
  transition:color .3s var(--ease), padding-left .35s var(--ease), opacity .5s var(--ease), transform .5s var(--ease);
}
.menu.is-open .menu__nav .menu__row > a{ opacity:1; transform:none; transition-delay:calc(.06s * var(--i,0) + .1s); }
.menu__nav .menu__row > a:hover{ color:var(--gold-lt); padding-left:14px; }
.menu__num{ font-size:.75rem; font-weight:600; letter-spacing:.14em; color:var(--tint); font-variation-settings:'wdth' 100; }

.menu__meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
  margin-top:clamp(22px,2.6vw,32px); color:rgba(255,255,255,.72); font-size:.9375rem;
}
.menu__meta p{ margin:0; }
.menu__mail{ color:#fff; border-bottom:1px solid rgba(255,255,255,.3); }
.menu__mail:hover{ color:var(--gold-lt); }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero{ position:relative; min-height:100svh; display:flex; overflow:hidden; background:var(--ink); }
.hero__media{ position:absolute; inset:-12% 0; will-change:transform; }
.hero__poster,.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero__video{ opacity:0; transition:opacity 1.1s var(--ease); }
.hero__video.is-ready{ opacity:1; }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(6,50,20,.88) 0%, rgba(6,50,20,.7) 44%, rgba(6,50,20,.26) 74%, rgba(6,50,20,.4) 100%),
    linear-gradient(180deg, rgba(6,50,20,.55) 0%, transparent 26%, transparent 62%, rgba(6,50,20,.72) 100%);
}
.hero__inner{
  position:relative; width:100%; max-width:var(--container); margin-inline:auto;
  padding:150px var(--gutter) 190px; display:flex; align-items:center;
}
.hero__content{ max-width:min(680px, 52%); color:#fff; }
.hero__title{
  margin:0 0 .5em;
  font-size:clamp(2.4rem, 5.6vw, 4.5rem);
  line-height:1.04; font-weight:500; letter-spacing:-.028em;
  font-variation-settings:'wdth' 112;
  text-wrap:balance;
}
.hero__lead{ font-size:clamp(1rem,1.25vw,1.1875rem); color:rgba(255,255,255,.84); max-width:52ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2rem; }

.hero__vertical{
  position:absolute; right:calc(var(--gutter) * .45); top:50%;
  margin:0; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl;
  font-size:.75rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
  text-shadow:0 1px 8px rgba(6,50,20,.5);
}

.hero__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  max-width:var(--container); margin-inline:auto;
  padding:0 var(--gutter) 34px;
  display:flex; align-items:flex-end;
}
.hero__scroll{
  display:flex; align-items:center; gap:12px;
  font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.hero__scroll-line{
  display:block; width:64px; height:1px; background:rgba(255,255,255,.35); position:relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  transform:translateX(-100%); animation:scrollcue 2.4s var(--ease) infinite;
}
@keyframes scrollcue{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* ---------------------------------------------------------------
   A Exploração
   --------------------------------------------------------------- */
.exploracao__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,6vw,90px); align-items:start;
}
/* the copy column is the long one, so the photography rides along with it */
.exploracao__media{ position:sticky; top:120px; padding-bottom:70px; }
.frame{ margin:0; border-radius:var(--radius); overflow:hidden; background:var(--surface-alt); }
.frame img{ width:100%; height:100%; object-fit:cover; }
.frame--tall{ aspect-ratio:4/5; }
.frame--wide{ aspect-ratio:16/9; }
.frame--inset{
  position:absolute; right:-6%; bottom:0; width:46%; aspect-ratio:4/3;
  border:8px solid #fff; border-radius:calc(var(--radius) + 4px);
}

.factlist{ margin-top:2.4rem; border-top:1px solid var(--line); }
.factlist__row{
  display:flex; align-items:center; gap:18px;
  padding:18px 4px; border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease);
}
.factlist__row:hover{ padding-left:10px; }
.factlist__icon{
  flex:none; width:44px; height:44px; border-radius:999px;
  background:var(--tint-soft); color:var(--green);
  display:grid; place-items:center;
}
.factlist__icon svg{ width:21px; height:21px; }
.factlist__body{ display:grid; gap:1px; }
.factlist__body strong{ color:var(--ink); font-weight:600; font-size:1rem; }
.factlist__body span{ font-size:.9375rem; color:var(--muted); }
.factlist__arrow{ margin-left:auto; color:var(--green); background:transparent; }

/* ---------------------------------------------------------------
   Localização + mapa
   --------------------------------------------------------------- */
.local{ background:var(--surface-alt); }
.local__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(32px,6vw,96px); align-items:center;
}
.local__facts{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin:2.4rem 0 0; border-top:1px solid var(--line);
}
.local__fact{ padding:16px 0; border-bottom:1px solid var(--line); }
.local__fact:nth-child(odd){ padding-right:20px; }
.local__fact dt{
  font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.local__fact dd{
  margin:4px 0 0; font-size:1.0625rem; font-weight:500; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.local__note{ margin-top:1.6rem; font-size:.9688rem; color:var(--muted); max-width:44ch; }

.local__map{ margin:0; display:grid; justify-items:center; gap:22px; }
.mz{ width:100%; max-width:376px; height:auto; overflow:visible; }
.mz__prov{
  fill:#e6ede7; stroke:var(--surface-alt); stroke-width:1.6; stroke-linejoin:round;
  transition:fill .3s var(--ease);
}
.mz__prov:hover{ fill:#d5e2d8; }
.mz__prov--active{ fill:var(--green); }
.mz__prov--active:hover{ fill:var(--green-2); }

.mz__pin-halo{ fill:var(--gold); opacity:.18; }
.mz__pin-ring{ fill:none; stroke:var(--gold); stroke-width:2; }
.mz__pin-dot{ fill:var(--gold); stroke:#fff; stroke-width:2; }
.js .mz__pin-halo{ transform-box:fill-box; transform-origin:center; animation:pinpulse 3s var(--ease) infinite; }
@keyframes pinpulse{ 0%,100%{ transform:scale(.72); opacity:.28 } 50%{ transform:scale(1.08); opacity:.08 } }

.mz__label line{ stroke:var(--ink); stroke-width:1; opacity:.35; }
.mz__label text{
  font-family:inherit; font-size:21px; font-weight:600; fill:var(--ink); letter-spacing:-.01em;
}
.mz__label .mz__label-sub{ font-size:15px; font-weight:400; fill:var(--muted); letter-spacing:.02em; }

/* ---- localização: the pinned zoom ------------------------------------
   Two pins, one zoom. On desktop the whole two-column section is short
   enough to hold, so it pins as a unit. Below 1024px the section is far
   taller than the phone, so the map wrapper becomes the spacer and only
   the figure sticks; the text then scrolls up under it as normal.
   Either way script sets .is-zoom on the svg and runs --mz-focus 0 to 1,
   and everything visual keys off that rather than off which pin is in
   play. Neither class is ever set without script, on a narrow-enough
   viewport, with motion allowed. --------------------------------------- */
.local__mapwrap{ min-width:0; }

/* desktop: the section pins as a unit */
.local__stack.is-pinned{ position:relative; }
.local__stack.is-pinned .local__pin{
  position:sticky; top:0; display:flex; align-items:center;
  min-height:100vh;
  min-height:100svh;   /* the iOS toolbar makes 100vh taller than what you see */
}

/* mobile: only the figure pins, inside its own spacer. It stays its own
   natural height and is centred by the sticky offset that script measures,
   rather than being a viewport-tall box with the map floated in the middle
   of it: that trailed half a screen of empty box behind it on release. */
.local__mapwrap.is-pinned{ position:relative; }
.local__mapwrap.is-pinned .local__map{ position:sticky; }
/* worth more of the screen while it is the only thing on it, but capped by
   height too: the map is 520:900, so its height is ~1.73x whatever width
   it takes, and 36svh of width is what keeps it and the legend on screen
   on a short phone */
.local__mapwrap.is-pinned .mz{ max-width:min(78vw, 300px, 36svh); }
/* the small-screen sizes scale this label up to hold its rendered size, which
   pushes the longer second line past the left of the viewBox: fine when .mz
   was overflow:visible, clipped now that the zoom has to crop. It is dropped
   rather than shrunk, because the facts list under the map already says which
   province this is; the near label keeps both lines, well inside the crop. */
.local__mapwrap.is-pinned .mz__label--wide .mz__label-sub{ display:none; }

/* the zoom itself */
.mz.is-zoom{ overflow:hidden; }   /* zoomed, the rest of the country would paint outside the frame */
.mz.is-zoom .mz__prov:not(.mz__prov--active){
  opacity:calc(1 - .55 * var(--mz-focus, 0));
}
.mz.is-zoom .mz__prov--active{
  filter:drop-shadow(0 0 calc(7px * var(--mz-focus, 0)) rgba(6,50,20,.30));
}

/* the leader-line label reads well over the whole country but runs off the
   left of the Niassa crop, so the two hand over mid-zoom: the wide one is
   gone by .45, the near one arrives from .55, and neither is half-drawn
   over the other in between */
.mz__label--near{ opacity:0; }
.mz.is-zoom .mz__label--wide{
  opacity:clamp(0, calc(1 - var(--mz-focus, 0) * 2.2), 1);
}
.mz.is-zoom .mz__label--near{
  opacity:clamp(0, calc((var(--mz-focus, 0) - .55) / .45), 1);
}
/* the near label lands on the green, so it takes the same white-on-halo
   treatment as the closer map on A Exploração rather than the ink fill
   the wide label uses over the pale country */
.mz__label--near text{
  fill:#fff;
  paint-order:stroke; stroke:rgba(6,50,20,.72); stroke-width:5px; stroke-linejoin:round;
}
.mz__label--near .mz__label-sub{ fill:rgba(255,255,255,.82); font-weight:500; }

.local__legend{
  display:flex; gap:26px; font-size:.8125rem; color:var(--muted);
}
.local__legend span{ display:inline-flex; align-items:center; gap:9px; }
.dot{ width:11px; height:11px; border-radius:3px; background:#e6ede7; }
.dot--active{ background:var(--green); }

/* ---------------------------------------------------------------
   Galeria
   --------------------------------------------------------------- */
.galeria{ padding-block:0 var(--section-y); background:var(--surface); }
.galeria__head{ margin-bottom:clamp(28px,3.5vw,44px); }
.galeria__head .h2{ margin-bottom:0; }
.galeria__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.1vw,16px);
  align-items:center;
  width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
}
.galeria__item{ margin:0; border-radius:var(--radius); overflow:hidden; background:var(--surface-alt); aspect-ratio:4/3; }
.galeria__item--tall{ aspect-ratio:1/1; }
.galeria__item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.galeria__item:hover img{ transform:scale(1.05); }

/* ---------------------------------------------------------------
   Produtos (tinted band + pinned reveal)
   --------------------------------------------------------------- */
.band{ background:var(--tint); }
.band__head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(20px,5vw,80px); align-items:end; margin-bottom:clamp(36px,4.5vw,56px);
}
.band .eyebrow{ color:var(--green-dark); }
.band .eyebrow__idx{ color:var(--green); }
.band__intro{ margin:0; color:var(--green-dark); opacity:.82; max-width:46ch; }

/* ---------------------------------------------------------------
   Mercado
   --------------------------------------------------------------- */
.mercado{ background:var(--surface-alt); }
.mercado__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,90px); align-items:center;
}
.mercado__text .btn{ margin-top:.6rem; }
.mercado__side{ display:grid; gap:20px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chips li{
  padding:9px 18px; border-radius:999px; background:#fff;
  border:1px solid var(--line); font-size:.875rem; font-weight:500; color:var(--green-dark);
}

/* ---------------------------------------------------------------
   Números
   --------------------------------------------------------------- */
.numeros{ background:var(--surface); }
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:clamp(36px,4.5vw,60px); border-top:1px solid var(--line);
}
.stat{
  padding:clamp(28px,3.4vw,44px) clamp(16px,2vw,28px);
  border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  text-align:center;
}
.stat:last-child{ border-right:0; }
.stat{ position:relative; transition:background .35s var(--ease); }
.stat::after{
  content:""; position:absolute; left:0; right:0; top:-1px; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:center; transition:transform .5s var(--ease);
}
.stat:hover::after{ transform:scaleX(1); }
.stat:hover{ background:var(--surface-alt); }
.stat__value{
  display:block; color:var(--green);
  font-size:clamp(2.6rem,5vw,4rem); line-height:1; font-weight:500;
  letter-spacing:-.03em; font-variation-settings:'wdth' 108;
}
.stat__pre{ color:var(--gold-md); }
.stat__label{
  display:block; margin-top:14px; font-size:.9375rem; color:var(--muted);
  max-width:22ch; margin-inline:auto; line-height:1.5;
}
.numeros__note{
  max-width:62ch; margin:clamp(36px,4.5vw,56px) auto 0; text-align:center;
  font-size:1.0625rem; color:var(--body);
}

/* ---------------------------------------------------------------
   CTA band
   --------------------------------------------------------------- */
.cta{ position:relative; min-height:min(600px,80vh); display:grid; place-items:center; overflow:hidden; background:var(--ink); }
.cta__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cta__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,50,20,.74), rgba(21,78,37,.82));
}
.cta__inner{ position:relative; text-align:center; padding-block:clamp(72px,9vw,110px); color:#fff; }
.cta .h2{ color:#fff; }
.cta__actions{ display:flex; justify-content:center; margin-top:2rem; }
.cta__meta{
  margin:1.8rem 0 0; font-size:.875rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.footer{
  background:var(--ink); color:rgba(255,255,255,.66);
  padding-top:clamp(64px,7.5vw,104px);
}
.footer__grid{
  display:grid; grid-template-columns:1.9fr 1fr 1fr 1.3fr;
  gap:clamp(36px,4.5vw,72px);
  align-items:start;
  padding-bottom:clamp(52px,6vw,80px);
}

/* One shared heading row: the wordmark and the three column titles sit on the
   same optical baseline, so every column starts its body copy at the same y. */
.footer__brand img{ display:block; height:34px; width:auto; margin:0 0 24px; }
.footer__col h4{
  display:flex; align-items:center; min-height:34px; margin:0 0 24px;
  font-size:.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; color:#fff;
}

.footer__brand p{ max-width:44ch; margin:0; font-size:.9375rem; line-height:1.75; }
.footer__col a{
  display:block; width:fit-content; padding:7px 0;
  font-size:.9375rem; line-height:1.5; color:rgba(255,255,255,.66);
  transition:color .3s var(--ease);
}
.footer__col a:first-of-type{ padding-top:0; }
.footer__col a:hover{ color:var(--gold-lt); }
.footer__col p{ margin:14px 0 0; font-size:.875rem; line-height:1.7; }

.footer__col--contact a{ color:#fff; }
.footer__col--contact a:hover{ color:var(--gold-lt); }

/* ---- Legal bar ---- */
.footer__legal{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 32px;
  justify-content:space-between;
  padding-block:26px 32px; border-top:1px solid rgba(255,255,255,.12);
  font-size:.8125rem; line-height:1.6; color:rgba(255,255,255,.45);
}
.footer__legal p{ margin:0; }
.footer__legal a{ color:rgba(255,255,255,.45); transition:color .3s var(--ease); }
.footer__legal a:hover{ color:var(--gold-lt); }
.footer__top{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
}
.footer__top-arrow{
  width:26px; height:26px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  display:grid; place-items:center;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.footer__top-arrow::before{
  content:""; width:6px; height:6px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(-45deg); margin-top:2px;
}
.footer__top:hover .footer__top-arrow{
  border-color:var(--gold-lt); background:rgba(255,255,255,.06); transform:translateY(-2px);
}

/* ---------------------------------------------------------------
   Header CTA + Produtos dropdown
   --------------------------------------------------------------- */
.header__nav{ align-items:center; }
.header__nav > a,.drop__trigger{ white-space:nowrap; }

.header__cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 10px 9px 20px; border-radius:999px;
  border:1px solid rgba(255,255,255,.42); color:#fff;
  font-size:.875rem; font-weight:600;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.header__cta .btn__arrow{ --sz:24px; background:rgba(255,255,255,.16); }
.header__cta:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); transform:translateY(-1px); }
.header__cta:hover .btn__arrow{ background:rgba(6,50,20,.14); }
.header__cta:hover .btn__arrow::before{ transform:rotate(-90deg) translate(0,0); }
.header.is-solid .header__cta{ color:var(--green-dark); border-color:var(--line); }
.header.is-solid .header__cta .btn__arrow{ background:rgba(6,50,20,.08); }
.header.is-solid .header__cta:hover{ background:var(--green); border-color:var(--green); color:#fff; }

.drop{ position:relative; }
.drop__trigger{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  font-size:.9375rem; font-weight:500; color:#fff; padding-block:6px;
  transition:color .3s var(--ease);
}
.drop__trigger::after{
  content:""; position:absolute; left:0; right:18px; bottom:0; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.drop:hover .drop__trigger::after,
.drop__trigger[aria-expanded="true"]::after{ transform:scaleX(1); }
.drop__caret{ width:14px; height:14px; opacity:.7; transition:transform .3s var(--ease); }
.drop__trigger[aria-expanded="true"] .drop__caret{ transform:rotate(180deg); }
.header.is-solid .drop__trigger{ color:var(--ink); }
.header.is-solid .drop:hover .drop__trigger{ color:var(--green); }

.drop__menu{
  position:absolute; top:calc(100% + 14px); left:-14px; z-index:6;
  width:302px; padding:8px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 50px -22px rgba(6,50,20,.42), 0 2px 6px -2px rgba(6,50,20,.14);
  opacity:0; transform:translateY(-8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.drop__menu.is-open{ opacity:1; transform:none; }
.drop__menu::before{
  content:""; position:absolute; top:-5px; left:32px; width:9px; height:9px; background:#fff;
  border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg);
}
.drop__menu a{
  display:grid; gap:2px; padding:11px 14px; border-radius:9px;
  transition:background .2s var(--ease), padding-left .25s var(--ease);
}
.drop__menu a:hover{ background:var(--surface-alt); padding-left:18px; }
.drop__menu strong{ font-size:.9375rem; font-weight:600; color:var(--ink); }
.drop__menu span{ font-size:.8125rem; color:var(--muted); line-height:1.4; }
/* hairline between the three crops and the two content sections */
.drop__menu .drop__sep{ display:block; height:1px; margin:6px 14px; background:var(--line); }

/* active section indicator */
.header__nav a.is-current::after,
.drop.is-current .drop__trigger::after{ transform:scaleX(1); background:var(--gold); }

/* ---------------------------------------------------------------
   Menu overlay: rows with sub-links
   --------------------------------------------------------------- */
.menu__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  border-bottom:1px solid rgba(255,255,255,.14); flex-wrap:wrap;
}
.menu__nav{ gap:0; }
.menu__nav .menu__row > a{ border-bottom:0; flex:1 1 auto; }
.menu__sub{
  display:flex; gap:22px; flex-wrap:wrap; padding-bottom:clamp(14px,2.2vw,22px);
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.menu.is-open .menu__sub{ opacity:1; transform:none; transition-delay:.32s; }
.menu__sub a{
  font-size:.9375rem; font-weight:500; color:var(--tint);
  border-bottom:1px solid transparent; padding:0;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.menu__sub a:hover{ color:var(--gold-lt); border-color:currentColor; }

/* ---------------------------------------------------------------
   Hero additions: line masks, fact strip, slow zoom
   --------------------------------------------------------------- */
.mask{ display:block; overflow:hidden; }
.mask > span{ display:block; }
.js .mask > span{ transform:translateY(105%); transition:transform .95s var(--ease); }
.js .mask > span.is-in{ transform:none; }
.hero__title .mask:nth-child(2) > span{ transition-delay:.12s; }

.js .hero__poster{ animation:kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1) } to{ transform:scale(1.07) } }

.hero__facts{
  display:flex; flex-wrap:wrap; gap:0; margin-top:2.6rem;
  border-top:1px solid rgba(255,255,255,.22);
}
.hero__facts li{
  padding:18px 28px 0 0; margin-right:28px;
  border-right:1px solid rgba(255,255,255,.18);
}
.hero__facts li:last-child{ border-right:0; margin-right:0; padding-right:0; }
.hero__facts strong{
  display:block; font-size:1.75rem; font-weight:500; line-height:1; color:#fff;
  letter-spacing:-.025em; font-variation-settings:'wdth' 108;
}
.hero__facts span{
  display:block; margin-top:6px; font-size:.8125rem; letter-spacing:.04em;
  color:rgba(255,255,255,.68);
}

/* ---------------------------------------------------------------
   Mid-page CTA strip
   --------------------------------------------------------------- */
.strip{ background:var(--green-dark); color:#fff; }
.strip__inner{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,4vw,60px);
  padding-block:clamp(38px,4.5vw,56px); flex-wrap:wrap;
}
.strip .eyebrow{ margin-bottom:.7rem; }
.strip__text{
  margin:0; font-size:clamp(1.15rem,2vw,1.6rem); line-height:1.32; font-weight:500; color:#fff;
  letter-spacing:-.014em; font-variation-settings:'wdth' 108;
}

/* ---------------------------------------------------------------
   Sustentabilidade
   A photograph that holds its place while the four principles
   move past it. Four sentences, not four checklists.
   --------------------------------------------------------------- */
.sustent{ background:var(--surface); }
.sustent__grid{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(32px,5vw,84px); align-items:start;
}
.sustent__figure{
  position:sticky; top:112px;   /* clears the 84px header */
  margin:0; border-radius:calc(var(--radius) + 4px); overflow:hidden;
  background:var(--surface-alt); aspect-ratio:4/5;
}
.sustent__figure img{ width:100%; height:100%; object-fit:cover; }
.sustent__figure figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:52px 22px 20px;
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(6,50,20,.88));
}
.sustent__text .lead{ margin-bottom:clamp(28px,3.4vw,44px); }

.pills{ display:grid; }
.pill{
  position:relative; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,2.2vw,34px); align-items:start;
  padding:clamp(22px,2.4vw,30px) 0;
  border-top:1px solid var(--line);
}
.pill:last-child{ border-bottom:1px solid var(--line); }
.pill::after{
  content:""; position:absolute; left:0; top:-1px; width:0; height:2px; background:var(--gold);
  transition:width .7s var(--ease);
}
.pill.is-in::after{ width:100%; transition-delay:calc(.12s * var(--i,0) + .1s); }
.pill__num{
  font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:500; line-height:1;
  color:var(--tint); font-variant-numeric:tabular-nums; letter-spacing:-.03em;
  transition:color .4s var(--ease);
}
.pill:hover .pill__num{ color:var(--gold-md); }

/* Homepage bullets: the four pillars read as a list, not a ranking, so the
   marker is the same gold dash used by .pill__sub, sized to the h3's cap. */
.pill__dot{
  width:clamp(14px,1.5vw,20px); height:1.5px; margin-top:.72em;
  background:var(--tint); transition:background .4s var(--ease);
}
.pill:hover .pill__dot{ background:var(--gold-md); }
.pill__body h3{
  margin:0 0 .45em; font-size:clamp(1.15rem,1.7vw,1.4rem); font-weight:500; color:var(--ink);
  letter-spacing:-.016em; font-variation-settings:'wdth' 108;
}
.pill__body p{ margin:0; font-size:1rem; line-height:1.6; color:var(--muted); max-width:52ch; }

/* ---------------------------------------------------------------
   Galeria additions
   --------------------------------------------------------------- */
.galeria{ padding-top:var(--section-y); background:var(--surface-alt); }
.galeria__grid{ grid-auto-rows:auto; }
.galeria__item img{ cursor:zoom-in; }
.galeria__item--video{ background:var(--ink); }
.galeria__item--video video{ width:100%; height:100%; object-fit:cover; }
.galeria__tag{
  position:absolute; top:12px; left:12px; z-index:2;
  padding:5px 11px; border-radius:999px;
  background:rgba(6,50,20,.55); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.24);
  font-size:.625rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff;
}
.galeria__item{ position:relative; }

/* ---------------------------------------------------------------
   Porque trabalhar connosco
   --------------------------------------------------------------- */
.why{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:clamp(48px,6vw,80px); border-top:1px solid var(--line);
}
.why__item{
  position:relative; padding:28px 26px 30px 0;
  border-right:1px solid var(--line);
}
.why__item + .why__item{ padding-left:26px; }
.why__item:last-child{ border-right:0; padding-right:0; }
.why__item::before{
  content:""; position:absolute; left:0; top:-1px; width:0; height:2px; background:var(--gold);
  transition:width .5s var(--ease);
}
.why__item.is-in::before{ width:100%; transition-delay:calc(.1s * var(--i,0) + .1s); }
.why__num{ display:block; font-size:.75rem; font-weight:700; letter-spacing:.16em; color:var(--gold-md); }
.why__item h3{
  margin:.7em 0 .4em; font-size:1.0625rem; font-weight:600; color:var(--ink); letter-spacing:-.005em;
}
.why__item p{ margin:0; font-size:.9375rem; color:var(--muted); line-height:1.55; }

/* ---------------------------------------------------------------
   Contacto band additions
   --------------------------------------------------------------- */
.cta__lead{
  max-width:52ch; margin:1.4rem auto 0; color:rgba(255,255,255,.8); font-size:1.0313rem;
}
.cta__cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px);
  margin-top:clamp(40px,5vw,60px); text-align:left;
}
.ccontact{
  padding:clamp(22px,2.4vw,30px);
  border:1px solid rgba(255,255,255,.2); border-radius:calc(var(--radius) + 4px);
  background:rgba(255,255,255,.06); backdrop-filter:blur(4px);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.ccontact:hover{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.4); transform:translateY(-3px); }
.ccontact__icon{
  display:grid; place-items:center; width:42px; height:42px; border-radius:999px;
  background:rgba(243,184,0,.18); color:var(--gold-lt); margin-bottom:16px;
}
.ccontact__icon svg{ width:20px; height:20px; }
.ccontact h3{
  margin:0 0 8px; font-size:.75rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
}
.ccontact a,.ccontact p{
  margin:0; font-size:1.0313rem; font-weight:500; color:#fff; line-height:1.5;
}
.ccontact a{ border-bottom:1px solid rgba(255,255,255,.3); transition:color .3s var(--ease); }
.ccontact a:hover{ color:var(--gold-lt); }

/* ---------------------------------------------------------------
   Footer additions
   --------------------------------------------------------------- */
.footer__tags{ display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 0; }
.footer__tags li{
  padding:6px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.2);
  font-size:.75rem; font-weight:600; letter-spacing:.06em; color:rgba(255,255,255,.72);
}

/* ---------------------------------------------------------------
   Lightbox
   --------------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:120;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(8px,2vw,24px);
  padding:clamp(16px,4vw,48px);
  background:rgba(4,26,12,.94); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .3s var(--ease);
}
.lightbox.is-open{ opacity:1; }
/* a display declaration outranks the UA rule for [hidden], and an
   invisible full-viewport grid would eat every click on the page */
.lightbox[hidden]{ display:none; }
.lightbox__figure{ margin:0; display:grid; justify-items:center; gap:16px; min-width:0; }
.lightbox__figure img{
  max-width:100%; max-height:78vh; width:auto; border-radius:var(--radius);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);
}
.lightbox__figure figcaption{
  font-size:.875rem; color:rgba(255,255,255,.7); text-align:center; max-width:60ch;
}
.lightbox__close,.lightbox__nav{
  position:relative; width:48px; height:48px; border-radius:999px; flex:none;
  border:1px solid rgba(255,255,255,.28); color:#fff;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__close:hover,.lightbox__nav:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.6); }
.lightbox__close{ position:absolute; top:clamp(16px,3vw,32px); right:clamp(16px,3vw,32px); z-index:2; }
.lightbox__close::before,.lightbox__close::after{
  content:""; position:absolute; left:50%; top:50%; width:16px; height:1.6px; background:currentColor;
}
.lightbox__close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.lightbox__close::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.lightbox__nav::before{
  content:""; position:absolute; left:50%; top:50%; width:10px; height:10px;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
}
.lightbox__nav--prev::before{ transform:translate(-45%,-50%) rotate(135deg); }
.lightbox__nav--next::before{ transform:translate(-55%,-50%) rotate(-45deg); }

/* ---------------------------------------------------------------
   Wipe reveal (used on framed photography)
   The clip sits on the image, not on the observed wrapper: a
   collapsed clip-path zeroes the element's own intersection rect,
   so an observer watching the wrapper would never fire.
   --------------------------------------------------------------- */
.js .reveal--wipe{ opacity:1; transform:none; }
.js .reveal--wipe img{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s var(--ease), transform .8s var(--ease);
  transform:scale(1.06);
}
.js .reveal--wipe.is-in img{ clip-path:inset(0 0 0 0); transform:none; }
html:not(.js) .reveal--wipe img{ clip-path:none; }

/* button sheen */
.btn{ position:relative; overflow:hidden; }
.btn > *{ position:relative; z-index:1; }
.btn::after{
  content:""; position:absolute; top:0; left:-40%; width:35%; height:100%; z-index:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform:skewX(-18deg); transition:left .65s var(--ease);
}
.btn:hover::after{ left:120%; }

/* ---------------------------------------------------------------
   Scroll reveal
   --------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(24px); }
.js .reveal{ transition:opacity .55s var(--ease), transform .55s var(--ease); transition-delay:calc(.08s * var(--i,0)); }
.reveal.is-in{ opacity:1; transform:none; }
html:not(.js) .reveal{ opacity:1; transform:none; }


/* ---------------------------------------------------------------
   O que produzimos: cards that run sideways as the page scrolls
   The section is taller than the viewport. While it is pinned the
   vertical scroll is translated into horizontal travel, so the page
   only continues once the last card has arrived.
   Without the pin (phones, no JS, reduced motion) the viewport is
   a plain snap-scrolling carousel, which is the better experience.
   --------------------------------------------------------------- */
.produz{ padding-block:0; }                 /* the pin carries its own rhythm */
.produz__stack{ position:relative; }
.produz__pin{
  display:flex; flex-direction:column; gap:clamp(26px,3.2vw,46px);
  padding-block:var(--section-y);
}
.produz .band__head{ margin-bottom:0; }

.produz__viewport{
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
}
.produz__viewport::-webkit-scrollbar{ display:none; }
.produz__row{
  display:flex; width:max-content; gap:clamp(16px,1.6vw,24px);
  padding-inline:max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  /* room for the hover lift and its shadow inside the clip */
  padding-block:6px 26px;
}
.produz__row:focus-visible{ outline-offset:-4px; }

/* pinned mode: the row is driven by transform, not by its own scrollbar */
/* The sticky element itself stays a plain box: no overflow, no opaque
   fill of its own. Clipping and the opaque fill on a full-height sticky
   layer made Chrome re-rasterise it mid-scroll, which showed up as a
   flash of unpainted band. The clip now lives on the inner, non-sticky
   viewport, which is where the transform is anyway. */
.produz__stack.is-pinned .produz__pin{
  position:sticky; top:0; height:100svh;
  justify-content:center; gap:clamp(20px,2.6vh,38px);
  padding-block:clamp(104px,13vh,140px) clamp(24px,4vh,44px);
}
/* hidden, not auto: the pin drives the row, the user cannot scroll it */
.produz__stack.is-pinned .produz__viewport{ overflow:hidden; scroll-snap-type:none; }
/* pinned, the cards are sized off the viewport height so the whole
   composition — heading, row, controls — always fits one screen */
.produz__stack.is-pinned .ccard{ height:clamp(270px,44svh,420px); width:auto; }

.ccard{
  position:relative; flex:none;
  width:clamp(250px,25vw,330px); aspect-ratio:4/5;
  border-radius:calc(var(--radius) + 2px); overflow:hidden;
  background:var(--green-dark); scroll-snap-align:start;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ccard__link{ position:absolute; inset:0; display:block; }
.ccard__shot{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), opacity .5s var(--ease);
}
.ccard__shot--close{ opacity:0; }
.ccard__link::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,50,20,0) 26%, rgba(6,50,20,.52) 56%, rgba(6,50,20,.94) 100%);
}
.ccard:hover{ transform:translateY(-5px); box-shadow:0 22px 46px -24px rgba(6,50,20,.62); }
.ccard:hover .ccard__shot{ transform:scale(1.05); }
/* the close-up of what the crop actually sells as */
.ccard:hover .ccard__shot--close,
.ccard:focus-within .ccard__shot--close{ opacity:1; }
.ccard:hover .ccard__shot:not(.ccard__shot--close),
.ccard:focus-within .ccard__shot:not(.ccard__shot--close){ opacity:0; }

.ccard__body{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:block; padding:26px 24px 24px; color:#fff;
}
.ccard__idx{
  display:block; margin-bottom:8px; font-size:.6875rem; font-weight:700;
  letter-spacing:.16em; color:var(--gold); font-variant-numeric:tabular-nums;
}
.ccard__title{
  display:block; font-size:clamp(1.2rem,1.6vw,1.45rem); font-weight:500; line-height:1.15;
  letter-spacing:-.014em; font-variation-settings:'wdth' 108;
}
.ccard__text{
  display:block; font-size:.9375rem; line-height:1.5; color:rgba(255,255,255,.84);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s var(--ease), opacity .35s var(--ease), margin .45s var(--ease);
}
.ccard:hover .ccard__text,
.ccard:focus-within .ccard__text{ max-height:9em; opacity:1; margin-top:.6em; }
.ccard__more{
  display:flex; align-items:center; gap:6px; margin-top:14px;
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-lt);
  opacity:0; transform:translateY(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.ccard:hover .ccard__more,
.ccard:focus-within .ccard__more{ opacity:1; transform:none; }
.badge{
  display:inline-block; margin-bottom:12px; padding:5px 12px; border-radius:999px;
  background:var(--gold); color:var(--ink);
  font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}

.carousel__ctrl{ display:flex; align-items:center; gap:20px; }
.cbtn{
  width:46px; height:46px; border-radius:999px; flex:none;
  border:1px solid rgba(21,78,37,.28); color:var(--green-dark);
  display:grid; place-items:center;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s;
}
.cbtn svg{ width:20px; height:20px; }
.cbtn:hover{ background:var(--green-dark); border-color:var(--green-dark); color:#fff; }
.cbtn[disabled]{ opacity:.3; cursor:default; }
.cbtn[disabled]:hover{ background:none; color:var(--green-dark); border-color:rgba(21,78,37,.28); }
.cprogress{ flex:1; height:1px; background:rgba(21,78,37,.25); position:relative; }
.cprogress span{
  position:absolute; left:0; top:-1px; height:3px; width:20%;
  background:var(--green-dark); transition:transform .25s var(--ease), width .25s var(--ease);
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width:1279px){
  .hero__content{ max-width:min(620px,68%); }
  .hero__vertical{ display:none; }
  .band__head{ grid-template-columns:1fr; align-items:start; }
  .header__nav{ gap:26px; }
  .why{ grid-template-columns:repeat(2,1fr); }
  .why__item:nth-child(2n){ border-right:0; }
  .why__item:nth-child(2n+1){ padding-left:0; }
  .why__item:nth-child(n+3){ border-top:1px solid var(--line); }
  .footer__grid{ grid-template-columns:repeat(3,1fr); row-gap:clamp(40px,5vw,56px); }
  .footer__brand{ grid-column:1 / -1; }
  .footer__brand p{ max-width:56ch; }
}

/* 1024-1199px: the full nav, the CTA, the language pill and the burger
   together outgrew the bar, which pushed the burger off-screen exactly as it
   did on phones. Everything steps down a size rather than dropping out. */
@media (max-width:1199px){
  .header__inner{ height:76px; gap:16px; }
  .header__logo,.header__logo-img{ height:34px; }
  .header__nav{ gap:18px; }
  .header__utils{ gap:12px; }
  .burger{ width:76px; height:76px; }
  .header__cta{ padding:8px 9px 8px 16px; font-size:.8125rem; }
  section[id],aside[id],main[id]{ scroll-margin-top:88px; }
}

@media (max-width:1023px){
  .header__nav{ display:none; }
  .header__utils{ margin-left:auto; }
  .header__cta{ display:none; }
  .cta__cards{ grid-template-columns:1fr; }
  .strip__inner{ flex-direction:column; align-items:flex-start; }
  .exploracao__grid,.mercado__grid,.local__grid{ grid-template-columns:1fr; }
  .sustent__grid{ grid-template-columns:1fr; }
  /* relative, not static: the figcaption is absolutely positioned, and a
     static parent hands it to the initial containing block, i.e. it paints
     itself across the top of the hero */
  .sustent__figure{ position:relative; top:auto; aspect-ratio:16/10; }
  /* no pinning below 1024px: native snap scrolling reads better on touch */
  .produz{ padding-bottom:var(--section-y); }
  .exploracao__media{ position:relative; top:auto; }   /* contains .frame--inset */
  /* the offset inset frame would poke past the viewport in one column */
  .frame--inset{ right:0; }
  .local__grid{ gap:48px; }
  .local__mapwrap{ order:-1; }
  .mz{ max-width:280px; }
  .exploracao__media{ max-width:560px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2n){ border-right:0; }
  .menu__meta{ grid-template-columns:1fr 1fr; }
}

@media (max-width:767px){
  /* ---- header ----------------------------------------------------------
     The logo rendered 197px wide, which together with the language pill
     and the burger came to 417px of content on a 375px screen: the burger
     sat entirely off-canvas, so the full-screen menu could not be closed.
     -------------------------------------------------------------------- */
  .header__inner{ height:62px; gap:12px; }
  .header__logo,.header__logo-img{ height:26px; }
  .header__utils{ gap:8px; }
  .burger{ width:62px; height:62px; }
  .burger__lines{ width:20px; gap:5px; }
  .lang__trigger{ padding:8px 8px 8px 10px; gap:6px; min-height:40px; }
  .lang__code{ letter-spacing:.04em; }
  .lang__menu{ min-width:214px; }

  /* ---- type: a narrower measure wants smaller steps ---- */
  body{ font-size:1rem; line-height:1.6; }
  .h2{ font-size:1.75rem; }
  .h3{ font-size:1.3rem; }
  .lead{ font-size:1rem; line-height:1.55; }
  .eyebrow{ font-size:.75rem; letter-spacing:.1em; gap:10px; }
  .eyebrow__idx::after{ width:18px; margin-left:10px; }

  /* ---- hero: exactly one screen, nothing clipped ---- */
  .hero{ min-height:100svh; }
  .hero__inner{ padding:88px var(--gutter) 92px; align-items:center; }
  .hero__content{ max-width:100%; }
  .hero__title{ font-size:2.05rem; line-height:1.07; margin-bottom:.42em; }
  .hero__lead{ font-size:.9375rem; line-height:1.55; max-width:none; }
  .hero__actions{ gap:10px; margin-top:1.5rem; }
  .hero__actions .btn{
    width:100%; justify-content:space-between;
    padding:9px 10px 9px 22px; font-size:.9375rem;
  }
  .hero__actions .btn__arrow{ --sz:26px; }
  .hero__bar{ padding-bottom:24px; }
  .hero__scroll{ font-size:.6875rem; gap:10px; }
  .hero__scroll-line{ width:40px; }
  .hero__scrim{
    background:linear-gradient(180deg, rgba(6,50,20,.72) 0%, rgba(6,50,20,.55) 34%, rgba(6,50,20,.62) 66%, rgba(6,50,20,.86) 100%);
  }
  /* three across in one row: a 2-up grid orphaned the third fact onto a
     second line and pushed it below the fold */
  .hero__facts{
    display:grid; grid-template-columns:repeat(3,1fr); gap:0 10px;
    margin-top:1.5rem;
  }
  .hero__facts li{ padding:12px 0 0; margin:0; border-right:0; }
  .hero__facts strong{ font-size:1.15rem; }
  .hero__facts span{ font-size:.6875rem; line-height:1.35; letter-spacing:.02em; }

  /* ---- exploração ---- */
  .frame--inset{ position:static; width:100%; margin-top:14px; border:0; }
  .exploracao__media{ padding-bottom:0; display:grid; grid-template-columns:1.4fr 1fr; gap:12px; align-items:end; }
  .exploracao__media .frame--inset{ margin-top:0; aspect-ratio:1/1; }
  .factlist{ margin-top:1.8rem; }
  .factlist__row{ gap:14px; padding:15px 2px; }
  .factlist__icon{ width:38px; height:38px; }
  .factlist__icon svg{ width:18px; height:18px; }
  .factlist__body strong{ font-size:.9375rem; }
  .factlist__body span{ font-size:.875rem; }
  .factlist__arrow{ --sz:24px; }

  /* ---- localização: the map is the tallest single graphic on the page, so
     it shrinks while its in-SVG labels grow to keep their rendered size ---- */
  .local__facts{ grid-template-columns:1fr; }
  .local__fact{ padding:13px 0; }
  .local__fact:nth-child(odd){ padding-right:0; }
  .local__map{ gap:16px; }
  .mz{ max-width:236px; }
  .mz__label text{ font-size:30px; }
  .mz__label .mz__label-sub{ font-size:23px; }
  .local__legend{ gap:18px; font-size:.75rem; }
  .local__note{ margin-top:1.3rem; }

  /* ---- sustentabilidade ---- */
  .pill{ grid-template-columns:1fr; gap:8px; padding:20px 0; }
  .pill__num{ font-size:1.4rem; }
  .pill__dot{ margin-top:0; }
  .pill__body p{ font-size:.9375rem; }

  /* ---- produtos ---- */
  .ccard{ width:min(78vw,300px); }
  .ccard__body{ padding:22px 20px 20px; }
  .ccard__text{ max-height:9em; opacity:1; margin-top:.6em; font-size:.875rem; }
  .ccard__more{ opacity:1; transform:none; }
  .carousel__ctrl{ gap:16px; }
  .cbtn{ width:44px; height:44px; }

  /* ---- galeria ---- */
  .galeria__grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .galeria__item,.galeria__item--tall{ aspect-ratio:1/1; }

  /* ---- porquê ---- */
  .why{ grid-template-columns:1fr; margin-top:2rem; }
  .why__item,.why__item + .why__item{ padding:20px 0; border-right:0; }
  .why__item:nth-child(n+2){ border-top:1px solid var(--line); }

  /* ---- números: 2x2 reads far better than four full-width rows ---- */
  .stats{ grid-template-columns:1fr 1fr; margin-top:2rem; }
  .stat{ padding:22px 12px; }
  .stat:nth-child(2n){ border-right:0; }
  .stat__value{ font-size:clamp(2rem,9vw,2.6rem); }
  .stat__label{ margin-top:10px; font-size:.8125rem; max-width:17ch; }
  /* a seven-line centred paragraph is hard to track back to on a phone */
  .numeros__note{ margin-top:2rem; text-align:left; font-size:1rem; }

  /* ---- contacto ---- */
  .cta{ min-height:0; }
  .cta__inner{ padding-block:clamp(56px,14vw,80px); }
  .cta__lead{ font-size:.9375rem; }
  .cta__cards{ grid-template-columns:1fr; margin-top:2rem; gap:12px; }
  .ccontact{ padding:20px; }
  .ccontact__icon{ width:38px; height:38px; margin-bottom:12px; }
  .ccontact a,.ccontact p{ font-size:1rem; overflow-wrap:anywhere; }
  .cta__meta{ font-size:.75rem; letter-spacing:.08em; }

  /* ---- strip ---- */
  .strip__text{ font-size:1.1rem; }

  /* ---- menu overlay ---- */
  .menu__inner{ padding:84px var(--gutter) 40px; }
  .menu__row{ flex-direction:column; align-items:flex-start; gap:0; }
  .menu__nav .menu__row > a{ padding:10px 0; gap:14px; font-size:1.25rem; }
  .menu__sub{ gap:16px; padding-top:2px; padding-bottom:12px; }
  .menu__sub a{ font-size:.875rem; }
  .menu__meta{ grid-template-columns:1fr; gap:18px; margin-top:26px; font-size:.875rem; }

  /* ---- lightbox: the nav buttons move to their own row underneath ---- */
  .lightbox{ grid-template-columns:1fr; grid-template-rows:1fr auto; }
  .lightbox__figure{ grid-row:1; }
  .lightbox__figure img{ max-height:66svh; }
  .lightbox__nav{ position:relative; width:44px; height:44px; }
  .lightbox__nav--prev{ grid-column:1; grid-row:2; justify-self:start; }
  .lightbox__nav--next{ grid-column:1; grid-row:2; justify-self:end; }

  /* ---- footer ---- */
  .footer__grid{ grid-template-columns:1fr; row-gap:38px; }
  .footer__brand img,
  .footer__col h4{ margin-bottom:18px; }
  .footer__col h4{ min-height:0; }
  .footer__brand p{ max-width:48ch; }
  .footer__legal{ flex-direction:column; align-items:flex-start; gap:16px; }
}

/* Narrow phones (320–374px). The header is the only thing that still has to
   give, so the logo steps down again and the caret goes. */
@media (max-width:374px){
  .header__logo,.header__logo-img{ height:23px; }
  .lang__caret{ display:none; }
  .lang__trigger{ padding:8px 10px; }
  .burger{ width:56px; height:56px; }
  .hero__title{ font-size:1.9rem; }
  .hero__facts strong{ font-size:1.05rem; }
  .hero__facts span{ font-size:.625rem; }
  .exploracao__media{ grid-template-columns:1fr; }
  .exploracao__media .frame--inset{ aspect-ratio:16/10; }
  .stat__label{ font-size:.75rem; }
}

/* Short screens: take the hero's breathing room out of the padding rather
   than out of the content, so nothing spills past the fold. */
@media (max-width:767px) and (max-height:700px){
  .hero__inner{ padding-top:78px; padding-bottom:80px; }
  .hero__title{ font-size:1.85rem; }
  .hero__lead{ font-size:.875rem; }
  .hero__actions{ margin-top:1.15rem; gap:8px; }
  .hero__facts{ margin-top:1.15rem; }
}

/* The smallest screens still in service (320x568). */
@media (max-width:374px) and (max-height:640px){
  .hero__inner{ padding-top:70px; padding-bottom:64px; }
  .hero__title{ font-size:1.7rem; }
  .hero__lead{ font-size:.8125rem; line-height:1.5; }
  .hero__actions .btn{ padding:8px 8px 8px 18px; font-size:.875rem; }
  .hero__bar{ padding-bottom:18px; }
}

/* Landscape phones are too short to hold a full-height hero. */
@media (max-width:1023px) and (max-height:520px) and (orientation:landscape){
  .hero{ min-height:0; }
  .hero__inner{ padding-top:80px; padding-bottom:70px; }
}

/* ---------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .ccard__text{ max-height:9em; opacity:1; margin-top:.6em; }
  .ccard__more{ opacity:1; transform:none; }
  .hero__scroll-line::after{ display:none; }
  .js .mask > span{ transform:none !important; }
  .js .hero__poster{ animation:none; }
  .js .reveal--wipe img{ clip-path:none !important; transform:none !important; }
  .btn::after{ display:none; }
}

/* =============================================================
   MULTIPAGE ADDITIONS
   Everything below is new-class only, so index.html renders
   exactly as before. Interior pages (a-exploracao.html and the
   rest) are built out of these plus the components above.
   ============================================================= */

/* ---------------------------------------------------------------
   Active page in the nav
   Driven by aria-current="page" in the markup, not by JavaScript,
   so it is right on first paint and right without JS.
   --------------------------------------------------------------- */
.header__nav a[aria-current="page"]::after,
.drop:has(a[aria-current="page"]) .drop__trigger::after{
  transform:scaleX(1); background:var(--gold);
}
.menu__nav .menu__row > a[aria-current="page"]{ color:var(--gold-lt); }

/* ---------------------------------------------------------------
   Page hero (interior pages)
   Shorter than the homepage hero and always dark, so the header
   keeps its over-image colours until the first scroll.
   --------------------------------------------------------------- */
.phero{
  position:relative; display:grid; align-items:end;
  min-height:clamp(400px,58svh,620px);
  overflow:hidden; background:var(--ink);
}
.phero--short{ min-height:clamp(320px,42svh,440px); }
.phero__media{ position:absolute; inset:-10% 0; will-change:transform; }
.phero__bg{ width:100%; height:100%; object-fit:cover; }
.phero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,50,20,.80) 0%, rgba(6,50,20,.40) 46%, rgba(6,50,20,.90) 100%);
}
.phero__inner{
  position:relative;
  padding-block:clamp(128px,15vw,172px) clamp(44px,5.5vw,72px);
  color:#fff;
}
.phero__title{
  margin:0 0 .55em; max-width:22ch;
  font-size:clamp(2.15rem,4.6vw,3.7rem); line-height:1.07;
  font-weight:500; letter-spacing:-.024em;
  font-variation-settings:'wdth' 112; color:#fff;
}
.phero__lead{
  margin:0; max-width:56ch;
  font-size:clamp(1rem,1.3vw,1.2rem); line-height:1.55;
  color:rgba(255,255,255,.84);
}
.js .phero__bg{ animation:kenburns 30s ease-in-out infinite alternate; }

/* ---------------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------------- */
.crumbs{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  margin:0 0 clamp(20px,2.6vw,30px);
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.crumbs a{
  color:rgba(255,255,255,.84);
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.crumbs a:hover{ color:var(--gold-lt); border-color:currentColor; }
.crumbs__sep{ width:16px; height:1px; background:currentColor; opacity:.45; }
.crumbs [aria-current="page"]{ color:var(--gold-lt); }


/* ---------------------------------------------------------------
   Localização, closer view of Niassa
   The main SVG crops its viewBox to the Niassa bounding box plus a
   margin. Everything is ~2x bigger in user units than on the
   homepage map, so strokes and label sizes step down to match.
   The corner inset reuses the same paths through <use>, which is
   why the province geometry only appears in the file once.
   --------------------------------------------------------------- */
.mzwrap{ position:relative; width:100%; max-width:520px; }
/* .mz is overflow:visible so the homepage label can sit outside the viewBox.
   Here the viewBox is a crop of a much larger drawing, so the rest of the
   country would paint straight down the page: it has to be clipped. */
.mz--near{ max-width:none; width:100%; overflow:hidden; border-radius:var(--radius); }
.mz--near .mz__prov{ stroke-width:.8; }
.mz--near .mz__pin-ring,
.mz--near .mz__pin-dot{ stroke-width:1.1; }

.mz__prov-name{
  font-family:inherit; font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  fill:#fff; opacity:.7; pointer-events:none;
}
.mz__near-label{ pointer-events:none; }
.mz__near-label text{
  font-family:inherit; font-size:8.2px; font-weight:600;
  fill:#fff; letter-spacing:-.01em;
  paint-order:stroke; stroke:rgba(6,50,20,.72); stroke-width:2.6px; stroke-linejoin:round;
}
.mz__near-label .mz__near-sub{
  font-size:5.6px; font-weight:500; letter-spacing:.06em;
  fill:rgba(255,255,255,.82); stroke-width:2px;
}
.dot--pin{ background:var(--gold); border-radius:999px; }
.dot--sec{ background:#fff; border:1px solid var(--tint); border-radius:999px; }
.local__legend{ flex-wrap:wrap; row-gap:10px; }

/* Lichinga is a reference point on this map, not the subject, so it gets a
   plain dot and a lighter label than the Mandimba pin. */
.mz__sec-dot{ fill:#fff; stroke:rgba(6,50,20,.45); stroke-width:.8; }
.mz__near-label--sec text{ font-weight:500; fill:rgba(255,255,255,.92); stroke-width:2.2px; }
.mz__near-label--sec .mz__near-sub{ fill:rgba(255,255,255,.7); }

.mz-inset{
  position:absolute; right:0; bottom:0;
  width:clamp(58px,13%,80px); height:auto;
  padding:6px; border-radius:6px;
  background:rgba(255,255,255,.92); border:1px solid var(--line);
  box-shadow:0 8px 22px -14px rgba(6,50,20,.4);
}
.mz-inset__box{ fill:none; stroke:var(--gold); stroke-width:11; }

/* ---------------------------------------------------------------
   Galeria and Números, interior-page variants
   The homepage runs alt, white, alt down the page; on an interior
   page these two sit next to Localização, so their tints flip.
   --------------------------------------------------------------- */
.galeria__intro{
  margin:1.1rem 0 0; max-width:58ch;
  font-size:1rem; color:var(--muted);
}

/* ---------------------------------------------------------------
   Multipage responsive
   --------------------------------------------------------------- */
@media (max-width:1023px){
  .mzwrap{ max-width:560px; }
}

@media (max-width:767px){
  .phero{ min-height:clamp(340px,66svh,520px); }
  .phero__inner{ padding-block:104px 40px; }
  .phero__title{ font-size:2.05rem; line-height:1.08; max-width:none; }
  .phero__lead{ font-size:.9375rem; line-height:1.5; }
  .crumbs{ gap:9px; font-size:.6875rem; letter-spacing:.08em; }
  .crumbs__sep{ width:11px; }


  .mzwrap{ max-width:none; }
  .mz__near-label text{ font-size:10px; stroke-width:3px; }
  .mz__near-label .mz__near-sub{ font-size:7px; stroke-width:2.4px; }
  .mz__prov-name{ font-size:12px; }
  .mz-inset{ width:56px; padding:4px; }

  .galeria__intro{ font-size:.9375rem; }
}

@media (prefers-reduced-motion: reduce){
  .js .phero__bg{ animation:none; }
}

/* ---------------------------------------------------------------
   Produtos: the three crops in full
   One block per crop, media and text swapping sides. The homepage
   carousel is the index into these, which is why each card there
   says "Ver produto".
   --------------------------------------------------------------- */
.crop{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,72px); align-items:center;
}
.crop + .crop{ margin-top:clamp(56px,7vw,104px); padding-top:clamp(56px,7vw,104px); border-top:1px solid var(--line); }
/* order alone flips which side the photo is on but leaves the columns where
   they were, so the flipped block would give the photo the wide column and
   squeeze the text. The template has to swap with it. */
.crop:nth-child(even){ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.crop:nth-child(even) .crop__media{ order:2; }
.crop__media{ margin:0; border-radius:var(--radius); overflow:hidden; background:var(--surface-alt); aspect-ratio:4/5; }
.crop__media img{ width:100%; height:100%; object-fit:cover; }
.crop__text .h3{ margin-top:0; }
.crop__text .btn{ margin-top:.4rem; }

.crop__points{ margin:0 0 1.8rem; border-top:1px solid var(--line); }
.crop__point{
  display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:6px clamp(14px,2vw,28px); align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.crop__point strong{
  font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.crop__point span{ font-size:1rem; color:var(--ink); }

/* ---------------------------------------------------------------
   Os produtos de perto: what the buyer actually receives
   --------------------------------------------------------------- */
.deperto{ background:var(--surface-alt); }
.deperto__intro{ margin:0; max-width:52ch; color:var(--muted); }
.deperto__note{
  margin:clamp(32px,4vw,52px) 0 0; max-width:58ch;
  font-size:.9688rem; color:var(--muted);
}
.perto{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,26px); margin-top:clamp(32px,4vw,52px);
}
.perto__card{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.perto__card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -26px rgba(6,50,20,.4); }
.perto__shot{ margin:0; aspect-ratio:16/11; overflow:hidden; background:var(--surface-alt); }
.perto__shot img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.perto__card:hover .perto__shot img{ transform:scale(1.05); }
.perto__body{ padding:clamp(20px,2.2vw,28px); display:flex; flex-direction:column; flex:1; }
.perto__body h3{
  margin:0 0 .35em; font-size:clamp(1.15rem,1.7vw,1.4rem); font-weight:500; color:var(--ink);
  letter-spacing:-.016em; font-variation-settings:'wdth' 108;
}
.perto__note{ margin:0 0 1.2rem; font-size:.9375rem; color:var(--muted); }

.spec{ margin:auto 0 0; border-top:1px solid var(--line); }
.spec__row{ padding:13px 0; border-bottom:1px solid var(--line); }
.spec__row:last-child{ border-bottom:0; padding-bottom:0; }
.spec dt{
  font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.spec dd{ margin:5px 0 0; font-size:.9375rem; color:var(--ink); }

/* ---------------------------------------------------------------
   Sustentabilidade: pillars with their sub-points
   The homepage runs .pills as four one-line teasers. Here each one
   opens into its sub-points, so the list runs full width instead of
   sitting in the text column beside the photograph.
   --------------------------------------------------------------- */
.pills--full{ margin-top:clamp(44px,5.5vw,76px); }
.pill--full .pill__body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px clamp(24px,4vw,64px); }
.pill--full .pill__body h3{ grid-column:1; }
.pill--full .pill__body p{ grid-column:1; max-width:44ch; }
.pill__sub{ grid-column:2; grid-row:1 / span 2; display:grid; gap:2px; align-content:start; }
.pill__sub li{
  position:relative; padding:9px 0 9px 26px;
  font-size:.9375rem; line-height:1.5; color:var(--body);
}
.pill__sub li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:11px; height:1.5px; background:var(--gold-md);
}

/* ---------------------------------------------------------------
   Rotação de culturas
   --------------------------------------------------------------- */
.rot__band{
  margin:clamp(32px,4vw,54px) 0 0; aspect-ratio:24/9; overflow:hidden; background:var(--tint-soft);
}
.rot__band img{ width:100%; height:100%; object-fit:cover; }
.rot__steps{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:clamp(34px,4vw,56px); border-top:1px solid rgba(21,78,37,.22);
}
.rot__step{
  position:relative; padding:28px 26px 8px 0;
  border-right:1px solid rgba(21,78,37,.22);
}
.rot__step + .rot__step{ padding-left:26px; }
.rot__step:last-child{ border-right:0; padding-right:0; }
.rot__step::before{
  content:""; position:absolute; left:0; top:-1px; width:0; height:2px; background:var(--gold);
  transition:width .5s var(--ease);
}
.rot__step.is-in::before{ width:100%; transition-delay:calc(.1s * var(--i,0) + .1s); }
.rot__num{
  display:block; font-size:.75rem; font-weight:700; letter-spacing:.16em; color:var(--gold-md);
  font-variant-numeric:tabular-nums;
}
.rot__step h3{
  margin:.7em 0 .35em; font-size:1.125rem; font-weight:600; color:var(--green-dark); letter-spacing:-.008em;
}
.rot__step p{ margin:0; font-size:.9375rem; line-height:1.55; color:var(--green-dark); opacity:.8; }
.rot__note{
  margin:clamp(28px,3.4vw,44px) 0 0; max-width:56ch;
  font-size:.9688rem; color:var(--green-dark); opacity:.75;
}

/* ---------------------------------------------------------------
   Compromissos
   --------------------------------------------------------------- */
.commits{ background:var(--surface-alt); }
.commit{ display:grid; margin-top:clamp(32px,4vw,52px); }
.commit__item{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,2.4vw,38px); align-items:baseline;
  padding:clamp(20px,2.2vw,28px) 0; border-top:1px solid var(--line);
  transition:padding-left .35s var(--ease);
}
.commit__item:last-child{ border-bottom:1px solid var(--line); }
.commit__item:hover{ padding-left:10px; }
.commit__num{
  font-size:.8125rem; font-weight:700; letter-spacing:.16em; color:var(--gold-md);
  font-variant-numeric:tabular-nums;
}
.commit__body h3{
  margin:0 0 .4em; font-size:clamp(1.05rem,1.5vw,1.25rem); font-weight:600; color:var(--ink);
  letter-spacing:-.01em;
}
.commit__body p{ margin:0; max-width:64ch; font-size:.9688rem; line-height:1.6; color:var(--muted); }

/* ---------------------------------------------------------------
   Mercado: four reasons instead of the homepage three
   --------------------------------------------------------------- */
.why--4{ grid-template-columns:repeat(4,1fr); }

/* ---------------------------------------------------------------
   Colheita e comercialização, the five steps
   --------------------------------------------------------------- */
.flow{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,5vw,80px); align-items:start;
}
.flow__media{ position:sticky; top:120px; padding-bottom:70px; }
.flow__steps{ display:grid; margin-top:clamp(24px,3vw,38px); }
.step{
  position:relative; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2vw,30px); align-items:baseline;
  padding:clamp(18px,2vw,24px) 0; border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step::before{
  content:""; position:absolute; left:0; top:-1px; width:0; height:2px; background:var(--gold);
  transition:width .6s var(--ease);
}
.step.is-in::before{ width:100%; transition-delay:calc(.1s * var(--i,0) + .1s); }
.step__num{
  font-size:.8125rem; font-weight:700; letter-spacing:.16em; color:var(--gold-md);
  font-variant-numeric:tabular-nums;
}
.step__body h3{
  margin:0 0 .35em; font-size:1.0625rem; font-weight:600; color:var(--ink); letter-spacing:-.008em;
}
.step__body p{ margin:0; max-width:56ch; font-size:.9375rem; line-height:1.6; color:var(--muted); }

/* ---------------------------------------------------------------
   Agroprocessamento
   --------------------------------------------------------------- */
.agro{ background:var(--tint); }
.agro__grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,72px); align-items:center;
}
.agro__media{ margin:0; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:var(--tint-soft); }
.agro__media img{ width:100%; height:100%; object-fit:cover; }
.agro .eyebrow{ color:var(--green-dark); }
.agro .eyebrow__idx{ color:var(--green); }
.agro__text .lead{ color:var(--green-dark); opacity:.9; }
.agro__text p{ color:var(--green-dark); }
.agro__text .btn{ margin-top:.6rem; }
.agro .badge{ background:var(--ink); color:#fff; }

/* ---------------------------------------------------------------
   Interior-page responsive
   --------------------------------------------------------------- */
@media (max-width:1279px){
  .why--4{ grid-template-columns:repeat(2,1fr); }
  .why--4 .why__item:nth-child(2n){ border-right:0; }
  .why--4 .why__item:nth-child(2n+1){ padding-left:0; }
  .why--4 .why__item:nth-child(n+3){ border-top:1px solid var(--line); }
}

@media (max-width:1023px){
  .crop,.agro__grid,.flow{ grid-template-columns:1fr; }
  .crop:nth-child(even) .crop__media{ order:0; }
  .crop__media{ aspect-ratio:16/10; }
  .flow__media{ position:relative; top:auto; padding-bottom:0; max-width:560px; }
  .flow__media .frame--inset{ right:0; }
  .perto{ grid-template-columns:1fr 1fr; }
  .perto__card:last-child{ grid-column:1 / -1; }
  .perto__card:last-child{ flex-direction:row; }
  .perto__card:last-child .perto__shot{ flex:0 0 42%; aspect-ratio:auto; }
  .perto__card:last-child .perto__body{ flex:1; }
  .pill--full .pill__body{ grid-template-columns:1fr; gap:14px; }
  .pill__sub{ grid-column:1; grid-row:auto; }
}

@media (max-width:767px){
  .crop + .crop{ margin-top:40px; padding-top:40px; }
  .crop__point{ grid-template-columns:1fr; gap:3px; padding:13px 0; }
  .crop__points{ margin-bottom:1.4rem; }
  .crop__text .btn{ width:100%; justify-content:space-between; padding:9px 10px 9px 22px; }

  .perto{ grid-template-columns:1fr; }
  .perto__card:last-child{ flex-direction:column; }
  .perto__card:last-child .perto__shot{ flex:none; aspect-ratio:16/11; }
  .perto__shot{ aspect-ratio:16/10; }

  .pill--full .pill{ grid-template-columns:1fr; }
  .pill__sub li{ font-size:.9063rem; padding:7px 0 7px 22px; }

  .rot__band{ aspect-ratio:16/9; }
  .rot__steps{ grid-template-columns:1fr; margin-top:1.8rem; }
  .rot__step,.rot__step + .rot__step{ padding:20px 0 6px; border-right:0; }
  .rot__step:nth-child(n+2){ border-top:1px solid rgba(21,78,37,.22); }

  .commit__item{ grid-template-columns:1fr; gap:8px; padding:20px 0; }
  .commit__item:hover{ padding-left:0; }

  .why--4{ grid-template-columns:1fr; }
  .why--4 .why__item,.why--4 .why__item + .why__item{ padding:20px 0; border-right:0; }
  .why--4 .why__item:nth-child(n+2){ border-top:1px solid var(--line); }

  .step{ grid-template-columns:1fr; gap:8px; padding:18px 0; }
  .agro__media{ aspect-ratio:16/10; }
  .agro__text .btn{ width:100%; justify-content:space-between; padding:9px 10px 9px 22px; }
}

/* geoBoundaries requires attribution for the map, per its CC BY 4.0 licence. */
@media (max-width:1023px){ .footer__legal{ flex-wrap:wrap; } }

/* A tinted band used as a section opener carries only its head, so it does
   not need the 56px that separates the head from a carousel below it. */
.band > .band__head:only-child{ margin-bottom:0; }
.band--intro{ padding-block:clamp(52px,6.5vw,88px); }

/* ---------------------------------------------------------------
   Contacto: the panel beside the form

   The page carries one section, and that section is two panels that
   stretch to a common height. The details take the deep green the
   header and the hero already stand on, so the pair reads as one
   object rather than two boxes on a page: dark ground, display serif,
   gold rule — the same grammar as the hero, borrowed for a card.

   Everything vertical inside is a flex column, which is what keeps
   the group line pinned to the bottom edge whatever the form's height.
   --------------------------------------------------------------- */
.contacto{ background:var(--surface-alt); }

.cpanel{
  position:relative; display:flex; overflow:hidden;
  border-radius:calc(var(--radius) + 6px);
  background:var(--o3-bg); color:var(--o3-text);
  font-family:var(--o3-body);
}
/* a field behind the type, graded down until it is texture rather than
   a photograph: the panel has to stay readable, not illustrate */
.cpanel__media{ position:absolute; inset:0; }
.cpanel__media img{ width:100%; height:100%; object-fit:cover; opacity:.28; }
.cpanel__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(165deg, rgba(16,35,22,.62) 0%, rgba(16,35,22,.88) 55%, rgba(16,35,22,.96) 100%);
}
.cpanel__body{
  position:relative; display:flex; flex-direction:column; width:100%;
  padding:clamp(28px,3.2vw,46px);
}
.cpanel .cpanel__eyebrow{
  justify-content:flex-start; margin:0 0 1.5rem; gap:16px;
  font-family:var(--o3-body); font-size:.8125rem; font-weight:400;
  letter-spacing:.16em; color:rgba(245,242,232,.88);
}
.cpanel__title{
  margin:0;
  font-family:var(--o3-display); font-weight:300;
  font-size:clamp(2rem,3.2vw,2.8rem); line-height:1.02; letter-spacing:-.02em;
  font-variation-settings:"SOFT" 20, "WONK" 0;
  color:var(--o3-cream);
}
.cpanel__lead{
  margin:1.1rem 0 0; max-width:34ch;
  font-size:1rem; line-height:1.6; color:var(--o3-text);
}

.cdetails{
  display:grid; margin:auto 0 0; padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--o3-border-soft);
}
.cdetail{
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start;
  gap:clamp(14px,1.6vw,18px);
  padding:clamp(18px,2vw,22px) 0; border-bottom:1px solid var(--o3-border-soft);
}
.cdetail__icon{
  display:grid; place-items:center; width:42px; height:42px; border-radius:999px;
  border:1px solid rgba(243,184,0,.28); background:rgba(243,184,0,.10); color:var(--gold-lt);
}
.cdetail__icon svg{ width:19px; height:19px; }
.cdetail__body{ min-width:0; }
.cdetail h3{
  margin:0 0 6px; font-size:.6875rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--o3-muted);
}
.cdetail__value{
  display:block; margin:0; font-size:1.0625rem; line-height:1.45;
  color:var(--o3-cream); overflow-wrap:anywhere;
}
a.cdetail__value{
  display:inline-block; max-width:100%;
  border-bottom:1px solid rgba(244,241,230,.28);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
a.cdetail__value:hover{ color:var(--gold-lt); border-bottom-color:var(--gold); }
.cdetail__note{ margin:10px 0 0; font-size:.875rem; line-height:1.5; color:var(--o3-muted); }
.cdetail__note a{
  color:var(--gold-lt); font-weight:500;
  border-bottom:1px solid rgba(243,184,0,.3); transition:border-color .3s var(--ease);
}
.cdetail__note a:hover{ border-bottom-color:var(--gold); }

/* margin-top:auto is the whole trick: the note sits on the bottom edge of
   the panel, level with the base of the form card beside it */
.cpanel__foot{
  margin:0; padding-top:clamp(20px,2.4vw,26px);
  font-size:.8125rem; letter-spacing:.02em; color:var(--o3-muted);
}

/* ---------------------------------------------------------------
   Contacto: the form
   --------------------------------------------------------------- */
/* stretch, not start: the two panels are a pair, and a pair that ends at
   two different heights is what made the first pass look unresolved */
.contacto__grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(24px,2.6vw,40px); align-items:stretch;
}
.form{
  display:flex; flex-direction:column;
  padding:clamp(28px,3.2vw,46px);
  background:var(--surface); border:1px solid var(--line);
  border-radius:calc(var(--radius) + 6px);
  box-shadow:0 30px 60px -46px rgba(6,50,20,.45);
}
.form__head{
  margin-bottom:clamp(24px,2.8vw,32px);
  padding-bottom:clamp(20px,2.2vw,26px);
  border-bottom:1px solid var(--line);
}
.form__title{
  margin:0; font-size:clamp(1.25rem,1.7vw,1.5rem); font-weight:600;
  letter-spacing:-.012em; color:var(--ink); font-variation-settings:'wdth' 108;
}
.form__intro{ margin:.55rem 0 0; max-width:44ch; font-size:.9375rem; line-height:1.6; color:var(--muted); }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,22px); }
.form__field{ display:grid; gap:7px; margin:0; }
.form__field--wide{ grid-column:1 / -1; }
.form__field label{
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:baseline; gap:7px;
}
.form__req{ color:var(--gold-md); font-size:.875rem; line-height:1; }
.form__opt{ font-size:.6875rem; font-weight:500; letter-spacing:.06em; text-transform:none; opacity:.7; }
.form__field input,
.form__field textarea,
.form__field select{
  width:100%; padding:12px 14px;
  font:inherit; font-size:1rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.form__field textarea{ resize:vertical; min-height:120px; line-height:1.55; }
.form__field input::placeholder{ color:var(--muted); opacity:.75; }
.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus{
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px rgba(37,104,51,.12);
}
/* the browser paints its own arrow inconsistently, so the select loses it
   and gets the same caret as the header dropdown instead */
.form__select{ position:relative; display:block; }
.form__select select{ appearance:none; padding-right:44px; cursor:pointer; }
.form__select svg{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--muted); pointer-events:none;
}
.form__field input[aria-invalid="true"],
.form__field textarea[aria-invalid="true"]{ border-color:#b4462f; box-shadow:0 0 0 3px rgba(180,70,47,.1); }

.form__foot{
  display:flex; align-items:center; flex-wrap:wrap; gap:clamp(16px,2.4vw,32px);
  margin-top:clamp(24px,2.8vw,32px);
}
.form__legal{ margin:0; flex:1 1 220px; max-width:36ch; font-size:.8125rem; line-height:1.5; color:var(--muted); }
.form__msg{
  margin:16px 0 0; min-height:1.3em;
  font-size:.9375rem; font-weight:500; color:var(--green);
}
.form__msg[data-state="error"]{ color:#b4462f; }

/* honeypot: off-screen, never focusable, never seen */
.form__trap{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none;
}

/* the submit button while the message is in flight */
.form.is-sending{ opacity:.75; }
.form.is-sending button[type="submit"]{ pointer-events:none; }

@media (max-width:1023px){
  .contacto__grid{ grid-template-columns:1fr; }
}

@media (max-width:767px){
  .form{ padding:20px; }
  .form__grid{ grid-template-columns:1fr; }
  .form__foot{ flex-direction:column; align-items:stretch; gap:14px; }
  .form__foot .btn{ width:100%; justify-content:space-between; padding:9px 10px 9px 22px; }
  /* the foot stacks here, so flex-basis would read as a height: 220px of
     empty card under the button. Back to natural height. */
  .form__legal{ flex:0 0 auto; max-width:none; }
  /* the icon stays beside the text on a phone: at 38px it costs less
     width than the indent that stacking it would leave behind */
  .cdetail{ gap:14px; }
  .cdetail__icon{ width:38px; height:38px; }
  .cdetail__icon svg{ width:17px; height:17px; }
}

/* Contacto is the pill, not a nav link, so it needs its own current state:
   the same fill it takes on hover, held. */
.header__cta[aria-current="page"]{
  background:var(--gold); border-color:var(--gold); color:var(--ink);
}
.header__cta[aria-current="page"] .btn__arrow{ background:rgba(6,50,20,.14); }
.header.is-solid .header__cta[aria-current="page"]{
  background:var(--green); border-color:var(--green); color:#fff;
}
.header.is-solid .header__cta[aria-current="page"] .btn__arrow{ background:rgba(255,255,255,.18); }

/* =============================================================
   A EXPLORAÇÃO
   Deliberately not built from the homepage's components: the
   story runs as an article with a sticky data rail, the map gets
   a stage of its own, the gallery is a full-bleed contact sheet
   and the figures sit on dark. Nothing here is shared with
   index.html.
   ============================================================= */

/* --- the story: sticky data rail beside two columns of prose --- */
.story-sec{ background:var(--surface); }
.story{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(32px,5vw,88px); align-items:start;
}
.story__rail{ position:sticky; top:120px; }
.rail__title{
  margin:0 0 4px; font-size:.6875rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-md);
}
.rail{ margin:0; border-top:1px solid var(--line); }
.rail__row{ padding:14px 0; border-bottom:1px solid var(--line); }
.rail__row dt{
  font-size:.6875rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.rail__row dd{
  margin:5px 0 0; font-size:.9688rem; font-weight:500; line-height:1.4; color:var(--ink);
}

.story__lede{
  margin:.2em 0 1.6em; max-width:44ch;
  font-size:clamp(1.2rem,1.9vw,1.55rem); line-height:1.42; font-weight:500;
  letter-spacing:-.014em; font-variation-settings:'wdth' 106; color:var(--ink);
}
/* Two columns of body text. Paragraphs are allowed to break across the
   column boundary: keeping them whole (break-inside:avoid) left one column
   a hundred pixels short of the other, because the paragraphs are not the
   same length. orphans/widows stop a single line stranding on its own. */
.prose{ columns:2; column-gap:clamp(28px,4vw,64px); }
.prose p{ margin:0 0 1.1em; orphans:3; widows:3; }
.prose p:last-child{ margin-bottom:0; }

.pull{
  margin:clamp(30px,3.6vw,48px) 0; padding:0 0 0 clamp(20px,2.4vw,34px);
  border-left:2px solid var(--gold);
}
.pull p{
  margin:0; max-width:34ch;
  font-size:clamp(1.25rem,2.2vw,1.75rem); line-height:1.28; font-weight:500;
  letter-spacing:-.02em; font-variation-settings:'wdth' 110; color:var(--green);
  text-wrap:balance;
}

.story__shots{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,34px); align-items:end;
  margin-top:clamp(44px,5.5vw,80px);
}
.shot{ margin:0; }
.shot img{
  width:100%; height:100%; object-fit:cover;
  border-radius:var(--radius); background:var(--surface-alt);
}
.shot--tall{ aspect-ratio:4/5; }
.shot--wide{ aspect-ratio:4/3; }
.shot figcaption{
  margin-top:12px; font-size:.8125rem; letter-spacing:.02em; color:var(--muted);
}

/* --- localização: the map on a stage, facts in a band under it --- */
.locsec{ background:var(--surface-alt); }
.locsec__head{ max-width:62ch; margin-inline:auto; text-align:center; }
.locsec__lead{
  margin:0; font-size:clamp(1.0313rem,1.3vw,1.15rem); line-height:1.55; color:var(--ink); opacity:.82;
}
.mapstage{
  margin:clamp(34px,4.5vw,60px) 0 0;
  display:grid; justify-items:center; gap:26px;
}
.mapstage .mzwrap{ max-width:600px; }

/* --- scroll-driven zoom into Niassa ---
   initMapZoom() interpolates the SVG viewBox from a whole-country framing
   down to the Niassa crop as the figure travels up the viewport, and writes
   the eased progress back as --mz-detail. Both boxes share the same 240:250
   aspect ratio, so the element's intrinsic height never changes and nothing
   below it moves while the zoom runs. Labels, the pin and the locator inset
   only earn their opacity once the zoom has nearly settled — at the wide end
   they would be unreadable specks. */
.mapstage .mz--near{
  --mz-detail:1;
  will-change:transform;
}
.mz--near .mz__pin,
.mz--near .mz__near-label,
.mz--near .mz__sec-dot,
.mz--near .mz__prov-name{
  opacity:var(--mz-detail);
}
.mapstage .mz-inset{
  opacity:var(--mz-detail);
  transform:scale(calc(.9 + .1 * var(--mz-detail)));
  transform-origin:100% 100%;
}
/* the active province lifts out of the grey as the view closes in */
.mapstage .mz__prov--active{
  filter:drop-shadow(0 0 calc(6px * var(--mz-detail)) rgba(6,50,20,.28));
}

.locstrip{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin:clamp(38px,4.5vw,62px) 0 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.locstrip__cell{
  padding:22px clamp(12px,1.6vw,22px) 24px;
  border-right:1px solid var(--line);
}
.locstrip__cell:first-child{ padding-left:0; }
.locstrip__cell:last-child{ border-right:0; padding-right:0; }
.locstrip__cell dt{
  font-size:.6875rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.locstrip__cell dd{
  margin:7px 0 0; font-size:1.0313rem; font-weight:500; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.locsec__note{
  margin:clamp(24px,3vw,36px) auto 0; max-width:52ch;
  text-align:center; font-size:.9688rem; color:var(--muted);
}

/* --- na exploração: composed wall ---
   Placement comes off --c/--w/--r/--h on each tile, so the wall is
   rearranged by editing those numbers in the markup and nothing else. */
.galeria-sec{ background:var(--surface); padding-block:var(--section-y); }
/* the head is a full-width .container so its left edge lines up with the
   wall below it; only the running text is measure-limited. Capping the
   container itself made it a centred 64ch block sitting off-axis from
   the grid, which is what read as the section being unaligned. */
.galeria-sec .galeria__head{
  display:block; margin-bottom:clamp(28px,3.5vw,46px);
}
.galeria-sec .galeria__intro{ max-width:64ch; }
.galeria-sec .galeria__head .h2{ margin-bottom:.5em; }
.mosaic{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(132px,13.5vw,192px);
  gap:clamp(8px,1vw,14px); width:100%;
}
.mosaic__item{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--radius); background:var(--surface-alt);
  isolation:isolate;
  grid-column:var(--c) / span var(--w);
  grid-row:var(--r) / span var(--h,1);
}
.mosaic__item img,
.mosaic__item video{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
/* the same hairline the framed photography carries, so the wall belongs
   to the same family as .shell elsewhere on the page */
.mosaic__item::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(6,50,20,.10);
  transition:box-shadow .4s var(--ease);
}
.mosaic__item img{ cursor:zoom-in; }
.mosaic__item:hover img{ transform:scale(1.05); }
.mosaic__item:hover::after{ box-shadow:inset 0 0 0 1px rgba(6,50,20,.10), inset 0 -70px 60px -50px rgba(6,50,20,.45); }
.mosaic__item--video{ background:var(--ink); }

/* --- em números: on dark --- */
.h2--onDark{ color:#fff; }
.figures{ background:var(--ink); color:rgba(255,255,255,.7); padding-block:var(--section-y); }
.figures__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:clamp(36px,4.5vw,58px);
  border-top:1px solid rgba(255,255,255,.16);
}
.fig{
  position:relative; padding:clamp(26px,3vw,38px) clamp(16px,2vw,30px) clamp(26px,3vw,36px) 0;
  border-right:1px solid rgba(255,255,255,.16);
}
.fig + .fig{ padding-left:clamp(16px,2vw,30px); }
.fig:last-child{ border-right:0; padding-right:0; }
.fig::before{
  content:""; position:absolute; left:0; top:-1px; width:0; height:2px; background:var(--gold);
  transition:width .6s var(--ease);
}
.fig.is-in::before{ width:100%; transition-delay:calc(.1s * var(--i,0) + .1s); }
.fig__value{
  display:block; font-size:clamp(2.4rem,4.4vw,3.5rem); line-height:1;
  font-weight:500; letter-spacing:-.035em; color:#fff;
  font-variant-numeric:tabular-nums; font-variation-settings:'wdth' 108;
}
.fig__pre{ color:var(--gold); }
.fig__unit{
  display:block; margin-top:12px;
  font-size:.8125rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-lt);
}
.fig__label{
  display:block; margin-top:10px; max-width:24ch;
  font-size:.9063rem; line-height:1.5; color:rgba(255,255,255,.62);
}
.figures__note{
  margin:clamp(34px,4vw,52px) auto 0; max-width:66ch;
  text-align:center; font-size:.9688rem; line-height:1.7; color:rgba(255,255,255,.62);
}

/* --- responsive --- */
@media (max-width:1199px){
  .story{ grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:clamp(28px,3.5vw,52px); }
}

@media (max-width:1023px){
  /* the rail stops being a rail and becomes a two-up fact block above the story */
  .story{ grid-template-columns:1fr; gap:clamp(28px,4vw,40px); }
  .story__rail{ position:relative; top:auto; order:2; }
  .story__body{ order:1; }
  .rail{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(20px,4vw,48px); }
  .rail__row:nth-child(2){ border-top:1px solid var(--line); }
  .prose{ columns:1; }
  .story__shots{ grid-template-columns:1fr 1fr; align-items:start; }
  .shot--tall,.shot--wide{ aspect-ratio:1/1; }

  .mapstage .mzwrap{ max-width:520px; }
  .locstrip{ grid-template-columns:repeat(2,1fr); }
  .locstrip__cell:nth-child(2n){ border-right:0; padding-right:0; }
  .locstrip__cell:nth-child(2n+1){ padding-left:0; }
  .locstrip__cell:nth-child(n+3){ border-top:1px solid var(--line); }

  /* six columns, every tile two wide, reels two tall: the wall keeps its
     rhythm without needing per-tile placement */
  /* below the wide grid the placement is dropped entirely: two equal
     columns in document order, reels included. Every tile takes the same
     box — giving the reels a taller one left ragged gaps beside them —
     and an odd tile left over at the end runs the full width rather than
     sitting next to a hole. */
  .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .mosaic__item{ grid-column:auto; grid-row:auto; aspect-ratio:1/1; }
  .mosaic__item:last-child:nth-child(odd){ grid-column:1 / -1; aspect-ratio:2/1; }

  .figures__grid{ grid-template-columns:1fr 1fr; }
  .fig:nth-child(2n){ border-right:0; padding-right:0; }
  .fig:nth-child(2n+1){ padding-left:0; }
  .fig:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.16); }
}

@media (max-width:767px){
  .story__lede{ font-size:1.125rem; max-width:none; }
  .rail{ grid-template-columns:1fr; }
  .rail__row:nth-child(2){ border-top:0; }
  .pull{ margin:26px 0; padding-left:18px; }
  .pull p{ font-size:1.1875rem; max-width:none; }
  .story__shots{ grid-template-columns:1fr; gap:18px; margin-top:32px; }
  .shot--tall,.shot--wide{ aspect-ratio:4/3; }

  .locsec__head{ text-align:left; }
  .locsec__head .eyebrow--center{ justify-content:flex-start; }
  .locsec__head .h2--center{ text-align:left; }
  .locstrip{ grid-template-columns:1fr 1fr; }
  .locstrip__cell{ padding:16px 12px 18px 0; }
  .locstrip__cell:nth-child(2n){ border-right:0; padding-right:0; }
  .locstrip__cell:nth-child(2n+1){ padding-left:0; }
  .locstrip__cell:nth-child(n+3){ border-top:1px solid var(--line); }
  .locsec__note{ text-align:left; margin-left:0; }

  .mosaic{ gap:8px; }
  .mosaic__item{ aspect-ratio:4/5; }
  .mosaic__item:last-child:nth-child(odd){ aspect-ratio:16/9; }

  .figures__grid{ grid-template-columns:1fr 1fr; }
  .fig{ padding:20px 10px 22px 0; }
  .fig__value{ font-size:2.1rem; }
  .fig__unit{ font-size:.6875rem; letter-spacing:.1em; }
  .fig__label{ font-size:.8125rem; max-width:none; }
  .figures__note{ text-align:left; font-size:.9375rem; }
}

/* ===============================================================
   HOMEPAGE, MULTIPAGE CONVERSION
   index.html is now a set of teasers, so every section needs a way
   out of it. `.tolink` is that link: the gold arrow motif again,
   on a rule, so it reads as "continues elsewhere" rather than as
   another button competing with the section's own CTA.
   =============================================================== */
.tolink{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:clamp(26px,3vw,38px); padding-bottom:6px;
  font-size:.8125rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--green); border-bottom:1px solid var(--line);
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.tolink:hover{ color:var(--green-dark); border-color:var(--gold); }
.tolink .inline-arrow{ color:var(--gold-md); }
.tolink--tight{ margin-top:14px; }               /* inside a .why__item, not after a section */
.tolink--flush{ margin-top:0; }                  /* riding in the carousel control bar */
.tolink--onTint{ color:var(--green-dark); border-color:rgba(21,78,37,.25); }
.tolink--onTint:hover{ border-color:var(--green-dark); }

/* The two market blocks moved out of the products carousel. Same rule
   treatment as `.why`, minus the numbering: they are two destinations,
   not a ranked list. */
.why--2{ grid-template-columns:repeat(2,1fr); }
.why--2 .why__item{ padding-top:32px; }
.why--2 .why__item h3{ margin-top:0; }
.why--2 .why__item p{ max-width:46ch; }

/* Na exploração and Em números now carry a link beside their head */
.galeria__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.galeria__head .tolink{ margin-top:0; }
.numeros__more{ margin-top:clamp(26px,3vw,36px); text-align:center; }
.numeros__more .tolink{ margin-top:0; }

/* The last card in the carousel is the way through to produtos.html rather
   than a fourth crop: no photograph, so it needs its own fill, its copy
   open by default, and none of the hover reveal the crop cards run. */
.ccard--more{ background:var(--green-dark); }
.ccard--more .ccard__link{ display:grid; align-items:end; }
.ccard--more .ccard__link::after{
  background:radial-gradient(120% 90% at 50% 0%, rgba(50,128,66,.55) 0%, rgba(21,78,37,0) 62%);
}
.ccard--more .ccard__body{ position:relative; inset:auto; }
.ccard--more .ccard__idx{ color:var(--tint); text-transform:uppercase; }
.ccard--more .ccard__text{ max-height:none; opacity:.82; margin-top:.6em; overflow:visible; }
.ccard--more .ccard__more{ opacity:1; transform:none; }
.ccard--more:hover{ background:var(--green); }
/* Dropping cards 04 and 05 took most of the sideways travel out of the pinned
   run. The end-cap is a wide panel rather than a fourth portrait, which reads
   as the end of the row and puts that travel back. Only from 1024px up: that
   is where the pin runs, and below it the row is a phone-width snap carousel. */
@media (min-width:1024px){
  .ccard--more{ aspect-ratio:8/5; width:clamp(400px,40vw,528px); }
  .produz__stack.is-pinned .ccard--more{ width:auto; }
}

/* Should the row ever fit outright, `initProduz` reports it by leaving the
   arrows disabled. Hide the control bar rather than show a dead progress rail. */
.produz__stack.is-static .carousel__ctrl{ display:none; }

@media (max-width:767px){
  .why--2{ grid-template-columns:1fr; }
  .why--2 .why__item,.why--2 .why__item + .why__item{ padding:22px 0; border-right:0; }
  .why--2 .why__item:nth-child(n+2){ border-top:1px solid var(--line); }
  .galeria__head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .numeros__more{ text-align:left; }
  .tolink{ font-size:.75rem; letter-spacing:.11em; }
}

/* ===============================================================
   HERO, OPTION 3 COMPOSITION
   Ported from deploy/prototype/option-3: centred head, the actions
   under it, and the three facts spread across a full-width rule at
   the foot with the scroll cue closing the row. The prototype set
   its headline in Fraunces; this keeps the site's Archivo, so the
   character has to come from the layout and the scrim instead.
   =============================================================== */
.hero--centred{ flex-direction:column; justify-content:flex-end; }
.hero--centred .hero__media{ filter:saturate(.82) contrast(1.02) brightness(.9); }
/* radial first, so the middle of the frame stays open and the corners
   carry the weight: that is what holds centred type over moving video */
.hero--centred .hero__scrim{
  background:
    radial-gradient(120% 90% at 50% 24%, rgba(6,50,20,.14), rgba(6,50,20,.62) 68%, rgba(6,50,20,.9)),
    linear-gradient(180deg, rgba(6,50,20,.62), rgba(6,50,20,.12) 32%, rgba(6,50,20,.86));
}
.hero--centred .hero__inner{
  flex:1; width:100%; align-items:center; justify-content:center;
  padding:clamp(130px,15vh,168px) var(--gutter) clamp(40px,6vh,72px);
}
.hero--centred .hero__content{
  max-width:min(1080px,100%); text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero--centred .hero__title{
  margin-bottom:.34em;
  font-size:clamp(2.4rem,6.8vw,6rem); line-height:1.02; letter-spacing:-.032em;
}
.hero--centred .hero__lead{ max-width:62ch; margin:0 auto; }
.hero--centred .hero__actions{ justify-content:center; gap:16px; margin-top:2.2rem; }

/* the eyebrow takes a gold rule in front of it instead of the section index */
.eyebrow--rule{ justify-content:center; margin-bottom:1.6rem; }
.eyebrow--rule::before{
  content:""; flex:none; width:34px; height:1px; background:var(--gold);
}

/* the foot bar: facts and the scroll cue on one rule, divided */
/* the rule runs nearly edge to edge, as in the prototype: the container
   plus a gutter either side, so the bar reads as the base of the frame
   rather than as another column of the page grid */
.hero--centred .hero__bar{
  position:relative; width:100%; align-items:stretch; padding-bottom:0;
  max-width:calc(var(--container) + var(--gutter) * 2);
  border-top:1px solid rgba(255,255,255,.2);
}
.hero--centred .hero__facts{
  flex:1; flex-wrap:nowrap; margin-top:0; border-top:0;
}
.hero--centred .hero__facts li{
  flex:1; padding:24px 26px 26px; margin-right:0;
  border-right:0; border-left:1px solid rgba(255,255,255,.16);
}
.hero--centred .hero__facts span{ text-wrap:balance; }
.hero--centred .hero__facts li:first-child{ border-left:0; padding-left:0; }
.hero--centred .hero__scroll{
  align-self:stretch; padding:24px 0 26px 30px;
  border-left:1px solid rgba(255,255,255,.16);
}

/* video play/pause, top right, clear of the header */
.vctrl{
  position:absolute; top:clamp(96px,12vh,124px); right:var(--gutter); z-index:3;
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:999px; cursor:pointer;
  background:rgba(6,50,20,.4); border:1px solid rgba(255,255,255,.3); color:#fff;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.vctrl:hover{ background:rgba(6,50,20,.62); border-color:var(--gold); }
.vctrl svg{ width:15px; height:15px; fill:currentColor; }
.vctrl__pause{ display:none; }
.vctrl[aria-pressed="true"] .vctrl__play{ display:none; }
.vctrl[aria-pressed="true"] .vctrl__pause{ display:block; }
.vctrl[hidden]{ display:none; }

@media (max-width:1023px){
  .hero--centred .hero__inner{ padding-top:clamp(104px,14vh,132px); }
  .vctrl{ top:88px; width:42px; height:42px; }
}
@media (max-width:767px){
  /* on a phone, centring in the leftover space opened a dead gap above the
     bar: let the block sit down against it instead */
  .hero--centred .hero__inner{ flex:0 0 auto; margin-top:auto; padding:96px var(--gutter) 30px; }
  .hero--centred .hero__title{ font-size:2.15rem; letter-spacing:-.026em; }
  .hero--centred .hero__actions{ flex-direction:column; align-self:stretch; gap:10px; }
  .hero--centred .hero__actions .btn{ width:100%; }
  .eyebrow--rule{ margin-bottom:1rem; }
  .eyebrow--rule::before{ width:22px; }
  /* the bar stacks: three facts across, the cue on its own rule under them */
  .hero--centred .hero__bar{ flex-direction:column; padding-bottom:18px; }
  .hero--centred .hero__facts{ display:flex; gap:0; }
  .hero--centred .hero__facts li{ padding:14px 8px 14px 12px; }
  .hero--centred .hero__scroll{
    align-self:flex-start; padding:12px 0 0;
    border-left:0; border-top:1px solid rgba(255,255,255,.16); width:100%;
  }
}


/* ==================================================================================
   ██ INTERIOR PAGES, SECOND PASS ██
   Everything below is the interior-page rework: shared furniture (progress line,
   in-page nav, page-to-page footer), new section archetypes so the five pages stop
   reading as the same stack of numbered lists, a richer effects layer, and a
   small-phone tier under the 767px one that already existed.
   Nothing here is used by index.html, so the homepage is untouched.
   ================================================================================== */

:root{
  --headerH: 84px;
  --line-ink: rgba(255,255,255,.14);
}
@media (max-width:1199px){ :root{ --headerH:76px; } }
@media (max-width:767px){  :root{ --headerH:62px; } }
@media (max-width:374px){  :root{ --headerH:56px; } }

/* The base rule covers section/aside/main. The three crop blocks on
   produtos.html are <article id>, so they need the same treatment or the
   fixed header cuts their headings when linked to. */
article[id],div[id]{ scroll-margin-top:96px; }
@media (max-width:767px){ article[id],div[id]{ scroll-margin-top:70px; } }

/* ---------------------------------------------------------------
   Marquee divider
   A slow band of the three crop names, used where the page needs a
   beat between two heavy sections instead of another photograph.
   --------------------------------------------------------------- */
.marquee{
  --speed: 44s;
  position:relative; overflow:hidden;
  padding-block:clamp(18px,2.2vw,26px);
  background:var(--ink); color:#fff;
  border-block:1px solid var(--line-ink);
}
.marquee--tint{ background:var(--surface-alt); color:var(--ink); border-color:var(--line); }
.marquee__track{
  display:flex; width:max-content; gap:0;
  animation:marquee var(--speed) linear infinite;
}
.marquee__group{ display:flex; align-items:center; gap:clamp(24px,3vw,44px); padding-right:clamp(24px,3vw,44px); }
.marquee__group > span{
  display:inline-flex; align-items:center; gap:clamp(24px,3vw,44px);
  font-size:clamp(1.15rem,2.4vw,1.9rem); font-weight:500; letter-spacing:-.015em;
  font-variation-settings:'wdth' 112; white-space:nowrap;
}
.marquee__group > span::after{
  content:""; width:7px; height:7px; border-radius:999px; background:var(--gold); flex:none;
}
.marquee__group .is-dim{ opacity:.42; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------
   KPI strip
   Four short facts on one rule. Lighter than the .figures band and
   usable straight under a hero.
   --------------------------------------------------------------- */
.kpi{ padding-block:clamp(30px,3.6vw,46px); background:var(--surface); border-bottom:1px solid var(--line); }
.kpi--tint{ background:var(--surface-alt); }
/* auto-fit rather than a fixed four, so a strip of three cells (produtos,
   since the sequeiro cell came out) splits into equal thirds and a strip
   of four (mercado) still splits into quarters, with no count in the CSS */
.kpi__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr)); gap:0; }
.kpi__cell{ padding-inline:clamp(16px,2vw,30px); border-left:1px solid var(--line); }
.kpi__cell:first-child{ padding-left:0; border-left:0; }
.kpi__value{
  display:block; font-size:clamp(1.6rem,3.2vw,2.5rem); line-height:1;
  font-weight:500; letter-spacing:-.03em; font-variation-settings:'wdth' 108;
  color:var(--ink);
}
.kpi__value .kpi__pre{ color:var(--gold-md); }
.kpi__value--word{ font-size:clamp(1.3rem,2.1vw,1.75rem); letter-spacing:-.02em; }
.kpi__unit{ display:block; margin-top:.45em; font-size:.8125rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--green-2); }
.kpi__note{ display:block; margin-top:.5em; font-size:.875rem; line-height:1.45; color:var(--body); }

/* ---------------------------------------------------------------
   Split section
   The generic photo-and-prose block, with the media column sticky
   on wide screens so the picture holds while the text runs.
   --------------------------------------------------------------- */
.split__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px); align-items:start;
}
.split__grid--narrow{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); }
.split__media{ position:sticky; top:calc(var(--headerH) + 28px); }
.split__grid--flip .split__media{ order:2; }
.split__stack{ display:grid; gap:clamp(10px,1.2vw,16px); }
.split__stack--offset{ grid-template-columns:1fr 1fr; }
.split__stack--offset > :first-child{ grid-column:1 / -1; }
.split__text > .btn{ margin-top:.4rem; }

/* ---------------------------------------------------------------
   Framed photography, second pass
   .shell adds the hairline + the corner tick that the plain .frame
   does not have, and carries the hover push on the image.
   --------------------------------------------------------------- */
.shell{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--radius); background:var(--surface-alt);
  isolation:isolate;
}
.shell img,.shell video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease); }
.shell:hover img{ transform:scale(1.045); }
.shell--tall{ aspect-ratio:3/4; }
.shell--portrait{ aspect-ratio:4/5; }
.shell--square{ aspect-ratio:1/1; }
.shell--wide{ aspect-ratio:16/10; }
.shell--band{ aspect-ratio:21/9; }
.shell::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(6,50,20,.10);
  border-radius:inherit;
}
.shell__cap{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  padding:clamp(30px,4vw,44px) clamp(14px,1.8vw,22px) clamp(12px,1.5vw,18px);
  font-size:.8125rem; line-height:1.4; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(6,50,20,.82));
}
.shell__tag{
  position:absolute; z-index:3; top:12px; left:12px;
  padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,.92); color:var(--ink);
  font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.shell__tag--gold{ background:var(--gold); }

/* ---------------------------------------------------------------
   Crop blocks, second pass
   Each of the three cultures gets a two-picture media column, a
   tinted spec table and a campaign chip line, so the three blocks
   no longer read as one row repeated.
   --------------------------------------------------------------- */
.cropx{ padding-block:clamp(56px,7vw,104px); position:relative; overflow:hidden; }
.cropx + .cropx{ border-top:1px solid var(--line); }
.cropx--tint{ background:var(--surface-alt); }
.cropx__grid{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  gap:clamp(30px,5vw,76px); align-items:start;
}
.cropx--flip .cropx__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.95fr); }
.cropx--flip .cropx__media{ order:2; }
.cropx__media{
  position:sticky; top:calc(var(--headerH) + 28px);
  /* just enough clearance to seat the inset; it no longer hangs below */
  padding-bottom:clamp(18px,2vw,28px);
}
.cropx__media > .shell--tall{ width:min(100%,none); }
/* Seated over the photograph's bottom corner, not hung off the bottom of
   the column. It used to sit at bottom:0 of .cropx__media, which is only
   the padding-bottom below the image: most of a 120-210px square landed
   in the white gap, and .cropx{overflow:hidden} sliced off whatever
   crossed the section edge, so the inset read as a cropped picture. */
.cropx__inset{
  position:absolute; z-index:2; right:clamp(-22px,-2vw,-14px);
  bottom:clamp(30px,3.4vw,48px);
  width:clamp(120px,30%,210px);
  box-shadow:0 22px 44px -26px rgba(6,50,20,.55);
  outline:6px solid var(--surface); outline-offset:-1px;
}
.cropx--tint .cropx__inset{ outline-color:var(--surface-alt); }
.cropx--flip .cropx__inset{ right:auto; left:clamp(-22px,-2vw,-14px); }
.cropx__ghost{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  top:clamp(30px,4vw,54px); font-size:clamp(6rem,15vw,15rem); line-height:.8;
  font-weight:700; letter-spacing:-.06em; color:var(--ink); opacity:.045;
}
.cropx__grid > *{ position:relative; z-index:1; }
.cropx__ghost--right{ right:var(--gutter); }
.cropx__ghost--left{ left:var(--gutter); }
.cropx__text{ padding-top:clamp(0px,1vw,10px); }


/* the closing three-up, on its own tinted band so it reads as a beat
   rather than a fourth crop block. Equal columns and one shared 16/10
   frame: the three sources are two portraits and a square, so without a
   frame of their own the row came out ragged. */
.cropband{ background:var(--surface-alt); border-top:1px solid var(--line); }
.cropband__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,22px);
}
@media (max-width:767px){
  .cropband__grid{ grid-template-columns:1fr; gap:14px; }
}

.cropx__lede{ font-size:clamp(1.05rem,1.4vw,1.24rem); line-height:1.55; color:var(--ink); }

.chipline{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 1.5rem; }
.chipline li{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface);
  font-size:.8125rem; color:var(--ink);
}
.chipline li::before{ content:""; width:6px; height:6px; border-radius:999px; background:var(--green-2); flex:none; }
.chipline li.is-gold::before{ background:var(--gold); }
.cropx--tint .chipline li{ background:#fff; }

.dtable{ margin:0 0 1.6rem; border-top:1px solid var(--line); }
.dtable__row{
  display:grid; grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);
  gap:clamp(12px,2vw,26px); padding:14px 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease), background .35s var(--ease);
}
.dtable__row:hover{ padding-left:10px; background:linear-gradient(90deg, rgba(37,104,51,.05), transparent 60%); }
.dtable dt{ font-size:.8125rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--green-2); }
.dtable dd{ margin:0; color:var(--ink); }

/* ---------------------------------------------------------------
   Season bars
   The campaign year as six month-columns with the three crop
   windows drawn across it. The bars grow out of nothing when the
   figure scrolls in, which is the whole effect.
   --------------------------------------------------------------- */
.season{ background:var(--ink); color:#fff; padding-block:var(--section-y); }
.season .h2{ color:#fff; }
.season__lead{ max-width:62ch; color:rgba(255,255,255,.76); }
.season__chart{
  margin:clamp(30px,4vw,52px) 0 0;
  border-top:1px solid var(--line-ink);
}
.season__months{
  display:grid; grid-template-columns:minmax(0,7.5rem) repeat(6,minmax(0,1fr));
  gap:0; padding:14px 0 10px;
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.season__months span + span{ text-align:center; }
.season__row{
  display:grid; grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);
  gap:0; align-items:center; padding:12px 0;
  border-top:1px solid var(--line-ink);
}
.season__name{ font-size:.9375rem; font-weight:600; color:#fff; padding-right:14px; }
.season__track{ position:relative; height:38px; }
.season__track::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, var(--line-ink) 0 1px, transparent 1px calc(100% / 6));
}
.season__bar{
  position:absolute; top:50%; translate:0 -50%;
  left:calc(var(--from) * 100% / 6);
  width:calc(var(--span) * 100% / 6);
  height:30px; border-radius:999px;
  display:flex; align-items:center; padding-inline:14px;
  font-size:.8125rem; font-weight:600; color:var(--ink);
  background:var(--gold); white-space:nowrap; overflow:hidden;
  transform-origin:left; transform:scaleX(0);
  transition:transform .95s var(--ease); transition-delay:calc(.12s * var(--i,0));
}
.season__bar > span{ opacity:0; transition:opacity .5s var(--ease) calc(.12s * var(--i,0) + .5s); }
.season__when{
  display:none; margin-right:9px; padding:2px 8px; border-radius:999px;
  background:rgba(6,50,20,.16); font-size:.6875rem; font-weight:700; letter-spacing:.06em;
}
.season__bar--green{ background:var(--green-2); color:#fff; }
.season__bar--tint{ background:var(--tint); }
.season__bar--rain{ background:rgba(255,255,255,.14); color:#fff; box-shadow:inset 0 0 0 1px var(--line-ink); }
.reveal.is-in .season__bar,.season__row.is-in .season__bar{ transform:scaleX(1); }
.reveal.is-in .season__bar > span,.season__row.is-in .season__bar > span{ opacity:1; }
html:not(.js) .season__bar{ transform:scaleX(1); }
html:not(.js) .season__bar > span{ opacity:1; }
.season__note{ margin:clamp(22px,2.6vw,32px) 0 0; max-width:70ch; font-size:.9375rem; color:rgba(255,255,255,.66); }

/* ---------------------------------------------------------------
   Rotation cycle
   The three cultures as a closed loop rather than three list rows.
   --------------------------------------------------------------- */
.cycle{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,26px); margin-top:clamp(30px,4vw,50px);
  counter-reset:cyc;
}
.cycle__node{
  position:relative; padding:clamp(22px,2.6vw,32px);
  border-radius:var(--radius); background:#fff;
  box-shadow:0 1px 0 var(--line), 0 24px 40px -34px rgba(6,50,20,.5);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.cycle__node:hover{ transform:translateY(-5px); box-shadow:0 1px 0 var(--line), 0 34px 52px -32px rgba(6,50,20,.55); }
.cycle__node + .cycle__node::before{
  content:""; position:absolute; top:50%; left:calc(-1 * clamp(14px,2vw,26px)); width:clamp(14px,2vw,26px);
  height:1px; background:var(--tint);
}
.cycle__node + .cycle__node::after{
  content:""; position:absolute; top:calc(50% - 3.5px); left:-7px;
  width:7px; height:7px; border-right:1.6px solid var(--green-2); border-bottom:1.6px solid var(--green-2);
  transform:rotate(-45deg);
}
.cycle__step{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 1rem;
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-md);
}
.cycle__step::before{
  counter-increment:cyc; content:"0" counter(cyc);
  display:grid; place-items:center; width:26px; height:26px; border-radius:999px;
  background:var(--ink); color:var(--gold); font-size:.6875rem;
}
.cycle__node h3{ margin:0 0 .5em; font-size:clamp(1.15rem,1.8vw,1.45rem); font-weight:500; letter-spacing:-.018em; color:var(--ink); }
.cycle__node p{ margin:0; font-size:.9375rem; }
.cycle__role{
  display:block; margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line);
  font-size:.8125rem; color:var(--green-2); font-weight:600;
}

/* ---------------------------------------------------------------
   Pillar cards
   The four sustainability pillars, each with its own photograph,
   in a 2x2 rather than four full-width rows of bullets.
   --------------------------------------------------------------- */
.pillars{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.2vw,30px); }
.pillar{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--radius); background:#fff;
  box-shadow:0 1px 0 var(--line), 0 26px 44px -38px rgba(6,50,20,.5);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pillar:hover{ transform:translateY(-6px); box-shadow:0 1px 0 var(--line), 0 40px 60px -36px rgba(6,50,20,.55); }
.pillar__shot{ position:relative; margin:0; aspect-ratio:16/9; overflow:hidden; background:var(--surface-alt); }
.pillar__shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.pillar:hover .pillar__shot img{ transform:scale(1.06); }
.pillar__body{ padding:clamp(20px,2.4vw,30px); display:flex; flex-direction:column; flex:1; }
.pillar__body h3{ margin:0 0 .5em; font-size:clamp(1.15rem,1.7vw,1.4rem); font-weight:500; letter-spacing:-.018em; color:var(--ink); }
.pillar__body > p{ margin:0 0 1.1em; font-size:.9375rem; }
.pillar__list{ margin-top:auto; border-top:1px solid var(--line); }
.pillar__list li{
  position:relative; padding:10px 0 10px 20px;
  font-size:.9063rem; line-height:1.45; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.pillar__list li:last-child{ border-bottom:0; padding-bottom:0; }
.pillar__list li::before{
  content:""; position:absolute; left:0; top:19px;
  width:7px; height:7px; border-right:1.5px solid var(--gold-md); border-bottom:1.5px solid var(--gold-md);
  transform:rotate(-45deg);
}

/* ---------------------------------------------------------------
   Accordion
   Used where a page had a fifth numbered list. Native <details>,
   so it works with no JS; the JS only adds the height transition
   and the one-open-at-a-time behaviour.
   --------------------------------------------------------------- */
.accord{ border-top:1px solid var(--line); margin-top:clamp(26px,3vw,40px); }
.accord__item{ border-bottom:1px solid var(--line); }
.accord__item > summary{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(14px,2vw,24px);
  padding:clamp(18px,2vw,26px) 0; cursor:pointer; list-style:none;
  transition:padding-left .4s var(--ease);
}
.accord__item > summary::-webkit-details-marker{ display:none; }
.accord__item > summary:hover{ padding-left:8px; }
.accord__dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold-md);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.accord__item[open] .accord__dot{ background:var(--gold); transform:scale(1.35); }
.accord__title{ font-size:clamp(1.05rem,1.7vw,1.35rem); font-weight:500; letter-spacing:-.015em; color:var(--ink); }
.accord__sign{
  position:relative; width:30px; height:30px; border-radius:999px;
  background:rgba(6,50,20,.08); flex:none;
  transition:background .35s var(--ease), transform .45s var(--ease);
}
.accord__sign::before,.accord__sign::after{
  content:""; position:absolute; top:50%; left:50%; translate:-50% -50%;
  background:var(--ink); transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.accord__sign::before{ width:11px; height:1.6px; }
.accord__sign::after{ width:1.6px; height:11px; }
.accord__item[open] .accord__sign{ background:var(--gold); }
.accord__item[open] .accord__sign::after{ transform:scaleY(0); }
.accord__item[open] > summary{ padding-bottom:6px; }
.accord__panel{ overflow:hidden; }
.accord__panel > div{ padding-bottom:clamp(20px,2.4vw,30px); max-width:74ch; }
.accord__panel p{ margin:0 0 .8em; }
.accord__panel p:last-child{ margin-bottom:0; }
.js .accord__item[open] .accord__panel{ animation:accordIn .5s var(--ease); }
@keyframes accordIn{ from{ opacity:0; transform:translateY(-8px); } }

/* ---------------------------------------------------------------
   Quote band
   --------------------------------------------------------------- */
.quoteband{ position:relative; overflow:hidden; background:var(--green-dark); color:#fff; padding-block:clamp(56px,7vw,96px); }
.quoteband__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.26; filter:brightness(.66) saturate(.92); }
/* Scrim over the photograph. The pictures used here are bright dusty
   fields; without it the white type loses its edge on the lightest
   patches. Heavier on the left, where the quote sits. */
.quoteband::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,31,20,.80) 0%, rgba(11,31,20,.66) 48%, rgba(11,31,20,.42) 100%),
    linear-gradient(180deg, rgba(11,31,20,.28) 0%, rgba(11,31,20,0) 40%);
}
.quoteband__inner{ position:relative; z-index:1; max-width:64ch; }
.quoteband blockquote{ margin:0; }
.quoteband p{
  margin:0 0 1.2rem;
  font-size:clamp(1.4rem,3vw,2.3rem); line-height:1.22; font-weight:500;
  letter-spacing:-.022em; font-variation-settings:'wdth' 108; color:#fff;
  text-wrap:balance;
}
.quoteband p::before{ content:"“"; color:var(--gold); margin-right:.06em; }
.quoteband p::after{ content:"”"; color:var(--gold); }
.quoteband cite{
  display:block; font-style:normal;
  font-size:.8125rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-lt);
}

/* ---------------------------------------------------------------
   Contact sheet pair
   Two photographs at different weights, used as a beat inside a
   long section instead of another full-width band.
   --------------------------------------------------------------- */
.duo{ display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(12px,1.6vw,22px); align-items:end; }
.duo--flip{ grid-template-columns:1fr 1.55fr; }

/* ---------------------------------------------------------------
   Flowline
   The five steps from the field to the truck, laid out along one
   horizontal rule instead of stacked as a sixth numbered list. The
   rule draws itself in as the band arrives.
   --------------------------------------------------------------- */
.flowline{ position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1.4vw,20px); }
.flowline::before{
  content:""; position:absolute; z-index:0; left:0; right:0; top:19px; height:1.5px;
  background:linear-gradient(90deg, var(--green-2), var(--gold));
  transform:scaleX(0); transform-origin:left;
}
.js .flowline::before{ transition:transform 1.4s var(--ease) .1s; }
.flowline.is-in::before{ transform:scaleX(1); }
html:not(.js) .flowline::before{ transform:scaleX(1); }
.flowstep{ position:relative; z-index:1; padding-right:clamp(6px,1vw,14px); }
.flowstep__num{
  display:grid; place-items:center; width:40px; height:40px; margin-bottom:clamp(14px,1.8vw,20px);
  border-radius:999px; background:var(--ink); color:var(--gold);
  font-size:.8125rem; font-weight:700; letter-spacing:.04em;
  box-shadow:0 0 0 6px var(--surface);
  transition:transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.flowstep:hover .flowstep__num{ transform:translateY(-4px); background:var(--gold); color:var(--ink); }
.flowstep h3{ margin:0 0 .45em; font-size:clamp(1rem,1.4vw,1.18rem); font-weight:600; letter-spacing:-.012em; color:var(--ink); }
.flowstep p{ margin:0; font-size:.9063rem; line-height:1.5; }
.flowline--onTint .flowstep__num{ box-shadow:0 0 0 6px var(--surface-alt); }

/* ---------------------------------------------------------------
   Trio: three photographs on one row, weighted
   --------------------------------------------------------------- */
.trio{ display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:clamp(12px,1.6vw,22px); align-items:end; }
.trio > :nth-child(1){ aspect-ratio:4/5; }
.trio > :nth-child(2){ aspect-ratio:4/3; }
.trio > :nth-child(3){ aspect-ratio:4/5; }

/* ---------------------------------------------------------------
   Deck: a card rail that snap-scrolls instead of cramming
   --------------------------------------------------------------- */
.deck{
  display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
}

.deck__hint{
  display:none; align-items:center; gap:9px; margin:0;
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.deck__hint::after{
  content:""; width:22px; height:1px; background:currentColor;
  animation:hintNudge 1.8s var(--ease) infinite;
}
@keyframes hintNudge{ 0%,100%{ transform:translateX(0); opacity:.5; } 50%{ transform:translateX(6px); opacity:1; } }

/* ---------------------------------------------------------------
   Spec cards, second pass
   --------------------------------------------------------------- */
.pcard{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:#fff; display:flex; flex-direction:column;
  box-shadow:0 1px 0 var(--line), 0 26px 44px -38px rgba(6,50,20,.5);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pcard::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(243,184,0,.16), transparent 65%);
  transition:opacity .4s var(--ease);
}
.pcard:hover{ transform:translateY(-6px); box-shadow:0 1px 0 var(--line), 0 40px 62px -36px rgba(6,50,20,.55); }
.pcard:hover::before{ opacity:1; }
.pcard__shot{ position:relative; margin:0; aspect-ratio:5/4; overflow:hidden; background:var(--surface-alt); }
.pcard__shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.pcard:hover .pcard__shot img{ transform:scale(1.07); }
.pcard__badge{
  position:absolute; z-index:3; top:12px; right:12px;
  padding:6px 12px; border-radius:999px; background:var(--ink); color:var(--gold);
  font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.pcard__body{ padding:clamp(20px,2.2vw,28px); display:flex; flex-direction:column; flex:1; }
.pcard__body h3{ margin:0 0 .35em; font-size:clamp(1.2rem,1.8vw,1.5rem); font-weight:500; letter-spacing:-.02em; color:var(--ink); }
.pcard__note{ margin:0 0 1.2em; font-size:.9375rem; color:var(--body); }
.pcard .dtable{ margin:auto 0 0; }
.pcard .dtable__row{ grid-template-columns:1fr; gap:2px; padding:11px 0; }
.pcard .dtable__row:hover{ padding-left:6px; }
.pcard .dtable dd{ font-size:.9063rem; }

/* ---------------------------------------------------------------
   Page-to-page navigation
   Every interior page used to end on the same gold strip. This
   replaces it with the two pages either side, as photographs.
   --------------------------------------------------------------- */
.pagenext{ background:var(--surface-alt); border-top:1px solid var(--line); padding-block:clamp(44px,5.5vw,76px); }
.pagenext__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  margin-bottom:clamp(20px,2.6vw,32px);
}
.pagenext__head p{ margin:0; }
.pagenext__all{ font-size:.8125rem; font-weight:600; color:var(--green-2); display:inline-flex; align-items:center; gap:7px; }
.pagenext__all:hover{ color:var(--gold-md); }
.pagenext__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,26px); }
.pnext{
  position:relative; display:flex; min-height:clamp(190px,22vw,260px);
  align-items:flex-end; overflow:hidden; border-radius:var(--radius);
  background:var(--ink); color:#fff; isolation:isolate;
}
.pnext img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--ease), opacity .5s var(--ease);
  opacity:.62;
}
.pnext::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,50,20,.15) 0%, rgba(6,50,20,.55) 55%, rgba(6,50,20,.9) 100%);
}
.pnext:hover img{ transform:scale(1.06); opacity:.75; }
.pnext__body{ position:relative; z-index:2; padding:clamp(20px,2.6vw,32px); width:100%; }
.pnext__dir{
  display:block; margin-bottom:.7em;
  font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-lt);
}
.pnext__title{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:clamp(1.3rem,2.4vw,1.9rem); font-weight:500; letter-spacing:-.022em;
  font-variation-settings:'wdth' 110;
}
.pnext__sub{ margin:.5em 0 0; font-size:.9063rem; color:rgba(255,255,255,.74); max-width:40ch; }
.pnext .btn__arrow{ background:rgba(255,255,255,.16); }
.pnext:hover .btn__arrow{ background:var(--gold); color:var(--ink); }
.pnext:hover .btn__arrow::before{ transform:rotate(-45deg) translate(2px,-2px); }
.pnext--prev .pnext__dir{ color:var(--tint); }

/* ---------------------------------------------------------------
   Effects layer
   --------------------------------------------------------------- */
.reveal--l{ transform:translate(-26px,0); }
.reveal--r{ transform:translate(26px,0); }
.reveal--zoom{ transform:scale(.965); }
.reveal--blur{ filter:blur(9px); }
.js .reveal--blur{ transition:opacity .6s var(--ease), transform .6s var(--ease), filter .7s var(--ease); }
.reveal--l.is-in,.reveal--r.is-in,.reveal--zoom.is-in{ transform:none; }
.reveal--blur.is-in{ filter:none; }

/* headline lines that rise out of a clip, as the hero titles do */
.h2 .mask,.h3 .mask{ display:block; overflow:hidden; padding-bottom:.06em; }
.h2 .mask > span,.h3 .mask > span{
  display:block; transform:translateY(105%);
  transition:transform .9s var(--ease); transition-delay:calc(.09s * var(--i,0));
}
.h2 .mask > span.is-in,.h3 .mask > span.is-in{ transform:none; }
html:not(.js) .h2 .mask > span,html:not(.js) .h3 .mask > span{ transform:none; }

/* a rule that draws itself in */
.drawline{ height:1px; background:var(--line); transform:scaleX(0); transform-origin:left; }
.js .drawline{ transition:transform 1.1s var(--ease); }
.drawline.is-in{ transform:scaleX(1); }
html:not(.js) .drawline{ transform:scaleX(1); }

/* scroll-driven scale on a photograph: the JS writes --z */
.js [data-zoom] > img,.js [data-zoom] > video{ transform:scale(var(--z,1)); will-change:transform; }
.js .shell[data-zoom]:hover > img{ transform:scale(calc(var(--z,1) + .04)); }

/* the eyebrow index gets a ticking dot on interior pages */
.eyebrow--tick .eyebrow__idx::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:999px;
  background:var(--gold); margin-right:10px; vertical-align:.15em;
}

/* section opener: number, rule, title, lead, all in one place */
.opener{ max-width:64ch; }
.opener--center{ margin-inline:auto; text-align:center; }
.opener--center .eyebrow{ justify-content:center; }
.opener__lead{ font-size:clamp(1.05rem,1.4vw,1.24rem); line-height:1.55; color:var(--ink); opacity:.86; margin:0; }
.opener--onDark .h2,.opener--onDark .opener__lead{ color:#fff; }
.opener--onDark .opener__lead{ opacity:.76; }

.secwrap{ display:flex; flex-direction:column; gap:clamp(28px,3.6vw,52px); }

/* ---------------------------------------------------------------
   Interior pages: responsive, second pass
   --------------------------------------------------------------- */
@media (max-width:1023px){
  .split__grid,.split__grid--narrow,.cropx__grid,.cropx--flip .cropx__grid{ grid-template-columns:1fr; }
  .split__media,.cropx__media{ position:relative; top:auto; }
  .split__grid--flip .split__media,.cropx--flip .cropx__media{ order:0; }
  .pillars{ grid-template-columns:1fr; }
  .kpi__grid{ grid-template-columns:repeat(2,1fr); row-gap:clamp(22px,3vw,30px); }
  .kpi__cell:nth-child(odd){ padding-left:0; border-left:0; }
  .cycle{ grid-template-columns:1fr; }
  .cycle__node + .cycle__node::before{
    top:calc(-1 * clamp(14px,2vw,26px)); left:clamp(22px,2.6vw,32px);
    width:1px; height:clamp(14px,2vw,26px);
  }
  .cycle__node + .cycle__node::after{
    top:-7px; left:calc(clamp(22px,2.6vw,32px) - 3.5px);
    transform:rotate(45deg);
  }
  .season__months{ grid-template-columns:minmax(0,5rem) repeat(6,minmax(0,1fr)); }
  .season__row{ grid-template-columns:minmax(0,5rem) minmax(0,1fr); }
  .pagenext__grid{ grid-template-columns:1fr; }
  .flowline{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:clamp(24px,3vw,34px); }
  .flowline::before{ display:none; }
  .cropx__ghost{ display:none; }
  .cropx__media{ padding-bottom:0; max-width:620px; }
  .cropx__inset{ right:0; bottom:auto; top:auto; position:relative; width:auto; margin-top:12px; outline:0; box-shadow:none; }
  .cropx--flip .cropx__inset{ left:auto; }
  .duo,.duo--flip{ grid-template-columns:1fr 1fr; }
  .trio{ grid-template-columns:1fr 1fr; }
  .trio > :nth-child(2){ grid-column:1 / -1; order:-1; aspect-ratio:16/9; }
}

@media (max-width:767px){
  /* card groups become one snap rail per group rather than a squeeze */
  .deck{
    display:flex; width:auto; gap:14px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter));
    padding:4px var(--gutter) 20px;
  }
  .deck::-webkit-scrollbar{ display:none; }
  .deck > *{ flex:0 0 min(80vw,320px); scroll-snap-align:start; }
  .deck__hint{ display:flex; }

  .cropx{ padding-block:clamp(40px,8vw,56px); }
  .dtable__row{ grid-template-columns:1fr; gap:3px; padding:12px 0; }
  .dtable__row:hover{ padding-left:0; background:none; }

  .season__months{ display:none; }
  .season__row{ grid-template-columns:1fr; gap:8px; padding:14px 0; }
  .season__name{ padding-right:0; }
  .season__track{ height:auto; }
  .season__track::before{ display:none; }
  .season .season__row .season__track .season__bar{
    position:relative; top:auto; translate:none;
    left:0; width:100%; height:auto; min-height:34px;
    padding:7px 12px; font-size:.8125rem; white-space:normal; line-height:1.35;
    border-radius:10px;
  }
  .season__when{ display:inline-block; }
  .season__bar--rain .season__when,.season__bar--green .season__when{ background:rgba(255,255,255,.2); }

  .pillar__shot{ aspect-ratio:16/10; }
  .duo,.duo--flip{ grid-template-columns:1fr; }
  .accord__item > summary{ grid-template-columns:auto minmax(0,1fr) auto; gap:12px; padding:16px 0; }
  .accord__item > summary:hover{ padding-left:0; }

  .flowline{ grid-template-columns:1fr; row-gap:0; }
  .flowstep{
    display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px 16px;
    padding:18px 0; border-top:1px solid var(--line);
  }
  .flowstep__num{ margin-bottom:0; grid-row:1 / span 2; box-shadow:none; }
  .flowstep h3{ align-self:center; }

  .pnext{ min-height:170px; }
  .pagenext__head{ flex-direction:column; align-items:flex-start; gap:10px; }

  .quoteband p{ font-size:1.3rem; line-height:1.28; }

  .split__stack--offset{ grid-template-columns:1fr 1fr; }
  .split__stack--offset > :first-child{ grid-column:1 / -1; }
}

/* Small phones (up to 479px). The 767px tier assumes ~390px of usable
   width; below that the multi-column leftovers and the tighter type both
   need one more step down. */
@media (max-width:479px){
  :root{ --gutter:18px; }
  .kpi__grid{ grid-template-columns:1fr; row-gap:20px; }
  .kpi__cell{ padding-inline:0; border-left:0; }
  .kpi__cell + .kpi__cell{ padding-top:20px; border-top:1px solid var(--line); }
  .kpi__value{ font-size:1.9rem; }
  .kpi__value--word{ font-size:1.35rem; }

  .shell--tall,.shell--portrait{ aspect-ratio:4/5; }
  .trio{ grid-template-columns:1fr; }
  .trio > :nth-child(1),.trio > :nth-child(3){ aspect-ratio:16/10; }
  .shell--band{ aspect-ratio:16/10; }

  .phero__title{ font-size:1.85rem; }
  .chipline li{ font-size:.75rem; padding:6px 11px; }
  .accord__title{ font-size:1rem; }
  .accord__sign{ width:26px; height:26px; }
  .pnext__title{ font-size:1.2rem; }
  .pnext__sub{ display:none; }
  .marquee__group > span{ font-size:1.05rem; }
  .deck > *{ flex:0 0 84vw; }
  .pillar__body,.pcard__body{ padding:18px; }
  .season__name{ font-size:.875rem; }
  .quoteband p{ font-size:1.15rem; }
  /* Narrow screens: the type runs the full width, so the scrim is even
     rather than heavier on one side. */
  .quoteband::after{ background:rgba(11,31,20,.72); }
  .opener__lead{ font-size:.9375rem; }
}

@media (max-width:359px){
  :root{ --gutter:15px; }
  .pnext__body{ padding:16px; }
  .kpi__value{ font-size:1.7rem; }
  .kpi__value--word{ font-size:1.25rem; }
}

/* Tap-friendly: no hover lifts or cursor shine on touch pointers, and the
   pressed state does the work instead. */
@media (hover:none){
  .pillar:hover,.pcard:hover,.cycle__node:hover{ transform:none; }
  .pcard:hover::before{ opacity:0; }
  .shell:hover img,.pillar:hover .pillar__shot img,.pcard:hover .pcard__shot img{ transform:none; }
  .pillar:active,.pcard:active,.cycle__node:active{ transform:scale(.99); }
  .dtable__row:hover{ padding-left:0; background:none; }
}

@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
  .season__bar{ transform:scaleX(1); transition:none; }
  .season__bar > span{ opacity:1; transition:none; }
  .drawline{ transform:scaleX(1); }
  .js .accord__item[open] .accord__panel{ animation:none; }
  .js [data-zoom] > img,.js [data-zoom] > video{ transform:none; }
  .h2 .mask > span,.h3 .mask > span{ transform:none; }
}


/* ==================================================================================
   ██ OPTION 3: HERO, HEADER AND OVERLAY MENU ██
   Transcribed from deploy/prototype/option-3 so the hero, its positioning and the
   navigation match that prototype exactly. Values below are option-3's own numbers,
   not approximations of them: near-black green ground, cream type, Fraunces at 300
   for display, Karla for supporting text, brand gold as the single accent, and no
   rounded corners anywhere inside the hero or the header.

   Scoped on purpose. Everything here is confined to .hero, .phero, .header and
   .menu, so the section components further up the page keep Archivo and the
   rounded, lighter treatment they were designed with.
   ================================================================================== */

:root{
  --o3-display: "Fraunces", Georgia, "Times New Roman", serif;
  --o3-body:    "Karla", "Helvetica Neue", Arial, sans-serif;

  --o3-bg:          #102316;                    /* deep green ground */
  --o3-bg-2:        #16301e;                    /* dropdown / lang panels */
  --o3-solid:       rgba(11,26,16,.92);         /* scrolled header */
  --o3-cream:       #f5f2e8;
  --o3-text:        rgba(245,242,232,.80);
  --o3-muted:       rgba(245,242,232,.58);
  --o3-border:      rgba(244,241,230,.16);
  --o3-border-soft: rgba(244,241,230,.09);
}

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */
.hero{
  min-height:100vh;
  padding-top:140px;
  background:var(--o3-bg);
  color:var(--o3-cream);
  font-family:var(--o3-body);
}
.hero--centred{ flex-direction:column; justify-content:flex-end; }

/* option-3 sits the media flush to the box and grades it back a little, so
   the poster carries the type instead of competing with it */
.hero--centred .hero__media{ inset:0; filter:saturate(.78) contrast(1.02) brightness(.88); }
.hero--centred .hero__scrim{
  background:
    radial-gradient(120% 90% at 50% 22%, rgba(16,35,22,.12), rgba(16,35,22,.66) 70%, rgba(16,35,22,.9)),
    linear-gradient(180deg, rgba(16,35,22,.66), rgba(16,35,22,.14) 32%, rgba(16,35,22,.88));
}

.hero--centred .hero__inner{
  flex:0 1 auto; width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin:auto auto 0;
  padding:0 var(--gutter) 64px;
  flex-direction:column; align-items:center; justify-content:flex-end;
  gap:0;
}
.hero--centred .hero__content{
  max-width:1080px; gap:0;
}

/* the eyebrow: a single gold rule in front of the label, nothing after it */
.hero .eyebrow--rule{
  justify-content:center; margin:0 0 26px; gap:16px;
  font-family:var(--o3-body);
  font-size:13px; font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,242,232,.88);
}
.hero .eyebrow--rule::before{ width:34px; height:1px; background:var(--gold); }
.hero .eyebrow--rule::after{ display:none; }

.hero--centred .hero__title{
  margin:0;
  font-family:var(--o3-display);
  font-size:clamp(42px, 7.4vw, 104px);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.02em;
  font-variation-settings:"SOFT" 20, "WONK" 0;
  color:var(--o3-cream);
  text-wrap:initial;
}
/* the line masks stay: they change nothing at rest, and the two lines still
   rise out of their clip on load */
.hero__title .mask{ padding-bottom:.02em; }

.hero--centred .hero__lead{
  margin:26px auto 34px;
  max-width:62ch;
  font-family:var(--o3-body);
  font-size:18px; line-height:1.6;
  color:rgba(244,241,230,.8);
}
.hero--centred .hero__actions{
  justify-content:center; align-items:center; gap:28px; margin:0; flex-wrap:wrap;
}

/* option-3's controls: a square gold block and a gold text link. The site's
   own .btn is a pill and uses ::after for its sheen, so these are their own
   classes rather than an override that has to fight it. */
.hbtn{
  display:inline-flex; align-items:center; gap:14px;
  padding:17px 28px;
  background:var(--gold); color:#0b1a10;
  font-family:var(--o3-body); font-size:17px; font-weight:500; line-height:1;
  transition:background .15s ease;
}
.hbtn::after{ content:"→"; font-size:16px; }
.hbtn:hover{ background:var(--gold-md); }

.hlink{
  font-family:var(--o3-body); font-size:17px; color:var(--gold);
  border-bottom:1px solid rgba(243,184,0,.4); padding-bottom:2px;
  transition:border-color .15s ease;
}
.hlink:hover{ border-bottom-color:var(--gold); }

.hero__vertical{
  right:24px; top:50%;
  transform:translateY(-50%) rotate(90deg); transform-origin:right center;
  writing-mode:horizontal-tb;
  font-family:var(--o3-body);
  font-size:12px; font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:var(--o3-muted); white-space:nowrap; text-shadow:none;
}

/* the foot rule: three facts and the scroll cue, divided by hairlines */
.hero--centred .hero__bar{
  border-top:1px solid var(--o3-border-soft);
  padding:0 var(--gutter);
}
.hero--centred .hero__facts li{
  padding:26px 32px 26px 0; border-left:0;
}
.hero--centred .hero__facts li + li{
  border-left:1px solid var(--o3-border-soft); padding-left:32px;
}
.hero--centred .hero__facts li:first-child{ padding-left:0; }
.hero--centred .hero__facts strong{
  font-family:var(--o3-display); font-weight:300; font-size:34px; line-height:1;
  letter-spacing:0; font-variation-settings:"SOFT" 20, "WONK" 0;
  color:var(--o3-cream);
}
.hero--centred .hero__facts span{
  margin-top:4px;
  font-family:var(--o3-body);
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--o3-muted);
}
.hero--centred .hero__scroll{
  gap:12px; padding:26px 0 26px 32px;
  border-left:1px solid var(--o3-border-soft);
  font-family:var(--o3-body);
  font-size:12px; font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:var(--o3-muted);
}
.hero--centred .hero__scroll-line{ width:56px; background:rgba(245,242,232,.3); }

/* square video control, hairline border, clear of the header */
.hero .vctrl{
  top:108px; right:var(--gutter);
  width:46px; height:46px; border-radius:0;
  background:rgba(11,26,16,.35); border:1px solid var(--o3-border);
  color:var(--o3-cream); box-shadow:none;
}
.hero .vctrl:hover{ background:rgba(11,26,16,.35); border-color:var(--gold); transform:none; }
.hero .vctrl svg{ width:15px; height:15px; }

/* ---------------------------------------------------------------
   HEADER
   Transparent over the hero, near-black green once scrolled. The logo
   keeps its white lockup in both states, as option-3 does.
   --------------------------------------------------------------- */
.header{ height:84px; font-family:var(--o3-body); color:var(--o3-cream); }
.header__inner{ height:84px; gap:40px; padding-right:0; }
.header__logo,.header__logo-img{ height:auto; }
.header__logo-img{ width:146px; }
.header__logo-img--colour{ display:none; }

.header__nav{ margin-inline:auto; gap:34px; }
.header__nav a,.drop__trigger{
  font-family:var(--o3-body);
  font-size:15px; font-weight:400; letter-spacing:.04em;
  color:var(--o3-cream); padding-block:8px;
}
/* option-3's underline grows from the left on hover; the site's scales from
   the centre of a 1.5px rule, so both the geometry and the colour change */
.header__nav a::after,.drop__trigger::after{
  left:0; right:100%; bottom:2px; height:1px;
  background:var(--gold); transform:none; transition:right .25s var(--ease);
}
.header__nav a:hover::after,.drop__trigger:hover::after,
.drop[data-open] .drop__trigger::after,
.drop__trigger[aria-expanded="true"]::after{ right:0; transform:none; }
.header__nav a[aria-current="page"]::after,
.drop:has(a[aria-current="page"]) .drop__trigger::after{ right:0; transform:none; background:var(--gold); }
/* the trigger is a link that also opens a panel, so the caret has to say so */
.drop__caret{ display:inline-block; width:11px; height:11px; opacity:.55; }

.header__utils{ gap:22px; }
/* option-3's order: language, then the gold Contacto block, then the burger */
.header__cta{ order:2; }
.lang{ order:1; }
.burger{ order:3; }

/* square gold CTA, no pill and no arrow disc */
.header__cta{
  padding:11px 20px; border-radius:0; border:0;
  background:var(--gold); color:#0b1a10;
  font-family:var(--o3-body); font-size:15px; font-weight:400; letter-spacing:.04em;
  transition:background .15s ease;
}
.header__cta .btn__arrow{ display:none; }
.header__cta:hover{ background:var(--gold-md); color:#0b1a10; transform:none; border:0; }

/* the language pill loses its border and caret */
.lang__trigger{
  padding:6px 0; border:0; background:none;
  font-family:var(--o3-body); font-size:14px; font-weight:400; letter-spacing:0;
  color:var(--o3-cream); gap:8px;
}
.lang__trigger:hover{ background:none; border:0; color:var(--gold); }
.lang__flag{ width:20px; height:13px; border-radius:0; }
.lang__caret{ display:none; }
.lang__menu{
  top:calc(100% + 16px); right:0; min-width:214px; padding:6px 0;
  background:var(--o3-bg-2); border:1px solid var(--o3-border-soft);
  border-radius:0; box-shadow:none;
}
.lang__item{ padding:11px 18px; font-size:15px; color:var(--o3-cream); border-radius:0; }
.lang__item.is-disabled{ color:var(--o3-muted); }
.lang__soon{ margin-left:auto; font-size:12px; color:var(--o3-muted); }
.lang__tick{ display:none; }

/* the burger becomes option-3's hairline square. It stays visible above
   1024px, unlike the prototype, because the overlay menu is the only place
   that carries the in-page anchors and hiding it would strand them. */
.burger{
  width:44px; height:44px; border-radius:0;
  background:none; border:1px solid var(--o3-border);
  color:var(--o3-cream);
  transition:border-color .15s ease, background .15s ease;
}
.burger:hover{ background:rgba(244,241,230,.06); border-color:var(--gold); }
.burger__lines{ display:block; width:18px; }
.burger__lines i{ display:block; height:1px; background:currentColor; border-radius:0; }
.burger__lines i:last-child{ width:18px; margin-left:0; margin-top:5px; }
.burger[aria-expanded="true"] .burger__lines i:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines i:last-child{ width:18px; transform:translateY(-3px) rotate(-45deg); }

/* scrolled: dark and translucent, not white */
.header.is-solid{
  background:var(--o3-solid);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:none; border-bottom:1px solid var(--o3-border-soft);
}
.header.is-solid .header__logo-img--white{ opacity:1; }
.header.is-solid .header__logo-img--colour{ opacity:0; }
.header.is-solid .header__nav a,
.header.is-solid .drop__trigger{ color:var(--o3-cream); }
.header.is-solid .header__nav a:hover,
.header.is-solid .drop:hover .drop__trigger{ color:var(--o3-cream); }
.header.is-solid .lang__trigger{ color:var(--o3-cream); border:0; }
.header.is-solid .lang__trigger:hover{ background:none; color:var(--gold); }
.header.is-solid .header__cta{ background:var(--gold); color:#0b1a10; border:0; }
.header.is-solid .header__cta:hover{ background:var(--gold-md); }
body.is-locked .header{ background:none; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
body.is-locked .lang__trigger{ color:var(--o3-cream); border:0; }

/* the Produtos dropdown, in the same dark register */
.drop__menu{
  top:calc(100% + 18px); left:-22px; width:330px; min-width:330px; padding:8px 0;
  background:var(--o3-bg-2); border:1px solid var(--o3-border-soft);
  border-radius:0; box-shadow:none;
}
.drop__menu::before{ display:none; }
.drop__menu a{ display:block; padding:15px 22px; border-radius:0; background:none; }
.drop__menu a:hover{ background:rgba(244,241,230,.05); }
.drop__menu strong{ display:block; color:var(--o3-cream); font-weight:500; font-size:16px; }
.drop__menu span{ display:block; margin-top:3px; font-size:14px; color:var(--o3-muted); }
.drop__menu .drop__sep{ margin:8px 22px; background:var(--o3-border-soft); }

/* ---------------------------------------------------------------
   OVERLAY MENU
   --------------------------------------------------------------- */
.menu{ background:var(--o3-bg); padding:124px var(--gutter) 48px; font-family:var(--o3-body); }
.menu__inner{ max-width:var(--container); gap:56px; }
.menu__nav{ border-top:0; gap:0; }
.menu__row{
  display:block; border-bottom:1px solid var(--o3-border-soft);
  background:none; border-radius:0; padding:0;
}
.menu__nav .menu__row > a{
  gap:20px; padding:18px 0;
  font-family:var(--o3-display);
  font-size:clamp(30px, 4.6vw, 52px);
  font-weight:300; line-height:1.08; letter-spacing:0;
  font-variation-settings:"SOFT" 20, "WONK" 0;
  color:var(--o3-cream);
}
.menu__nav .menu__row > a:hover{ color:var(--gold); padding-left:0; }
.menu__nav .menu__row > a[aria-current="page"]{ color:var(--gold); }
.menu__num{
  font-family:var(--o3-body); font-size:13px; font-weight:400;
  letter-spacing:0; color:var(--gold);
}
.menu__sub{
  display:flex; flex-wrap:wrap; gap:6px 26px; padding:0 0 18px 44px;
  justify-content:flex-start; opacity:1; transform:none; max-width:none;
}
.menu__sub a{ font-family:var(--o3-body); font-size:15px; color:var(--o3-muted); }
.menu__sub a:hover{ color:var(--o3-cream); }
.menu__meta{ gap:36px; font-size:15px; color:var(--o3-text); }
.menu__meta .eyebrow{ margin-bottom:12px; color:var(--gold); }
.menu__mail{ color:var(--gold); border-bottom:0; }
.menu__mail:hover{ color:var(--gold-md); }

/* ---------------------------------------------------------------
   INTERIOR PAGE BANNERS
   The .phero is the hero's smaller sibling, so it takes the same
   display face and the same ground.
   --------------------------------------------------------------- */
.phero{ background:var(--o3-bg); font-family:var(--o3-body); }
.phero__bg{ filter:saturate(.78) contrast(1.02) brightness(.88); }
.phero__scrim{
  background:
    radial-gradient(120% 90% at 50% 26%, rgba(16,35,22,.18), rgba(16,35,22,.62) 70%, rgba(16,35,22,.9)),
    linear-gradient(180deg, rgba(16,35,22,.72), rgba(16,35,22,.2) 40%, rgba(16,35,22,.9));
}
.phero__title{
  font-family:var(--o3-display);
  font-size:clamp(36px, 5.6vw, 76px);
  font-weight:300; line-height:1; letter-spacing:-.02em;
  font-variation-settings:"SOFT" 20, "WONK" 0;
  color:var(--o3-cream);
}
.phero__lead{ font-family:var(--o3-body); font-size:18px; line-height:1.6; color:rgba(244,241,230,.8); }
.phero .eyebrow--onDark{
  font-family:var(--o3-body); font-size:13px; font-weight:400;
  letter-spacing:.16em; color:rgba(245,242,232,.88); gap:16px;
}
.phero .eyebrow--onDark::before{ content:""; flex:none; width:34px; height:1px; background:var(--gold); }
.crumbs{ font-family:var(--o3-body); font-weight:400; letter-spacing:.1em; color:var(--o3-muted); }
.crumbs a{ color:rgba(245,242,232,.84); }
.crumbs [aria-current="page"]{ color:var(--gold); }

/* ---------------------------------------------------------------
   Responsive, option-3's own breakpoints
   --------------------------------------------------------------- */
@media (max-width:1199px){
  .header,.header__inner{ height:76px; }
  .header__logo-img{ width:132px; }
  .header__nav{ gap:24px; }
  .header__utils{ gap:16px; }
}

@media (max-width:1023px){
  .hero{ min-height:92vh; }
  .hero__vertical{ display:none; }
  .hero--centred .hero__bar{ flex-direction:column; align-items:stretch; }
  .hero--centred .hero__facts{ flex-direction:column; flex-wrap:wrap; }
  .hero--centred .hero__facts li{ padding:18px 0; border-top:1px solid var(--o3-border-soft); }
  .hero--centred .hero__facts li + li{ border-left:0; padding-left:0; }
  .hero--centred .hero__facts li:first-child{ border-top:0; }
  .hero--centred .hero__scroll{ padding:18px 0; border-left:0; border-top:1px solid var(--o3-border-soft); }
  .hero .vctrl{ top:100px; }
}

@media (max-width:767px){
  .header,.header__inner{ height:68px; }
  .header__logo-img{ width:118px; }
  .lang__code{ display:none; }
  .menu{ padding-top:96px; }
  .burger{ width:42px; height:42px; }
  .hero{ padding-top:108px; min-height:96vh; }
  .hero .eyebrow--rule{ font-size:11px; letter-spacing:.13em; margin-bottom:20px; }
  .hero .eyebrow--rule::before{ display:none; }
  .hero--centred .hero__inner{ padding-bottom:44px; }
  .hero--centred .hero__content{ max-width:none; }
  .hero--centred .hero__lead{ font-size:16px; margin:20px auto 28px; }
  .hero--centred .hero__actions{ gap:20px; }
  .hbtn{ padding:15px 22px; font-size:16px; }
  .hlink{ font-size:16px; }
  .hero .vctrl{ top:82px; width:42px; height:42px; }
  .phero__lead{ font-size:16px; }
}

@media (max-width:479px){
  .hbtn{ width:100%; justify-content:space-between; }
  .hero--centred .hero__actions{ gap:16px; }
}

@media (prefers-reduced-motion: reduce){
  .hero__scroll-line::after{ animation:none; }
}


/* ==================================================================================
   ██ HOMEPAGE REVISIONS ██
   Client review pass on index.html only.
   ================================================================================== */

/* ---------------------------------------------------------------
   Sustentabilidade: the four pillars, compact
   They were four stacked blocks of three lines each, about 400px of
   column. A 2x2 of one-line cards says the same thing in half the
   height, and the detail lives on sustentabilidade.html, which is
   where the link under them goes.
   --------------------------------------------------------------- */
.pillgrid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; margin:clamp(22px,2.6vw,32px) 0 clamp(24px,2.8vw,34px);
  background:var(--line);            /* the gap becomes the hairline grid */
  border:1px solid var(--line);
}
.pillmini{
  position:relative; background:var(--surface);
  padding:clamp(16px,1.8vw,22px);
  transition:background .3s var(--ease);
}
.pillmini:hover{ background:var(--surface-alt); }
.pillmini h3{
  margin:0 0 .35em; font-size:1rem; line-height:1.25; font-weight:600;
  letter-spacing:-.01em; color:var(--ink);
}
.pillmini p{ margin:0; font-size:.875rem; line-height:1.5; color:var(--body); }

/* Sobre nós: with the three fact rows gone the copy column is shorter
   than the photograph, so it centres against it instead of hanging from
   the top and leaving a well of white on the right. The sticky rail on
   the media column has nothing left to track, so it comes off too. */
@media (min-width:1024px){
  .exploracao__grid{ align-items:center; }
  .exploracao__media{ position:relative; top:auto; }
}

/* ---------------------------------------------------------------
   Section grounds: no two neighbours share one
   Na Exploração and Mercado e Clientes were both --surface-alt with
   nothing between them, so the two read as a single section. The
   page now alternates all the way down to the closing band:
   sustent (white) → galeria (alt) → mercado (white) → números (alt).
   --------------------------------------------------------------- */
.mercado{ background:var(--surface); border-top:1px solid var(--line); }
.numeros{ background:var(--surface-alt); }

/* ---------------------------------------------------------------
   Onde estamos: the province name on hover
   initMap() already put a <title> on every path for assistive tech;
   this is the visible label that goes with it.
   --------------------------------------------------------------- */
.local__map{ position:relative; }
.mzlabel{
  position:absolute; z-index:4; top:0; left:0; pointer-events:none;
  padding:6px 11px; border-radius:var(--radius);
  background:var(--ink); color:#fff;
  font-size:.75rem; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  box-shadow:0 10px 24px -12px rgba(6,50,20,.5);
  opacity:0; transform:translate(-50%,-140%) scale(.96);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
}
.mzlabel.is-on{ opacity:1; transform:translate(-50%,-140%) scale(1); }
.mzlabel::after{
  content:""; position:absolute; left:50%; bottom:-4px; width:8px; height:8px;
  margin-left:-4px; background:var(--ink); transform:rotate(45deg);
}
.mzlabel--active{ background:var(--green); }
.mzlabel--active::after{ background:var(--green); }
.js .mz__prov[data-name]{ cursor:default; }
@media (hover:none){ .mzlabel{ display:none; } }

/* ---------------------------------------------------------------
   The closing band, tightened
   Three contact cards and two buttons sat directly above a footer
   carrying the same email, website and location. Heading, one line,
   one action.
   --------------------------------------------------------------- */
/* The band carries its padding in one place. .cta__inner had its own
   clamp(72px,9vw,110px) from when .cta was a place-items:center grid with a
   600px min-height, so setting a second value on .cta stacked the two: 234px
   top and bottom around 311px of content, i.e. a 779px band that was 60%
   empty. The inner is zeroed and .cta owns the rhythm. */
.cta{ min-height:0; padding-block:clamp(52px,6.5vw,88px); }
.cta__inner{ padding-block:0; }
/* the new background is a bright green field rather than the darker aerial,
   so the scrim carries more weight and a centre vignette to hold the type */
.cta__scrim{
  background:
    radial-gradient(90% 80% at 50% 50%, rgba(6,50,20,.62), rgba(6,50,20,.86) 72%),
    linear-gradient(180deg, rgba(16,35,22,.5), rgba(16,35,22,.7));
}
.cta__lead{ color:rgba(255,255,255,.88); }
.cta__inner{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-block:0; }
.cta .h2{ max-width:22ch; margin-bottom:.5em; }
.cta__lead{ max-width:56ch; margin:0 0 clamp(26px,3vw,38px); }
.cta__actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:28px; margin:0;
}

@media (max-width:767px){
  .pillgrid{ grid-template-columns:1fr; }
  .cta{ padding-block:clamp(46px,11vw,64px); }
  .cta__inner{ padding-block:0; }
  .cta__actions{ gap:20px; }
}
@media (max-width:479px){
  .cta__actions .hbtn{ width:100%; justify-content:space-between; }
}


/* ==================================================================================
   ██ MERCADO PAGE REVISIONS ██
   Client review pass on mercado.html only. Everything below is scoped to a
   class that appears on that page and nowhere else.
   ================================================================================== */

/* ---------------------------------------------------------------
   01 · Mercado e clientes
   The second photograph used to be an absolutely positioned inset
   hanging off the bottom-right corner of the first. It now stacks
   under it at full column width, so the media column reads as one
   composition instead of two overlapping crops.
   --------------------------------------------------------------- */
.mstack{ gap:clamp(12px,1.4vw,18px); }

/* ---------------------------------------------------------------
   02 · Porque connosco
   Heading on the left, four unnumbered cards on a hairline grid to
   the right. The previous version stacked an opener above a row of
   four bordered columns with .why's own 80px top margin on top of
   the .secwrap gap, which is where the empty band came from.
   --------------------------------------------------------------- */
.msec-reasons{
  background:var(--surface-alt);
  padding-block:clamp(56px,7vw,96px);
}
.recols{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(30px,4.5vw,72px); align-items:start;
}
.recols__head{ position:sticky; top:calc(var(--headerH) + 32px); }
.recols__head .h2{
  margin-bottom:.5em;
  font-size:clamp(1.75rem,2.9vw,2.4rem);
}
.recols__lead{
  margin:0; max-width:34ch;
  font-size:1rem; line-height:1.6; color:var(--body);
}

/* the 1px gap on a --line ground draws the grid, so the cards need
   no borders of their own */
.rgrid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.rcard{
  position:relative; background:var(--surface);
  padding:clamp(22px,2.4vw,32px);
  transition:background .35s var(--ease);
}
.rcard::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.rcard:hover{ background:var(--surface-alt); }
.rcard:hover::before{ transform:scaleX(1); }
.rcard h3{
  margin:0 0 .5em; font-size:1.0625rem; font-weight:600;
  letter-spacing:-.008em; color:var(--ink);
}
.rcard p{ margin:0; font-size:.9375rem; line-height:1.55; color:var(--body); }

/* ---------------------------------------------------------------
   03 · Colheita e comercialização
   crop-colheita.jpg is 800x1067, a 3:4 portrait. It was being run
   through a full-bleed .shell--band at 21:9, which cropped it to a
   strip and made it the biggest element on the page. Here it sits
   at its own ratio, in the grid, beside the opener.
   --------------------------------------------------------------- */
.msec-flow{ padding-bottom:clamp(56px,7vw,96px); }
.flowhead{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(30px,4.5vw,72px); align-items:center;
  margin-bottom:clamp(44px,5.5vw,76px);
}
.flowhead .opener{ max-width:none; }
.flowhead__facts{ margin:clamp(24px,2.8vw,34px) 0 0; }
.flowhead__media{ align-self:center; }

/* ---------------------------------------------------------------
   04 · Agroprocessamento
   Was two photographs of different ratios floated against a bottom
   edge, with a definition list and a well of white beside them. Now
   a dark band: the statement and one photograph on a single
   baseline, and the before/after read out as three cards under it.
   --------------------------------------------------------------- */
.agrob{
  background:var(--ink); color:rgba(255,255,255,.78);
  padding-block:clamp(60px,7.5vw,104px);
}
.agrob__top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  gap:clamp(30px,4.5vw,72px); align-items:center;
}
.agrob__text{ max-width:56ch; align-self:center; }
.agrob .h2{ color:#fff; }
.agrob .lead{ color:rgba(255,255,255,.9); opacity:1; }
.agrob__text p{ color:rgba(255,255,255,.74); }
.agrob__text .badge{ margin-bottom:16px; }
.agrob__text .btn{ margin-top:.6rem; }
.agrob__media{
  aspect-ratio:4/5; border-radius:var(--radius);
  background:rgba(255,255,255,.06);
}
.agrob__media::after{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }

.agrob__cards{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(44px,5.5vw,76px);
  padding-top:clamp(34px,4vw,50px);
  border-top:1px solid rgba(255,255,255,.16);
}
.acard{
  padding-top:20px; border-top:2px solid var(--gold);
}
.acard__key{
  display:block; margin-bottom:.6em;
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-lt);
}
.acard p{ margin:0; font-size:.9375rem; line-height:1.55; color:rgba(255,255,255,.76); }

/* ---------------------------------------------------------------
   Mercado, responsive
   --------------------------------------------------------------- */
@media (max-width:1023px){
  .recols{ grid-template-columns:1fr; gap:clamp(26px,4vw,38px); }
  .recols__head{ position:static; }
  .recols__lead{ max-width:60ch; }
  .flowhead{ grid-template-columns:1fr; gap:clamp(26px,4vw,38px); }
  .flowhead__media{ max-width:none; aspect-ratio:16/10; }
  .agrob__top{ grid-template-columns:1fr; gap:clamp(28px,4vw,40px); }
  .agrob__media{ max-width:none; aspect-ratio:16/10; }
  .agrob__cards{ grid-template-columns:1fr; gap:0; }
  .acard + .acard{ margin-top:22px; }
}
@media (max-width:639px){
  .rgrid{ grid-template-columns:1fr; }
  .flowhead__media,.agrob__media{ aspect-ratio:4/5; }
}

/* the market hero photograph — the combine unloading into the truck — was
   sitting under the standard interior scrim and reading as a flat dark
   slab. It carries its own contrast, so it needs far less cover. */
.phero--mercado .phero__bg{ filter:saturate(.84) contrast(1.03) brightness(.9); }
.phero--mercado .phero__scrim{
  background:
    linear-gradient(105deg, rgba(16,35,22,.86) 0%, rgba(16,35,22,.55) 46%, rgba(16,35,22,.12) 78%),
    linear-gradient(180deg, rgba(16,35,22,.58) 0%, rgba(16,35,22,.18) 40%, rgba(16,35,22,.82) 100%);
}

/* ---------------------------------------------------------------
   Hero titles: room for the descenders
   The line reveal runs on .mask{overflow:hidden}, and the display
   face is set at line-height 1 or tighter, so the line box ended
   exactly on the baseline and sheared the tail off every descender
   (the j in "soja", the g in "gergelim", the p in "propósito", the
   q in "quem"). The mask now carries that room as padding and hands
   it straight back as negative margin, so nothing about the vertical
   rhythm moves, and the hidden state travels far enough to clear the
   taller box before the reveal.
   --------------------------------------------------------------- */
.hero__title .mask,
.hero--centred .hero__title .mask,
.phero__title .mask{
  padding-bottom:.2em; margin-bottom:-.2em;
}
.js .hero__title .mask > span,
.js .phero__title .mask > span{ transform:translateY(130%); }
.js .hero__title .mask > span.is-in,
.js .phero__title .mask > span.is-in{ transform:none; }


/* ==================================================================================
   ██ HEADER REVISIONS ██
   Client review pass, site-wide. Three changes to the option-3 header:
   the scrolled state goes white instead of near-black green, the Contacto
   block becomes a green pill instead of a square gold slab, and the
   language switch gets its caret back.
   ================================================================================== */

/* option-3 dropped the colour lockup entirely; it is needed again for the
   white scrolled state, so it comes back as the crossfading second image */
.header__logo-img--colour{ display:block; }

/* ---------------------------------------------------------------
   Contacto: green pill, both states
   --------------------------------------------------------------- */
.header__cta,
.header.is-solid .header__cta,
.header__cta[aria-current="page"],
.header.is-solid .header__cta[aria-current="page"]{
  padding:11px 24px; border:0; border-radius:999px;
  background:var(--green); color:#fff;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.header__cta:hover,
.header.is-solid .header__cta:hover,
.header__cta[aria-current="page"]:hover,
.header.is-solid .header__cta[aria-current="page"]:hover{
  background:var(--green-2); color:#fff; transform:translateY(-1px);
}

/* ---------------------------------------------------------------
   Language switch: the caret returns beside PT
   --------------------------------------------------------------- */
.lang__trigger{ gap:7px; }
.lang__caret{
  display:block; width:12px; height:12px; flex:none;
  opacity:.7; transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.lang__trigger:hover .lang__caret{ opacity:1; }
.lang__trigger[aria-expanded="true"] .lang__caret{ transform:rotate(180deg); opacity:1; }

/* ---------------------------------------------------------------
   Scrolled state: white
   Everything that option-3 kept cream once the header went solid has
   to flip to ink, and the logo swaps to the colour lockup.
   --------------------------------------------------------------- */
.header.is-solid{
  background:#fff;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 12px rgba(6,50,20,.05);
}
.header.is-solid .header__logo-img--white{ opacity:0; }
.header.is-solid .header__logo-img--colour{ opacity:1; }

.header.is-solid .header__nav a,
.header.is-solid .drop__trigger{ color:var(--ink); }
.header.is-solid .header__nav a:hover,
.header.is-solid .drop:hover .drop__trigger,
.header.is-solid .drop__trigger:hover{ color:var(--green); }
.header.is-solid .header__nav a::after,
.header.is-solid .drop__trigger::after{ background:var(--green); }
.header.is-solid .header__nav a[aria-current="page"]::after,
.header.is-solid .drop:has(a[aria-current="page"]) .drop__trigger::after{ background:var(--gold); }
.header.is-solid .drop__caret{ opacity:.5; }

.header.is-solid .lang__trigger{ color:var(--ink); border:0; background:none; }
.header.is-solid .lang__trigger:hover{ color:var(--green); background:none; }

.header.is-solid .burger{
  color:var(--ink); background:none;
  border:1px solid rgba(6,50,20,.16);
}
.header.is-solid .burger:hover{ background:rgba(6,50,20,.04); border-color:var(--green); }

/* ---------------------------------------------------------------
   Menu open: the overlay behind the header is dark green, so the
   header returns to its over-image colours however far the page was
   scrolled — including out of the new white state.
   --------------------------------------------------------------- */
body.is-locked .header,
body.is-locked .header.is-solid{
  background:none; border-bottom-color:transparent; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.is-locked .header__logo-img--white,
body.is-locked .header.is-solid .header__logo-img--white{ opacity:1; }
body.is-locked .header__logo-img--colour,
body.is-locked .header.is-solid .header__logo-img--colour{ opacity:0; }
body.is-locked .header.is-solid .header__nav a,
body.is-locked .header.is-solid .drop__trigger,
body.is-locked .header.is-solid .lang__trigger{ color:var(--o3-cream); }
body.is-locked .header.is-solid .burger{
  color:var(--o3-cream); border-color:var(--o3-border); background:none;
}


/* ==================================================================================
   ██ DEVICE PASS ██
   One final layer, site-wide. Everything above it was written breakpoint by
   breakpoint as each page was built, which left three things unresolved on
   anything smaller than a laptop:

     · the hero was sized in `vh`, so on a phone it was measured against the
       viewport with the browser chrome hidden and never actually filled the
       screen the user was looking at;
     · photography kept its desktop aspect ratios all the way down, so a
       portrait frame at full column width came out ~440px tall on a 390px
       phone and every media block ate a screen and a half;
     · 768–1023px had no treatment of its own. It inherited the phone's
       one-column stacks with the desktop's type sizes, which is why tablets
       read as a blown-up phone.

   This layer resolves those three, normalises the spacing scale, and puts the
   motion back on touch devices that the earlier `hover:none` blocks had
   stripped out. It is last in the file on purpose: it is meant to win.
   ================================================================================== */

/* ---------------------------------------------------------------
   1 · Spacing scale
   The old scale bottomed out at an 18px gutter (15px under 360px),
   which is why everything felt pressed against the glass. The floor
   is now 24px, and the section rhythm shortens on a phone instead of
   holding the desktop's 64px minimum.
   --------------------------------------------------------------- */
:root{
  /* the desktop end of both scales is deliberately unchanged: 5vw and 9vw
     resolve to the same 72px and 120px they always did on a laptop. Only the
     floors move, and only the floors were the problem. */
  --gutter:    clamp(24px, 5vw, 80px);
  --section-y: clamp(56px, 9vw, 120px);
  --gap-media: clamp(10px, 1.4vw, 18px);   /* between two photographs */
}
@media (max-width:1023px){
  :root{ --gutter:clamp(28px, 4.4vw, 44px); --section-y:clamp(60px, 7.4vw, 84px); }
}
@media (max-width:767px){
  :root{ --gutter:24px; --section-y:56px; }
}
@media (max-width:479px){
  :root{ --gutter:22px; --section-y:52px; }
}
@media (max-width:359px){
  :root{ --gutter:18px; --section-y:46px; }
}

/* Full-bleed grids that set their own padding have to track the same value */
.galeria__grid{ padding-inline:var(--gutter); }


/* ---------------------------------------------------------------
   2 · The hero fills the screen, at every size
   `vh` on iOS and Android is the *large* viewport: the height the page
   would have with the URL bar collapsed. Sizing the hero at 92vh/96vh
   against it meant the hero was short of the screen by the height of
   the chrome plus its own shortfall. `dvh` is the live visible height,
   so the hero covers the screen whatever the chrome is doing, and the
   contents are sized against `svh` — the smallest the viewport ever
   gets — so nothing is ever cut at the other end of that range.
   --------------------------------------------------------------- */
.hero,
.hero--centred{ min-height:100svh; }
@supports (min-height:100dvh){
  .hero,
  .hero--centred{ min-height:100dvh; }
}

/* the hero is a column: content takes the slack, the fact bar sits on the
   floor of the screen. Height then comes from the viewport, not from the
   sum of two paddings that happened to overshoot it. */
.hero--centred{
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:var(--headerH);
}
.hero--centred .hero__inner{
  flex:1 1 auto; margin:0 auto; padding:clamp(20px,4vh,48px) var(--gutter) clamp(24px,4vh,64px);
  display:flex; flex-direction:column; align-items:center;
  /* desktop keeps option-3's bottom-anchored composition; the flexible box
     just replaces `margin-top:auto` with something that can also shrink */
  justify-content:flex-end;
}
.hero--centred .hero__bar{ flex:0 0 auto; }
/* below the laptop there is no room to hold the block down against the bar
   and still leave the top of the screen to the photograph: it centres in
   whatever the fact bar and the header have left */
@media (max-width:1023px){
  .hero--centred .hero__inner{ justify-content:center; }
}

/* The parallax now runs on phones too (see §7), and a translate on a media
   box pinned at inset:0 drags its own edge into frame. The slack is added
   only where the behaviour is new: the laptop hero is left exactly as it
   was drawn. */
@media (max-width:1023px){
  .hero__media,
  .hero--centred .hero__media{ inset:-9% 0; }
}

@media (max-width:1023px){
  /* was 92vh */
  .hero{ min-height:100svh; }
  @supports (min-height:100dvh){ .hero{ min-height:100dvh; } }

  /* the fact bar stays a row here: at 768px three facts and the scroll cue
     fit across it comfortably, and stacking them cost 200px of the screen */
  .hero--centred .hero__bar{ flex-direction:row; align-items:stretch; }
  .hero--centred .hero__facts{ flex-direction:row; flex:1; }
  .hero--centred .hero__facts li{
    flex:1; padding:20px 20px 20px 0; border-top:0;
  }
  .hero--centred .hero__facts li + li{
    border-left:1px solid var(--o3-border-soft); border-top:0; padding-left:20px;
  }
  .hero--centred .hero__facts strong{ font-size:28px; }
  .hero--centred .hero__facts span{ font-size:11px; letter-spacing:.09em; }
  .hero--centred .hero__scroll{
    align-self:stretch; padding:20px 0 20px 24px;
    border-left:1px solid var(--o3-border-soft); border-top:0;
  }
  .hero--centred .hero__lead{ font-size:17px; margin:22px auto 30px; max-width:52ch; }
}

@media (max-width:767px){
  /* was `padding-top:108px; min-height:96vh`, which stacked on top of the
     inner's own 96px and pushed the hero to 872px on a 667px screen */
  .hero{ padding-top:0; }
  .hero--centred{ padding-top:var(--headerH); }
  .hero--centred .hero__inner{ padding:clamp(16px,3vh,32px) var(--gutter) clamp(18px,3vh,32px); }
  .hero--centred .hero__content{ max-width:none; }
  .hero--centred .hero__title{ font-size:clamp(1.9rem, 9.2vw, 2.6rem); letter-spacing:-.022em; }
  .hero--centred .hero__lead{
    font-size:clamp(.9375rem, 3.9vw, 1rem); line-height:1.55;
    margin:clamp(14px,2.4vh,22px) auto clamp(18px,3vh,26px); max-width:38ch;
  }
  .hero .eyebrow--rule{ font-size:11px; margin-bottom:clamp(12px,2vh,20px); }
  .hero--centred .hero__actions{ flex-direction:column; align-self:stretch; gap:10px; }
  .hbtn{ width:100%; justify-content:space-between; padding:15px 20px; font-size:16px; }
  .hlink{ align-self:center; }

  /* three facts across the foot of the screen. Stacked, they were 277px of a
     667px phone; across, they are 88px and still legible. */
  .hero--centred .hero__bar{ flex-direction:row; padding:0 var(--gutter); }
  .hero--centred .hero__facts{ display:flex; flex-direction:row; flex:1; }
  .hero--centred .hero__facts li{
    flex:1 1 0; min-width:0; padding:14px 10px 16px 0; border-top:0;
  }
  .hero--centred .hero__facts li + li{
    border-left:1px solid var(--o3-border-soft); border-top:0; padding-left:10px;
  }
  .hero--centred .hero__facts strong{ font-size:clamp(1.25rem,5.6vw,1.6rem); }
  .hero--centred .hero__facts span{
    font-size:clamp(.5625rem,2.5vw,.6875rem); letter-spacing:.06em; line-height:1.3;
  }
  /* the cue is the one thing a touch device does not need told to it, and it
     was worth 44px of the fold */
  .hero--centred .hero__scroll{ display:none; }
  .hero .vctrl{ top:calc(var(--headerH) + 14px); width:40px; height:40px; }
}

/* Landscape phones: there is no screen left to fill, so the hero drops the
   full-height rule rather than squeezing the type to nothing. */
@media (max-height:520px) and (orientation:landscape){
  .hero,.hero--centred{ min-height:0; }
  .hero--centred .hero__inner{ padding-block:28px 24px; }
  .hero--centred .hero__title{ font-size:clamp(1.6rem,5vw,2.2rem); }
  .hero--centred .hero__lead{ margin-block:12px 18px; font-size:15px; }
  .hero--centred .hero__actions{ flex-direction:row; }
  .hbtn{ width:auto; }
}


/* ---------------------------------------------------------------
   3 · Photography that fits the screen it is on
   Two rules do most of the work. Every framed image gets a ceiling
   expressed in `svh`, so a portrait crop can never be taller than
   roughly two thirds of the phone in front of it, and the ratios
   themselves step towards landscape as the column narrows.
   `object-fit:cover` is already on all of them, so capping the box
   re-crops rather than distorts.
   --------------------------------------------------------------- */
@media (max-width:1023px){
  .frame,.shell,.crop__media,.galeria__item,.perto__shot,.pillar__shot,
  .exploracao__media > .frame,.sustent__figure{
    max-height:72svh;
  }
  .frame--tall{ aspect-ratio:4/5; }
  .shell--tall{ aspect-ratio:4/5; }
  .crop__media{ aspect-ratio:4/5; }
}

@media (max-width:767px){
  .frame,.shell,.crop__media,.galeria__item,.perto__shot,.pillar__shot,
  .sustent__figure{
    max-height:64svh;
  }
  /* portrait at full phone width is the single biggest source of the
     "everything is enormous" feeling: 4/5 of 344px is 430px of screen */
  .frame--tall,.shell--tall,.shell--portrait,.crop__media{ aspect-ratio:1/1; }
  .frame--wide,.shell--wide{ aspect-ratio:16/10; }
  .shell--band{ aspect-ratio:16/9; }
  .sustent__figure{ aspect-ratio:4/3; }
}

@media (max-width:479px){
  .frame,.shell,.crop__media,.galeria__item,.perto__shot,.pillar__shot,
  .sustent__figure{
    max-height:58svh;
  }
  /* the 479 tier further up puts .shell--tall/--portrait back to 4/5 */
  .frame--tall,.shell--tall,.shell--portrait,.crop__media{ aspect-ratio:1/1; }
}


/* ---------------------------------------------------------------
   4 · Paired photographs
   The homepage's Sobre nós block and every crop block on produtos.html
   are the same composition: a lead photograph with a second, smaller
   one seated over its corner. Below 1024px the inset was unpinned and
   left to fall wherever it landed — on the homepage as a short square
   bottom-aligned against a taller portrait (ragged), on produtos as a
   second full-width portrait under the first (two screens of photo for
   one crop). Both now become one deliberate 2-up that shares a
   baseline and a height.
   --------------------------------------------------------------- */

/* The pair is sized as one box. Giving the row its height from the wrapper's
   own aspect-ratio, rather than letting the taller of the two photographs
   set it, is what makes the two crops share a top and a bottom edge — which
   is the whole difference between "the two images sit together nicely" and
   the ragged version in the review. */
@media (max-width:1023px){
  .exploracao__media,
  .cropx__media,
  .mstack{
    display:grid;
    /* `fr` is a <flex>, which takes neither calc() nor a custom property, so
       the split is written out at each step rather than driven by a token */
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    gap:var(--gap-media);
    align-items:stretch;
    aspect-ratio:2/1;
    max-width:none; padding-bottom:0;
    position:relative; top:auto;
  }
  /* every child fills its cell; none of them dictates the height */
  .exploracao__media > .frame,
  .cropx__media > .shell,
  .mstack > *{
    height:100%; min-height:0; margin:0; aspect-ratio:auto; max-height:none;
  }
  /* the second frame stops being an overlay and becomes the right-hand cell */
  .exploracao__media > .frame--inset,
  .cropx__media > .cropx__inset{
    position:static; inset:auto; width:auto; margin-top:0;
    border:0; outline:0; box-shadow:none;
  }
  .cropx--flip .cropx__inset{ left:auto; right:auto; }
}

@media (max-width:767px){
  /* narrower column, so the box gets taller in proportion or the two crops
     come out as letterbox slivers */
  .exploracao__media,
  .cropx__media,
  .mstack{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); aspect-ratio:7/5; }
}

@media (max-width:359px){
  .exploracao__media,
  .cropx__media,
  .mstack{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); aspect-ratio:5/4; }
}

/* ---------------------------------------------------------------
   5 · Galeria
   Four columns held all the way to 768px, which made 165px tiles on a
   tablet; on a phone it dropped to two columns of identical squares,
   about 1500px of the same shape in a row. Both tiers now keep the
   desktop's alternating rhythm at a size that suits the screen.
   --------------------------------------------------------------- */
/* At three columns the desktop wall's alternating 4/3 and 1/1 tiles stop
   landing in the same place on every row, and `align-items:center` then
   staggers them into a gappy, ragged block. The tablet wall is uniform
   instead, with the portrait phone footage held as a two-row anchor in the
   first column so the grid still has a shape to it. */
@media (min-width:768px) and (max-width:1023px){
  .galeria__grid{
    grid-template-columns:repeat(3,1fr); gap:var(--gap-media);
    align-items:stretch;
  }
  .galeria__item,
  .galeria__item--tall{ aspect-ratio:4/3; }
  .galeria__item--video{
    grid-row:span 2; aspect-ratio:auto; max-height:none;
  }
}
/* ---------------------------------------------------------------
   5b · The composed wall on a-exploracao.html
   Thirteen photographs. Two across on a phone that is 1,500px of
   vertical scroll between one paragraph and the next; three across
   on a tablet at 4/5 is not much better. It gets the same rail as
   the homepage wall below 768px, and uniform columns above it.
   --------------------------------------------------------------- */
@media (min-width:768px) and (max-width:1023px){
  .mosaic{
    grid-template-columns:repeat(3,1fr); grid-auto-rows:auto;
    gap:var(--gap-media);
  }
  .mosaic__item{ grid-column:auto; grid-row:auto; aspect-ratio:4/3; }
  .mosaic__item--video{ aspect-ratio:3/4; grid-row:span 2; }
  .mosaic__item:last-child:nth-child(odd){ grid-column:auto; aspect-ratio:4/3; }
}

@media (max-width:767px){
  .mosaic{
    display:flex; grid-template-columns:none; grid-auto-rows:auto; width:auto;
    gap:var(--gap-media);
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none;
    margin-inline:calc(-1 * var(--gutter));
    padding:4px var(--gutter) 28px;
  }
  .mosaic::-webkit-scrollbar{ display:none; }
  .mosaic__item,
  .mosaic__item:last-child:nth-child(odd){
    flex:0 0 min(62vw,300px); grid-column:auto; grid-row:auto;
    aspect-ratio:3/4; scroll-snap-align:center;
  }
  .mosaic__item--video{ flex-basis:min(58vw,280px); }
  .galeria-sec .galeria__hint{ display:flex; padding-inline:0; }
}

/* the swipe hint: it only ever shows where the wall is a rail */
.galeria__hint{
  display:none; align-items:center; gap:9px;
  margin-top:14px; padding-inline:var(--gutter);
  font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted);
}
.galeria__hint::after{
  content:""; width:22px; height:1px; background:currentColor;
  animation:hintslide 2.4s var(--ease) infinite;
}
@keyframes hintslide{ 0%,100%{ transform:translateX(0); opacity:.4 } 50%{ transform:translateX(7px); opacity:1 } }
@media (prefers-reduced-motion: reduce){ .galeria__hint::after{ animation:none; } }

/* On a phone the wall was eight tiles stacked two across: about 700px of
   identical squares that the reader has to scroll past to reach the next
   section, and the single loudest source of the "everything is enormous"
   note in the review. It becomes a rail, which is the same move the
   interior pages already make with .deck — a screenful of one photograph
   at a time, swiped, with the next one showing at the edge so it is
   obvious there are more. Tap still opens the lightbox. */
@media (max-width:767px){
  .galeria__grid{
    display:flex; grid-template-columns:none; width:auto; max-width:none;
    gap:var(--gap-media);
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none;
    /* setting overflow-x also makes overflow-y computed `auto`, so the rail
       needs room for the 24px the reveal starts each tile below its resting
       position or a vertical scrollbar flashes on first paint */
    padding:4px var(--gutter) 28px;
    /* the mask from §7 lives on .produz__viewport; this rail wants its own */
    -webkit-mask-image:none; mask-image:none;
  }
  .galeria__grid::-webkit-scrollbar{ display:none; }
  .galeria__item{
    flex:0 0 min(62vw, 300px); scroll-snap-align:center;
    aspect-ratio:3/4; max-height:none;
  }
  .galeria__item--tall{ aspect-ratio:3/4; }
  /* the phone footage keeps the shape it was filmed in */
  .galeria__item--video{ flex-basis:min(58vw, 280px); }

  .galeria__head{ align-items:flex-start; gap:14px; }
  .galeria__hint{ display:flex; }
}



/* ---------------------------------------------------------------
   6 · 768–1023px, a tablet tier of its own
   The single-column stacks are right for this width; what was wrong
   was leaving desktop type and desktop-width prose in them, so a line
   ran 100+ characters and every heading was a laptop heading. Text
   columns get a measure, media gets a ceiling, and the type steps down
   one notch short of the phone's.
   --------------------------------------------------------------- */
@media (min-width:768px) and (max-width:1023px){
  body{ font-size:1.03125rem; }
  .h2{ font-size:clamp(1.9rem, 4vw, 2.4rem); }
  .h3{ font-size:clamp(1.3rem, 2.6vw, 1.6rem); }
  .lead,.cropx__lede,.opener__lead{ font-size:1.0625rem; }

  /* prose never runs the full 1023px */
  .exploracao__text,.mercado__text,.sustent__text,.local__text,
  .cropx__text,.recols__lead,.band__intro,.numeros__note,.deperto__intro{
    max-width:62ch;
  }
  .h2,.lead{ max-width:24ch; }
  .lead,.band__intro{ max-width:60ch; }
  .h2{ max-width:none; }

  /* two-up wherever four-up was still being forced */
  .why,.why--2{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .perto{ grid-template-columns:repeat(2,1fr); }
  .cropband__grid{ grid-template-columns:repeat(3,1fr); }
  .cta__cards{ grid-template-columns:repeat(2,1fr); }
  .pillgrid{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__brand{ grid-column:1 / -1; }

  /* the map sits alone on its row here, so it is allowed to be bigger than
     the phone's; what it does not need is the desktop's 96px column gap */
  .mz{ max-width:360px; }
  .local__map{ gap:18px; }
  .local__grid{ gap:clamp(28px,4vw,44px); }

  /* the products carousel: two and a bit cards in view rather than four */
  .ccard{ width:clamp(240px,34vw,300px); }
}


/* ---------------------------------------------------------------
   7 · Motion on touch
   `initParallax` and `initShine` both returned early under 768px and
   the `hover:none` block above cancelled every image zoom, so a phone
   got the fade-ups and nothing else. Hover effects genuinely do not
   belong on touch — these are their scroll-driven equivalents, which
   do.
   --------------------------------------------------------------- */

/* the scroll-linked zoom that initZoom() drives runs on every device; the
   hover:none block was cancelling the transform it writes */
@media (hover:none){
  .js [data-zoom] > img,
  .js [data-zoom] > video{ transform:scale(var(--z,1)); transition:transform .25s linear; }
  .js .shell[data-zoom] > img{ transform:scale(var(--z,1)); }
}

/* a tile that has just arrived settles rather than simply appearing */
.js .galeria__item{ transition:transform .6s var(--ease), box-shadow .6s var(--ease); }
.js .galeria__item.is-in{ transform:none; }
@media (hover:none){
  .galeria__item:active,.ccard:active,.perto__card:active,.pillmini:active{
    transform:scale(.985); transition:transform .12s var(--ease);
  }
}

/* the carousel gets an edge fade on touch so the row reads as continuing
   past the screen instead of being cut off */
@media (max-width:1023px){
  .produz__viewport{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  }
}

/* the gold rule under a section eyebrow draws itself in on arrival, which
   is one effect that costs nothing on a phone */
.eyebrow__idx::after{ transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease) .15s; }
.reveal.is-in .eyebrow__idx::after,
.eyebrow.is-in .eyebrow__idx::after{ transform:scaleX(1); }
html:not(.js) .eyebrow__idx::after{ transform:none; }

/* directional reveals are flattened on a phone: 26px of horizontal travel in
   a 24px gutter reads as a layout bug, not as motion */
@media (max-width:767px){
  .reveal--l,.reveal--r{ transform:translateY(20px); }
  .reveal--blur{ filter:blur(6px); }
}


/* ---------------------------------------------------------------
   8 · Media loading
   Every photograph below the fold was `loading="lazy"` with a wipe or
   fade starting the moment it entered view, so the frame animated open
   over an image that had not arrived: an empty box, then a pop. The
   frame now holds a tinted placeholder that breathes while the file is
   in flight, the image fades over it once it has actually decoded, and
   script.js starts the fetch roughly a screen early so in most cases
   the fade is all anyone sees.
   --------------------------------------------------------------- */
.frame,.shell,.galeria__item,.crop__media,.cropx__media > *,
.perto__shot,.pillar__shot,.sustent__figure,.hero__media,.cta{
  background-color:var(--surface-alt);
}
.cta,.hero__media{ background-color:var(--ink); }

.js img.media{
  opacity:0;
  transition:opacity .55s var(--ease);
}
.js img.media.is-ready{ opacity:1; }
/* cached images are marked ready before paint and must not fade at all */
.js img.media.is-instant{ opacity:1; transition:none; }

.js .is-holding{ position:relative; }
.js .is-holding::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(100deg, transparent 20%, rgba(255,255,255,.42) 50%, transparent 80%),
    var(--tint-soft);
  background-size:220% 100%, 100% 100%;
  animation:mediahold 1.5s var(--ease) infinite;
}
@keyframes mediahold{ from{ background-position:-60% 0, 0 0 } to{ background-position:160% 0, 0 0 } }
/* dark frames get a dark hold, not a pale one flashing on a green ground */
.js .band .is-holding::before,
.js .cta.is-holding::before,
.js .season .is-holding::before{ background-image:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.14) 50%, transparent 80%), linear-gradient(var(--green-dark),var(--green-dark)); }

/* the wipe waits for the file: an empty frame wiping open is the pop the
   client is describing, and it is worse than no effect at all */
.js .reveal--wipe img{ clip-path:inset(0 0 100% 0); }
.js .reveal--wipe.is-in img.is-ready,
.js .reveal--wipe.is-in img.is-instant,
.js .reveal--wipe.is-in img:not(.media){ clip-path:inset(0 0 0 0); transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .is-holding::before{ animation:none; }
  .js img.media{ opacity:1 !important; transition:none; }
}


/* ---------------------------------------------------------------
   9 · Touch targets and small ergonomics
   --------------------------------------------------------------- */
@media (max-width:1023px){
  .footer__col a,.menu__sub a,.local__legend span{ min-height:44px; display:flex; align-items:center; }
  .footer__col a{ padding-block:0; }
  .cbtn{ width:48px; height:48px; }
  .burger{ min-width:44px; min-height:44px; }
  .lightbox__nav,.lightbox__close{ min-width:48px; min-height:48px; }
}
@media (max-width:767px){
  /* the lightbox image had 66svh and the two buttons under it, which on a
     short phone put the buttons off the bottom */
  .lightbox__figure img{ max-height:58svh; }
  /* long addresses and emails must wrap rather than widen the page */
  .ccontact a,.ccontact p,.footer__col--contact a,.cta__meta{ overflow-wrap:anywhere; }
  /* the province tooltip is anchored to the pointer and has none on touch */
  .mzlabel{ display:none; }
}

/* iOS: a form control under 16px makes Safari zoom the page on focus, and it
   does not zoom back out */
@media (max-width:1023px){
  .field input,.field textarea,.field select,
  input,textarea,select{ font-size:16px; }
}


/* ---------------------------------------------------------------
   10 · Hero footage, portrait framing
   NewestHero is a five-shot montage in 16:9. On a portrait phone
   `object-fit:cover` shows a slice about a quarter of the frame
   wide, and dead centre is the wrong quarter: the two aerials put
   the harvester at roughly a third across, so centring cut it in
   half against the left edge. Three of the five shots are centred
   subjects and barely move at 42%, which is far enough to hold the
   harvester whole.
   --------------------------------------------------------------- */
@media (max-width:1023px) and (orientation:portrait){
  .hero__video,
  .hero__poster{ object-position:42% center; }
}