/* industry (sector) pages — the "sector" hero family: the only pages with a
   full-bleed photo hero band. Loads after service.css (svcbody/svcsec/tableband/
   endband/related/photoduo scaffolding is reused from there).

   The two sector pages deliberately diverge (design review R3-03): oil-gas opens
   two-column with the mono standards note in the right rail and a three-card
   "what severe service asks" row; palm-oil opens full-width with the numbered
   refining-sequence band (.stageband) carrying its mono note across the wrap. */

/* ---------- hero: full-bleed photo under a deep scrim ---------- */
.sechero{position:relative;overflow:clip;border-bottom:1px solid var(--line2);background:var(--bg)}
.sechero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sechero .scrim{position:absolute;inset:0;background:linear-gradient(rgba(6,13,26,.62),rgba(6,13,26,.94))}
.sechero .wrap{position:relative;padding-top:96px;padding-bottom:76px;max-width:var(--wrap)}
.sechero h1{font:600 clamp(32px,3.9vw,50px)/1.12 var(--disp);letter-spacing:-.015em;max-width:17ch;margin-top:20px}
.sechero h1 .hl{color:var(--cyan2)}
.sechero p.lede{margin:22px 0 30px;max-width:760px;color:#CBDDF0;font-size:15.5px;line-height:1.72}
@media (max-width:700px){.sechero .wrap{padding-top:72px;padding-bottom:56px}}

/* ---------- the industry-chip strip beneath the hero ----------
   Deliberately NOT pills. The sticky .chiprail directly above this band is NAVIGATION;
   two identical-looking chip rows 70px apart made it impossible to tell which one was
   clickable -- and the decorative one was the more legible of the two. It is now an
   inline mono list, which reads as a caption rather than as a second menu.
   (round 3, A REG-1 / B #2.) */
.secchips{background:var(--bg2);border-bottom:1px solid var(--line);padding:18px 0}
.secchips .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--g2)}
.secchips b{font:500 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);white-space:nowrap}
.secchips b::after{content:":";margin-left:2px;color:var(--mut2)}
.secchips ul{display:flex;flex-wrap:wrap;gap:var(--g2);padding:0;margin:0;align-items:baseline}
.secchips li{list-style:none;border:0;border-radius:0;padding:0;background:none;
  font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.secchips li+li::before{content:"·";margin-right:var(--g2);color:var(--mut2)}

/* ---------- gutter aside: the mono standards note (oil-gas only) ---------- */
.secaside{position:sticky;top:104px;display:grid;gap:var(--g3)}
@media (max-width:1120px){.secaside{position:static}}
/* Body in the body face. This was the longest mono block on the site -- 15 lines of
   prose in IBM Plex Mono, which reads as a code listing. Mono is for the label only.
   (round 3, A F14) */
.stdnote{border:1px solid var(--line2);border-left:3px solid var(--cyan);border-radius:var(--rad-s);background:rgba(12,24,48,.5);padding:22px 22px 20px;font:400 14px/1.7 var(--body);color:var(--prose)}
.stdnote b{display:block;font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.stdnote em{font-style:normal;color:var(--ink)}
/* the same note, carried across the wrap instead of down the rail (palm-oil) */
.stdnote--band{margin-top:26px;padding:24px 28px 22px;font-size:13px;max-width:900px}

/* ---------- the numbered refining-sequence band (palm-oil only) ----------
   Numbering is legitimate here: crude → degumming → bleaching → deodorising →
   fractionation is a real plant sequence, not a decorative list. Built from the
   existing strip vocabulary (mono numeral over a display label, hairline cells). */
.stageband{background:var(--bg2);border-block:1px solid var(--line);padding:var(--band) 0}
.stageband .kicker{margin-bottom:14px}
.stageband h2{font:600 clamp(24px,2.8vw,32px)/1.2 var(--disp);letter-spacing:-.01em;margin-bottom:16px}
.stageband>.wrap>p{color:var(--mut);max-width:72ch}
.stagestrip{display:grid;grid-template-columns:repeat(5,1fr);margin-top:32px;
  border:1px solid var(--line2);border-radius:var(--rad-s);overflow:hidden;
  background:linear-gradient(180deg,rgba(18,33,61,.55),rgba(12,24,48,.35))}
.stagestrip li{position:relative;list-style:none;padding:22px 22px 24px;border-left:1px solid var(--line)}
.stagestrip li:first-child{border-left:0}
.stagestrip li::after{content:"";position:absolute;right:-5px;top:50%;width:8px;height:8px;
  border-top:1px solid var(--cyan);border-right:1px solid var(--cyan);
  transform:translateY(-50%) rotate(45deg)}
.stagestrip li:last-child::after{display:none}
.stagestrip .stnum{display:block;font:500 12px var(--mono);letter-spacing:.2em;color:var(--cyan);margin-bottom:9px}
.stagestrip b{display:block;font:600 15px/1.3 var(--disp);color:var(--ink)}
@media (max-width:900px){
  .stagestrip{grid-template-columns:1fr}
  .stagestrip li{display:flex;align-items:baseline;gap:var(--g3);padding:15px 20px;border-left:0;border-top:1px solid var(--line)}
  .stagestrip li:first-child{border-top:0}
  .stagestrip li::after{right:auto;left:20px;top:auto;bottom:-5px;transform:rotate(135deg)}
  .stagestrip .stnum{margin-bottom:0}
}

/* ---------- duty-map band: kicker + h2 with one photo card in the rail column ----
   Design review R3-05: the right column had nothing after section 01. This carries
   one rail object down to the middle of the page. */
.tableband .bandhead{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--g5);align-items:end;margin-bottom:26px}
.tableband .bandhead .bhtext{min-width:0}
.tableband .bandhead h2{margin-bottom:0}
.tableband .bandhead .photocard img{aspect-ratio:4/3}
@media (max-width:1120px){
  .tableband .bandhead{grid-template-columns:minmax(0,1fr);gap:var(--g3)}
  .tableband .bandhead .photocard img{aspect-ratio:16/7}
}

/* ---------- duty-map table accents ---------- */
.dutymap th[scope="row"]{max-width:230px}
.dutymap .pr{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan2);white-space:nowrap}
.dutymap td .fam{color:var(--ink);font-weight:600}
/* Phone: the Principal column is the payload the h2 promises, and at 390px it sat
   two swipes off-screen (R3-07). Cap the prose cells and tighten the padding so all
   four columns fall inside roughly one and a half screen widths. Nothing drops
   below the 12px painted-text floor. */
@media (max-width:700px){
  .dutymap table{font-size:12px;line-height:1.5;table-layout:auto}
  .dutymap caption{padding:12px 10px 10px}
  .dutymap th{padding:10px}
  .dutymap td{padding:10px}
  .dutymap th[scope="row"]{width:94px;max-width:94px;padding:10px}
  .dutymap td:nth-of-type(1){width:104px;max-width:104px}   /* typical service */
  .dutymap td:nth-of-type(2){width:98px;max-width:98px}     /* valve family   */
  .dutymap td:nth-of-type(3){width:88px;max-width:88px}     /* principal      */
  .dutymap .pr{white-space:normal}
}

/* ---------- the solo body block runs the full wrap ----------
   Design review R3-05: the measure now sits on the text children (the article-sheet
   rule), so the photo duo and the related-card row cross the column the way wide
   figures do on the article pages. The reading measure itself is unchanged. */
/* deliberately NOT a second measure: service.css owns .svcmain's cap, and
   a 720px cap inside it inset only the BLOCK children, staggering headings against
   prose by 20px. (round 3, B R-2) */
.svcbody--solo .svcsec>.photoduo,
.svcbody--solo .svcsec>.related{max-width:none}

/* ---------- the client's-words panel (specification mistakes) ----------
   Design review R3-10: restyled from a display-type pull quote into the site's
   established panel form — 1px line, 3px cyan left edge, mono tag, body type —
   the same shape as the article TL;DR, the versus verdict box and the mono
   standards note above. */
.saypanel{border:1px solid var(--line2);border-left:3px solid var(--cyan);border-radius:var(--rad-s);
  background:linear-gradient(180deg,rgba(18,33,61,.6),rgba(12,24,48,.4));
  padding:24px 28px 22px;margin:26px 0}
.saypanel .tag{display:inline-block;font:500 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.saypanel p{color:var(--ink);font:400 15.5px/1.7 var(--body);margin:0}
.saypanel cite{display:block;margin-top:14px;font:500 12px var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2)}