/* ============================================================
   DATA LOGISTICS GROUP, home page upgrades (index.html only)
   Layers on css/styles.css: same tokens, cards, chips and buttons.
   The hero, hero photo band, header, footer and truck band are untouched.
   ============================================================ */

/* Keyboard focus for everything below the hero */
:where(.hero-cards-wrap,.wwm,.strip,.section,.cap-sec) :is(a,button):focus-visible{outline:3px solid var(--blue-light);outline-offset:3px}
:where(.section--navy,.hero-cards-wrap,.strip) :is(a,button):focus-visible{outline-color:#7ED957}

.nowrap{white-space:nowrap}

/* Shared: icon tile hover fill and a thin red to blue accent line on cards */
.inst .card,.who{position:relative;overflow:hidden}
.inst .card::before,.who::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--blue));transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.inst .card:hover::before,.who:hover::before{transform:scaleX(1)}
.inst .card .ico,.who .ico{transition:background-color .18s ease,color .18s ease}
.inst .card:hover .ico{background:var(--blue);color:#fff}

/* ---------- Supplying the whole installation ---------- */
.inst{background:linear-gradient(180deg,#fff 0%,#fff 55%,#F7F9FC 100%)}
.inst .card .ico{width:50px;height:50px;border-radius:12px}
.inst .card .ico svg{width:25px;height:25px}
.inst .card h3{font-size:1.18rem}
.inst__cta{justify-content:center;margin-top:34px}

/* ---------- Capability statement ---------- */
.cap-sec{background:#F4F6FA;padding:8px 0 84px}
.cap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);background:#fff;border:1px solid var(--gray-300);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.cap__stage{position:relative;display:flex;align-items:center;justify-content:center;padding:48px 32px 64px;background:linear-gradient(150deg,var(--usblue),var(--navy) 70%);overflow:hidden;isolation:isolate}
.cap__stage::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.1;background-image:linear-gradient(rgba(61,139,242,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(61,139,242,.7) 1px,transparent 1px);background-size:32px 32px}
.cap__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--red) 0 34%,#fff 34% 66%,var(--usblue) 66% 100%)}
.cap__doc{position:relative;display:block;width:min(260px,68%);border-radius:6px;transform:rotate(-3deg);box-shadow:0 26px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.2);transition:transform .3s ease,box-shadow .3s ease}
.cap__doc::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:6px;background:#dfe7f3;opacity:.28;transform:rotate(7deg) translate(10px,4px)}
.cap__doc img{width:100%;height:auto;border-radius:6px;background:#fff}
.cap__doc:hover{transform:rotate(0) translateY(-4px);box-shadow:0 32px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.35)}
.cap__doc:focus-visible{outline:3px solid #7ED957;outline-offset:5px}
.cap__badge{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#dfe7f3;background:rgba(11,31,58,.7);border:1px solid rgba(255,255,255,.22);border-radius:30px;padding:6px 14px}
.cap__badge .sep{margin:0 10px}
.cap__body{padding:48px 52px;display:flex;flex-direction:column;justify-content:center}
.cap__body .eyebrow{color:var(--red)}
.cap__body h2{font-size:clamp(1.55rem,2.6vw,2.15rem);margin-bottom:12px}
.cap__body>p{color:var(--gray-700);font-size:1.02rem;max-width:56ch;margin-bottom:0}
.cap__ids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:24px 0 28px}
.cap__ids div{border:1px solid var(--gray-300);border-left:3px solid var(--usblue);border-radius:10px;padding:11px 14px;background:#F8FAFC}
.cap__ids dt{font-family:var(--font-head);font-weight:700;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-500);margin-bottom:2px}
.cap__ids dd{font-family:var(--font-head);font-weight:800;font-size:1.04rem;color:var(--navy);letter-spacing:.02em;overflow-wrap:anywhere}
.cap .cap__btn{background:var(--red);border-color:var(--red);color:#fff}
.cap .cap__btn:hover{background:#8f1435;border-color:#8f1435;color:#fff}
.cap .cap__btn svg{width:18px;height:18px;flex:0 0 auto}

/* ---------- Why DLG ---------- */
.why{position:relative;overflow:hidden}
.why::before{content:"";position:absolute;inset:0;opacity:.1;pointer-events:none;background-image:linear-gradient(rgba(61,139,242,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(61,139,242,.6) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000,transparent 75%)}
.why .container{position:relative;z-index:1}
.why .card{display:flex;flex-direction:column;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02))}
.why .card .ico{width:52px;height:52px;border-radius:12px;background:rgba(126,217,87,.1);color:#7ED957;border:1px solid rgba(126,217,87,.34);transition:background-color .18s ease,color .18s ease}
.why .card .ico svg{width:26px;height:26px}
.why .card:hover .ico{background:#7ED957;color:var(--navy)}
.why .card p{flex:1 0 auto}
.why__tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
@media(min-width:981px){.why__tags{min-height:84px;align-content:flex-start}}
.why__tags li{font-family:var(--font-head);font-weight:600;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:#dfe7f3;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:30px;padding:5px 10px;line-height:1.2}

/* ---------- Who we work with ---------- */
.who-group+.who-group{margin-top:34px}
.who-label{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-500);margin:0 0 16px}
.who-label i{width:9px;height:9px;border-radius:2px;background:var(--blue);flex:0 0 auto}
.who-label::after{content:"";flex:1;height:1px;background:var(--gray-300)}
.who-group--buy .who-label i{background:var(--red)}
.who{display:flex;flex-direction:column;padding:22px 22px 24px}
.who__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.who .ico{width:42px;height:42px;margin:0;flex:0 0 auto;border-radius:10px}
.who .ico svg{width:22px;height:22px}
.who h3{font-size:1.04rem;line-height:1.2;margin:0}
.who p{font-size:.93rem}
.who-group--buy .who .ico{background:rgba(179,25,66,.1);color:var(--red)}
.who-group--buy .who:hover{border-color:var(--red)}
.who-group--buy .who:hover .ico{background:var(--red);color:#fff}
.who-group--build .who:hover .ico{background:var(--blue);color:#fff}

/* ---------- Coverage ---------- */
.cov{position:relative;overflow:hidden}
.cov::before{content:"";position:absolute;width:900px;height:900px;right:-220px;top:50%;transform:translateY(-58%);background:radial-gradient(circle,rgba(30,111,217,.2),rgba(30,111,217,0) 62%);pointer-events:none}
.cov .container{position:relative;z-index:1}
.cov__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.cov__text h2{margin-bottom:14px}
.cov__text .lead{margin-bottom:26px}
.cov__label{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#9fb4d4;margin:0 0 12px}
.cov__label i{width:9px;height:9px;border-radius:50%;background:#7ED957;box-shadow:0 0 0 3px rgba(126,217,87,.22)}
.cov__chips{list-style:none;gap:8px}
.cov .chip{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;padding:7px 13px;transition:border-color .18s ease,background-color .18s ease}
.cov .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:#7ED957;flex:0 0 auto}
.cov .chip:hover{border-color:rgba(126,217,87,.6);background:rgba(126,217,87,.08)}
.cov__map{margin:0}
.cov__canvas{position:relative}
.cov__canvas img{width:100%;height:auto}
.pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.pin i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#7ED957;box-shadow:0 0 0 3px rgba(126,217,87,.25),0 0 16px rgba(126,217,87,.65)}
.pin i::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(126,217,87,.7);opacity:0;animation:cov-pulse 3.2s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes cov-pulse{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(3);opacity:0}}
.pin b{position:absolute;left:13px;top:-12px;white-space:nowrap;font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.02em;line-height:1.3;color:#fff;background:rgba(11,31,58,.9);border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:3px 8px}
.pin--l b{left:auto;right:13px}
.pin--t b{left:0;top:-36px;transform:translateX(-50%)}
.cov__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:18px;font-size:.82rem;color:#9fb4d4}
.cov__legend span{display:inline-flex;align-items:center;gap:8px}
.cov__key{display:inline-block;border-radius:50%}
.cov__key--dot{width:7px;height:7px;background:rgba(159,180,212,.6)}
.cov__key--pin{width:10px;height:10px;background:#7ED957;box-shadow:0 0 0 3px rgba(126,217,87,.22)}
.cov__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.cov__stat{position:relative;padding:30px 26px 28px}
.cov__stat+.cov__stat{border-left:1px solid rgba(255,255,255,.1)}
.cov__stat::before{content:"";position:absolute;left:26px;top:-1px;width:38px;height:3px;border-radius:0 0 3px 3px;background:#7ED957}
.cov__num{font-family:var(--font-head);font-weight:800;font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;letter-spacing:-.03em;color:#fff}
.cov__num small{font-size:.62em;color:#7ED957;margin-left:2px;letter-spacing:0}
.cov__lbl{font-family:var(--font-head);font-weight:700;font-size:.98rem;color:#fff;margin-top:12px}
.cov__sub{font-size:.86rem;color:#9fb4d4;margin-top:4px;line-height:1.45}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .cap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .cap__body{padding:40px 36px}
  .cov__grid{grid-template-columns:1fr;gap:36px}
  .cov__map{max-width:680px;margin:0 auto;width:100%}
  .cov__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cov__stat:nth-child(3){border-left:0}
  .cov__stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
}
@media(max-width:760px){
  .cap-sec{padding:4px 0 60px}
  .cap{grid-template-columns:1fr}
  .cap__stage{padding:36px 24px 60px}
  .cap__doc{width:min(210px,62%)}
  .cap__body{padding:30px 22px 32px}
  .cap__body .btn-row .btn{flex:1 1 100%}
  .who-group+.who-group{margin-top:28px}
  .cov__stats{margin-top:40px}
  .cov__stat{padding:24px 18px 22px}
  .cov__stat::before{left:18px}
}
@media(max-width:640px){
  .pin b{display:none}
  .pin i{left:-5px;top:-5px;width:10px;height:10px}
}
@media(max-width:520px){
  .cap__ids{grid-template-columns:1fr;gap:8px}
  .cap__ids div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 14px}
  .cap__ids dt{margin:0}
  .cap__ids dd{font-size:.98rem;text-align:right}
  .cov__num{font-size:2.2rem}
  .cov__lbl{font-size:.92rem}
  .cov__sub{font-size:.8rem}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .pin i::after{animation:none}
  .inst .card,.who,.why .card,.cap__doc,.inst .card::before,.who::before,.cov .chip{transition:none}
  .inst .card:hover,.who:hover,.why .card:hover{transform:none}
  .cap__doc:hover{transform:rotate(-3deg)}
}