/* ═══════════════════════════════════════════════════════════════════════
   DRIFT — INTERIOR PAGE LAYER
   The furniture every evidence page needs: section rhythm, the split hero,
   the fact strip, the "on this page" rail, the alternating split rows, the
   claim table and the closing band.

   Load it BEFORE the page's own stylesheet:

     pageCss: [interior.css, markets.css]

   ── WHY THIS FILE EXISTS ────────────────────────────────────────────────
   These components were written for /technology and restated in team.css,
   and the two copies have already drifted apart — team.css sets
   `.sec{padding:clamp(80px,13vh,150px) 0}` and a `.sechead` with no
   measure, tech.css sets `clamp(76px,12vh,140px)` and `max-width:62ch`.
   Nobody chose that difference; it is what copy-paste does over time.

   The values here are tech.css's, which are the more considered of the two.
   /markets and /advantage use this file. The technology and team pages have
   NOT been migrated onto it — doing so would silently move two pages that
   were signed off as they are, which is a visual change and therefore
   somebody's decision, not a refactor. Until that decision is made there
   are three copies rather than two, and this comment is the record of it.
   When it is made: delete the duplicated blocks from tech.css and team.css,
   add interior.css to their front matter, and re-check both pages.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SECTION RHYTHM ───────────────────────────────────────────────────── */
/* 12vh became 9vh on 28 Aug 2026 (James — "can we shrink the gaps"). At a
   900px-tall laptop the old clamp resolved to 108px at each end, so two
   sections met with 216px of empty page between them and the reader crossed
   a screen's worth of nothing to get from one to the next. 9vh is ~77px, so
   a section change costs ~155px — still unmistakably a break. The phone
   value is set separately in site.css (body .sec, 56px). */
.sec{position:relative;padding:clamp(56px,9vh,104px) 0}
.sec.lattice::before{content:"";position:absolute;inset:0;background:var(--grid-schematic);
  z-index:0;pointer-events:none}
.sec .wrap{position:relative;z-index:1}
.sechead{margin-bottom:clamp(38px,6vh,64px);max-width:62ch}
.sechead .lede{color:var(--mist);margin-top:18px}

/* ── SPLIT HERO ───────────────────────────────────────────────────────────
   A true half-and-half rather than a scrim over a photograph: the copy gets
   a solid ground, so it needs no text-shadow and the picture can be shown
   at full brightness. The copy pads to max(28px, 50vw - 620px) so its left
   edge lines up with .wrap (min(1240px,90vw)) further down the page, while
   the picture still runs to the right edge of the viewport. */
.xhero{display:grid;grid-template-columns:1fr 1.06fr;align-items:stretch;
  min-height:clamp(560px,86vh,900px);background:var(--abyss);position:relative}
.xhero-copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,13vh,150px) clamp(28px,4vw,64px)
          clamp(40px,7vh,80px) max(28px,calc(50vw - 620px))}
.xhero-copy .lede{margin-top:26px;color:var(--mist);max-width:44ch}
.xhero-pic{position:relative;margin:0;overflow:hidden;background:var(--hull)}
.xhero-pic img{width:100%;height:100%;object-fit:cover;display:block}
/* Two washes, and both earn their place.

   The 90deg one is the joining edge: enough to stop a hard seam between
   panel and photograph, not enough to dim the picture.

   The 180deg one is the TOP edge, and it is a legibility fix rather than a
   decorative one. The header is transparent until the reader scrolls, so
   the "Investor Relations" CTA — white text inside a 34%-white border —
   sits directly on whatever the top-right of the hero image happens to be.
   Over a dark render that is fine, which is why /technology never showed
   it; over a white studio background or a bright sky it disappears
   completely. This guarantees the nav a ground on any image. Its 168px
   reach clears the header at its tallest; keep it at least that deep. */
.xhero-pic::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(var(--abyss-rgb),.86),rgba(var(--abyss-rgb),.26) 96px,rgba(var(--abyss-rgb),0) 168px),
    linear-gradient(90deg,rgba(var(--abyss-rgb),.78),rgba(var(--abyss-rgb),.10) 18%,rgba(var(--abyss-rgb),0) 44%)}
.xhero-pic figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:16px 22px;font-family:var(--instrument);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mist);
  background:linear-gradient(180deg,rgba(var(--abyss-rgb),0),rgba(var(--abyss-rgb),.88))}

/* ── FACT STRIP ───────────────────────────────────────────────────────────
   The few numbers an investor needs before any mechanism, spanning the full
   width under the hero so the hero stays a clean two-panel composition. */
.factbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-bottom:1px solid var(--line)}
/* Four is the usual count, and the grid is fixed rather than auto-fit so a
   bar of four keeps its columns aligned with the pages either side of it.
   A page with three facts has to say so — auto-placement would otherwise
   leave the fourth column empty, and because the gap is a 1px rule on a
   --line background, an empty column does not read as space. It reads as a
   missing panel. Markets has three: markets served, addressable ocean,
   grid connection. The breakpoints below have to name .three as well —
   a bare .factbar in a media query loses to it on specificity, and the
   bar would stay three-up on a phone. */
.factbar.three{grid-template-columns:repeat(3,1fr)}
.factbar>div{background:var(--hull);padding:clamp(20px,2.6vw,30px) clamp(20px,2.4vw,32px)}
.factbar .n{font-family:var(--mono);font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:500;
  line-height:1;letter-spacing:-.045em}
.factbar .n .sup{font-size:.5em;vertical-align:super;letter-spacing:0}
/* A symbol standing where a number stands. ∞ has no cap height and no
   descender, so at the digits' own size it reads a size smaller than the
   "70%" beside it. It has to grow WITHOUT growing its line box, or the cell
   gets taller than its neighbours and drops its label ~10px below theirs:
   line-height:0 keeps the box the strut's height and lets the glyph overflow
   it, and the nudge puts its optical centre back on the digits' line. */
.factbar .n .glyph{font-size:1.6em;line-height:0;letter-spacing:0;
  position:relative;top:.1em}
.factbar .l{color:var(--fog);font-size:.8rem;line-height:1.45;margin-top:10px;max-width:26ch}
.factbar .chip{margin-top:14px}

/* ── SPLIT ROWS ───────────────────────────────────────────────────────────
   A full-width two-panel row: picture edge-to-edge on one side, copy on the
   other, alternating down the page. The copy pads out to the .wrap gutter
   on its outer edge so every row aligns with the contained sections above
   and below it. */
.srow{display:grid;align-items:stretch;background:var(--abyss)}
.srow.pic-left {grid-template-columns:1.02fr 1fr}
.srow.pic-right{grid-template-columns:1fr 1.02fr}
.srow.pic-right .srow-pic{order:2}

.srow-pic{position:relative;margin:0;overflow:hidden;background:var(--hull);
  min-height:clamp(300px,46vh,560px)}
.srow-pic img{width:100%;height:100%;object-fit:cover;display:block}
.srow-pic .ph{position:absolute;inset:0;border-radius:0;border-width:0;
  border-left:1px dashed var(--line-strong);border-right:1px dashed var(--line-strong)}
.srow-pic figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:15px 22px;font-family:var(--instrument);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist);
  background:linear-gradient(180deg,rgba(var(--abyss-rgb),0),rgba(var(--abyss-rgb),.86))}
/* THE ROW NUMERALS ARE GONE (James, 28 Aug 2026: "remove numbers across all
   images"). A 01/02/03/04 sat on each .srow picture on /markets — the only
   page that ever used them. The markup went with the rules, so nothing on
   the site draws an .idx now; if numbered rows are ever wanted back, this
   is what they were: absolutely positioned top-left of the picture, mono,
   200 weight, clamp(2rem,4vw,3.4rem), mirrored to the right on .pic-right
   rows and back to the left below 900px. */

/* ── FIGURE PANELS ────────────────────────────────────────────────────────
   .srow-pic is built for a photograph: a fixed min-height, stretched to
   whatever the copy column makes, with object-fit:cover taking whatever
   crop falls out. That is right for a picture of a boat and wrong for a
   chart or a map, where the cropped-off edges are the labelled axes, the
   titles and the callouts — the parts carrying the argument.

   .fig sizes to the figure instead of to the row: it stops stretching, the
   image keeps its own aspect, and nothing is cut. The caption goes under
   the figure rather than over it, because there is no photograph left for
   an overlaid one to sit on. */
.srow-pic.fig{min-height:0;align-self:center;background:none;overflow:visible;
  padding-block:clamp(20px,3.4vh,48px)}
.srow-pic.fig img{width:100%;height:auto;object-fit:contain;border-radius:var(--r-sm)}
.srow-pic.fig figcaption{position:static;background:none;padding:14px 2px 0;
  color:var(--fog);line-height:1.5}

.srow-copy{display:flex;flex-direction:column;justify-content:center;
  gap:16px;padding:clamp(48px,8vh,96px) clamp(28px,4.4vw,72px)}
.srow.pic-left  .srow-copy{padding-right:max(28px,calc(50vw - 620px))}
.srow.pic-right .srow-copy{padding-left:max(28px,calc(50vw - 620px))}
.srow-copy .lede{color:var(--mist);max-width:56ch}
/* p is capped at 46ch globally, the lede at 56ch. Stacked in a column this
   narrow that shows as a ragged right edge between the two, and it cuts the
   rule above /advantage's .ad-stat short of the text it belongs to. Inside
   a split row the column is already the measure — it tops out near 540px —
   so let the body run to the same edge as the lede. */
.srow-copy p{max-width:54ch}
.srow-copy .d3{margin:0}
/* Anything that already set its own step wants that step, not that step plus
   the gap — this is a flex column, so the two add rather than collapse. Each
   is reduced here by the 16px it now inherits, which leaves /markets and
   /careers spaced exactly as they were and gives the pairs that set nothing
   (heading to lede, lede to body) the gap they were missing. /advantage's
   .ad-stat is the same adjustment, made in advantage.css. */
.srow-copy .eyebrow{margin-bottom:8px}   /* 24 */
.srow-copy .spec{margin-top:6px}         /* 22 */
.srow-copy .sowhat{margin-top:10px}      /* 26 */

/* A row nested inside .wrap is not full-bleed, and the outer padding above
   was written for one that is: it pushes the copy in by half the viewport
   minus 620px so the text lines up with .wrap on a row that runs edge to
   edge (/markets). Inside a .wrap the row is already at that gutter, so the
   rule applies it a second time — and because .wrap stops growing at 1240px
   while 50vw does not, the copy column shrinks as the window gets wider. At
   1600px it is 363px, at 1920px 202px, and past ~2100px it goes negative.
   /advantage, /careers and /contact all nest their rows this way.
   Contained, the outer edge IS the .wrap gutter, so it takes no padding at
   all and the copy lines up with the section heads above it; the inner edge
   keeps the shorthand's padding to stand off the picture. Scoped above the
   stacking breakpoint because these selectors would otherwise outrank the
   stacked padding in the 900px query below. */
@media(min-width:901px){
  .wrap .srow.pic-left  .srow-copy{padding-right:0}
  .wrap .srow.pic-right .srow-copy{padding-left:0}
}

/* ── SPEC LISTS ───────────────────────────────────────────────────────── */
.spec{list-style:none;display:grid;gap:10px;margin-top:22px}
/* A BLOCK, NOT A FLEX ROW (James, 28 Aug 2026: "weird enter"). Each item is
   a bold label followed by a sentence, and as flex items those were two
   boxes that wrapped as units: when the sentence did not fit beside its
   label it dropped whole onto the next line. On "No grid queue, because the
   energy is decentralised …" that put a comma at the start of a line, which
   reads as a typo rather than as a wrap.

   As a block the label and the sentence are one run of text that breaks
   wherever it needs to. tech.css's copy of .spec has always been a block
   for the same reason; this brings the two into line. The dash marker is
   ::before and absolutely positioned, so it never needed flex — and the
   10px gap is gone with it, the space between label and sentence now being
   the ordinary word space that is already in the markup. */
.spec li{position:relative;padding-left:20px;color:var(--mist);font-size:.9rem}
.spec li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;
  background:var(--current-lift)}
.spec b{font-family:var(--mono);font-weight:500;color:var(--white);letter-spacing:-.01em}

/* ── SO-WHAT NOTE ─────────────────────────────────────────────────────────
   The investor consequence of the mechanism just described, set apart so it
   is never mistaken for more description. */
.sowhat{margin-top:26px;padding:18px 22px;border-left:2px solid var(--current);
  background:rgba(23,82,126,.26);border-radius:0 var(--r-sm) var(--r-sm) 0}
.sowhat .t{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--current-lift);font-weight:600;margin-bottom:8px}
.sowhat p{color:var(--mist);font-size:.92rem;line-height:1.6;max-width:58ch}

/* ── CLAIM TABLE ──────────────────────────────────────────────────────────
   Spec D3. The table scrolls inside .tablewrap rather than widening the
   page — min-width on the table is what forces that, so keep both. */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.claims{width:100%;border-collapse:collapse;min-width:640px}
.claims th,.claims td{text-align:left;padding:16px clamp(14px,2vw,22px);
  border-bottom:1px solid var(--line);vertical-align:top}
.claims thead th{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fog);background:var(--hull);font-weight:400}
.claims tbody th{font-weight:400;color:var(--white);font-size:.92rem;max-width:34ch}
.claims td{color:var(--fog);font-size:.88rem;line-height:1.55}
.claims tbody tr:last-child th,.claims tbody tr:last-child td{border-bottom:0}
.claims tbody tr:hover th,.claims tbody tr:hover td{background:rgba(23,82,126,.3)}

/* ── CLOSING BAND ─────────────────────────────────────────────────────── */
.xclose{position:relative;overflow:hidden;text-align:center;
  padding:clamp(96px,16vh,180px) 0}
.xclose>img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;z-index:0;
  filter:grayscale(.18) brightness(.64);will-change:transform}
.xclose .sc{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(var(--abyss-rgb),.88),rgba(var(--abyss-rgb),.56) 50%,rgba(var(--abyss-rgb),.90))}
/* The wash over these photographs was lightened so the picture reads as a
   picture. Type that used to be carried by that wash is carried by its own
   shadow instead — the same trade the hero already makes, and it protects
   the words specifically rather than dimming the whole frame to reach them.
   It also holds while the parallax moves brighter water up behind them. */
.xclose .wrap{position:relative;z-index:2}
.xclose h2,.xclose .eyebrow{text-shadow:0 2px 30px rgba(var(--abyss-rgb),.9),0 1px 6px rgba(var(--abyss-rgb),.6)}
.xclose p{text-shadow:0 1px 18px rgba(var(--abyss-rgb),.95),0 1px 4px rgba(var(--abyss-rgb),.7)}
.xclose p{margin:26px auto 0;color:var(--mist);max-width:54ch}
.xclose .ctas{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────
   The split rows stack picture-over-copy rather than shrinking to two
   narrow columns: below ~900px a half-column cannot hold a readable
   measure, and a 45%-wide photograph stops being image-led anyway. */
@media(max-width:900px){
  .xhero{grid-template-columns:1fr;min-height:0}
  .xhero-copy{padding:clamp(104px,14vh,140px) clamp(24px,6vw,40px) clamp(34px,5vh,52px)}
  .xhero-pic{order:2;aspect-ratio:16 / 9}
  .xhero-pic::after{background:linear-gradient(180deg,rgba(var(--abyss-rgb),.5),rgba(var(--abyss-rgb),0) 40%)}

  .srow,.srow.pic-left,.srow.pic-right{grid-template-columns:1fr}
  .srow.pic-right .srow-pic{order:0}
  .srow-pic{min-height:0;aspect-ratio:16 / 9}
  .srow-pic.fig{aspect-ratio:auto}
  .srow-pic .ph{position:relative;inset:auto;border:0}
  .srow.pic-left .srow-copy,.srow.pic-right .srow-copy{
    padding:clamp(34px,5vh,56px) clamp(24px,6vw,40px)}
  .factbar,.factbar.three{grid-template-columns:1fr 1fr}
  /* Three facts in two columns leave the second cell of row two empty, and
     an empty cell is 1px-rule background at panel size, not space. Run the
     last fact across both columns instead. */
  .factbar.three>div:last-child{grid-column:1 / -1}
}
@media(max-width:620px){
  /* TWO ACROSS, NOT ONE (James, 28 Aug 2026: "I don't like it all stacked").
     Four facts in one column is 609px of phone — a whole screen to read four
     numbers, and it reads as four sections rather than as one bar. Two-up is
     ~187px a cell, which the numbers fit and the labels wrap into.

     A bar of three goes two-up as well, with the last fact taking the full
     width underneath rather than sitting beside an empty cell — the same
     shape .wpk takes on /technology. /markets is the one that has three,
     and stacked it was 420px for three numbers. */
  .factbar.three{grid-template-columns:1fr 1fr}
  .factbar.three>:last-child{grid-column:1 / -1}
  .srow-pic{aspect-ratio:4 / 3}
  .srow-pic.fig{aspect-ratio:auto}
}