/* ============================================================
   BUTTON SYSTEM — no arrow glyphs. Affordance comes from shape,
   weight and motion, not from decorative arrows.

   P  Plate  — primary. Square corners (user, 2026-10-20: square like the live site and IBM Carbon).
               Hover: tone shifts. Press: 0.98.
   F  Field  — operational. Icon cell, divider, label, key hint.
   I  Icon   — account. Square, mono tooltip.
   G  Ghost  — quiet text button. Route line draws in on hover.
   T  Text   — mono caps link. Hairline at rest → route line on hover.
   ============================================================ */
:root{--ease-press:cubic-bezier(.32,.72,0,1)}

/* P — Plate */
.btn-p{--h:44px;position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:var(--h);padding:0 24px;border:0;cursor:pointer;
  background:var(--red);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.12);
  font:500 var(--fs-btn)/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:background .2s var(--ease-press),transform .18s var(--ease-press),height var(--t-base) var(--ease)}
.btn-p .lbl{display:block}
.btn-p:hover{background:var(--red-press)}
.btn-p:active{background:var(--red-active);transform:scale(.98)}
.btn-p:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px #fff}
.btn-p.sm{--h:38px;padding:0 20px;font-size:13.5px}
.btn-p.lg{--h:52px;padding:0 28px;font-size:15px}
.btn-p.xs{--h:36px;padding:0 14px;font-size:13px}
.btn-p.block{width:100%}
/* P · ink: charcoal secondary (IBM Carbon secondary role). Same plate shape; red stays for the main action of a view.
   Used for card actions (services, industries). Button audit 2026-10-20. */
.btn-p.ink{background:var(--ink)}
.btn-p.ink:hover{background:#000}
.btn-p.ink:active{background:#000}
/* P · line: OUTLINED secondary. Same plate box; the 1px edge is an inset shadow so the height does not change.
   Ink on light surfaces; white ("inverse") inside dark bands and photo banners, so authors never pick the wrong one.

   ACTION GROUPS (Maersk Design System, Button, read 2026-10-25; user approved 2026-10-25, AUDIT-BUTTON-PAIRS-2026-10-25.md):
   - one FILLED red .btn-p per group = the main action
   - the second action = OUTLINED .btn-p.line (Save draft, Back to…, Contact…, any alternative)
   - a third, low-emphasis or repeated action = PLAIN .btn-t (Back in forms, Print, View, Remove)
   - several equally important actions = all OUTLINED, never several filled
   - forms: filled first (left, aligned with the fields), then outlined, then plain (keyboard reaches the main action first)
   - dialogs: secondary = neutral filled .btn-p.ink on the LEFT, the filled red primary on the RIGHT */
.btn-p.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-p.line:hover{background:rgba(15,19,24,.06)}
.btn-p.line:active{background:rgba(15,19,24,.12)}
:is(.doc-hero,.dc-dark,.is-band,.on-night) .btn-p.line{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
:is(.doc-hero,.dc-dark,.is-band,.on-night) .btn-p.line:hover{background:rgba(255,255,255,.12)}
:is(.doc-hero,.dc-dark,.is-band,.on-night) .btn-p.line:active{background:rgba(255,255,255,.2)}
.btn-p.line:focus-visible{box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px #fff}

/* F — Field */
.btn-f{--h:44px;appearance:none;height:var(--h);display:inline-flex;align-items:stretch;padding:0;background:#fff;border:1px solid var(--line-strong);border-radius:0;color:var(--ink);
  font:500 var(--fs-btn)/1 var(--sans);cursor:pointer;white-space:nowrap;
  transition:border-color .2s var(--ease-press),box-shadow .2s var(--ease-press),background .2s var(--ease-press),transform .18s var(--ease-press),height var(--t-base) var(--ease)}
.btn-f .ic{width:40px;display:grid;place-items:center;border-right:1px solid var(--line);color:var(--red);transition:background .2s var(--ease-press),border-color .2s var(--ease-press)}
.btn-f .lbl{display:flex;align-items:center;padding:0 12px}
.btn-f .kbd{align-self:center;margin-right:10px;font:500 12px/1 var(--mono);color:var(--subtle);border:1px solid var(--line);border-radius:0;padding:3px 5px}
.btn-f:hover,.btn-f[aria-expanded="true"]{border-color:var(--ink)}
.btn-f:hover .ic,.btn-f[aria-expanded="true"] .ic{background:var(--red-soft);border-right-color:var(--ink)}
.btn-f[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--ink)}
.btn-f:active{background:var(--hover);transform:scale(.98)}
.btn-f:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--focus)}

/* I — Icon button (account) */
.btn-i{--h:44px;position:relative;width:var(--h);height:var(--h);display:grid;place-items:center;border-radius:0;color:var(--ink-2);
  transition:background .2s var(--ease-press),color .2s var(--ease-press),transform .18s var(--ease-press),width var(--t-base) var(--ease),height var(--t-base) var(--ease)}
.btn-i:hover{background:var(--hover);color:var(--ink)}
.btn-i:active{background:#E9EBEE;transform:scale(.96)}
.btn-i:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus)}
.btn-i .tip{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-4px);background:var(--ink);color:#fff;
  font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 9px;border-radius:0;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast) var(--ease)}
.btn-i .tip::before{content:"";position:absolute;bottom:100%;left:50%;margin-left:-4px;border:4px solid transparent;border-bottom-color:var(--ink)}
.btn-i:hover .tip{opacity:1;transform:translate(-50%,0);transition-delay:250ms}
.btn-i:focus-visible .tip{opacity:1;transform:translate(-50%,0)}

/* Route-line underline, shared by G and T */
.u{position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--ink);pointer-events:none;
  clip-path:inset(-4px calc(100% + 4px) -4px -4px);transition:clip-path .36s var(--ease-press)}
.u::before,.u::after{content:"";position:absolute;top:-1.75px;width:5px;height:5px;border-radius:50%;background:inherit}
.u::before{left:-2.5px}.u::after{right:-2.5px}

/* G — Ghost */
.btn-g{--h:44px;height:var(--h);display:inline-flex;align-items:center;padding:0 12px;color:var(--ink-2);border-radius:0;font:500 var(--fs-btn)/1 var(--sans);white-space:nowrap;transition:color .2s var(--ease-press)}
.btn-g .lbl{position:relative;display:inline-flex;align-items:center}
.btn-g:hover{color:var(--ink)}
.btn-g:hover .u,.btn-g:focus-visible .u{clip-path:inset(-4px -4px -4px -4px)}
.btn-g:focus-visible{outline:none;box-shadow:0 0 0 2px var(--focus)}

/* T — Text link: hairline at rest, route line on hover */
.btn-t{position:relative;display:inline-flex;align-items:center;font:500 var(--fs-btn)/1 var(--sans);letter-spacing:0;color:var(--ink);
  padding:8px 0 10px;border-radius:0;transition:color .2s var(--ease-press)}
.btn-t::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--line-strong);transition:opacity .2s var(--ease-press)}
.btn-t .u{bottom:3.75px}
.btn-t:hover,.btn-t:focus-visible{color:var(--ink)}
.btn-t:hover::after,.btn-t:focus-visible::after{opacity:0}
.btn-t:hover .u,.btn-t:focus-visible .u{clip-path:inset(-4px -4px -4px -4px)}
.btn-t:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.btn-t.red .u{background:var(--red)}

/* Back to top — floating plate, appears after scrolling.
   The plate lives on ::before so the tooltip is not clipped. Square (cut corner retired 2026-10-26). */
.to-top{position:fixed;right:24px;bottom:24px;z-index:40;width:48px;height:48px;display:grid;place-items:center;color:#fff;border-radius:0;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s var(--ease-press),transform .3s var(--ease-press),visibility 0s linear .3s}
.to-top.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease-press),transform .3s var(--ease-press),visibility 0s}
.to-top::before{content:"";position:absolute;inset:0;background:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.18);transition:background .2s var(--ease-press),clip-path .32s var(--ease-press)}
.to-top svg{position:relative;transition:transform .3s var(--ease-press)}
.to-top:hover::before{background:var(--red)}
.to-top:hover svg{transform:translateY(-2px)}
.to-top:active{transform:scale(.96)}
.to-top:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.to-top .tip{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(4px,-50%);background:var(--ink);color:#fff;
  font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 9px;border-radius:0;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast) var(--ease)}
.to-top:hover .tip,.to-top:focus-visible .tip{opacity:1;transform:translate(0,-50%);transition-delay:200ms}
body.is-locked .to-top{display:none}
@media (max-width:599px){ .to-top{right:16px;bottom:16px;width:44px;height:44px} .to-top .tip{display:none} }

/* Track shortcut: back-to-top mirrored to the bottom-left (tip opens to the right) */
.to-track{position:fixed;left:24px;bottom:24px;z-index:40;width:48px;height:48px;display:grid;place-items:center;color:#fff;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s var(--ease-press),transform .3s var(--ease-press),visibility 0s linear .3s}
.to-track.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease-press),transform .3s var(--ease-press),visibility 0s}
.to-track::before{content:"";position:absolute;inset:0;background:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.18);transition:background .2s var(--ease-press),clip-path .32s var(--ease-press)}
.to-track svg{position:relative;transition:transform .3s var(--ease-press)}
.to-track:hover::before{background:var(--red)}
.to-track:hover svg{transform:translateY(-2px)}
.to-track:active{transform:scale(.96)}
.to-track:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.to-track .tip{position:absolute;left:calc(100% + 10px);top:50%;transform:translate(-4px,-50%);background:var(--ink);color:#fff;
  font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 9px;border-radius:0;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast) var(--ease)}
.to-track:hover .tip,.to-track:focus-visible .tip{opacity:1;transform:translate(0,-50%);transition-delay:200ms}
body.is-locked .to-track,body:has(main.tk) .to-track{display:none}
/* Phones: text links keep their look but get a 44px tap area (ui-ux-pro-max touch-target-size) */
@media (max-width:767px){ .btn-t::before{content:"";position:absolute;left:0;right:0;top:-9px;bottom:-9px} }
@media (max-width:599px){ .to-track{left:16px;bottom:16px;width:44px;height:44px} .to-track .tip{display:none} }


/* Utility: ink submit (track) */
.btn-ink{appearance:none;border:0;background:var(--ink);color:#fff;padding:0 16px;font:500 var(--fs-btn)/1 var(--sans);letter-spacing:.01em;cursor:pointer;
  transition:background .2s var(--ease-press)}
.btn-ink:hover{background:#000}
.btn-ink:active{background:#000;box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.btn-ink:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--focus)}

@media (prefers-reduced-motion: reduce){
  .btn-p:active,.btn-f:active,.btn-i:active{transform:none}
}

/* Floating buttons step aside while scrolling down (header.js adds .is-tucked), back on scroll up. All widths since
   2026-10-23: on desktop they sat over text in the page gutters (tab review AUDIT-TABS-2026-10-23.md) */
.to-top.is-tucked,.to-track.is-tucked{opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s var(--ease-press),transform .2s var(--ease-press),visibility 0s .2s}
/* Phones: small buttons reach the 44px tap target (tab review 2026-10-23) */
@media (max-width:767px){ .btn-p.sm{--h:44px} }

/* Pagination (News listing, Careers open positions): Previous / numbers / Next. Shared so every list pages the same way. */
.bl-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
.bl-pager[hidden]{display:none}   /* stays hidden (no rule, no gap) until a list has more than one page */
.bl-pg-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.bl-pg-num,.bl-pg-step{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line-strong);background:var(--canvas);color:var(--ink);font:500 15px/1 var(--sans);text-decoration:none;transition:border-color .2s,background-color .2s,color .2s}
.bl-pg-step{padding:0 18px;font-weight:600}
.bl-pg-num:hover,.bl-pg-step:hover{border-color:var(--ink)}
.bl-pg-num[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.bl-pg-num:focus-visible,.bl-pg-step:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bl-pg-gap{display:inline-flex;align-items:center;height:44px;padding:0 4px;color:var(--muted)}
@media (max-width:767px){
  /* Pager on phones: numbers on one row, Previous and Next side by side below */
  .bl-pager{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .bl-pg-list{grid-column:1 / -1;order:-1;justify-content:center}
  .bl-pg-step{width:100%}
  .bl-pg-step[rel="prev"]{grid-column:1}
  .bl-pg-step[rel="next"]{grid-column:2}
}