/*
  Integration Preview — Signature Atmosphere (Direction A) applied to V1
  Loads after sections.css and only ADDS rules for the new atmosphere
  layers in the hero, Capabilities and Final CTA. It never redeclares an
  approved selector — everything else on the page keeps sections.css's
  exact, unmodified styling.
*/

/* -------------------------------------------------------------------------
   00. No repeated text fade-ins. sections.css/main.js still drive
   .reveal → .is-visible for the approved V1 (scroll-triggered opacity
   fade + transform), but in this preview every .reveal-classed element
   is immediately visible regardless of scroll position, scroll speed or
   JS timing — text should never be initialized at opacity:0. This does
   not touch functional transitions (nav, Capabilities tab switching,
   form validation), which don't use this class, nor the hero/Human dot
   motifs, which are canvas-drawn.
------------------------------------------------------------------------- */

.reveal,
.reveal--left,
.reveal--scale {
  opacity: 1 !important;
  transform: none !important;
}

/* -------------------------------------------------------------------------
   01. Hero — full-background Connected Constellation + Ambient Field,
   replacing the split-video panel and environmental type. Full-bleed
   across the whole hero, not confined to a right-side panel.
------------------------------------------------------------------------- */

.hero__atmosphere-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

.hero__atmosphere-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  will-change: transform;
  transition: opacity 1600ms ease;
}

/* Quieted slightly while the canvas's own connection-generated light is
   active, so that light always reads as the clear source of warmth —
   restored the moment the sequence starts releasing. */
.hero.is-sequence-active .hero__atmosphere-glow {
  opacity: 0.55;
}

.hero__atmosphere-glow--a {
  top: -10%;
  right: -8%;
  width: min(56vw, 46rem);
  height: min(56vw, 46rem);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-saffron) 20%, transparent), transparent 70%);
  animation: heroAtmosGlowA 26s ease-in-out infinite alternate;
}

.hero__atmosphere-glow--b {
  bottom: -18%;
  left: -12%;
  width: min(48vw, 40rem);
  height: min(48vw, 40rem);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-muted-cream) 9%, transparent), transparent 72%);
  animation: heroAtmosGlowB 32s ease-in-out infinite alternate;
}

@keyframes heroAtmosGlowA {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-6%, 8%) scale(1.12);
  }
}

@keyframes heroAtmosGlowB {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(8%, -6%) scale(1.08);
  }
}

.hero__atmosphere-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  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>");
}

/* Broader than the existing .hero__scrim (which only darkens locally
   behind the text column) — this protects legibility across the whole
   left half now that the atmosphere is full-bleed, not a bounded panel. */
.hero__atmosphere-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--color-ink) 74%, transparent) 0%,
    color-mix(in srgb, var(--color-ink) 28%, transparent) 44%,
    transparent 70%
  );
}

@media (prefers-reduced-motion: reduce) {
  .hero__atmosphere-glow--a,
  .hero__atmosphere-glow--b {
    animation: none;
  }
}

@media (max-width: 720px) {
  .hero__atmosphere-glow--a,
  .hero__atmosphere-glow--b {
    width: 80vw;
    height: 80vw;
  }
}

/* -------------------------------------------------------------------------
   01b. Kinetic word transition — one fixed phrase, one word cycling
   through a vertical masked slide (never opacity fading, never a
   marquee/ticker). A 5th duplicate "Capability" item lets the loop reset
   invisibly: sliding from "Impact" onto the duplicate lands on the exact
   same visual position as the real first word, so the jump back to 0%
   is imperceptible. Quiet and brief by design — no dots, no glows, no
   extra copy.
------------------------------------------------------------------------- */

/* A compact bridge, not a section: a fixed px height (never vh, which
   is what made it read as a second near-full-screen panel), just tall
   enough to give the phrase air. The hero's atmosphere continues through
   it as a very faint static dot field (~10-15% of the hero) so it never
   becomes an empty black divider — no canvas, no sequence, no glow. */
.kinetic-word {
  position: relative;
  height: 200px;
  min-height: 0;
  display: flex;
  align-items: center;
  padding-block: 0;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--color-off-white) 7%, transparent);
}

.kinetic-word::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(240, 166, 60, 0.5) 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(227, 205, 163, 0.45) 1.1px, transparent 1.5px),
    radial-gradient(circle, rgba(240, 166, 60, 0.4) 1px, transparent 1.4px);
  background-position: 8% 28%, 82% 62%, 46% 82%;
  background-size: 190px 150px, 240px 170px, 300px 200px;
  opacity: 0.5;
}

.kinetic-word .container {
  position: relative;
  width: 100%;
  text-align: center;
}

@media (max-width: 860px) {
  .kinetic-word {
    height: 168px;
  }
}

@media (max-width: 560px) {
  .kinetic-word {
    height: 150px;
  }
}

.kinetic-word__line {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.35em;
  font-family: var(--font-display);
  font-weight: 600;
  /* ~25px mobile → ~34px tablet → 44px desktop: a confident editorial
     beat that stays clearly subordinate to the hero headline. */
  font-size: clamp(1.5625rem, 1.15rem + 1.65vw, 2.75rem);
  line-height: 1.15;
  color: var(--color-off-white);
  letter-spacing: var(--tracking-tight);
}

/* A fixed width sized for the longest word ("Capability") so the phrase
   never shifts horizontally as words swap. overflow:hidden clips both
   the outgoing and incoming word to this single line box. */
.kinetic-word__mask {
  display: inline-block;
  overflow: hidden;
  width: 7.4em;
  height: 1.15em;
  vertical-align: bottom;
}

.kinetic-word__track {
  display: flex;
  flex-direction: column;
  animation: kineticWordCycle 6.5s infinite;
}

.kinetic-word__item {
  height: 1.15em;
  line-height: 1.15;
  color: var(--color-saffron);
  white-space: nowrap;
  text-align: left;
}

/* Pacing (6.5s cycle): each word holds ~0.9s and each swap takes ~0.26s,
   with a slightly longer beat on "Impact" before the loop closes. The
   previous 10s cycle held every word ~1.6s and paused 2.5s on "Impact",
   which read as waiting rather than purposeful. Structure, easing and
   travel distances are unchanged — only the timing was tightened. */
@keyframes kineticWordCycle {
  0% {
    transform: translateY(0%);
  }
  14% {
    transform: translateY(0%);
    animation-timing-function: var(--ease-premium);
  }
  18% {
    transform: translateY(-20%);
  }
  32% {
    transform: translateY(-20%);
    animation-timing-function: var(--ease-premium);
  }
  36% {
    transform: translateY(-40%);
  }
  50% {
    transform: translateY(-40%);
    animation-timing-function: var(--ease-premium);
  }
  54% {
    transform: translateY(-60%);
  }
  72% {
    /* The longest hold — a brief beat on "Impact" before the cycle eases
       onward and resets. */
    transform: translateY(-60%);
    animation-timing-function: var(--ease-premium);
  }
  76% {
    transform: translateY(-80%);
  }
  100% {
    transform: translateY(-80%);
  }
}

/* Always in the accessibility tree (screen readers get the full
   sentence regardless of motion preference); visually hidden here via
   the same clip technique as the site's existing decorative-text
   duplicates, and swapped to visible below for reduced motion. */
.kinetic-word__static {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kinetic-word__line {
    display: none;
  }
  .kinetic-word__static {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.5625rem, 1.15rem + 1.65vw, 2.75rem);
    line-height: 1.15;
    color: var(--color-off-white);
  }
}

/* -------------------------------------------------------------------------
   02. Audience / founder-executive statement — larger, wider, more
   confident. Copy and centered treatment are unchanged.
------------------------------------------------------------------------- */

.audience {
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.audience__statement {
  /* 55rem lands the wrap right after "...hiring leaders who", giving two
     naturally balanced lines at the desktop font size below. */
  max-width: 55rem;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
}

/* -------------------------------------------------------------------------
   04. Two Ways to Work — luminous point marks replace the generic
   person-icon modules. Placed after the copy in normal flow (not
   absolutely overlapping it), so nothing interrupts the paragraph.
------------------------------------------------------------------------- */

.two-ways {
  /* ~12% less than the approved section--tight padding — trims empty
     space without touching the asymmetric panel composition itself. */
  padding-block: clamp(4rem, 3rem + 3.9vw, 7rem);
}

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

/* Both engagement models share one left axis. sections.css centres the
   first card (align-items/text-align: center, plus margin-inline:auto on
   its body copy), which put its number, headline and paragraph on three
   different optical axes and read as a different component to the card
   beside it. Alignment only — nothing about the Remote Hub card, the
   grid or the spacing scale changes. */
.way--single {
  align-items: flex-start;
  text-align: left;
}

.way--single .way__text {
  margin-inline: 0;
}

/* "Hire Exceptional Talent" needs ~242px to break after "Exceptional",
   but this card's content box is ~235px at a 1024-wide window — a 7px
   shortfall that tipped the headline onto a third line. Extending the
   headline's wrap width into the card's right padding buys that back
   without moving the left axis, changing the padding, or touching the
   grid. Because the line is left-aligned and still ends well short of
   the card edge, this changes only where the text wraps, never where it
   sits. It stays two lines at every desktop width: the widest this box
   ever gets is ~305px, still far below the ~384px the full phrase would
   need to sit on one line. */
.way--single .way__title {
  margin-right: -1.75rem;
}

/* Remote Hub — the proposition demonstrated rather than decorated. The
   previous five CSS dots were too small to read as anything but a
   bullet motif; this gives the consecutive-connection sequence real
   scale and negative space inside the panel it belongs to. */
.way__field {
  position: relative;
  flex: 1;
  min-height: 12rem;
  margin-top: var(--space-md);
}

.way__field-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 820px) {
  .way__field {
    min-height: 9.5rem;
  }
}

.way__dot {
  display: inline-block;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 700ms var(--ease-premium), transform 700ms var(--ease-premium);
  background: radial-gradient(circle, var(--color-saffron) 0%, color-mix(in srgb, var(--color-saffron) 35%, transparent) 70%, transparent 100%);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--color-saffron) 40%, transparent);
}

.way--single.is-active .way__dot,
.way--team.is-active .way__dot {
  opacity: 1;
  transform: scale(1);
}

.way__mark--single {
  display: flex;
}

.way__mark--single .way__dot {
  width: 15px;
  height: 15px;
}

.way__mark--team {
  position: relative;
  width: 4.75rem;
  height: 3.25rem;
}

.way__mark--team .way__dot {
  position: absolute;
  width: 9px;
  height: 9px;
}

.way__mark--team .way__dot:nth-child(2) {
  background: radial-gradient(circle, color-mix(in srgb, var(--color-muted-cream) 55%, var(--color-saffron) 45%) 0%, transparent 72%);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--color-muted-cream) 45%, var(--color-saffron) 25%);
}

.way__mark--team .way__dot:nth-child(4) {
  background: radial-gradient(circle, color-mix(in srgb, var(--color-muted-cream) 55%, var(--color-saffron) 45%) 0%, transparent 72%);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--color-muted-cream) 45%, var(--color-saffron) 25%);
}

.way__mark--team .way__dot:nth-child(1) {
  top: 1rem;
  left: 0;
  transition-delay: 0ms;
}

.way__mark--team .way__dot:nth-child(2) {
  top: 0;
  left: 1.15rem;
  transition-delay: 70ms;
}

.way__mark--team .way__dot:nth-child(3) {
  top: 1.55rem;
  left: 1.35rem;
  transition-delay: 140ms;
}

.way__mark--team .way__dot:nth-child(4) {
  top: 0.35rem;
  left: 2.5rem;
  transition-delay: 210ms;
}

.way__mark--team .way__dot:nth-child(5) {
  top: 1.75rem;
  left: 3.4rem;
  transition-delay: 280ms;
}

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

/* -------------------------------------------------------------------------
   06. How It Works — trimmed top/bottom section padding only; the line,
   steps and their sizes are untouched.
------------------------------------------------------------------------- */

.how {
  padding-block: clamp(4rem, 3rem + 3.9vw, 7rem);
}

/* -------------------------------------------------------------------------
   07. Capabilities — one restrained continuation of the atmosphere: the
   ambient field only, no network, no repeated hero. Sits behind the
   approved matrix/stage, which is otherwise untouched.
------------------------------------------------------------------------- */

/* Layering contract for this section, lowest to highest:
     1. .capex's own ink background (from .section--dark)
     2. .capex__atmosphere (z-index:-1) — wash, glows, then dot canvas
     3. .capex > .container (z-index:1) — heading, matrix, role content
   z-index:0 on the section gives it its own stacking context so the -1
   layer stays contained here rather than escaping behind a neighbour.
   Per CSS painting order a negative-z child still paints ABOVE its
   parent's own background, so the atmosphere is genuinely visible —
   provided the content surfaces above it are not fully opaque, which is
   what the translucent cell/matrix rules below fix. */
.capex {
  z-index: 0;
  overflow: hidden;
}

.capex > .container {
  position: relative;
  z-index: 1;
}

/* ~22% less padding than the approved matrix cell — same 3-col/2-row
   grid, same type sizes, just a more efficient use of the cell. Equal
   min-height on every cell (not just equal padding) is what actually
   equalizes the two rows — labels wrap to one or two lines depending on
   length ("Customer Experience" vs "Finance"), and grid rows auto-size
   to their tallest cell, so unequal wrapping alone was enough to make
   the top row taller. A shared min-height sized for the longest label
   fixes that regardless of which category is active. */
/*
  Compact capability selectors.

  These were a 3x2 grid of ~19.5rem-tall panels: sections.css gives the
  matrix `grid-template-columns: repeat(3, 1fr)` with a 1px gap and a
  border, and this file previously added a large clamp() padding plus a
  `min-height` sized to fit the longest two-line label. Together those
  turned six controls into six full content panels that owned the whole
  viewport and left the atmosphere no room. They are navigation, not
  content — so they collapse to a wrapping row of small pill controls
  and the grid/border scaffolding is unset.
*/
.capex__matrix {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  background: none;
  border: 0;
  margin-bottom: var(--space-lg);
}

.capex__cat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  min-height: 0;
  padding: 0.72em 1.15em;
  border: 1px solid color-mix(in srgb, var(--color-hairline-dark) 85%, transparent);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--color-ink) 55%, transparent);
  background-image: none;
  box-sizing: border-box;
  transition: background-color 260ms var(--ease-out), border-color 260ms var(--ease-out);
}

.capex__cat:hover {
  border-color: color-mix(in srgb, var(--color-saffron) 45%, transparent);
}

.capex__cat-index {
  margin-bottom: 0;
  font-size: 0.6875rem;
  opacity: 0.75;
}

.capex__cat-label {
  font-size: 0.9375rem;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Desktop: six equal controls on one row. Flex sized each pill to its
   own label, so "Finance" and "Customer Experience" came out very
   different widths; an equal-column grid makes every control identical
   in width, and stretch makes them identical in height. Labels may wrap
   to a second line inside their cell — the row equalises around the
   tallest, so they stay level. */
@media (min-width: 900px) {
  .capex__matrix {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
  }
  .capex__cat {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.7em 0.8em;
  }
  .capex__cat-label {
    white-space: normal;
    font-size: 0.875rem;
    line-height: 1.25;
  }
}

/* The selected control keeps its warm-gold identity as a translucent
   wash, so the gathered glow behind it still registers through it. */
.capex__cat.is-active {
  background-color: color-mix(in srgb, var(--color-saffron) 16%, transparent);
  border-color: color-mix(in srgb, var(--color-saffron) 55%, transparent);
}

/* sections.css draws the active underline as an absolutely-positioned
   bar inset by --space-md, which was sized for the old wide panel and
   would overhang a pill. Retired in favour of the border/fill state. */
.capex__cat::after {
  display: none;
}

@media (max-width: 560px) {
  .capex__cat {
    padding: 0.65em 0.95em;
  }
  .capex__cat-label {
    font-size: 0.875rem;
  }
}

/* Expanded role panel — height now follows content (no fixed/min-height
   anywhere here), with ~28% less padding around the block and a
   responsive role grid instead of a fixed two columns. */
.capex__stage {
  height: auto;
  min-height: 0;
  /* main.js's category switch briefly sets inline opacity/transform on
     this element to cross-fade the role content — this preview asks for
     immediate updates with no fade. main.js is an approved V1 file this
     preview must not edit, so the fade is neutralized here instead: an
     !important override beats the inline style main.js applies, leaving
     only its ~260ms scheduling pause (imperceptible, no visible fade)
     before the new content is written in. */
  opacity: 1 !important;
  transform: none !important;
}

.capex__stage-head {
  margin-bottom: clamp(2.25rem, 1.7rem + 2.4vw, 4rem);
}

.capex__stage-blurb {
  margin-top: var(--space-xs);
}

.capex__role-list {
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-lg);
  row-gap: 0;
}

/* The role list is a range to scan, not a set of headlines. Dropping
   the role type from ~1.19-1.5rem to ~1rem and roughly halving the row
   padding lets the whole senior-to-execution span be taken in at a
   glance. The function heading above keeps its full size, so the
   hierarchy between "what this capability is" and "who sits inside it"
   gets stronger rather than flatter. */
.capex__role {
  padding-block: 0.46em;
  font-size: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  line-height: 1.35;
}

.capex__role-list {
  column-gap: var(--space-md);
}

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

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

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

.capex__atmosphere-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.capex__atmosphere-glow {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.capex__atmosphere-glow--a {
  top: -22%;
  left: -10%;
  width: min(38vw, 32rem);
  height: min(38vw, 32rem);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-saffron) 16%, transparent), transparent 72%);
  filter: blur(70px);
  animation: capexAtmosA 30s ease-in-out infinite alternate;
}

.capex__atmosphere-glow--b {
  bottom: -26%;
  right: -8%;
  width: min(34vw, 28rem);
  height: min(34vw, 28rem);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-muted-cream) 11%, transparent), transparent 74%);
  filter: blur(70px);
  animation: capexAtmosB 36s ease-in-out infinite alternate;
}

/* A wide, very soft amber/champagne wash across the whole section, so
   the matrix and role panel read as one immersive dark environment
   rather than a flat background with two corner accents. Static and
   low-opacity — depth, not a moving distraction. */
.capex__atmosphere-wash {
  position: absolute;
  inset: -10%;
  background: radial-gradient(
    120% 90% at 50% 40%,
    color-mix(in srgb, var(--color-gold-deep) 7%, transparent) 0%,
    transparent 60%
  );
  pointer-events: none;
}

@keyframes capexAtmosA {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(4%, 5%) scale(1.1);
  }
}

@keyframes capexAtmosB {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-5%, -4%) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .capex__atmosphere-glow--a,
  .capex__atmosphere-glow--b {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   10. Human / brand moment — the video and statement as one composition.
   Replaces the old isolated text box + blurred radial scrim with a
   single dark panel that overlaps the video's own edge, carrying a
   restrained trace of amber/gold/champagne depth and a compact echo of
   the hero's connection motif above the statement.
------------------------------------------------------------------------- */

.human {
  padding-block: clamp(3.5rem, 2.8rem + 3.2vw, 5.5rem);
}

/* Video and panel widths are both percentages of .human__stage itself
   (not the viewport), so the 60/44 split and the ~6% overlap between
   them hold at any container width: media spans -8% to 52%, the panel
   starts at 46% — a deliberate 6% overlap, not a gap. */
.human__media {
  width: 60%;
}

.human__panel {
  position: absolute;
  z-index: 1;
  left: 46%;
  width: 44%;
  /* ~84% of the stage height, centered — the video bleeds 6% above and
     below the stage, so this lands the panel at ~75% of the video's own
     (taller) height, within the 70-80% target. */
  top: 8%;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2.5rem;
  background: var(--color-ink);
  color: var(--color-off-white);
  overflow: hidden;
  box-sizing: border-box;
}

.human__panel-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.human__panel-glow--a {
  top: -22%;
  right: -18%;
  width: 65%;
  height: 65%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-gold-deep) 55%, var(--color-saffron) 45%) 0%, transparent 72%);
  filter: blur(46px);
  opacity: 0.4;
}

.human__panel-glow--b {
  bottom: -26%;
  left: -14%;
  width: 52%;
  height: 52%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-muted-cream) 55%, var(--color-saffron) 45%) 0%, transparent 74%);
  filter: blur(42px);
  opacity: 0.3;
}

.human__motif {
  position: relative;
  z-index: 1;
  /* A compact, self-contained motif — not the full width of the panel.
     Explicit width also overrides the flex column's default stretch. */
  width: 120px;
  height: 3.5rem;
  margin-bottom: var(--space-xs);
  align-self: flex-start;
  /* Never let the flex layout shrink this to fit — if space is tight,
     the statement's own sizing (below) is what should adapt. */
  flex-shrink: 0;
}

.human__motif-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.human__statement {
  position: relative;
  z-index: 1;
  /* Tuned so the approved copy resolves to ~6-8 balanced lines at the
     panel's own font size, rather than the few very-wide lines a full-
     width column would give. */
  max-width: 30rem;
  margin-left: 0;
  color: var(--color-off-white);
}

@media (max-width: 860px) {
  .human__media {
    position: relative;
    inset: auto;
    left: auto;
    width: 100%;
  }
  .human__panel {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    margin-top: var(--space-lg);
  }
  .human__statement {
    /* The panel stays dark on mobile too (unlike the approved layout's
       light fallback), so this must override sections.css's mobile rule
       that switches the statement to ink-on-light. */
    max-width: none;
    color: var(--color-off-white);
  }
}

/* -------------------------------------------------------------------------
   11. Final CTA — quieter Luminous Field (Direction C), bringing the
   atmosphere full circle. No network lines here. The footer immediately
   after stays plain and fully functional.
------------------------------------------------------------------------- */

.cta {
  z-index: 0;
  overflow: hidden;
}

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

.cta__atmosphere-glow {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.cta__atmosphere-glow--1 {
  top: -30%;
  left: 22%;
  width: min(50vw, 40rem);
  height: min(50vw, 40rem);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-gold-deep) 50%, var(--color-saffron) 50%) 0%, transparent 70%);
  filter: blur(80px);
  opacity: 0.14;
  animation: ctaAtmos1 34s ease-in-out infinite alternate;
}

.cta__atmosphere-glow--2 {
  bottom: -32%;
  right: 8%;
  width: min(36vw, 30rem);
  height: min(36vw, 30rem);
  background: radial-gradient(circle, color-mix(in srgb, var(--color-muted-cream) 55%, var(--color-saffron) 45%) 0%, transparent 72%);
  filter: blur(70px);
  opacity: 0.12;
  animation: ctaAtmos2 40s ease-in-out infinite alternate;
}

.cta__atmosphere-glow--3 {
  top: 20%;
  left: 6%;
  width: min(20vw, 18rem);
  height: min(20vw, 18rem);
  background: radial-gradient(circle, var(--color-saffron) 0%, transparent 68%);
  filter: blur(50px);
  opacity: 0.13;
  animation: ctaAtmos3 24s ease-in-out infinite alternate;
}

@keyframes ctaAtmos1 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(6%, 4%) scale(1.1);
  }
}

@keyframes ctaAtmos2 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-4%, -5%) scale(1.08);
  }
}

@keyframes ctaAtmos3 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(3%, 4%) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta__atmosphere-glow--1,
  .cta__atmosphere-glow--2,
  .cta__atmosphere-glow--3 {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   Nav — restrained "For Talent" link, visually secondary to the primary
   company-facing nav items and the "Build Your Team" CTA button.
------------------------------------------------------------------------- */

.nav__secondary {
  opacity: 0.75;
}

.nav__secondary:hover {
  opacity: 1;
}

/* -------------------------------------------------------------------------
   10b. For Talent — the talent-facing counterpart to the rest of the
   page. Light, editorial, only a single faint gold glow (no canvas, no
   hero-scale motion) — a trace of the signature atmosphere, not a
   repeat of it.
------------------------------------------------------------------------- */

.for-talent {
  position: relative;
  overflow: hidden;
  z-index: 0;
  /* ~28% less than the default section padding — this pathway is
     important but secondary to the primary commercial journey, and
     should read as roughly one viewport, not a second homepage. */
  padding-block: clamp(4.25rem, 3.2rem + 4.6vw, 7.75rem);
}

.for-talent__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-2xl);
  align-items: start;
}

.for-talent__intro {
  margin-bottom: 0;
  max-width: none;
}

.for-talent__hint {
  margin-top: var(--space-md);
  font-size: 0.8125rem;
}

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

.for-talent__glow {
  position: absolute;
  z-index: -1;
  top: -18%;
  right: -10%;
  width: min(30vw, 26rem);
  height: min(30vw, 26rem);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-saffron) 10%, transparent) 0%, transparent 72%);
  filter: blur(60px);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .for-talent__glow {
    animation: forTalentGlow 38s ease-in-out infinite alternate;
  }
}

@keyframes forTalentGlow {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-4%, 5%) scale(1.08);
  }
}

.for-talent__subhead {
  margin-top: var(--space-sm);
  font-size: var(--fs-h3);
  color: var(--color-ink);
  max-width: 34rem;
}

.for-talent__copy {
  margin-top: var(--space-sm);
  max-width: 34rem;
}

.talent-form {
  margin-top: 0;
  max-width: 34rem;
}

.talent-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-lg);
}

.talent-form__field--wide {
  grid-column: 1 / -1;
}

.talent-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.talent-form__field label {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-ink);
}

.talent-form__optional {
  font-weight: 400;
  color: var(--color-warm-gray);
}

.talent-form__field input,
.talent-form__field select,
.talent-form__field textarea {
  font: inherit;
  font-size: 1rem;
  padding: 0.55em 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-hairline);
  color: var(--color-ink);
  border-radius: 0;
  transition: border-color 200ms var(--ease-out);
}

.talent-form__field select {
  padding-block: 0.6em;
}

.talent-form__field textarea {
  border: 1px solid var(--color-hairline);
  padding: 0.7em;
  border-radius: var(--radius-sm);
  resize: vertical;
}

.talent-form__field input:focus,
.talent-form__field select:focus,
.talent-form__field textarea:focus {
  outline: none;
  border-color: var(--color-saffron);
}

.talent-form__field input:focus-visible,
.talent-form__field select:focus-visible,
.talent-form__field textarea:focus-visible,
.talent-form__consent input:focus-visible {
  outline: 2px solid var(--color-saffron);
  outline-offset: 3px;
}

.talent-form__field input[aria-invalid="true"],
.talent-form__field select[aria-invalid="true"],
.talent-form__field textarea[aria-invalid="true"] {
  border-color: var(--color-ink);
}

.talent-form__error {
  display: block;
  min-height: 1.1em;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
}

.talent-form__error:not(:empty)::before {
  content: "\26A0 ";
}

.talent-form__hint {
  font-size: 0.8125rem;
  color: var(--color-warm-gray);
}

.talent-form__consent {
  margin-top: var(--space-sm);
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: 0.875rem;
  color: var(--color-warm-gray);
  cursor: pointer;
}

.talent-form__consent input {
  margin-top: 0.2em;
  accent-color: var(--color-saffron);
}

.talent-form__consent a {
  color: var(--color-gold-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.talent-form__actions {
  margin-top: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.talent-form__status {
  font-size: 0.9375rem;
  color: var(--color-warm-gray);
}

.talent-form__status[data-state="error"] {
  color: var(--color-ink);
  font-weight: 600;
}

.talent-form__status[data-state="info"] {
  color: var(--color-gold-deep);
  font-weight: 600;
}

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

/* -------------------------------------------------------------------------
   Build Your Team — client inquiry page.

   Layout only. Every visual element (type scale, buttons, field styling,
   header, footer, palette) is inherited from the approved system; this
   just centres a single conversion column and gives the page enough top
   offset to clear the fixed header.
------------------------------------------------------------------------- */

.inquiry {
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-xl);
}

.inquiry__layout {
  max-width: 44rem;
  margin-inline: auto;
}

.inquiry__intro {
  margin-bottom: var(--space-lg);
}

.inquiry__lede {
  margin-top: var(--space-sm);
  max-width: 38rem;
}

.inquiry__form {
  max-width: none;
}

.inquiry__direct {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-hairline);
  font-size: 0.9375rem;
}

.inquiry__direct a {
  color: var(--color-gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The inquiry form's textarea reuses the talent-form field styling,
   which only defines input/select — give it the same treatment. */
.inquiry__form textarea {
  font: inherit;
  font-size: 1rem;
  padding: 0.7em;
  background: transparent;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.inquiry__form textarea:focus {
  outline: none;
  border-color: var(--color-saffron);
}

.inquiry__form textarea:focus-visible {
  outline: 2px solid var(--color-saffron);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .inquiry {
    padding-block: calc(var(--header-height) + var(--space-lg)) var(--space-lg);
  }
}

/* -------------------------------------------------------------------------
   Production touch-target sizing.

   Visual appearance is unchanged — these only enlarge the hit areas of
   controls that measured below the 44px minimum on touch devices.
------------------------------------------------------------------------- */

/* The menu button's bars are 26x29px, which is the whole tappable area
   on mobile. Padding grows the target to 44x44 around the same bars —
   `justify-content: center` keeps them optically where they were. */
.nav__toggle {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  align-items: center;
}

.nav__toggle span {
  width: 26px;
}

/* Form controls: comfortable to hit with a thumb without changing the
   type size or the field's visual weight. */
@media (max-width: 900px) {
  .talent-form__field input,
  .talent-form__field select,
  .talent-form__field textarea,
  .inquiry__form textarea {
    min-height: 44px;
  }

  .talent-form__field input[type="file"] {
    min-height: 0;
  }

  /* The checkbox itself is a 13px native control; the label wraps it, so
     the row is the real target. This guarantees the row clears 44px. */
  .talent-form__consent {
    min-height: 44px;
    align-items: center;
  }
}