/* ═══════════════════════════════════════════════════════════════════════
   DRIFT — THE ADVANTAGE (/advantage)
   Loaded after interior.css. Everything structural — the split hero, the
   rail, the split rows, the .spec lists and the closing band — comes from
   there. (interior.css also carries .claims/.tablewrap; this page no longer
   uses them — the claim table was removed on 27 Aug 2026 — but /markets/
   does, so they stay.)

   What is left here is the three card rows the migrated page adds: the four
   customer segments, the six-up, and the four "more" summaries.

   The eight-number grid (.ngrid / .stat) and the comparison bars (.cmp)
   that used to live here went with the rewritten page — /advantage is now
   drift.energy/advantages, word for word, and it has neither. The homepage
   keeps its own copy of .ngrid in home.css and is unaffected; that copy was
   always separate on purpose, and the note explaining why is still there.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SECTION HEADS ────────────────────────────────────────────────────────
   interior.css caps .sechead at 62ch. That measure is computed in the body
   font — 496px — but the first thing in the block is display type, and at
   3.6rem "Ocean kind. Non-invasive. Scalable." wants 832px, so the cap puts
   it on two lines and its lede misses one by 23px. Let the block take the
   column and keep the reading measure on the lede, which is the only part
   of the head actually set at reading size. */
.sechead{max-width:none}
.sechead .lede{max-width:62ch}

/* ── THE CUSTOMER SEGMENTS ────────────────────────────────────────────────
   Four segments, each a heading and the promises DRIFT makes to it. Two
   columns rather than four: the promise lists are uneven — four bullets for
   shipping, two for heavy industry — and in four narrow columns that reads
   as three of them being unfinished. Two wider columns let each list be
   whatever length it is. */
.ad-segments{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden}
.ad-segments>div{background:var(--abyss);padding:clamp(26px,3.2vw,42px)}
.ad-segments h3{margin:0;font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:500;
  letter-spacing:-.015em;color:var(--white)}
.ad-segments .spec{margin-top:22px}

/* ── THE SIX-UP ───────────────────────────────────────────────────────────
   Six one-line claims, and the section has no head of its own — nothing
   names it, so whatever orders the six has to come from the treatment.
   The first pass gave each a 34px rule stub and stopped there: six
   identical fragments on bare ground, in the same device .ad-four uses two
   sections later and .cr-values uses on /careers, so the band read as
   filler between the segment panel and the Figueres quote.

   Set as an instrument panel instead. Each claim takes a full-width rule,
   so the six sit on two continuous baselines rather than six floating
   stubs, and a counter puts 01–06 above them — generated, not written, so
   it indexes the copy without adding to it. That counter also carries the
   section's only colour; the stub it replaces was --current-lift too, at
   34×1px, which is not enough of it to register.

   The section carries .lattice for a ground of its own. It is the one
   device here that is not a border: the segment panel directly above is
   already a bordered box, and a second one under it would just be more of
   the same weight. */
.ad-six{counter-reset:six;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(40px,4.6vw,68px) clamp(24px,3vw,44px)}
.ad-six>div::before{counter-increment:six;content:"0" counter(six);
  display:block;font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;color:var(--current-lift);margin-bottom:13px;
  transition:color var(--t-base) var(--ease-out)}
.ad-six h3{margin:0;padding-top:18px;border-top:1px solid var(--line);
  font-size:clamp(1.1rem,1.7vw,1.44rem);font-weight:500;
  letter-spacing:-.015em;color:var(--white);
  transition:border-color var(--t-base) var(--ease-out)}
.ad-six p{margin:11px 0 0;max-width:30ch;
  font-size:clamp(.95rem,1.15vw,1.04rem);line-height:1.62;color:var(--mist)}

/* Desktop only — on touch there is no hover, and :hover sticks after a tap. */
@media(hover:hover){
  .ad-six>div:hover h3{border-top-color:var(--line-signal)}
  .ad-six>div:hover::before{color:var(--wake)}
}

/* The six-up closes the Pristine power argument rather than opening a new
   one, so it does not need a full .sec gap above it. Two .sec paddings
   stacked put 216px of empty ground between the segment panel and its own
   summary, which is what stranded the band. Closing #pristine and opening
   #six with one gap between them makes the two read as one argument, and
   the lattice band gives the join an edge. */
#pristine{padding-bottom:0}
#six{padding-top:clamp(56px,8vh,104px)}

/* ── THE FOUR "MORE"s ─────────────────────────────────────────────────────
   The summaries of the four sections that follow, so they are set as a
   preview rather than as the argument: same rule device, four across. */
.ad-four{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px)}
.ad-four h3{margin:0;font-size:clamp(1.02rem,1.5vw,1.24rem);font-weight:500;
  letter-spacing:-.01em;color:var(--white)}
.ad-four h3::before{content:"";display:block;width:34px;height:1px;
  background:var(--current-lift);margin-bottom:16px}
.ad-four p{margin:12px 0 0;font-size:.94rem;line-height:1.62;color:var(--mist)}

/* ── THE PULL FIGURES ─────────────────────────────────────────────────────
   "Load factors in excess of 80%" and its two siblings. On the old page
   these sat apart from the paragraph as the line the section leaves you
   with, so they are set as a figure rather than as another sentence. */
/* margin-top is 10 rather than 26 because .srow-copy is now a flex column
   with a 16px gap, and in a flex column the two add rather than collapse. */
.ad-stat{margin-top:10px;padding-top:22px;border-top:1px solid var(--line-signal);
  font-family:var(--mono);font-size:clamp(.88rem,1.3vw,1rem);font-weight:500;
  letter-spacing:.04em;color:var(--current-lift);font-variant-numeric:tabular-nums}

/* ── THE TWO TESTIMONIALS ─────────────────────────────────────────────────
   Both sit in .xclose closing bands, so centring and the text-shadow come
   from interior.css. Only the blockquote's browser margin and the display
   measure need setting. */
.ad-quote{margin:0 auto;max-width:30ch;font-weight:300;text-wrap:balance}
.ad-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:1000px){
  .ad-four{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .ad-six{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .ad-segments{grid-template-columns:1fr}
  .ad-six,.ad-four{grid-template-columns:1fr}
}