/* ==========================================================================
   Fonts (self-hosted, SIL Open Font License — see assets/fonts/OFL-*.txt)
   ========================================================================== */

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/oswald-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-latin-500.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-latin-600.woff2") format("woff2");
}

/* ==========================================================================
   Design tokens
   Contrast ratios (WCAG) are noted next to each text color.
   ========================================================================== */

:root {
  /* Brand */
  --color-primary: #1e64be;        /* logo blue; white text on it: 5.80:1 */
  --color-primary-dark: #174f97;   /* hover/active, CTA band; white text on it: 8.07:1 */
  --color-primary-deep: #113c75;   /* cards on the CTA band; white text on it: 10.90:1 */
  --color-accent: #5b9bf0;         /* blue for text on dark: 6.84:1 on background */

  /* Dark theme (default) */
  --color-background: #0d0d0d;
  --color-surface: #1a1a1a;
  --color-border: #2e2e2e;
  --color-text: #f2f2f2;           /* 17.36:1 on background */
  --color-text-muted: #969696;     /* logo gray; 6.57:1 on background, 5.88:1 on surface */

  /* Light sections */
  --color-background-light: #f5f5f5;
  --color-text-dark: #1a1a1a;      /* 15.96:1 on light background */
  --color-text-dark-muted: #555555; /* 6.84:1 on light background */

  --color-white: #ffffff;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-backdrop: rgba(8, 8, 8, 0.97); /* gallery behind the photo */

  /* Typography */
  --font-heading: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Poppins", Arial, sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* Layout */
  --radius: 0.5rem;
  --container-max: 100rem;
  --container-padding: 1rem;
  --focus-ring: 3px solid var(--color-accent);
  --transition: 0.2s ease;
  --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.5);
  --color-selection: rgba(30, 100, 190, 0.85);
  --color-on-primary-muted: rgba(255, 255, 255, 0.9); /* 5.05:1 on primary, 6.87:1 on primary-dark, 9.17:1 on primary-deep */
  --color-on-primary-line: rgba(255, 255, 255, 0.25);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-reveal: 0.9s;

  /* Header */
  --header-height: 4.5rem;
  --logo-height: 2.75rem;
}

@media (min-width: 768px) {
  :root {
    --container-padding: 2rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-height: 5.5rem;
    --logo-height: 3.5rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --container-padding: 5rem;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--color-border) var(--color-background);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

::selection {
  background-color: var(--color-selection);
  color: var(--color-white);
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Line height 1.2 leaves room for accented capitals between lines: in Oswald the acute
   of "Í" rises to 1.07em, so 1.2 keeps ~0.12em clear of the letters above */
h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem);
}

h2 {
  font-size: clamp(1.625rem, 1.25rem + 1.8vw, 2.75rem);
}

h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
}

p {
  margin: 0 0 var(--space-sm);
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  color: inherit;
}

ul[role="list"],
ol[role="list"] {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* In-page anchors land below the sticky header */
[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-sm));
}

/* ==========================================================================
   Utilities
   ========================================================================== */

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: first focusable element on every page */
.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 1000;
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================================
   Components
   ========================================================================== */

/* Small label above titles, with a blue line */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 2.5rem;
  height: 2px;
  background-color: var(--color-primary);
  transform-origin: left;
}

/* Primary button: square, blue, darker fill sweeps in on hover */
.button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.875rem 1.75rem;
  overflow: hidden;
  border: 0; /* <button class="button"> must look like the link version */
  background-color: var(--color-primary);
  cursor: pointer;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-primary-dark);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}

.button:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.button__icon {
  flex-shrink: 0;
  transition: transform 0.5s var(--ease-out);
}

.button:hover .button__icon {
  transform: translateX(4px);
}

/* Text link with an arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  /* Underline under the text only (not the arrow), drawn in on hover */
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + 0.8em) / 0 1px no-repeat;
  transition: color var(--transition), background-size 0.4s var(--ease-out);
}

@media (hover: hover) {
  .link-arrow:hover {
    background-size: calc(100% - 1.625rem) 1px;
  }
}

.link-arrow__icon {
  flex-shrink: 0;
  transition: transform var(--transition);
}

.link-arrow:hover {
  color: var(--color-accent);
}

.link-arrow:hover .link-arrow__icon {
  transform: translateX(4px);
}

/* Back link: the arrow comes first and points left, so the underline is anchored right */
.link-arrow--back {
  background-position: 100% calc(50% + 0.8em);
}

.link-arrow--back:hover .link-arrow__icon {
  transform: translateX(-4px);
}

/* Section header: eyebrow + title */
.section-header {
  max-width: 44rem;
  margin-bottom: var(--space-lg);
}

.section-header__title {
  margin: 0;
}

/* ==========================================================================
   Portal -> Construções: page cross-fade
   Cross-document view transition, switched on only in the <head> of the portal
   and of the Construções home (both must opt in), so it never runs between the
   inner pages. The portal fades out quickly and the home fades in a little
   later, over the site background (no white flash in between). Browsers
   without view transitions just navigate.
   ========================================================================== */

@keyframes view-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes view-fade-in {
  from {
    opacity: 0;
  }
}

::view-transition {
  background-color: var(--color-background);
}

::view-transition-old(root) {
  animation: view-fade-out 0.35s var(--ease-out) both;
}

::view-transition-new(root) {
  animation: view-fade-in 0.7s var(--ease-out) 0.15s both;
}

/* ==========================================================================
   Cookie and privacy notice
   Modal popup built by main.js (initTermsDialog) until the visitor accepts,
   with the privacy policy in evidence. Native <dialog>: the page behind is
   inert and the focus stays inside. The panel scrolls by itself, so the
   button is always reachable, even on a phone held sideways.
   ========================================================================== */

@keyframes terms-dialog-in {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

@keyframes terms-dialog-out {
  to {
    opacity: 0;
    transform: translateY(1rem);
  }
}

/* The page behind the open notice must not scroll */
.terms-dialog-open {
  overflow: hidden;
}

.terms-dialog {
  width: calc(100% - 2 * var(--space-sm));
  max-width: 36rem;
  max-height: calc(100dvh - 2 * var(--space-sm));
  margin: auto;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-top: 3px solid var(--color-primary);
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-header);
}

/* Only when open: a display value on the dialog itself would override the closed state */
.terms-dialog[open] {
  animation: terms-dialog-in 0.6s var(--ease-out) both;
}

/* Exception to the focus ring: the dialog box only takes the initial focus so screen readers
   read the whole notice; it is not a control. Its links and button keep the ring. */
.terms-dialog:focus-visible {
  outline: none;
}

.terms-dialog::backdrop {
  background-color: var(--color-overlay);
}

.terms-dialog[open]::backdrop {
  animation: fade-in 0.4s var(--ease-out) both;
}

.terms-dialog.is-closing {
  animation: terms-dialog-out 0.3s var(--ease-out) forwards;
}

.terms-dialog__inner {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
}

.terms-dialog__eyebrow {
  margin: 0;
}

.terms-dialog__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.terms-dialog__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* The privacy policy in evidence: a full-width link with a blue rule */
.terms-dialog__policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  background-color: var(--color-background);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition), background-color var(--transition);
}

.terms-dialog__policy:hover {
  border-color: var(--color-primary);
}

.terms-dialog__policy-label {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.terms-dialog__policy-hint {
  grid-column: 1;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.terms-dialog__policy-icon {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--color-accent);
  transition: transform 0.4s var(--ease-out);
}

.terms-dialog__policy:hover .terms-dialog__policy-icon {
  transform: translateX(4px);
}

.terms-dialog__actions {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.terms-dialog__cookies {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 2.75rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  text-underline-offset: 0.2em;
  transition: color var(--transition);
}

.terms-dialog__cookies:hover {
  color: var(--color-text);
}

.terms-dialog__accept {
  width: 100%;
}

@media (min-width: 480px) {
  .terms-dialog__inner {
    gap: var(--space-md);
    padding: var(--space-lg);
  }

  .terms-dialog__actions {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-md);
  }

  .terms-dialog__accept {
    width: auto;
  }
}

/* Short screens (a phone held sideways): tighter, so more of it fits */
@media (max-height: 30rem) {
  .terms-dialog__inner {
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
  }

  .terms-dialog__title {
    font-size: 1.375rem;
  }
}

@media print {
  .terms-dialog {
    display: none;
  }
}

/* ==========================================================================
   Header
   Mobile-first: without JS the menu is a plain list under the logo.
   With JS (html.js) it collapses behind the toggle button below 1024px.
   ========================================================================== */

/* The background lives on ::before. Never put backdrop-filter or transform on
   .site-header itself: both create a containing block for position: fixed
   descendants and would break the full-screen mobile menu (.site-nav). */
.site-header {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--color-border);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-background);
}

.js .site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow var(--transition);
}

/* Solid background always; a shadow separates it from the content once the page scrolls */
.site-header--scrolled {
  box-shadow: var(--shadow-header);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-height);
}

.site-header__logo {
  display: inline-flex;
  flex-shrink: 0;
  padding-block: var(--space-xs);
  border-radius: var(--radius);
}

.site-header__logo img {
  width: auto;
  height: var(--logo-height);
}

/* Menu toggle (hamburger) */

.menu-toggle {
  display: none;
}

.js .menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
}

.menu-toggle__bar {
  display: block;
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Navigation */

.site-nav {
  width: 100%;
  padding-bottom: var(--space-sm);
}

.site-nav__list {
  display: flex;
  flex-direction: column;
}

.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3rem;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition);
}

/* aria-current="true": the current section, e.g. "Blog" while reading a post */
.site-nav__link:hover,
.site-nav__link[aria-current="page"],
.site-nav__link[aria-current="true"] {
  color: var(--color-text);
}

.site-nav__list li + li {
  border-top: 1px solid var(--color-border);
}

/* Current page in the stacked menu: white text + blue bar at the screen edge */
.site-nav__link[aria-current="page"]::before,
.site-nav__link[aria-current="true"]::before {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: calc(var(--container-padding) * -1);
  width: 3px;
  background-color: var(--color-primary);
}

/* Contact link: .link-arrow in blue, as the last row of the stacked menu */
.site-nav__cta {
  position: relative;
  display: flex;
  min-height: 3rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-accent);
  font-size: 1.125rem;
  background: none; /* no hover underline: the nav has its own indicator style */
}

.site-nav__cta:hover,
.site-nav__cta[aria-current="page"] {
  color: var(--color-text);
}

/* Deferred images (data-defer-src) are filled by main.js. Without JS the <noscript>
   copy is shown instead, so the empty placeholder is removed from view and a11y tree. */
html:not(.js) img[data-defer-src] {
  display: none;
}

/* Collapsed menu (JS only): full-screen panel under the header */
.js .site-nav {
  position: fixed;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--space-md) var(--container-padding) var(--space-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color-background);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear 0.2s;
}

.js .site-nav--open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--transition), transform var(--transition), visibility 0s;
}

/* Page behind the open menu must not scroll */
.menu-open {
  overflow: hidden;
}

/* Stacked menu items cascade in when the panel opens */
.js .site-nav--open .site-nav__list li,
.js .site-nav--open .site-nav__cta {
  animation: fade-up 0.5s var(--ease-out) both;
}

.js .site-nav--open .site-nav__list li:nth-child(2) { animation-delay: 50ms; }
.js .site-nav--open .site-nav__list li:nth-child(3) { animation-delay: 100ms; }
.js .site-nav--open .site-nav__list li:nth-child(4) { animation-delay: 150ms; }
.js .site-nav--open .site-nav__list li:nth-child(5) { animation-delay: 200ms; }
.js .site-nav--open .site-nav__cta { animation-delay: 250ms; }

/* Desktop: horizontal menu, toggle hidden */
@media (min-width: 1024px) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .js .menu-toggle {
    display: none;
  }

  /* The horizontal menu never cascades */
  .js .site-nav--open .site-nav__list li,
  .js .site-nav--open .site-nav__cta {
    animation: none;
  }

  .site-nav,
  .js .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    width: auto;
    padding: 0;
    overflow: visible;
    background: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-nav__list {
    flex-direction: row;
    gap: var(--space-md);
  }

  .site-nav__list li + li {
    border-top: 0;
  }

  /* min-width: short words such as "Blog" still get a 44px target on touch laptops/tablets */
  .site-nav__link {
    justify-content: center;
    min-width: 2.75rem;
    font-size: 1rem;
    min-height: 2.75rem;
  }

  /* Desktop uses the underline instead of the side bar */
  .site-nav__link[aria-current="page"]::before,
  .site-nav__link[aria-current="true"]::before {
    content: none;
  }

  /* Underline indicator for hover and current page */
  .site-nav__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0.375rem;
    left: 0;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
  }

  .site-nav__link:hover::after,
  .site-nav__link[aria-current="page"]::after,
  .site-nav__link[aria-current="true"]::after {
    transform: scaleX(1);
  }

  .site-nav__cta {
    min-height: 2.75rem;
    border-top: 0;
    font-size: 1rem;
  }

  /* Thin vertical divider between the page links and the contact link */
  .site-nav__cta::before {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: calc(var(--space-lg) / -2);
    width: 1px;
    background-color: var(--color-border);
  }
}

@media (min-width: 1280px) {
  .site-nav__list {
    gap: var(--space-lg);
  }
}

/* ==========================================================================
   Hero (home)
   Mobile: photo on top, text below. Desktop: text left, photo right.
   Entrance animations are CSS-only, so they also run without JS.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
}

/* The photo fades into the page with a mask (not an overlay): the animated image sits on its
   own layer, and an overlay could leave a 1px seam of photo at fractional edges.
   Any opaque color works as a mask; the background token is used to avoid raw color values. */
.hero__media {
  position: relative;
  height: 55svh;
  min-height: 18rem;
  max-height: 36rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, var(--color-background) 45%, transparent 97%);
  mask-image: linear-gradient(to bottom, var(--color-background) 45%, transparent 97%);
}

/* Entrance: a background-colored curtain slides off toward the left, revealing the
   photo from the right edge. Never animate the photo's own visibility (clip-path,
   opacity): it is the LCP element, and hiding it delays LCP by the animation length. */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--color-background);
  transform-origin: left;
  animation: curtain-out 1.4s var(--ease-out) both;
  pointer-events: none;
}

/* 20% taller than its window so the parallax shift (±10%) never shows an edge.
   Uses the individual `translate` property so it composes with the image's own animations. */
.hero__picture {
  position: relative;
  top: -10%;
  display: block;
  height: 120%;
  translate: 0 var(--parallax-y, 0);
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  animation:
    hero-image-zoom 1.8s var(--ease-out) both,
    hero-image-drift 24s ease-in-out 1.8s infinite alternate;
}

.hero__content {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--space-lg) * -1);
  padding-bottom: var(--space-xl);
}

.hero__eyebrow {
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.3s both;
}

.hero__eyebrow::before {
  animation: line-grow var(--duration-reveal) var(--ease-out) 0.5s both;
}

.hero__title {
  margin-bottom: var(--space-md);
  /* Grows with the viewport so the widest unbreakable part, "VIDAS E CIDADES" (~7em), always fits the column */
  font-size: clamp(2.25rem, 13vw - 0.5rem, 3.5rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  /* Sized so the longest word fits its column: never break words mid-way */
  overflow-wrap: normal;
}

/* Word mask reveal: each word is a clipped window, its inner text rises into it.
   The vertical padding (cancelled by negative margin) keeps accents unclipped:
   it must fit the tilde of "Ã" above and the cedilla of "Ç" below. */
.word {
  display: inline-block;
  margin-block: -0.2em;
  padding-block: 0.2em;
  overflow: hidden;
  vertical-align: top;
}

.word__inner {
  display: inline-block;
  animation: word-rise 1s var(--ease-out) both;
  animation-delay: calc(0.35s + var(--i, 0) * 70ms);
}

.hero__lead {
  max-width: 34rem;
  margin-bottom: var(--space-lg);
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.8s both;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.92s both;
}

/* Brand pattern: the logo's stripes as a large, faint watermark bleeding off a
   section edge (desktop only, where wide layouts leave empty space).
   The parent section needs position: relative and overflow: hidden. */
.brand-pattern {
  display: none;
}

@media (min-width: 1024px) {
  .brand-pattern {
    position: absolute;
    top: 50%;
    display: block;
    width: min(40vw, 42rem);
    aspect-ratio: 510 / 611;
    -webkit-mask: url("../img/logo/logo-symbol.svg") center / contain no-repeat;
    mask: url("../img/logo/logo-symbol.svg") center / contain no-repeat;
    opacity: 0.3;
    pointer-events: none;
  }

  .brand-pattern--left {
    left: 0;
    background: linear-gradient(to right, var(--color-primary) 20%, transparent 90%);
    transform: translate(-40%, -50%);
    animation: pattern-reveal 1.8s var(--ease-out) 0.15s both;
  }

  .brand-pattern--right {
    right: 0;
    width: min(30vw, 30rem);
    background: linear-gradient(to left, var(--color-primary) 20%, transparent 90%);
    opacity: 0.25;
    transform: translate(45%, -50%);
  }
}

/* Scroll cue: thin line with a light running down (desktop with enough height only) */
.hero__scroll {
  display: none;
}

@media (min-width: 1024px) and (min-height: 820px) {
  .hero__scroll {
    position: absolute;
    bottom: var(--space-md);
    left: max(var(--container-padding), calc(50% - var(--container-max) / 2 + var(--container-padding)));
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 2.75rem;
    height: 4.5rem;
    margin-left: -1.375rem;
    animation: fade-up var(--duration-reveal) var(--ease-out) 1.2s both;
  }

  .hero__scroll-line {
    position: relative;
    width: 1px;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-border);
  }

  .hero__scroll-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 35%;
    background-color: var(--color-accent);
    animation: scroll-cue 2.2s var(--ease-out) infinite;
  }
}

@media (min-width: 1024px) {
  .hero {
    /* Free width between the container's left edge and the photo (which starts at 50vw),
       minus a gap. Text column and title size derive from it, so text never reaches the photo. */
    --hero-text-space: calc(
      50vw
      - max(var(--container-padding), (100vw - var(--container-max)) / 2 + var(--container-padding))
      - var(--space-lg)
    );
    display: flex;
    align-items: center;
    min-height: calc(100dvh - var(--header-height));
  }

  .hero__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    height: auto;
    min-height: 0;
    max-height: none;
    -webkit-mask-image: linear-gradient(to right, transparent, var(--color-background) 25%);
    mask-image: linear-gradient(to right, transparent, var(--color-background) 25%);
  }

  /* Subtle darkening at the bottom so the scroll cue area stays calm */
  .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--color-overlay), transparent 25%);
    pointer-events: none;
  }

  .hero__image {
    object-position: 50% 50%;
  }

  .hero__content {
    margin-top: 0;
    padding-block: var(--space-xl);
  }

  .hero__text {
    max-width: min(34rem, var(--hero-text-space));
  }

  /* "VIDAS E CIDADES" (one span, ~7em) is the widest unbreakable part: dividing the free space by 7.6 keeps it on one line */
  .hero__title {
    font-size: clamp(2.5rem, calc(var(--hero-text-space) / 7.6), 4.25rem);
  }

  .hero__lead {
    font-size: 1.125rem;
  }
}

/* ==========================================================================
   Stats (home)
   ========================================================================== */

.stats {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-xl);
  background-color: var(--color-surface);
}

.stats > .container {
  position: relative;
}

.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--space-lg);
  margin: 0;
  border-top: 1px solid var(--color-border);
}

/* Value is shown above its label; DOM keeps dt before dd for screen readers */
.stats__item {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.375rem;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.stats__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background-color: var(--color-primary);
}

.stats__label {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.stats__value {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Counter keeps its final width while counting, so the unit never jumps */
.stats__value [data-count] {
  display: inline-block;
  text-align: right;
}

.stats__unit {
  color: var(--color-text-muted);
  font-size: 0.55em;
  text-decoration: none;
}

@media (min-width: 480px) {
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats {
    padding-block: calc(var(--space-xl) * 1.5);
  }

  .stats__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats__item {
    padding-block: var(--space-lg);
  }
}

/* ==========================================================================
   Segments (home): alternating photo / text rows
   ========================================================================== */

.segments {
  padding-block: var(--space-xl);
}

.segments__list {
  display: grid;
  gap: var(--space-xl);
}

.segment {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}

/* Figure = frame holder (decorative frame may extend outside it);
   viewport = the 4:3 window that clips the photo and the video. */
.segment__media {
  --frame-offset: 0.625rem;
  position: relative;
  isolation: isolate;
  margin: 0 var(--frame-offset) var(--frame-offset) 0;
}

/* Offset blue outline behind the media (mirrored on even rows).
   Shared with the founder portrait on the institutional page and the
   service media on the our-work page (Uchôa frame). */
.segment__media::before,
.history__founder-frame::before,
.service__media::before {
  content: "";
  position: absolute;
  inset: var(--frame-offset) calc(var(--frame-offset) * -1) calc(var(--frame-offset) * -1) var(--frame-offset);
  z-index: -1;
  border: 1px solid var(--color-primary);
  pointer-events: none;
}

.segment:nth-child(even) .segment__media {
  margin: 0 0 var(--frame-offset) var(--frame-offset);
}

.segment:nth-child(even) .segment__media::before {
  inset: var(--frame-offset) var(--frame-offset) calc(var(--frame-offset) * -1) calc(var(--frame-offset) * -1);
}

.segment__viewport {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Viewfinder corners over the picture: top-left and bottom-right */
.segment__viewport::after,
.service__viewport::after {
  content: "";
  position: absolute;
  inset: 0.875rem;
  z-index: 2;
  background:
    linear-gradient(var(--color-white), var(--color-white)) top left / 1.25rem 2px no-repeat,
    linear-gradient(var(--color-white), var(--color-white)) top left / 2px 1.25rem no-repeat,
    linear-gradient(var(--color-white), var(--color-white)) bottom right / 1.25rem 2px no-repeat,
    linear-gradient(var(--color-white), var(--color-white)) bottom right / 2px 1.25rem no-repeat;
  opacity: 0.85;
  pointer-events: none;
}

/* 20% taller than the viewport so the parallax shift (--parallax-y, ±10%) never shows an edge.
   Shared with the service photos on the our-work page. */
.segment__image,
.segment__video,
.service__image {
  position: absolute;
  inset: -10% 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  translate: 0 var(--parallax-y, 0);
  transition: transform 1.6s var(--ease-out);
}

/* The video fades in over the photo once it is actually playing */
.segment__video {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out), transform 1.6s var(--ease-out);
}

.segment__media.is-playing .segment__video {
  opacity: 1;
}

.segment__media:hover .segment__image,
.segment__media:hover .segment__video,
.service__media:hover .service__image {
  transform: scale(1.04);
}

/* Pause / play control (required for looping motion, WCAG 2.2.2) */
/* Bottom-left: the viewfinder corners use top-left and bottom-right */
.video-toggle {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-border);
  background-color: var(--color-overlay);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

.video-toggle[hidden] {
  display: none;
}

.video-toggle:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.video-toggle__icon--play,
.video-toggle.is-paused .video-toggle__icon--pause {
  display: none;
}

.video-toggle.is-paused .video-toggle__icon--play {
  display: block;
}

/* Big outlined index number followed by a hairline (also on the our-work page) */
.segment__index,
.service__index {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-xs);
  color: transparent;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 2rem + 3vw, 5rem);
  font-weight: 500;
  line-height: 1;
  -webkit-text-stroke: 1px var(--color-primary);
}

.segment__index::after,
.service__index::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

.segment__title {
  margin-bottom: var(--space-sm);
}

.segment__body p:not(.segment__index) {
  max-width: 34rem;
  color: var(--color-text-muted);
}

.segment__body p:last-child {
  margin-bottom: 0;
}

.segments__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

@media (min-width: 1024px) {
  .segment__media {
    --frame-offset: 1rem;
  }

  .segments {
    padding-block: calc(var(--space-xl) * 1.5);
  }

  .segments__list {
    gap: calc(var(--space-xl) * 1.5);
  }

  .segment {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .segment__media {
    grid-column: 1 / span 7;
  }

  .segment__body {
    grid-column: 8 / span 5;
  }

  /* Even rows: photo on the right (grid order only, DOM order unchanged) */
  .segment:nth-child(even) .segment__media {
    grid-column: 6 / span 7;
    grid-row: 1;
  }

  .segment:nth-child(even) .segment__body {
    grid-column: 1 / span 5;
    grid-row: 1;
  }
}

/* ==========================================================================
   About (home)
   ========================================================================== */

.about {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-xl);
  background-color: var(--color-surface);
}

/* Huge outlined founding year in the background (decorative) */
.about__year {
  position: absolute;
  top: 50%;
  right: -0.06em;
  margin: 0;
  color: transparent;
  font-family: var(--font-heading);
  font-size: clamp(9rem, 6rem + 22vw, 26rem);
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 1px var(--color-border);
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}

.about__inner {
  position: relative;
  display: grid;
  gap: var(--space-lg);
}

.about__body p {
  max-width: 36rem;
  color: var(--color-text-muted);
}

.about__body {
  margin-bottom: var(--space-md);
}

/* Card: purpose quote with the founder + quality certification */
.about__card {
  position: relative;
  align-self: center;
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-background);
}

/* Blue accent line on the card's top edge */
.about__card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 4rem;
  height: 2px;
  background-color: var(--color-primary);
}

.about__quote {
  margin: 0;
}

.about__quote blockquote {
  margin: 0 0 var(--space-md);
}

.about__quote blockquote p {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
}

/* Oversized opening quote mark in brand blue */
.about__quote blockquote p::before {
  content: "\201C";
  display: block;
  height: 0.6em;
  color: var(--color-primary);
  font-size: 2.5em;
  line-height: 1;
}

.about__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.about__photo {
  flex-shrink: 0;
  width: 5rem;
  height: auto;
  aspect-ratio: 200 / 232;
  object-fit: cover;
  border-bottom: 2px solid var(--color-primary);
}

.about__author-name {
  display: block;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.about__author-role {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.about__quality {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.about__quality-icon {
  flex-shrink: 0;
  width: 2rem;
  height: auto;
}

.about__quality p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.about__quality strong {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .about {
    padding-block: calc(var(--space-xl) * 1.5);
  }

  .about__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-xl);
    align-items: center;
  }

  /* Desktop: the year bleeds off the bottom-left corner, clear of the card */
  .about__year {
    top: auto;
    right: auto;
    bottom: -0.16em;
    left: -0.04em;
    font-size: clamp(14rem, 4rem + 16vw, 22rem);
    transform: none;
  }

  .about__card {
    padding: var(--space-lg);
  }
}

/* ==========================================================================
   Page hero (inner pages): typographic opening; on desktop the brand stripes
   fill the empty right side.
   Not a .hero, so the floating WhatsApp button shows from the start.
   Entrance animations are CSS-only, so they also run without JS.
   ========================================================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.page-hero__inner {
  position: relative;
}

.page-hero__eyebrow {
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.1s both;
}

.page-hero__eyebrow::before {
  animation: line-grow var(--duration-reveal) var(--ease-out) 0.3s both;
}

.page-hero__title {
  max-width: 11em;
  margin-bottom: var(--space-md);
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4.25rem);
  letter-spacing: 0.01em;
}

.page-hero__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.7s both;
}

/* Only the brand stripes, not the whole symbol, running from a little after the hero text to the
   right edge. Never mirrored.
   - Box: starts a fixed gap after the text. main.js (initPageHeroPattern) measures where each page's
     text really ends and sets --pattern-left; without JS, `left` assumes the widest title (~47rem),
     so the stripes never reach the text.
   - Mask, top layer first: a fade over the box's left quarter; the symbol at its own proportions
     (width = --pattern-symbol, so 147% of the box's height: the box shows its top 68%, the four full
     stripes and no shield curve), running 10% of its width past the right edge so the stripes'
     right ends never show (symbol's left edge in the box: 100% - 0.9 x width); and, under it,
     plain bars that carry each stripe's straight left part out to the box's left edge, so a wide
     box gets longer stripes without stretching the stripes' bend. The bars' stops are the
     stripes' left parts in the symbol (y 55-105, 155-205, 255-306, 355-405.6 of 611) scaled to the
     symbol's 147% height.
   Any opaque color works in a mask; the background token avoids a raw color value. */
@media (min-width: 1024px) {
  .page-hero .brand-pattern--right {
    --pattern-symbol: min(40vw, 42rem);
    --pattern-bar: var(--color-background);
    left: var(--pattern-left, calc(max(var(--container-padding), 50% - var(--container-max) / 2 + var(--container-padding)) + 50rem));
    width: auto;
    height: calc(var(--pattern-symbol) * 611 / 510 * 0.68);
    aspect-ratio: auto;
    -webkit-mask-image:
      linear-gradient(to right, transparent, var(--color-background) 25%),
      url("../img/logo/logo-symbol.svg"),
      linear-gradient(transparent 13.23%, var(--pattern-bar) 13.23% 25.26%, transparent 25.26% 37.29%,
        var(--pattern-bar) 37.29% 49.32%, transparent 49.32% 61.35%, var(--pattern-bar) 61.35% 73.62%,
        transparent 73.62% 85.41%, var(--pattern-bar) 85.41% 97.6%, transparent 97.6%);
    mask-image:
      linear-gradient(to right, transparent, var(--color-background) 25%),
      url("../img/logo/logo-symbol.svg"),
      linear-gradient(transparent 13.23%, var(--pattern-bar) 13.23% 25.26%, transparent 25.26% 37.29%,
        var(--pattern-bar) 37.29% 49.32%, transparent 49.32% 61.35%, var(--pattern-bar) 61.35% 73.62%,
        transparent 73.62% 85.41%, var(--pattern-bar) 85.41% 97.6%, transparent 97.6%);
    /* Bars: from the box's left edge to 1rem past the symbol's left edge */
    -webkit-mask-size: 100% 100%, var(--pattern-symbol) auto, calc(100% - var(--pattern-symbol) * 0.9 + 1rem) 100%;
    mask-size: 100% 100%, var(--pattern-symbol) auto, calc(100% - var(--pattern-symbol) * 0.9 + 1rem) 100%;
    -webkit-mask-position: 0 0, right calc(var(--pattern-symbol) * -0.1) top 0, 0 0;
    mask-position: 0 0, right calc(var(--pattern-symbol) * -0.1) top 0, 0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in, source-over;
    mask-composite: intersect, add;
    background: var(--color-primary);
    opacity: 0.3;
    transform: translateY(-50%);
    animation: pattern-reveal 1.8s var(--ease-out) 0.15s both;
  }
}

/* Fills the first screen, like the home hero, so the next section only shows on scroll */
@media (min-width: 1024px) {
  .page-hero {
    display: flex;
    align-items: center;
    min-height: calc(100dvh - var(--header-height));
    padding-block: calc(var(--space-xl) * 2);
  }

  .page-hero__inner {
    width: 100%;
  }

  .page-hero__lead {
    font-size: 1.125rem;
  }

}

/* ==========================================================================
   Institutional page
   ========================================================================== */

/* History: text with the founder + where the company has worked */
.history {
  padding-block: var(--space-xl);
}

.history__inner {
  display: grid;
  gap: var(--space-lg);
}

.history__body p {
  max-width: 38rem;
  color: var(--color-text-muted);
}

.history__body p:first-child {
  color: var(--color-text);
  font-size: 1.125rem;
}

.history__body p:last-child {
  margin-bottom: 0;
}

/* Founder: small framed portrait (the original photo is only 339 x 394 px) */
.history__founder {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.history__founder-frame {
  --frame-offset: 0.5rem;
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  margin: 0 var(--frame-offset) var(--frame-offset) 0;
}

.history__founder-photo {
  width: 7.5rem;
  aspect-ratio: 200 / 232;
  object-fit: cover;
}

.history__founder-name {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.history__founder-role {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Where the company has worked: two columns of states, Alagoas (the HQ) first.
   The abbreviation is visual only; screen readers get the full name. */
.history__regions-title {
  margin-bottom: var(--space-sm);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.regions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* Narrow phones: name under the abbreviation; from 480px: side by side */
.regions__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 480px) {
  .regions__item {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-sm);
  }
}

/* Short blue line on the headquarters' top edge */
.regions__item--home::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background-color: var(--color-primary);
}

.regions__code {
  flex-shrink: 0;
  min-width: 2.1em;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.regions__name {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .history {
    padding-block: calc(var(--space-xl) * 1.5);
  }

  .history__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-xl);
    align-items: center;
  }

  .history__founder-frame {
    --frame-offset: 0.625rem;
  }

  .history__founder-photo {
    width: 9rem;
  }

  .regions__item {
    padding-block: var(--space-md);
  }
}

/* Purpose, mission and vision: three statements on the surface band */
.mission {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-xl);
  background-color: var(--color-surface);
}

.mission > .container {
  position: relative;
}

.mission__list {
  display: grid;
  column-gap: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.mission__item {
  position: relative;
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.mission__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background-color: var(--color-primary);
}

.mission__title {
  margin-bottom: var(--space-xs);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.mission__text {
  max-width: 30rem;
  margin: 0;
  color: var(--color-text);
  font-size: 1.125rem;
  line-height: 1.55;
}

@media (min-width: 1024px) {
  .mission {
    padding-block: calc(var(--space-xl) * 1.5);
  }

  .mission__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mission__item {
    padding-block: var(--space-lg);
  }
}

/* Values: numbered cards. Desktop: 3 on the first row, 2 wider ones on the second */
.values {
  padding-block: var(--space-xl);
}

.values__list {
  display: grid;
  gap: var(--space-sm);
}

.value-card {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  transition: border-color 0.4s var(--ease-out);
}

.value-card:hover {
  border-color: var(--color-primary);
}

.value-card__index {
  margin: 0 0 var(--space-sm);
  color: transparent;
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 1;
  -webkit-text-stroke: 1px var(--color-primary);
}

.value-card__title {
  margin-bottom: var(--space-xs);
  font-size: 1.25rem;
}

.value-card__text {
  margin: 0;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .values__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .values {
    padding-block: calc(var(--space-xl) * 1.5);
  }

  .values__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .values__list > li {
    grid-column: span 2;
  }

  .values__list > li:nth-child(n + 4) {
    grid-column: span 3;
  }

  .value-card {
    padding: var(--space-lg);
  }
}

/* Quality: certification text + what the system ensures */
.quality {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-xl);
  background-color: var(--color-surface);
}

.quality__inner {
  position: relative;
  display: grid;
  gap: var(--space-lg);
}

.quality__body p {
  max-width: 38rem;
  color: var(--color-text-muted);
}

/* Official quality policy: quoted text with a blue rule on the left */
.quality__policy {
  max-width: 38rem;
  margin: var(--space-md) 0 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-primary);
}

.quality__policy .quality__policy-title {
  margin-bottom: var(--space-xs);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quality__policy blockquote {
  margin: 0 0 var(--space-xs);
}

.quality__body .quality__policy blockquote p {
  margin: 0;
  color: var(--color-text);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.quality__policy-meta {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.quality__panel {
  position: relative;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-background);
}

/* Blue accent line on the panel's top edge */
.quality__panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 4rem;
  height: 2px;
  background-color: var(--color-primary);
}

.quality__panel-title {
  margin-bottom: var(--space-xs);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Each item: short blue bar + label, rows split by hairlines */
.quality__list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.quality__list li + li {
  border-top: 1px solid var(--color-border);
}

.quality__list li::before {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 2px;
  background-color: var(--color-primary);
}

@media (min-width: 1024px) {
  .quality {
    padding-block: calc(var(--space-xl) * 1.5);
  }

  .quality__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-xl);
    align-items: center;
  }

  .quality__panel {
    padding: var(--space-lg);
  }
}

/* Closing call to action: dark and typographic, with two next steps.
   Deliberately different from the home's blue contact band. */
.closing-cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-xl);
}

.closing-cta__inner {
  position: relative;
  display: grid;
  gap: var(--space-md);
}

.closing-cta__title {
  max-width: 14em;
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem);
}

.closing-cta__text {
  max-width: 32rem;
  margin: 0 0 var(--space-lg);
  color: var(--color-text-muted);
  font-size: 1.0625rem;
}

.closing-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}

@media (min-width: 1024px) {
  .closing-cta {
    padding-block: calc(var(--space-xl) * 2);
  }

  .closing-cta__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-xl);
    align-items: end;
  }
}

/* ==========================================================================
   Our work page (Nosso Trabalho)
   Editorial layout: on desktop a sticky index on the left follows the
   services stacked on the right. Without JS the index is a list of anchors.
   ========================================================================== */

/* No overflow: hidden on this section or its parents: it would break the sticky index */
.services {
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.services__inner {
  display: grid;
  gap: var(--space-lg);
}

.services__aside .section-header {
  margin-bottom: var(--space-md);
}

/* Index: numbered in-page links split by hairlines */
.services-nav__list {
  border-top: 1px solid var(--color-border);
}

.services-nav__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-height: 2.75rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition);
}

/* Blue line over the hairline of the current service (set by main.js) */
.services-nav__link::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}

.services-nav__link:hover,
.services-nav__link[aria-current="true"] {
  color: var(--color-text);
}

.services-nav__link[aria-current="true"]::before {
  transform: scaleX(1);
}

.services-nav__index {
  flex-shrink: 0;
  min-width: 1.75rem;
  color: var(--color-accent);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}

/* Each service: number + title, framed media, text. Hairlines between services */
.service {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.service:first-child {
  padding-top: 0;
  border-top: 0;
}

.service:last-child {
  padding-bottom: 0;
}

.service__title {
  margin-bottom: var(--space-md);
}

.service__media {
  --frame-offset: 0.625rem;
  position: relative;
  isolation: isolate;
  margin: 0 var(--frame-offset) calc(var(--space-md) + var(--frame-offset)) 0;
}

.service__viewport {
  position: relative;
  /* A definite width: otherwise the max-height below would narrow the photo to keep 3:2 */
  width: 100%;
  aspect-ratio: 3 / 2;
  /* Set by main.js (fitServices) where the page glides service by service: lowers every
     photo by the same amount so each whole service fits on screen at its stop */
  max-height: var(--service-media-max, none);
  overflow: hidden;
  background-color: var(--color-surface);
}

.service__body p {
  max-width: 40rem;
  color: var(--color-text-muted);
}

.service__body p:first-child {
  color: var(--color-text);
  font-size: 1.125rem;
}

.service__body p:last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .services {
    padding-block: calc(var(--space-xl) * 1.5);
  }

  .services__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .services__aside {
    grid-column: 1 / span 4;
  }

  .services__list {
    grid-column: 5 / span 8;
  }

  .service {
    padding-block: calc(var(--space-xl) * 1.25);
  }

  .service__media {
    --frame-offset: 1rem;
  }
}

/* The index follows the reader only when the screen is tall enough to show all of it */
@media (min-width: 1024px) and (min-height: 40rem) {
  .services__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
    align-self: start;
  }
}

@media (min-width: 1280px) {
  .services__list {
    grid-column: 6 / span 7;
  }
}

/* Counter: on desktop screens tall enough, the index column fills the screen height and
   the number of the service being read, huge and outlined, fills the space under the
   index, rolling like an odometer (chosen by the owner, Oct 2026). Decorative and JS-only:
   main.js sets --service-index and --service-count on .services-counter.
   48rem leaves at least ~8rem for the number under the ~28rem of title and index;
   on shorter screens each service keeps showing its own number. */
.services-counter {
  /* Quick enough to end with the page's glide to the service (see initServicesNav) */
  --counter-roll: 0.6s;
  display: none;
}

@media (min-width: 1024px) and (min-height: 48rem) {
  .js .services__aside {
    display: flex;
    flex-direction: column;
    /* A definite height (not min-height): the container query units below need it */
    height: calc(100dvh - var(--header-height) - var(--space-lg) * 2);
  }

  /* Takes all the free height; the number is sized from it (container units) */
  .js .services-counter {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 0;
    margin-top: var(--space-md);
    container-type: size;
  }

  /* The big counter already shows the number: each service starts at its title */
  .js .service__index {
    display: none;
  }

  /* Where each service lands, from the index links and from the service-by-service
     scrolling of main.js (initServicesStepping): its title lines up with the top of the
     index. The margin cancels the service's top padding and 1px hairline (none on the
     first one) */
  .js .service {
    scroll-margin-top: calc(var(--header-height) + var(--space-lg) - var(--space-xl) * 1.25 - 1px);
  }

  .js .service:first-child {
    scroll-margin-top: calc(var(--header-height) + var(--space-lg));
  }
}

/* One number at a time: the column of numbers rolls up and down */
.services-counter__window {
  height: 1em;
  /* Cancels the digits' side bearing: the ink lines up with the index above */
  margin-left: -0.04em;
  overflow: hidden;
  /* Sets 1em: the digits are SVG outlines sized in em (see the HTML) */
  font-size: min(100cqh - 2.5rem, 80cqw, 18rem);
  line-height: 1;
}

.services-counter__digits {
  transform: translateY(calc((var(--service-index, 1) - 1) * -1em));
  transition: transform var(--counter-roll) var(--ease-out);
}

/* Drawn outline, not stroked text: crisp on every screen (option C chosen by the owner,
   Oct 2026). The 2px stroke ignores the SVG scale (vector-effect on each path) */
.services-counter__digits svg {
  display: block;
  width: auto;
  height: 1em;
  overflow: visible;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2px;
  stroke-linejoin: round;
}

.services-counter__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
}

/* Progress through the services: a blue line fills the hairline */
.services-counter__bar {
  position: relative;
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

.services-counter__bar::before {
  content: "";
  position: absolute;
  top: -0.5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(calc(var(--service-index, 1) / var(--service-count, 5)));
  transform-origin: left;
  transition: transform var(--counter-roll) var(--ease-out);
}

/* Safety net: never squeeze the number into a sliver */
@container (height < 8rem) {
  .services-counter__window,
  .services-counter__meta {
    display: none;
  }
}

/* ==========================================================================
   Works page (Obras)
   One card per work: cover photo, name, place and photo count. The whole card
   is the link (::after of .work__link), which opens the gallery (main.js) or,
   without JS, the first photo.
   ========================================================================== */

.works {
  padding-block: var(--space-xl);
}

.works .section-header {
  margin-bottom: var(--space-lg);
}

.works__list {
  display: grid;
  gap: var(--space-lg) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.work {
  position: relative;
}

.work__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface);
}

.work__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.work__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-sm);
  padding-top: var(--space-sm);
}

.work__title {
  margin: 0;
  font-size: 1.25rem;
}

.work__link {
  color: var(--color-text);
  text-decoration: none;
}

/* The whole card is clickable */
.work__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Focus ring around the whole card instead of the title text */
.work__link:focus-visible {
  outline: none;
}

.work__link:focus-visible::after {
  outline: var(--focus-ring);
  outline-offset: 4px;
}

.work__place {
  grid-column: 1;
  margin: 0.25rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.work__count {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (hover: hover) {
  .work:hover .work__image {
    transform: scale(1.05);
  }
}

/* Entrance, one data-reveal per card ("Surgir", chosen by the owner over a zoom and a
   text-only reveal, Oct 2026; the side-sweeping curtain felt repetitive over 15 cards):
   the card rises while its photo is uncovered, and the text follows. The card never
   fades as a whole: the first cover is the LCP on phones, so the photo stays opaque and
   an overlay in the background color fades off it instead. The card itself is the
   containing block of the link overlay, so its transform never resizes the click area */
.reveal-ready .work[data-reveal] {
  opacity: 1;
  transform: translateY(2rem);
  transition: transform 1.1s var(--ease-out) var(--reveal-delay, 0s);
}

.reveal-ready .work[data-reveal].is-visible {
  transform: none;
}

.reveal-ready .work[data-reveal] .work__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--color-background);
  pointer-events: none;
  transition: opacity 1.1s var(--ease-out) var(--reveal-delay, 0s);
}

.reveal-ready .work[data-reveal].is-visible .work__media::after {
  opacity: 0;
}

.reveal-ready .work[data-reveal] .work__body {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out) calc(var(--reveal-delay, 0s) + 0.15s);
}

.reveal-ready .work[data-reveal].is-visible .work__body {
  opacity: 1;
}

/* Grid of cards: 1 column on phones, 2 on tablets, 3 from 1024px
   (layout "C", chosen by the owner over an index list and a mosaic, Oct 2026) */
@media (min-width: 768px) {
  .works__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .works__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-lg);
  }
}

/* ==========================================================================
   Gallery (works page): full-screen photo viewer in a modal <dialog>
   ========================================================================== */

/* The page behind the open gallery must not scroll */
.gallery-open {
  overflow: hidden;
}

.gallery {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--color-backdrop);
  color: var(--color-text);
}

/* Only when open: a display value on .gallery itself would override the closed state */
.gallery[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  animation: fade-in 0.4s var(--ease-out);
}

.gallery::backdrop {
  background-color: var(--color-backdrop);
}

.gallery__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--container-padding);
  border-bottom: 1px solid var(--color-border);
}

.gallery__heading {
  display: grid;
  margin: 0;
}

.gallery__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.gallery__place {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.gallery__place:empty {
  display: none;
}

.gallery__counter {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.gallery__counter:empty {
  display: none;
}

.gallery__close,
.gallery__nav {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-border);
  background-color: var(--color-overlay);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

.gallery__close:hover,
.gallery__nav:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

.gallery__stage {
  position: relative;
  display: grid;
  padding: var(--space-sm) 0;
  overflow: hidden;
  /* Horizontal swipes go to main.js; pinch zoom still works */
  touch-action: pan-y pinch-zoom;
}

/* Photos stack in one cell and cross-fade */
.gallery__image {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  justify-self: center;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
}

.gallery__image.is-current {
  opacity: 1;
  transform: none;
}

/* Play button over a video's poster; it shows the download progress (main.js) */
.gallery__play {
  grid-area: 1 / 1;
  place-self: center;
  z-index: 1;
  min-width: 11rem;
  padding-inline: 1rem;
  /* Shrinks a little on the narrowest phones, so it fits between the arrows */
  font-size: clamp(0.875rem, 0.6rem + 1.4vw, 1rem);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 480px) {
  .gallery__play {
    min-width: 13rem;
    padding-inline: 1.5rem;
    letter-spacing: 0.1em;
  }
}

@media (min-width: 768px) {
  .gallery__play {
    min-width: 15rem;
  }
}

.gallery__play:disabled {
  cursor: progress;
}

/* A video keeps its own proportions (from its width and height), so its controls sit on the picture */
.gallery__image--video {
  height: auto;
  max-height: 100%;
  align-self: center;
}

/* Prev / next over the photo's sides, vertically centered on the stage */
.gallery__nav {
  position: absolute;
  top: calc(50% + 1.75rem);
  z-index: 1;
  transform: translateY(-50%);
}

.gallery__nav[hidden] {
  display: none;
}

.gallery__nav--prev {
  left: var(--space-xs);
}

.gallery__nav--next {
  right: var(--space-xs);
}

@media (min-width: 768px) {
  .gallery__stage {
    padding: var(--space-md) 5rem;
  }

  .gallery__nav {
    width: 3.25rem;
    height: 3.25rem;
  }

  .gallery__nav--prev {
    left: var(--space-md);
  }

  .gallery__nav--next {
    right: var(--space-md);
  }

  .gallery__title {
    font-size: 1.375rem;
  }
}

/* ==========================================================================
   Contact page (Contato)
   Intro and the list of channels on the left, the message form on the right
   (stacked on phones: intro, form, channels). The form only composes a
   WhatsApp message (main.js, initWhatsappForm): nothing is sent to the site.
   Deliberately different from the home's blue contact band (no cards, no
   blue background) and without the brand frame/stripes.
   ========================================================================== */

.contact-page {
  padding-block: var(--space-xl) calc(var(--space-xl) * 1.5);
}

.contact-page__inner {
  display: grid;
  grid-template-areas:
    "intro"
    "form"
    "channels";
  gap: var(--space-xl);
}

.contact-page__intro {
  grid-area: intro;
}

.contact-page__eyebrow {
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.1s both;
}

.contact-page__eyebrow::before {
  animation: line-grow var(--duration-reveal) var(--ease-out) 0.3s both;
}

.contact-page__title {
  margin-bottom: var(--space-md);
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4.25rem);
  letter-spacing: 0.01em;
}

.contact-page__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.6s both;
}

/* Form panel: a quiet surface with a logo-blue rule on top */
.contact-form-panel {
  grid-area: form;
  padding: clamp(1.25rem, 0.75rem + 3vw, 3rem);
  border-top: 3px solid var(--color-primary);
  background-color: var(--color-surface);
  /* `backwards`: no transform stays on the panel after its entrance */
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.45s backwards;
}

.contact-form-panel__title {
  margin-bottom: var(--space-xs);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.contact-form-panel__intro {
  margin-bottom: var(--space-lg);
  color: var(--color-text-muted);
}

.contact-form {
  display: grid;
  gap: var(--space-md);
}

.contact-form__field {
  display: grid;
  gap: 0.25rem;
}

.contact-form__label {
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Underlined fields: the line turns blue and thicker on focus (the visible focus state) */
.contact-form__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background-color: transparent;
  color: var(--color-text);
  font: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.contact-form__input:hover {
  border-bottom-color: var(--color-text-muted);
}

.contact-form__input:focus-visible {
  outline: none;
  border-bottom-color: var(--color-accent);
  box-shadow: 0 1px 0 0 var(--color-accent);
}

.contact-form__textarea {
  min-height: 8rem;
  resize: vertical;
}

/* Native select restyled; the chevron is drawn with borders (no raw colors) */
.contact-form__select {
  position: relative;
}

.contact-form__select select {
  appearance: none;
  padding-right: 2rem;
  cursor: pointer;
}

/* The open list of options uses the panel color, not the browser's white */
.contact-form__select option {
  background-color: var(--color-surface);
  color: var(--color-text);
}

.contact-form__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--color-text-muted);
  border-bottom: 1.5px solid var(--color-text-muted);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.contact-form__submit {
  gap: 0.5rem;
  margin-top: var(--space-xs);
  padding-inline: 0.75rem;
  /* Shrinks a little on the narrowest phones, so the label stays on one line */
  font-size: clamp(0.875rem, 0.6rem + 1.4vw, 1rem);
  letter-spacing: 0.06em;
}

@media (min-width: 480px) {
  .contact-form__submit {
    justify-self: start;
    gap: 0.75rem;
    padding-inline: 1.75rem;
    font-size: 1rem;
    letter-spacing: 0.1em;
  }
}

.contact-form__status:empty {
  display: none;
}

.contact-form__status {
  margin: 0;
  color: var(--color-text);
}

.contact-form__privacy {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* Channels: a plain list with hairlines, not cards */
.contact-channels {
  grid-area: channels;
}

.contact-channels__title {
  font-size: 0.875rem;
}

.contact-channels__list {
  border-top: 1px solid var(--color-border);
}

.contact-channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.75rem;
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

.contact-channel__icon {
  color: var(--color-primary);
}

.contact-channel__text {
  display: grid;
  gap: 0.125rem;
}

.contact-channel__label {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-channel__value {
  font-size: 1.0625rem;
  transition: color var(--transition);
}

.contact-channel__nowrap {
  white-space: nowrap;
}

.contact-channel__arrow {
  color: var(--color-text-muted);
  transition: transform var(--transition), color var(--transition);
}

.contact-channel:hover .contact-channel__value {
  color: var(--color-accent);
}

.contact-channel:hover .contact-channel__arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}

.contact-channels__social {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.contact-channels__social-list {
  display: flex;
  gap: var(--space-xs);
}

@media (min-width: 1024px) {
  .contact-page {
    padding-block: calc(var(--space-xl) * 1.25) calc(var(--space-xl) * 2);
  }

  /* Left column: intro, then channels; right column: the form. Not sticky: the columns
     are almost the same height, so the form would only freeze for a moment while the
     left side scrolled (felt like a hitch; owner, Oct 2026) */
  .contact-page__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas:
      "intro form"
      "channels form";
    align-items: start;
    column-gap: clamp(3rem, 6vw, 7rem);
    row-gap: var(--space-xl);
  }
}

/* ==========================================================================
   Blog (Notícias e publicações): the list of posts and the post pages
   Typographic on purpose: an editorial index with hairlines and no cover photos,
   without the brand frame, stripes or outlined numbers (saturated motifs).
   The openings animate with CSS only, so they also run without JS.
   ========================================================================== */

/* List page opening: compact, not a full-screen page hero */
.blog-intro {
  padding-block: var(--space-xl) var(--space-lg);
}

.blog-intro__eyebrow {
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.1s both;
}

.blog-intro__eyebrow::before {
  animation: line-grow var(--duration-reveal) var(--ease-out) 0.3s both;
}

.blog-intro__title {
  margin-bottom: var(--space-md);
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4.25rem);
  letter-spacing: 0.01em;
}

.blog-intro__lead {
  max-width: 36rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.6s both;
}

.blog-posts {
  padding-block: var(--space-md) calc(var(--space-xl) * 1.5);
}

/* One row per post, newest first. The whole row is the link (::after of
   .post-entry__link); on hover or focus a blue line runs along its top hairline */
.post-list {
  border-top: 1px solid var(--color-border);
}

.post-entry {
  position: relative;
  display: grid;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.post-entry::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}

.post-entry:focus-within::before {
  transform: scaleX(1);
}

.post-entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.625rem;
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.post-entry__date {
  color: var(--color-text);
}

.post-entry__body {
  display: grid;
  gap: var(--space-sm);
}

.post-entry__title {
  max-width: 26em;
  margin: 0;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
}

.post-entry__link {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

.post-entry__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Focus ring around the whole row instead of the title text */
.post-entry__link:focus-visible {
  outline: none;
}

.post-entry__link:focus-visible::after {
  outline: var(--focus-ring);
  outline-offset: 4px;
}

.post-entry__excerpt {
  max-width: 40rem;
  margin: 0;
  color: var(--color-text-muted);
}

/* Visual cue only (aria-hidden): the title is the link */
.post-entry__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.post-entry__cue svg {
  flex-shrink: 0;
  transition: transform var(--transition);
}

@media (hover: hover) {
  .post-entry:hover::before {
    transform: scaleX(1);
  }

  .post-entry:hover .post-entry__link {
    color: var(--color-accent);
  }

  .post-entry:hover .post-entry__cue svg {
    transform: translateX(4px);
  }
}

/* Post page: one reading column (up to 46rem) on a grid whose "wide" track lets
   a figure break out to 64rem. Children sit in the reading column by default */
.post {
  padding-top: var(--space-xl);
}

.post-grid {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--container-padding), 1fr)
    [wide-start] minmax(0, 9rem)
    [content-start] min(46rem, 100% - var(--container-padding) * 2) [content-end]
    minmax(0, 9rem) [wide-end]
    minmax(var(--container-padding), 1fr) [full-end];
}

.post-grid > * {
  grid-column: content;
}

.post-grid > .post-grid__wide {
  grid-column: wide;
}

.post-header__back {
  justify-self: start;
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.05s both;
}

.post-header__eyebrow {
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.1s both;
}

.post-header__eyebrow::before {
  animation: line-grow var(--duration-reveal) var(--ease-out) 0.3s both;
}

.post-header__title {
  margin-bottom: var(--space-md);
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  letter-spacing: 0.01em;
}

.post-header__meta {
  margin: 0;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.6s both;
}

/* Body rises right after the title. `backwards`: no transform stays on it afterwards */
.post-body {
  padding-block: var(--space-lg) var(--space-xl);
  font-size: 1.0625rem;
  line-height: 1.75;
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.75s backwards;
}

.post-body > p {
  margin: 0 0 1.25em;
}

/* Opening paragraph, a little larger */
.post-body > p:first-child {
  font-size: 1.1875rem;
  line-height: 1.65;
}

.post-body > h2 {
  margin: 2.5rem 0 1rem;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

.post-body p a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--transition);
}

.post-body p a:hover {
  text-decoration-thickness: 2px;
}

/* Key figures: value in Oswald over its label, each with a blue rule on the left
   that draws itself when revealed. Solid numbers, never outlined */
.post-figures {
  display: grid;
  gap: var(--space-md);
}

/* Beats the ul[role="list"] reset */
.post-body > .post-figures {
  margin: var(--space-md) 0 var(--space-lg);
}

.post-figures__item {
  position: relative;
  padding: 0.25rem 0 0.25rem var(--space-md);
}

.post-figures__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background-color: var(--color-primary);
  transform-origin: top;
}

.reveal-ready .post-figures__item::before {
  transition: transform 1s var(--ease-out) calc(var(--reveal-delay, 0s) + 0.2s);
}

.reveal-ready .post-figures__item:not(.is-visible)::before {
  transform: scaleY(0);
}

.post-figures__value {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.post-figures__label {
  max-width: 22rem;
  margin: 0.375rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Report image: breaks out of the reading column; the full-size file opens in a new tab */
.post-figure {
  margin: var(--space-md) 0 var(--space-lg);
}

.post-figure__media {
  position: relative;
  overflow: hidden;
}

.post-figure__image {
  width: 100%;
}

.post-figure__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-md);
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.post-figure__caption p {
  max-width: 40rem;
  margin: 0;
}

/* Link to a full report (PDF): a row with hairlines, like a document entry */
.post-document {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.75rem;
  margin: 0 0 var(--space-lg);
  padding-block: var(--space-md);
  border-block: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
}

.post-document__icon {
  color: var(--color-primary);
}

.post-document__text {
  display: grid;
  gap: 0.125rem;
}

.post-document__label {
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.post-document__value {
  line-height: 1.5;
  transition: color var(--transition);
}

.post-document__arrow {
  color: var(--color-text-muted);
  transition: transform var(--transition), color var(--transition);
}

.post-document:hover .post-document__value,
.post-document:hover .post-document__arrow {
  color: var(--color-accent);
}

.post-document:hover .post-document__arrow {
  transform: translateX(4px);
}

/* Key statement of a text page (e.g. privacy policy): blue rule on the left, slightly larger */
.post-body > .post-highlight {
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  border-left: 2px solid var(--color-primary);
  font-size: 1.125rem;
  line-height: 1.6;
}

.post-highlight strong {
  font-weight: 600;
}

/* Plain bulleted list inside the reading column, with logo-blue square markers */
.post-body > .post-bullets {
  margin: 0 0 1.25em;
  padding-left: 1.25rem;
  list-style: square;
}

.post-bullets li + li {
  margin-top: 0.5em;
}

.post-bullets li::marker {
  color: var(--color-primary);
}

.post-body > .post-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* "Leia também": the other posts, in the same rows as the list page */
.post-more {
  padding-block: var(--space-xl) calc(var(--space-xl) * 1.5);
}

.post-more__title {
  font-size: 0.875rem;
}

.post-more__all {
  margin-top: var(--space-md);
}

@media (min-width: 768px) {
  .post-figures {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-lg);
  }
}

/* Desktop list: date | title and summary | cue, in one row per post */
@media (min-width: 1024px) {
  .blog-intro {
    padding-block: calc(var(--space-xl) * 1.25) var(--space-xl);
  }

  .blog-intro__lead {
    font-size: 1.125rem;
  }

  .blog-posts {
    padding-bottom: calc(var(--space-xl) * 2);
  }

  .post-entry {
    grid-template-columns: minmax(12rem, 2fr) minmax(0, 7fr) auto;
    align-items: start;
    column-gap: var(--space-xl);
    padding-block: var(--space-xl);
  }

  .post-entry__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding-top: 0.625rem;
  }

  .post-entry__sep {
    display: none;
  }

  .post-entry__cue {
    padding-top: 0.75rem;
  }

  .post {
    padding-top: calc(var(--space-xl) * 1.25);
  }

  .post-body {
    font-size: 1.125rem;
  }

  .post-body > p:first-child {
    font-size: 1.25rem;
  }

  .post-more {
    padding-bottom: calc(var(--space-xl) * 2);
  }
}

/* ==========================================================================
   Not found (404.html): typographic, with the site's pages as hairline rows
   that come in right after the title. No frame, stripes or big numbers.
   The openings animate with CSS only, so they also run without JS.
   ========================================================================== */

.not-found {
  padding-block: var(--space-xl) calc(var(--space-xl) * 1.5);
}

.not-found__eyebrow {
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.1s both;
}

.not-found__eyebrow::before {
  animation: line-grow var(--duration-reveal) var(--ease-out) 0.3s both;
}

.not-found__title {
  margin-bottom: var(--space-md);
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4.25rem);
  letter-spacing: 0.01em;
}

.not-found__lead {
  max-width: 36rem;
  margin: 0 0 var(--space-lg);
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.6s both;
}

/* `backwards`: no transform stays on the list after its entrance */
.not-found__nav {
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.75s backwards;
}

.not-found__list {
  display: grid;
  column-gap: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.not-found__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 3.5rem;
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition);
}

.not-found__arrow {
  flex-shrink: 0;
  color: var(--color-primary);
  transition: transform var(--transition), color var(--transition);
}

.not-found__link:hover {
  color: var(--color-accent);
}

.not-found__link:hover .not-found__arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .not-found__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop: fills the first screen, content centered, three columns of pages */
@media (min-width: 1024px) {
  .not-found {
    display: flex;
    align-items: center;
    min-height: calc(100dvh - var(--header-height));
    padding-block: var(--space-xl);
  }

  .not-found__inner {
    width: 100%;
  }

  .not-found__lead {
    font-size: 1.125rem;
  }

  .not-found__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Contact CTA (home): the page's single full brand-blue band
   ========================================================================== */

.contact-cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-xl);
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

.contact-cta__inner {
  position: relative;
  display: grid;
  gap: var(--space-lg);
}

/* The default blue selection would be invisible on the blue band */
.contact-cta ::selection {
  background-color: var(--color-white);
  color: var(--color-primary);
}

/* Eyebrow on blue: white text and white line */
.eyebrow--light {
  color: var(--color-on-primary-muted);
}

.eyebrow--light::before {
  background-color: var(--color-white);
}

.contact-cta__title {
  margin-bottom: var(--space-sm);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
}

.contact-cta__lead {
  max-width: 30rem;
  margin: 0;
  color: var(--color-on-primary-muted);
  font-size: 1.0625rem;
}

.contact-cta__list {
  display: grid;
  gap: var(--space-sm);
}

.contact-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon label arrow"
    "icon value arrow";
  align-items: center;
  column-gap: 0.75rem;
  min-height: 5rem;
  padding: var(--space-sm);
  border: 1px solid var(--color-on-primary-line);
  background-color: var(--color-primary-deep);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.contact-card:hover {
  border-color: var(--color-white);
}

.contact-card:focus-visible {
  outline-color: var(--color-white);
}

.contact-card__icon {
  grid-area: icon;
  flex-shrink: 0;
}

.contact-card__label {
  grid-area: label;
  color: var(--color-on-primary-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-card__value {
  grid-area: value;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* Long values (e-mail, address): the e-mail has a <wbr> after "@" as its preferred
   break point; overflow-wrap is only a safety net for very narrow screens */
.contact-card__value--small {
  font-size: 1.0625rem;
  overflow-wrap: break-word;
}

.contact-card__arrow {
  grid-area: arrow;
  transition: transform 0.4s var(--ease-out);
}

.contact-card:hover .contact-card__arrow {
  transform: translateX(4px);
}

/* Brand pattern variant for the blue band: white stripes */
@media (min-width: 1024px) {
  .brand-pattern--light {
    background: linear-gradient(to left, var(--color-white) 10%, transparent 85%);
    opacity: 0.16;
  }
}

@media (min-width: 768px) {
  .contact-cta__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* E-mail and address take a full row so they read on a single line */
  .contact-cta__list li:has(.contact-card--wide) {
    grid-column: 1 / -1;
  }

  .contact-card {
    padding: var(--space-sm) var(--space-md);
    column-gap: var(--space-sm);
  }
}

@media (min-width: 1024px) {
  .contact-cta {
    padding-block: calc(var(--space-xl) * 1.5);
  }

  .contact-cta__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-xl);
    align-items: center;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--color-border);
  background-color: var(--color-background);
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.site-footer__main {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-xl) var(--space-lg);
}

.site-footer__logo {
  display: inline-flex;
  margin-bottom: var(--space-sm);
}

.site-footer__logo img {
  width: auto;
  height: 3.25rem;
}

.site-footer__brand p {
  max-width: 24rem;
  margin: 0;
}

.site-footer__title {
  margin-bottom: var(--space-sm);
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.site-footer__links {
  display: grid;
}

/* Footer links: muted text, white on hover, at least 44×44px to tap
   (min-width matters for short words such as "Blog") */
.site-footer a:not(.site-footer__logo):not(.social-link) {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--color-text-muted);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--transition);
}

.site-footer a:not(.site-footer__logo):not(.social-link):hover {
  color: var(--color-text);
}

.site-footer__address {
  font-style: normal;
  line-height: 1.5;
}

.site-footer__address a {
  padding-block: 0.25rem;
}

.site-footer__social {
  display: flex;
  gap: var(--space-xs);
}

.social-link {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}

.social-link:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white);
}

.site-footer__bottom {
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-md);
  padding-block: var(--space-xs);
}

.site-footer__bottom-inner p {
  margin: 0;
  padding-block: var(--space-xs);
}

.site-footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-md);
}

.site-footer__top svg {
  transition: transform var(--transition);
}

.site-footer__top:hover svg {
  transform: translateY(-3px);
}

@media (min-width: 768px) {
  .site-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .site-footer__main {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
    padding-block: calc(var(--space-xl) * 1.25) var(--space-xl);
  }
}

/* Mouse pointers do not need 44px rows: tighter link list (still >= 24px, WCAG 2.5.8) */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .site-footer a:not(.site-footer__logo):not(.social-link) {
    min-height: 2rem;
  }
}

/* ==========================================================================
   Floating WhatsApp button
   Shown once the visitor leaves the hero; hidden again over the contact band
   and the footer, where WhatsApp is already on screen. Hidden state only
   applies after main.js adds .float-ready, so it never depends on JS to show.
   ========================================================================== */

.whatsapp-float {
  position: fixed;
  right: max(var(--space-sm), env(safe-area-inset-right));
  bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  z-index: 90; /* below the header (100), so the open mobile menu covers it */
  display: flex;
  align-items: center;
  height: 3.5rem;
  border-radius: 1.75rem;
  background-color: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  box-shadow: var(--shadow-header);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.4s var(--ease-out),
    visibility 0s,
    background-color var(--transition);
}

.whatsapp-float:hover {
  background-color: var(--color-primary-dark);
}

.whatsapp-float:focus-visible {
  outline-offset: 4px;
}

.whatsapp-float__icon {
  flex-shrink: 0;
  width: 3.5rem;
  padding: 0.875rem;
}

/* Label slides out on hover (desktop pointers only) */
.whatsapp-float__label {
  max-width: 0;
  overflow: hidden;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: max-width 0.5s var(--ease-out), padding 0.5s var(--ease-out);
}

@media (hover: hover) {
  .whatsapp-float:hover .whatsapp-float__label,
  .whatsapp-float:focus-visible .whatsapp-float__label {
    max-width: 12rem;
    padding-right: 1.25rem;
  }
}

.float-ready .whatsapp-float:not(.is-visible) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem) scale(0.9);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.4s var(--ease-out),
    visibility 0s linear 0.4s;
}

@media (min-width: 1024px) {
  .whatsapp-float {
    right: var(--space-lg);
    bottom: var(--space-lg);
  }
}

@media print {
  .whatsapp-float {
    display: none;
  }
}

/* ==========================================================================
   Portal (domain entry page, index.html)
   Two immersive panels, one per company: the looping video fills the panel and
   the company name, a one-line description, a blue "Acessar o site" button and
   Instagram sit over a dark shade at its foot. On tablets and up the panels
   fill the screen height; a slim institutional footer closes the page and
   holds the single pause control for both videos.
   Brand cues: the symbol above the title, the logo blue on the buttons and a
   blue bar (the logo's bar color) running along the panel's foot on hover.
   On purpose it does not use the Uchôa frame or the brand stripes: they
   already appear across the site (owner, Oct 2026).
   The whole panel is the link (stretched ::after); Instagram sits above it.
   Entrance animations are CSS-only, so they also run without JS. The photos
   are LCP candidates: they are revealed by a curtain over them, never by
   animating their own visibility.
   Layering inside a panel (isolated): media z -1 < content < link overlay 1
   < Instagram and blue bar 2 < dimming layer 3 < entrance curtain 4.
   ========================================================================== */

.portal-page {
  display: flex;
  flex-direction: column;
}

.portal {
  display: flex;
  flex: 1;
}

.portal__inner {
  display: flex;
  flex-direction: column;
  max-width: 120rem;
  padding-block: var(--space-lg);
}

.portal__intro {
  display: grid;
  justify-items: center;
  margin-bottom: var(--space-lg);
  text-align: center;
}

.portal__symbol {
  width: auto;
  height: 2.5rem;
  margin-bottom: var(--space-sm);
  animation: fade-up var(--duration-reveal) var(--ease-out) both;
}

.portal__title {
  margin-bottom: var(--space-xs);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  letter-spacing: 0.04em;
}

.portal__title .word__inner {
  animation-delay: calc(0.15s + var(--i, 0) * 70ms);
}

/* Below tablets: "empresas" always on its own line. Otherwise the fallback font (wider)
   wraps where Oswald does not, and the swap to Oswald shifts the page up (CLS) */
.portal__title-last {
  display: block;
}

.portal__lead {
  margin: 0;
  color: var(--color-text-muted);
  animation: fade-up var(--duration-reveal) var(--ease-out) 0.45s both;
}

.portal__controls {
  display: flex;
  justify-content: center;
  min-height: 2.75rem;
  margin-top: var(--space-xs);
}

.portal__list {
  display: grid;
  gap: var(--space-md);
}

/* 4:5 on phones; capped on large phones/small tablets so a panel never fills the
   screen (the explicit width keeps it full width when the cap applies).
   A size container: the logo scales with the panel, and narrow panels (e.g. phone in
   landscape) tighten their content. */
.portal-card {
  --portal-delay: 0.4s;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 32rem;
  overflow: hidden;
  background-color: var(--color-surface);
}

.portal-card:nth-child(2) {
  --portal-delay: 0.55s;
}

/* Entrance curtain: lifts off the panel, bottom to top */
.portal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background-color: var(--color-background);
  transform-origin: top;
  animation: curtain-up 1.3s var(--ease-out) var(--portal-delay) both;
  pointer-events: none;
}

/* Dimming layer: steps the other panel back while one is hovered or focused */
.portal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-color: var(--color-background);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}

/* Not a stacking context (no z-index), so its children layer inside the panel */
.portal-card__media {
  position: absolute;
  inset: 0;
}

.portal-card__image,
.portal-card__video {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}

.portal-card__image {
  animation: hero-image-zoom 1.8s var(--ease-out) var(--portal-delay) backwards;
}

/* The video fades in over the photo once it is actually playing */
.portal-card__video {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out), transform 1.6s var(--ease-out);
}

.portal-card__media.is-playing .portal-card__video {
  opacity: 1;
}

/* Shade rising from the foot, solid under the text so the gray logo keeps its contrast */
.portal-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--color-background) 18%, transparent 72%);
  opacity: 0.92;
  transition: opacity 0.6s var(--ease-out);
}

/* Logo-blue bar along the foot, drawn in on hover / keyboard focus */
.portal-card__media::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 4px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}

/* No transform may ever apply to an ancestor of the link: it would become the containing
   block of the link's ::after (shrinking the clickable area to it), and the switch back
   when the animation ends counts as a layout shift. So the name and the description rise
   (transform) and the row holding the link only fades (opacity). */
.portal-card__body {
  display: grid;
  gap: var(--space-sm);
  padding: clamp(1.25rem, 6cqi, 2.75rem);
}

.portal-card__title {
  margin: 0;
  animation: fade-up var(--duration-reveal) var(--ease-out) calc(var(--portal-delay) + 0.45s) both;
}

.portal-card__logo {
  width: clamp(9rem, 34cqi, 15rem);
}

.portal-card__tagline {
  margin: 0;
  color: var(--color-text);
  text-wrap: balance;
  font-size: clamp(0.9375rem, 0.85rem + 0.6cqi, 1.0625rem);
  animation: fade-up var(--duration-reveal) var(--ease-out) calc(var(--portal-delay) + 0.55s) both;
}

.portal-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
  animation: fade-in var(--duration-reveal) var(--ease-out) calc(var(--portal-delay) + 0.7s) backwards;
}

/* Blue square button look, built on the link (it must stay unpositioned so its
   ::after can cover the whole panel; .button is positioned, so it is not reused) */
.portal-card__link,
.portal-card__link:hover {
  min-height: 2.75rem;
  padding-inline: 1.25rem;
  background: var(--color-primary);
  color: var(--color-white);
  white-space: nowrap;
  transition: background-color var(--transition);
}

@container (max-width: 20rem) {
  .portal-card__body {
    padding: var(--space-sm);
  }

  .portal-card__link,
  .portal-card__link:hover {
    gap: 0.5rem;
    padding-inline: 0.875rem;
  }
}

/* The link covers the whole panel; its focus ring is drawn inside the panel's edge */
.portal-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.portal-card__link:focus-visible {
  outline: none;
}

.portal-card__link:focus-visible::after {
  outline: var(--focus-ring);
  outline-offset: -3px;
}

.portal-card__social {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  border-color: var(--color-on-primary-line);
  color: var(--color-white);
}

.portal-card:focus-within .portal-card__media::before {
  transform: scaleX(1);
}

@media (hover: hover) {
  .portal-card:hover .portal-card__image,
  .portal-card:hover .portal-card__video {
    transform: scale(1.05);
  }

  .portal-card:hover .portal-card__media::after {
    opacity: 0.8;
  }

  .portal-card:hover .portal-card__media::before {
    transform: scaleX(1);
  }

  .portal-card:hover .portal-card__link {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
  }

  .portal-card:hover .portal-card__link .link-arrow__icon {
    transform: translateX(4px);
  }

  .portal__list:has(.portal-card:hover) .portal-card:not(:hover)::after {
    opacity: 0.5;
  }
}

.portal__list:has(.portal-card__link:focus-visible) .portal-card:not(:focus-within)::after {
  opacity: 0.5;
}

/* Tablets and up: the panels fill the screen height left by the title
  (stacked on portrait screens, side by side on landscape ones). */
@media (min-width: 768px) {
  .portal__title-last {
    display: inline-block;
  }

  .portal__symbol {
    height: clamp(2.5rem, 5dvh, 3rem);
  }

  .portal__intro {
    margin-bottom: clamp(var(--space-md), 4dvh, var(--space-lg));
  }

  .portal__list {
    flex: 1;
    grid-auto-rows: minmax(15rem, 1fr);
  }

  .portal-card {
    aspect-ratio: auto;
    max-height: none;
  }
}

@media (min-width: 768px) and (orientation: landscape) {
  .portal__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(20rem, 1fr);
  }
}

.portal-video-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.portal-video-toggle:hover {
  color: var(--color-text);
}

.portal-video-toggle {
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  cursor: pointer;
}

.portal-video-toggle[hidden] {
  display: none;
}

.portal-video-toggle .video-toggle__icon--play,
.portal-video-toggle.is-paused .video-toggle__icon--pause {
  display: none;
}

.portal-video-toggle.is-paused .video-toggle__icon--play {
  display: block;
}

/* ==========================================================================
   Reveal on scroll
   Hidden state only applies after main.js adds .reveal-ready to <html>,
   so content is never hidden if the script fails or is disabled.
   ========================================================================== */

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-reveal) var(--ease-out) var(--reveal-delay, 0s),
    transform var(--duration-reveal) var(--ease-out) var(--reveal-delay, 0s);
}

.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Image variant: the photo wipes open (from the left; from the right on even
   segment rows) while the picture inside settles from a slight zoom */
/* A background-colored curtain slides off the photo. Never use clip-path to hide it:
   a fully clipped element counts as "not intersecting" for IntersectionObserver
   and for native lazy loading, so the reveal or the image download may never happen. */
.reveal-ready [data-reveal="image"] {
  opacity: 1;
  transform: none;
}

.reveal-ready [data-reveal="image"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4; /* above the viewfinder corners and the video control */
  background-color: var(--color-background);
  transform-origin: right;
  transition: transform 1.2s var(--ease-out) var(--reveal-delay, 0s);
  pointer-events: none;
}

/* Even rows: the curtain leaves toward the left */
.reveal-ready .segment:nth-child(even) [data-reveal="image"]::after {
  transform-origin: left;
}

.reveal-ready [data-reveal="image"].is-visible::after {
  transform: scaleX(0);
}

.reveal-ready [data-reveal="image"] img {
  transition: transform 1.6s var(--ease-out) var(--reveal-delay, 0s);
}

/* :not(.is-visible) so the settled state never loses on specificity */
.reveal-ready [data-reveal="image"]:not(.is-visible) img {
  transform: scale(1.12);
}

/* Brand lines draw themselves when their block is revealed */
.eyebrow::before,
.stats__item::before,
.about__card::before,
.segment__index::after,
.service__index::after,
.regions__item--home::before,
.mission__item::before,
.quality__panel::before {
  transform-origin: left;
}

.reveal-ready [data-reveal] .eyebrow::before,
.reveal-ready .stats__item::before,
.reveal-ready .about__card::before,
.reveal-ready .segment__index::after,
.reveal-ready .service__index::after,
.reveal-ready .regions__item--home::before,
.reveal-ready .mission__item::before,
.reveal-ready .quality__panel::before {
  transition: transform 1s var(--ease-out) calc(var(--reveal-delay, 0s) + 0.3s);
}

.reveal-ready [data-reveal]:not(.is-visible) .eyebrow::before,
.reveal-ready .stats__item:not(.is-visible)::before,
.reveal-ready .about__card:not(.is-visible)::before,
.reveal-ready .segment__body:not(.is-visible) .segment__index::after,
.reveal-ready .service__header:not(.is-visible) .service__index::after,
.reveal-ready .regions__item--home:not(.is-visible)::before,
.reveal-ready .mission__item:not(.is-visible)::before,
.reveal-ready .quality__panel:not(.is-visible)::before {
  transform: scaleX(0);
}

/* Segment and service frames slide out from behind the photo right after the curtain */
.reveal-ready .segment__media::before,
.reveal-ready .service__media::before {
  transition:
    opacity 0.9s var(--ease-out) calc(var(--reveal-delay, 0s) + 0.5s),
    transform 0.9s var(--ease-out) calc(var(--reveal-delay, 0s) + 0.5s);
}

.reveal-ready .segment__media:not(.is-visible)::before,
.reveal-ready .service__media:not(.is-visible)::before {
  opacity: 0;
  transform: translate(calc(var(--frame-offset) * -1), calc(var(--frame-offset) * -1));
}

.reveal-ready .segment:nth-child(even) .segment__media:not(.is-visible)::before {
  transform: translate(var(--frame-offset), calc(var(--frame-offset) * -1));
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Starts low enough that accents (the tilde of "Ã") stay below the word's mask */
@keyframes word-rise {
  from {
    transform: translateY(140%);
  }
  to {
    transform: none;
  }
}

@keyframes line-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Curtain shrinks toward its transform-origin, uncovering what is behind it */
@keyframes curtain-out {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@keyframes hero-image-zoom {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}

/* Slow cinematic drift after the entrance */
@keyframes hero-image-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* Vertical curtain: shrinks toward its transform-origin (top: lifts off upward) */
@keyframes curtain-up {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

/* Watermark draws in from the left edge */
@keyframes pattern-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes scroll-cue {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(300%);
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important; /* exception: must override every animation */
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}