/* ============================================================
   WYVERN FREIGHT — ABOUT US (about.html)
   Banner from legal.css; every section reuses a home component (home-decargo.css). Only layout tweaks here.
   ============================================================ */
.ab-page .dc-sec{padding:80px 0}
.ab-story{background:var(--tint)}
.ab-story .dc-head{margin-bottom:0}
.ab-ph{padding:16px 20px;border:1px dashed var(--red);color:var(--ink)}   /* placeholder: easy to spot, remove with the real story */
.ab-facts{margin-top:4px;padding-left:0}
.ab-facts li::before{content:none}   /* no bullet on the facts list (user 2026-10-23) */
/* Purpose statement (review 2026-10-23): one centred line, mission + vision in two columns under a hairline */
.ab-purpose .container{display:grid;justify-items:center;text-align:center}
.ab-purpose h2{max-width:18ch;margin:12px 0 0;font-size:clamp(34px,4.4vw,56px);line-height:1.08;letter-spacing:-.02em}
.ab-mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 64px;width:100%;max-width:880px;margin:48px 0 0;padding-top:32px;border-top:1px solid var(--line)}
.ab-mv dt{font:600 15px/1.3 var(--sans);color:var(--ink);margin-bottom:8px}
.ab-mv dd{margin:0;font-size:17px;line-height:1.55;color:var(--muted)}
@media (max-width:767px){ .ab-mv{grid-template-columns:1fr} }
.ab-values .dc-points p{font-size:18px}
@media (max-width:767px){
  .ab-page .dc-sec{padding:56px 0}
}
/* Who we are: a single photo (no collage) */
/* Desktop: the photo takes the height of the text column, like the home About block: top level with the eyebrow,
   bottom level with the button. Tablet/phone: a shorter 4:3 photo above the text (saves ~400px on a phone). */
.ab-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (min-width:1025px){
  .dc-two:has(> .ab-photo){align-items:stretch}
  .ab-photo{position:relative;min-height:420px}
  .ab-photo img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
}
@media (max-width:1024px){ .ab-photo{max-width:620px} }
/* Learn more (Maersk pattern): left heading, three outlined boxes with icon + title, sentence, small button */
.ab-lm h2{margin-bottom:32px}
.ab-lm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ab-lm-card{display:grid;align-content:start;justify-items:start;gap:14px;padding:28px;border:1px solid var(--line-strong);background:#fff}
.ab-lm-top{display:flex;align-items:center;gap:14px}
.ab-lm-top .dc-ic{width:36px;height:36px;flex:none}
.ab-lm-card h3{font-size:20px;margin:0}
.ab-lm-card p{font-size:15px;color:var(--muted)}
.ab-lm-card .btn-t{margin-top:6px}
/* Action card (Maersk "Explore more" .action-card, maersk.com/careers, user 2026-10-25): cards that carry an action get the
   icon in its own 48px column, title + sentence + a small ink filled button beside it. .ab-lm-top becomes display:contents
   so the existing markup works; cards without an action (lists, roles, cargo) keep the stacked layout above. */
.ab-lm-card:has(> .ab-lm-top):has(> a){grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:16px;row-gap:8px;align-content:stretch}   /* button rows line up across a grid row */
.ab-lm-card:has(> .ab-lm-top):has(> a) > .ab-lm-top{display:contents}
.ab-lm-card:has(> .ab-lm-top):has(> a) > .ab-lm-top .dc-ic{grid-column:1;grid-row:1 / -1;align-self:start;width:48px;height:48px}
.ab-lm-card:has(> .ab-lm-top):has(> a) > :not(.ab-lm-top),.ab-lm-card:has(> .ab-lm-top):has(> a) > .ab-lm-top h3{grid-column:2}
.ab-lm-card:has(> .ab-lm-top):has(> a) > a{margin-top:8px;justify-self:start}
@media (max-width:1024px){ .ab-lm-grid{grid-template-columns:1fr 1fr} }
@media (max-width:767px){ .ab-lm-grid{grid-template-columns:1fr} }
/* Our footprint (Unitrans pattern): copy + two-column market list left, plain Africa map right (covered = red) */
.ab-foot-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center;}
.ab-foot-copy{display:grid;gap:18px;justify-items:start}
.ab-markets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px;margin:10px 0 0;padding-left:0;width:100%}
.ab-foot-map{margin:0}
.ab-map{display:block;width:100%;height:auto;max-height:620px}
.ab-map path{stroke:#fff;stroke-width:.8;stroke-linejoin:round}
.ab-map .off{fill:#DADDE1}
.ab-map .on{fill:var(--red)}
@media (max-width:1024px){ .ab-foot-grid{grid-template-columns:1fr;gap:40px} .ab-foot-map{max-width:620px} }
/* SHEQ: heading block on the left (no floating intro), four points, one button + Integrity Line link */
.ab-sheq-head{display:grid;gap:14px;justify-items:start;max-width:640px;margin-bottom:48px}
.ab-sheq-acts{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:48px}
/* Red only on the main actions (DESIGN.md critique 2026-10-20, IBM/Uber/Wise rule: one accent for the primary action):
   ink icons in "Learn more" (SHEQ keeps red); the market list has no bullets (the map carries the red). */
.ab-lm .dc-ic{color:var(--ink)}
.ab-markets li::before{content:none}   /* no bullet on the markets list (user 2026-10-23) */