/* Shared section-head ------------------------------------------------------ */

.section-head {
  margin-bottom: var(--space-xl);
  max-width: 42rem;
}

.section-head .lede {
  margin-top: var(--space-sm);
}

/* -------------------------------------------------------------------------
   01. Hero
   Real footage is the point — the mask and overlay exist to integrate it,
   not to hide it. Environmental TALENT / TEAM / CAPABILITY type occupies
   the same depth as the media (behind the foreground column), cycling
   slowly on its own so the hero stays quietly alive at rest.
------------------------------------------------------------------------- */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-height) + var(--space-lg));
  overflow: hidden;
}

.hero__depth {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__depth::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(46rem 40rem at 6% 90%, color-mix(in srgb, var(--color-saffron) 10%, transparent), transparent 65%);
}

/* Environmental type — sits above the media (so words can cross the
   footage) but below the foreground column. Restrained: one word "in
   focus" at a time, the others receded, all of it slow and confident. */

.hero__type-field {
  /* Framed to the media panel's own box (not the whole hero) so the
     words are clipped to the footage they sit over instead of bleeding
     past its edges into the headline column or the viewport edge. */
  position: absolute;
  top: 2%;
  bottom: 2%;
  right: -2%;
  width: min(52vw, 42rem);
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.hero__env-word {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-off-white) 6%, transparent);
  opacity: 0;
  transform: scale(0.96);
  mix-blend-mode: overlay;
  transition: opacity var(--duration-env-word) var(--ease-premium), transform var(--duration-env-word) var(--ease-premium),
    color var(--duration-env-word) var(--ease-premium);
}

.hero__env-word.is-current {
  opacity: 1;
  transform: scale(1);
  color: color-mix(in srgb, var(--color-saffron) 20%, transparent);
}

.hero__env-word--talent {
  font-size: clamp(2.75rem, 6vw, 5rem);
  top: 8%;
  right: 8%;
}

.hero__env-word--team {
  font-size: clamp(2.75rem, 6vw, 5rem);
  bottom: 8%;
  right: 12%;
}

.hero__env-word--capability {
  font-size: clamp(2rem, 4vw, 3.5rem);
  top: 44%;
  right: 6%;
}

@media (prefers-reduced-motion: reduce) {
  .hero__env-word {
    transition: none;
  }
}

/* Media — the right ~50% of the hero. Feathered, not framed: only the
   outer edge softens, the footage itself stays clearly visible. */

.hero__media {
  position: absolute;
  z-index: 1;
  top: 2%;
  bottom: 2%;
  right: -2%;
  width: min(52vw, 42rem);
  pointer-events: none;
  transition: transform 200ms linear;
}

.hero__media-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(30% 16% 30% 16%);
  transition: clip-path 1400ms var(--ease-premium);
  /* Asymmetric on purpose: the edge facing the headline (left) softens
     earlier so the subject blends toward the text column instead of
     reading as a cropped rectangle; the outer edge stays fuller. */
  -webkit-mask-image: radial-gradient(80% 94% at 64% 46%, black 72%, transparent 100%);
  mask-image: radial-gradient(80% 94% at 64% 46%, black 72%, transparent 100%);
}

.hero.is-ready .hero__media-mask {
  clip-path: inset(0% 0% 0% 0%);
}

.hero__media-video,
.hero__media-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source is an ultra-wide office/meeting clip; the group of people sits
     roughly center-right of frame with a blurred hand/laptop at the far
     left edge — bias the crop right and slightly above center to keep
     the group in frame and cut the foreground blur. */
  object-position: 60% 42%;
  opacity: 0;
  transition: opacity 900ms var(--ease-premium);
  animation: heroKenBurns 22s ease-in-out infinite alternate;
}

.hero__media-video.is-active,
.hero__media-image.is-active {
  opacity: 1;
}

/* A light color-grade, not a shroud — ties the footage to the ink/gold
   palette without obscuring the subject. */
.hero__media-grade {
  position: absolute;
  inset: 0;
  background: linear-gradient(195deg, color-mix(in srgb, var(--color-ink) 30%, transparent), transparent 42%),
    linear-gradient(0deg, color-mix(in srgb, var(--color-ink) 22%, transparent), transparent 30%);
  pointer-events: none;
}

.hero__media-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12%;
  background: radial-gradient(58% 52% at 54% 30%, color-mix(in srgb, var(--color-saffron) 14%, transparent), transparent 72%),
    linear-gradient(205deg, #201d1a, #0c0b0a 72%);
  transition: opacity 500ms var(--ease-premium);
}

.hero__media-empty p {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-off-white) 62%, transparent);
  max-width: 18rem;
}

.hero__media-empty code {
  color: var(--color-saffron);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.8em;
}

.hero__media-grain {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.hero__media-caption {
  position: absolute;
  left: 0.75rem;
  bottom: 0.65rem;
  z-index: 3;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-off-white) 55%, transparent);
  background: color-mix(in srgb, var(--color-ink) 55%, transparent);
  padding: 0.3em 0.6em;
  border-radius: 3px;
  transition: opacity 300ms var(--ease-out);
}

@keyframes heroKenBurns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media,
  .hero__media-mask {
    transition: none;
  }
  .hero__media-video,
  .hero__media-image {
    animation: none;
  }
}

/* Foreground content --------------------------------------------------------- */

.hero__inner {
  position: relative;
  z-index: 3;
  max-width: 37rem;
}

.hero__scrim {
  position: absolute;
  inset: -8% 2% -8% -14%;
  z-index: -1;
  background: radial-gradient(50rem 36rem at 8% 50%, color-mix(in srgb, var(--color-ink) 88%, transparent) 48%, transparent 80%);
  pointer-events: none;
}

/*
  Line breaks are art-directed, not left to the browser: .hero__break
  forces the composition into a deliberate 2-3 line shape at each
  breakpoint rather than whatever width happens to wrap first. See the
  markup for the three candidate break points.
*/
.hero__headline {
  font-size: var(--fs-hero);
  color: var(--color-off-white);
  max-width: 24ch;
}

.hero__break {
  display: block;
}

.hero__lede {
  margin-top: var(--space-md);
  color: var(--color-muted-cream);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

@media (max-width: 980px) {
  .hero__media {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    width: 100%;
    height: 46vh;
    margin-top: var(--space-xl);
  }
  .hero__media-mask {
    clip-path: inset(0%);
  }
  .hero {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: var(--space-xl);
  }
  .hero__inner {
    max-width: 100%;
  }
  .hero__scrim {
    inset: -10%;
  }
  .hero__type-field {
    inset: 0;
    width: auto;
    z-index: 0;
  }
}

/* -------------------------------------------------------------------------
   02. Audience / positioning beat
------------------------------------------------------------------------- */

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

.audience__statement {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-body-lg);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

/* -------------------------------------------------------------------------
   03. Brand statement
------------------------------------------------------------------------- */

.statement-section__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: stretch;
  max-width: 54rem;
}

.statement-section__rule {
  width: 2px;
  background: var(--color-saffron);
}

/* -------------------------------------------------------------------------
   04. Two Ways to Work
------------------------------------------------------------------------- */

.two-ways__intro {
  max-width: 46rem;
  margin-bottom: var(--space-xl);
}

/* Asymmetric column widths on purpose — a narrower focused column beside
   a wider expansive one — but both panels now share the same framing. */
.two-ways__grid {
  display: grid;
  grid-template-columns: 0.74fr 1.26fr;
  gap: var(--space-xl);
  align-items: stretch;
}

/* Both panels share one frame language — a hairline top rule and the
   same inset — so the pair reads as one composition at equal weight.
   The difference between "a strategic hire" and "a team built around
   the business" comes through in content and icon treatment, not in
   one panel being boxed and the other left bare. */
.way {
  position: relative;
  border-top: 1px solid var(--color-hairline);
  background: color-mix(in srgb, var(--color-ink) 3%, transparent);
  padding: var(--space-lg) var(--space-md);
  min-height: 25rem;
  display: flex;
  flex-direction: column;
}

.way__index {
  position: relative;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-saffron);
}

.way__title {
  position: relative;
  z-index: 2;
  margin-top: var(--space-md);
  font-size: var(--fs-h3);
}

.way__text {
  position: relative;
  z-index: 2;
  margin-top: var(--space-xs);
  color: var(--color-warm-gray);
}

.module {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--color-saffron) 45%, transparent);
  background: linear-gradient(155deg, color-mix(in srgb, var(--color-saffron) 18%, transparent), var(--color-paper));
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--color-saffron) 82%, var(--color-ink));
}

.module .person-glyph {
  width: 46%;
  height: 46%;
  fill: currentColor;
}

/* 01 — contained, focused: one role, one mark ------------------------------- */

.way--single {
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.way--single .way__text {
  max-width: 20rem;
  margin-inline: auto;
}

.way--single .way__visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.way--single .module {
  position: absolute;
  top: 58%;
  left: 50%;
  width: 6rem;
  height: 6rem;
  margin: -3rem 0 0 -3rem;
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.2);
  transition: opacity 620ms var(--ease-premium), transform 620ms var(--ease-premium), filter 620ms var(--ease-premium);
}

.way--single.is-active .module {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* 02 — open, expansive: several roles, a cluster of marks ------------------- */

.way--team .way__text {
  max-width: 30rem;
}

.way--team .way__visual {
  position: relative;
  flex: 1;
  margin-top: var(--space-md);
  min-height: 9rem;
}

.way--team .modules-cluster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 1.25rem;
}

.way--team .module {
  width: 3.75rem;
  height: 3.75rem;
  opacity: 0;
  transition: opacity 480ms var(--ease-premium), transform 680ms var(--ease-premium);
}

.way--team.is-active .module {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg) !important;
}

@media (prefers-reduced-motion: reduce) {
  .way--single .module,
  .way--team .module {
    transition: none;
  }
}

@media (max-width: 820px) {
  .way--team {
    overflow: hidden;
  }
  .way--team .modules-cluster {
    inset: 0;
  }
  .two-ways__grid {
    grid-template-columns: 1fr;
  }
  .way {
    min-height: 19rem;
  }
}

/* -------------------------------------------------------------------------
   05. What We Handle
   An editorial index with a quiet "process spine" — not eight cards.
------------------------------------------------------------------------- */

.handle__intro {
  max-width: 44rem;
}

.handle__body {
  position: relative;
  margin-top: var(--space-xl);
  padding-left: var(--space-md);
}

.handle__spine {
  position: absolute;
  left: 0;
  top: 0.6em;
  bottom: 0.6em;
  width: 1px;
  background: var(--color-hairline-dark);
  overflow: hidden;
}

.handle__spine-fill {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 0%;
  background: var(--color-saffron);
  transition: height 1.2s var(--ease-premium);
}

.handle__spine-fill.is-filled {
  height: 100%;
}

.handle__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-xl);
}

.handle__item {
  position: relative;
  padding-block: 0.9em;
  border-bottom: 1px solid var(--color-hairline-dark);
  font-size: var(--fs-body-lg);
}

.handle__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-md));
  top: 1.35em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-saffron);
  transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .handle__spine-fill {
    transition: none;
  }
}

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

/* -------------------------------------------------------------------------
   06. How It Works
------------------------------------------------------------------------- */

.how__line {
  position: relative;
  height: 1px;
  background: var(--divider);
  margin-bottom: var(--space-lg);
}

.how__line-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0%;
  background: var(--color-saffron);
  transition: width 120ms linear;
}

.how__line-fill.is-filled {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .how__line-fill {
    transition: none;
  }
}

.how__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-lg);
}

.how__step-index {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-saffron);
  margin-bottom: var(--space-sm);
}

.how__step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem);
  margin-bottom: var(--space-xs);
}

.how__step p {
  max-width: 26rem;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-snug);
  /* Section-aware: --text-secondary resolves to muted cream on dark
     sections and warm gray on light ones, so this stays legible if the
     section's theme ever changes. */
  color: var(--text-secondary);
}

@media (max-width: 1080px) {
  .how__steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--space-xl);
  }
}

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

/* -------------------------------------------------------------------------
   07. Capabilities
   A 2x3 editorial matrix, not a sidebar. Selecting a category swaps the
   whole role composition as one controlled block — equal weight, no
   numbering, no lead role.
------------------------------------------------------------------------- */

.capex__intro {
  max-width: 44rem;
}

.capex__matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-hairline-dark);
  border: 1px solid var(--color-hairline-dark);
  margin-bottom: var(--space-2xl);
}

.capex__cat {
  position: relative;
  text-align: left;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  background: var(--color-ink);
  transition: background-color 260ms var(--ease-out);
}

.capex__cat-index {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  color: color-mix(in srgb, var(--color-off-white) 32%, var(--color-ink));
  margin-bottom: var(--space-md);
  transition: color 260ms var(--ease-out);
}

.capex__cat-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  color: color-mix(in srgb, var(--color-off-white) 68%, var(--color-muted-cream));
  transition: color 260ms var(--ease-out);
}

.capex__cat:hover .capex__cat-label {
  color: var(--color-off-white);
}

.capex__cat.is-active {
  background: color-mix(in srgb, var(--color-saffron) 13%, var(--color-ink));
}

.capex__cat.is-active .capex__cat-label {
  color: var(--color-off-white);
}

.capex__cat.is-active .capex__cat-index {
  color: var(--color-saffron);
}

.capex__cat::after {
  content: "";
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: 0;
  height: 2px;
  background: var(--color-saffron);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-premium);
}

.capex__cat.is-active::after {
  transform: scaleX(1);
}

@media (max-width: 780px) {
  .capex__matrix {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Stage: category name + blurb + equal-weight role list -------------------- */

.capex__stage {
  transition: opacity 340ms var(--ease-premium), transform 340ms var(--ease-premium);
}

.capex__stage-head {
  max-width: 44rem;
  margin-bottom: var(--space-xl);
}

.capex__stage-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
}

.capex__stage-blurb {
  margin-top: var(--space-sm);
  color: var(--color-muted-cream);
  font-size: var(--fs-body-lg);
}

.capex__role-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-xl);
}

.capex__role {
  padding-block: 1.15em;
  border-bottom: 1px solid var(--color-hairline-dark);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  letter-spacing: -0.005em;
}

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

@media (max-width: 700px) {
  .capex__role-list {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   08. Why Talentium
------------------------------------------------------------------------- */

.why__layout {
  display: grid;
  grid-template-columns: 0.85fr 1px 1.15fr;
  column-gap: var(--space-xl);
  align-items: start;
}

.why__rule {
  align-self: stretch;
  background: var(--color-hairline);
}

.why__statement {
  font-size: var(--fs-statement);
  max-width: 22rem;
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
}

.why__list {
  border-top: 1px solid var(--divider);
}

.why__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-sm);
  padding-block: clamp(1rem, 0.85rem + 0.5vw, 1.5rem);
  border-bottom: 1px solid var(--divider);
}

.why__item p {
  font-size: var(--fs-body-lg);
  font-weight: 500;
  line-height: var(--lh-snug);
}

.why__item-index {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  color: var(--color-saffron);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .why__layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .why__rule {
    display: none;
  }
  .why__statement {
    position: static;
  }
}

/* -------------------------------------------------------------------------
   09. Why Latin America
------------------------------------------------------------------------- */

.latam__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.latam__list {
  margin-top: var(--space-md);
  display: grid;
  gap: 0.85em;
  font-size: var(--fs-body-lg);
}

.latam__list li {
  padding-left: 1.2em;
  position: relative;
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}

.latam__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-saffron);
}

/*
  Each label sits directly above its own bar, as one self-contained
  group. The previous version used a two-column grid (label | track)
  with `.timezone__row { display: contents }`, which promoted the labels
  and tracks to direct grid children and left their placement entirely
  to auto-placement — so a single mis-placed sibling could shuffle every
  label away from its bar. Grouping each pair makes a label/bar pair
  structurally inseparable, and stacks cleanly at any width.

  Reserves space at the top for the absolutely-positioned
  REAL-TIME OVERLAP caption, which is anchored to the band below.
*/
.timezone__rows {
  position: relative;
  display: grid;
  row-gap: var(--space-sm);
  padding-top: 1.9rem;
}

.timezone__row {
  display: grid;
  row-gap: 0.55rem;
}

.timezone__label {
  position: relative;
  z-index: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-off-white);
}

.timezone__track {
  position: relative;
  z-index: 1;
  height: 11px;
  border-radius: var(--radius-sm);
  background: var(--color-hairline-dark);
  overflow: hidden;
}

.timezone__bar {
  position: absolute;
  inset-block: 0;
  left: var(--bar-start);
  width: calc(var(--bar-end) - var(--bar-start));
  background: var(--color-saffron);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-premium);
}

.timezone__bar.is-filled {
  transform: scaleX(1);
}

/* The overlap corridor runs behind both tracks — this is the actual
   point of the visualization: alignment, made visible, made to breathe.

   Absolutely positioned against .timezone__rows rather than spanning
   grid rows. It previously used `grid-row: 1 / -1`, but `-1` resolves
   against the EXPLICIT grid and no grid-template-rows was ever declared,
   so it collapsed to a single row: the band both landed in the first
   bar's cell (displacing the auto-placed labels and tracks) and, because
   the row track was also `align-items: center` rather than stretched,
   rendered zero pixels tall. Absolute positioning removes the dependency
   on row spanning entirely. Both tracks are now full-container width, so
   the percentages still line up exactly with the bars. */
.timezone__overlap-band {
  position: absolute;
  z-index: 0;
  top: 1.9rem;
  bottom: 0;
  left: var(--overlap-start);
  width: calc(var(--overlap-end) - var(--overlap-start));
  border-left: 1px dashed color-mix(in srgb, var(--color-saffron) 55%, transparent);
  border-right: 1px dashed color-mix(in srgb, var(--color-saffron) 55%, transparent);
  background: color-mix(in srgb, var(--color-saffron) 6%, transparent);
  opacity: 0;
  transition: opacity 900ms var(--ease-premium);
  pointer-events: none;
}

.timezone__overlap-band.is-filled {
  opacity: 1;
  animation: timezonePulse 4.5s ease-in-out infinite;
}

.timezone__overlap-label {
  position: absolute;
  left: 50%;
  top: -1.7rem;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-saffron);
}

@keyframes timezonePulse {
  0%,
  100% {
    background: color-mix(in srgb, var(--color-saffron) 6%, transparent);
  }
  50% {
    background: color-mix(in srgb, var(--color-saffron) 14%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timezone__overlap-band.is-filled {
    animation: none;
    background: color-mix(in srgb, var(--color-saffron) 10%, transparent);
  }
}

.timezone__caption {
  margin-top: var(--space-md);
  font-size: 0.9375rem;
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}

@media (max-width: 860px) {
  .latam__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* -------------------------------------------------------------------------
   10. Human / brand moment
   Deliberately echoes the hero's grammar (full-bleed masked media, a
   scrim-backed text column, layered depth) but mirrored — media left,
   text right — so the two moments rhyme instead of repeating. Text and
   footage share one continuous dark environment rather than sitting in
   a media-rectangle-beside-copy split.
------------------------------------------------------------------------- */

.human {
  overflow: hidden;
}

.human__stage {
  position: relative;
  min-height: 34rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.human__media {
  /* Widened so the footage carries real weight in the composition —
     with a narrower panel the gap between it and the statement on the
     right read as empty rather than intentional negative space. */
  position: absolute;
  z-index: 0;
  top: -6%;
  bottom: -6%;
  left: -8%;
  width: min(66vw, 52rem);
  pointer-events: none;
}

.human__media-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(80% 90% at 38% 48%, black 72%, transparent 100%);
  mask-image: radial-gradient(80% 90% at 38% 48%, black 72%, transparent 100%);
}

.human__media-video,
.human__media-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Two colleagues collaborating over a phone sit left-of-center in this
     clip, which lines up with the mask's left-weighted center (38%);
     keep vertical framing on their heads/hands rather than the floor. */
  object-position: 38% 35%;
  opacity: 0;
  transition: opacity 900ms var(--ease-premium);
  animation: humanKenBurns 26s ease-in-out infinite alternate;
}

.human__media-video.is-active,
.human__media-image.is-active {
  opacity: 1;
}

.human__media-empty {
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, var(--color-charcoal), var(--color-ink) 70%);
}

@keyframes humanKenBurns {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.05);
  }
}

.human__text-wrap {
  position: relative;
  z-index: 1;
  margin-left: auto;
  width: 100%;
}

.human__scrim {
  /* Reaches further left, into the video's own right edge, so the dark
     wash bridges media and statement into one field rather than two
     separate objects with bare space between them. */
  position: absolute;
  z-index: -1;
  inset: -24% -6% -24% -52%;
  background: radial-gradient(48rem 36rem at 100% 50%, color-mix(in srgb, var(--color-ink) 90%, transparent) 58%, transparent 88%);
  pointer-events: none;
}

.human__statement {
  position: relative;
  max-width: 27rem;
  margin-left: auto;
  color: var(--color-off-white);
}

@media (prefers-reduced-motion: reduce) {
  .human__media-video,
  .human__media-image {
    animation: none;
  }
}

@media (max-width: 860px) {
  .human__stage {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .human__media {
    position: relative;
    inset: auto;
    top: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: 44vh;
  }
  .human__media-mask {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .human__scrim {
    display: none;
  }
  .human__text-wrap {
    margin-top: var(--space-lg);
  }
  .human__statement {
    max-width: none;
    margin-left: 0;
    color: var(--color-ink);
  }
}

/* -------------------------------------------------------------------------
   11. Final CTA
------------------------------------------------------------------------- */

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

.cta__inner {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.cta__inner .lede {
  margin-inline: auto;
  margin-top: var(--space-sm);
}

.cta__actions {
  margin-top: var(--space-lg);
}

.cta__note {
  margin-top: var(--space-md);
  font-size: 0.9375rem;
}

.cta__note a {
  color: var(--color-saffron);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   12. Footer
------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-lg) var(--space-md);
}

.site-footer .brand {
  color: var(--color-off-white);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-md);
}

.footer__brand p {
  margin-top: var(--space-xs);
  max-width: 22rem;
}

.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer__nav a {
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__nav a:hover {
  color: var(--color-saffron);
}

.footer__bottom {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-hairline-dark);
  font-size: 0.875rem;
}

/* Privacy Policy, set inline after the copyright line. It inherits the
   footer bottom's size and muted color, so it stays discreet — the only
   addition is a link affordance, since the global reset strips
   underlines from every anchor. No layout change to the footer. */
.footer__legal {
  margin-left: var(--space-2xs);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__legal:hover {
  color: var(--color-saffron);
}

/* -------------------------------------------------------------------------
   Brand logo — the approved wordmark asset, primary on the light header,
   reversed on the dark footer. Never re-typeset: these are the packaged
   SVGs, scaled proportionally and kept above the 100px digital minimum
   from the logo guidelines.
------------------------------------------------------------------------- */

/* inline-flex (rather than a line-height:0 reset) removes the inline
   baseline gap under the logo without collapsing a text wordmark — the
   prototype pages share this stylesheet and still render text. */
.brand {
  display: inline-flex;
  align-items: center;
}

.brand__logo {
  width: clamp(124px, 11vw, 150px);
  height: auto;
}

.footer__brand .brand__logo {
  width: clamp(136px, 13vw, 164px);
}


/* For Talent / .talent-form styling intentionally lives in
   css/integration-preview.css, which is the visual source of truth for
   that section and loads after this file. A duplicate copy of these
   rules was removed here during the 2026-08-23 production transfer;
   integration-preview.css covers every selector this block defined,
   plus .for-talent, .for-talent__glow, .for-talent__intro,
   .for-talent__hint, .talent-form and .talent-form__optional. */