/* === SN&CIA — Editorial Premium ===
   Cream-dominant palette, dark hero, Fraunces display serif with italic accents,
   Inter for UI body, JetBrains Mono for technical labels.
   Calibrated gold replaces the saturated yellow. */

:root {
  /* === Palette — cream dominant === */
  --cream: #F4F0E8;
  --cream-2: #EDE7DA;
  --cream-3: #E3DCCB;
  --paper: #FBF8F1;
  --paper-2: #F8F4EB;
  --black: #0B0B0B;
  --ink: #181715;
  --ink-2: #2B2927;
  --ink-3: #3F3C38;
  --ink-dim: rgba(24, 23, 21, 0.62);
  --ink-muted: rgba(24, 23, 21, 0.42);
  --ink-faint: rgba(24, 23, 21, 0.14);
  --line: rgba(24, 23, 21, 0.12);
  --line-soft: rgba(24, 23, 21, 0.07);
  --line-strong: rgba(24, 23, 21, 0.25);

  /* === Gold accent — calibrated, editorial (not saturated yellow) === */
  --gold-50:  #F4ECD7;
  --gold-100: #E9D9AC;
  --gold-200: #D9BF7A;
  --gold-300: #C8A14A;   /* primary accent */
  --gold-400: #B0863A;
  --gold-500: #946D2D;   /* deep / for text-on-cream */
  --gold-glow: rgba(200, 161, 74, 0.18);
  --gold-soft: rgba(200, 161, 74, 0.08);

  /* Backwards-compatible aliases (so legacy --yellow still resolves). */
  --yellow: var(--gold-300);
  --yellow-dark: var(--gold-500);
  --yellow-soft: var(--gold-glow);

  /* === Dark variant (for hero & footer) === */
  --dark-bg: #0B0B0B;
  --dark-bg-2: #131211;
  --dark-ink: #F4F0E8;
  --dark-ink-dim: rgba(244, 240, 232, 0.62);
  --dark-ink-muted: rgba(244, 240, 232, 0.40);
  --dark-line: rgba(244, 240, 232, 0.12);
  --dark-line-soft: rgba(244, 240, 232, 0.06);

  /* === Typography — Direction B (boutique distinctive) ===
     Fraunces is a variable display serif with opsz/wght/ital/SOFT/WONK axes.
     Inter is the UI/body workhorse. JetBrains Mono for technical labels.
     This stack rejects the "Big Four Open Sans" generic look in favor of
     editorial premium typography — the typographic equivalent of the
     boutique's "selo moral dos fundadores". */
  --font-sans: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-serif: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid type scale — modular, editorial */
  --fs-3xs: clamp(10px, 0.7vw, 11px);
  --fs-2xs: clamp(11px, 0.78vw, 12.5px);
  --fs-xs:  clamp(12px, 0.9vw, 14px);
  --fs-sm:  clamp(13.5px, 1vw, 15.5px);
  --fs-md:  clamp(15px, 1.1vw, 17.5px);
  --fs-lg:  clamp(17px, 1.3vw, 20px);
  --fs-xl:  clamp(20px, 1.6vw, 26px);
  --fs-2xl: clamp(26px, 2.2vw, 36px);
  --fs-3xl: clamp(36px, 4vw, 60px);
  --fs-4xl: clamp(48px, 5.6vw, 96px);
  --fs-5xl: clamp(64px, 8vw, 148px);
  --fs-6xl: clamp(96px, 14vw, 220px);

  --lh-tight: 0.94;
  --lh-snug: 1.08;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.025em;
  --tracking-display: -0.03em;
  --tracking-mono: 0.18em;

  /* === Spacing — 8pt grid === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --pad: clamp(24px, 5vw, 88px);
  --pad-sm: clamp(16px, 3vw, 32px);
  --section-y: clamp(96px, 12vw, 176px);

  /* === Motion — editorial easing curves === */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;
  --dur-slower: 900ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 0, "ss02" 0;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Fraunces — tame discretionary ligatures and stylistic alternates so
   words with "ffi", "fl", "ç", "é" render with standard glyphs. Applied
   to every element using --font-display / --font-serif to avoid wonky
   rendering on words like "Afiançamos". */
.hero-title, .section-title, .manifesto-pull, .manifesto-pillars .p-label,
.svc-card-name, .step-title, .num-val, .sector-name, .case-metric-val,
.case-glyph, .case-title, .insight-card h3, .contact-headline,
.section-subtitle, .cred-k, .tripod-name, .tripod-subtitle,
.metric-row .value, .footer-tag, .mega-featured h5,
.field input, .field select, .field textarea,
.clients-title, .drawer-label, .legal-head h2 {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1,
                         "dlig" 0, "ss01" 0, "ss02" 0, "ss03" 0,
                         "swsh" 0, "salt" 0;
  font-variant-ligatures: common-ligatures no-discretionary-ligatures;
  font-variant-alternates: normal;
  font-variation-settings: "SOFT" 50, "WONK" 0;
}

/* Refined focus state for accessibility */
*:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
  border-radius: 1px;
}
.cta-btn:focus-visible,
.contact-submit:focus-visible {
  outline-offset: 4px;
}

/* Skip-to-main link — visible only on focus, accessible to keyboard / SR users.
   Sits above the fixed header so users tabbing into the page see it first. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 2px;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
}
main:focus { outline: none; }

/* Scale-feedback — touch press feedback for primary tappable controls.
   Reinforces tap registration on mobile (Apple HIG / Material). */
.cta-btn,
.contact-submit,
.brand,
.svc-card,
.sector,
.tripod-card,
.insight-card,
.case-card,
.lang-toggle button {
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform 120ms var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.cta-btn:active,
.contact-submit:active:not(:disabled) {
  transform: scale(0.97);
}
.svc-card:active,
.tripod-card:active,
.case-card:active,
.insight-card:active {
  transform: scale(0.995);
}

/* Gold contrast helper — for small mono labels on cream/paper backgrounds.
   Pure #e6a818 on #F4F0E8 is ~3.0:1 (below AA 4.5:1). For text under 18px
   in light contexts we use --gold-500 (#946D2D ~5.7:1). The accent #e6a818
   stays for: large display text, dark backgrounds, and decorative elements. */
.eyebrow,
.svc-card-num,
.svc-card-tag,
.case-tag,
.insight-card .tag,
.tripod-num,
.tripod-tags li::before,
.sector-glyph,
.step-num,
.manifesto-pillars .p-num,
.mega-col h4,
.mega-featured .tag,
.field label,
.cred-k {
  color: var(--gold-500);
}
.eyebrow::before,
.step-num::after {
  background: var(--gold-500);
}

/* (Type rendering — Open Sans is a static font; no variation axes needed.
    We keep standard ligatures + kerning enabled globally via body.) */

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--yellow); color: var(--ink); }

/* ============================================================
   HEADER — clean, Deloitte-style with mega-menu
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(244, 240, 232, 0);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, backdrop-filter .3s, padding .3s;
  padding: 24px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header.scrolled,
.site-header.mega-open,
.site-header.dark-hero-scrolled {
  background: rgba(244, 240, 232, 0.96);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
  padding: 16px var(--pad);
}
.site-header.over-dark:not(.scrolled):not(.mega-open) {
  color: var(--cream);
}
.site-header.over-dark:not(.scrolled):not(.mega-open) .brand-text .mark-big,
.site-header.over-dark:not(.scrolled):not(.mega-open) .brand-text .mark-small,
.site-header.over-dark:not(.scrolled):not(.mega-open) .nav > a,
.site-header.over-dark:not(.scrolled):not(.mega-open) .nav-item > a,
.site-header.over-dark:not(.scrolled):not(.mega-open) .lang-toggle button {
  color: var(--cream);
}
.site-header.over-dark:not(.scrolled):not(.mega-open) .lang-toggle {
  border-color: var(--dark-line);
}
.site-header.over-dark:not(.scrolled):not(.mega-open) .cta-btn.ghost {
  color: var(--cream);
  border-color: rgba(244, 240, 232, 0.35);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  text-decoration: none;
}
.brand .logo-mark {
  width: 40px;
  height: 40px;
  display: block;
  flex: none;
  transition: filter .3s var(--ease-out);
}
.site-header.over-dark:not(.scrolled):not(.mega-open) .brand .logo-mark path[fill="#000"],
.site-header.over-dark:not(.scrolled):not(.mega-open) .brand .logo-mark path:not([fill="#FEBF2C"]) {
  fill: var(--cream);
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-text .mark-big {
  font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-text .mark-small {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--ink-dim);
  margin-top: 4px;
  text-transform: uppercase;
  font-weight: 500;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.nav-item { position: relative; }
.nav > a,
.nav-item > a {
  position: relative;
  color: var(--ink-2);
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.nav > a:hover,
.nav-item:hover > a {
  color: var(--ink);
}
.nav-item > a::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px;
  bottom: 6px;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-item:hover > a::after,
.nav-item:focus-within > a::after { transform: scaleX(1); }

.site-header.over-dark:not(.scrolled):not(.mega-open) .nav-item > a::after,
.site-header.over-dark:not(.scrolled):not(.mega-open) .nav > a::after {
  background: var(--gold-300);
}

/* Direct nav links (e.g. "Fale Conosco" — not wrapped in .nav-item) */
.nav > a::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px;
  bottom: 6px;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav > a:hover::after,
.nav > a:focus-visible::after { transform: scaleX(1); }

/* Mega menu */
.mega-panel {
  position: fixed;
  left: 0; right: 0;
  top: 64px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.15);
  padding: 48px var(--pad) 56px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s, transform .25s, visibility .25s;
  z-index: 99;
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 60px;
}
.mega-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-col h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #e6a818;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 500;
}
.mega-col ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.mega-col li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color .2s, padding .2s;
}
.mega-col li a:hover {
  color: #e6a818;
  padding-left: 6px;
}
.mega-col li a .arrow {
  font-size: 14px;
  color: var(--ink-muted);
  transition: transform .2s, color .2s;
}
.mega-col li a:hover .arrow {
  transform: translateX(4px);
  color: #e6a818;
}
.mega-featured {
  background: var(--cream-3);
  padding: 28px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mega-featured .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #e6a818;
  text-transform: uppercase;
}
.mega-featured h5 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 32, "SOFT" 50, "WONK" 0;
}
.mega-featured h5 em { font-style: italic; color: #e6a818; }
.mega-featured .meta {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: auto;
}

.lang-toggle {
  display: flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  border-radius: 2px;
}
.lang-toggle button {
  color: var(--ink-dim);
  padding: 5px 10px;
  transition: all .2s;
  background: transparent;
}
.lang-toggle button.active { color: var(--paper); background: var(--ink); }

/* Header right cluster — lang toggle + hamburger */
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Hamburger button — hidden on desktop, visible on mobile */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.nav-toggle:hover { background: rgba(24,23,21,0.04); }
.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transition: background var(--dur-base) var(--ease-out);
}
.site-header.over-dark:not(.scrolled):not(.mega-open) .nav-toggle {
  border-color: rgba(244, 240, 232, 0.30);
}
.site-header.over-dark:not(.scrolled):not(.mega-open) .nav-toggle span {
  background: var(--cream);
}

/* Drawer scrim — semi-transparent overlay behind drawer */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 11, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility var(--dur-base) var(--ease-out);
  z-index: 198;
}
.drawer-scrim.open {
  opacity: 1;
  visibility: visible;
}

/* Mobile drawer — slides in from right */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 88vw);
  background: var(--paper);
  border-left: 1px solid var(--line);
  z-index: 199;
  transform: translateX(100%);
  transition: transform 380ms var(--ease-out-strong);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px -20px rgba(0,0,0,0.20);
}
.mobile-drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
}
.drawer-title {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 500;
}
.drawer-close {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: background var(--dur-base) var(--ease-out);
}
.drawer-close:hover { background: var(--cream-2); }

.drawer-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  overflow-y: auto;
}
.drawer-nav a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur-base) var(--ease-out),
              padding-left var(--dur-base) var(--ease-out);
}
.drawer-nav a:hover {
  background: var(--cream-2);
  padding-left: 34px;
}
.drawer-nav a:last-child { border-bottom: none; }
.drawer-num {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.22em;
  color: var(--gold-500);
  font-weight: 500;
  min-width: 28px;
}
.drawer-label {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 6vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.0;
  font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0;
}

.drawer-footer {
  padding: 24px 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-start;
}

/* Mobile: show hamburger, hide desktop nav */
@media (max-width: 820px) {
  .nav-toggle { display: flex; }
}
@media (min-width: 821px) {
  .nav-toggle { display: none; }
  .mobile-drawer, .drawer-scrim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer { transition: none; }
  .drawer-scrim { transition: none; }
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.015em;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out-strong);
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
}
.cta-btn:hover { background: var(--gold-500); color: var(--paper); }
.cta-btn svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
.cta-btn:hover svg { transform: translateX(3px); }

.cta-btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.cta-btn.ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.cta-btn.yellow { background: var(--gold-300); color: var(--ink); }
.cta-btn.yellow:hover { background: var(--gold-500); color: var(--paper); }

/* ============================================================
   HERO — Dark editorial with subtle metrics panel
   ============================================================ */
.hero {
  background: var(--dark-bg);
  color: var(--dark-ink);
  min-height: 100vh;
  padding: 168px var(--pad) 96px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ── Hero background image — corporate scene, harmonized to the dark palette ── */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-bg-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  /* Push the photo into the site's warm, low-key palette:
     sepia → strip the cool blue cast and warm the scene toward gold ·
     hue-rotate → align the sepia with the site gold (#e6a818) ·
     contrast → preserve depth in the architectural shadows ·
     brightness → bring the bright scene down to hero-grade luminosity ·
     saturate → keep meaningful color without over-saturating */
  filter:
    sepia(0.55)
    hue-rotate(-6deg)
    saturate(1.15)
    contrast(1.10)
    brightness(0.45);
  opacity: 0.92;
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Soft bottom-fade into the cream of the next section */
    linear-gradient(to bottom, transparent 72%, var(--dark-bg) 100%),
    /* Vertical readability pass — slightly deeper at the very top/bottom */
    linear-gradient(180deg, rgba(11, 11, 11, 0.50) 0%, rgba(11, 11, 11, 0.22) 38%, rgba(11, 11, 11, 0.45) 100%),
    /* Horizontal vignette: gentle darken at both far edges, lets the
       scene breathe across the center, with a slightly stronger pass on
       the left to anchor the text column without going full-black-bar. */
    linear-gradient(90deg, rgba(11, 11, 11, 0.55) 0%, rgba(11, 11, 11, 0.22) 30%, rgba(11, 11, 11, 0.08) 65%, rgba(11, 11, 11, 0.18) 100%),
    /* Primary gold radial on the upper right — main brand glow */
    radial-gradient(ellipse 1300px 750px at 86% 22%, rgba(230, 168, 24, 0.18), transparent 65%),
    /* Secondary gold radial on the lower-left — anchors the gold near the text */
    radial-gradient(ellipse 900px 560px at 18% 78%, rgba(230, 168, 24, 0.10), transparent 60%);
}
/* Subtle text shadow on the hero copy to preserve crisp readability
   against the photographic background. The shadow is large and soft so
   it reads as ambient depth, not a visible drop-shadow halo. */
.hero-left .hero-title,
.hero-left .hero-sub,
.hero-left .hero-kicker {
  text-shadow:
    0 2px 28px rgba(0, 0, 0, 0.72),
    0 1px 4px rgba(0, 0, 0, 0.5),
    0 0 2px rgba(0, 0, 0, 0.4);
}
@media (max-width: 980px) {
  /* On narrower screens the text occupies the full width — bias the wash
     darker so the photo doesn't compete with the title at small sizes. */
  .hero-bg-image { opacity: 0.72; }
}
@media (max-width: 980px) {
  /* On narrower viewports keep the text legible by pushing the wash darker */
  .hero-video-media { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  /* Pause the loop and dim the still further for users that opted out */
  .hero-video-media { animation: none; }
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 15% 90%, rgba(200, 161, 74, 0.10), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(200, 161, 74, 0.05), transparent 60%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--cream));
  z-index: 2;
  pointer-events: none;
}

.hero-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e6a818;
  margin-bottom: var(--space-7);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 500;
}
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  max-width: 1100px;
  width: 100%;
}
.hero-kicker::before {
  content: '';
  width: 36px; height: 1px;
  background: var(--gold-300);
  display: inline-block;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(48px, 6.4vw, 108px);
  line-height: 0.96;
  letter-spacing: -0.026em;
  max-width: 13ch;
  margin-bottom: 40px;
  color: var(--dark-ink);
  font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 0;
}
.hero-title .em {
  font-style: italic;
  color: #e6a818;
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
}
.hero-title .thin {
  font-family: var(--font-display);
  font-weight: 280;
  font-style: normal;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0;
}

/* (Hero entrance choreography removida — preferência do usuário.) */

/* ============================================================
   SOLUTIONS PAGE (hash route #solucoes and #solucoes-{slug})
   Dedicated long-form page with 6 solutions in sequence.
   Each solution has: number + name + tagline + intro + pull-quote
   + 3 sub-sections (why / how / deliverable).
   ============================================================ */
.solutions-page {
  background: var(--cream);
  padding: clamp(140px, 14vw, 200px) var(--pad) clamp(80px, 10vw, 140px);
}

.solutions-intro {
  max-width: 960px;
  margin: 0 auto clamp(96px, 12vw, 160px);
  text-align: center;
}
.solutions-intro .eyebrow { justify-content: center; }
.solutions-intro .eyebrow::before,
.solutions-intro .eyebrow::after {
  content: '';
  width: 32px; height: 1px;
  background: var(--gold-500);
  display: inline-block;
}

.solutions-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(120px, 16vw, 200px);
}

.solution {
  scroll-margin-top: 120px; /* offset header when navigating to anchor */
  position: relative;
}

/* === Solutions INDEX page (route #solucoes) — 6 cards grid === */
.solutions-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.solution-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-base) var(--ease-out);
  position: relative;
}
.solution-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 1px;
  background: var(--gold-300);
  transition: width var(--dur-slow) var(--ease-out-strong);
}
.solution-card:hover { background: var(--paper-2); }
.solution-card:hover::before { width: 100%; }

/* === Dark + gold treatment for solution cards — homepage hero atmosphere ===
   Applied to every card in the grid via `is-dark` class. Cards that also
   carry a photo extend this with the `has-image` modifier (below). */

/* Update the grid container borders so the divider lines remain visible
   against the new black card background */
.solutions-grid.is-dark {
  border-top-color: rgba(244, 240, 232, 0.10);
  border-left-color: rgba(244, 240, 232, 0.10);
}

.solution-card.is-dark {
  background-color: var(--dark-bg);
  color: var(--dark-ink);
  border-right-color: rgba(244, 240, 232, 0.10);
  border-bottom-color: rgba(244, 240, 232, 0.10);
  isolation: isolate;
  overflow: hidden;
}
/* Gold radial accents on every dark card — same direction as the hero */
.solution-card.is-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 88% 18%, rgba(230, 168, 24, 0.16), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(230, 168, 24, 0.09), transparent 65%);
  z-index: 0;
  pointer-events: none;
  transition: background var(--dur-base) var(--ease-out);
}
/* All content sits above the ::after overlay */
.solution-card.is-dark .solution-card-inner {
  position: relative;
  z-index: 1;
}
/* Top-edge gold accent on hover (the original ::before) — sits above overlay */
.solution-card.is-dark::before {
  background: #e6a818;
  z-index: 2;
}
.solution-card.is-dark:hover {
  background-color: var(--dark-bg);
}
.solution-card.is-dark:hover::after {
  background:
    radial-gradient(900px 600px at 88% 18%, rgba(230, 168, 24, 0.24), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(230, 168, 24, 0.14), transparent 65%);
}

/* Text color overrides for dark cards */
.solution-card.is-dark .solution-card-num   { color: var(--gold-300); }
.solution-card.is-dark .solution-card-name  { color: var(--dark-ink); }
.solution-card.is-dark .solution-card-tagline { color: #e6a818; }
.solution-card.is-dark .solution-card-summary { color: rgba(244, 240, 232, 0.78); }
.solution-card.is-dark .solution-card-cta  {
  color: var(--dark-ink);
  border-top-color: rgba(244, 240, 232, 0.18);
}
.solution-card.is-dark .solution-card-cta svg { color: #e6a818; }
.solution-card.is-dark:hover .solution-card-cta { color: #e6a818; }

/* === Photo modifier — extends `is-dark` with a background image ===
   When the solution has an `image`, the inline style sets background-image
   and we override `::after` to include a vertical dark wash that ensures
   legibility above the photograph. */
.solution-card.has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.solution-card.has-image::after {
  background:
    radial-gradient(900px 600px at 88% 18%, rgba(230, 168, 24, 0.18), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(230, 168, 24, 0.10), transparent 65%),
    linear-gradient(180deg, rgba(11, 11, 11, 0.78) 0%, rgba(11, 11, 11, 0.62) 50%, rgba(11, 11, 11, 0.82) 100%);
}
.solution-card.has-image:hover::after {
  background:
    radial-gradient(900px 600px at 88% 18%, rgba(230, 168, 24, 0.26), transparent 60%),
    radial-gradient(700px 500px at 10% 90%, rgba(230, 168, 24, 0.14), transparent 65%),
    linear-gradient(180deg, rgba(11, 11, 11, 0.72) 0%, rgba(11, 11, 11, 0.55) 50%, rgba(11, 11, 11, 0.78) 100%);
}

.solution-card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(36px, 4vw, 56px) clamp(32px, 3.5vw, 48px);
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.solution-card-num {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 500;
}
.solution-card-name {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: var(--space-2) 0 0;
  font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0;
  max-width: 18ch;
}
.solution-card-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.4;
  color: var(--gold-500);
  margin: 0;
  font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 0;
  max-width: 30ch;
}
.solution-card-summary {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-2);
  margin: var(--space-3) 0 0;
  max-width: 42ch;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.solution-card-cta {
  margin-top: auto;
  padding-top: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  border-top: 1px solid var(--line);
  transition: color var(--dur-base) var(--ease-out),
              gap var(--dur-base) var(--ease-out);
}
.solution-card-cta svg {
  transition: transform var(--dur-base) var(--ease-out-strong);
  color: var(--gold-500);
}
.solution-card:hover .solution-card-cta {
  color: var(--gold-500);
  gap: 14px;
}
.solution-card:hover .solution-card-cta svg {
  transform: translate(3px, -3px);
}

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

/* === Method page (route #metodo and #metodo-*) ===
   Reuses solution styles + adds method-specific groupings:
   - Two groups (4 etapas, 3 princípios) with internal H2 group titles
   - Category line in single view (e.g. "Etapa 01 · O Ponto de Partida")
   - Method closing tagline (bold one-liner that ends each detail page)
*/
.method-group {
  max-width: 1200px;
  margin: 0 auto clamp(80px, 10vw, 140px);
}
.method-group:last-of-type { margin-bottom: 0; }
.method-group-title {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 clamp(32px, 4vw, 56px);
  text-align: center;
  font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0;
}
.method-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
  .method-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .method-grid-3 { grid-template-columns: 1fr; }
}

.method-category {
  text-transform: none;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
  font-weight: 400;
}

/* Inline editorial video between intro and pull-quote on the method
   single-stage view. Constrained width (narrower than the article body)
   gives it the feel of a "video pull-quote" rather than a full hero. */
.method-inline-video {
  margin: clamp(40px, 5vw, 64px) auto;
  max-width: 720px;
  padding: 0;
}
.method-inline-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  background: var(--ink);
  box-shadow:
    0 28px 56px -28px rgba(24, 23, 21, 0.22),
    0 1px 2px rgba(24, 23, 21, 0.06),
    inset 0 0 0 1px rgba(230, 168, 24, 0.16);
}
.method-inline-video figcaption {
  margin: clamp(14px, 1.6vw, 20px) auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--ink-2);
  text-align: center;
  max-width: 52ch;
  letter-spacing: 0.005em;
  font-variation-settings: "opsz" 32, "SOFT" 80, "WONK" 0;
}
/* Portrait variant — for vertical-shot clips like the Diagnóstico video.
   Narrower container (max ~360 px), 9:16 aspect, centred. The shadow and
   inset-gold border are preserved so it still feels like an editorial pull
   in the same family as the landscape variant above. */
.method-inline-video.is-portrait {
  max-width: 360px;
}
.method-inline-video.is-portrait video {
  aspect-ratio: 9 / 16;
}
@media (prefers-reduced-motion: reduce) {
  .method-inline-video video {
    /* Keep the still frame; the muted+autoplay still triggers a single
       paint but the user won't see continuous motion. */
    animation: none;
  }
}

.method-closing {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--gold-500);
  margin: clamp(40px, 5vw, 64px) 0 0;
  text-align: left;
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0;
  max-width: 56ch;
}

/* === Single-solution view (route #solucoes-{slug}) === */
.solutions-page-single .solution-standalone {
  max-width: 800px;
  margin: 0 auto;
}
.solutions-page-single .solution-name {
  font-size: clamp(36px, 4.6vw, 66px);
}

/* Prev / Next solution navigation */
.solution-nav {
  max-width: 800px;
  margin: clamp(96px, 12vw, 140px) auto clamp(48px, 6vw, 80px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
}
.solution-nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
  transition: color var(--dur-base) var(--ease-out);
}
.solution-nav-link.prev { text-align: left; }
.solution-nav-link.next { text-align: right; }
.solution-nav-label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 500;
}
.solution-nav-name {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  font-variation-settings: "opsz" 32, "SOFT" 50, "WONK" 0;
  transition: color var(--dur-base) var(--ease-out);
}
.solution-nav-link:hover .solution-nav-name { color: var(--gold-500); }
@media (max-width: 720px) {
  .solution-nav { grid-template-columns: 1fr; gap: 40px; }
  .solution-nav-link.next { text-align: left; }
}

.solution-head {
  margin-bottom: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
  padding-top: clamp(28px, 3.5vw, 44px);
}
.solution-num {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 500;
  margin-bottom: var(--space-5);
}
.solution-name {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 0;
}
.solution-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--gold-500);
  margin: 0;
  font-variation-settings: "opsz" 32, "SOFT" 100, "WONK" 0;
  max-width: 32ch;
}

/* === Full-bleed hero for the single-solution view ===
   When a solution has an `image`, this block replaces the inline header
   and renders as a cinematic banner: full width, large height, the photo
   as background, with the dark + gold treatment from the homepage hero
   (radials + vertical readability wash) and the header overlaid on top. */
.solution-hero {
  /* Break out of the page padding so the hero spans edge-to-edge. The
     section's own --pad value is removed by these negative margins. */
  margin: 0 calc(var(--pad) * -1) clamp(56px, 7vw, 96px);
  position: relative;
  background-color: var(--dark-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: clamp(380px, 56vh, 580px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--dark-ink);
}
.solution-hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Gold radials echoing the homepage hero's warm glow */
    radial-gradient(1100px 700px at 88% 22%, rgba(230, 168, 24, 0.22), transparent 60%),
    radial-gradient(800px 600px at 12% 88%, rgba(230, 168, 24, 0.12), transparent 65%),
    /* Vertical wash — preserves photo richness in the centre, anchors text
       at bottom-left with a deeper plate for legibility */
    linear-gradient(180deg, rgba(11, 11, 11, 0.40) 0%, rgba(11, 11, 11, 0.28) 30%, rgba(11, 11, 11, 0.62) 75%, rgba(11, 11, 11, 0.85) 100%),
    /* Soft left-side anchor so the title column always has high contrast */
    linear-gradient(90deg, rgba(11, 11, 11, 0.55) 0%, rgba(11, 11, 11, 0.20) 35%, rgba(11, 11, 11, 0.08) 70%, transparent 100%);
}
.solution-hero-head {
  position: relative;
  z-index: 1;
  padding: clamp(56px, 8vw, 112px) clamp(28px, 5vw, 80px) clamp(48px, 6vw, 80px);
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}
.solution-hero-head .solution-num {
  color: var(--gold-300);
}
.solution-hero-head .solution-name {
  color: var(--dark-ink);
  text-shadow:
    0 2px 28px rgba(0, 0, 0, 0.68),
    0 1px 4px rgba(0, 0, 0, 0.5);
}
.solution-hero-head .solution-tagline {
  color: rgba(244, 240, 232, 0.85);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.6);
}
@media (max-width: 720px) {
  .solution-hero { min-height: clamp(320px, 60vh, 440px); }
}

.solution-intro {
  max-width: 64ch;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.solution-intro p {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 var(--space-5);
  font-weight: 400;
}
.solution-intro p:last-child { margin-bottom: 0; }
.solution-intro strong {
  color: var(--ink);
  font-weight: 500;
}

.solution-quote {
  margin: clamp(40px, 5vw, 64px) 0;
  padding-left: clamp(28px, 4vw, 56px);
  border-left: 2px solid var(--gold-300);
  max-width: 56ch;
}
.solution-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0;
}

.solution-blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
  margin-top: clamp(40px, 5vw, 64px);
}
.solution-block {
  border-top: 1px solid var(--line);
  padding-top: clamp(20px, 2.5vw, 28px);
}
.solution-block-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 500;
  margin: 0 0 var(--space-4);
}
.solution-block-body p {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 var(--space-4);
  max-width: 68ch;
  font-weight: 400;
}
.solution-block-body p:last-child { margin-bottom: 0; }
.solution-block-body strong {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 720px) {
  .solution-name { font-size: clamp(32px, 9vw, 44px); }
  .solution-tagline { font-size: clamp(18px, 5vw, 22px); }
  .solution-quote { padding-left: var(--space-4); }
}

/* ============================================================
   BLOG (hash route #blog and #blog-{slug})
   Index view: featured card + grid (cards-pattern from Deloitte/McKinsey).
   Single article: hero image, long-form body, table, quote, keywords.
   ============================================================ */
.blog-page {
  background: var(--cream);
  padding: clamp(140px, 14vw, 200px) var(--pad) clamp(80px, 10vw, 140px);
  min-height: 70vh;
  position: relative;
}

/* --- INDEX --- */
.blog-intro {
  max-width: 960px;
  margin: 0 auto clamp(80px, 10vw, 120px);
  text-align: center;
}
.blog-intro .eyebrow { justify-content: center; }
.blog-intro .eyebrow::before,
.blog-intro .eyebrow::after {
  content: '';
  width: 32px; height: 1px;
  background: var(--gold-500);
  display: inline-block;
}

/* Featured article — large editorial card with side image */
.blog-featured {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  max-width: 1280px;
  margin: 0 auto clamp(64px, 8vw, 96px);
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  position: relative;
}
.blog-featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--gold-300);
  transition: width var(--dur-slow) var(--ease-out-strong);
  z-index: 3;
}
.blog-featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -22px rgba(0,0,0,0.18);
  border-color: var(--gold-300);
}
.blog-featured:hover::before { width: 100%; }
.blog-featured-image {
  overflow: hidden;
  background: var(--dark-bg);
  /* Mobile/narrow: keep full 16:9 image without cropping. */
  aspect-ratio: 16 / 9;
}
@media (min-width: 981px) {
  .blog-featured-image {
    /* Desktop two-column layout: image stretches with the text column.
       object-fit: cover then crops top/bottom (faces stay centered). */
    aspect-ratio: auto;
    height: 100%;
    min-height: 360px;
  }
}
.blog-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 900ms var(--ease-out-strong),
              filter var(--dur-base) var(--ease-out);
  filter: grayscale(15%) contrast(1.02);
}
.blog-featured:hover .blog-featured-image img {
  transform: scale(1.03);
  filter: grayscale(0%) contrast(1);
}
.blog-featured-body {
  padding: clamp(36px, 4vw, 56px) clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: center;
}
.blog-featured-title {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(28px, 2.9vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
  max-width: 22ch;
}
.blog-featured-dek {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 50ch;
  font-weight: 400;
}

/* Meta line — category · pilar · date · read */
.blog-card-meta,
.blog-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 500;
}
.blog-card-sep { color: var(--ink-muted); }
.blog-card-pilar { color: var(--ink-dim); }
.blog-card-date,
.blog-card-read {
  color: var(--ink-dim);
}
.blog-card-footer {
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.blog-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--ink);
  transition: color var(--dur-base) var(--ease-out),
              gap var(--dur-base) var(--ease-out);
}
.blog-card-cta svg { color: var(--gold-500); transition: transform var(--dur-base) var(--ease-out-strong); }
.blog-featured:hover .blog-card-cta {
  color: var(--gold-500);
  gap: 12px;
}
.blog-featured:hover .blog-card-cta svg { transform: translate(3px, -3px); }

/* Grid of secondary articles (3 cols on desktop) */
.blog-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.blog-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.14);
}
.blog-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.blog-card-image {
  aspect-ratio: 16 / 9;
  background: var(--dark-bg);
  overflow: hidden;
}
.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%) contrast(1.02);
  transition: filter var(--dur-base) var(--ease-out),
              transform 900ms var(--ease-out-strong);
}
.blog-card:hover .blog-card-image img {
  filter: grayscale(0%);
  transform: scale(1.03);
}

/* Image placeholder — for articles awaiting cover image */
.blog-featured-image.is-placeholder,
.blog-card-image.is-placeholder {
  background:
    radial-gradient(1200px 700px at 15% 90%, rgba(230, 168, 24, 0.18), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(230, 168, 24, 0.08), transparent 60%),
    linear-gradient(135deg, var(--dark-bg) 0%, #131211 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.blog-featured-image.is-placeholder::before,
.blog-card-image.is-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, rgba(11, 11, 11, 0.5) 100%);
  pointer-events: none;
}
.blog-placeholder-mark {
  font-family: var(--font-display);
  font-weight: 320;
  font-style: italic;
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: -0.015em;
  color: var(--gold-300);
  opacity: 0.45;
  position: relative;
  z-index: 2;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0;
}
.blog-card-body {
  padding: var(--space-5) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.blog-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 32, "wght" 600, "SOFT" 50, "WONK" 0;
}
.blog-card-dek {
  font-family: var(--font-sans);
  font-size: clamp(13.5px, 1vw, 14.5px);
  line-height: 1.55;
  color: var(--ink-dim);
  margin: var(--space-2) 0 0;
  font-weight: 400;
  /* Limit to 3 lines with ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Coming soon" placeholder for the empty grid */
.blog-coming-soon {
  max-width: 720px;
  margin: clamp(40px, 6vw, 80px) auto 0;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.blog-coming-soon h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--gold-500);
  margin: 0 0 var(--space-3);
  font-variation-settings: "opsz" 32, "SOFT" 100, "WONK" 0;
}
.blog-coming-soon p {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--ink-2);
  margin: 0;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

@media (max-width: 980px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-image { aspect-ratio: 16 / 9; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* --- SINGLE ARTICLE --- */
.blog-article {
  background: var(--cream);
  padding: clamp(120px, 12vw, 180px) var(--pad) clamp(80px, 10vw, 140px);
}
.article-header {
  max-width: 880px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  text-align: center;
}
.article-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--space-6);
  font-weight: 500;
}
.article-meta-pilar { color: var(--ink-dim); }
.article-meta-date { color: var(--ink-dim); }
.article-meta-sep { color: var(--ink-muted); }

.article-title {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 auto var(--space-5);
  max-width: 28ch;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
}
.article-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--ink-2);
  margin: 0 auto var(--space-6);
  max-width: 56ch;
  font-variation-settings: "opsz" 32, "SOFT" 100, "WONK" 0;
}
.article-byline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.article-byline-author {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--ink);
  font-style: italic;
  font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 0;
}
.article-byline-role,
.article-byline-read {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
}
.article-byline-read { color: var(--gold-500); margin-top: 4px; }

/* Hero image - full bleed */
.article-hero {
  margin: 0 auto clamp(56px, 7vw, 88px);
  max-width: 1280px;
  overflow: hidden;
  background: var(--dark-bg);
  aspect-ratio: 16 / 9;
}
.article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body — narrow reading column */
.article-body {
  max-width: 720px;
  margin: 0 auto;
}
.article-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 500;
  margin: clamp(48px, 5vw, 64px) 0 var(--space-5);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.article-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.article-p {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 var(--space-5);
  font-weight: 400;
}
.article-p strong { color: var(--ink); font-weight: 500; }
.article-p:last-child { margin-bottom: 0; }

.article-quote {
  margin: clamp(40px, 5vw, 64px) calc(var(--space-4) * -1);
  padding: clamp(28px, 3.5vw, 48px) clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--gold-300);
  border-bottom: 1px solid var(--gold-300);
}
.article-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0;
  text-align: center;
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0;
}

.article-ol {
  list-style: none;
  counter-reset: olstep;
  padding: 0;
  margin: 0 0 var(--space-5);
}
.article-ol li {
  counter-increment: olstep;
  position: relative;
  padding-left: clamp(36px, 4vw, 52px);
  margin-bottom: var(--space-5);
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.7;
  color: var(--ink-2);
  font-weight: 400;
}
.article-ol li::before {
  content: counter(olstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold-500);
  font-weight: 600;
}
.article-ol li strong { color: var(--ink); font-weight: 500; }

.article-closing {
  margin-top: clamp(48px, 5vw, 64px);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--ink-dim);
  margin-bottom: 0;
  font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 0;
}

/* Table */
.article-figure {
  margin: clamp(40px, 5vw, 64px) 0;
}
.article-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  background: var(--paper);
}
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.article-table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-500);
  text-align: left;
  font-weight: 500;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--cream-2);
}
.article-table thead th.col-value {
  text-align: right;
}
.article-table tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--ink-2);
  font-size: 14.5px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
}
.article-table tbody td {
  text-align: right;
  color: var(--ink-2);
  font-size: 14.5px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  font-feature-settings: "tnum" 1;
}
.article-table tr.is-indent th { padding-left: 30px; color: var(--ink-dim); font-size: 13.5px; }
.article-table tr.is-indent td { color: var(--ink-dim); font-size: 13.5px; }
.article-table tr.is-emphasis th,
.article-table tr.is-emphasis td {
  color: var(--ink);
  font-weight: 500;
  background: rgba(200, 161, 74, 0.04);
}
.article-table tr.is-key th,
.article-table tr.is-key td {
  background: rgba(200, 161, 74, 0.10);
  border-top: 1px solid var(--gold-300);
  border-bottom: 1px solid var(--gold-300);
  color: var(--ink);
  font-weight: 600;
  font-size: 15.5px;
}
.article-figure figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin-top: var(--space-4);
  font-weight: 500;
}

/* Footer with keywords */
.article-footer {
  max-width: 720px;
  margin: clamp(72px, 9vw, 120px) auto 0;
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.article-keywords-label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 500;
  display: block;
  margin-bottom: var(--space-4);
}
.article-keywords ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.article-keywords li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  text-transform: lowercase;
}

@media (max-width: 720px) {
  .article-quote { margin-left: 0; margin-right: 0; }
  .article-ol li { padding-left: 32px; }
}

/* ============================================================
   PARTNERS PAGE (hash route #socios)
   Dedicated page reachable from "Sobre Nós" / "Fundadores" in the header
   without leaving the SPA. Header and footer remain visible.
   ============================================================ */
.partners-page {
  background: var(--cream);
  padding: clamp(140px, 14vw, 200px) var(--pad) clamp(80px, 10vw, 140px);
  position: relative;
}

/* Back link — small, editorial breadcrumb at the very top */
.partners-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: var(--space-9);
  transition: color var(--dur-base) var(--ease-out),
              padding-left var(--dur-base) var(--ease-out);
}
.partners-back:hover {
  color: var(--gold-500);
  padding-left: 4px;
}
.partners-back svg {
  transition: transform var(--dur-base) var(--ease-out);
}
.partners-back:hover svg {
  transform: translateX(-2px);
}

/* Intro block — eyebrow + page title + paragraph */
.partners-intro {
  max-width: 920px;
  margin: 0 auto clamp(80px, 10vw, 140px);
  text-align: center;
}
.partners-intro .eyebrow {
  justify-content: center;
}
.partners-intro .eyebrow::before,
.partners-intro .eyebrow::after {
  content: '';
  width: 32px; height: 1px;
  background: var(--gold-500);
  display: inline-block;
}
.partners-page-title {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(36px, 4.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: var(--space-3) auto var(--space-6);
  max-width: 22ch;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
}
.partners-page-title em {
  font-style: italic;
  font-weight: 360;
  color: var(--gold-500);
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 0;
}
.partners-page-intro {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto;
  font-weight: 400;
}

/* Partner list — vertical, each partner centered with bio left-aligned */
.partners-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(96px, 14vw, 176px);
}
.partner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Round portrait — placeholder with initials until photos arrive */
.partner-portrait {
  width: clamp(160px, 18vw, 240px);
  height: clamp(160px, 18vw, 240px);
  border-radius: 50%;
  background: var(--dark-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(32px, 4vw, 48px);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.25),
              0 0 0 6px var(--cream),
              0 0 0 7px var(--gold-glow);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.partner-portrait:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 72px -20px rgba(0, 0, 0, 0.32),
              0 0 0 6px var(--cream),
              0 0 0 7px var(--gold-300);
}
.partner-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}
.partner-initials {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 320;
  font-style: italic;
  font-size: clamp(56px, 7vw, 96px);
  color: var(--gold-300);
  letter-spacing: -0.02em;
  z-index: 1;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 0;
}

/* Partner content — centered name/role, left-aligned bio */
.partner-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.partner-name {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  text-align: center;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
}
.partner-role {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 500;
  margin: 0 0 clamp(12px, 1.4vw, 16px);
  text-align: center;
}

.partner-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto clamp(28px, 3.6vw, 48px);
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  font-weight: 500;
  text-align: center;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.partner-linkedin svg { color: var(--gold-500); transition: color .2s ease; }
.partner-linkedin:hover,
.partner-linkedin:focus-visible {
  color: var(--ink);
  border-color: var(--gold-500);
  background: rgba(230, 168, 24, 0.06);
  transform: translateY(-1px);
}
.partner-linkedin:hover svg,
.partner-linkedin:focus-visible svg { color: var(--gold-500); }

.partner-bio {
  width: 100%;
  max-width: 64ch;
  text-align: left;
}
.partner-bio p {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 var(--space-5);
  font-weight: 400;
}
.partner-bio p:last-child { margin-bottom: 0; }
.partner-bio strong {
  color: var(--ink);
  font-weight: 500;
}

/* Pull-quote — editorial highlight under the bio */
.partner-quote {
  width: 100%;
  max-width: 64ch;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: clamp(28px, 3.5vw, 44px) 0 0;
  border-top: 1px solid var(--line);
  position: relative;
  text-align: left;
}
.partner-quote::before {
  content: '\201C'; /* left double quote */
  position: absolute;
  top: clamp(14px, 1.5vw, 22px);
  left: -2px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: clamp(72px, 8vw, 128px);
  line-height: 1;
  color: var(--gold-300);
  opacity: 0.45;
  pointer-events: none;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
}
.partner-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  padding-left: clamp(28px, 4vw, 56px);
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0;
}
.partner-quote cite {
  display: block;
  padding-left: clamp(28px, 4vw, 56px);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-style: normal;
  font-weight: 500;
}

/* Bottom CTA */
.partners-cta {
  margin: clamp(96px, 12vw, 160px) auto 0;
  padding-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line);
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}
.partners-cta-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(20px, 1.8vw, 28px);
  color: var(--ink-2);
  margin: 0;
  font-variation-settings: "opsz" 32, "SOFT" 100, "WONK" 0;
  letter-spacing: -0.012em;
}

@media (max-width: 720px) {
  .partner-portrait {
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.25),
                0 0 0 4px var(--cream),
                0 0 0 5px var(--gold-glow);
  }
}

/* === Word reveal in section titles ===
   On hover, each word in a .section-title lifts 4px with a staggered delay
   (28ms per word) creating an editorial "breathing" gesture. Reversion
   happens with no delay so the effect feels precise on mouseleave.
   Words are wrapped at runtime by useWordRevealTitles in visualfx.jsx;
   inner <span class="em"> / .thin remain intact and pick up the lift too. */
.section-title .word {
  display: inline-block;
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.section-title:hover .word,
.section-title:focus-within .word {
  transform: translateY(-5px);
  transition-delay: calc(var(--i, 0) * 28ms);
}
@media (prefers-reduced-motion: reduce) {
  .section-title .word { transition: none !important; }
  .section-title:hover .word,
  .section-title:focus-within .word {
    transform: none !important;
    transition-delay: 0ms !important;
  }
}

.hero-sub {
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.62;
  color: var(--dark-ink-dim);
  max-width: 52ch;
  margin-bottom: var(--space-7);
  font-weight: 400;
  letter-spacing: 0.005em;
}
.hero-sub strong {
  color: var(--dark-ink);
  font-weight: 500;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-actions .cta-btn {
  background: var(--gold-300);
  color: var(--ink);
  font-weight: 600;
}
.hero-actions .cta-btn:hover {
  background: var(--paper);
  color: var(--ink);
}
.hero-actions .cta-btn.ghost {
  background: transparent;
  color: var(--dark-ink);
  border-color: rgba(244, 240, 232, 0.30);
  font-weight: 500;
}
.hero-actions .cta-btn.ghost:hover {
  background: var(--dark-ink);
  color: var(--ink);
  border-color: var(--dark-ink);
}

.hero-kicker-bottom {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--dark-line);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dark-ink-muted);
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  align-items: baseline;
  font-weight: 500;
}
.hero-kicker-bottom strong {
  color: var(--dark-ink);
  font-weight: 600;
  letter-spacing: 0.22em;
}

/* (Hero right column removed — hero is single-column now.) */
.metrics-card {
  background: rgba(244, 240, 232, 0.04);
  border: 1px solid var(--dark-line);
  padding: 32px;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.metrics-card h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: #e6a818;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.metrics-card h4 .dot {
  width: 6px; height: 6px;
  background: var(--yellow);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--yellow);
}
.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--dark-line);
}
.metric-row:last-child { border-bottom: none; }
.metric-row .label {
  font-size: 13px;
  color: var(--dark-ink-dim);
  font-weight: 400;
}
.metric-row .value {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 26px;
  color: var(--dark-ink);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variation-settings: "opsz" 32, "SOFT" 50, "WONK" 0;
}
.metric-row .value .suffix {
  font-style: italic;
  color: #e6a818;
  font-size: 0.8em;
}

.hero-chart {
  height: 140px;
  position: relative;
  background: rgba(244, 240, 232, 0.03);
  border: 1px solid var(--dark-line);
  padding: 20px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-chart .title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dark-ink-dim);
  display: flex;
  justify-content: space-between;
}
.hero-chart .title .val {
  color: #e6a818;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  font-variation-settings: "opsz" 14, "SOFT" 100, "WONK" 0;
}
.hero-chart svg { width: 100%; flex: 1; display: block; }

/* ============================================================
   SECTIONS — editorial scaffold
   ============================================================ */
section {
  padding: var(--section-y) var(--pad);
  position: relative;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e6a818;
  margin-bottom: var(--space-6);
  font-weight: 500;
}
.eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--gold-500);
  display: inline-block;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(36px, 4.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink);
  max-width: 22ch;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
}
.section-title .em {
  font-style: italic;
  font-weight: 360;
  color: #e6a818;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 0;
}
.section-title .thin {
  font-family: var(--font-display);
  font-weight: 280;
  font-style: normal;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 24, "SOFT" 50, "WONK" 0;
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--ease-out-strong),
              transform 900ms var(--ease-out-strong);
}
.js-reveal .reveal:not(.in) {
  opacity: 0;
  transform: translateY(28px);
}
.hero .reveal { opacity: 1 !important; transform: none !important; }
.hero-title .reveal { display: block; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
.reveal-delay-5 { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .js-reveal .reveal:not(.in) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   MANIFESTO — quote + body
   ============================================================ */
.manifesto {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
}
.manifesto-pull {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(38px, 4.4vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 14ch;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
}
.manifesto-pull em {
  font-style: italic;
  font-weight: 360;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0;
}
.manifesto-pull .accent {
  color: #e6a818;
  font-style: italic;
  font-weight: 360;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0;
}

.manifesto-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 56ch;
  padding-top: 14px;
}
.manifesto-body p {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.7;
  color: var(--ink-2);
}
.manifesto-body p strong { color: var(--ink); font-weight: 500; }

.manifesto-pillars {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.manifesto-pillars > div {
  padding: var(--space-6) var(--space-5) var(--space-2) 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 130px;
}
.manifesto-pillars > div:last-child { border-right: none; padding-right: 0; }
.manifesto-pillars .p-num {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: #e6a818;
  letter-spacing: 0.22em;
  font-weight: 500;
}
.manifesto-pillars .p-label {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.012em;
  line-height: 1.18;
  max-width: 18ch;
  font-variation-settings: "opsz" 32, "SOFT" 50, "WONK" 0;
}

/* ============================================================
   SERVICES — editorial grid
   ============================================================ */
.services {
  background: var(--dark-bg);
  color: var(--dark-ink);
  position: relative;
  overflow: hidden;
}
/* Hero-style gold radial accents on the dark Services section */
.services::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 85% 18%, rgba(230, 168, 24, 0.09), transparent 65%),
    radial-gradient(700px 500px at 12% 88%, rgba(230, 168, 24, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.services > * { position: relative; z-index: 1; }
.services-sub { color: var(--dark-ink-dim); }
.services .eyebrow { color: var(--gold-300); }
.services .section-title { color: var(--dark-ink); }
.services .section-title .em { color: #e6a818; }
.services .svc-grid {
  border-top-color: var(--dark-line);
  border-left-color: var(--dark-line);
}
.services .svc-card {
  background: transparent;
  border-right-color: var(--dark-line);
  border-bottom-color: var(--dark-line);
}
.services .svc-card:hover { background: rgba(244, 240, 232, 0.035); }
.services .svc-card-name { color: var(--dark-ink); }
.services .svc-card-desc { color: var(--dark-ink-dim); }
.services .svc-card .art { opacity: 0.5; filter: invert(0.92) hue-rotate(180deg); }
.services .svc-card:hover .art { opacity: 0.85; }
.services-head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
  margin-bottom: var(--space-9);
}
.services-sub {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 18px);
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 44ch;
  justify-self: end;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.svc-card {
  padding: var(--space-7) var(--space-6) var(--space-6);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 380px;
  transition: background var(--dur-base) var(--ease-out);
  position: relative;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 1px;
  background: var(--gold-300);
  transition: width var(--dur-slow) var(--ease-out-strong);
}
.svc-card:hover { background: var(--paper); }
.svc-card:hover::before { width: 100%; }

.svc-card .art {
  height: 64px;
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity var(--dur-base) var(--ease-out);
}
.svc-card:hover .art { opacity: 1; }
.svc-card .art svg { height: 100%; width: auto; }

.svc-card-num {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.22em;
  color: #e6a818;
  font-weight: 500;
}
.svc-card-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-top: 2px;
  max-width: 16ch;
  font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0;
}
.svc-card-desc {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-2);
  font-weight: 400;
  max-width: 42ch;
}
.svc-card-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}
.svc-card-arrow {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: transform var(--dur-base) var(--ease-out-strong),
              color var(--dur-base) var(--ease-out);
}
.svc-card:hover .svc-card-arrow {
  transform: translate(6px, -6px);
  color: #e6a818;
}
.svc-card-arrow svg { width: 14px; height: 14px; }

/* ============================================================
   APPROACH — timeline editorial
   ============================================================ */
.approach {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.approach-head {
  margin-bottom: var(--space-9);
  max-width: 1080px;
}
.approach-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.approach-steps::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
  pointer-events: none;
}
.approach-steps::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: var(--progress, 0%);
  background: linear-gradient(to bottom, var(--gold-300), var(--gold-500));
  transition: height 200ms linear;
  pointer-events: none;
}
.step {
  padding: var(--space-7) var(--space-7) var(--space-9) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: opacity var(--dur-slow) var(--ease-out);
  opacity: 0.55;
}
.step::before {
  content: '';
  position: absolute;
  top: var(--space-7);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.step:nth-child(odd)::before { right: -4.5px; }
.step:nth-child(even)::before { left: -4.5px; }
.step:nth-child(even) {
  padding-left: var(--space-7);
}
.step:nth-child(2n+1):nth-last-child(-n+2),
.step:last-child { border-bottom: none; }

.step.active,
.step:hover {
  opacity: 1;
}
.step.active::before,
.step:hover::before {
  background: var(--gold-300);
  border-color: var(--gold-300);
  box-shadow: 0 0 0 6px var(--gold-glow);
}

.step-num {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: #e6a818;
  letter-spacing: 0.22em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.step-num::after {
  content: '';
  width: 48px;
  height: 1px;
  background: var(--gold-500);
}
.step-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 3.4vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.022em;
  margin: var(--space-4) 0 var(--space-4);
  color: var(--ink);
  max-width: 14ch;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
}
.step-body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 50ch;
  font-weight: 400;
}

/* ============================================================
   NUMBERS — editorial metric grid
   ============================================================ */
.numbers {
  background: var(--cream);
}
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: var(--space-9);
  border-top: 1px solid var(--line);
}
.num-cell {
  padding: var(--space-7) var(--space-5) var(--space-6) 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 280px;
}
.num-cell:last-child { border-right: none; }
.num-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 5.6vw, 92px);
  line-height: 0.88;
  letter-spacing: -0.034em;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
}
.num-val .suffix {
  font-style: italic;
  font-weight: 400;
  color: #e6a818;
  font-size: 0.42em;
  margin-top: 0.32em;
  letter-spacing: -0.01em;
}
.num-label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 24ch;
  letter-spacing: 0.005em;
  font-weight: 400;
  margin-top: auto;
}
.num-bar {
  margin-top: var(--space-3);
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.num-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--bar-w, 0%);
  background: linear-gradient(to right, var(--gold-500), var(--gold-300));
  transition: width 1.6s var(--ease-out-strong);
}

/* ============================================================
   SECTORS — soft grid
   ============================================================ */
.sectors {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sectors-grid {
  margin-top: var(--space-9);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.sector {
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  background: var(--paper);
  transition: background var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.sector::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 1px;
  background: var(--gold-300);
  transition: width var(--dur-slow) var(--ease-out-strong);
}
.sector:hover {
  background: var(--cream-2);
}
.sector:hover::before { width: 100%; }

.sector-glyph {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: #e6a818;
  letter-spacing: 0.22em;
  font-weight: 500;
}
.sector-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--ink);
  font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0;
}
.sector-tag {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--ink-dim);
  line-height: 1.5;
  margin-top: var(--space-1);
  font-weight: 400;
}

/* ============================================================
   CASES — editorial impact cards
   ============================================================ */
.cases {
  background: var(--cream);
}
.cases-head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
  margin-bottom: var(--space-9);
}
.cases-intro {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 44ch;
  justify-self: end;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.cases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.case-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .4s, box-shadow .4s, border-color .4s;
}
.case-card.feature { grid-column: 1 / -1; flex-direction: row; min-height: 460px; }
.case-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.08);
}
.case-art {
  position: relative;
  flex: none;
  height: 260px;
  background: var(--dark-bg);
  color: var(--cream);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 32px;
}
.case-card.feature .case-art {
  width: 50%;
  height: auto;
}
.case-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(200, 161, 74, 0.14), transparent 55%);
}
.case-art svg.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}
.case-metric {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
}
.case-metric-val {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(52px, 5.8vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.028em;
  color: #e6a818;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 0;
}
.case-metric-label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.65);
  font-weight: 500;
}
.case-glyph {
  position: relative;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(60px, 7vw, 110px);
  color: var(--cream);
  opacity: 0.2;
  line-height: 0.9;
  z-index: 1;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
}
.case-body {
  flex: 1;
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--paper);
}
.case-card.feature .case-body { padding: 48px 52px; justify-content: center; gap: 22px; }
.case-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.22em;
  color: #e6a818;
  text-transform: uppercase;
  font-weight: 500;
}
.case-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 22ch;
  font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0;
}
.case-card.feature .case-title {
  font-size: clamp(32px, 3.4vw, 52px);
  max-width: 20ch;
}
.case-desc {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 52ch;
  font-weight: 400;
}
.case-link {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  transition: color .25s, gap .25s;
}
.case-card:hover .case-link { color: #e6a818; gap: 14px; }
.case-link svg { width: 14px; height: 14px; }

/* ============================================================
   INSIGHTS
   ============================================================ */
.insights {
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.insights-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(40px, 6vw, 96px);
  flex-wrap: wrap;
  margin-bottom: var(--space-9);
}
.insights-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.insight-card {
  padding: var(--space-6);
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 360px;
  transition: background var(--dur-base) var(--ease-out);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.insight-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 1px;
  background: var(--gold-300);
  transition: width var(--dur-slow) var(--ease-out-strong);
}
.insight-card:hover { background: var(--cream-2); }
.insight-card:hover::before { width: 100%; }

.insight-card:nth-child(1) {
  grid-row: 1 / span 2;
  padding: var(--space-7);
}
.insight-card:nth-child(1) h3 {
  font-size: clamp(26px, 2.3vw, 36px);
  line-height: 1.1;
}
.insight-card:nth-child(1) .art { height: 260px; }

.insight-card .tag {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.22em;
  color: #e6a818;
  text-transform: uppercase;
  font-weight: 500;
}
.insight-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variation-settings: "opsz" 32, "SOFT" 50, "WONK" 0;
}
.insight-card .art {
  height: 140px;
  background: var(--cream-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.insight-card .art svg { width: 100%; height: 100%; display: block; }
.insight-card .meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.1em;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ============================================================
   CONTACT — editorial final
   ============================================================ */
.contact {
  background: var(--cream);
  border-top: 1px solid var(--line);
}
.contact-headline {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(40px, 5vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.024em;
  max-width: 18ch;
  margin-bottom: 40px;
  color: var(--ink);
  font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 0;
}
.contact-headline .em {
  font-style: italic;
  font-weight: 360;
  color: #e6a818;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 920px;
  padding-top: var(--space-9);
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
}
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.24em;
  color: var(--ink-muted);
  text-transform: uppercase;
  font-weight: 500;
  transition: color var(--dur-base) var(--ease-out);
}
.field:focus-within label {
  color: #e6a818;
}
.field input, .field textarea, .field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: var(--space-3) 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 1.6vw, 26px);
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur-base) var(--ease-out);
  letter-spacing: -0.012em;
  width: 100%;
  font-variation-settings: "opsz" 32, "SOFT" 50, "WONK" 0;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-bottom-color: var(--ink);
}
.field select { color: var(--ink); cursor: pointer; }
.field select option { background: var(--cream); color: var(--ink); }
.field textarea {
  resize: none;
  min-height: 72px;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: var(--paper);
  padding: 20px 32px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  align-self: flex-start;
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out-strong);
  margin-top: var(--space-5);
  border-radius: 2px;
  cursor: pointer;
  border: none;
}
.contact-submit:hover {
  background: var(--gold-500);
  transform: translateY(-2px);
}
.contact-submit:disabled {
  cursor: not-allowed;
  opacity: 0.85;
  transform: none;
}
.contact-submit:disabled:hover {
  background: var(--ink);
  transform: none;
}
.contact-submit svg { transition: transform var(--dur-base) var(--ease-out); }
.contact-submit:hover:not(:disabled) svg { transform: translateX(4px); }

.contact-submit.is-success {
  background: #1F6F2E; /* deep green for success state */
  color: var(--paper);
}
.contact-submit.is-success:hover { background: #1F6F2E; }
.contact-submit.is-success svg { width: 16px; height: 16px; }

.contact-submit-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* Visually hidden — content for screen readers only.
   Used for aria-live regions and screen-reader-only labels. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   COOKIE BANNER (LGPD)
   Sits at bottom of viewport, dismissible. Choice persisted in
   localStorage so it doesn't reappear on subsequent visits.
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9000;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid rgba(244, 240, 232, 0.10);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.45),
              0 4px 16px -4px rgba(0,0,0,0.25);
  padding: clamp(20px, 2.5vw, 28px) clamp(20px, 3vw, 36px);
  border-radius: 4px;
  animation: cookieBannerEnter 480ms var(--ease-out-strong) backwards;
}
@keyframes cookieBannerEnter {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.cookie-banner-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}
.cookie-banner-text h4 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
  color: var(--cream);
}
.cookie-banner-text p {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(244, 240, 232, 0.80);
  margin: 0;
  max-width: 80ch;
}
.cookie-link {
  color: var(--gold-300);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-link:hover { color: var(--paper); }
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-banner-actions .cta-btn {
  padding: 12px 20px;
  font-size: 12.5px;
}
.cookie-banner-actions .cta-btn.ghost {
  border-color: rgba(244, 240, 232, 0.30);
  color: var(--cream);
}
.cookie-banner-actions .cta-btn.ghost:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

@media (max-width: 720px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px 20px; }
  .cookie-banner-inner { grid-template-columns: 1fr; gap: 16px; }
  .cookie-banner-actions { flex-direction: column-reverse; align-items: stretch; }
  .cookie-banner-actions .cta-btn { justify-content: center; }
}

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

/* ============================================================
   LEGAL MODALS (Privacy Policy / Terms of Use)
   Centered overlay with scrollable body. Closes on ESC, scrim
   click, or close button. Body scroll locked when open.
   ============================================================ */
.legal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 11, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  animation: legalOverlayEnter 240ms var(--ease-out) backwards;
}
@keyframes legalOverlayEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.legal-dialog {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  width: 100%;
  max-width: 880px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px -10px rgba(0,0,0,0.45);
  animation: legalDialogEnter 380ms var(--ease-out-strong) backwards;
  outline: none;
}
@keyframes legalDialogEnter {
  from { transform: translateY(20px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.legal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: clamp(24px, 3.5vw, 40px) clamp(24px, 3.5vw, 48px);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.legal-head h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 48, "SOFT" 50, "WONK" 0;
}
.legal-updated {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
  margin: 8px 0 0;
}
.legal-close {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
  transition: background var(--dur-base) var(--ease-out);
}
.legal-close:hover { background: var(--cream-2); }
.legal-body {
  flex: 1;
  overflow-y: auto;
  padding: clamp(24px, 3.5vw, 40px) clamp(24px, 3.5vw, 48px);
  -webkit-overflow-scrolling: touch;
}
.legal-body section + section { margin-top: var(--space-6); }
.legal-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0 0 8px;
  font-variation-settings: "opsz" 14, "SOFT" 50, "WONK" 0;
}
.legal-body p {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0;
  max-width: 75ch;
}

@media (prefers-reduced-motion: reduce) {
  .legal-overlay,
  .legal-dialog { animation: none; }
}

/* Footer legal links */
.footer-legal-links {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-legal-links a {
  position: relative;
  display: inline-block;
  color: rgba(244, 240, 232, 0.55);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.footer-legal-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--gold-300);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible { color: var(--gold-300); }
.footer-legal-links a:hover::after,
.footer-legal-links a:focus-visible::after { transform: scaleX(1); }
.footer-legal-sep {
  color: rgba(244, 240, 232, 0.30);
}
@media (max-width: 720px) {
  .footer-legal-links { width: 100%; justify-content: flex-start; }
}
.contact-error {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: #B0383A;
  font-weight: 500;
}

.field input:disabled,
.field textarea:disabled,
.field select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--dark-bg);
  color: var(--dark-ink);
  padding: var(--space-10) var(--pad) var(--space-6);
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  gap: clamp(32px, 5vw, 64px);
}
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.22em;
  color: #e6a818;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  font-weight: 500;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--dark-ink-dim);
  font-weight: 400;
}
.footer-col a {
  position: relative;
  display: inline-block;
  transition: color var(--dur-base) var(--ease-out);
  text-decoration: none;
}
.footer-col a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--gold-300);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-col a:hover,
.footer-col a:focus-visible { color: #e6a818; }
.footer-col a:hover::after,
.footer-col a:focus-visible::after { transform: scaleX(1); }
.footer-col .logo-mark path[fill="#000"],
.footer-col .logo-mark path:not([fill="#FEBF2C"]) { fill: var(--cream); }
.footer-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 28px);
  color: var(--dark-ink-dim);
  max-width: 32ch;
  line-height: 1.3;
  margin-top: var(--space-5);
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 0;
}

/* === Footer statement — name as monumental signature === */
.footer-statement {
  margin: var(--space-10) calc(var(--pad) * -1) var(--space-6);
  padding: 0 var(--pad);
  border-top: 1px solid var(--dark-line);
  border-bottom: 1px solid var(--dark-line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.footer-statement-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(64px, 11vw, 180px);
  line-height: 1.0;
  letter-spacing: -0.036em;
  color: var(--dark-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  white-space: nowrap;
  padding: var(--space-7) 0 var(--space-6);
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
}
.footer-statement-name em {
  font-style: italic;
  font-weight: 300;
  color: #e6a818;
}

.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--dark-line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.18em;
  color: rgba(244, 240, 232, 0.42);
  text-transform: uppercase;
  font-weight: 500;
}

/* ============================================================
   TICKER — subtle editorial
   ============================================================ */
.ticker {
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ticker-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: tickerScroll 50s linear infinite;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(24px, 3.2vw, 44px);
  letter-spacing: -0.015em;
  align-items: center;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
}
.ticker-track span:nth-child(4n+2) {
  color: #e6a818;
  font-style: italic;
}
.ticker-track .dot {
  width: 5px; height: 5px;
  background: var(--yellow);
  border-radius: 50%;
  flex: none;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 100;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  padding: 22px;
  width: 320px;
  font-size: 12px;
  color: var(--ink);
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.18);
}
.tweaks h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #e6a818;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 500;
}
.tweak-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.tweak-row > label {
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.tweak-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.tweak-opts button {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  background: transparent;
  border-radius: 2px;
  transition: all .2s;
}
.tweak-opts button:hover { color: var(--ink); }
.tweak-opts button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .hero { min-height: auto; padding-top: 140px; }
  .tripod-wrap { min-height: 420px; }
  .tripod-svg { max-width: 460px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .cases-grid { gap: 24px; }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .num-cell { border-right: none; border-bottom: 1px solid var(--line); }
  .num-cell:nth-child(odd) { border-right: 1px solid var(--line); }
  .tripod-grid { grid-template-columns: 1fr; }
  .tripod-card { border-right: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hero-kicker-bottom { gap: 16px; flex-direction: column; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .cta-btn { justify-content: center; }
  .numbers-grid, .sectors-grid, .insights-grid { grid-template-columns: 1fr; }
  .num-cell { border-right: none !important; }
  .sector { border-right: none; }
  .footer-statement-name { letter-spacing: -0.025em; }
  .field input, .field textarea, .field select { font-size: 18px; }
}
@media (max-width: 820px) {
  .nav { display: none; }
  .services-head, .manifesto-grid, .cases-head { grid-template-columns: 1fr; gap: 28px; }
  .services-sub, .cases-intro { justify-self: start; }
  .svc-grid { grid-template-columns: 1fr; }
  .approach-steps { grid-template-columns: 1fr; }
  .approach-steps::before, .approach-steps::after { left: 0; }
  .step, .step:nth-child(even) { padding: 32px 0 40px var(--space-5); border-right: none; }
  .step::before { left: -4.5px !important; right: auto !important; }
  .numbers-grid, .sectors-grid { grid-template-columns: repeat(2, 1fr); }
  .insights-grid { grid-template-columns: 1fr; }
  .insight-card:nth-child(1) { grid-row: auto; }
  .insight-card:nth-child(1) .art { height: 180px; }
  .case-card.feature { flex-direction: column; }
  .case-card.feature .case-art { width: 100%; min-height: 260px; }
  .case-card.feature .case-body { padding: 32px; }
  .manifesto-pillars { grid-template-columns: 1fr; }
  .manifesto-pillars > div { border-right: none; border-bottom: 1px solid var(--line); padding: var(--space-4) 0; min-height: auto; }
  .tripod-grid { grid-template-columns: 1fr; }
  .tripod-card { border-right: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-statement-name { font-size: clamp(48px, 18vw, 100px); padding: var(--space-5) 0; }
  .tweaks { width: calc(100vw - 40px); bottom: 12px; right: 12px; }
}


/* Footer social icons */
.footer-social { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-social a {
  display: inline-flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
}
.footer-social a:hover { opacity: .7; transform: translateX(2px); }
.footer-social svg { flex: 0 0 auto; }
.footer-social span { font-size: 0.92rem; }


/* ============================================
   Clients & Partners — marquee de logos
   ============================================ */
.clients {
  padding: clamp(64px, 8vw, 112px) 0 clamp(56px, 7vw, 96px);
  background: var(--cream, #f6f1e7);
  border-top: 1px solid var(--line, rgba(0,0,0,.08));
  border-bottom: 1px solid var(--line, rgba(0,0,0,.08));
  overflow: hidden;
}
.clients-head {
  max-width: 1360px;
  margin: 0 auto clamp(32px, 4vw, 56px);
  padding: 0 clamp(20px, 4vw, 56px);
}
.clients-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: var(--space-3) 0 0;
  max-width: 28ch;
  color: var(--ink);
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
}
.clients-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.clients-track {
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
  width: max-content;
  animation: clients-marquee 48s linear infinite;
  will-change: transform;
}
.clients-marquee:hover .clients-track { animation-play-state: paused; }
.clients-item {
  flex: 0 0 auto;
  width: clamp(160px, 14vw, 210px);
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clients-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(100%) brightness(0.55) contrast(1.15);
  opacity: 0.62;
  transition: filter var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
.clients-marquee:hover .clients-item img { opacity: 0.45; }
.clients-item:hover img,
.clients-marquee:hover .clients-item:hover img {
  filter: grayscale(0%) brightness(1) contrast(1);
  opacity: 1;
}
@keyframes clients-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; }
}
@media (max-width: 720px) {
  .clients-item { width: 140px; height: 76px; }
  .clients-track { gap: 40px; animation-duration: 36s; }
}


/* ============================================================
   VISUAL FX LAYER — efeitos visuais editoriais
   ============================================================ */

/* Scroll progress bar (topo) */
.vfx-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 9999;
  background: rgba(0,0,0,.05);
  pointer-events: none;
}
.vfx-progress-bar {
  width: 100%; height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #c8a04a, #2c2c2c, #c8a04a);
  background-size: 200% 100%;
  animation: vfx-shine 4s linear infinite;
  transition: transform .12s linear;
}
@keyframes vfx-shine {
  to { background-position: 200% 0; }
}

/* Cursor aura — subtle gold halo, no blend-mode artifact */
.vfx-cursor-aura {
  position: fixed; top: 0; left: 0;
  width: 420px; height: 420px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle at center,
    rgba(200, 161, 74, 0.07) 0%,
    rgba(200, 161, 74, 0.03) 30%,
    transparent 65%);
  filter: blur(20px);
  transform: translate(-9999px, -9999px);
  transition: opacity .3s ease;
  opacity: 0.8;
}
@media (pointer: coarse) { .vfx-cursor-aura { display: none; } }

/* (Custom editorial cursor removido — preferência do usuário.) */

/* Ambient gradient orbs no hero */
.vfx-orbs {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.vfx-orbs .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .32;
  will-change: transform;
}
.vfx-orbs .orb-1 {
  width: 640px; height: 640px;
  top: -18%; right: -12%;
  background: radial-gradient(circle, rgba(200, 161, 74, 0.28), transparent 72%);
  animation: vfx-float-1 24s ease-in-out infinite;
}
.vfx-orbs .orb-2 {
  width: 460px; height: 460px;
  bottom: -10%; left: 6%;
  background: radial-gradient(circle, rgba(168, 127, 45, 0.18), transparent 72%);
  animation: vfx-float-2 30s ease-in-out infinite;
}
.vfx-orbs .orb-3 {
  display: none;
}
@keyframes vfx-float-1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-40px, 30px) scale(1.06); }
}
@keyframes vfx-float-2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(60px, -40px) scale(1.1); }
}
@keyframes vfx-float-3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-30px,-50px) scale(1.08); }
}

/* Grain sutil */
.vfx-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* (Tilt 3D em massa removido. Hover states agora são feitos em CSS por seletor:
    services, sectors, insights, tripod-card têm linha gold animada no top.) */

/* (Word shimmer removido — competia com o italic do Fraunces.) */

/* CTA — refined hover (sutil, sem box-shadow gold cafona) */
.cta-btn {
  will-change: transform;
}

/* Suaviza o ambiente em telas com motion-reduzido */
@media (prefers-reduced-motion: reduce) {
  .vfx-orbs .orb { animation: none; }
  .vfx-cursor-aura { display: none; }
  .vfx-progress-bar { animation: none; }
  .tilt-card { transform: none !important; }
}


/* Square/badge logos sit smaller inside the same frame so they
   match the visual weight of horizontal logos. */
.clients-item.is-square img {
  max-height: 105%;
  max-width: 105%;
}


/* === SOBRE NÓS — Credenciais + Tripé Fayol/Porter/Damodaran === */
.section-subtitle {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.016em;
  color: var(--ink);
  max-width: 28ch;
  margin-top: var(--space-3);
  font-variation-settings: "opsz" 60, "SOFT" 50, "WONK" 0;
}
.section-subtitle .em {
  font-style: italic;
  font-weight: 400;
  color: #e6a818;
}

.credentials-block {
  margin-top: clamp(80px, 10vw, 140px);
  padding-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line);
}
.credentials-head { max-width: 64ch; }
.credentials-body {
  margin-top: 18px;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 72ch;
}
.credentials-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.cred-item {
  padding: var(--space-7) var(--space-5) var(--space-5) 0;
  border-right: 1px solid var(--line);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
}
.cred-item:last-child { border-right: none; padding-right: 0; }
.cred-k {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 4.8vw, 84px);
  line-height: 0.92;
  color: #e6a818;
  letter-spacing: -0.025em;
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 0;
}
.cred-l {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 26ch;
  font-weight: 400;
}

.tripod-block {
  margin-top: clamp(80px, 10vw, 140px);
  padding-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line);
}
.tripod-head { max-width: 64ch; }
.tripod-body {
  margin-top: 18px;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 72ch;
}
.tripod-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.tripod-card {
  padding: var(--space-7) var(--space-6) var(--space-6);
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: background var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.tripod-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out-strong);
}
.tripod-card:hover {
  background: var(--paper-2);
}
.tripod-card:hover::before {
  transform: scaleX(1);
}
.tripod-card:last-child { border-right: none; }

.tripod-num {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  color: #e6a818;
  letter-spacing: 0.22em;
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.tripod-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 2.8vw, 44px);
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 0.96;
  margin: 0;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
}
.tripod-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.3vw, 20px);
  color: #e6a818;
  margin-top: 0;
  line-height: 1.3;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 32, "SOFT" 100, "WONK" 0;
}
.tripod-text {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink-2);
  margin: var(--space-3) 0 var(--space-2);
  font-weight: 400;
}
.tripod-tags {
  list-style: none;
  margin: auto 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.tripod-tags li {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--ink-dim);
  text-transform: uppercase;
  font-weight: 500;
}
.tripod-tags li::before {
  content: '· ';
  color: #e6a818;
  margin-right: 2px;
}
.tripod-tags li:first-child::before { content: ''; margin-right: 0; }

@media (max-width: 1100px) {
  .credentials-grid { grid-template-columns: repeat(2, 1fr); }
  .cred-item:nth-child(2) { border-right: none; }
  .cred-item { border-bottom: 1px solid var(--line); padding-bottom: 28px; min-height: auto; }
  .cred-item:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
  .tripod-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .credentials-grid { grid-template-columns: 1fr; }
  .cred-item { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
  .cred-item:last-child { border-bottom: none; padding-bottom: 0; }
}


/* (Fraunces ligature/feature taming moved to the top of the file,
    next to the html/body definitions.) */


/* === Tripod Constellation (hero right) === */
.tripod-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
}
.tripod-svg {
  width: min(560px, 100%);
  height: auto;
  max-height: 640px;
  filter: drop-shadow(0 0 80px rgba(200, 161, 74, 0.10));
  animation: tripodFloat 16s ease-in-out infinite;
  display: block;
}
@keyframes tripodFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
/* Slow rotation of guide rings only */
.tripod-svg > circle:first-of-type,
.tripod-svg > circle:nth-of-type(2) {
  transform-origin: 260px 260px;
  animation: tripodRotate 90s linear infinite;
}
.tripod-svg > circle:nth-of-type(2) {
  animation-direction: reverse;
  animation-duration: 130s;
}
@keyframes tripodRotate {
  to { transform: rotate(360deg); }
}
/* Pulse on each node */
.tripod-node circle:nth-child(2) {
  transform-origin: center;
  transform-box: fill-box;
  animation: nodePulse 3.6s ease-in-out infinite;
}
.tripod-node-p circle:nth-child(2) { animation-delay: 1.2s; }
.tripod-node-d circle:nth-child(2) { animation-delay: 2.4s; }
@keyframes nodePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/* Center pulse */
.tripod-center circle:nth-child(2) {
  transform-origin: center;
  transform-box: fill-box;
  animation: centerPulse 5s ease-in-out infinite;
}
@keyframes centerPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.4); opacity: 0.95; }
}
/* Edge shimmer */
.tripod-edges line {
  stroke-dasharray: 800;
  stroke-dashoffset: 0;
  animation: edgeFlow 8s linear infinite;
}
.tripod-edges line:nth-child(2) { animation-delay: 1s; }
.tripod-edges line:nth-child(3) { animation-delay: 2s; }
@keyframes edgeFlow {
  to { stroke-dashoffset: -800; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tripod-svg, .tripod-svg > circle, .tripod-node circle, .tripod-center circle, .tripod-edges line {
    animation: none !important;
  }
}
@media (max-width: 1100px) {
  .tripod-wrap { min-height: 380px; }
  .tripod-svg { max-width: 420px; }
}


/* === Tripod Constellation (light variant inside Sobre Nós tripod section) === */
.tripod-constellation-frame {
  display: flex;
  justify-content: center;
  margin: 32px auto 48px;
  max-width: 720px;
}
.tripod-wrap--light {
  min-height: 380px;
}
.tripod-wrap--light .tripod-svg {
  filter: drop-shadow(0 8px 32px rgba(24,23,21,0.06));
  max-height: 480px;
}
@media (max-width: 820px) {
  .tripod-constellation-frame { margin: 16px auto 28px; }
  .tripod-wrap--light { min-height: 280px; }
  .tripod-wrap--light .tripod-svg { max-width: 340px; }
}

/* =========================================================================
   SECTORS PAGE (/setores) — long-form editorial layout with manifesto,
   8 deep-dive cards on the index, and per-sector single view.
   Reuses solution-card / partners-back tokens for visual consistency.
   ========================================================================= */
.sectors-page {
  background: var(--cream);
  padding: clamp(140px, 14vw, 200px) var(--pad) clamp(80px, 10vw, 140px);
  min-height: 70vh;
  position: relative;
}

/* Make sector chips on the homepage feel clickable */
.sector.sector-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.sector.sector-link:hover,
.sector.sector-link:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold-500);
  background: rgba(230, 168, 24, 0.04);
}

/* CTA row below the homepage sector grid */
.sectors-cta-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 56px);
}
.sectors-all-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
  text-decoration: none;
  padding: 12px 22px;
  border: 1px solid var(--gold-500);
  border-radius: 999px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.sectors-all-link:hover,
.sectors-all-link:focus-visible {
  background: rgba(230, 168, 24, 0.08);
  transform: translateY(-1px);
}

/* Index manifesto / closing blocks */
.sectors-manifesto,
.sectors-closing {
  max-width: 760px;
  margin: clamp(64px, 8vw, 96px) auto;
  text-align: left;
}
.sectors-manifesto-title,
.sectors-closing-title {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-variation-settings: "opsz" 64, "SOFT" 60, "WONK" 0;
  text-align: center;
}
.sectors-manifesto-p,
.sectors-closing-p {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 clamp(16px, 1.8vw, 22px);
}
.sectors-pull {
  margin: clamp(28px, 4vw, 48px) auto;
  max-width: 60ch;
  padding: 0 clamp(20px, 3vw, 36px);
  border-left: 2px solid var(--gold-500);
  text-align: left;
}
.sectors-pull p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 48, "SOFT" 80, "WONK" 0;
}
.sectors-sign {
  margin-top: clamp(36px, 4vw, 56px);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.sectors-sign p { margin: 4px 0; }
.sectors-sign p:nth-child(2) { color: var(--ink); font-weight: 500; }
.sectors-sign p:nth-child(3) {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-top: 6px;
}

/* Sectors index card grid — 8 cards in 4-col / 2-col / 1-col */
.sectors-grid-cards {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1100px) {
  .sectors-grid-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .sectors-grid-cards { grid-template-columns: 1fr !important; }
}

/* Single sector deep-dive */
.sector-deep {
  max-width: 820px;
  margin: 0 auto;
}
.sector-deep-head {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}
.sector-deep-num {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: clamp(20px, 2vw, 28px);
}
.sector-deep-name {
  font-family: var(--font-display);
  font-weight: 320;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
}
.sector-deep-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  font-variation-settings: "opsz" 48, "SOFT" 80, "WONK" 0;
}

.sector-deep-block {
  margin-bottom: clamp(48px, 6vw, 72px);
}
.sector-deep-block-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  font-weight: 500;
}
.sector-deep-block-body p,
.sector-deep-block-lede,
.sector-deep-partner,
.sector-deep-results {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.78;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.sector-deep-block-lede {
  font-style: italic;
  color: var(--ink);
  border-left: 2px solid var(--gold-500);
  padding-left: clamp(16px, 1.6vw, 22px);
}
.sector-deep-partner {
  background: rgba(230, 168, 24, 0.04);
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: 4px;
  border-top: 1px solid var(--gold-500);
  margin-bottom: 0;
}

/* Findings list — numbered "01 / Title" pattern */
.sector-deep-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: finding;
}
.sector-deep-list li {
  counter-increment: finding;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(14px, 1.6vw, 22px);
  row-gap: 8px;
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--line);
}
.sector-deep-list li:last-child { border-bottom: none; }
.sector-deep-list li::before {
  content: counter(finding, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.16em;
  color: var(--gold-500);
  padding-top: 4px;
}
.sector-deep-list li strong {
  grid-column: 2;
  grid-row: 1;
  display: block;
  font-family: var(--font-display);
  font-weight: 420;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.3;
  color: var(--ink);
  font-variation-settings: "opsz" 32, "SOFT" 40, "WONK" 0;
}
.sector-deep-list li p {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-sans);
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.72;
  color: var(--ink-2);
  margin: 0;
}

/* How we work — em-dash bulleted moves */
.sector-deep-moves {
  list-style: none;
  padding: 0;
  margin: clamp(20px, 2vw, 28px) 0 0;
}
.sector-deep-moves li {
  display: flex;
  gap: 14px;
  padding: clamp(14px, 1.6vw, 20px) 0;
  border-bottom: 1px dotted rgba(0,0,0,0.08);
}
.sector-deep-moves li:last-child { border-bottom: none; }
.sector-deep-moves .move-dash {
  color: var(--gold-500);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  padding-top: 4px;
  flex-shrink: 0;
}
.sector-deep-moves li strong {
  font-family: var(--font-display);
  font-weight: 460;
  font-size: clamp(15.5px, 1.2vw, 18px);
  color: var(--ink);
  font-variation-settings: "opsz" 32, "SOFT" 40, "WONK" 0;
}
.sector-deep-moves li p {
  font-family: var(--font-sans);
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.72;
  color: var(--ink-2);
  margin: 4px 0 0;
}

/* Keywords footer */
.sector-deep-keywords {
  margin-top: clamp(48px, 5vw, 64px);
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px);
  background: rgba(0,0,0,0.02);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sector-deep-kw-label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.sector-deep-kw-value {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.7;
}

@media (max-width: 640px) {
  .sector-deep-list li {
    grid-template-columns: 40px 1fr;
  }
}

/* =========================================================================
   ASSOCIATES PAGE (/associados) — Programa de Associados
   Contextualization + application form with file upload.
   ========================================================================= */
.associates-page {
  background: var(--cream);
  padding: clamp(140px, 14vw, 200px) var(--pad) clamp(80px, 10vw, 140px);
  min-height: 70vh;
  position: relative;
}

.associates-intro {
  max-width: 880px;
  margin: 0 auto clamp(56px, 7vw, 80px);
  text-align: center;
}

.associates-context {
  max-width: 720px;
  margin: 0 auto clamp(72px, 9vw, 112px);
}
.associates-context-heading {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  text-align: center;
}
.associates-context-p {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.78;
  color: var(--ink-2);
  margin: 0 0 clamp(16px, 1.8vw, 22px);
}

/* Form wrapper */
.associates-form-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 3.6vw, 48px);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-500);
  border-radius: 4px;
}
.associates-form-title {
  font-family: var(--font-display);
  font-weight: 360;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 clamp(12px, 1.4vw, 16px);
  font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 0;
}
.associates-form-intro {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 clamp(28px, 3.4vw, 40px);
}

/* Hidden iframe (target for non-AJAX file uploads) */
.associates-iframe-hidden {
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
  visibility: hidden;
}

.associates-form {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 24px);
}

.associates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 22px);
}
@media (max-width: 640px) {
  .associates-grid { grid-template-columns: 1fr; }
}

.associates-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.associates-field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.associates-field label .req {
  color: var(--gold-500);
  margin-left: 4px;
  letter-spacing: 0;
}
.associates-field input,
.associates-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.associates-field input::placeholder,
.associates-field textarea::placeholder {
  color: rgba(0,0,0,0.32);
}
.associates-field input:focus,
.associates-field textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(230, 168, 24, 0.12);
}
.associates-field textarea {
  resize: vertical;
  min-height: 96px;
  font-family: var(--font-sans);
}

/* File picker — custom button + filename display */
.associates-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.associates-file-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 3px;
  background: rgba(255,255,255,0.5);
  transition: border-color .2s ease, background .2s ease;
}
.associates-file-wrap:focus-within {
  border-color: var(--gold-500);
  background: rgba(230, 168, 24, 0.04);
}
.associates-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--gold-500);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-500);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  flex-shrink: 0;
}
.associates-file-btn:hover {
  background: rgba(230, 168, 24, 0.08);
}
.associates-file-name {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-2);
  word-break: break-all;
  flex: 1;
}

.associates-msg {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  padding: 14px 18px;
  border-radius: 3px;
  margin: 0;
}
.associates-msg-error {
  color: #8a3030;
  background: rgba(138, 48, 48, 0.06);
  border: 1px solid rgba(138, 48, 48, 0.2);
}
.associates-msg-success {
  color: #2d5d3a;
  background: rgba(45, 93, 58, 0.06);
  border: 1px solid rgba(45, 93, 58, 0.2);
}

.associates-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  margin-top: clamp(8px, 1vw, 12px);
}
.associates-actions .cta-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.associates-privacy {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}