/* ============================================================
   SITE HEADER
   Desktop ≥1140px: full bar + mega panels.
   Below 1140px: compact bar + full-height drawer.
   ============================================================ */

/* Brand lockup — mark cropped from assets/img/wyvern-mark.png */
.brand{display:flex;align-items:center;flex-shrink:0;min-height:44px;border-radius:0;--logo-h:52px}
.brand-logo{display:block;height:var(--logo-h);width:auto;transition:height var(--t-base) var(--ease)}
.brand:focus-visible{outline:2px solid var(--focus);outline-offset:6px}

/* Bar */
.wh{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);color:var(--ink);--h-now:var(--bar);transition:box-shadow var(--t-base)}
.wh.is-compact{--h-now:var(--bar-compact);box-shadow:var(--shadow-drop)}
.wh.is-compact .brand{--logo-h:42px}
.wh-bar{height:var(--h-now);max-width:var(--container);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;transition:height var(--t-base) var(--ease)}
.wh-bar > .brand{justify-self:start;align-self:center}
.wh.is-compact .wh-bar > .brand{--logo-h:42px}

/* Primary nav */
.wh-nav{display:flex;justify-self:center;--nt-pad:22px}
.wh-nav > ul{display:flex;list-style:none;margin:0;padding:0}
.ni{position:relative;display:flex}
.nt{appearance:none;background:none;border:0;margin:0;cursor:pointer;height:100%;padding:0 var(--nt-pad);display:flex;align-items:center;font:500 var(--fs-nav)/1 var(--sans);color:var(--ink-2);letter-spacing:.005em}
.nt-in{display:flex;align-items:center;gap:7px;border-radius:0}
.nt svg{color:var(--subtle);transition:transform var(--t-base) var(--ease),color var(--t-base)}
.nt:hover,.ni.is-open .nt,.ni.is-current .nt{color:var(--ink)}
.ni.is-open .nt svg{transform:rotate(180deg);color:var(--red)}
.nt:focus-visible{outline:none}
.nt:focus-visible .nt-in{outline:2px solid var(--focus);outline-offset:6px}

/* Signature: route-line indicator (origin node — line — destination node) */
.ind{position:absolute;left:var(--nt-pad);right:var(--nt-pad);bottom:-1px;height:2px;background:var(--line-strong);pointer-events:none;
  clip-path:inset(-4px calc(100% + 4px) -4px -4px);transition:clip-path .24s var(--ease),background var(--t-base)}
.ind::before,.ind::after{content:"";position:absolute;top:-2px;width:6px;height:6px;border-radius:50%;background:inherit}
.ind::before{left:-3px}.ind::after{right:-3px}
.nt:hover ~ .ind,.nt:focus-visible ~ .ind{clip-path:inset(-4px -4px -4px -4px)}
.ni.is-current .ind{clip-path:inset(-4px -4px -4px -4px);background:var(--ink)}
.ni.is-open .ind{clip-path:inset(-4px -4px -4px -4px);background:var(--red)}

/* Operational cluster */
.wh-ops{justify-self:end;display:flex;align-items:stretch;gap:6px}
.wh-ops .btn-f,.wh-ops .btn-i{--h:42px}
.wh-ops .btn-f{border-color:var(--line)}
.wh-ops .btn-p{--h:42px;padding:0 22px}
.op-wrap{position:relative;display:flex;align-items:center}
.wh-ops .btn-p{margin-left:4px}
.wh.is-compact .wh-ops .btn-f,.wh.is-compact .wh-ops .btn-i{--h:38px}
.wh.is-compact .wh-ops .btn-p{--h:38px}
.wh.is-compact .btn-g .u{bottom:8px}

/* Panels */
.mp,.dd,.tp{opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .2s var(--ease),visibility 0s linear .2s}
.mp.is-open,.dd.is-open,.tp.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform var(--t-base) var(--ease),visibility 0s}
.mp{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-drop);max-height:calc(100vh - var(--h-now));overflow-y:auto}
.mp-inner{max-width:var(--container);margin:0 auto;padding:34px var(--gutter) 30px}
.rail .rail-h{margin:0 0 10px;font:500 24px/1.15 var(--sans);letter-spacing:-.02em}
.rail p{font:400 14.5px/1.5 var(--sans);color:var(--muted);max-width:30ch}
.rail .meta{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font:400 12px/1.6 var(--mono);color:var(--subtle)}
.rail .meta b{color:var(--ink-2);font-weight:500}
.cat-h{display:flex;align-items:baseline;gap:10px;margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid var(--line);
  font:500 var(--fs-label)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cat-h .no{font:500 12px/1 var(--mono);letter-spacing:0;color:var(--subtle)}
.cat-sub{margin:-2px 0 6px;font:400 12.5px/1.4 var(--sans);color:var(--subtle)}
.lk{display:block;padding:9px 12px;margin:0 -12px;border-radius:0;transition:background .12s}
.lk-t{display:flex;align-items:center;gap:8px;font:500 15px/1.3 var(--sans);color:var(--ink)}
.lk-t svg{flex-shrink:0;opacity:0;transform:translateX(-4px);color:var(--red);transition:all .16s var(--ease)}
.lk-d{display:block;margin-top:3px;font:400 13px/1.35 var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-m{display:block;margin-top:4px;font:400 12px/1.3 var(--mono);color:var(--subtle)}
.lk:hover,.lk:focus-visible,.lk.is-active{background:var(--hover)}
.lk:hover .lk-t svg,.lk:focus-visible .lk-t svg{opacity:1;transform:none}
.lk:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.lk.is-active .lk-m{color:var(--red)}
.mp-actions{border-top:1px solid var(--line);background:var(--tint)}
.mp-actions .row{max-width:var(--container);margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;gap:24px}
.mp-actions .note{margin-left:auto;font:400 13.5px/1 var(--sans);color:var(--muted)}

.g-sol{display:grid;grid-template-columns:232px 1fr;gap:48px}
.g-rail{display:grid;grid-template-columns:270px 1fr;gap:56px}
.g-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.g-cor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 360px;gap:28px}
.vts{display:flex;flex-direction:column;margin-top:22px;border-top:1px solid var(--line)}
.vt{appearance:none;background:none;border:0;border-bottom:1px solid var(--line);height:52px;padding:0 12px 0 14px;display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left;position:relative;transition:background .12s}
.vt::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--red);transform:scaleY(0);transition:transform var(--t-base) var(--ease)}
.vt-l{font:500 16px/1 var(--sans);letter-spacing:-.01em;color:var(--ink-2)}
.vt-m{margin-left:auto;font:400 12px/1 var(--mono);color:var(--subtle)}
.vt svg{color:var(--subtle)}
.vt:hover,.vt[aria-selected="true"]{background:var(--hover)}
.vt[aria-selected="true"]::before{transform:none}
.vt[aria-selected="true"] .vt-l{color:var(--ink)}
.vt[aria-selected="true"] svg{color:var(--red)}
.vt:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.view[hidden]{display:none}
.view{animation:fade .18s ease}

/* Route card */
.rc{background:var(--tint);padding:16px 18px 14px;display:flex;flex-direction:column}
.rc-h{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);color:var(--subtle);letter-spacing:.04em;text-transform:uppercase}
.rc-st{margin-left:auto;display:inline-flex;align-items:center;gap:7px;color:var(--ok);text-transform:none;letter-spacing:0;font-size:12px}
.rc-st i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(30,127,75,.14)}
.rc-title{margin:10px 0 2px;font:500 18px/1.2 var(--sans);letter-spacing:-.015em}
.rc svg{width:100%;height:auto;margin:6px 0 4px}
.rc-f{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);padding-top:12px}
.rc-f div{display:flex;flex-direction:column;gap:5px}
.rc-f span{font:400 12px/1 var(--mono);color:var(--subtle);text-transform:uppercase;letter-spacing:.04em}
.rc-f b{font:500 15px/1 var(--sans)}
.rc-note{margin-top:12px;font:400 12px/1.3 var(--mono);color:var(--subtle)}
.r-name{font:500 14.5px var(--sans);fill:var(--ink)}
.r-code{font:400 11px var(--mono);fill:var(--subtle)}
.r-bord{font:500 var(--fs-label) var(--mono);fill:var(--red);letter-spacing:.03em}
.r-km{font:400 11.5px var(--mono);fill:var(--muted)}
.r-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .7s var(--ease) forwards}
.r-node{opacity:0;animation:fade .3s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* About dropdown */
.dd{position:absolute;top:100%;left:50%;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0;box-shadow:var(--shadow-drop)}
/* About dropdown (review 2026-10-21, NN/g dropdown guidance): attached under its label and left-aligned, so the eye
   goes straight from "About" to the options; square; one item per row with one line of context; 44px+ targets. */
.dd-about{left:0;width:340px;padding:8px;border-top:2px solid var(--ink);border-radius:0;display:grid;gap:2px}
.dd-lk{display:grid;gap:4px;min-height:44px;padding:12px 14px;text-decoration:none;transition:background-color .2s var(--ease)}
.dd-t{font:500 15px/1.25 var(--sans);color:var(--ink)}
.dd-d{font:400 13.5px/1.4 var(--sans);color:var(--muted)}
.dd-lk:hover,.dd-lk:focus-visible{background:var(--hover)}
.dd-lk:hover .dd-t{color:var(--red)}
.dd-lk:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.dd-lk[aria-current="page"] .dd-t{color:var(--red)}
/* Track Shipment: an action, so it sits last below a hairline. Text only, like the other items (user, 2026-10-21) */
.dd-act{margin-top:6px;border-top:1px solid var(--line);padding-top:16px}

/* Track popover */
.tp{position:absolute;top:100%;right:0;width:380px;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0;box-shadow:var(--shadow-drop);padding:18px}
.field-l{display:flex;justify-content:space-between;align-items:center;font:500 14px/1 var(--sans);letter-spacing:0;color:var(--ink-2);margin-bottom:10px}
.field-l .btn-t{padding:0;font-size:13px}
.track-row{display:flex;border:1px solid var(--line-field);border-radius:0;overflow:hidden;background:#fff}
.track-row:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,78,216,.15)}
.track-row input{flex:1;border:0;outline:0;padding:0 12px;height:42px;font:400 16px var(--sans);color:var(--ink);min-width:0;background:transparent}
.track-row input::placeholder{color:var(--subtle)}
/* Site search popover (reuses .tp + .track-row) */
.sp{width:420px}
/* Search row = reference variant 4: 1px ink outline, square corners, 44px tall, magnifier button attached on the right.
   The button is square like every plate and turns red on hover. */
.sp-row{display:flex;height:44px;border:1px solid var(--ink);border-radius:0;background:#fff}
.sp-row:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.sp-row input{flex:1;min-width:0;border:0;outline:0;padding:0 14px;font:400 16px var(--sans);color:var(--ink);background:transparent}
.sp-row input::placeholder{color:var(--subtle)}
.sp-row input::-webkit-search-cancel-button,.sp-row input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.sp-go{appearance:none;border:0;margin:-1px -1px -1px 0;width:44px;flex:none;display:grid;place-items:center;cursor:pointer;color:#fff;background:var(--ink);
  transition:background .2s var(--ease-press)}
.sp-go:hover{background:var(--red)}
.sp-go:active{background:var(--red-active)}
.sp-go:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff}
.sp-head{margin:16px 0 6px;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--subtle)}
.sp-list{list-style:none;margin:0;padding:0;display:grid}
.sp-list a{display:grid;gap:3px;padding:9px 10px;margin:0 -10px;border-radius:0;color:var(--ink);font:500 15px/1.3 var(--sans);text-decoration:none}
.sp-list a span{font:400 13px/1.4 var(--sans);color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.sp-list a:hover,.sp-list a:focus-visible{background:var(--tint,#f3f4f6);outline:none}
.sp-list a:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
.tp-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.tp-meta span{font:400 11px var(--mono);color:var(--subtle)}

/* Mobile-only controls in the bar */
.mh-act{display:none;margin-left:auto;align-items:center;gap:4px}
.m-btn{appearance:none;background:none;border:0;height:44px;min-width:44px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font:500 14px/1 var(--sans);color:var(--ink);border-radius:0;cursor:pointer}
.m-btn:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.m-btn .i-red{color:var(--red)}
.m-burger{display:flex;flex-direction:column;gap:5px;width:20px}
.m-burger span{height:1.5px;background:var(--ink);border-radius:0}
.m-burger span:last-child{width:13px;align-self:flex-end}

/* ============================================================
   DRAWER (mobile)
   ============================================================ */
.drawer{position:fixed;inset:0;z-index:60;background:#fff;display:flex;flex-direction:column;height:100vh;height:100dvh;
  opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .24s var(--ease)}
.drawer.is-open{opacity:1;transform:none}
.drawer[hidden]{display:none}
.drawer-bar{height:64px;flex-shrink:0;padding:0 8px 0 16px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.drawer-bar .brand{--logo-h:40px}
.drawer-bar .m-btn{margin-left:auto}
.drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain}
.acc{border-bottom:1px solid var(--line)}
.acc-b{appearance:none;width:100%;background:none;border:0;height:60px;padding:0 16px;display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left;color:var(--ink)}
.acc-b:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.acc-l{font:500 18px/1 var(--sans);letter-spacing:-.015em}
.acc-m{margin-left:auto;font:400 12px/1 var(--mono);color:var(--subtle)}
.acc-i{width:28px;height:28px;display:grid;place-items:center;border-radius:0;transition:background var(--t-fast)}
.acc-i svg{transition:transform var(--t-base) var(--ease)}
.acc-b[aria-expanded="true"] .acc-i{background:var(--hover)}
.acc-b[aria-expanded="true"] .acc-i svg{transform:rotate(45deg)}
.acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s var(--ease)}
.acc-p > div{overflow:hidden}
.acc-b[aria-expanded="true"] + .acc-p{grid-template-rows:1fr}
.acc-in{padding:2px 16px 16px}
.seg{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-strong);border-radius:0;padding:3px;gap:3px;margin-bottom:6px}
.seg button{appearance:none;border:0;background:none;height:36px;border-radius:0;font:500 13px/1 var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button[aria-selected="true"]{background:var(--ink);color:#fff}
.seg button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.seg-panel[hidden]{display:none}
.m-lk{display:flex;align-items:center;gap:10px;min-height:48px;border-bottom:1px solid var(--line);font:400 16px/1.3 var(--sans);color:var(--ink-2)}
.m-lk:last-of-type{border-bottom:0}
.m-lk .lk-m{margin:0 0 0 auto}
.m-lk > svg{margin-left:auto;color:var(--subtle);flex-shrink:0}
.m-lk .lk-m + svg{margin-left:0}
.m-lk:active{background:var(--hover)}
.acc-in .btn-t{margin-top:8px}
.m-sec{padding:18px 16px 24px;display:flex;flex-direction:column;gap:2px}
.m-sec a{display:flex;align-items:center;min-height:44px;font:400 15px var(--sans);color:var(--ink-2)}
.drawer-foot{flex-shrink:0;border-top:1px solid var(--line);padding:12px 16px calc(16px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr;  /* stacked: Get a Quote, then Client login */gap:10px;background:#fff}
.drawer-foot .sec{gap:8px;height:52px;border:1px solid var(--line-strong);border-radius:0;display:flex;align-items:center;justify-content:center;font:500 15px/1 var(--sans);color:var(--ink)}
.drawer-foot .sec:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Phone in landscape: a pinned footer left only ~170px for the menu, so the whole drawer scrolls
   as one column and Get a Quote / Client login follow the last row */
@media (max-height:500px){
  .drawer{overflow-y:auto;overscroll-behavior:contain}
  .drawer-bar{position:sticky;top:0;z-index:1;background:#fff} /* Close stays in reach */
  .drawer-body{flex:none;overflow:visible}
  .drawer-foot{box-shadow:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1359px){
  .g-sol{grid-template-columns:190px 1fr;gap:36px}
  .g-sol .rail p,.g-sol .rail .meta{display:none}
  .g-cor{grid-template-columns:repeat(3,minmax(0,1fr)) 300px;gap:22px}
  .g-rail{grid-template-columns:220px 1fr;gap:40px}
}
@media (max-width:1139px){
  .wh-nav,.wh-ops,.mp{display:none}
  .mh-act{display:flex}
  .wh-bar{padding:0 8px 0 16px}
  .wh-bar > .brand{--logo-h:40px;margin-right:0}
}
@media (min-width:1140px){
  .drawer{display:none !important}
}
@media (max-width:359px){
  .mh-act .m-btn .lbl{display:none}
}

/* Centred dropdowns sit under the middle of their label; the About list is left-aligned under its label instead */
.dd{transform:translate(-50%,-6px)}
.dd.is-open{transform:translate(-50%,0)}
.dd.dd-about{transform:translateY(-6px)}
.dd.dd-about.is-open{transform:none}

/* Three-zone bar: keep the centre honest at narrower desktops */
@media (min-width:1140px) and (max-width:1319px){
  .wh-nav{--nt-pad:15px}
  .wh-ops .btn-f .kbd{display:none}
}
@media (max-width:1139px){
  .wh-bar{display:flex}
  .wh-bar > .brand{--logo-h:40px}
}

/* Utility icons: [package] [user]  GET A QUOTE
   Two quiet 20px outline icons in ink; red only on hover (and while the track panel is open),
   so the red quote button keeps sole visual priority. Labels live in tooltips + aria-label.
   Spacing: 42px targets, 2px apart = ~24px between glyphs; ~31px from the user glyph to the quote button. */
.wh-ops{gap:2px}
.wh-ops .op-icon{appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;color:var(--ink);background:none}
.wh-ops .op-icon:hover,.wh-ops .op-icon[aria-expanded="true"]{color:var(--red);background:none}
.wh-ops .op-icon:active{background:none;transform:scale(.94)}
.wh-ops .op-icon[aria-expanded="true"] .tip{display:none}
.wh-ops .btn-p{margin-left:20px}

/* About dropdown = the live site's slim full-width strip: one centred row of links (2026-10-19) */
.mp-strip{background:var(--tint);box-shadow:var(--shadow-drop)}
.mp-strip-row{max-width:var(--container);margin:0 auto;padding:14px var(--gutter);display:flex;justify-content:center;flex-wrap:wrap;gap:8px 40px}
.mp-strip-row a{font:500 14px/1 var(--sans);color:var(--ink);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent;transition:border-color var(--t-base),color var(--t-base)}
.mp-strip-row a:hover{border-bottom-color:var(--red)}
.mp-strip-row a:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:0}

/* ------------------------------------------------------------
   Hover = DP World pattern (dpworld.com header, checked 2026-10-19): each menu item is a rounded pill and a
   soft tint fades in behind it on hover; no underline bar. Icon buttons and About-strip links follow suit.
   ------------------------------------------------------------ */
.wh-nav{--nt-pad:4px}
.ind{display:none}
.nt-in{padding:10px 16px;border-radius:0;transition:background-color .2s var(--ease),color .2s var(--ease)}
.nt:hover .nt-in{background:rgba(15,19,24,.06);color:var(--ink)}
.ni.is-open .nt-in{background:rgba(15,19,24,.09);color:var(--ink)}
/* Current page: a red rule under the label (box-shadow, so nothing shifts), same weight as the other items */
.ni.is-current .nt-in{color:var(--ink);box-shadow:inset 0 -2px 0 var(--red)}
.mp-strip-row a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--red)}
.drawer a[aria-current="page"] .acc-l{color:var(--red)}
.nt:focus-visible .nt-in{outline:2px solid var(--focus);outline-offset:2px}
.wh-ops .op-icon{border-radius:0;transition:background-color .2s var(--ease),color .2s var(--ease)}
.wh-ops .op-icon:hover,.wh-ops .op-icon[aria-expanded="true"]{background:rgba(15,19,24,.06);color:var(--ink)}
.mp-strip-row{gap:4px 8px}
.mp-strip-row a{padding:9px 16px;border-radius:0;border-bottom:0;transition:background-color .2s var(--ease)}
.mp-strip-row a:hover{background:rgba(15,19,24,.07)}
.mp-strip-row a:focus-visible{outline-offset:2px;border-radius:0}