/* service pages — the "linecard" family (principals), plus the shared body scaffolding
   used by the versus/route/sector service subtypes (each adds its own small sheet). */

/* ---------- hero: linecard ---------- */
.svchero{position:relative;overflow:clip;background:
  radial-gradient(820px 480px at 82% 30%,rgba(29,130,198,.15),transparent 62%),var(--bg);
  border-bottom:1px solid var(--line)}
.svchero .wrap{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--g5);align-items:center;padding-top:64px;padding-bottom:72px}
.svchero .kicker{margin-bottom:20px}
.svchero p.lede{margin:20px 0 30px;color:var(--mut);font-size:15.5px;line-height:1.7}
.statuschip{display:inline-flex;align-items:center;gap:var(--g1);font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan2);border:1px solid rgba(76,196,255,.35);border-radius:999px;padding:7px 15px;background:rgba(41,170,227,.08)}
.statuschip.principal{color:var(--mut);border-color:var(--line2);background:rgba(18,32,58,.5)}

/* the line card — a warehouse bin tag for the brand */
.linecard{position:relative;border:1px solid var(--line2);border-radius:var(--rad);background:linear-gradient(180deg,rgba(18,33,61,.6),rgba(12,24,48,.4));overflow:hidden}
.linecard .lphoto{position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line2);
  background:radial-gradient(120% 110% at 50% 0%,#152747,#0A1526)}
.linecard .lphoto::before{content:"";position:absolute;left:50%;bottom:-40%;transform:translateX(-50%);width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(41,170,227,.22),rgba(41,170,227,.06) 58%,transparent 72%)}
.linecard .lphoto img{position:relative;width:100%;height:100%;object-fit:cover}
.linecard .lphoto img.cut{object-fit:contain;padding:20px;filter:drop-shadow(0 18px 28px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(41,170,227,.16))}
.linecard dl{display:grid;grid-template-columns:auto 1fr;gap:0}
.linecard dt{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);padding:13px 0 13px 20px;border-bottom:1px solid var(--line);white-space:nowrap}
.linecard dd{font-size:14px;color:var(--ink);padding:13px 20px;border-bottom:1px solid var(--line);text-align:right}
.linecard dt:last-of-type,.linecard dd:last-of-type{border-bottom:0}
@media (max-width:900px){.svchero .wrap{grid-template-columns:1fr;gap:var(--g4)}}

/* ---------- body: main column + sticky enquiry rail ---------- */
.svcbody .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--g5);align-items:start}
/* ONE measure for the whole family. This was 720px while three page sheets declared
   760px of their own, so sibling pages ran 67 to 88 characters a line with no shared
   rule -- and a comment elsewhere asserted this said 760. (round 4, B-3) */
.svcmain{max-width:min(760px,68ch)}
.svcmain>section{padding:0;margin-bottom:72px}
.svcmain>section:last-child{margin-bottom:0}
.svcmain .kicker{margin-bottom:14px}
.svcmain h2{font:600 clamp(24px,2.8vw,32px)/1.2 var(--disp);letter-spacing:-.01em;margin-bottom:16px}
.svcmain h3{font:600 17px/1.35 var(--disp);margin:26px 0 12px}
.svcmain p{color:var(--prose);margin-bottom:14px}
.svcmain ul.checks{margin:14px 0;display:grid;gap:var(--g1)}
.svcmain ul.checks li{position:relative;padding-left:26px;color:var(--mut);font-size:15px}
.svcmain ul.checks li::before{content:"";position:absolute;left:0;top:.52em;width:14px;height:2px;background:var(--cyan)}
.svcsec{border-top:1px solid var(--line2);padding-top:34px}
.svcsec:first-child{border-top:0;padding-top:0}

/* duty cards inside the main column */
.dutytrio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g2);margin:22px 0}
.dutytrio .card{padding:20px 18px}
.dutytrio b{display:block;font:600 15px var(--disp);margin-bottom:8px}
.dutytrio p{font-size:13.5px;color:var(--mut);margin:0}
@media (max-width:900px){.dutytrio{grid-template-columns:1fr}}

/* photo duo */
.photoduo{display:grid;grid-template-columns:1fr 1fr;gap:var(--g2);margin:22px 0}
.photoduo .photocard img{aspect-ratio:4/3}
@media (max-width:700px){.photoduo{grid-template-columns:1fr}}

/* the enquiry rail */
.rail{position:sticky;top:104px}
.rail .card{padding:26px 24px}
.rail .card:hover{transform:none}
.rail h2{font:600 17px/1.3 var(--disp);margin-bottom:6px}
.rail p{font-size:13.5px;color:var(--mut);margin-bottom:16px}
.rail ul{display:grid;gap:var(--g1);margin-bottom:20px}
.rail li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--g1);align-items:baseline}
.rail li b{font:500 12px var(--mono);letter-spacing:.14em;color:var(--cyan);text-transform:uppercase;white-space:nowrap}
.rail li span{font-size:13px;color:var(--mut)}
.rail .cta{width:100%;justify-content:center}
.rail .btn2{width:100%;justify-content:center;margin-top:10px}
/* The centring lives HERE, in the base sheet, not in comparison.css. Written once into
   comparison.css it reached 2 of the 5 pages it was for, and oil-gas, palm-oil and
   how-ordering kept a ~430px permanently empty right gutter down their whole height.
   (2026-08-21 round 2, finding B-1.) */
.svcbody--solo .wrap{grid-template-columns:minmax(0,1fr)}
.svcbody--solo .svcmain{max-width:min(760px,68ch);margin-inline:auto}
/* ...EXCEPT on a page that also carries a rail. There, the first .svcbody is two-column
   so .svcmain sits at x=144, and every later --solo block centred it at x=377 -- the same
   column, same page, jumping 233px right after the table band. With no rail beside it the
   indent reads as an accident rather than as centring. Pages that are solo THROUGHOUT
   (the comparisons, the process page, palm-oil) stay centred: they are internally
   consistent, which is the whole point. (round 5, B F5-2 -- the largest layout defect
   left on the site, on 8 of 31 pages.) */
body:has(.rail) .svcbody--solo .svcmain,
body:has(.secaside) .svcbody--solo .svcmain{margin-inline:0}
@media (max-width:1120px){
  .svcbody .wrap{grid-template-columns:minmax(0,1fr)}
  .rail{position:static}
  /* max-width:none made the measure GROW as the viewport shrank -- ~104 characters a
     line at 768. A tablet reader gained nothing and lost readability. (B-E6) */
  .svcmain{max-width:min(100%,68ch)}
}

/* ---------- full-width table band ---------- */
/* On a brand or sector page the table IS the argument -- it is what an engineer came
   for -- so it takes the deep ground and the large tier. */
.tableband{border-block:1px solid var(--line);padding:var(--sec-lg) 0;margin:0 0 72px}
.tableband h2{font:600 clamp(28px,3.4vw,42px)/1.18 var(--disp)}
/* Only the table breaks the measure. The band's kicker, heading and note stay on the
   prose axis, or the reader watches the column jump 196px and back. (round 3, B F-3) */
/* One left edge for the whole band. The first attempt centred these three boxes, which
   did nothing for .kicker -- it is display:inline-flex, and margin-inline:auto does
   not centre an inline-level box -- so the band ended up with THREE left edges
   (kicker 144, h2 340, table 145) where it had started with two. They all simply
   share the wrap's edge now, which is where every other element on the site starts.
   (round 4, C F-4 / B F-3) */
.tableband .kicker,.tableband h2,.tableband .note{max-width:760px;margin-inline:0}
.tableband .kicker{margin-bottom:14px}
.tableband h2{font:600 clamp(24px,2.8vw,32px)/1.2 var(--disp);margin-bottom:22px}
/* This is the qualifier that makes the numbers above it legitimate; it was the least
   legible text on the page. (A-D13) */
.tableband .note{font:400 14px/1.6 var(--body);color:var(--mut);margin-top:14px;max-width:70ch}

/* ---------- related links row ---------- */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g2);margin-top:22px}
.related a{display:block;border:1px solid var(--line);border-radius:var(--rad-s);padding:16px 18px;background:rgba(12,24,48,.4);transition:border-color .2s,background .2s}
.related a:hover{border-color:rgba(76,196,255,.4);background:rgba(41,170,227,.06)}
.related b{display:block;font:600 14px var(--disp);margin-bottom:4px}
.related span{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
@media (max-width:700px){.related{grid-template-columns:1fr}}

/* ---------- closing enquiry band ---------- */
/* .endband lives in chrome.css -- it is on every page type, and it was declared here
   AND in service.css, byte for byte, on 23 pages that load both. (Round 5, B.) */