/* ============================================================
   WYVERN FREIGHT · SINGLE SERVICE PAGE (road-transport.html; reusable for the other services)
   Copy of the live wyvernfreight.com/road-transport/ structure (user's pick, 2026-10-21): banner, then a tab bar
   directly under it whose tabs SWITCH panels (live nav.ind-tabbar). Panels reuse site parts: About two-column block,
   .ab-lm-card boxes, Track .fq FAQ. Square corners, red only for the active-tab rule and the main action.
   Without JavaScript every panel shows, one after another.
   ============================================================ */

/* Tab bar: one row under the banner. Active tab = ink text + red underline (not colour alone: weight + rule). */
.spg-tabbar{background:#fff;border-bottom:1px solid var(--line)}
/* Phones: when more tabs sit off-screen (6-tab bars), a right-edge fade says so; service-page.js toggles .has-more.
   Smallest safe correction to the approved bar (tab-design audit 2026-10-23: NN/g + GOV.UK tab discoverability). */
.spg-tabbar{position:relative}
.spg-tabbar.has-more::after{content:"";position:absolute;top:0;right:0;bottom:1px;width:56px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 65%);pointer-events:none}
.spg-tablist{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.spg-tablist::-webkit-scrollbar{display:none}
.spg-tab{flex:none;min-height:60px;padding:0 20px;margin:0;border:0;background:none;font:500 15px/1.2 var(--sans);letter-spacing:-.005em;
  color:var(--muted);white-space:nowrap;cursor:pointer;scroll-snap-align:start;box-shadow:inset 0 -2px 0 transparent;
  transition:color .2s var(--ease),box-shadow .2s var(--ease)}
.spg-tab:first-child{padding-left:0}
.spg-tab:hover{color:var(--ink)}
.spg-tab[aria-selected="true"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--red)}
.spg-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}
/* Before JS runs the buttons do nothing, so they read as plain labels */
.spg-page:not(.is-tabs) .spg-tabbar{display:none}

/* Panels */
.spg-panel{padding:88px 0 104px}
.spg-panel:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.spg-panel + .spg-panel{border-top:1px solid var(--line)}
.is-tabs .spg-panel + .spg-panel{border-top:0}
.spg-head{max-width:720px;margin-bottom:40px}
.spg-head h2{font:500 clamp(30px,2.8vw,42px)/1.08 var(--sans);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.spg-head p{margin-top:14px;font:400 17px/1.55 var(--sans);color:var(--muted)}
.spg-block + .spg-block{margin-top:88px}

/* Overview: copy + photo slot */
/* Overview intro = DP World overview (user 2026-10-22): large centred heading, centred text, no photo,
   a hairline under it like DP World's section rule. No eyebrow: the banner label 100px above already names the page
   (eyebrow audit 2026-10-25; tools/check-requirements.mjs intro-no-eyebrow). */
.spg-intro{text-align:center;padding-bottom:72px;border-bottom:1px solid var(--line)}
.spg-intro-copy{max-width:880px;margin:0 auto}
.spg-intro-copy h2{margin-top:18px;font:500 clamp(36px,3.8vw,58px)/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.spg-intro-copy p{margin:20px auto 0;font:400 clamp(17px,1.3vw,19px)/1.6 var(--sans);color:var(--ink-2);max-width:68ch;text-wrap:pretty}
.spg-intro .dc-svc-img{grid-column:8 / -1;aspect-ratio:4 / 3}

/* Card grids reuse .ab-lm-card; four across for the operating flow */
.spg-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.spg-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}   /* two cards fill the row as halves (no empty third column) */
.spg-panel .ab-lm-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.spg-panel .ab-lm-card li{position:relative;padding-left:18px;font:400 15px/1.5 var(--sans);color:var(--ink-2)}
.spg-panel .ab-lm-card li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1.5px;background:var(--ink-2)}


/* Key routes: grouped route rows (border posts only, never transit times) */
.spg-routes{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.spg-route-list{grid-column:1 / span 6;list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.spg-route-list li{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.spg-route-kind{font:500 var(--fs-label)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.spg-route-name{font:500 18px/1.35 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.spg-route-post{display:block;margin-top:4px;font:400 14px/1.45 var(--sans);color:var(--muted)}
.spg-route-desc{display:block;margin-top:8px;font:400 15px/1.55 var(--sans);color:var(--ink-2);max-width:60ch}  /* sector routes (industry pages) */
.spg-map{grid-column:7 / -1;margin:0}

/* Vehicles & trailers: headline figure under each title */
.spg-fig{font:500 13px/1.3 var(--mono);letter-spacing:.02em;color:var(--ink)}

/* FAQ reuses track.css .fq; inside a panel the section padding comes from .spg-panel */
.spg-panel .fq-list{margin-top:0}

@media (max-width:1024px){
  .spg-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spg-route-list{grid-column:1 / -1}
  .spg-map{grid-column:1 / -1;margin-top:40px}
}
@media (max-width:767px){
  .spg-tab{min-height:52px;padding:0 14px;font-size:14.5px}
  .spg-panel{padding:56px 0 72px}
  .spg-block + .spg-block{margin-top:64px}
  .spg-grid-4,.spg-grid-2{grid-template-columns:minmax(0,1fr)}
  .spg-route-list li{grid-template-columns:minmax(0,1fr);row-gap:4px}
}
@media (prefers-reduced-motion:reduce){ .spg-tab{transition:none} }
.spg-panel .dc-ic{color:var(--ink)}
@media (max-width:767px){ .spg-intro{padding-bottom:48px} .spg-intro-copy p{text-align:left} }   /* phone: long intro paragraphs read better left-aligned (tab review 2026-10-23); heading stays centred */

/* Route number tag in the list = the tag on the map (dataviz: identity never by colour alone) */
.spg-route-no{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:10px;vertical-align:2px;font:500 12px/1 var(--mono);color:#fff;background:var(--ink)}
.spg-route-no.core{background:var(--red)}
.spg-route-no.local{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* Key Routes map (tools/route-map.mjs). Grey base, covered countries a step darker, routes on top. */
.rt-map{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--line)}
.rt-map .land path{stroke:#fff;stroke-width:.8;stroke-linejoin:round}
.rt-map .oth{fill:#F3F4F6}
.rt-map .cov{fill:#E3E6EA}
.rt-map .cn{font:500 9.5px var(--mono);letter-spacing:.14em;fill:#8A919B}
.rt-map .cs{fill:none;stroke:#fff;stroke-width:6;stroke-linejoin:round;stroke-linecap:round}
.rt-map .rt{fill:none;stroke-linejoin:round;stroke-linecap:round}
.rt-map .rt.core{stroke:var(--red);stroke-width:3.2}
.rt-map .rt.regional{stroke:var(--ink);stroke-width:2.4}
.rt-map .rt.local{stroke:var(--ink);stroke-width:2.2;stroke-dasharray:6 4;stroke-linecap:butt}
.rt-map .ct{fill:#fff;stroke:var(--ink);stroke-width:1.6}
.rt-map .cl{font:500 11.5px var(--sans);fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.rt-map .bp{fill:var(--ink);stroke:#fff;stroke-width:2}
.rt-map .bl{font:500 10.5px var(--mono);fill:var(--ink-2);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.rt-map .tg rect{fill:var(--ink);stroke:#fff;stroke-width:2}
.rt-map .tg.core rect{fill:var(--red)}
.rt-map .tg.local rect{fill:#fff;stroke:var(--ink);stroke-width:1.5}
.rt-map .tg text{font:500 11px var(--mono);fill:#fff;text-anchor:middle}
.rt-map .tg.local text{fill:var(--ink)}
.rt-map .lg-bg{fill:#fff;stroke:var(--line)}
.rt-map .lg text{font:500 11.5px var(--sans);fill:var(--ink)}

/* Industry slider: copy of DP World "Road freight for your industry". Track = native horizontal scroll with snap
   (swipe, trackpad, keyboard), about 3.5 cards visible so the next one peeks in; arrows bottom right (home hero
   .dc-arrow, recoloured for white). Cards = industries.html .dc-svc cards. No autoplay. */
.spg-slider-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:40px}
.spg-slider-head .spg-head{margin-bottom:0}
.spg-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 24px) / 3.4);gap:24px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-inline:4px;scroll-behavior:smooth;scrollbar-width:none;padding:4px 4px 28px;margin:-4px -4px 0}
.spg-track::-webkit-scrollbar{display:none}
.spg-track:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.spg-slide{scroll-snap-align:start}
.spg-slide .dc-svc-img{height:200px}
.spg-ctl{display:flex;justify-content:flex-end;gap:12px;margin-top:8px}
.spg-ctl .dc-arrow{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.spg-ctl .dc-arrow:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.spg-ctl .dc-arrow:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.spg-ctl .dc-arrow:disabled{opacity:.4;cursor:default}
@media (max-width:1024px){ .spg-track{grid-auto-columns:calc((100% - 24px) / 2.3)} }
@media (max-width:767px){ .spg-track{grid-auto-columns:82%;gap:16px} }
@media (prefers-reduced-motion:reduce){ .spg-track{scroll-behavior:auto} }

/* "Our services" grid (Road Freight tab): all 7 visible, photo on top, no card box, no links */
.spg-svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}
.spg-svc h3{margin-top:22px;font:500 21px/1.25 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.spg-svc p{margin-top:10px;font:400 15px/1.55 var(--sans);color:var(--muted);max-width:52ch}
.spg-svc .spg-svc-img{height:auto;aspect-ratio:3 / 2}
@media (max-width:1024px){ .spg-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px){ .spg-svc-grid{grid-template-columns:minmax(0,1fr);gap:40px} }

/* Vehicles & Trailers summary (tools/trailers/make-trailers.cjs): drawing, two headline figures, note, link to the
   full specification on trailers.html. Drawings sit on white in a hairline frame, never cropped. */
.spg-veh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}
.spg-veh-fig{display:grid;place-items:center;aspect-ratio:16 / 7;padding:14px;background:#fff;border:1px solid var(--line)}
.spg-veh-fig img{width:100%;height:100%;object-fit:contain}
.spg-veh h3{margin-top:20px;font:500 20px/1.25 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.spg-veh .spg-fig{margin-top:8px}
.spg-veh p:not(.spg-fig){margin-top:8px;font:400 15px/1.5 var(--sans);color:var(--muted)}
.spg-veh .btn-t{margin-top:14px}
.spg-veh-more{margin-top:56px}
@media (max-width:1024px){ .spg-veh-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px){ .spg-veh-grid{grid-template-columns:minmax(0,1fr);gap:40px} }

/* Industry and service pages generated from the live site (tools/industries, tools/services; 2026-10-22).
   Trailer card rows sized to the live list (2, 3 or 5 trailers) on desktop, so no empty slot and no lone card;
   tablet and phone keep the shared 2 / 1 column rules from home-decargo.css. */
@media (min-width:1025px){
  .dc-cards.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dc-cards.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dc-cards.n5{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* Cold Chain Cargo tab (audit 2026-10-26): the standard 4-up card width, but a lone last card sits centred at the same
   width instead of alone at the left. Half-columns: 8 on desktop, 4 on tablet, each card spans 2 (same width as 4 / 2
   columns with the same gap). */
.dc-cards.is-centred-last{grid-template-columns:repeat(8,minmax(0,1fr))}
.dc-cards.is-centred-last>*{grid-column:span 2}
.dc-cards.is-centred-last>:last-child:nth-child(4n+1){grid-column:4 / span 2}
@media (max-width:1024px){
  .dc-cards.is-centred-last{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dc-cards.is-centred-last>:last-child:nth-child(4n+1){grid-column:span 2}
  .dc-cards.is-centred-last>:last-child:nth-child(odd){grid-column:2 / span 2}
}
@media (max-width:767px){
  .dc-cards.is-centred-last{grid-template-columns:minmax(0,1fr)}
  .dc-cards.is-centred-last>*,.dc-cards.is-centred-last>:last-child:nth-child(odd){grid-column:auto}
}
/* A card with no page to open yet (no Learn more): no hover zoom or red heading, so it does not read as a link */
.dc-svc.is-static:hover img,.dc-svc.is-static:focus-within img{transform:none}
.dc-svc.is-static:hover h3,.dc-svc.is-static:focus-within h3{color:inherit}
/* Long checklists from the live pages: two columns of short items, the diamond marker from the policy pages' signs */
.spg-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px;max-width:900px}
.spg-checks li{position:relative;padding-left:24px;font:400 16px/1.55 var(--sans);color:var(--ink-2)}
.spg-checks li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border:1.5px solid var(--red);transform:rotate(45deg)}
.spg-block > p.spg-note{max-width:760px;margin-top:20px;font:400 16px/1.6 var(--sans);color:var(--muted)}
.ab-lm-card ul{margin-top:12px}
@media (max-width:767px){ .spg-checks{grid-template-columns:minmax(0,1fr)} }
/* Related logistics services (industry pages, audit 2026-10-22): last section before the footer, outside the tab panels */
.spg-related{padding:88px 0 104px;border-top:1px solid var(--line)}
.spg-related .spg-block{margin:0}
@media (max-width:767px){ .spg-related{padding:56px 0 72px} }
/* Industry editorial blocks (2026-10-22): photo beside heading + four points (About .dc-two + .ab-photo split);
   the value-chain block is mirrored. Points are hairline-ruled rows, not boxes, so half a column stays readable. */
.spg-feature .spg-head{margin-bottom:28px}
.spg-feature .ab-photo{margin:0}
.spg-feature.is-flip .ab-photo{order:2}
.spg-points{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.spg-points li{padding:18px 0;border-bottom:1px solid var(--line)}
.spg-points h3{font:500 18px/1.35 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.spg-points p{margin-top:6px;font:400 15px/1.55 var(--sans);color:var(--ink-2)}
/* Linked points (Cold Chain pages, user 2026-10-26: "built like Four things every refrigerated load needs, with clickable
   links"): the heading is the link, the whole row is its click area; underlined at rest, red on hover/focus like the cards */
.spg-points li.has-link{position:relative}
.spg-points li.has-link a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--muted);transition:color .2s,text-decoration-color .2s}
.spg-points li.has-link a::after{content:"";position:absolute;inset:0}
.spg-points li.has-link:hover a,.spg-points li.has-link a:focus-visible{color:var(--red);text-decoration-color:currentColor}
.spg-points li.has-link a:focus-visible{outline:none}
.spg-points li.has-link a:focus-visible::after{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:1024px){ .spg-feature.is-flip .ab-photo{order:0} }
/* Heading row with actions (2026-10-22): the courier hand-off buttons and in-page quote prompts; the buttons sit
   right, wrapping under the text on phones. Dividers come from the shared block rule below. */
.spg-cta-row .spg-slider-head{margin-bottom:0;align-items:center}
.spg-row-acts{display:flex;flex-wrap:wrap;gap:12px}
/* One divider rule for every tab (user 2026-10-22: "some updates are missing the grey divider line"): each block that is
   followed by another block ends with the same hairline and spacing as the Overview intro, so the rhythm never breaks */
.spg-panel .spg-block:has(+ .spg-block){padding-bottom:72px;border-bottom:1px solid var(--line)}
@media (max-width:767px){ .spg-panel .spg-block:has(+ .spg-block){padding-bottom:48px} }

/* Cargo Insurance · Cargo We Cover: a category register, not another set of product cards (user 2026-10-23).
   One ruled grid with shared hairlines (DSV-style classification), icon on a quiet tile above the heading,
   every example visible. Static on purpose: the cells are not links, so no hover lift. */
.spg-cargo{gap:0;border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong)}
.spg-cargo .ab-lm-card{gap:20px;padding:32px 32px 36px;border:0;border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.spg-cargo .ab-lm-top{flex-direction:column;align-items:flex-start;gap:20px}
.spg-cargo .ab-lm-top .dc-ic{box-sizing:content-box;width:36px;height:36px;padding:10px;background:var(--hover)}
.spg-cargo .ab-lm-card h3{font-size:20px;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.spg-cargo .ab-lm-card ul{gap:10px;padding-top:20px;border-top:1px solid var(--line)}
@media (max-width:767px){ .spg-cargo .ab-lm-card{padding:28px 24px 30px} }

/* Content-led components (tab audit 2026-10-23, AUDIT-TABS-2: processes read as steps, long name lists as tags).
   New classes only: no existing rule changes. */
/* tag row: many short names (sectors, marketplaces), each a quiet chip; a chip that links an existing page gets the hover */
.spg-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;max-width:960px}
.spg-tags li{margin:0}
.spg-tags span,.spg-tags a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line-strong);background:#fff;font:400 15px/1.2 var(--sans);color:var(--ink-2);text-decoration:none}
.spg-tags a{color:var(--ink);transition:border-color .2s var(--ease-press),background .2s var(--ease-press)}
.spg-tags a:hover{border-color:var(--ink);background:var(--tint)}
.spg-tags a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* a block with one titled paragraph is prose, not a lone card in a three-column grid (Customs export clearance) */
.spg-single{max-width:760px;display:grid;gap:10px}
.spg-single h3{margin:0;font:500 20px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.spg-single p{margin:0;font:400 16px/1.6 var(--sans);color:var(--ink-2)}
.spg-single + .spg-checks{margin-top:32px}
@media (max-width:767px){
  .spg-panel .ab-lm-card .btn-t{min-height:44px;display:inline-flex;align-items:center}   /* 44px tap target on phones */
  .spg-tags span,.spg-tags a{min-height:44px}
}
@media (prefers-reduced-motion:reduce){ .spg-tags a{transition:none} }