/* ==========================================================================
   SGEBrazil v2 — Design System
   Premium oilfield services + technical geoscience. See DESIGN_SYSTEM.md.
   ========================================================================== */

:root {
  /* Color tokens — deep petroleum navy / anthracite + warm mineral ivory,
     a controlled deep bronze/rust accent (see DESIGN_SYSTEM.md). Rejected
     direction: pale gray-beige + pale orange-copper, low depth, low
     contrast. Owner-specified hex territory (round 2 correction): primary
     blue-black #0B171D, deep petroleum navy #10242D, secondary deep slate
     #18313A, warm ivory #F3F0E8, accent #A7643B — tuned slightly for
     contrast where checked in the rendered browser. */
  --paper: #F3F0E8;
  --sand: #EAE4D4;
  --sand-line: #D8CDAF;
  --white: #FAF9F6;
  --ink: #102028;
  --ink-2: #0B171D;
  --ink-soft: #3C4D53;
  --ink-faint: #56676D;
  --navy: #10242D;
  --navy-soft: #18313A;
  /* Retuned to the actual bronze sampled from the final approved logo's
     detached puzzle piece (~#AE8A40) — was a dustier orange/rust before
     the final logo existed; now a mineral golden-bronze that matches the
     mark exactly instead of merely coordinating with it. */
  --copper: #AA8944;
  --copper-deep: #785E29;
  --copper-tint: #C6AD7A;
  --line: #D8CDAF;
  --line-on-dark: rgba(243, 241, 234, 0.14);
  --paper-on-dark: rgba(243, 241, 234, 0.84);
  --cream-soft: #B8C2C3;

  /* Depth — restrained shadow scale, always navy-tinted (never neutral
     gray) so elevation reads as part of the same petroleum-navy system
     rather than a generic UI-kit drop shadow. */
  --shadow-soft: 0 20px 44px -26px rgba(11, 23, 29, 0.32);
  --shadow-deep: 0 28px 64px -22px rgba(6, 13, 17, 0.48);
  --shadow-header: 0 16px 36px -20px rgba(16, 32, 40, 0.24);

  /* Type */
  --font-head: "Space Grotesk", ui-sans-serif, "Segoe UI", Arial, sans-serif;
  --font-body: "Manrope", ui-sans-serif, "Segoe UI", Arial, sans-serif;

  /* Layout */
  --container: 1260px;
  --gutter: 24px;
  --radius: 8px;
  --section-pad: 128px;
}

@media (max-width: 720px) {
  :root { --gutter: 20px; --section-pad: 64px; }
}

/* Space Grotesk has no Cyrillic glyphs — fall back to Manrope for headings
   on the Russian locale so type doesn't silently swap to a system font. */
html[lang="ru"] { --font-head: "Manrope", ui-sans-serif, "Segoe UI", Arial, sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper);
  padding: 10px 16px; z-index: 1000; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

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

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
p { margin: 0; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

/* Section kicker — a short tick rule + tracked label, echoing the Hero's
   .eyebrow-rule so the same "instrument label" motif repeats at the top of
   every section (see DESIGN_SYSTEM.md → editorial rhythm). Pure CSS, no
   markup change. */
.k {
  position: relative; display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper-deep); margin-bottom: 16px;
  padding-left: 30px;
}
.k::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 20px; height: 2px; background: var(--copper-deep);
}
.section.on-dark .k::before { background: var(--copper-tint); }

.section { padding: var(--section-pad) 0; }
/* Safe scroll offset for the fixed header — nav links, footer links and any
   in-page anchor jump (smooth-scroll via html{scroll-behavior:smooth} above)
   were landing with the section title tucked directly under the sticky
   header. scroll-margin-top reserves clearance for every anchored section,
   including Final CTA which isn't a .section. */
/* 100px, not 92px: the real fixed-header height is ~97.4px (22px+16px
   padding + a 58.4px brand column: 34px logo + 6px gap + ~18.4px
   descriptor line) whenever .brand-descriptor is visible — i.e. every
   viewport wider than 480px, which is most real traffic. The 92px figure
   predates the logo's 30px -> 34px size-up (see README.md changelog) and
   was never retuned afterward, so anchor jumps were landing ~5px under the
   header. Measured via real getBoundingClientRect(), not eyeballed. */
#method, #applications, #cases, #experience, #contact { scroll-margin-top: 100px; }
/* Deep navy/anthracite surface — Applications and Experience. Gives the
   page its light/dark rhythm (see DESIGN_SYSTEM.md); the accent stays
   restrained even here (small label + tiny icon details only). A hairline
   bronze seam along the top edge marks the transition without a hard cut. */
.section.on-dark { background: var(--navy); color: var(--paper-on-dark); position: relative; }
.section.on-dark::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(204, 143, 92, 0) 0%, rgba(204, 143, 92, 0.4) 50%, rgba(204, 143, 92, 0) 100%);
}
.section.on-dark .k { color: var(--copper-tint); }
.section.on-dark h2 { color: var(--paper); }
.section.on-dark .lead { color: var(--cream-soft); }
.section-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
/* Section headline scale — previously unset (falling back to the browser's
   default ~1.5em h2), which is the single biggest reason the page read as
   flat/mechanical: every major headline below the Hero was rendering far
   smaller than intended, with no relationship to the Hero H1 or the Final
   CTA H2. This restores a real editorial scale, consistent across Method,
   Applications, Cases and Experience. */
.section > .container > h2, .section-inner > h2 {
  max-width: 900px; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.16; letter-spacing: -0.015em;
}
.lead { max-width: 620px; color: var(--ink-soft); font-size: 1.05rem; margin-top: 18px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700;
  font-size: 0.95rem; padding: 14px 26px; border-radius: var(--radius); text-decoration: none;
  border: 1.5px solid transparent; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--copper-deep); }
.btn-outline { background: transparent; color: var(--paper); border-color: var(--line-on-dark); }
.btn-outline:hover { border-color: var(--copper-tint); color: var(--copper-tint); box-shadow: 0 10px 24px -14px rgba(0,0,0,0.5); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--copper); color: var(--copper-deep); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 22px 0 16px; transition: background 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}
.site-header .nav { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; }
/* Logo lockup: two pixel-matched PNGs (normal dark-on-transparent, inverse
   light-on-transparent) stacked and crossfaded via opacity — the normal
   image is laid out normally (defines the box's intrinsic size), the
   inverse image sits absolutely over it at the identical aspect ratio, so
   this needs no hardcoded width. Replaces the old plain-text wordmark
   color swap now that the brand mark is a real image, not text. */
.brand-lockup { position: relative; display: inline-block; height: 34px; }
.brand-logo { display: block; height: 34px; width: auto; }
.brand-logo-inverse { position: absolute; top: 0; left: 0; opacity: 1; transition: opacity 0.25s ease; }
.brand-logo-normal { opacity: 0; transition: opacity 0.25s ease; }
.brand-descriptor { display: block; font-size: 0.72rem; color: var(--paper-on-dark); margin-top: 6px; letter-spacing: 0.02em; transition: opacity 0.2s ease, height 0.2s ease; }

.nav-right { display: flex; align-items: center; gap: 28px; }
.links { display: flex; gap: 26px; }
.links a { text-decoration: none; font-size: 0.92rem; font-weight: 600; color: var(--paper); opacity: 0.92; }
.links a:hover { opacity: 1; color: var(--copper-tint); }

.lang { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--paper-on-dark); }
.lang a { text-decoration: none; color: inherit; padding: 2px 3px; }
.lang a.current { color: var(--paper); }
.lang .sep { opacity: 0.5; }

.header-cta { display: none; }
.nav-toggle { display: none; background: none; border: none; color: var(--paper); cursor: pointer; padding: 4px; }

.site-header.is-scrolled {
  background: rgba(245, 240, 230, 0.96); backdrop-filter: saturate(140%) blur(6px);
  border-bottom-color: var(--line); padding: 12px 0; box-shadow: var(--shadow-header);
}
.site-header.is-scrolled .brand-logo-inverse { opacity: 0; }
.site-header.is-scrolled .brand-logo-normal { opacity: 1; }
.site-header.is-scrolled .brand-descriptor { opacity: 0; height: 0; margin: 0; overflow: hidden; }
.site-header.is-scrolled .links a { color: var(--ink); opacity: 0.85; }
.site-header.is-scrolled .links a:hover { opacity: 1; color: var(--copper-deep); }
.site-header.is-scrolled .lang { color: var(--ink-faint); }
.site-header.is-scrolled .lang a.current { color: var(--ink); }
.site-header.is-scrolled .header-cta { display: inline-flex; }
.site-header.is-scrolled .nav-toggle { color: var(--ink); }

@media (max-width: 880px) {
  .links { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-cta.desktop-only { display: none !important; }
  /* Already duplicated in .mobile-panel's .mobile-lang — showing it here
     too just crowds the compact mobile bar next to the wordmark. */
  .nav-right .lang { display: none; }
}

@media (max-width: 480px) {
  .brand-descriptor { display: none; }
}

.mobile-panel {
  position: fixed; inset: 0; background: var(--ink); color: var(--paper); z-index: 99;
  display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 32px;
  transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease;
}
.mobile-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mobile-brand-logo { height: 34px; width: auto; margin-bottom: -4px; }
.mobile-panel nav { display: flex; flex-direction: column; gap: 22px; }
.mobile-panel nav a { color: var(--paper); text-decoration: none; font-family: var(--font-head); font-size: 1.9rem; font-weight: 600; }
.mobile-lang { display: flex; gap: 12px; font-size: 0.95rem; font-weight: 700; }
.mobile-lang a { color: var(--paper-on-dark); text-decoration: none; }
.mobile-lang a.current { color: var(--copper-tint); }
.mobile-cta { margin-top: 8px; align-self: flex-start; }

/* ---------- Hero ---------- */
/* Deep petroleum-navy atmosphere, not a photograph yet (see README.md — no
   licensed hero photo exists in this build; --hero-image is the hook for
   when one is supplied). Pure navy family throughout — no green/olive
   undertone — using the owner's specified hex territory: primary
   blue-black (#0B171D) at the corners, deep petroleum navy (#10242D) and
   secondary deep slate (#18313A) as the lighter interior stops.

   ROOT-CAUSE FIX: the previous build declared a second `background-image`
   after the shorthand `background`, ending in
   `image-set(var(--hero-image, none) 1x)`. With --hero-image unset, that
   resolves to `image-set(none 1x)` — "none" is not a valid <image> inside
   image-set(), which makes the WHOLE `background-image` value invalid at
   computed-value time. Per spec that drops the entire declaration to its
   initial value (`none`), silently deleting every gradient layer — hero
   background-color was never set, so the body's warm paper color showed
   through underneath the dark ::before overlay, producing exactly the
   pale, muddy "gray/washed out" look reported, regardless of which hex
   values were tuned in the gradient stops above it. Every previous color
   correction was invisible because the gradient never painted at all.

   Fix: one single, always-valid background declaration. --hero-image sits
   in the stack directly (no image-set wrapper) so `none` is simply a valid
   empty layer today, and becomes the top photo layer the moment a real
   `url(...)` is supplied — no other change needed then. Two soft corner
   glows (cool slate top-left, warm bronze bottom-right, both restrained)
   add dimension without introducing a new hue. */
.hero {
  position: relative; min-height: 94vh; display: flex; align-items: center; justify-content: center;
  /* Reserved header zone: with box-sizing:border-box this padding is
     subtracted from min-height before the flex column centers, so the
     content can never render above header-height + breathing room —
     unlike relying on vh-centering alone, which collides with the fixed
     header on short viewports (confirmed at ~650px effective height). */
  padding-top: 132px;
  text-align: center; color: var(--paper); overflow: hidden;
  background-color: var(--ink-2);
  /* Hero photo: "Fundo" — an approved AI-generated atmospheric branding
     visual (Cerrado/Caatinga onshore scene, dirt access road, field 4x4 +
     crew + survey equipment in the lower-right, distant well pad), NOT a
     documentary/field photograph. See ASSET_SOURCES.md -> "Hero
     photograph". The focal cluster (truck + crew) sits at roughly
     x:57-93%, y:67-85% of the source frame — background-position below is
     tuned per breakpoint to keep that cluster in view (cover-fit crops
     horizontally on narrower/taller viewports, where the default center
     position would push the cluster off-frame to the right). */
  --hero-image: url(/assets/hero/hero-onshore.jpg);
  background-image:
    var(--hero-image, none),
    radial-gradient(115% 85% at 16% -14%, rgba(35, 66, 79, 0.62) 0%, rgba(11, 23, 29, 0) 56%),
    radial-gradient(90% 75% at 90% 112%, rgba(167, 100, 59, 0.18) 0%, rgba(11, 23, 29, 0) 62%),
    linear-gradient(158deg, #0B171D 0%, #10242D 38%, #18313A 64%, #0B171D 100%);
  background-size: cover, cover, cover, cover;
  background-position: 64% 72%, center, center, center;
  background-repeat: no-repeat;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Vignette, not a flat wash: darkest behind the header and at the base
     for text legibility, but pulled back through the middle so the navy
     gradient itself reads as color rather than being crushed to black.
     Strengthened center stop (0.05->0.16) and added a matching navy tint
     wash for the "Fundo" photo — its sky/foliage midtones run brighter
     than the previous desert candidate, so headline contrast needs a
     touch more help through the middle of the frame without going back to
     a flat opaque wash. The 0-26% band was measured (via rendered
     getBoundingClientRect + canvas sampling) against the mobile crop,
     where the eyebrow sits at ~15-21% height directly over bright sky —
     the original 0%/32% stops (0.62 -> 0.30) faded too fast, leaving that
     line under 3:1 contrast; holding closer to 0.60 through 26% fixes it
     on both mobile and desktop without touching text color. */
  background:
    linear-gradient(180deg, rgba(6,13,17,0.74) 0%, rgba(8,16,20,0.66) 26%, rgba(8,16,20,0.36) 55%, rgba(6,13,17,0.76) 100%),
    linear-gradient(180deg, rgba(16,36,45,0.24) 0%, rgba(16,36,45,0.24) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Wider than a typical centered tower (900px -> 1180px, per the brief's
   target H1 usable width of ~1100-1250px) — and grouped rather than
   uniformly spaced: value statement (eyebrow+h1+sub) as one tight cluster,
   a clear break, then provenance (meta-lines) as its own cluster, then the
   CTA. Three visual groups read as an intentional composition; six
   evenly-gapped lines read as a mechanically stacked tower. */
.hero-inner { position: relative; z-index: 2; max-width: 1180px; padding: 0 24px; display: flex; flex-direction: column; align-items: center; }
.hero-inner > * { margin-top: 18px; }
.hero-inner > *:first-child { margin-top: 0; }
.hero-inner > .meta-lines { margin-top: 36px; }
.hero-inner > .cta-btn { margin-top: 30px; }
/* Eyebrow shifted to the bronze accent (was plain white) so it reads as
   the same "instrument label" as every section .k kicker below it, rather
   than a disconnected line of bold white sentence-case text. */
.hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; color: var(--copper-tint); max-width: 560px; }
.hero .eyebrow-rule { display: inline-block; width: 22px; height: 2px; background: var(--copper-tint); flex: none; }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; color: var(--white); }
.hero .sub { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--paper-on-dark); max-width: 640px; line-height: 1.58; }
.hero .meta-lines { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero .brazil-line { font-weight: 700; color: var(--paper); font-size: 0.98rem; }
.hero .meta-sep { display: inline-block; width: 1px; height: 14px; background: var(--line-on-dark); }
.hero .partner-line { color: var(--paper-on-dark); font-size: 0.88rem; }

.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; opacity: 0.75; }
.scroll-cue svg { animation: sge-bob 2.2s ease-in-out infinite; }
@keyframes sge-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@media (max-width: 900px) {
  /* Tablet/narrow-desktop: cover-fit on these proportions crops the frame
     horizontally (height-driven scaling), which pushes the truck/crew
     cluster toward the right edge or off-frame at the default position.
     Biased further right than the desktop value to keep it in view. */
  .hero { background-position: 85% 60%, center, center, center; }
}

@media (max-width: 720px) {
  /* padding-bottom reserves clearance for the absolutely-positioned
     .scroll-cue (bottom:26px) — without it, a 4-line H1 push the CTA
     button tall enough to sit directly under the bobbing cue icon. */
  .hero { min-height: 78vh; padding-top: 108px; padding-bottom: 64px; background-position: 85% center, center, center, center; }
  .hero h1 { letter-spacing: -0.01em; }
  .hero .meta-lines { flex-direction: column; gap: 6px; }
  .hero .meta-sep { display: none; }
}

/* ---------- Method ---------- */
/* Two compositions, not one mixed grid (see render.mjs's method()): first
   a single left-aligned editorial explanation — what the method is, read
   as ordinary running paragraphs, not a 3-column spread — at a wide
   editorial measure (~1100px, using the page width the way the rest of
   the post-Hero page does, rather than a narrow ~72ch column) before the
   numbered-workflow composition; then, as a distinct second composition
   below, LEFT = the numbered project workflow (how it's executed), RIGHT
   = Kenya Figure 5, a real technical illustration with a source line
   only — no case narrative under it. */
.method-intro { margin-top: 22px; max-width: 1100px; display: flex; flex-direction: column; gap: 16px; }
.method-intro p { font-size: 1.08rem; line-height: 1.68; color: var(--ink-soft); max-width: 82ch; }

/* Figure column widened ~17% (400px -> 470px cap) and the two columns
   vertically centered rather than top-pinned — at the old narrower width
   the figure (a wide, short seismic-line image) read as a small card
   floating in visibly more whitespace than the five-stage list beside it.
   Tightened gap/margins pull the two into one compact composition instead
   of two loosely-related blocks. */
.method-grid { display: grid; grid-template-columns: 1fr minmax(300px, 470px); gap: 34px; align-items: center; margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line); }

.stages-label {
  font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--ink-faint); margin: 0 0 18px; text-transform: uppercase;
}

.method-figure { position: sticky; top: 100px; }
.method-figure figure { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow-soft); }
.method-figure img { width: 100%; height: auto; border-radius: 3px; display: block; }
/* Source only — deliberately subordinate: small, muted, no caption block
   (this image illustrates the method's principle, it is not a Case Study;
   see DESIGN_SYSTEM.md). */
.method-figure figcaption.fig-source { padding: 10px 4px 2px; font-size: 0.74rem; color: var(--ink-faint); line-height: 1.42; }

.stages { display: flex; flex-direction: column; }
.stage { display: grid; grid-template-columns: 34px 1fr; gap: 14px; position: relative; padding-bottom: 6px; }
.stage:not(:last-child)::before {
  content: ""; position: absolute; left: 16.5px; top: 26px; bottom: -1px; width: 1px; background: var(--line);
}
.stage .num { font-family: var(--font-head); font-weight: 700; font-size: 0.76rem; color: var(--copper); width: 34px; height: 34px; border: 1.3px solid var(--copper); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--paper); z-index: 1; }
.stage h3 { font-size: 0.94rem; margin-bottom: 3px; line-height: 1.32; }
.stage p { font-size: 0.86rem; line-height: 1.48; color: var(--ink-soft); max-width: 68ch; }

@media (max-width: 900px) {
  .method-intro { max-width: none; }
  .method-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; padding-top: 32px; }
  .method-figure { position: static; top: auto; max-width: 100%; }
  .stage p { max-width: none; }
}

/* ---------- Applications (strict 2-col grid, dark surface) ---------- */
/* One grid, not per-item positioning: every .app-row uses the identical
   `repeat(2, minmax(0,1fr))` track, so every left item and every right
   item shares the same x-coordinate on every row — that was the actual
   bug last round (varying 7/5 vs 5/7 spans made the right column visibly
   drift). Each row owns exactly one border-top spanning its full width, so
   dividers are guaranteed continuous. An odd seventh item closes the grid
   as its own full-width row instead of leaving an empty cell. */
.app-grid { display: flex; flex-direction: column; margin-top: 44px; }
.app-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--line-on-dark); padding: 36px 0; }
.app-row--full { grid-template-columns: 1fr; }
.app-item { display: flex; flex-direction: column; gap: 16px; }
.app-icon { color: var(--paper-on-dark); }
.app-item h3 { font-size: 1.06rem; line-height: 1.3; color: var(--paper); }
/* Capped measure so descriptions read as two lines, not one long line
   spanning the whole column. */
.app-item p { font-size: 0.92rem; color: var(--cream-soft); line-height: 1.56; max-width: 54ch; }
.app-row--full .app-item p { max-width: 62ch; }

@media (max-width: 900px) {
  .app-row { grid-template-columns: 1fr; gap: 28px 0; padding: 28px 0; }
  .app-item p { max-width: none; }
}

/* ---------- Cases ---------- */
/* Text/metric-only editorial treatment (no case imagery — see
   DESIGN_SYSTEM.md). Three columns separated by a hairline rule rather than
   card containers. Four visual levels per case: challenge title (primary),
   a secondary country line, context, a labelled documented-result line,
   then metrics recomposed as large-number + short-label pairs (annual-
   report style, not dashboard tiles) — the numbers are the loudest thing
   in the column. .case-source uses margin-top:auto so the sources sit on
   one baseline across all three columns even though the content above
   (2 metrics + note, 2 metrics, 1 metric + note) is intentionally not the
   same length in every column. */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 48px; }
.case-card { display: flex; flex-direction: column; padding: 0 36px; }
.case-card:first-child { padding-left: 0; }
.case-card:last-child { padding-right: 0; }
.case-card:not(:first-child) { border-left: 1px solid var(--line); }
.case-card h3 { font-size: 1.22rem; line-height: 1.3; margin-bottom: 6px; }
.case-country { display: block; font-size: 0.82rem; font-weight: 500; color: var(--ink-faint); margin-bottom: 18px; }
.case-card .context { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.58; margin-bottom: 20px; max-width: 36ch; }
.result-label {
  display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper-deep); margin-bottom: 7px;
}
.case-result { margin-bottom: 22px; }
.case-result .result { font-size: 1.03rem; font-weight: 600; color: var(--ink); line-height: 1.46; max-width: 36ch; }
.case-metrics { display: flex; flex-direction: column; gap: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.case-metric { display: flex; flex-direction: column; gap: 3px; }
.metric-value { font-family: var(--font-head); font-weight: 700; font-size: 2.05rem; color: var(--ink); line-height: 1.08; letter-spacing: -0.015em; }
.metric-label { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.42; max-width: 30ch; }
.case-note { font-size: 0.8rem; color: var(--ink-faint); line-height: 1.52; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); max-width: 34ch; }
.case-source { font-size: 0.76rem; color: var(--ink-faint); margin-top: auto; padding-top: 18px; }

.cases-footnote { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--line); max-width: 820px; }
.cases-footnote p { font-size: 0.86rem; color: var(--ink-faint); margin-bottom: 10px; line-height: 1.6; }

@media (max-width: 900px) {
  .cases-grid { grid-template-columns: 1fr; gap: 0; }
  .case-card { padding: 40px 0; border-left: none !important; border-top: 1px solid var(--line); }
  .case-card:first-child { padding-top: 0; border-top: none; }
}

/* ---------- Experience (dark surface) ---------- */
/* A wide two-column editorial composition — not a narrow centered column
   floating in an otherwise wide dark section. Text on the left at a
   readable measure, the SGEBrazil/AGI partner lockup as its own column on
   the right, so the section reads as one authored institutional block
   rather than several equal feature tiles. */
/* Experience runs shorter than the other on-dark sections (its own
   scoped padding below) and top-aligns its two columns rather than
   vertical-centering them — at the old height + centered lockup, the
   right column (two small 30px logos) sat adrift in visibly more empty
   space than the left column's paragraph, reading as small/detached
   rather than as one authored institutional block. */
#experience { padding: 92px 0; }
.experience-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 64px; align-items: start; }
.experience-text { max-width: 62ch; }
.exp-body { font-size: 1.08rem; color: var(--cream-soft); line-height: 1.72; }
.partner-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 6px; }
/* Inverse (light) logo — already legible directly on the dark navy
   surface, so unlike AGI's mark it needs no light plate behind it.
   Sized up from 30px so the partnership presentation reads as an
   intentional, weighted composition rather than a small afterthought. */
.partner-brand-logo { height: 42px; width: auto; display: block; }
.partner-lockup .div { width: 48px; height: 1px; background: var(--line-on-dark); }
/* AGI's logo file is black-on-transparent — a light plate keeps it legible
   now that Experience sits on the dark surface, without touching the
   partner's asset itself. */
.partner-logo-plate { display: inline-flex; align-items: center; background: var(--paper); padding: 15px 20px; border-radius: 6px; box-shadow: var(--shadow-deep); }
.partner-lockup img { height: 42px; width: auto; }

@media (max-width: 900px) {
  #experience { padding: 60px 0; }
  .experience-grid { grid-template-columns: 1fr; gap: 36px; }
  .experience-text { max-width: none; }
  .partner-lockup { flex-direction: row; align-items: center; margin-top: 0; }
  .partner-lockup .div { width: 1px; height: 44px; }
}

/* ---------- Final CTA ---------- */
/* Left-aligned within the wide container, like the rest of the post-Hero
   page — a controlled measure rather than a centered tower, even for the
   closing statement. A soft echo of the Hero's corner glow (same navy
   family, same restraint) bookends the page — the only two places
   --ink-2 appears — so opening and closing feel like one composition. */
/* Padding cut ~27% (132px -> 96px) and the closing statement moved from a
   single stacked column into a restrained two-column editorial split —
   headline+line on the left, action (button+email) on the right, matching
   the wide-page-use rhythm the rest of the site now uses instead of
   leaving the wide desktop container mostly empty around one short block. */
.final-cta {
  position: relative; overflow: hidden;
  background:
    radial-gradient(85% 130% at 84% 0%, rgba(35, 66, 79, 0.5) 0%, rgba(11, 23, 29, 0) 58%),
    var(--ink-2);
  color: var(--paper); padding: 96px 0;
}
.final-cta::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(204, 143, 92, 0) 0%, rgba(204, 143, 92, 0.4) 50%, rgba(204, 143, 92, 0) 100%);
}
.final-cta-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.final-cta h2 { color: var(--paper); font-size: clamp(1.9rem, 3.6vw, 2.75rem); max-width: 560px; margin: 0 0 14px; }
.final-cta .body { color: var(--paper-on-dark); max-width: 440px; margin: 0; font-size: 1.02rem; }
.final-cta-action { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.final-cta .email-line { font-size: 0.95rem; color: var(--paper-on-dark); }
.final-cta .email-line a { color: var(--copper-tint); text-decoration: none; font-weight: 700; }
.final-cta .email-line a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .final-cta { padding: 64px 0; }
  .final-cta-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Footer ---------- */
.site-footer { padding: 36px 0; background: var(--paper); border-top: 1px solid var(--line); }
.footer-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-logo { height: 24px; width: auto; display: block; }
.footer-descriptor { font-size: 0.8rem; color: var(--ink-faint); }
.footer-lang { display: flex; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--ink-faint); }
.footer-lang a { text-decoration: none; color: inherit; }
.footer-lang a.current { color: var(--ink); }
.footer-rights { font-size: 0.78rem; color: var(--ink-faint); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Doc page (kept for future use) ---------- */
.doc-page { max-width: 760px; margin: 160px auto 100px; padding: 0 24px; }
.doc-page h1 { margin-bottom: 24px; }
.doc-page h2 { margin: 32px 0 12px; font-size: 1.15rem; }
.doc-page p, .doc-page li { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.7; }