/* =========================================================================
   Nindi Holdings, Option C

   The structure of Option A on the palette and the type of Option B.
   Dark ground, one red, Schibsted Grotesk over Newsreader: the serif carries
   the prose and the headlines, the grotesk carries the labels, the nav and
   the buttons. Nothing in the layout moved.
   ========================================================================= */

:root {
  /* Ground and type, from Option B. The page is dark, so the two alpha
     families that used to mean "ink on paper" and "paper on ink" now both
     resolve to light on dark. */
  --paper:   #0E0D0C;   /* the ground                                    */
  --paper-2: #1C1917;   /* raised surface: the figures band, presence     */
  --ink:     #F6F4F1;   /* the type, and any inverted fill               */
  --red:     #DA1E25;
  --red-dk:  #B0161C;

  --i-70: rgba(246, 244, 241, 0.72);
  --i-55: rgba(246, 244, 241, 0.55);
  --i-40: rgba(246, 244, 241, 0.40);
  --i-20: rgba(246, 244, 241, 0.20);
  --i-12: rgba(246, 244, 241, 0.14);
  --i-08: rgba(246, 244, 241, 0.10);

  --w-70: rgba(246, 244, 241, 0.72);
  --w-55: rgba(246, 244, 241, 0.55);
  --w-40: rgba(246, 244, 241, 0.40);
  --w-20: rgba(246, 244, 241, 0.20);
  --w-12: rgba(246, 244, 241, 0.14);

  --f:  'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fi: 'Newsreader', Georgia, 'Times New Roman', serif;

  --pad: clamp(1.25rem, 4vw, 4rem);
  --max: min(1560px, 91vw);
  --gap: clamp(4rem, 7.4vw, 7.2rem);
  --head: 76px;

  --out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--fi);
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* clip, unlike hidden, does not make the body a scroll container — which is
   what a sticky stage inside it needs. */
@supports (overflow: clip) { body { overflow-x: clip; } }

img, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
ol, ul { list-style: none; }

:focus-visible { outline: 1.5px solid var(--red); outline-offset: 4px; }

/* the inline flag symbols, parked out of the flow */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip {
  position: fixed; top: -80px; left: var(--pad); z-index: 90;
  padding: 12px 18px; background: var(--ink); color: var(--paper); font-size: 14px;
}
.skip:focus { top: 14px; }

.in { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.sec { padding-block: var(--gap); }
.sec--work { padding-bottom: clamp(3rem, 5vw, 5rem); }

.sec--setores { padding-top: clamp(3.5rem, 7vw, 7rem); }

/* =========================================================== type ===== */

/* Eyebrow: the small tabular label that opens every section. */
.eyebrow {
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--i-55);
}
.sec-num {
  font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.22em; font-variant-numeric: tabular-nums;
  color: var(--i-40);
}

/* The display face is set light and very tight; italics are the one place
   the brand red is allowed to appear. */
.display {
  font-size: clamp(2rem, min(4.8vw, 7.4vh), 5rem);
  font-weight: 300; line-height: 1; letter-spacing: -0.04em;
}
.head-title {
  font-size: clamp(1.8rem, 3.8vw, 3.9rem);
  font-weight: 300; line-height: 1.04; letter-spacing: -0.032em;
  max-width: 26ch; text-wrap: balance;
  margin-bottom: clamp(2.4rem, 4.6vw, 4rem);
}
.head-title--big { font-size: clamp(2.1rem, 4.4vw, 4.5rem); letter-spacing: -0.038em; max-width: 14ch; }

.display em, .head-title em, .say__lead em {
  font-family: var(--fi); font-style: italic; font-weight: 300;
  color: var(--red); letter-spacing: -0.012em;
}
.sec--pres .head-title em { color: #EE6A6F; }

.col-label {
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--i-40);
}

p { font-weight: 300; }

.arrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 0.95rem; font-weight: 400; letter-spacing: -0.005em;
  padding-bottom: 3px; border-bottom: 1px solid var(--i-20);
  transition: border-color 0.3s var(--out), color 0.3s var(--out);
}
.arrow::after {
  content: ""; width: 7px; height: 7px; flex: none;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.4s var(--expo);
}
.arrow:hover { border-bottom-color: var(--red); color: var(--red); }
.arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.arrow--sm { font-size: 0.86rem; }


.btn {
  display: inline-block; padding: 17px 34px;
  background: var(--ink); color: var(--paper);
  font-size: 0.88rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1;
  transition: background-color 0.3s var(--out);
}
.btn:hover { background: var(--red); }
.btn[disabled] { opacity: 0.5; }

/* ======================================================= reveals ====== */

.r, .r-fade {
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity 0.9s var(--out), transform 0.9s var(--out);
  transition-delay: calc(var(--i, 0) * 0.08s);
}
.r-fade { transform: none; transition: opacity 1.1s var(--out); }
.r.on, .r-fade.on { opacity: 1; transform: none; }
.d1 { transition-delay: 0.1s; } .d2 { transition-delay: 0.2s; } .d3 { transition-delay: 0.3s; }

/* Headlines run at a line-height near 1, so a mask only one line tall cuts
   off descenders (the ç, p, g). The padding gives them room and the negative
   margin hands that room back, so the layout does not move. */
.mask { display: block; overflow: hidden; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.mask--inline { display: inline-block; vertical-align: top; }
/* A line mask is a block, so a headline too long for a phone wraps inside it
   instead of being shrink-to-fit and then clipped by the mask's own overflow.
   Only the word masks, which sit beside each other, stay inline. */
.mask > span {
  display: block; transform: translate3d(0, 125%, 0);
  transition: transform 1.05s var(--expo);
  transition-delay: calc(var(--i, 0) * 0.03s);
  will-change: transform;
}
.mask--inline > span { display: inline-block; }
.on .mask > span, .mask.on > span { transform: none; }

.r-plate { overflow: hidden; }
.r-plate img {
  transform: scale(1.08);
  clip-path: inset(0 0 100% 0);
  transition: transform 1.5s var(--expo), clip-path 1.4s var(--expo);
}
.r-plate.on img { transform: none; clip-path: inset(0 0 0 0); }

/* Prose that lights up word by word as it crosses the middle of the screen. */
[data-word-reveal] .w { color: var(--i-12); transition: color 0.45s var(--out); }
[data-word-reveal] .w.lit { color: var(--ink); }
.sec--pres [data-word-reveal] .w { color: var(--w-12); }
.sec--pres [data-word-reveal] .w.lit { color: var(--ink); }

/* ======================================================== header ====== */

.head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background-color 0.4s var(--out), border-color 0.4s var(--out);
  border-bottom: 1px solid transparent;
}
.head.is-stuck {
  background: rgba(246, 244, 241, 0.84);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--i-08);
}

/* Three zones. The nav is centred on the viewport rather than in whatever
   space the mark and the actions happen to leave, so it stays put as the
   labels change length between Portuguese and English. */
.head__in {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(12px, 2vw, 26px);
  height: var(--head);
  width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad);
  transition: height 0.4s var(--out);
}
/* the bar tightens once the page is moving */
.head.is-stuck .head__in { height: 60px; }

.head__logo { position: relative; display: block; width: clamp(88px, 8.4vw, 104px); }
.head__logo img { width: 100%; transition: opacity 0.3s var(--out); }
.head__logo .lw { position: absolute; inset: 0; opacity: 0; }

.nav { display: flex; justify-content: center; gap: clamp(14px, 1.9vw, 30px); }
.nav a {
  position: relative; padding: 9px 0;
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--i-55);
  transition: color 0.28s var(--out);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.42s var(--expo);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }

.head__right { display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 1.6vw, 20px); }

/* The language control, set the way agrolichimua.com sets it: no pill, no
   border, no fill — a flag, two letters and a caret in the same small caps as
   the nav, and a square-cornered panel under it. */
.lang { position: relative; }
.lang__btn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border: 0; background: none;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; color: var(--i-55);
  transition: color 0.28s var(--out);
}
.lang__btn:hover { color: var(--ink); }
.lang__flag {
  display: block; width: 20px; height: 13px; flex: none;
  border-radius: 0; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(14, 13, 12, 0.16);
}
.lang__flag svg { width: 100%; height: 100%; object-fit: cover; }
.lang__caret {
  width: 5px; height: 5px; margin-left: 1px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.28s var(--out);
}
.lang__btn[aria-expanded="true"] .lang__caret { transform: translateY(1px) rotate(225deg); }

.lang__menu {
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 5; min-width: 196px;
  padding: 5px 0; background: var(--paper); border: 1px solid var(--i-12); border-radius: 0;
  box-shadow: none;
  font-size: 0.86rem;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.24s var(--out), transform 0.24s var(--expo);
}
.lang__menu.is-open { opacity: 1; transform: none; }
.lang__item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 16px; border-radius: 0; cursor: pointer;
  color: var(--i-70);
}
.lang__item:hover, .lang__item:focus-visible { background: var(--i-08); color: var(--ink); }
.lang__item.is-on { color: var(--ink); }

/* Contacto is the one action in the bar, so it is drawn as one */
.cta-link {
  padding: 9px 17px; border: 1px solid var(--i-20); border-radius: 999px;
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--i-70);
  transition: color 0.28s var(--out), border-color 0.28s var(--out), background-color 0.28s var(--out);
}
.cta-link:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* over the three ink sections the whole bar flips to light */
.head.is-dark .head__logo .lc { opacity: 0; }
.head.is-dark .head__logo .lw { opacity: 1; }
.head.is-dark .nav a { color: var(--w-55); }
.head.is-dark .nav a:hover { color: var(--paper); }
.head.is-dark .lang__btn { color: var(--w-55); }
.head.is-dark .lang__btn:hover { color: var(--paper); }
.head.is-dark .lang__flag { box-shadow: inset 0 0 0 1px rgba(246, 244, 241, 0.24); }
.head.is-dark .cta-link { color: var(--w-70); border-color: var(--w-20); }
.head.is-dark .cta-link:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.head.is-dark .burger span[aria-hidden] { background: var(--paper); }
.head.is-dark.is-stuck { background: rgba(14, 13, 12, 0.8); border-bottom-color: var(--w-12); }

/* Both rules sit on the same line and are pushed apart when closed, so opening
   is a pure rotation and the cross always meets in the middle. The selectors
   have to be [aria-hidden] rather than :first-of-type — the first span in the
   button is the screen-reader label. */
.burger { position: relative; display: none; width: 34px; height: 34px; }
.burger span[aria-hidden] {
  position: absolute; left: 5px; right: 5px; top: 16px; height: 1px;
  background: var(--ink);
  transition: transform 0.34s var(--expo);
}
.burger span[aria-hidden]:nth-of-type(2) { transform: translateY(-3.5px); }
.burger span[aria-hidden]:nth-of-type(3) { transform: translateY(3.5px); }
.burger[aria-expanded="true"] span[aria-hidden]:nth-of-type(2) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span[aria-hidden]:nth-of-type(3) { transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--head) + 30px) var(--pad) 40px;
  background: var(--paper);
}
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
  display: flex; align-items: baseline; gap: 18px;
  padding: 15px 0; border-top: 1px solid var(--i-08);
  font-size: clamp(1.55rem, 6vw, 2.2rem); font-weight: 300; letter-spacing: -0.035em;
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.6s var(--expo), transform 0.7s var(--expo), color 0.25s var(--out);
  transition-delay: calc(var(--i) * 0.05s + 0.05s);
}
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu__nav a:hover { color: var(--red); }
.menu__no { font-size: 0.6rem; letter-spacing: 0.22em; color: var(--i-40); font-weight: 500; }
.menu__foot { margin-top: 34px; font-size: 0.9rem; color: var(--i-55); }

/* ========================================================== hero ====== */

/* One screen, one film. The montage is held edge to edge behind the type and
   the type is set over it, the way Option B sets its headline over its
   photograph. Everything that makes that legible is in the grade below, not
   in the film. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  padding-top: var(--head);
  background: var(--paper);
}

/* The poster carries the first frame from the first paint; the film fades in
   over it once it can actually run, so there is never a black hole in the
   page while it buffers and nothing at all is fetched when it is not wanted. */
.hero__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.58; }
.hero__bg img,
.hero__bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__v { opacity: 0; transition: opacity 1.4s var(--out); }
.hero__v.is-on { opacity: 1; }

/* The grade. The foot of the frame is taken almost to the page colour, so the
   standfirst and the rule above it sit on ink rather than on whatever the
   film is showing; the middle is left open so the montage still reads as a
   moving picture rather than as a texture. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(118% 92% at 8% 98%, rgba(14, 13, 12, 0.90), transparent 62%),
    linear-gradient(to top,
      rgba(14, 13, 12, 0.94) 0%,
      rgba(14, 13, 12, 0.34) 48%,
      rgba(14, 13, 12, 0.70) 100%);
}

.hero__in {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: 0 var(--pad) clamp(2.6rem, 7vh, 5rem);
}

.hero__eyebrow {
  margin-bottom: clamp(1.1rem, 2.4vw, 1.9rem);
  font-family: var(--f);
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--w-55);
}

/* Set larger than the display face runs anywhere else on the page: this is
   the one place it has the whole screen to itself. */
.hero .display {
  margin-bottom: clamp(2rem, 4.6vw, 3.4rem);
  font-size: clamp(2.7rem, min(9vw, 13vh), 7.4rem);
  line-height: 0.94; letter-spacing: -0.045em;
}

/* ---- the line under the headline ---- */

.hero__foot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: clamp(1rem, 3vw, 3rem); align-items: end;
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--w-12);
}
.hero__p {
  max-width: 52ch; color: var(--w-70);
  font-size: clamp(0.9rem, 1vw, 1rem); line-height: 1.7;
}

/* A single rule at the foot of the screen with the brand red running down it:
   the only thing on the page that says there is more below without using a
   word to say it. */
.hero__cue {
  position: absolute; left: 50%; bottom: 0; z-index: 2;
  width: 1px; height: clamp(34px, 5vh, 54px);
  background: var(--w-12); overflow: hidden;
}
.hero__cue span {
  position: absolute; inset: 0; display: block; background: var(--red);
  animation: cue 2.6s var(--out) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* With motion turned down the film is never fetched, so the poster stands on
   its own as a plain photograph, and the cue holds still. */
@media (prefers-reduced-motion: reduce) {
  .hero__cue span { animation: none; transform: none; opacity: 0.5; }
}

/* On a tall screen, a portrait monitor or a maximised 4K window, the hero is
   still exactly one screen, because a film crops to whatever shape it is
   given. Only the type stops growing. */
@media (min-height: 1150px) {
  .hero .display { font-size: clamp(2.7rem, 9vw, 7.4rem); }
}

/* ======================================================= sections ===== */

.sec-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: clamp(1rem, 1.6vw, 1.4rem);
  margin-bottom: clamp(2.2rem, 4vw, 3.4rem);
  border-bottom: 1px solid var(--i-08);
}
.sec-head--light { border-bottom-color: var(--w-12); }
.sec-head--light .eyebrow { color: var(--w-55); }
.sec-head--light .sec-num { color: var(--w-40); }

/* ------------------------------------------------------- o grupo ----- */

.grupo__grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: clamp(2.5rem, 4vw, 3.5rem);
  align-items: start;
}
.grupo__prose { max-width: 56ch; }
.grupo__prose p { color: var(--i-70); font-size: 1.0rem; line-height: 1.78; break-inside: avoid; }
.grupo__prose p + p { margin-top: 1.3em; }


/* The figures sit on ink directly under the hero: the page states what it is
   before it starts explaining itself, and the white is broken early. */
.band { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 5.5vw, 5.5rem); }
/* The figures, set the way Option B sets them: a short red tick opens each
   cell, the cells are divided by a rule rather than by a gap, and the two
   figures that are an achievement rather than a date carry the red. */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fact { padding-right: clamp(14px, 2vw, 30px); }
.fact + .fact {
  padding-left: clamp(20px, 2.8vw, 44px);
  border-left: 1px solid var(--w-12);
}
.fact::before {
  content: ""; display: block;
  width: 24px; height: 2px;
  margin-bottom: clamp(14px, 1.9vw, 20px);
  background: var(--red);
}
.fact__n {
  font-size: clamp(2.1rem, 4.4vw, 3.9rem); font-weight: 500;
  line-height: 0.95; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.fact__n--red { color: var(--red); }
.fact__l {
  margin-top: clamp(0.75rem, 1.3vw, 1rem);
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--w-55); line-height: 1.6; max-width: 20ch;
}
/* the two red figures carry their labels a shade brighter, so each pair
   reads as one statement rather than as colour laid over grey */
.fact__n--red + .fact__l { color: var(--w-70); }

/* ------------------------------------------------------- setores ----- */

/* Not a table of five rows but one sustained movement: the number and the
   photograph hold still while the sectors travel past them, and both
   change over to whichever sector is nearest the middle of the screen. */
.dom {
  display: grid;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.76fr) minmax(0, 1.24fr);
  column-gap: clamp(1.6rem, 3.6vw, 4rem);
  align-items: start;
  margin-top: clamp(0.6rem, 2vw, 2rem);
}

/* --- left: the number that turns over ------------------------------- */

.dom__rail { position: sticky; top: 25vh; }

.dom__count {
  position: relative; overflow: hidden;
  width: clamp(4.4rem, 8.4vw, 7.8rem);
  aspect-ratio: 11 / 8;
}
.dom__big {
  position: absolute; inset: 0; display: block;
  font-size: clamp(3.4rem, 7.2vw, 6.2rem); font-weight: 300;
  line-height: 0.88; letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(108%);
  transition: transform 0.9s var(--expo), opacity 0.5s var(--out);
}
.dom__big.is-on   { opacity: 1; transform: none; }
.dom__big.is-past { opacity: 0; transform: translateY(-108%); }

/* five rules, as wide as the digits above them */
.dom__prog {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.42rem;
  width: clamp(4.4rem, 8.4vw, 7.8rem);
  margin-top: clamp(0.8rem, 1.2vw, 1.05rem);
}
.dom__dot { height: 1.5px; background: var(--i-12); transition: background 0.45s var(--out); }
.dom__dot.is-on { background: var(--ink); }

/* --- middle: the plate ---------------------------------------------- */

.dom__stage { position: sticky; top: 25vh; }
.dom__plates {
  position: relative; overflow: hidden;
  width: 100%; max-width: clamp(176px, 21vw, 300px);
  aspect-ratio: 4 / 5; background: var(--paper-2);
}
.dom__plate {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.055);
  transition: opacity 0.85s var(--out), transform 1.5s var(--expo);
}
.dom__plate.is-on { opacity: 1; transform: none; }
.dom__plate img { width: 100%; height: 100%; object-fit: cover; }

/* --- right: the sectors themselves ----------------------------------- */

.dom__items { display: grid; }
.dom__item {
  display: grid; align-content: center; justify-items: start; gap: 1rem;
  min-height: 44vh;
  padding-block: clamp(2rem, 5vh, 3.4rem);
  border-top: 1px solid var(--i-12);
  opacity: 0.3;
  transition: opacity 0.6s var(--out);
}
.dom__item:first-child { border-top: 0; padding-top: 0; }
.dom__item.is-on { opacity: 1; }

.dom__name {
  font-size: clamp(1.6rem, 2.6vw, 2.6rem); font-weight: 300;
  line-height: 1.04; letter-spacing: -0.032em; text-wrap: balance;
}
.dom__p {
  color: var(--i-70); max-width: 46ch;
  font-size: clamp(0.98rem, 1.06vw, 1.1rem); line-height: 1.78;
}
.dom__item .arrow { margin-top: 0.2rem; }

/* the plate only rides inside the item once the middle column is gone */
.dom__inline { display: none; }

/* ----------------------------------------------------- statement ----- */

.sec--say { background: var(--paper-2); }
.say__lead {
  font-size: clamp(1.8rem, 3.9vw, 4rem);
  font-weight: 300; line-height: 1.04; letter-spacing: -0.034em;
  max-width: 22ch; text-wrap: balance;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.say__grid {
  display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: clamp(2rem, 3vw, 2.6rem);
  align-items: start;
}
/* the mission and the vision are both of these; the space around them is set
   by the values grid between them, so they carry no margin of their own */
.say__grid--tight { margin-block: 0; }
.say__n {
  font-size: clamp(3.4rem, 8.2vw, 7.6rem); font-weight: 300;
  line-height: 0.84; letter-spacing: -0.048em; font-variant-numeric: tabular-nums;
}
.say__nl {
  margin-top: 1rem; max-width: 24ch;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--i-40); line-height: 1.5;
}
.say__prose p {
  font-size: clamp(1.05rem, 1.5vw, 1.38rem); line-height: 1.58; letter-spacing: -0.012em;
  font-weight: 400; max-width: 44ch;
}


/* ------------------------------------------------------ projetos ----- */

/* The sheet runs sideways. `.work__pin` is a tall column of empty room;
   `.work__stage` sticks to the top of the viewport for the whole of it, and
   the rail inside is pulled left in step with the scroll. When the room runs
   out the stage lets go and the page carries on down.

   The rail is built from four column shapes so that no picture is cropped
   into a format it was never shot for:

     n   two portrait tiles stacked      w   two landscape tiles stacked
     t   one full-height portrait        f   one full-height landscape

   `--rail` (the height the stage leaves for the pictures) and `--cell` (half
   of it, one row of the sheet) are measured in script.js; the values below
   are what the section looks like before that runs. */

.sec--work {
  padding-block: 0;
  --wg:   clamp(6px, 0.55vw, 11px);
  --rail: 54vh;
  --cell: calc((54vh - var(--wg)) / 2);
  --edge: calc(max(0px, (100% - var(--max))) / 2 + var(--pad));
}

.work__pin   { position: relative; }
.work__stage { display: flex; flex-direction: column; padding-block: var(--gap); }
.work__top   { flex: 0 0 auto; }

.work__bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(1.4rem, 3.4vh, 2.6rem);
}
.head-title--rail { margin-bottom: 0; max-width: 17ch; }

/* The meter is the only thing telling the visitor that the section moves
   sideways, so it carries the hint, the travel and the count. */
.work__meter {
  flex: 0 0 auto; width: clamp(150px, 20vw, 260px);
  display: grid; gap: 9px; padding-bottom: 0.4rem;
}
.work__hint {
  font-family: var(--f); font-size: 0.54rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--i-40);
  transition: opacity 0.7s var(--out);
}
.work__meter.is-moved .work__hint { opacity: 0; }

.work__track { position: relative; height: 1px; background: var(--i-12); overflow: hidden; }
.work__fill {
  position: absolute; inset: 0; background: var(--red);
  transform: scaleX(0); transform-origin: 0 50%;
}
.work__count {
  display: flex; gap: 0.55em; align-items: baseline;
  font-family: var(--f); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.15em; color: var(--i-55);
  font-variant-numeric: tabular-nums;
}
.work__of { color: var(--i-20); }

/* the rail ------------------------------------------------------------ */

.work__view { position: relative; flex: 1 1 auto; min-height: 0; height: var(--rail); }

.work__rail {
  display: flex; align-items: stretch; gap: var(--wg);
  height: 100%; width: max-content;
  padding-inline: var(--edge);
}

.wcol { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--wg); height: 100%; }
.wcol--n { width: calc(var(--cell) * 0.80); }
.wcol--w { width: calc(var(--cell) * 1.50); }
.wcol--t { width: calc(var(--rail) * 0.72); }
.wcol--f { width: calc(var(--rail) * 1.28); }

.shot { position: relative; overflow: hidden; background: var(--paper-2); flex: 1 1 0; min-height: 0; }

.shot__btn { display: block; width: 100%; height: 100%; }
.shot__btn img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--expo);
}
.shot__btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 13, 12, 0.88) 0%, rgba(14, 13, 12, 0.56) 28%, rgba(14, 13, 12, 0.14) 56%, transparent 76%);
  opacity: 0; transition: opacity 0.45s var(--out);
}
.shot:hover .shot__btn img, .shot__btn:focus-visible img { transform: scale(1.05); }
.shot:hover .shot__btn::after, .shot__btn:focus-visible::after { opacity: 1; }

.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: grid; gap: 3px; padding: 10px 11px; color: var(--paper);
  pointer-events: none;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s var(--out), transform 0.55s var(--expo);
}
.shot:hover figcaption, .shot__btn:focus-visible + figcaption { opacity: 1; transform: none; }
.shot__cap { font-size: 0.8rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.3; }
.shot__meta { font-size: 0.54rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--w-55); }

/* A tile arrives from the left as the rail carries it in, so it is wiped
   open sideways rather than lifted the way the rest of the page is. The clip
   sits on the button, not on the figure, so that measuring the figure still
   finds something with area in it. */
.r-wipe .shot__btn {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.05s var(--expo);
  transition-delay: calc(var(--i, 0) * 0.055s);
}
.r-wipe.on .shot__btn { clip-path: inset(0 0 0 0); }
.r-wipe img { transform: scale(1.07); transition: transform 1.5s var(--expo); transition-delay: inherit; }
.r-wipe.on img { transform: none; }

/* on touch there is no hover, so the caption is simply always there */
@media (hover: none), (pointer: coarse) {
  .shot figcaption { opacity: 1; transform: none; }
  .shot__btn::after { opacity: 1; }
}

/* pinned ---------------------------------------------------------------
   Everything above is the plain version: a sheet that scrolls sideways on
   its own, which is what a phone, a keyboard-only visitor and anyone who has
   asked for less motion gets. `has-pin` is added by script.js when the
   viewport is wide and tall enough to hold the stage still instead. */

html.has-pin .work__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  padding-block: calc(var(--head) + clamp(1.2rem, 4vh, 2.8rem)) clamp(1.4rem, 4vh, 3rem);
}
html.has-pin .work__view { height: auto; }
html.has-pin .work__rail { will-change: transform; }
html.has-pin .work__view { touch-action: pan-y; }

/* On a phone or a tablet the stage would otherwise give every spare pixel
   to the pictures, and a single photograph ends up wider than the screen.
   The rail is held a little shorter so a column or two reads whole, and the
   stage is centred in the height that is left. */
@media (max-width: 899px) {
  html.has-pin .work__stage { justify-content: center; }
  html.has-pin .work__view { flex: 0 0 auto; height: clamp(240px, 46svh, 440px); }
}

/* plain version: a native sideways scroll, one column at a time */
html:not(.has-pin) .work__view {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  /* the rail is inset to the measure, so the snap has to be inset with it,
     or the first column comes to rest against the edge of the screen */
  scroll-padding-inline: var(--edge);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html:not(.has-pin) .work__view::-webkit-scrollbar { display: none; }
html:not(.has-pin) .wcol { scroll-snap-align: start; }
html:not(.has-pin) .is-rev .wcol { scroll-snap-align: end; }
html:not(.has-pin) .work__rail { transform: none !important; }

/* dia a dia em Lichimua ------------------------------------------------
   The second sheet. `is-rev` is set by script.js while it is pinned and
   running backwards: the tiles are then carried in from the left, so they
   wipe open from the right edge, and the meter fills from the right. */

.wcol--v { width: calc(var(--rail) * 0.5625); }

.shot--film .shot__btn { cursor: default; }
.shot__btn video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--expo);
}
.shot--film:hover .shot__btn video { transform: scale(1.03); }
.r-wipe video { transform: scale(1.07); transition: transform 1.5s var(--expo); transition-delay: inherit; }
.r-wipe.on video { transform: none; }

/* the one mark a film carries all the time, so it reads as moving before
   it has had the chance to move */
.shot__tag {
  position: absolute; top: 10px; left: 11px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px 5px 8px;
  font-family: var(--f); font-size: 0.52rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: #F6F4F1;
  background: rgba(14, 13, 12, 0.46);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 0; transition: opacity 0.6s var(--out) 0.5s;
}
.shot__tag::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red);
  animation: film-dot 2.4s ease-in-out infinite;
}
.r-wipe.on .shot__tag { opacity: 1; }
@keyframes film-dot { 50% { opacity: 0.25; } }

.is-rev .r-wipe .shot__btn { clip-path: inset(0 0 0 100%); }
.is-rev .r-wipe.on .shot__btn { clip-path: inset(0 0 0 0); }
.is-rev .work__fill { transform-origin: 100% 50%; }

/* ------------------------------------------------------ presença ----- */

.sec--pres { background: var(--ink); color: var(--paper); }
.pres__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: clamp(3rem, 5vw, 4rem);
  align-items: start;
}
.pres__city {
  font-size: clamp(2.8rem, 7vw, 7.2rem); font-weight: 300;
  line-height: 0.92; letter-spacing: -0.05em;
}
.pres__country {
  font-family: var(--fi); font-style: italic; font-weight: 200;
  font-size: clamp(1.5rem, 3.1vw, 2.9rem); line-height: 1.08; color: var(--w-40);
  /* the city sets very tight, so its descenders need clearing */
  margin-top: 0.55rem;
}
.pres__coord {
  margin-top: clamp(1.4rem, 2.4vw, 2rem);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em;
  color: var(--w-55); font-variant-numeric: tabular-nums;
}
.clock {
  display: flex; align-items: baseline; gap: 0.9rem; margin-top: 1.1rem;
  padding-top: 1.1rem; border-top: 1px solid var(--w-12); width: fit-content;
}
.clock__l { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--w-40); }
.clock__t { font-size: 1.15rem; font-weight: 300; font-variant-numeric: tabular-nums; }

.pres__blurb {
  margin-top: clamp(1.8rem, 3vw, 2.4rem); max-width: 42ch;
  color: var(--w-70); font-size: 0.99rem; line-height: 1.78;
}
.pres__list { display: grid; margin-top: clamp(2rem, 3.4vw, 2.8rem); }
.pres__list > div {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem;
  padding: 0.95rem 0; border-top: 1px solid var(--w-12);
}
.pres__list dt { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--w-40); padding-top: 0.3rem; }
.pres__list dd { font-size: 1rem; font-weight: 300; }

.pres__map { position: relative; }
/* square, because it holds a globe */
#map { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 560px; margin-inline: auto; }

/* ---------------------------------------------------- princípios ----- */

/* Six values, three across. The number sits above the name rather than
   beside it, so each one opens like a small section of its own and the
   column does not have to hold a number, a name and a rule on one line.

   The six used to float on the paper with five rems of air between the rows,
   which made the section read as three screens of nothing much. They now sit
   in one panel of --paper-2, the same off-white the interstitial uses, with
   the gutters and the margins pulled in. Two changes, one effect: the six
   read as a single object, and the section is a screen shorter. */
.prin {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.8rem, 3.4vw, 3.4rem);
  row-gap: clamp(1.7rem, 2.8vw, 2.4rem);
  margin-block: clamp(2.2rem, 3.8vw, 3.4rem);
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  background: var(--paper-2);
}
.prin__i { padding-top: clamp(1rem, 1.5vw, 1.4rem); border-top: 1px solid var(--i-20); }
.prin__i dt {
  display: grid; justify-items: start; gap: 0.7rem;
  margin-bottom: 0.8rem;
  font-size: clamp(1.08rem, 1.3vw, 1.26rem); font-weight: 400;
  line-height: 1.22; letter-spacing: -0.018em; text-wrap: balance;
}
.prin__no {
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.22em;
  color: var(--i-40); font-variant-numeric: tabular-nums;
}
.prin__i dd {
  max-width: 34ch;
  font-size: clamp(0.92rem, 0.98vw, 0.99rem); line-height: 1.72; color: var(--i-55);
}

/* ------------------------------------------------------ contacto ----- */

/* The section is a statement and a way in. Email, phone and address were all
   here and are gone: the address and the number were still placeholders, and
   the email is in the footer on every screen of the site. */
.cta__p { max-width: 46ch; color: var(--i-70); font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.78; }
.cta__side .btn { margin-top: clamp(1.8rem, 3vw, 2.6rem); }

.form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.4rem, 2.4vw, 2.2rem); row-gap: clamp(1.4rem, 2.2vw, 2rem);
}
.f--wide { grid-column: 1 / -1; }
.f { position: relative; padding-top: 20px; }
.f label {
  position: absolute; left: 0; top: 20px;
  font-size: 0.98rem; color: var(--i-40); pointer-events: none; transform-origin: 0 0;
  transition: transform 0.34s var(--expo), color 0.28s var(--out);
}
.f input, .f select, .f textarea {
  width: 100%; padding: 3px 0 11px;
  border-bottom: 1px solid var(--i-20); border-radius: 0;
  font-size: 0.98rem; font-weight: 300; color: var(--ink);
}
.f textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.f::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.42s var(--expo);
}
.f:focus-within::after { transform: scaleX(1); }
.f input:focus, .f select:focus, .f textarea:focus { outline: 0; }
.f input:focus + label, .f textarea:focus + label,
.f input:not(:placeholder-shown) + label, .f textarea:not(:placeholder-shown) + label,
.f--sel label { transform: translateY(-20px) scale(0.72); color: var(--i-55); }
.f--sel select {
  appearance: none; padding-right: 24px;
  background-image: linear-gradient(45deg, transparent 50%, rgba(14,13,12,.4) 50%), linear-gradient(135deg, rgba(14,13,12,.4) 50%, transparent 50%);
  background-position: calc(100% - 10px) 58%, calc(100% - 5px) 58%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.f [aria-invalid="true"] { border-bottom-color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 6px; }
.form__msg { font-size: 0.88rem; color: var(--i-55); }
.form__msg.is-bad { color: var(--red); }
.form__msg.is-ok  { color: #2E7D4F; }

/* -------------------------------------------------------- footer ----- */

.foot { background: var(--ink); color: var(--paper); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem; }
.foot__top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem;
  /* the lockup keeps its own proportions: a stretched flex item would pull
     it to the height of the address beside it */
  align-items: flex-start;
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.foot__logo { width: clamp(90px, 10.5vw, 124px); height: auto; }
.foot__addr { font-style: normal; font-size: 0.93rem; line-height: 1.8; color: var(--w-55); text-align: right; }
.foot__addr a { border-bottom: 1px solid var(--w-20); }
.foot__addr a:hover { color: var(--paper); border-bottom-color: var(--paper); }
.foot__row {
  display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: center;
  padding-top: 1.5rem; border-top: 1px solid var(--w-12);
  font-size: 0.78rem; color: var(--w-40);
}
.foot__l { display: flex; gap: 24px; margin-left: auto; }
.foot__l a { transition: color 0.25s var(--out); }
.foot__l a:hover { color: var(--paper); }

/* ------------------------------------------------------- dialog ------ */

/* The contact form. Same ink scrim as the lightbox, but the panel is paper
   and scrolls on its own if the viewport is short. */
.modal {
  position: fixed; inset: 0; z-index: 96;
  display: grid; place-items: center;
  padding: clamp(12px, 4vh, 48px) clamp(12px, 4vw, 48px);
  background: rgba(14, 13, 12, 0.62); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.3s var(--out);
  overflow-y: auto; overscroll-behavior: contain;
}
.modal.is-open { opacity: 1; }
.modal__panel {
  position: relative;
  width: 100%; max-width: 620px; max-height: 100%;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  background: var(--paper);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(12px) scale(0.99);
  transition: transform 0.42s var(--expo);
}
.modal.is-open .modal__panel { transform: none; }
.modal__h {
  margin-top: 0.7rem;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 300;
  line-height: 1.06; letter-spacing: -0.03em;
}
.modal__p {
  margin-top: 0.8rem; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); max-width: 44ch;
  font-size: 0.94rem; line-height: 1.7; color: var(--i-55);
}
.modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--i-12); border-radius: 50%;
  transition: background-color 0.28s var(--out), border-color 0.28s var(--out);
}
.modal__close:hover { background: var(--ink); border-color: var(--ink); }
.modal__close span[aria-hidden] { position: relative; width: 12px; height: 12px; }
.modal__close span[aria-hidden]::before,
.modal__close span[aria-hidden]::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--ink);
  transition: background-color 0.28s var(--out);
}
.modal__close span[aria-hidden]::before { transform: rotate(45deg); }
.modal__close span[aria-hidden]::after  { transform: rotate(-45deg); }
.modal__close:hover span[aria-hidden]::before,
.modal__close:hover span[aria-hidden]::after { background: var(--paper); }

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

.box {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center;
  padding: clamp(46px, 7vh, 80px) clamp(16px, 7vw, 96px);
  background: rgba(14, 13, 12, 0.96); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.32s var(--out);
}
.box.is-open { opacity: 1; }
.box__fig { display: grid; justify-items: center; gap: 16px; max-width: 100%; }
.box__fig img {
  max-width: 100%; max-height: 78vh; width: auto; object-fit: contain;
  opacity: 0; transform: scale(0.985);
  transition: opacity 0.42s var(--out), transform 0.6s var(--expo);
}
.box.is-ready .box__fig img { opacity: 1; transform: none; }
.box__cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  font-size: 0.88rem; color: var(--w-70);
}
.box__idx { font-size: 0.62rem; letter-spacing: 0.18em; color: var(--w-40); font-variant-numeric: tabular-nums; }

.box__close, .box__nav {
  position: absolute; z-index: 2; display: grid; place-items: center;
  width: 44px; height: 44px; border: 1px solid var(--w-20); border-radius: 50%;
  transition: border-color 0.28s var(--out), background-color 0.28s var(--out);
}
.box__close:hover, .box__nav:hover { background: var(--paper); border-color: var(--paper); }
.box__close:hover span[aria-hidden]::before, .box__close:hover span[aria-hidden]::after { background: var(--ink); }
.box__nav:hover span[aria-hidden] { border-color: var(--ink); }
.box__close { top: clamp(14px, 2.4vh, 26px); right: clamp(14px, 2.4vw, 30px); }
.box__close span[aria-hidden] { position: relative; width: 14px; height: 14px; }
.box__close span[aria-hidden]::before, .box__close span[aria-hidden]::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--paper);
}
.box__close span[aria-hidden]::before { transform: rotate(45deg); }
.box__close span[aria-hidden]::after  { transform: rotate(-45deg); }
.box__nav { top: 50%; margin-top: -22px; }
.box__nav--prev { left: clamp(8px, 2vw, 26px); }
.box__nav--next { right: clamp(8px, 2vw, 26px); }
.box__nav span[aria-hidden] { width: 9px; height: 9px; border-top: 1px solid var(--paper); border-right: 1px solid var(--paper); }
.box__nav--prev span[aria-hidden] { transform: translateX(2px) rotate(-135deg); }
.box__nav--next span[aria-hidden] { transform: translateX(-2px) rotate(45deg); }
html.is-boxed body { overflow: hidden; }

/* ==================================================== responsive ====== */

@media (max-width: 1180px) {
  .dom { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.66fr) minmax(0, 1.3fr); }
  .prin { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.6rem, 3vw, 2.6rem); }
}

@media (max-width: 1040px) {
  .grupo__grid, .pres__grid { grid-template-columns: minmax(0, 1fr); }
  .say__grid { grid-template-columns: minmax(0, 1fr); }
  .pres__map { max-width: 440px; }

  /* the number and the plate shrink before either of them is given up */
  .dom { grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.56fr) minmax(0, 1.36fr); column-gap: clamp(1.2rem, 2.6vw, 2.2rem); }
  .dom__plates { max-width: clamp(150px, 18vw, 220px); }
  .dom__item { min-height: 40vh; }
}

@media (max-width: 880px) {
  .nav, .cta-link { display: none; }
  .burger { display: block; }
  /* the centre zone goes with the nav */
  .head__in { grid-template-columns: minmax(0, 1fr) auto; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2rem, 5vw, 2.8rem); }
  .fact:nth-child(odd) { border-left: 0; padding-left: 0; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .pres__list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .foot__l { margin-left: 0; }
  .box__nav { top: auto; bottom: clamp(12px, 2.4vh, 24px); margin-top: 0; }
  .box__nav--prev { left: 50%; transform: translateX(-54px); }
  .box__nav--next { right: 50%; transform: translateX(54px); }

  .hero__foot { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; justify-items: start; }

  /* One column. The rail flattens into a bar that rides under the header,
     keeping the count in view, and each sector carries its own plate. */
  .dom { display: block; }
  .dom__rail {
    position: sticky; top: 60px; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-block: 0.55rem 0.7rem;
    background: var(--paper);
    border-bottom: 1px solid var(--i-12);
  }
  .dom__count { width: clamp(2.5rem, 8.8vw, 3.3rem); aspect-ratio: auto; height: clamp(1.9rem, 7vw, 2.6rem); }
  .dom__big { font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1; }
  .dom__prog { display: flex; gap: 0.32rem; width: auto; margin-top: 0; }
  .dom__dot { width: 16px; }
  .dom__stage { display: none; }

  .dom__items { display: block; }
  .dom__item {
    min-height: 0; gap: 0.9rem; opacity: 0.3;
    padding-block: clamp(1.9rem, 6vh, 2.8rem);
  }
  .dom__item:first-child { padding-top: clamp(1.9rem, 6vh, 2.8rem); }
  .dom__inline {
    display: block; width: clamp(118px, 33vw, 186px);
    aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-2);
  }
}

@media (max-width: 760px) {
  .head-title--rail { max-width: none; }
  .work__bar { display: block; }
  .work__meter { width: 100%; max-width: 260px; margin-top: 1.4rem; }
}

/* ----------------------------------------------------- phones -------- */

@media (max-width: 600px) {
  :root { --pad: 1.2rem; --max: 100vw; --gap: clamp(3.2rem, 13vw, 4.6rem); }
  body { font-size: 16px; }

  .head__logo { width: 84px; }
  .head__in { gap: 10px; height: 66px; }
  .head.is-stuck .head__in { height: 58px; }
  .lang__btn { padding: 6px 0; gap: 6px; font-size: 0.62rem; }
  .lang__flag { width: 18px; height: 12px; }

  /* the hero keeps its shape: the film behind, the type over it. The film is
     graded harder on a phone, where the type has less room to get away from
     it, and the headline is given the width the three lines need. */
  .hero { padding-top: calc(66px + 1rem); min-height: 100svh; }
  .hero__bg { opacity: 0.5; }
  .display { font-size: clamp(1.8rem, 8vw, 2.5rem); letter-spacing: -0.035em; }
  .hero .display { font-size: clamp(2.2rem, 11.5vw, 3.4rem); letter-spacing: -0.042em; }
  .hero__eyebrow { font-size: 0.6rem; letter-spacing: 0.18em; }
  .hero__p { font-size: 0.86rem; line-height: 1.65; }
  .arrow { font-size: 0.86rem; }

  .head-title { font-size: clamp(1.55rem, 6.6vw, 2.1rem); margin-bottom: 2rem; max-width: none; }
  .head-title--big { font-size: clamp(1.8rem, 7.8vw, 2.45rem); max-width: none; }
  .say__lead { font-size: clamp(1.6rem, 6.8vw, 2.15rem); max-width: none; margin-bottom: 2.2rem; }
  .say__n { font-size: clamp(2.8rem, 16vw, 4rem); }
  .say__prose p { font-size: 1.02rem; line-height: 1.6; }
  .sec-head { margin-bottom: 1.6rem; }

  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .fact:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fact + .fact { padding-left: 1.1rem; }
  .fact__n { font-size: clamp(1.8rem, 9vw, 2.5rem); }
  .fact__l { font-size: 0.58rem; max-width: none; }

  .grupo__prose p { font-size: 0.97rem; line-height: 1.72; }
  .dom__name { font-size: clamp(1.3rem, 5.8vw, 1.6rem); }
  .dom__p { font-size: 0.95rem; line-height: 1.72; }
  .dom__rail { top: 58px; }

  /* the sheet is shorter on a phone, and the caption is legible rather than tiny */
  .sec--work { --rail: clamp(280px, 48vh, 400px); }
  .shot figcaption { padding: 8px 9px; }
  .shot__cap { font-size: 0.74rem; }
  .shot__meta { font-size: 0.5rem; letter-spacing: 0.12em; }

  .pres__city { font-size: clamp(2.1rem, 12vw, 3.2rem); }
  .pres__country { font-size: clamp(1.35rem, 7vw, 1.9rem); }
  .pres__map { max-width: 340px; margin-inline: auto; }
  .pres__blurb { font-size: 0.95rem; }

  .prin { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; margin-block: 2rem; padding: 1.2rem; }
  .prin__i { padding-top: 1.2rem; }
  .prin__i dt { font-size: 1.1rem; gap: 0.7rem; margin-bottom: 0.7rem; }
  .prin__i dd { font-size: 0.94rem; line-height: 1.76; max-width: none; }

  .cta__side .btn, #form-open { width: 100%; }

  /* the dialog takes the whole screen on a phone */
  .modal { padding: 0; align-items: stretch; }
  .modal__panel {
    max-width: none; min-height: 100%;
    padding: 4.2rem 1.2rem 2rem;
    transform: translateY(18px);
  }
  .modal__h { font-size: 1.7rem; }
  .modal__p { margin-bottom: 1.6rem; font-size: 0.9rem; }
  .modal__close { top: 10px; right: 10px; }

  /* split across the width the two blocks just sit in opposite corners,
     so on a phone the lockup takes its own line and the address follows */
  .foot__top { flex-direction: column; gap: 1.5rem; }
  .foot__logo { width: 104px; }
  .foot__addr { text-align: left; font-size: 0.9rem; line-height: 1.75; }
  .foot__row { gap: 8px 20px; font-size: 0.74rem; }

  .menu__nav a { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .box__fig img { max-height: 62vh; }
}

@media (max-width: 400px) {
  .shot__meta { display: none; }
  .dom__inline { width: clamp(104px, 32vw, 140px); }
}

/* ================================================= reduced motion ===== */

@media (prefers-reduced-motion: reduce) {
  .r, .r-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mask > span { transform: none !important; transition: none !important; }
  .r-plate img { transform: none !important; clip-path: none !important; transition: none !important; }
  [data-word-reveal] .w { color: var(--ink) !important; }
  .sec--pres [data-word-reveal] .w { color: var(--ink) !important; }
  .dom__item { opacity: 1 !important; }
  .dom__plate.is-on { transform: none !important; }
  .shot__btn img { transform: none !important; }
  /* the caption is on for good here, so it needs the scrim under it */
  .shot__btn::after { opacity: 1 !important; }
  .shot figcaption { opacity: 1 !important; transform: none !important; }
  .r-wipe .shot__btn { clip-path: none !important; transition: none !important; }
  .r-wipe img { transform: none !important; transition: none !important; }
  .r-wipe video { transform: none !important; transition: none !important; }
  .shot__tag { opacity: 1 !important; }
  .box__fig img { opacity: 1 !important; transform: none !important; }
  .menu__nav a { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* no JS: nothing is hidden */
html.no-js .r, html.no-js .r-fade { opacity: 1; transform: none; }
html.no-js .box { display: none; }
/* with no script the dialog is laid out in the page and the button goes */
html.no-js #form-open { display: none; }
html.no-js .modal[hidden] { display: block !important; position: static; opacity: 1; padding: 0; background: none; backdrop-filter: none; }
html.no-js .modal__panel { max-width: none; box-shadow: none; border: 0; padding: 0; transform: none; }
html.no-js .modal__close { display: none; }
html.no-js .r-plate img { transform: none; clip-path: none; }
html.no-js .r-wipe .shot__btn { clip-path: none; }
html.no-js .shot__tag { opacity: 1; }
html.no-js [data-word-reveal] .w { color: var(--ink); }
/* without script nothing turns over, so the list stands on its own */
html.no-js .dom__item { opacity: 1; }
html.no-js .dom__rail, html.no-js .dom__stage { display: none; }
html.no-js .dom__inline { display: block; width: clamp(120px, 22vw, 190px); aspect-ratio: 4 / 5; object-fit: cover; }

@media print {
  .head, .menu, .box, .modal, .hero__cue, .hero__v { display: none !important; }
  body { background: #fff; color: #000; }
}




/* =========================================================================
   OPTION C

   Everything above this line is Option A's layout. What follows takes it to
   Option B: B's header, B's type roles (grotesk for display and labels,
   serif for prose), B's two paper sections, and the mobile handling that
   the sectors section needs once its middle column is gone.
   ========================================================================= */

/* Two absolutes. The paper sections below reassign --ink and --paper for
   everything inside them, so anything that must stay ink or stay paper
   whatever the ground refers to these instead. */
:root {
  --coal:   #0E0D0C;
  --bone:   #F6F4F1;
  --bone-2: #EAE6E0;
}


/* =============================================== type, as in Option B ===
   Option B sets its display type in the grotesk at 500 and leaves the serif
   to carry the running prose. The italic serif accent of Option A becomes
   what B uses in its place: the same face as the headline, in red. */

.display, .head-title, .say__lead, .say__n, .dom__name, .dom__big,
.fact__n, .modal__h, .prin__i dt, .clock__t {
  font-family: var(--f);
  font-weight: 500;
}
.display, .head-title, .say__lead { letter-spacing: -0.038em; }

.display em, .head-title em, .say__lead em, .sec--pres .head-title em {
  font-family: var(--f);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.038em;
  color: var(--red);
}

/* the small type that has a job: labels, numbers, navigation, controls */
.eyebrow, .sec-num, .col-label, .nav a, .lang__btn, .lang__item, .cta-link,
.menu__no, .menu__nav a, .menu__foot, .fact__l, .say__nl, .shot__meta,
.shot__cap, .pres__coord, .clock__l, .pres__list dt, .pres__list dd,
.prin__no, .btn, .arrow, .skip, .box__cap, .box__idx, .form__msg,
.form__foot, .foot__l, .foot__addr, .f label, .f input, .f select,
.f textarea, .dom__count {
  font-family: var(--f);
}
.btn, .cta-link, .arrow { font-weight: 500; }
.f label, .f input, .f select, .f textarea { font-weight: 400; }

/* prose keeps the serif, at the weight B reads best at on a dark ground */
.grupo__lead, .grupo__text p, .dom__p, .cta__p, .pres__p, .say__prose p,
.prin__i dd, .modal__p { font-weight: 300; }


/* ============================================= the two paper sections ===
   Option B runs dark with two paper sections: the sectors and the values.
   Option C does the same. Rather than restate every rule inside them, the
   sections reassign the tokens, so the layout above resolves to ink type on
   a bone ground without a single layout rule changing. */

.sec--setores, .sec--prin, .band {
  background: var(--bone);
  color: var(--coal);

  --paper:   #F6F4F1;
  --paper-2: #EAE6E0;
  --ink:     #0E0D0C;

  --i-70: rgba(14, 13, 12, 0.72);
  --i-55: rgba(14, 13, 12, 0.62);
  --i-40: rgba(14, 13, 12, 0.45);
  --i-20: rgba(14, 13, 12, 0.22);
  --i-12: rgba(14, 13, 12, 0.14);
  --i-08: rgba(14, 13, 12, 0.10);

  --w-70: rgba(14, 13, 12, 0.72);
  --w-55: rgba(14, 13, 12, 0.62);
  --w-40: rgba(14, 13, 12, 0.45);
  --w-20: rgba(14, 13, 12, 0.22);
  --w-12: rgba(14, 13, 12, 0.14);
}

/* the ink sections that are left: the figures band, the statement, presence */
.band {
  background: var(--paper-2); color: var(--ink);
  border-top: 1px solid var(--i-08); border-bottom: 1px solid var(--i-08);
}
.sec--pres { background: var(--paper-2); color: var(--ink); }
.sec--say  { background: var(--paper-2); }
.foot { background: var(--paper); color: var(--ink); border-top: 1px solid var(--i-12); }


/* ==================================================== header, Option B ==
   One row: the mark, the sections pushed to the right, then the actions.
   The nav rules underline in red, the contact link and the language control
   are pills, and the bar keeps its height when it sticks. */

.head.is-stuck {
  background: rgba(14, 13, 12, 0.72);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: rgba(246, 244, 241, 0.10);
}
.head__in {
  display: flex; align-items: center;
  gap: clamp(14px, 2vw, 28px);
  height: var(--head);
}
.head.is-stuck .head__in { height: var(--head); }

.head__logo { width: clamp(94px, 10vw, 116px); }
.head__logo .lc { opacity: 0; }
.head__logo .lw { opacity: 1; }

.nav { margin-left: auto; justify-content: flex-end; gap: clamp(16px, 2.4vw, 32px); }
.nav a {
  padding: 8px 0;
  font-size: 0.88rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--i-55);
}
.nav a::after { background: var(--red); bottom: 2px; }
.nav a:hover { color: var(--ink); }

.head__right { gap: 10px; }

.cta-link {
  padding: 10px 20px; border: 1px solid rgba(246, 244, 241, 0.16); border-radius: 999px;
  font-size: 0.85rem; letter-spacing: 0; text-transform: none;
  color: var(--ink);
}
.cta-link:hover { background: var(--red); border-color: var(--red); color: #fff; }

.lang__btn {
  padding: 9px 12px; border: 1px solid rgba(246, 244, 241, 0.16); border-radius: 999px;
  font-size: 0.8rem; letter-spacing: 0; color: var(--ink);
}
.lang__btn:hover { border-color: var(--i-40); color: var(--ink); }
.lang__caret { display: none; }
.lang__flag {
  width: 17px; height: 12px; border-radius: 1px; box-shadow: none;
}
.lang__menu {
  top: calc(100% + 10px); min-width: 176px; padding: 6px;
  background: #1C1917; border: 1px solid rgba(246, 244, 241, 0.10); border-radius: 4px;
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.8);
  font-size: 0.88rem;
}
.lang__item { padding: 10px; border-radius: 2px; }
.lang__item:hover, .lang__item:focus-visible { background: rgba(246, 244, 241, 0.06); color: var(--ink); }
.lang__item.is-on { color: var(--red); }

.burger {
  width: 42px; height: 38px;
  border: 1px solid rgba(246, 244, 241, 0.16); border-radius: 999px;
}
.burger span[aria-hidden] { left: 11px; right: 11px; top: 18px; background: var(--ink); }

/* Over the two paper sections the whole bar turns to ink. The class is still
   called is-dark; what it means in Option C is "dark type". */
.head.is-dark .head__logo .lc { opacity: 1; }
.head.is-dark .head__logo .lw { opacity: 0; }
.head.is-dark .nav a { color: rgba(14, 13, 12, 0.62); }
.head.is-dark .nav a:hover { color: var(--coal); }
.head.is-dark .lang__btn { color: var(--coal); border-color: rgba(14, 13, 12, 0.22); }
.head.is-dark .lang__btn:hover { color: var(--coal); border-color: rgba(14, 13, 12, 0.45); }
.head.is-dark .cta-link { color: var(--coal); border-color: rgba(14, 13, 12, 0.22); }
.head.is-dark .cta-link:hover { background: var(--red); border-color: var(--red); color: #fff; }
.head.is-dark .burger { border-color: rgba(14, 13, 12, 0.22); }
.head.is-dark .burger span[aria-hidden] { background: var(--coal); }
.head.is-dark.is-stuck {
  background: rgba(246, 244, 241, 0.82);
  border-bottom-color: rgba(14, 13, 12, 0.10);
}

/* the full-screen menu, set the way B sets it */
.menu__nav a {
  padding: 12px 0; border-top: 0; border-bottom: 1px solid var(--i-08);
  font-size: clamp(1.9rem, 8vw, 3rem); font-weight: 500; letter-spacing: -0.035em;
}
.menu__nav a:hover { color: var(--red); }


/* ========================================================== o grupo ======
   Set as Option B sets it: the statement and the paragraph that answers it
   share one line over a rule, and the rest of the history runs in two
   columns hung off the same grid, so every edge in the section lines up
   with the one above it. */

.grupo__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: clamp(36px, 6vw, 96px); row-gap: clamp(20px, 2.6vw, 30px);
  align-items: end;
  padding-bottom: clamp(34px, 4.4vw, 58px);
  margin-bottom: clamp(34px, 4.4vw, 58px);
  border-bottom: 1px solid var(--i-12);
}
.grupo__top .head-title { margin-bottom: 0; max-width: 26ch; }

/* the standfirst carries a touch more size than the body text under it, so
   the section opens rather than starting flat */
.grupo__lead {
  max-width: 42ch; color: var(--i-70);
  font-size: clamp(1.02rem, 1.2vw, 1.12rem); line-height: 1.72;
}

.grupo__text {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: clamp(36px, 6vw, 96px); row-gap: clamp(1.6rem, 2.6vw, 2.2rem);
  align-items: start;
}
.grupo__text p {
  max-width: 46ch; color: var(--i-70);
  font-size: 1rem; line-height: 1.78;
}

/* ===================================================== presença, as B ===
   B's copy and B's list, on C's globe. */

.pres__side .head-title { margin-bottom: clamp(1.4rem, 2.6vw, 2rem); max-width: 18ch; }
.pres__p {
  max-width: 42ch; color: var(--i-70);
  font-size: 1.04rem; line-height: 1.75;
  margin-bottom: clamp(30px, 4vw, 44px);
}


/* ================================================ controls on the dark ==
   Restated because these rules named the light colour explicitly, and on a
   dark ground the light colour is --ink, not --paper. */

.shot figcaption { color: var(--ink); }
.foot__addr a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.foot__l a:hover { color: var(--ink); }

.f--sel select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(246, 244, 241, 0.45) 50%),
    linear-gradient(135deg, rgba(246, 244, 241, 0.45) 50%, transparent 50%);
  color: var(--ink);
}
.f--sel select option { color: #14120F; background: #FFFFFF; }

.box__close:hover, .box__nav:hover { background: var(--ink); border-color: var(--ink); }
.box__close:hover span[aria-hidden]::before,
.box__close:hover span[aria-hidden]::after { background: var(--paper); }
.box__nav:hover span[aria-hidden] { border-color: var(--paper); }


/* ========================================================== responsive ==
   Below 1040 the two-column sections stack. The sectors section is the one
   that needs real work: its middle column is a sticky plate that only makes
   sense beside a tall scrolling list, so on a phone the whole mechanism is
   put away and each sector becomes a plain card, photograph first. */

@media (max-width: 1040px) {
  .pres__side .head-title { max-width: 24ch; }
  .grupo__top, .grupo__text { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 880px) {
  .dom { display: block; margin-top: clamp(1.4rem, 5vw, 2rem); }
  .dom__rail, .dom__stage { display: none; }

  .dom__items { display: grid; gap: clamp(1.8rem, 6vw, 2.6rem); counter-reset: dom; }
  .dom__item {
    counter-increment: dom;
    display: grid; justify-items: stretch; gap: 0.8rem;
    min-height: 0; padding: 0; border-top: 0;
    opacity: 1;
  }
  .dom__item:first-child { padding-top: 0; }

  /* the photograph leads the card, full width and cropped to a shape that
     suits a phone rather than the tall plate the desktop column wants */
  .dom__inline {
    display: block; order: -1;
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    background: var(--paper-2);
  }

  /* the number the rail used to hold rides with the name instead */
  .dom__name { display: flex; align-items: baseline; gap: 0.7rem; }
  .dom__name::before {
    content: "0" counter(dom);
    flex: none;
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em;
    color: var(--i-40);
  }
  .dom__p { max-width: none; }
  .dom__item .arrow { margin-top: 0.1rem; }
}

@media (max-width: 600px) {
  .pres__p { font-size: 0.99rem; line-height: 1.68; }
  .grupo__top { padding-bottom: 1.8rem; margin-bottom: 1.8rem; }
  .grupo__lead, .grupo__text p { font-size: 0.97rem; line-height: 1.72; }
  .pres__side .head-title { max-width: none; }
  .pres__list > div { padding-block: 0.85rem; }
  .menu__nav a { font-size: clamp(1.7rem, 8.4vw, 2.4rem); }
  .dom__inline { aspect-ratio: 3 / 2; }
}

/* The bar is set in one rule above, outside any query, so the phone sizes it
   was given further up no longer reach it. They are restated here. */
@media (max-width: 600px) {
  .head__in, .head.is-stuck .head__in { height: 64px; gap: 10px; }
  .head__logo { width: 84px; }
  .lang__btn { padding: 8px 11px; gap: 7px; font-size: 0.76rem; }
  .cta-link { padding: 9px 16px; font-size: 0.8rem; }
  .hero { padding-top: calc(64px + 1.6rem); }
}

/* A 320px phone has to hold a mark, a language control and a menu button on
   one line, so each gives up a little. */
@media (max-width: 380px) {
  .head__in { gap: 7px; }
  .head__logo { width: 74px; }
  .lang__btn { padding: 7px 9px; gap: 5px; font-size: 0.72rem; }
  .burger { width: 38px; height: 34px; }
  .burger span[aria-hidden] { left: 10px; right: 10px; top: 16px; }
}

/* Print stays black on white whatever the screen does. */
@media print {
  .band, .sec--pres, .sec--say, .foot { background: #fff !important; color: #000 !important; }
}

/* Without script the film is never given a source, so the poster stands on
   its own as a plain photograph and the hero is otherwise unchanged. */

/* --- the contact panel, on paper ----------------------------------------
   The form is the one place on the page where someone has to read a label,
   find a field and check what they typed, so it gets the paper ground. The
   panel reassigns the tokens the way the two paper sections do, and the
   rules inside it resolve to ink on bone with nothing else restated. */
.modal__panel {
  background: var(--bone);
  color: var(--coal);

  --paper:   #F6F4F1;
  --paper-2: #EAE6E0;
  --ink:     #0E0D0C;

  --i-70: rgba(14, 13, 12, 0.72);
  --i-55: rgba(14, 13, 12, 0.62);
  --i-40: rgba(14, 13, 12, 0.45);
  --i-20: rgba(14, 13, 12, 0.22);
  --i-12: rgba(14, 13, 12, 0.14);
  --i-08: rgba(14, 13, 12, 0.10);

  --w-70: rgba(14, 13, 12, 0.72);
  --w-55: rgba(14, 13, 12, 0.62);
  --w-40: rgba(14, 13, 12, 0.45);
  --w-20: rgba(14, 13, 12, 0.22);
  --w-12: rgba(14, 13, 12, 0.14);

  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.75);
}

/* the caret was drawn light for a dark field */
.modal__panel .f--sel select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(14, 13, 12, 0.45) 50%),
    linear-gradient(135deg, rgba(14, 13, 12, 0.45) 50%, transparent 50%);
  color: var(--ink);
}
/* and the confirmation green was mixed for one */
.modal__panel .form__msg.is-ok { color: #1F6B41; }

/* --- the group companies ------------------------------------------------
   Not a fifth column of figures: a bar across the foot of the band, the
   label at one end and the marks at the other, so it reads as a different
   kind of statement from the numbers above it. */
.cos {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.4rem, 4.2vw, 3.4rem);
  padding-top: clamp(1.4rem, 2.4vw, 2rem);
  border-top: 1px solid var(--w-20);
}
.cos__l {
  flex: none;
  font-family: var(--f);
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--w-55);
}

.cos__list {
  list-style: none;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(2rem, 5.5vw, 5rem);
}
.cos__a { display: block; }

/* sized by weight, not by height: one mark is stacked, the other runs wide */
.cos__logo {
  width: auto;
  opacity: 0.88;
  transition: opacity 0.35s var(--out);
}
.cos__logo--agro { height: clamp(40px, 4.4vw, 62px); }
.cos__logo--lhu  { height: clamp(42px, 4.7vw, 66px); }
.cos__a:hover .cos__logo, .cos__a:focus-visible .cos__logo { opacity: 1; }

/* on a phone the bar stacks: the label, then the two marks side by side */
@media (max-width: 720px) {
  .cos { flex-direction: column; align-items: flex-start; gap: 1.3rem; }
  .cos__list { gap: 2rem 2.6rem; width: 100%; }
}
@media (max-width: 600px) {
  .cos { margin-top: 2.2rem; padding-top: 1.2rem; }
}


/* =========================================================================
   OPTION C — THE SECTION LABEL, THE BAR, AND THE RESPONSIVE SYSTEM

   Three things happen below, and they are last in the file on purpose: each
   one restates something set earlier, and a later rule of the same weight is
   the plainest way to say "this, not that".

     1  the section label takes the form Option B gives it
     2  the bar gets the room the mark needs, and the language control
        loses its pill
     3  the type, the measure and the rhythm are put on one continuous
        fluid scale

   The third is the substantial one. Everything above sizes itself in steps:
   a desktop value, then a phone value inside `max-width: 600px`. That makes
   a headline jump between 600px and 601px, and it leaves the whole tablet
   band reading at phone sizes on a screen twice the width. What follows
   replaces the steps with `clamp(min, rem + vw, max)` — one line per role
   that interpolates every width in between, so the page is never sized for
   one screen and merely tolerated on the others.
   ========================================================================= */


/* ------------------------------------------------- 1  the label ------ */

/* Option B opens a section with a short red rule and the name beside it, set
   in the grotesk at reading size rather than as tracked-out small caps. That
   is the form here, on every section, on both grounds. The red is lifted on
   the dark sections so the label carries the same weight on ink as it does
   on paper. */

:root { --label: #EE5157; }
.sec--setores, .sec--prin, .band, .modal__panel { --label: var(--red); }

.eyebrow {
  display: flex; align-items: center;
  gap: clamp(8px, 1vw, 10px);
  font-family: var(--f);
  font-size: clamp(0.74rem, 0.7rem + 0.16vw, 0.84rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.2;
  color: var(--label);
}
.eyebrow::before {
  content: ""; flex: none;
  width: clamp(18px, 1.4vw + 12px, 26px); height: 1px;
  background: currentColor;
}
/* the light variant named its own colour, so it has to be told again */
.sec-head--light .eyebrow { color: var(--label); }

/* the counter opposite it is set to the label's own baseline */
.sec-head { align-items: center; }
.sec-num {
  font-size: clamp(0.6rem, 0.58rem + 0.06vw, 0.66rem);
  letter-spacing: 0.2em;
}

/* an anchor should land under the bar, not behind it */
section[id], main[id] { scroll-margin-top: clamp(72px, 9vh, 96px); }


/* ---------------------------------------- 2  the bar and its mark ---- */

/* The mark was sitting on the margin. The bar now holds at least a rem and a
   half of air at any width, and since `--pad` below never falls under that
   either, the mark still lines up with the first word of every section. */
.head__in { padding-inline: max(var(--pad), 1.5rem); }

/* Once the nav is gone the two actions are the only thing left to hold the
   right-hand edge, so they have to claim the space the nav was claiming. */
@media (max-width: 880px) {
  .head__right { margin-left: auto; }
}

/* The language control, without the pill. A flag, two letters and a caret,
   in the same type as everything else in the bar — but the tap target is
   still a full 44px, which is where the vertical padding goes. */
.lang__btn {
  display: flex; align-items: center;
  min-height: 44px; padding: 0; gap: 8px;
  border: 0; border-radius: 0; background: none;
  font-size: clamp(0.78rem, 0.76rem + 0.1vw, 0.86rem);
  letter-spacing: 0.01em;
  color: var(--i-70);
}
.lang__btn:hover { color: var(--ink); background: none; border-color: transparent; }
.lang__caret { display: block; width: 5px; height: 5px; margin-left: 0; }
.lang__flag { width: 18px; height: 12px; border-radius: 1px; }

.head.is-dark .lang__btn { color: rgba(14, 13, 12, 0.72); border-color: transparent; }
.head.is-dark .lang__btn:hover { color: var(--coal); border-color: transparent; }

/* the menu the control opens is anchored to the type, not to a pill edge */
.lang__menu { top: calc(100% + 12px); }


/* ---------------------------------------------- 3  the fluid scale --- */

/* --- the measure and the rhythm --------------------------------------
   `--pad` is the gutter, `--gap` the air above and below a section. Both
   were stepped; both now run. The floor on the gutter is what stops a phone
   from reading edge to edge. */
:root {
  --pad: clamp(1.5rem, 0.9rem + 2.4vw, 4rem);
  --gap: clamp(3.6rem, 1.7rem + 5.6vw, 7.2rem);
}

body { font-size: clamp(15.5px, 15px + 0.18vw, 17px); }

/* --- display and headlines -------------------------------------------
   The hero is the one headline with a whole screen to itself, so it is also
   the one that has to watch the height: a wide, short window would otherwise
   give it three lines taller than the window is. The `min()` inside the
   clamp is that guard, and the clamp's own floor keeps it from collapsing on
   a phone held sideways. */
.hero .display {
  font-size: clamp(1.61rem, min(0.91rem + 4.2vw, 9.52vh), 5.18rem);
  line-height: 0.95; letter-spacing: -0.042em;
  margin-bottom: clamp(1.8rem, 0.9rem + 2.6vw, 3.4rem);
}
.display          { font-size: clamp(1.9rem, 1.05rem + 3.4vw, 3.4rem); }
.head-title       { font-size: clamp(1.7rem, 0.95rem + 3.1vw, 3.9rem);
                    margin-bottom: clamp(2rem, 1.3rem + 2.4vw, 4rem); }
.head-title--big  { font-size: clamp(1.95rem, 1rem + 3.9vw, 4.4rem); }
.say__lead        { font-size: clamp(1.7rem, 1rem + 2.9vw, 3.8rem);
                    margin-bottom: clamp(2.4rem, 1.2rem + 4vw, 5rem); }
.say__n           { font-size: clamp(2.9rem, 1.3rem + 6.4vw, 7.2rem); }
.fact__n          { font-size: clamp(1.95rem, 1.15rem + 2.7vw, 3.7rem); }
.dom__name        { font-size: clamp(1.35rem, 0.95rem + 1.7vw, 2.5rem); }
.modal__h         { font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.5rem); }
.menu__nav a      { font-size: clamp(1.75rem, 1.1rem + 3.4vw, 3rem); }
.pres__city       { font-size: clamp(2.2rem, 1rem + 5.2vw, 7.2rem); }
.pres__country    { font-size: clamp(1.35rem, 0.9rem + 2.1vw, 2.9rem); }

/* --- running prose ---------------------------------------------------- */

.grupo__lead      { font-size: clamp(1rem, 0.96rem + 0.22vw, 1.14rem); line-height: 1.72; }
.grupo__text p,
.grupo__prose p   { font-size: clamp(0.97rem, 0.94rem + 0.16vw, 1.05rem); line-height: 1.76; }
.dom__p           { font-size: clamp(0.97rem, 0.93rem + 0.2vw, 1.1rem);  line-height: 1.76; }
.pres__p,
.pres__blurb      { font-size: clamp(0.99rem, 0.95rem + 0.2vw, 1.08rem); line-height: 1.74; }
.cta__p           { font-size: clamp(0.99rem, 0.95rem + 0.22vw, 1.1rem); line-height: 1.76; }
.say__prose p     { font-size: clamp(1.04rem, 0.95rem + 0.52vw, 1.38rem); line-height: 1.6; }
.prin__i dt       { font-size: clamp(1.06rem, 1rem + 0.26vw, 1.28rem); }
.prin__i dd       { font-size: clamp(0.94rem, 0.92rem + 0.12vw, 1rem); line-height: 1.74; }
.modal__p         { font-size: clamp(0.93rem, 0.91rem + 0.12vw, 0.99rem); }
.arrow            { font-size: clamp(0.88rem, 0.85rem + 0.14vw, 0.98rem); }
.arrow--sm        { font-size: clamp(0.85rem, 0.83rem + 0.1vw, 0.92rem); }
.hero__p          { font-size: clamp(0.92rem, 0.89rem + 0.16vw, 1.02rem); line-height: 1.7; }

/* --- the small type that has a job -----------------------------------
   Several of these were set at half a rem, which is eight pixels on a phone
   and unreadable on any of them. Nothing here now goes under about ten. */

.hero__eyebrow    { font-size: clamp(0.64rem, 0.62rem + 0.08vw, 0.7rem); letter-spacing: 0.19em; }
.fact__l          { font-size: clamp(0.63rem, 0.61rem + 0.1vw, 0.7rem);  letter-spacing: 0.15em; }
.cos__l           { font-size: clamp(0.63rem, 0.61rem + 0.1vw, 0.7rem); }
.say__nl          { font-size: clamp(0.65rem, 0.63rem + 0.1vw, 0.74rem); }
.col-label        { font-size: clamp(0.65rem, 0.63rem + 0.08vw, 0.72rem); }
.prin__no,
.menu__no,
.clock__l         { font-size: clamp(0.6rem, 0.58rem + 0.06vw, 0.66rem); }
.pres__list dt    { font-size: clamp(0.63rem, 0.61rem + 0.08vw, 0.68rem); }
.pres__list dd    { font-size: clamp(0.99rem, 0.96rem + 0.14vw, 1.06rem); }
.pres__coord      { font-size: clamp(0.64rem, 0.62rem + 0.08vw, 0.72rem); }
.work__hint       { font-size: clamp(0.6rem, 0.58rem + 0.06vw, 0.64rem); }
.work__count      { font-size: clamp(0.62rem, 0.6rem + 0.06vw, 0.66rem); }
.shot__cap        { font-size: clamp(0.79rem, 0.77rem + 0.1vw, 0.86rem); }
.shot__meta       { font-size: clamp(0.58rem, 0.56rem + 0.06vw, 0.62rem); letter-spacing: 0.14em; }
.foot__row        { font-size: clamp(0.78rem, 0.76rem + 0.08vw, 0.84rem); }
.foot__addr       { font-size: clamp(0.92rem, 0.9rem + 0.1vw, 0.97rem); }
.box__cap         { font-size: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem); }
.box__idx         { font-size: clamp(0.62rem, 0.6rem + 0.06vw, 0.66rem); }
.form__msg        { font-size: clamp(0.85rem, 0.83rem + 0.1vw, 0.92rem); }
.menu__foot       { font-size: clamp(0.88rem, 0.86rem + 0.1vw, 0.95rem); }


/* ------------------------------------------- 4  layout, per screen --- */

/* Nothing below changes what the page is; it changes how much room each
   part is given once the screen stops being a desk. */

/* --- the section head and the air around it --------------------------- */
.sec-head {
  padding-bottom: clamp(0.9rem, 0.6rem + 0.9vw, 1.4rem);
  margin-bottom: clamp(1.9rem, 1.2rem + 2.2vw, 3.4rem);
}

/* --- the hero --------------------------------------------------------- */

/* The rule under the headline ran only as far as the standfirst once the
   two columns stacked, which left it hanging in the middle of the screen.
   It spans, and the link sits at the start of its own row. */
@media (max-width: 880px) {
  .hero__foot { justify-items: stretch; gap: 1.2rem; }
  .hero__foot .arrow { justify-self: start; }
}
/* held sideways, a phone has no room for a hundred-vh hero and a cue */
@media (max-height: 460px) and (orientation: landscape) {
  .hero { min-height: 560px; }
  .hero__cue { display: none; }
}

/* --- the figures band -------------------------------------------------
   Four across down to a tablet, two below it. The pair on the second row
   needs its own air, and the rule between the columns has to be the only
   rule: the first cell of each row drops its left border. */
@media (max-width: 880px) {
  .facts { row-gap: clamp(2rem, 1.2rem + 2.6vw, 3rem); }
  .fact + .fact { padding-left: clamp(1.1rem, 0.6rem + 2vw, 2rem); }
  /* the first figure of each row starts on the margin, under the one above */
  .fact:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* --- setores, as cards ------------------------------------------------
   Below 880 the plate column is gone and each sector is a card. The cards
   were touching; they now stand apart, and the photograph is cropped to a
   shape that suits the width it is actually given. */
@media (max-width: 880px) {
  .dom__items { gap: clamp(2.6rem, 1.4rem + 4.2vw, 4rem); }
  .dom__item { gap: clamp(0.85rem, 0.7rem + 0.5vw, 1.1rem); }
  .dom__inline { aspect-ratio: 3 / 2; border-radius: 0; }
  .dom__name { gap: clamp(0.6rem, 0.5rem + 0.5vw, 0.9rem); }
  .dom__name::before { font-size: clamp(0.66rem, 0.64rem + 0.08vw, 0.74rem); }
  .dom__item .arrow { margin-top: 0.35rem; }
}
/* a phone is narrow enough that a 3:2 plate is already tall; on a tablet the
   card is wide, so the picture is allowed to be wider still */
@media (min-width: 601px) and (max-width: 880px) {
  .dom__inline { aspect-ratio: 16 / 9; }
}

/* --- the statement and the values ------------------------------------- */
@media (max-width: 1040px) {
  .say__grid { row-gap: clamp(1.6rem, 1rem + 2vw, 2.4rem); }
  .say__num { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
  .say__nl { margin-top: 0; max-width: 22ch; }
}
.prin {
  margin-block: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem);
  padding: clamp(1.4rem, 0.9rem + 1.8vw, 2.4rem);
  row-gap: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
}

/* --- projetos ---------------------------------------------------------
   Off the pin the sheet is a native sideways scroll. It wants a rail short
   enough to leave the page under it in view, and a caption that is readable
   without covering the photograph. */
.sec--work { --rail: clamp(280px, 52vh, 560px); }
@media (min-width: 900px) { .sec--work { --rail: 54vh; } }

@media (max-width: 760px) {
  .work__meter { max-width: none; margin-top: clamp(1.1rem, 0.8rem + 1vw, 1.6rem); }
  .work__track { max-width: 260px; }
}
/* On a desk the caption is a hover state: it is there when the pointer asks
   for it and gone the rest of the time. There is no hover on a touch screen,
   so it would be on over every tile at once — a sheet of photographs with a
   label stuck to each one. It is dropped instead, along with the scrim that
   existed only to make it legible, and the pictures are left to be pictures.
   The name is not lost: tapping a tile opens it in the lightbox, which
   captions it there.

   `display: none` rather than `opacity: 0` on purpose — the reduced-motion
   block forces the caption and the scrim back on with `!important`, and only
   taking them out of the box gets past that. */
@media (hover: none), (pointer: coarse) {
  .shot figcaption { display: none; }
  .shot__btn::after { display: none; }
}

/* --- presença ---------------------------------------------------------
   The globe is decoration, so on a narrow screen it takes the room that is
   left rather than the room it would like. */
@media (max-width: 1040px) {
  .pres__grid { row-gap: clamp(2.4rem, 1.4rem + 3vw, 4rem); }
  .pres__map { max-width: min(420px, 78vw); margin-inline: auto; }
}
@media (max-width: 600px) {
  .pres__map { max-width: min(320px, 82vw); }
  .pres__list > div { padding-block: 0.9rem; }
}

/* --- contacto and the footer ------------------------------------------ */
.cta__side .btn { margin-top: clamp(1.6rem, 1rem + 1.8vw, 2.6rem); }
.btn { padding: clamp(15px, 13px + 0.5vw, 18px) clamp(26px, 20px + 1.6vw, 36px); }

@media (max-width: 600px) {
  .foot__top { gap: 1.8rem; padding-bottom: 2.2rem; }
  .foot__row { row-gap: 10px; }
}

/* --- the full-screen menu ---------------------------------------------
   Six items and an address have to fit a phone in landscape as well as
   upright, so the panel scrolls rather than centring content it cannot
   hold. */
.menu {
  justify-content: center;
  padding-block: calc(var(--head) + clamp(20px, 4vh, 40px)) clamp(28px, 5vh, 48px);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu__nav a { padding-block: clamp(12px, 1.4vh, 16px); }
@media (max-height: 560px) {
  .menu { justify-content: flex-start; }
  .menu__nav a { padding-block: 9px; font-size: clamp(1.3rem, 4.4vh, 1.9rem); }
  .menu__foot { margin-top: 22px; }
}


/* ------------------------------------------- 5  nothing runs over ---- */

/* Long words in Portuguese and a 320px screen do not always agree. Anything
   that carries prose is allowed to break rather than push the page sideways,
   and the two places that genuinely scroll sideways are told to keep it to
   themselves. */
.head-title, .display, .say__lead, .dom__name, .prin__i dt,
p, dd, dt, li, figcaption, address { overflow-wrap: break-word; }

.work__view { overscroll-behavior-x: contain; }
.dom, .facts, .prin, .say__grid, .pres__grid, .form { min-width: 0; }


/* ------------------------------------------ 6  motion, on a phone ---- */

/* The reveals are the page's one effect and they are worth keeping, but a
   phone paints them over a smaller, slower surface: they are shortened, the
   stagger is tightened so a list does not finish long after it is read, and
   the parallax-ish scale on a plate is dropped, since the browser is already
   compositing a video behind the hero. */
@media (max-width: 880px) {
  .r, .r-fade {
    transition-duration: 0.62s;
    transition-delay: calc(var(--i, 0) * 0.05s);
  }
  .r { transform: translate3d(0, 12px, 0); }
  .mask > span { transition-duration: 0.72s; transition-delay: calc(var(--i, 0) * 0.022s); }
  .r-plate img { transition-duration: 0.9s, 0.85s; }
  .r-wipe .shot__btn { transition-duration: 0.7s; transition-delay: calc(var(--i, 0) * 0.04s); }
  .d1 { transition-delay: 0.07s; } .d2 { transition-delay: 0.14s; } .d3 { transition-delay: 0.21s; }
}

/* On touch there is no hover to undo a transform, so the one effect that
   depends on it is simply not armed. */
@media (hover: none) {
  .shot:hover .shot__btn img { transform: none; }
  .arrow:hover::after { transform: rotate(45deg); }
  .cos__logo { opacity: 1; }
}


/* ------------------------------------ 7  setores, on a laptop -------- */

/* Between the phone cards and a full desk the three columns were still there
   but out of proportion: a 180px plate beside a 550px column of text, with
   the number given as much room as the photograph. The band is re-weighted
   rather than given up — the plate is the thing worth the space, the number
   only has to hold two digits. */
/* One set of proportions for every screen wide enough to hold the three
   columns, rather than three sets that step at 1040 and at 1180. The plate
   grows with the window instead of being capped at a phone's idea of it. */
@media (min-width: 881px) {
  .dom {
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.8fr) minmax(0, 1.3fr);
    column-gap: clamp(1.5rem, 3.4vw, 4rem);
  }
  .dom__plates { max-width: clamp(210px, 23vw, 310px); }
  .dom__item { min-height: 38vh; }
}


/* ---------------------------------------- 8  the last of the steps --- */

/* Three values that were still set twice — once for a desk and once for a
   phone — and so jumped at 600px. They run instead. */

/* the bar's own height, which the hero, the menu and the pinned stage all
   measure themselves against */
:root { --head: clamp(66px, 57px + 1.4vw, 80px); }

/* and the mark inside it */
.head__logo { width: clamp(80px, 56px + 6.2vw, 116px); }
@media (max-width: 380px) { .head__logo { width: 76px; } }

/* the dialog's gutter is the page's gutter */
@media (max-width: 600px) {
  .modal__panel { padding: calc(var(--head) - 8px) var(--pad) 2rem; }
}


/* --------------------------------------- 8  the figures, on paper ---- */

/* The figures band is the third paper ground on the page. It takes the
   tokens the sectors and the values take (see the paper sections above),
   so every rule inside it resolves to ink on bone. The rule restated here
   is only the one that named its own ground, plus the two company marks,
   which are white cut-outs and are printed in ink instead. */
.band { background: var(--bone); color: var(--coal); border-top: 0; border-bottom: 0; }
.band .cos__logo { filter: brightness(0); opacity: 0.8; }
.band .cos__a:hover .cos__logo, .band .cos__a:focus-visible .cos__logo { opacity: 1; }