/* ============================================================
   WYVERN FREIGHT — SERVICES OVERVIEW (services.html)
   Banner from legal.css, cards from home-decargo.css; only the page-specific bits live here.
   ============================================================ */
.sv-page .dc-sec{padding:80px 0}
.sv-list{background:var(--tint)}
.sv-cta .dc-head{margin-bottom:28px}
.sv-cta-acts{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap}
@media (max-width:767px){ .sv-page .dc-sec{padding:56px 0} }

/* Closing prompt as a photo band (.sv-cta.is-band; DP World / Bidvest International Logistics). Bidvest's layout
   (user 2026-10-22: "too big", button on the far right, no eyebrow as in both references): a compact band, heading
   and one line left, actions right, both centred
   vertically, over a dark scrim that deepens again under the actions so they read on the photo. */
.sv-cta.is-band{position:relative;overflow:hidden;isolation:isolate;background:var(--night);padding:64px 0}
.sv-cta-img{position:absolute;inset:0;z-index:-2}
.sv-cta-img img{width:100%;height:100%;object-fit:cover;object-position:62% 55%}
.sv-cta.is-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,14,18,.92) 0%,rgba(11,14,18,.80) 45%,rgba(11,14,18,.55) 72%,rgba(11,14,18,.72) 100%)}
.sv-cta.is-band .container{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px 64px}
.sv-cta.is-band .dc-head{max-width:620px;margin:0;gap:10px;text-align:left;justify-items:start}
.sv-cta.is-band h2{font-size:clamp(26px,2.4vw,36px);color:var(--on-night)}
.sv-cta.is-band .dc-head p:not(.eyebrow){color:var(--on-night-2)}
.sv-cta.is-band .sv-cta-acts{justify-content:flex-end;flex-wrap:nowrap}
@media (max-width:767px){
  .sv-cta.is-band{padding:56px 0}
  .sv-cta.is-band .container{grid-template-columns:1fr}
  .sv-cta.is-band .sv-cta-acts{justify-content:flex-start;flex-wrap:wrap}
  .sv-cta-img img{object-position:72% 50%}
  .sv-cta.is-band::after{background:linear-gradient(0deg,rgba(11,14,18,.94) 0%,rgba(11,14,18,.78) 60%,rgba(11,14,18,.45) 100%)}
}

/* ============================================================
   CONTENT-LED TAB COMPONENTS (tab-design audit 2026-10-23; service pages only, tools/services/make-services.cjs)
   The secondary tabs used one icon-card grid for every shape of content. Each shape now has its own component,
   all drawn with the site's hairlines and type, no boxes, no icons, no hover (nothing here is a link).
   ============================================================ */
/* steps: three stages in sequence, numbered in mono red (Maersk claims guide / DP World process rows) */
.spg-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-top:1px solid var(--ink)}
.spg-stage{padding:28px 36px 32px 0;border-bottom:1px solid var(--line)}
.spg-stage + .spg-stage{padding-left:36px;border-left:1px solid var(--line)}
.spg-stage-no{display:block;margin-bottom:16px;font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--red)}
.spg-stage h3{font:500 20px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.spg-stage p{margin-top:10px;font:400 15px/1.55 var(--sans);color:var(--ink-2)}
.spg-stage p + p{margin-top:8px}
/* index: many titled lines as a ruled term / description list in two columns (DSV, CEVA industry indexes) */
.spg-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;border-top:1px solid var(--ink)}
.spg-index li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:24px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.spg-index h3{font:500 17px/1.35 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.spg-index p{font:400 15px/1.55 var(--sans);color:var(--ink-2)}
/* register: titled example lists as ruled cells with shared hairlines (Unitrans / DSV category grids) */
.spg-register{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong)}
.spg-cell{display:grid;align-content:start;gap:14px;padding:28px 28px 32px;border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);background:#fff}
.spg-cell h3{font:500 19px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.spg-cell p{font:400 15px/1.55 var(--sans);color:var(--ink-2)}
.spg-cell ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:9px}
.spg-cell li{position:relative;padding-left:18px;font:400 15px/1.5 var(--sans);color:var(--ink-2)}
.spg-cell li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1.5px;background:var(--ink-2)}
.spg-cell li strong{color:var(--ink);font-weight:500}
/* notices: an advisory paragraph is a note bar, never a product card (ONE, Hollard keep warnings as plain notes) */
.spg-notices{display:grid;gap:16px;max-width:860px}
.spg-block > .spg-notices{margin-top:32px}
.spg-notice{padding:20px 24px;border-left:3px solid var(--ink);background:var(--tint)}
.spg-notice h3{font:600 15px/1.3 var(--sans);color:var(--ink)}
.spg-notice h2{font:600 17px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink)}   /* an advisory block after the tab's opening block ("Duty & VAT awareness") */
.spg-notice-block p + p{margin-top:10px}
.spg-notice p{margin-top:6px;font:400 15px/1.6 var(--sans);color:var(--ink-2)}
@media (max-width:1024px){
  .spg-index{grid-template-columns:minmax(0,1fr)}
  .spg-register{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .spg-stages,.spg-register{grid-template-columns:minmax(0,1fr)}
  .spg-stage,.spg-stage + .spg-stage{padding:22px 0;border-left:0}
  .spg-index li{grid-template-columns:minmax(0,1fr);row-gap:6px;padding:16px 0}
  .spg-cell{padding:22px}
  .spg-notice{padding:16px 18px}
}

/* ============================================================
   NOTICES AS WARNINGS + LEAD NOTES (review 2026-10-24, user: "should feel like a notice or warning")
   .is-warn: a titled warning (notice / warning / awareness / important) uses the site's danger language from the
   Careers "Beware of job scams" card: red-soft ground, red rule, the solid shield. Advisory notes keep the ink rule.
   ============================================================ */
.spg-notice.is-warn{border-left-color:var(--red);background:var(--red-soft);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:6px;align-items:center}
.spg-notice.is-warn > .dc-ic{width:24px;height:24px;color:var(--red)}
.spg-notice.is-warn > p{grid-column:2;margin-top:0}
.spg-notice.is-warn h3{font-size:16px}
/* a second lead paragraph belongs to its heading: same measure and tone, a short gap, not a stray line 60px below */
.spg-block > .spg-head + p.spg-note{margin-top:-24px;max-width:720px;font:400 17px/1.55 var(--sans);color:var(--muted)}
.spg-block > p.spg-note + p.spg-note{margin-top:12px}
.spg-block > .spg-note:last-child{margin-bottom:0}
/* whatever follows the lead note (steps, documents, a list) keeps the head's usual 40px gap */
.spg-block > p.spg-note + :not(.spg-note){margin-top:40px}
/* a block-level warning keeps the notice reading width (it ran the full 1360px container) */
.spg-notice.spg-notice-block{max-width:860px}
.spg-notice-block.is-warn > h2{font-size:16px}