/* ═══════════════════════════════════════════════════════════════════════
   DRIFT — CAREERS
   Loaded after interior.css, which supplies .sec, .sechead, .xhero,
   .xclose. Everything here is specific to this page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── HERO — FULL-BLEED FILM ───────────────────────────────────────────────
   Replaces .xhero on this page only. interior.css still supplies .xhero for
   /team, /advantage and /contact; nothing here touches it.

   THE ORDER OF THE STACK, bottom to top: the YouTube frame, the still on top
   of it, the scrim on top of both, then the copy. The still sits ABOVE the
   film and fades out when the film starts, rather than sitting behind it —
   so a frame that never loads, is blocked, or is 404 leaves the still in
   place instead of leaving a black rectangle. .is-playing is added by
   careers.js only after the player reports it is actually playing. */
.chero{position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:flex-end;background:var(--abyss)}
.chero-media{position:absolute;inset:0;z-index:0}

/* 16:9 COVER, MEASURED AGAINST THE HERO AND NOT THE VIEWPORT. The frame is
   a size container and the cover maths is in cq units, because the two are
   not the same box: below 900px .chero drops to content height, so a hero
   of ~520px sat inside a viewport of 812. The old svh maths sized the film
   for the viewport, and what showed through a 520px window was a 4.5x
   magnified horizontal slice of it.

   Width-driven first — 56.25cqw is 9/16 of the hero's width. The min-*
   pair takes over when the hero is proportionally taller than 16:9, where
   its height is the binding dimension.

   The svh block below is the fallback for browsers without container
   query units. It is only ever right where the hero IS the viewport
   height, which is every viewport above 900px — the same place the
   min-height:100svh rule applies. That is the trade: old browsers get the
   desktop hero correct and the short mobile hero over-cropped, rather
   than nothing at all. */
.chero-frame{position:absolute;inset:0;overflow:hidden;background:var(--abyss);
  container-type:size}
.chero-frame iframe{position:absolute;top:50%;left:50%;border:0;
  width:100%;height:56.25vw;
  min-height:100%;min-width:177.7778vh;min-width:177.7778svh;
  /* The 1.16 OVERSCAN IS LOAD-BEARING, not a crop preference. controls:0
     removes the control bar but not YouTube's own title plate across the
     top or the logo and "More videos" affordance across the bottom, both
     of which show for the first second and again around any seek. Scaling
     the frame past its box pushes that chrome outside the visible crop.
     Below about 1.14 the title plate comes back into shot — if this is
     ever reduced, check the top of the frame on first paint. */
  transform:translate(-50%,-50%) scale(1.16);
  /* The film is decorative and has no controls; clicks belong to the page. */
  pointer-events:none}
@supports (width:1cqw){
  .chero-frame iframe{width:100cqw;height:56.25cqw;
    min-height:100cqh;min-width:177.7778cqh}
}

.chero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .9s ease}
.chero.is-playing .chero-still{opacity:0}

/* Three washes. The 180deg-from-top one is the same legibility fix .xhero-pic
   carries: the header is transparent until the reader scrolls, so the
   "Investor Relations" CTA sits on whatever the top of the film happens to
   be. Keep its 168px reach — that clears the header at its tallest.
   The bottom and left washes are what the headline is read against. */
.chero-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(var(--abyss-rgb),.80),rgba(var(--abyss-rgb),.24) 96px,rgba(var(--abyss-rgb),0) 168px),
    linear-gradient(0deg,rgba(var(--abyss-rgb),.94),rgba(var(--abyss-rgb),.50) 36%,rgba(var(--abyss-rgb),0) 74%),
    linear-gradient(90deg,rgba(var(--abyss-rgb),.80),rgba(var(--abyss-rgb),.30) 44%,rgba(var(--abyss-rgb),0) 76%)}

.chero-copy{position:relative;z-index:1;width:100%;
  padding:clamp(120px,16vh,180px) clamp(28px,4vw,64px)
          clamp(56px,10vh,110px) max(28px,calc(50vw - 620px))}
.chero-copy .d1{max-width:19ch}
.chero-copy p{margin-top:34px}

@media(max-width:900px){
  .chero{min-height:0}
  .chero-copy{padding:clamp(116px,15vh,150px) clamp(24px,6vw,40px) clamp(44px,7vh,64px)}
  .chero-copy .d1{max-width:none}
}

/* Reduced motion never gets the film at all — careers.js does not build the
   player, so the still is the hero and this is only belt and braces. */
@media(prefers-reduced-motion:reduce){
  .chero-still{transition:none}
  .chero.is-playing .chero-still{opacity:1}
}

/* ── OPEN ROLES ───────────────────────────────────────────────────────────
   Each role is a row: title and summary, then the facts, then the action.
   A grid rather than a card, because a list of roles is compared down the
   column — location against location, basis against basis — and cards make
   the reader's eye travel to find each one. */
.cr-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  border-top:1px solid var(--line)}
.cr-role{display:grid;grid-template-columns:1fr auto auto;align-items:start;
  gap:clamp(24px,4vw,56px);padding:clamp(28px,4vh,42px) 0;
  border-bottom:1px solid var(--line)}
.cr-role-main h3{margin:0}
.cr-role-main p{margin:14px 0 0;color:var(--mist);max-width:52ch}

.cr-role-meta{margin:0;display:grid;gap:14px;min-width:180px}
.cr-role-meta dt{font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fog)}
.cr-role-meta dd{margin:4px 0 0;font-size:.95rem;color:var(--white)}

/* ── THE EMPTY STATE ──────────────────────────────────────────────────────
   Designed, not a fallback — see the note in careers.njk. Given a panel so
   it reads as an answer rather than as a page that failed to load. */
.cr-empty{background:var(--schematic);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(32px,5vw,56px);max-width:72ch}
.cr-empty p{color:var(--mist)}
.cr-empty p+p{margin-top:18px}
.cr-empty .btn{margin-top:32px}

/* ── HOW WE HIRE ──────────────────────────────────────────────────────────
   Numbered because it is genuinely a sequence — see the note in the
   template. The ordinal sits above the heading rather than beside it, so
   the four steps read as a row of stages at a glance. */
.cr-steps{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden}
.cr-steps li{background:var(--abyss);padding:clamp(24px,3vw,36px)}
.cr-steps .n{font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;color:var(--current-lift);font-variant-numeric:tabular-nums}
.cr-steps h3{margin:16px 0 0;font-size:clamp(1.05rem,1.6vw,1.28rem);font-weight:500;
  letter-spacing:-.01em;color:var(--white)}
.cr-steps p{margin:12px 0 0;font-size:.95rem;line-height:1.6;color:var(--mist)}

/* ── MISSION | VALUES ─────────────────────────────────────────────────────
   The values used to be their own full-width section under this one. They
   are the right-hand column of it now.

   Even columns. An earlier 1.18/.82 split gave the mission the wider half
   on the reasoning that a paragraph and a four-item list need more room
   than three short lines do — but the mission copy is capped at a readable
   measure and the list is short, so the extra width went nowhere and left
   a 400px hole between the two columns. Even columns close it: the mission
   fills most of its half, and the values panel gets the width that makes
   its three rows read as panels rather than as a narrow rail.

   Start-aligned rather than stretched — the values column is the taller of
   the two, and stretching left the mission's list floating in the middle
   of an 800px-tall box. */
.cr-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,72px);align-items:start}
.cr-split .cr-mission{max-width:56ch}
/* The two columns open on the same line, so the section head keeps its
   space below itself but must not push the row down — the .sechead's own
   bottom margin is what separates the mission head from the mission copy,
   inside the left column only. */
.cr-missioncol .sechead{margin-bottom:clamp(30px,4.5vh,52px)}
/* The eyebrow keeps .page-dense's own 24px below it — an earlier zero here
   put the panel's top edge hard against the eyebrow with no gap at all,
   which is what made the box read as sitting too high. At 24px the panel's
   top edge lands on the same line as "Join us to make" opposite it, so the
   right column starts against the heading rather than against the eyebrow. */
.cr-valuecol>.eyebrow{margin-bottom:24px}

/* THE VALUES. Three cards, not four, and no ordinal — the values are a set
   rather than a sequence. Reuses .cr-steps for the divided-panel treatment
   and overrides only the column count and the ordinal it does not have.

   ONE COLUMN, not three. As a row of three across the full page each value
   had a panel to itself and a great deal of air in it; in the side column
   the same three read down as a list, divided by the same hairlines. The
   .cr-steps background/border does the panel, so this only changes the
   axis.

   The line under each heading stands in for the missing number, so the card
   still has something above the copy holding it to the same rhythm as the
   hiring steps. */
.cr-values{grid-template-columns:1fr}
.cr-values li{padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px)}
.cr-values h3{margin:0}
.cr-values h3::before{content:"";display:block;width:34px;height:1px;
  background:var(--current-lift);margin-bottom:16px}
.cr-values p{font-size:1rem;color:var(--white)}

@media(max-width:900px){
  .cr-split{grid-template-columns:1fr;gap:clamp(38px,6vh,56px)}
  .cr-split .cr-mission{max-width:62ch}
}

.cr-mission{max-width:62ch}
.cr-mission .spec{margin-top:18px}

/* THE BAND BEFORE THE PHOTOGRAPHS (James, 28 Aug 2026: "reduce gap"). The
   values column ends, and then 226px of nothing before "What the team says
   about working here …" — .sec's own 96px foot on #mission, plus another
   96px head on #team-says, plus the eyebrow's leading. Two sections' worth
   of breathing space met in one place and the page looked as if it had
   stopped.

   Halved from both sides, ~48px each, so the two photographs follow the
   values while the reader is still in the same thought. The eyebrow-to-
   photographs gap is left alone — it was already 14px, which is what makes
   the line read as a caption over the pair rather than a section head.

   Local to these two ids. .sec's 96px is right where a section is a change
   of subject; these two are not. */
#mission{padding-bottom:clamp(40px,5.5vh,56px)}
#team-says{padding-top:clamp(40px,5.5vh,56px)}

/* ── WHAT THE TEAM SAYS ───────────────────────────────────────────────────
   Two portrait cards side by side, each one photograph over a centred name,
   role and quote. This replaced two full-width .srow bands (photo left,
   then photo right) which read as two more of the picture-and-copy rows the
   interior pages use everywhere else — these are people, and they wanted
   their own furniture.

   THE 430px CAP IS ABOUT THE SOURCE FILES. See the note in careers.njk:
   careers-neal.webp is 375px wide, so half a 1240px wrap would show it at
   1.6x and soften the face. Capped and centred, the pair sits as a deliberate
   composition rather than as a grid that failed to fill the row. */
.cr-voices{display:grid;grid-template-columns:repeat(2,minmax(0,430px));
  justify-content:center;gap:clamp(28px,5vw,72px)}
.cr-voice{margin:0;text-align:center}
/* 375/351 is careers-neal.webp's native shape, so cover crops nothing off
   the smaller of the two sources. */
.cr-voice .shot{position:relative;overflow:hidden;background:var(--hull);
  aspect-ratio:375 / 351;border-radius:var(--r-md)}
.cr-voice .shot img{width:100%;height:100%;object-fit:cover;display:block}
.cr-voice-name{margin:clamp(20px,2.6vh,28px) 0 0;
  font-size:clamp(1.05rem,1.6vw,1.24rem);font-weight:500;
  letter-spacing:-.015em;color:var(--white)}
/* .eyebrow is a flex row, so the caption's text-align does not reach it —
   the role sat hard left under a centred name. site.css already ships the
   .center modifier for exactly this; the markup uses it. */
.cr-voice .eyebrow{margin-top:10px;margin-bottom:0}
/* The quote. --mist against the white name and the --current-lift eyebrow,
   so the three tiers of the caption are told apart by weight and colour
   rather than by rules. */
.cr-voice p{margin:18px 0 0;color:var(--mist);font-size:.95rem;line-height:1.7}

@media(max-width:760px){
  .cr-voices{grid-template-columns:minmax(0,430px);gap:clamp(40px,7vh,60px)}
}


/* ── THE HONEST VERSION ───────────────────────────────────────────────────
   Deliberately not a "perks" grid. Four things that would make somebody
   self-select out, which is the entire point of the section. */
.cr-honest{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px)}
.cr-honest h3{margin:0;font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:500;
  letter-spacing:-.015em;color:var(--white)}
.cr-honest h3::before{content:"";display:block;width:34px;height:1px;
  background:var(--current-lift);margin-bottom:18px}
.cr-honest p{margin:14px 0 0;color:var(--mist);line-height:1.68}

/* THE FOUNDER QUOTE. Sits in the .xclose closing band, so it inherits that
   section's centring and text-shadow. Only the blockquote's own defaults
   (browser margin, and the d2 measure running the full width) need undoing. */
.cr-quote{margin:0 auto;max-width:34ch;text-wrap:balance;font-weight:300}
.cr-attrib{margin:26px auto 0;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fog)}

/* ── NARROW ───────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .cr-steps{grid-template-columns:repeat(2,1fr)}
  .cr-values{grid-template-columns:1fr}
  .cr-role{grid-template-columns:1fr;gap:22px}
  /* The action goes full width once the row stacks — a right-aligned button
     under a stacked row has nothing left to align to. */
  .cr-role>.btn{justify-self:stretch;justify-content:center}
}
@media(max-width:620px){
  .cr-steps{grid-template-columns:1fr}
  .cr-honest{grid-template-columns:1fr}
  .cr-role-meta{grid-template-columns:repeat(2,1fr);min-width:0}
}