/* ==========================================================================
   S P Alectricals — About
   Requires css/sp-core.css. Shares the palette, Poppins light type and the
   pill button with the homepage — and deliberately shares nothing else.

   The client's standing note is that the pages were all reading the same. So
   the FRAME here is the opposite of the homepage's on every axis:

        homepage                     about
        ----------------------------------------------------
        centred headings             left-aligned throughout
        card grids                   hairline rules and lists
        alternating mint bands       white, mint and one forest-green band
        product cutouts              one editorial portrait
        4 horizontal process cards   one vertical timeline spine
        stats in a mint panel        stats in the one dark band on the page

   Only the colour, the type and the pill button carry over.
   ========================================================================== */

.ab{
  /* mint scale comes from sp-core; --rule is About's own hairline tone */
  --rule:#E4E7EC;
  background:#fff;
}
.ab h1,.ab h2{font-weight:300;letter-spacing:-.024em;line-height:1.14;color:var(--ink)}
.ab h3{font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.ab h1 em,.ab h2 em{font-weight:500;font-style:normal;color:var(--green-dk)}

/* a small left-aligned section label — never centred, never a pill */
.ab-lab{display:block;font-family:var(--b);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-dk);margin-bottom:14px}

/* ============================================================== MASTHEAD */
/* A photo hero with the copy laid over it. The scrim is a left-weighted
   forest-green wash: strong enough under the text to clear AA comfortably,
   thin enough on the right that the photograph still reads. */
/* Centred, not bottom-aligned: flex-end plus a 150px top padding parked the
   whole block against the lower edge and left the top third empty. */
.ab-top{position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;
  min-height:clamp(440px,50vw,620px);
  padding:clamp(64px,7vw,96px) 0 clamp(56px,6vw,84px)}
.ab-top-bg{position:absolute;inset:0;z-index:0}
.ab-top-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block}
/* two layers: a flat floor so small text never lands on a bright pixel, and
   a left-to-right wash that carries the headline */
.ab-top::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg, rgba(8,37,20,.93) 0%, rgba(8,37,20,.86) 44%,
    rgba(8,37,20,.50) 68%, rgba(8,37,20,.14) 100%)}
.ab-top-in{position:relative;z-index:2;width:100%}
/* On a phone the copy runs the full width, so a left-weighted scrim would
   leave the end of every line sitting on bare photograph. Go vertical and
   near-uniform instead. */
@media(max-width:860px){
  /* Centring the hero moved the breadcrumb and eyebrow up into what used to
     be the light top band - the eyebrow measured 3.28:1 there. The wash now
     deepens by 16% instead of 28%, keeping only the very top open. */
  .ab-top::before{background:linear-gradient(180deg, rgba(8,37,20,.50) 0%,
    rgba(8,37,20,.82) 16%, rgba(8,37,20,.92) 50%, rgba(8,37,20,.94) 100%)}
}

/* breadcrumb, label, headline and lede all invert on the photo */
/* width:max-content keeps the box on the dark end of the scrim instead of
   stretching across to where the photo is bright */
.ab-crumb{display:flex;width:max-content;gap:9px;align-items:center;font-size:13px;
  color:rgba(255,255,255,.86);margin-bottom:clamp(22px,3vw,34px)}
.ab-crumb a{color:rgba(255,255,255,.86)}
.ab-crumb a:hover{color:#fff}
.ab-crumb span{opacity:.45}
.ab-crumb em{font-style:normal;color:#fff;font-weight:600}
/* same reason as the breadcrumb: keep the box on the dark end of the scrim */
.ab-top .ab-lab{color:var(--green-lt);width:max-content}
.ab .ab-top h1{color:#fff;font-size:clamp(31px,4.6vw,54px);line-height:1.07;
  max-width:17ch;margin:0 0 20px;text-wrap:balance}
.ab .ab-top h1 em{color:var(--green-lt);font-weight:500;font-style:normal}
.ab .ab-hero-lede{font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.65;
  color:rgba(255,255,255,.92);max-width:56ch}
/* the supporting line sits a step down from the first */
/* .82 measured 4.74:1 against the brightest pixel it can cross - above the
   4.5 floor but with no room, so it runs at .88 */
.ab .ab-hero-lede--sm{margin-top:12px;font-size:clamp(14px,1.3vw,15.5px);
  color:rgba(255,255,255,.88);max-width:62ch}
.ab-hero-acts{display:flex;flex-wrap:wrap;gap:12px;
  margin-top:clamp(22px,2.6vw,32px)}

/* ------------------------------------------------- facts strip (light) */
.ab-facts-sec{background:var(--m-wash);padding:clamp(30px,3.4vw,44px) 0}


/* ---------------------------------------------------------- facts rail --
   Hairlines and type only. The homepage's equivalent is a filled mint panel
   with icon plates, so this had to carry no fill and no icons at all. */
.ab-facts{margin:0;padding:0;display:grid;gap:24px;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.ab-facts{grid-template-columns:repeat(4,1fr);gap:0}}
.ab-facts > div{margin:0}
@media(min-width:860px){
  .ab-facts > div{padding:0 26px;border-left:1px solid var(--m-line)}
  .ab-facts > div:first-child{padding-left:0;border-left:0}
}
.ab-facts dt{font-family:var(--b);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--green-dk);margin-bottom:8px}
.ab-facts dd{margin:0;font-family:var(--h);font-size:16.5px;font-weight:500;color:var(--ink);
  line-height:1.3;letter-spacing:-.012em}
.ab-facts dd small{display:block;margin-top:5px;font-family:var(--b);font-size:12.5px;
  font-weight:400;color:var(--m-muted);line-height:1.45;letter-spacing:0}

/* ================================================================= STORY */
/* Sticky heading on the left, prose running on the right — a reading layout.
   The homepage never does this; every block there is centred over its grid. */
.ab-sec{padding:clamp(50px,5.6vw,82px) 0}
.ab-sec--tint{background:var(--m-wash)}
.ab-split{display:grid;gap:clamp(26px,3.6vw,58px);align-items:start}
@media(min-width:940px){.ab-split{grid-template-columns:.8fr 1.2fr}}
@media(min-width:940px){ .ab-split-head{position:sticky;top:110px} }
.ab-split-head h2{font-size:clamp(26px,3.2vw,38px);max-width:14ch}
.ab-prose{font-size:16.5px;line-height:1.72;color:var(--body,#3F4658);max-width:62ch}
.ab-prose p+p{margin-top:16px}
.ab-prose strong{color:var(--ink);font-weight:600}
/* the opening sentence carries more weight than the rest */
/* Scoped with .ab on purpose: sp-core sets .hp p{margin:0} at (0,1,1), which
   outranks a bare .ab-lede (0,1,0) and silently dropped this margin. */
.ab .ab-lede{font-family:var(--h);font-size:clamp(18px,2vw,22px);font-weight:400;
  line-height:1.5;color:var(--ink);letter-spacing:-.014em;margin-bottom:18px}

/* ========================================================= DISCIPLINES */
/* A definition list on hairlines. Deliberately not cards — the homepage
   already uses cards for exactly this kind of two-way split. */
.ab-disc{display:grid;gap:0}
@media(min-width:860px){.ab-disc{grid-template-columns:repeat(2,1fr);gap:0 clamp(34px,4vw,64px)}}
.ab-disc > div{padding:26px 0;border-top:1px solid var(--rule)}
@media(min-width:860px){ .ab-disc > div:nth-child(-n+2){border-top:1px solid var(--rule)} }
.ab-disc h3{font-size:19px;font-weight:500;letter-spacing:-.018em;margin-bottom:6px}
.ab-disc > div > p{font-size:14.5px;color:var(--m-muted);line-height:1.6;max-width:44ch}
.ab-disc ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.ab-disc li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--body,#3F4658)}
.ab-disc li svg{width:15px;height:15px;color:var(--green-dk);flex:none;margin-top:4px}

/* =============================================================== TIMELINE */
/* A vertical spine. The homepage runs its four stages across the page as
   cards; running them down a rule is the clearest way to make the two
   sections read as different things. */
.ab-time{position:relative;margin:0;padding:0;list-style:none}
.ab-time::before{content:"";position:absolute;left:19px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--green),var(--m-line));border-radius:2px}
.ab-time li{position:relative;padding:0 0 30px 60px}
.ab-time li:last-child{padding-bottom:0}
.ab-time b{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:2px solid var(--m-line);
  font-family:var(--h);font-size:13px;font-weight:600;color:var(--green-dkr);
  font-variant-numeric:tabular-nums;z-index:2}
.ab-time li:first-child b{border-color:var(--green);
  box-shadow:0 0 0 5px rgba(60,180,72,.13)}
.ab-time h3{font-size:17px;font-weight:600;margin-bottom:6px;padding-top:9px}
.ab-time p{font-size:14.5px;color:var(--m-muted);line-height:1.62;max-width:58ch}

/* ============================================================ WHERE WE WORK */
/* Institutions as rows on hairlines, with the capacity set as a figure on the
   right. The homepage shows the same organisations as a row of cards. */
.ab-sites{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.ab-sites li{border-bottom:1px solid var(--rule)}
.ab-sites a{display:grid;gap:6px 20px;padding:19px 4px;align-items:baseline;
  grid-template-columns:1fr auto;
  transition:background .24s var(--ease),padding-left .24s var(--ease)}
.ab-sites a:hover{background:var(--m-wash);padding-left:14px}
.ab-sites b{font-family:var(--h);font-size:16.5px;font-weight:500;color:var(--ink);
  letter-spacing:-.014em}
.ab-sites span{display:block;font-size:13px;color:var(--m-muted);grid-column:1;margin-top:-2px}
.ab-sites i{font-style:normal;font-family:var(--h);font-size:16px;font-weight:500;
  color:var(--green-dk);font-variant-numeric:tabular-nums;grid-row:1;grid-column:2;
  white-space:nowrap}
.ab-sites-foot{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* --------------------------------------------------------- shared heading */
/* Was the same inline style repeated on three <h2>s in the generator. */
.ab .ab-h2{font-size:clamp(26px,3.2vw,38px);max-width:22ch;
  margin-bottom:clamp(26px,3vw,38px)}

/* ============================================================ FIGURES BAND */
/* The one dark surface on the page, in the brand forest green (--sp-fst-*,
   the same scale the footer uses). An earlier pass had this in navy on the
   grounds that navy was unused — but unused is not the same as on-brand, and
   a blue band on a green site reads as a different company. It is told apart
   from the footer by angle, stop order and the absence of the grid overlay,
   and the two are ~3000px apart. Replaces the typographic rail that used to
   close the page. */
.ab-band{position:relative;overflow:hidden;
  background:linear-gradient(158deg,var(--sp-fst) 0%,var(--sp-fst-deep) 54%,var(--sp-fst-lt) 100%);
  padding:clamp(44px,5vw,72px) 0}
.ab-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 380px at 84% 6%, rgba(60,180,72,.22), transparent 64%)}
.ab-band > *{position:relative;z-index:2}
.ab-band .ab-lab{color:var(--green-lt);margin-bottom:clamp(24px,3vw,34px)}

.ab-band-nums{display:grid;gap:26px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.ab-band-nums{grid-template-columns:repeat(4,1fr);gap:0}}
@media(min-width:900px){
  .ab-band-nums > div{padding:0 30px;border-left:1px solid rgba(255,255,255,.16)}
  .ab-band-nums > div:first-child{padding-left:0;border-left:0}
}
/* Poppins is loaded at 300..800; 200 would be synthesised, so 300 it is. */
.ab-band-nums b{display:block;font-family:var(--h);font-weight:300;color:#fff;
  font-size:clamp(33px,4.6vw,52px);letter-spacing:-.035em;line-height:1.03;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ab-band-nums span{display:block;margin-top:10px;font-size:13px;line-height:1.45;
  color:rgba(255,255,255,.72)}
/* the same .hp p{margin:0} collision as .ab-lede — needs the .ab scope */
.ab .ab-band-note{margin-top:clamp(28px,3.2vw,40px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);max-width:76ch;
  font-size:12.5px;line-height:1.62;color:rgba(255,255,255,.62)}

/* ============================================================= PRINCIPLES */
/* Four cards floating on a full-bleed photograph, the picture showing
   through the cross-shaped gutter between them and around all four edges.
   The section heading stays on white above the band. */
.ab-princ-band{position:relative;isolation:isolate;overflow:hidden;
  margin-top:clamp(28px,3.4vw,44px);
  padding:clamp(38px,5vw,84px) 0}
.ab-princ-bg{position:absolute;inset:0;z-index:0}
/* A commissioned rooftop of ours rather than a stock farm. It is 1000px
   wide so it upscales a little, which is invisible under the scrim and
   behind the cards. */
.ab-princ-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
/* a green-tinted scrim: unifies the photo with the palette and darkens it
   just enough that white cards read as raised rather than dissolving */
.ab-princ-band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,37,20,.46) 0%, rgba(8,37,20,.34) 45%,
    rgba(8,37,20,.50) 100%)}
.ab-princ-band > .hp-wrap{position:relative;z-index:2}

/* the 2x2 itself - cards now, not hairlines, so the photo can show between */
/* deliberately narrower than the wrap, with a wide gutter: the point of the
   band is the photograph, so the cards must not cover it */
.ab-princ{display:grid;gap:clamp(18px,3vw,46px);border-top:0;
  max-width:940px;margin:0 auto}
@media(min-width:820px){.ab-princ{grid-template-columns:1fr 1fr}}
.ab-princ > div{background:#fff;border-radius:16px;border-bottom:0;
  padding:clamp(18px,2vw,26px);
  box-shadow:0 1px 3px rgba(17,24,39,.06), 0 20px 40px -24px rgba(17,24,39,.5)}
@media(min-width:820px){
  .ab-princ > div:nth-child(2n){border-left:0}
}
.ab-princ-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--m-card);color:var(--green-dk);margin-bottom:13px}
.ab-princ-ic svg{width:18px;height:18px}
.ab-princ .ab-lab{margin-bottom:9px}
.ab .ab-princ h3{font-size:clamp(17px,1.8vw,19px);font-weight:600;
  letter-spacing:-.018em;margin:0 0 8px;max-width:22ch}
.ab .ab-princ p{font-size:14px;line-height:1.62;color:var(--m-muted);max-width:46ch}


/* ========================================================== WHY CHOOSE US */
/* One oversized ghost numeral per column, hung off a top rule. The timeline
   below also numbers its steps, but with small filled circles on a spine —
   at a glance the two blocks do not read as the same component. */
.ab-why{display:grid;gap:clamp(28px,3.4vw,42px)}
@media(min-width:860px){.ab-why{grid-template-columns:repeat(3,1fr)}}
.ab-why > div{padding-top:clamp(14px,1.8vw,20px);border-top:2px solid var(--m-line)}
.ab-why > div:first-child{border-top-color:var(--green)}
/* decorative only — the numeral is aria-hidden, so the low contrast is fine */
.ab-why b{display:block;font-family:var(--h);font-weight:300;
  font-size:clamp(40px,5vw,58px);line-height:1;letter-spacing:-.04em;
  color:var(--m-card-2);margin-bottom:4px;font-variant-numeric:tabular-nums}
.ab .ab-why h3{font-size:18px;font-weight:500;letter-spacing:-.018em;margin:0 0 9px}
.ab .ab-why p{font-size:14.5px;line-height:1.66;color:var(--m-muted);max-width:42ch}

@media(prefers-reduced-motion:reduce){
  .ab-sites a{transition:none}
}

/* ============================================================== FOUNDERS */
/* One full-width panel per partner with the sides alternating, after the
   reference site: big name, role in brand colour, the bio as icon-led rows
   rather than plain paragraphs, the portrait in an offset frame, and a rail
   of four figures closing each panel. The previous two-up card grid gave the
   partners far too little weight for what is the point of an About page. */
.ab-fdr{background:var(--m-card);padding:clamp(50px,6vw,84px) 0;scroll-margin-top:96px}
.ab-fdr-stack{display:grid;gap:clamp(22px,2.6vw,34px)}

.ab-fdr-panel{position:relative;overflow:hidden;background:#fff;border-radius:24px;
  padding:clamp(24px,3vw,42px);
  box-shadow:0 1px 3px rgba(17,24,39,.05), 0 26px 54px -30px rgba(17,24,39,.34)}
/* faint tint sweeping in from the portrait side, so the two panels are not
   two identical white slabs */
.ab-fdr-panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(255deg, var(--m-wash) 0%, rgba(255,255,255,0) 52%)}
.ab-fdr-panel--flip::before{transform:scaleX(-1)}
.ab-fdr-panel > *{position:relative;z-index:2}

.ab-fdr-main{display:grid;gap:clamp(24px,3vw,44px);align-items:center}
/* stacked: the face leads, the bio follows — a name and a photo are what a
   reader is here for, and burying the portrait under three paragraphs on a
   phone is the one thing the reference gets right that a plain stack does not */
@media(max-width:899px){
  .ab-fdr-text{order:2}
  .ab-fdr-pic{order:1;max-width:300px}
}
@media(min-width:900px){
  .ab-fdr-main{grid-template-columns:1.32fr .68fr}
  /* the flipped panel puts the portrait first without reordering the DOM */
  .ab-fdr-panel--flip .ab-fdr-main{grid-template-columns:.68fr 1.32fr}
  .ab-fdr-panel--flip .ab-fdr-text{order:2}
  .ab-fdr-panel--flip .ab-fdr-pic{order:1}
}

/* ---- name, role, tick ---- */
.ab .ab-fdr-text h3{font-family:var(--h);font-size:clamp(26px,3.4vw,40px);font-weight:600;
  letter-spacing:-.03em;line-height:1.08;color:var(--ink);margin:0}
.ab .ab-fdr-role{font-family:var(--h);font-size:clamp(15px,1.7vw,19px);font-weight:600;
  letter-spacing:-.01em;color:var(--green-dk);margin:7px 0 0}
.ab-fdr-tick{display:block;width:96px;height:5px;margin:14px 0 clamp(18px,2.2vw,26px);
  border-radius:5px;
  background:radial-gradient(circle at 3px 50%, var(--m-line-ui) 1.6px, transparent 1.9px) 0 0/9px 5px repeat-x}
.ab-fdr-tick::after{content:"";display:block;width:7px;height:7px;border-radius:50%;
  background:var(--green);margin:-1px 0 0 auto;transform:translateX(4px)}

/* ---- bio as icon rows ---- */
.ab-fdr-bio{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ab-fdr-bio li{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.4vw,18px);
  align-items:start;padding:clamp(14px,1.6vw,18px) 0;border-top:1px solid var(--rule)}
.ab-fdr-bio li:first-child{border-top:0;padding-top:0}
.ab-fdr-bio li:last-child{padding-bottom:0}
.ab-fdr-bio i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--m-card);color:var(--green-dk);flex:none;margin-top:1px}
.ab-fdr-bio i svg{width:18px;height:18px}
.ab .ab-fdr-bio p{font-size:14.8px;line-height:1.68;color:var(--m-muted);max-width:60ch}

/* ---- portrait: offset plate behind, dot grid in the corner ---- */
.ab-fdr-pic{position:relative;margin:0;isolation:isolate}
/* the 7px white ring is what separates the photo from the plate behind it —
   without it the two read as one green-edged block */
.ab-fdr-pic img{position:relative;z-index:2;width:100%;aspect-ratio:4/5;object-fit:cover;
  display:block;border-radius:16px;background:var(--m-card-2);
  box-shadow:0 0 0 7px #fff, 0 2px 6px rgba(17,24,39,.10), 0 26px 50px -28px rgba(17,24,39,.45);
  transition:transform .7s var(--ease)}
.ab-fdr-panel:hover .ab-fdr-pic img{transform:translateY(-5px)}
/* the green plate sits behind and offset, the way the reference offsets its
   orange one — flipped to the outer edge on the mirrored panel */
.ab-fdr-plate{position:absolute;z-index:1;inset:18px -16px -16px 18px;border-radius:18px;
  background:linear-gradient(150deg,var(--green) 0%,var(--green-dk) 100%);opacity:.9}
.ab-fdr-panel--flip .ab-fdr-plate{inset:18px 18px -16px -16px}
.ab-fdr-dots{position:absolute;z-index:3;top:-10px;left:-12px;width:74px;height:46px;
  background:radial-gradient(circle at 3px 3px, var(--m-line-ui) 2px, transparent 2.4px) 0 0/14px 14px;
  opacity:.75}
.ab-fdr-panel--flip .ab-fdr-dots{left:auto;right:-12px}

/* ---- the four-figure rail that closes each panel ---- */
.ab-fdr-rail{display:grid;gap:0;grid-template-columns:1fr;
  margin-top:clamp(24px,3vw,38px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--rule)}
@media(min-width:620px){.ab-fdr-rail{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.ab-fdr-rail{grid-template-columns:.85fr 1fr 1fr 1fr}}
.ab-fdr-rail > div{display:flex;gap:12px;align-items:flex-start;
  padding:14px clamp(14px,1.6vw,22px)}
@media(min-width:620px){
  .ab-fdr-rail > div{border-left:1px solid var(--rule)}
  .ab-fdr-rail > div:nth-child(odd){border-left:0;padding-left:0}
}
@media(min-width:980px){
  .ab-fdr-rail > div:nth-child(odd){border-left:1px solid var(--rule);padding-left:clamp(14px,1.6vw,22px)}
  .ab-fdr-rail > div:first-child{border-left:0;padding-left:0}
}
.ab-fdr-rail i{display:grid;place-items:center;width:26px;height:26px;flex:none;
  color:var(--green-dk);opacity:.8}
.ab-fdr-rail i svg{width:16px;height:16px}
.ab-fdr-rail b{display:block;font-family:var(--b);font-size:13.5px;font-weight:700;
  color:var(--ink);line-height:1.35;letter-spacing:-.005em}
.ab-fdr-rail span{display:block;margin-top:3px;font-size:12px;line-height:1.45;
  color:var(--m-muted)}
/* first cell carries the headline number instead of an icon */
.ab-fdr-rail-big{display:block!important}
.ab-fdr-rail-big b{font-family:var(--h);font-size:clamp(26px,3vw,34px);font-weight:300;
  letter-spacing:-.035em;line-height:1.02;color:var(--green-dk);
  font-variant-numeric:tabular-nums}
.ab-fdr-rail-big span{margin-top:5px;font-size:12.5px;color:var(--m-muted)}

@media(prefers-reduced-motion:reduce){
  .ab-fdr-pic img{transition:none}
  .ab-fdr-panel:hover .ab-fdr-pic img{transform:none}
  .ab-sites a{transition:none}
}

/* ---------------------------------------------------------- story image */
/* Fills the sticky column, which was heading-only and left a tall gap next
   to the prose. The green edge is the same accent the founder plates use,
   kept to one side so it reads as a rule rather than a frame. */
.ab-story-pic{position:relative;margin:clamp(24px,2.8vw,34px) 0 0}
.ab-story-pic img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:18px;background:var(--m-card);
  box-shadow:0 2px 6px rgba(17,24,39,.08), 0 24px 46px -26px rgba(17,24,39,.4)}
.ab-story-pic::before{content:"";position:absolute;left:-10px;top:26px;bottom:26px;
  width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--green),var(--green-dk));}
@media(max-width:939px){
  .ab-story-pic{max-width:520px}
  .ab-story-pic::before{left:-8px}
}
/* With the image in it the sticky column is ~518px. On a short laptop
   viewport that plus the 110px header offset cannot fit, and a sticky block
   taller than its space never fully shows — so below that, don't stick. */
@media(max-height:700px){
  .ab-split-head{position:static}
}

/* ------------------------------------------------------- masthead lede */
.ab-mast-lede{display:grid;gap:14px;align-content:end}
.ab .ab-mast-lede p + p{color:var(--m-muted)}