/* ═══════════════════════════════════════════════════════════════════════
   DRIFT — CONTACT
   Loaded after interior.css. The CREW panel's faces, the hero measure and
   the address block. Everything else the page needs — the split hero,
   the .srow media row — is interior.css.

   The newsletter rules (.kt-news, .kt-note) went with the newsletter
   section itself — see the note at the top of contact.njk. Removed rather
   than left behind, for the same reason the desk-card rules were.

   The three-desk grid (.kt-grid / .kt-card / .kt-aside) that used to live
   here went with the rewritten page: /contact is now the old site's
   contact-us, word for word, and it has no desk cards. The rules were
   removed rather than left behind, because dead CSS in a hand-tuned file
   is indistinguishable from CSS that something still depends on.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── JOIN THE CREW ────────────────────────────────────────────────────────
   The question is the ask, so it is set larger than the paragraph above it
   and given room of its own rather than running on as another line. */
.kt-ask{margin-top:26px;font-size:clamp(1.05rem,1.7vw,1.28rem);font-weight:300;
  color:var(--white);max-width:34ch}

/* Three faces, overlapped the way the old page ran them — a crew, not a
   directory. The white ring is what separates them at that overlap; without
   it three dark headshots merge into one shape. */
.kt-faces{margin-top:30px;display:flex;align-items:center}
.kt-faces img{width:clamp(52px,6vw,68px);height:clamp(52px,6vw,68px);
  border-radius:50%;object-fit:cover;
  border:2px solid var(--abyss);box-shadow:0 2px 12px rgba(2,14,26,.5)}
.kt-faces img+img{margin-left:-14px}

/* ── MEDIA / THE ADDRESSES ────────────────────────────────────────────────
   Set as an action rather than as body copy — a mailto: styled like a
   sentence gets read like a sentence. Inline here, so it takes none of the
   block spacing the old desk cards needed. */
.kt-mail{font-size:clamp(.98rem,1.5vw,1.12rem);font-weight:500;
  color:var(--current-lift);text-decoration:none;word-break:break-word;
  transition:color var(--t-fast) var(--ease-out)}
.kt-mail:hover{color:var(--wake)}
.kt-mail:focus-visible{outline:2px solid var(--current-lift);outline-offset:3px}

/* ── WHERE WE ARE ─────────────────────────────────────────────────────── */
/* THE BAND ABOVE THE HEADING (James, 28 Aug 2026: "reduce gap"). The media
   row's photograph ended and then 192px of nothing before "DRIFT Energy
   Ltd" — .sec's 96px foot on #media meeting .sec's 96px head on #where,
   the same collision the careers page had. From the copy column, which
   stops 64px above the picture, it was 256px.

   Halved from both sides, ~48px each. The address is the last thing on the
   page before the footer and it is a plain fact panel, not a new argument;
   it does not need a section's worth of silence in front of it.

   Local to these two ids: .sec's 96px is right wherever a section really is
   a change of subject. */
#media{padding-bottom:clamp(40px,5.5vh,56px)}
#where{padding-top:clamp(40px,5.5vh,56px)}
#where .sechead{max-width:none;text-align:center}

/* CENTRED, AND THE TWO COLUMNS TOGETHER (James, 28 Aug 2026: "centre on the
   page? move email closer and centre the 2 columns under DRIFT Energy Ltd").

   They were two 1fr tracks inside a 96ch block, so "Email" sat ~415px from
   the address with nothing between them — a two-column layout holding one
   line of text in its right half. max-content sizes each column to what is
   actually in it, and the gap then reads as a gap rather than as a gulf.

   The pair is centred with justify-content, and the heading above it is
   centred to match — centring the columns under a left-aligned heading
   would only have moved the problem. Text inside each column stays left:
   an address is read down its own left edge, not ragged both sides. */
.kt-where{display:grid;grid-template-columns:repeat(2,max-content);
  justify-content:center;gap:clamp(36px,5vw,80px);max-width:none}
.kt-where h3{margin:0;font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fog)}
.kt-where address{margin:18px 0 0;font-style:normal;font-size:clamp(1.05rem,1.7vw,1.28rem);
  font-weight:300;line-height:1.6;color:var(--white);max-width:34ch}
.kt-where p{margin:18px 0 0;color:var(--mist)}
.kt-where .tlink{margin-top:20px}

/* ── NARROW ───────────────────────────────────────────────────────────── */
@media(max-width:620px){
  /* One column, still centred as a block — justify-content carries over, so
     the single track sits in the middle rather than against the gutter. */
  .kt-where{grid-template-columns:max-content}
}

/* ── HERO IMAGE · SEAMLESS EDGES ──────────────────────────────────────────
   interior.css washes the joining edge of the split hero but stops at .78
   opacity, so the photograph still ends on a visible vertical line against
   the copy panel — the SailGP frame is bright sky exactly where the panel
   is dark, which is the worst case for it. The fix is not a heavier scrim
   but a complete one: the 90deg wash now reaches full --abyss at x=0, so
   the picture resolves into the same colour the panel is painted and there
   is no edge left to see. Eased stops rather than a straight ramp, because
   a linear fade over ~400px reads as a grey shelf across the sky.

   Same argument at the foot of the hero, where the image met the body
   ground on a hard horizontal line. Kept shallow (150px) so it lands the
   composition without eating the boat.

   The 180deg top wash is unchanged and must stay: the header is
   transparent until scroll and the Investor Relations CTA needs a ground.
   Delete the bottom layer alone if the hard base edge is wanted back. */
/* The figure's own ground is --hull in interior.css, a lighter blue than
   the copy panel. The grid puts the joining edge on a fractional pixel
   (621.34px at 1280), so that lighter ground antialiases into a 1px line
   at exactly the seam the fade is meant to remove. Same colour as the
   panel here, and the edge has nothing left to show. */
.xhero-pic{background:var(--abyss)}

.xhero-pic::after{
  background:
    linear-gradient(180deg,rgba(var(--abyss-rgb),.86),rgba(var(--abyss-rgb),.26) 96px,rgba(var(--abyss-rgb),0) 168px),
    linear-gradient(0deg,
      rgba(var(--abyss-rgb),1),rgba(var(--abyss-rgb),.90) 26px,
      rgba(var(--abyss-rgb),.62) 62px,rgba(var(--abyss-rgb),.28) 104px,
      rgba(var(--abyss-rgb),0) 150px),
    linear-gradient(90deg,
      rgba(var(--abyss-rgb),1),rgba(var(--abyss-rgb),.97) 6%,
      rgba(var(--abyss-rgb),.88) 12%,rgba(var(--abyss-rgb),.72) 18%,
      rgba(var(--abyss-rgb),.52) 24%,rgba(var(--abyss-rgb),.33) 30%,
      rgba(var(--abyss-rgb),.17) 36%,rgba(var(--abyss-rgb),.07) 41%,
      rgba(var(--abyss-rgb),0) 46%)}

/* Stacked, the picture sits under the copy and above the next section, so
   the two seams are horizontal. The header is over the copy panel here,
   not over the image, so no nav wash is needed — same reasoning as the
   rule this replaces in interior.css. */
@media(max-width:900px){
  .xhero-pic::after{
    background:
      linear-gradient(180deg,
        rgba(var(--abyss-rgb),1),rgba(var(--abyss-rgb),.86) 7%,
        rgba(var(--abyss-rgb),.54) 15%,rgba(var(--abyss-rgb),.22) 23%,
        rgba(var(--abyss-rgb),0) 30%),
      linear-gradient(0deg,
        rgba(var(--abyss-rgb),1),rgba(var(--abyss-rgb),.58) 6%,
        rgba(var(--abyss-rgb),.22) 12%,rgba(var(--abyss-rgb),0) 18%)}
}

/* ── K1 · HERO MEASURE · FITTING THE PANEL ABOVE THE FOLD ─────────────────
   interior.css sizes the split hero for a short headline. This one is not:
   "Join us in shaping the future of mobility." set at the dense .d1 scale
   broke over FOUR lines in a 541px measure, which pushed the View Careers
   button ~30px below the fold on a 13" laptop (1440x800) — the one CTA the
   panel exists to serve was the one thing the reader had to scroll for.

   The fix is width, not truncation: give the copy column the larger share
   of the split, spend less of it on the right gutter, and let the heading
   set on two lines instead of four. Two lines saves ~200px of height, which
   is the whole overflow. The left padding is untouched — it is what aligns
   the hero copy with .wrap further down the page.

   The heading cap comes straight out of the measure: "Join us in shaping
   the" needs about 8.75x the font size to stay on one line, so the cap and
   the column width move together. If either is changed, check the wrap at
   1440px before shipping — a third line puts the button back under the
   fold. Contact only; the other .xhero pages have short headlines and keep
   the image-led 1fr / 1.06fr split.

   Everything here is inside min-width:901px on purpose. This file loads
   after interior.css, so an unscoped .xhero rule would outrank interior's
   max-width:900px block and keep the hero in two columns where it is meant
   to stack — which it did, until this guard. Below 901px the stacked hero
   is unchanged. */
@media(min-width:901px){
  .xhero{grid-template-columns:1.12fr 1fr}
  .xhero-copy{padding-right:clamp(28px,3vw,44px)}
  .xhero .d1{font-size:clamp(2.4rem,4.9vw,4.15rem)}

  /* The supporting lines were measured against the old narrow column and
     now wrap short of it. Widened to match, so the panel reads as one block
     of copy rather than a wide heading over a narrow paragraph. */
  .xhero-copy .lede{max-width:58ch}
  .xhero .kt-ask{max-width:46ch}
}