/* ============================================================
   Midpoint Xpress LLC — midpointxpress.com
   Brand: α Position — amber #F5A623 / slate #0F172A
   Fonts self-hosted: zero third-party requests, zero cookies.
   ============================================================ */

/* ---------- self-hosted fonts ---------- */
@font-face{font-family:'Anton';src:url('fonts/Anton-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('fonts/Barlow-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('fonts/Barlow-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('fonts/Barlow-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('fonts/BarlowCondensed-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('fonts/BarlowCondensed-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('fonts/BarlowCondensed-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}

:root{
  --amber:#F5A623; --amber-hi:#FFC24D; --amber-deep:#B9791A;
  --slate:#0B1220; --slate-2:#111C31; --slate-3:#1B2942;
  --ink:#334155; --muted:#94A3B8; --line:#E2E8F0; --tint:#F7F9FC; --white:#FFFFFF;
  --disp:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --wrap:1180px; --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,svg{max-width:100%;}
a{color:inherit;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px;position:relative;z-index:2;}

/* ---------- type ---------- */
h1,h2,h3{margin:0;line-height:1.05;color:var(--slate);}
h1{font-family:'Anton',var(--disp);font-weight:400;font-size:clamp(46px,7.6vw,88px);letter-spacing:-1px;}
h2{font-family:var(--disp);font-weight:800;font-size:clamp(30px,3.8vw,46px);letter-spacing:.2px;}
h3{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.3px;}
p{margin:0 0 16px;}
.lede{font-size:19.5px;}
.eyebrow{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber);margin-bottom:16px;display:flex;align-items:center;gap:11px;}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--amber);flex:0 0 auto;}
.center .eyebrow{justify-content:center;}
.rule{width:58px;height:3px;background:var(--amber);border-radius:2px;margin:18px 0 26px;}
.center{text-align:center;} .center .rule{margin-left:auto;margin-right:auto;}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease),transform .75s var(--ease);}
.rv.in{opacity:1;transform:none;}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}
.rv-d4{transition-delay:.28s}.rv-d5{transition-delay:.35s}

/* ---------- header + HTML logo lockup ---------- */
header{background:rgba(11,18,32,.94);backdrop-filter:blur(12px);position:sticky;top:0;z-index:60;
  border-bottom:1px solid rgba(255,255,255,.08);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px 26px;max-width:var(--wrap);margin:0 auto;}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0;}
.brand .mark{
  font-family:'Anton',var(--disp);font-style:italic;font-size:38px;line-height:.86;
  color:var(--white);letter-spacing:-1.5px;position:relative;padding-right:3px;
}
.brand .mark em{font-style:italic;color:var(--amber);}
.brand .mark::after{
  content:"";position:absolute;right:0;bottom:-5px;width:100%;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(245,166,35,.75));
}
.brand .wm{display:flex;flex-direction:column;line-height:1;}
.brand .wm b{
  font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--white);white-space:nowrap;
}
.brand .wm small{
  font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--amber);margin-top:5px;
}
.nav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0;align-items:center;}
.nav a.lnk{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:.07em;
  text-transform:uppercase;color:#CBD5E1;text-decoration:none;padding:6px 0;position:relative;}
.nav a.lnk::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--amber);transition:right .3s var(--ease);}
.nav a.lnk:hover{color:var(--white);}
.nav a.lnk:hover::after,.nav a.lnk[aria-current="page"]::after{right:0;}
.nav a.lnk[aria-current="page"]{color:var(--white);}
.btn{display:inline-block;font-family:var(--disp);font-weight:700;font-size:15px;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:13px 26px;
  border-radius:10px;transition:transform .2s var(--ease),background .2s,box-shadow .2s;cursor:pointer;border:0;}
.btn-amber{background:var(--amber);color:var(--slate);box-shadow:0 4px 16px rgba(245,166,35,.24);}
.btn-amber:hover{background:var(--amber-hi);transform:translateY(-2px);box-shadow:0 9px 24px rgba(245,166,35,.34);}
/* Ghost button. Was defined white-on-white, which is correct on the dark grounds it
   normally sits on but made it INVISIBLE on contact.html, where it sits on a white
   section - "Email instead" only appeared on hover. Default is now the light-ground
   version; the dark contexts override it. */
.btn-ghost{background:transparent;color:var(--slate);border:1.5px solid rgba(11,18,32,.24);}
/* hover keeps the dark text: amber-on-white is only 3.61:1, under the 4.5 a 14px
   button needs. The border carries the affordance instead. */
.btn-ghost:hover{border-color:var(--amber);color:var(--slate);
  background:rgba(245,166,35,.09);transform:translateY(-2px);}
.hero .btn-ghost,.ctaband .btn-ghost,.pagehead .btn-ghost,section.dark .btn-ghost{
  color:var(--white);border-color:rgba(255,255,255,.28);}
.hero .btn-ghost:hover,.ctaband .btn-ghost:hover,.pagehead .btn-ghost:hover,
section.dark .btn-ghost:hover{border-color:var(--amber);color:var(--amber);}
.btn-dark{background:var(--slate);color:var(--white);}
.btn-dark:hover{background:var(--slate-3);transform:translateY(-2px);}
.navtoggle{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;padding:4px 8px;}

/* ---------- hero ---------- */
.hero{background:var(--slate);color:var(--white);position:relative;overflow:hidden;
  padding:104px 0 96px;isolation:isolate;}
#routes{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(780px 420px at 84% -10%, rgba(245,166,35,.20), transparent 62%),
    radial-gradient(640px 360px at 6% 110%, rgba(58,160,230,.10), transparent 64%);}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(245,166,35,.6),transparent);}
.hero h1{color:var(--white);max-width:13ch;}
.hero h1 em{font-style:normal;color:var(--amber);}
.hero .sub{font-size:20.5px;color:#CBD5E1;max-width:56ch;margin:26px 0 36px;}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;}
.herometa{display:flex;gap:30px;flex-wrap:wrap;margin-top:56px;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.1);}
.herometa div{min-width:100px;}
.herometa b{display:block;font-family:'Anton',var(--disp);font-weight:400;font-size:28px;
  color:var(--amber);line-height:1;letter-spacing:.5px;}
.herometa span{display:block;font-family:var(--disp);font-weight:600;font-size:12.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:8px;}

/* ---------- trust ---------- */
.trust{background:var(--slate-2);border-top:1px solid rgba(255,255,255,.07);padding:20px 0;}
.trust ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 42px;}
.trust li{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;color:#CBD5E1;display:flex;align-items:center;gap:9px;}
.trust li::before{content:"";width:6px;height:6px;background:var(--amber);border-radius:1px;flex:0 0 auto;}

/* ---------- sections ---------- */
section{padding:90px 0;position:relative;}
section.tinted{background:var(--tint);}
section.dark{background:var(--slate);color:#CBD5E1;}
section.dark h2,section.dark h3{color:var(--white);}
section.dark .lede{color:#CBD5E1;}
section.dark::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:26px 26px;}
.shead{max-width:64ch;margin-bottom:44px;}
.shead.center{margin-left:auto;margin-right:auto;}

/* ---------- cards ---------- */
.grid{display:grid;gap:18px;}
.g4{grid-template-columns:repeat(4,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 26px;position:relative;overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);}
.card::before{content:"";position:absolute;top:0;left:0;width:0;height:3px;
  background:var(--amber);transition:width .45s var(--ease);}
.card:hover{border-color:#CBD5E1;transform:translateY(-5px);box-shadow:0 18px 40px rgba(11,18,32,.11);}
.card:hover::before{width:100%;}
.card .ico{color:var(--amber);margin-bottom:17px;display:block;transition:transform .35s var(--ease);}
.card:hover .ico{transform:translateY(-3px) scale(1.07);}
.card h3{margin-bottom:9px;}
.card p{font-size:15.5px;margin:0;line-height:1.62;}
section.dark .card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.1);}
section.dark .card p{color:#94A3B8;}
section.dark .card:hover{border-color:rgba(245,166,35,.45);box-shadow:0 18px 40px rgba(0,0,0,.34);}

.ind{display:flex;align-items:center;gap:14px;padding:19px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .25s var(--ease),transform .25s var(--ease);}
.ind:hover{border-color:var(--amber);transform:translateX(4px);}
.ind .ico{color:var(--amber);flex:0 0 auto;}
.ind b{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--slate);letter-spacing:.2px;display:block;}
.ind span{font-size:14px;color:var(--muted);line-height:1.45;display:block;}

/* ---------- coverage: radial ops diagram ---------- */
.covwrap{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center;}
.covlist{list-style:none;margin:22px 0 0;padding:0;}
.covlist li{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;}
.covlist li b{font-family:var(--disp);font-weight:700;color:var(--slate);min-width:118px;letter-spacing:.2px;}
/* the coverage list sits in a .dark section: the light-theme label colour and
   border are invisible / wrong there, so restate both. */
section.dark .covlist li{border-bottom-color:rgba(255,255,255,.09);}
section.dark .covlist li b{color:var(--amber);}
section.dark .covlist li span{color:#CBD5E1;}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:18px;}
.step{position:relative;padding:0 24px;}
.step:not(:last-child)::after{content:"";position:absolute;top:22px;right:0;width:100%;height:1.5px;
  background:linear-gradient(90deg,var(--amber),rgba(245,166,35,.12));z-index:0;}
.step .n{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;
  background:var(--amber);color:var(--slate);display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:800;font-size:17px;margin-bottom:20px;
  box-shadow:0 0 0 7px rgba(245,166,35,.11);}
.step h3{margin-bottom:8px;} .step p{font-size:15px;margin:0;}
section.dark .step p{color:#94A3B8;}

/* ---------- faq ---------- */
.faq{max-width:860px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;list-style:none;padding:22px 46px 22px 0;position:relative;
  font-family:var(--disp);font-weight:700;font-size:20px;color:var(--slate);letter-spacing:.2px;transition:color .2s;}
.faq summary:hover{color:var(--amber-deep);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:2px;
  background:var(--amber);transform:translateY(-50%);}
.faq summary::before{content:"";position:absolute;right:14px;top:50%;width:2px;height:14px;
  background:var(--amber);transform:translateY(-50%);transition:transform .32s var(--ease);}
.faq details[open] summary::before{transform:translateY(-50%) rotate(90deg);}
.faq details p{padding:0 0 24px;margin:0;font-size:16px;max-width:78ch;}

/* ---------- misc ---------- */
.qstrip{text-align:center;max-width:800px;margin:0 auto;}
.qstrip p{color:#CBD5E1;font-size:18.5px;}
.cta-band{background:var(--tint);border-top:1px solid var(--line);text-align:center;padding:80px 0;}
.cta-band p{max-width:52ch;margin:0 auto 30px;font-size:18px;}

footer{background:var(--slate);color:var(--muted);padding:60px 0 30px;font-size:15px;position:relative;}
footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;}
footer h4{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--white);margin:0 0 16px;}
footer a{color:var(--muted);text-decoration:none;transition:color .2s;}
footer a:hover{color:var(--amber);}
footer ul{list-style:none;margin:0;padding:0;} footer li{margin-bottom:10px;}
footer .brand{margin-bottom:16px;}
.legal{border-top:1px solid rgba(255,255,255,.09);margin-top:42px;padding-top:22px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px;color:#64748B;}
.legal a{color:#64748B;}

.cbox{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:34px;}
.cbox a.mail{font-family:var(--disp);font-weight:700;font-size:22px;color:var(--slate);
  text-decoration:none;border-bottom:2px solid var(--amber);}
.cbox a.mail:hover{color:var(--amber);}
.addr{font-style:normal;line-height:1.8;}
.spec{list-style:none;margin:0;padding:0;}
.spec li{position:relative;padding-left:24px;margin-bottom:11px;font-size:16px;}
.spec li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--amber);border-radius:1px;}
.kv{width:100%;border-collapse:collapse;}
.kv td{padding:13px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:16px;}
.kv td:first-child{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);width:42%;padding-right:20px;}
.note{font-size:14px;color:var(--muted);line-height:1.6;}
.prose{max-width:78ch;} .prose h2{margin:40px 0 14px;} .prose h3{margin:28px 0 10px;}
.prose ul{padding-left:20px;} .prose li{margin-bottom:9px;}

/* ---------- cookie / privacy notice ---------- */
.cookie{position:fixed;left:18px;right:18px;bottom:18px;z-index:90;max-width:660px;margin:0 auto;
  background:var(--slate);color:#CBD5E1;border:1px solid rgba(245,166,35,.35);border-radius:var(--r);
  padding:20px 22px;box-shadow:0 20px 50px rgba(0,0,0,.4);
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  transform:translateY(140%);transition:transform .5s var(--ease);}
.cookie.show{transform:none;}
.cookie p{margin:0;font-size:14.5px;flex:1 1 320px;line-height:1.55;}
.cookie a{color:var(--amber);}
.cookie .btn{padding:10px 20px;font-size:14px;}

@media (max-width:1000px){
  .g4{grid-template-columns:repeat(2,1fr);}
  .covwrap{grid-template-columns:1fr;gap:40px;}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px 0;}
  .step:nth-child(2)::after{display:none;}
  footer .cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  body{font-size:16px;} section{padding:60px 0;} .hero{padding:66px 0 58px;}
  .brand .mark{font-size:32px;} .brand .wm b{font-size:16px;} .brand .wm small{font-size:9.5px;}
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--slate-2);
    flex-direction:column;gap:0;padding:10px 26px 22px;border-bottom:1px solid rgba(255,255,255,.1);}
  .nav ul.open{display:flex;} .nav ul li{width:100%;}
  .nav a.lnk{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);}
  .nav .btn{margin-top:14px;text-align:center;}
  .navtoggle{display:block;}
  .g4,.g3,.g2,.steps,footer .cols{grid-template-columns:1fr;}
  .step:not(:last-child)::after{display:none;}
  .trust ul{gap:12px 22px;} .trust li{font-size:13.5px;}
  .herometa{gap:22px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;transition:none;}
  .lane,.halo{animation:none;}
  *{transition-duration:.01ms !important;}
}

/* ============================================================
   HERO VISUAL — framed product device + floating proof cards
   ============================================================ */
.herogrid{display:grid;grid-template-columns:1fr;gap:52px;align-items:center;}
@media(min-width:1040px){
  .herogrid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:60px;}
  .hero h1{max-width:none;}
  .hero .sub{margin-bottom:34px;}
}

.herovis{position:relative;isolation:isolate;}
/* soft brand glow behind the device */
.herovis::before{content:"";position:absolute;inset:-12% -8% -8%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 62% 34%, rgba(245,166,35,.22), transparent 70%);
  filter:blur(6px);}

.device{position:relative;z-index:1;border-radius:20px;padding:14px;
  background:linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 32px 70px -28px rgba(0,0,0,.75), 0 2px 0 rgba(255,255,255,.07) inset;
  backdrop-filter:blur(2px);}
.device-in{border-radius:12px;overflow:hidden;background:var(--slate-2);
  border:1px solid rgba(255,255,255,.07);}

/* app chrome */
.dev-top{display:flex;align-items:center;gap:10px;padding:11px 14px;
  background:linear-gradient(180deg,var(--slate-3),var(--slate-2));
  border-bottom:1px solid rgba(255,255,255,.07);}
.dev-top .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none;
  box-shadow:0 0 0 3px rgba(245,166,35,.18);}
.dev-top .t{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#E2E8F0;}
.dev-top .r{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  color:var(--muted);letter-spacing:.04em;}

.dev-body{padding:16px 15px 17px;}
.dev-jn{display:flex;align-items:baseline;gap:9px;margin-bottom:14px;}
.dev-jn b{font-family:'Anton',var(--disp);font-weight:400;font-size:22px;color:var(--white);
  letter-spacing:.6px;line-height:1;}
.dev-jn .pill{font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;
  background:rgba(245,166,35,.16);color:var(--amber-hi);border:1px solid rgba(245,166,35,.32);}

/* route device — echoes the dispatch app's horizontal chain */
.dev-route{display:flex;align-items:center;gap:0;margin:2px 0 16px;}
.dev-route .st{flex:1;position:relative;text-align:center;}
.dev-route .st i{display:block;width:11px;height:11px;border-radius:50%;margin:0 auto 7px;
  background:var(--slate-3);border:2px solid rgba(255,255,255,.22);}
.dev-route .st.on i{background:var(--amber);border-color:var(--amber);
  box-shadow:0 0 0 4px rgba(245,166,35,.16);}
.dev-route .st.now i{background:var(--white);border-color:var(--amber);}
.dev-route .st span{font-family:var(--disp);font-weight:600;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);}
.dev-route .st.on span{color:#E2E8F0;}
.dev-route .st::after{content:"";position:absolute;top:5px;left:50%;width:100%;height:2px;
  background:rgba(255,255,255,.12);z-index:-1;}
.dev-route .st:last-child::after{display:none;}
.dev-route .st.on::after{background:var(--amber);}

.dev-leg{display:flex;gap:11px;padding:11px 0;border-top:1px solid rgba(255,255,255,.07);}
.dev-leg .k{font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--amber);width:52px;flex:none;padding-top:2px;}
.dev-leg .v{font-size:13.5px;color:#CBD5E1;line-height:1.42;}
.dev-leg .v small{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  color:var(--muted);margin-top:3px;letter-spacing:.02em;}

.dev-foot{display:flex;gap:8px;margin-top:13px;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.07);}
.dev-foot span{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#94A3B8;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 4px;}
.dev-foot span svg{width:13px;height:13px;flex:none;color:var(--amber);}

/* floating proof cards */
.fcard{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.96);color:var(--slate);border-radius:12px;
  padding:10px 13px;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.7);}
.fcard .fi{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:rgba(245,166,35,.16);color:var(--amber-deep);}
.fcard .fi svg{width:17px;height:17px;}
.fcard b{display:block;font-family:var(--disp);font-weight:700;font-size:13px;
  letter-spacing:.03em;line-height:1.15;color:var(--slate);}
.fcard span{display:block;font-size:11.5px;color:#64748B;margin-top:1px;line-height:1.2;}
.fcard.f1{top:-44px;left:-34px;}
.fcard.f2{top:46%;right:-34px;}
.fcard.f3{bottom:-42px;left:-26px;}
@media(max-width:1039px){
  .fcard.f1{top:-16px;left:-10px;} .fcard.f2{right:-10px;} .fcard.f3{bottom:-16px;left:-6px;}
}
@media(max-width:560px){
  .fcard{padding:8px 10px;gap:8px;}
  .fcard .fi{width:26px;height:26px;border-radius:7px;}
  .fcard .fi svg{width:14px;height:14px;}
  .fcard b{font-size:11.5px;} .fcard span{font-size:10px;}
  .fcard.f1{left:-2px;top:-14px;} .fcard.f2{right:-2px;} .fcard.f3{left:0;bottom:-14px;}
}
/* keep the hero stat row balanced (2x2) once the column narrows */
@media(min-width:1040px){
  .herometa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 30px;}
}

/* gentle float — disabled for reduced motion */
@media(prefers-reduced-motion:no-preference){
  .fcard{animation:bob 7s var(--ease) infinite;}
  .fcard.f2{animation-delay:-2.4s;}
  .fcard.f3{animation-delay:-4.7s;}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
}

/* ============================================================
   FIGURE / PHOTO SYSTEM
   Drop-in slot for photography. Renders a branded placeholder
   until a real file exists, so layout never collapses.
   ============================================================ */
.fig{position:relative;display:block;overflow:hidden;border-radius:var(--r);
  background:var(--slate-2);isolation:isolate;}
.fig::before{content:"";display:block;padding-top:var(--ar,66.66%);}
.fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;z-index:1;}
/* branded scrim so any photo reads as MPX, not as generic stock */
.fig.tinted:has(img)::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(155deg, rgba(11,18,32,.58), rgba(11,18,32,.16) 46%,
    rgba(245,166,35,.20));mix-blend-mode:multiply;}
.fig.tinted img{filter:saturate(.86) contrast(1.05);}
/* placeholder pattern shown when no <img> has loaded */
.fig .ph{position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  background:
    linear-gradient(150deg, var(--slate-3), var(--slate-2)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px);
  background-blend-mode:overlay;}
.fig .ph span{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.30);}
.fig figcaption,.figcap{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.5;}
.fig.ar-wide{--ar:56.25%;}   /* 16:9 */
.fig.ar-sq{--ar:100%;}
.fig.ar-tall{--ar:125%;}

/* ---------- media band: figure + statement ---------- */
.band{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;}
@media(min-width:900px){
  .band{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;}
  .band.rev>.fig,.band.rev>figure{order:2;}
}
.band .shead{margin-bottom:20px;}
.band ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;}
.band ul li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.55;}
.band ul li::before{content:"";position:absolute;left:2px;top:8px;width:9px;height:9px;
  border-radius:2px;background:var(--amber);transform:rotate(45deg);}
.dark .band ul li{color:#CBD5E1;}

/* ---------- full-bleed photo backdrop + closing CTA ---------- */
.bgimg{position:absolute;inset:0;z-index:0;display:block;}
.bgimg img{width:100%;height:100%;object-fit:cover;display:block;}

.ctaband{position:relative;isolation:isolate;overflow:hidden;background:var(--slate);
  color:var(--white);padding:104px 0;}
/* scrim: keeps text AA-legible over any frame of the photo and pulls it to brand */
.ctaband::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, rgba(11,18,32,.94) 0%, rgba(11,18,32,.82) 42%,
    rgba(11,18,32,.55) 72%, rgba(245,166,35,.20) 100%);}
.ctaband>.wrap{position:relative;z-index:2;}
.ctaband .ctainner{max-width:60ch;}
.ctaband h2{color:var(--white);margin-bottom:16px;}
.ctaband p{color:#CBD5E1;font-size:17px;margin-bottom:30px;}
.ctaband .cta{display:flex;gap:14px;flex-wrap:wrap;}
@media(max-width:700px){.ctaband{padding:76px 0;}}

/* ---------- interior page header ---------- */
.pagehead{background:var(--slate);color:var(--white);padding:88px 0 72px;position:relative;
  overflow:hidden;isolation:isolate;}
.pagehead::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(720px 380px at 88% -20%, rgba(245,166,35,.20), transparent 62%),
    radial-gradient(560px 320px at 2% 120%, rgba(58,160,230,.10), transparent 64%);}
.pagehead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(245,166,35,.6),transparent);}
.pagehead>.wrap{position:relative;z-index:1;}
.pagehead h1{color:var(--white);max-width:18ch;font-size:clamp(38px,5.4vw,62px);}
.pagehead .lede{color:#CBD5E1;max-width:60ch;margin-top:22px;}
.nav .lnk.on{color:var(--amber);}

/* ---------- forms ---------- */
.frm{margin:0;}
.f2{display:grid;grid-template-columns:1fr;gap:0 22px;}
@media(min-width:620px){.f2{grid-template-columns:1fr 1fr;}}
.fld{margin:0 0 20px;display:block;}
.fld label{display:block;font-family:var(--disp);font-weight:700;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:7px;}
.fld .req{color:var(--red,#C0392B);margin-left:2px;}
.fld input,.fld select,.fld textarea{
  width:100%;font-family:var(--body);font-size:15.5px;color:var(--slate);
  background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:12px 13px;min-height:46px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
.fld textarea{min-height:132px;resize:vertical;line-height:1.55;}
.fld select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px;}
.fld input::placeholder,.fld textarea::placeholder{color:#9AA7B8;}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:#C3CEDC;}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,166,35,.26);}
.fld small{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);line-height:1.45;}
.tinted .fld input,.tinted .fld select,.tinted .fld textarea{background:var(--white);}

/* honeypot — off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

button.btn{font:inherit;cursor:pointer;border:none;}
button.btn[disabled]{opacity:.6;cursor:progress;}

/* form outcome banner */
.fmsg{margin:0 0 26px;padding:15px 17px;border-radius:12px;font-size:15px;line-height:1.55;
  border:1px solid transparent;}
.fmsg.ok{background:rgba(22,143,90,.09);border-color:rgba(22,143,90,.34);color:#0F5132;}
.fmsg.bad{background:rgba(192,57,43,.08);border-color:rgba(192,57,43,.34);color:#8A2418;}
.fmsg:empty{display:none;}

/* ---------- Mid-Atlantic service-area map ----------
   Inline SVG, drawn from Natural Earth 1:50m boundary data (public domain) and
   projected offline by Website/tools — no tile provider, so the page keeps its
   zero third-party requests and costs nothing to serve.                        */
.mapfig{margin:0;}
.mapsvg{display:block;width:100%;height:auto;}
.mapfig figcaption{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--muted);}

.water{fill:#08101F}
.grat line{stroke:rgba(148,180,235,.055);stroke-width:1}
.near path{fill:#111C31;stroke:rgba(148,163,184,.20);stroke-width:1.2}
.corefill path{fill:rgba(245,166,35,.075);stroke:none}
.coreline path{fill:none;stroke:rgba(245,166,35,.62);stroke-width:1.4;stroke-linejoin:round}
.vign{fill:url(#vign);pointer-events:none}
.frame{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1}
.c-dot{fill:#93A3B8}
.a-dot{fill:#F5A623}
.a-ring{fill:none;stroke:rgba(245,166,35,.38);stroke-width:1.4}
.b-dot{fill:#fff;stroke:#F5A623;stroke-width:3.2}
.b-halo{fill:rgba(245,166,35,.14);stroke:rgba(245,166,35,.5);stroke-width:1.4}
.lead{stroke:rgba(245,166,35,.6);stroke-width:1.2;fill:none}
.c-lbl{font:600 15px 'Barlow Condensed',sans-serif;fill:#93A3B8;letter-spacing:.1em}
.a-lbl{font:700 16px 'Barlow Condensed',sans-serif;fill:#EDF2F8;letter-spacing:.12em}
.b-lbl{font:700 16.5px 'Barlow Condensed',sans-serif;fill:#FFC24D;letter-spacing:.14em}
.b-sub{font:600 12.5px 'Barlow Condensed',sans-serif;fill:#94A3B8;letter-spacing:.14em}
.c-lbl,.a-lbl,.b-lbl,.b-sub{paint-order:stroke fill;stroke:#08101F;stroke-width:3.5px;
  stroke-linejoin:round;stroke-linecap:round}
/* The SVG scales with the column, so at phone widths its labels fall to ~6px.
   Bump the type and marker geometry in viewBox units to claw that back.
   (r as a CSS property on SVG circles is a standard geometry property.)      */
@media(max-width:820px){
  .c-lbl{font-size:27px;letter-spacing:.06em}
  .a-lbl{font-size:29px}
  .b-lbl{font-size:29px}
  .b-sub{font-size:23px;transform:translateY(19px)}   /* clear the line above at this size */
  .c-lbl,.a-lbl,.b-lbl,.b-sub{stroke-width:6px}
  .c-dot{r:6px} .a-dot{r:7px} .b-dot{r:9px}
  .a-ring{r:13px;stroke-width:2.4px} .b-halo{r:20px;stroke-width:2.4px}
  .lead{stroke-width:2.2px}
  .near path{stroke-width:2px} .coreline path{stroke-width:2.4px}
}

/* ---------- position statement ----------
   Replaced a scrolling category marquee, removed 2026-08-29. Once the Industries cards
   carried photographs the two lists were the same content twice, and a marquee restating
   what you say below reads as filler. Only the two claims were worth keeping.        */
.claimbar{background:var(--slate-2);border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);padding:26px 0;text-align:center;}
.claim-a{margin:0;font-family:var(--disp);font-weight:700;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.claim-b{margin:7px auto 0;max-width:58ch;font-family:var(--disp);font-weight:700;
  font-size:13px;letter-spacing:.17em;text-transform:uppercase;color:var(--amber);
  line-height:1.5;}

/* ---------- driver-app phone, recreated ----------
   Faithful to the real MPX Driver standby screen, rebuilt in HTML/CSS rather than
   screenshotted: the real screen carries a driver's name twice and their personal
   photo. Rebuilt as a SYSTEM view - MPX monogram instead of a face, unit number
   instead of a name - so nothing personal is published.

   Layout follows the real app: CENTRED identity block with a large avatar. An
   earlier pass compressed it into a left-aligned row and crammed two status pills
   against the title, which is what made it look cramped next to the real thing.   */
.phone{position:relative;width:min(356px,88vw);margin:0 auto;border-radius:38px;padding:10px;
  background:linear-gradient(160deg,#26324a,#141d2e);
  box-shadow:0 34px 70px -26px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.09) inset;}
.phone-scr{border-radius:29px;overflow:hidden;background:#0A0F1A;}

.ph-top{display:flex;align-items:center;gap:11px;padding:15px 17px;background:#111C31;
  border-bottom:2px solid var(--amber);}
.ph-bars{display:flex;flex-direction:column;gap:2px;flex:none;}
.ph-bars i{display:block;width:6px;height:6px;background:var(--amber);border-radius:1px;}
.ph-top .who{min-width:0;}
.ph-top b{font-family:var(--disp);font-weight:700;font-size:19px;color:#fff;line-height:1.05;
  white-space:nowrap;}
.ph-top small{display:block;font-size:11.5px;color:var(--muted);letter-spacing:.05em;margin-top:1px;}
.ph-live{margin-left:auto;flex:none;font-family:var(--disp);font-weight:700;font-size:10.5px;
  letter-spacing:.12em;padding:6px 13px;border-radius:99px;
  border:1px solid rgba(52,211,153,.55);color:#34D399;}

.ph-body{padding:22px 17px 20px;}
/* centred identity, as in the real app */
.ph-id{text-align:center;margin-bottom:18px;}
.ph-av{width:74px;height:74px;margin:0 auto 13px;border-radius:50%;display:grid;place-items:center;
  background:rgba(245,166,35,.13);border:3px solid var(--amber);
  box-shadow:0 0 0 6px rgba(245,166,35,.07);
  font-family:'Anton',var(--disp);font-size:22px;color:var(--amber);letter-spacing:.5px;}
.ph-id b{display:block;font-family:'Anton',var(--disp);font-weight:400;font-size:27px;color:#fff;
  letter-spacing:.7px;line-height:1;}
.ph-id span{display:block;font-size:13.5px;color:var(--muted);margin-top:7px;}
.ph-chip{display:block;width:fit-content;margin:0 auto 18px;font-family:var(--disp);font-weight:700;
  font-size:11.5px;letter-spacing:.12em;padding:7px 15px;border-radius:99px;
  background:rgba(52,211,153,.10);border:1px solid rgba(52,211,153,.34);color:#34D399;}

.ph-stats{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:13px;}
.ph-stats div{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  border-radius:13px;padding:15px 10px;text-align:center;}
.ph-stats b{display:block;font-family:'Anton',var(--disp);font-weight:400;font-size:27px;
  color:#fff;line-height:1;}
.ph-stats span{display:block;font-family:var(--disp);font-weight:600;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:7px;}

.ph-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:18px;}
.ph-acts div{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  border-radius:13px;padding:14px 4px;text-align:center;}
.ph-acts svg{width:19px;height:19px;color:#CBD5E1;}
.ph-acts span{display:block;font-family:var(--disp);font-weight:700;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#94A3B8;margin-top:7px;}

.ph-lbl{font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 9px;}
.ph-job{display:flex;align-items:center;gap:10px;padding:11px 0;
  border-top:1px solid rgba(255,255,255,.07);font-size:13.5px;color:#CBD5E1;}
.ph-job i{width:7px;height:7px;border-radius:50%;background:#34D399;flex:none;}
.ph-job em{margin-left:auto;font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;color:var(--muted);}
.ph-sos{margin-top:17px;border:1px solid rgba(192,57,43,.5);background:rgba(192,57,43,.11);
  border-radius:13px;padding:13px;text-align:center;font-family:var(--disp);font-weight:700;
  font-size:12.5px;letter-spacing:.14em;color:#F87171;}

/* ---------- dispatcher dashboard, recreated ----------
   Rebuilt from the real launchpad, not screenshotted. The Brokers screen carries every
   client name AND their contracted rates, and the Drivers screen carries full names,
   mobile numbers and a photograph - neither can ever leave the business. The launchpad
   is the one screen that shows the system's breadth while carrying nothing sensitive.
   Tile figures show a working shift rather than the zeroes a late-evening capture
   happens to catch. BROKERS reads 7, matching the seven-network claim above.        */
.devices{position:relative;}
.brow{border-radius:13px;overflow:hidden;background:#0A0F1A;
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 30px 64px -26px rgba(0,0,0,.8);}
.brow-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#111C31;
  border-bottom:1px solid rgba(255,255,255,.08);}
.brow-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16);flex:none;}
.brow-bar span{margin-left:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;color:var(--muted);}
.brow-scr{padding:15px 15px 17px;}
.dash-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.dash-logo{font-family:'Anton',var(--disp);font-size:19px;color:#fff;letter-spacing:.4px;}
.dash-logo em{font-style:normal;color:var(--amber);}
.dash-chip{font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.14em;
  padding:4px 10px;border-radius:5px;background:rgba(255,255,255,.06);color:#94A3B8;
  border:1px solid rgba(255,255,255,.09);}
.dash-time{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;color:var(--muted);}
.dash-h{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.15em;
  text-transform:uppercase;color:#E2E8F0;margin-bottom:12px;}
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.dash-grid div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:9px;padding:11px 6px;text-align:center;}
.dash-grid small{display:block;font-family:var(--disp);font-weight:700;font-size:8px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);}
.dash-grid b{display:block;font-family:'Anton',var(--disp);font-weight:400;font-size:22px;
  color:#fff;line-height:1;margin:6px 0 5px;}
.dash-grid em{display:block;font-style:normal;font-family:var(--disp);font-weight:600;
  font-size:8px;letter-spacing:.11em;text-transform:uppercase;color:#64748B;}
.dash-grid div.hot b{color:var(--amber);}

/* the phone tucks into the dashboard's corner on wide screens, stacks below on narrow */
/* The phone is far taller than the dashboard is deep, so overlapping it onto the
   frame hides a whole column of tiles. It sits BELOW instead, right-aligned and
   tucked up under the bottom-right corner - staggered, nothing occluded.          */
@media(min-width:1040px){
  .devices .phone{position:relative;width:218px;margin:-24px 4px 0 auto;padding:7px;
    border-radius:26px;z-index:2;}
  /* at this size the full recent-jobs list makes the body ~1:2.7 - far longer than a
     real handset (~1:2.1) and it reads as a stretched slab. Trim the third row and
     tighten the vertical rhythm to bring the proportions back.                      */
  .devices .phone .ph-job3{display:none;}
  .devices .phone .phone-scr{border-radius:20px;}
  .devices .phone .ph-top{padding:9px 10px;gap:7px;}
  .devices .phone .ph-top b{font-size:12px;} .devices .phone .ph-top small{font-size:8px;}
  .devices .phone .ph-live{font-size:7px;padding:4px 8px;letter-spacing:.1em;}
  .devices .phone .ph-body{padding:12px 10px 11px;}
  .devices .phone .ph-av{width:40px;height:40px;font-size:12px;border-width:2px;margin-bottom:7px;}
  .devices .phone .ph-id b{font-size:16px;} .devices .phone .ph-id span{font-size:8.5px;margin-top:3px;}
  .devices .phone .ph-chip{font-size:7.5px;padding:4px 9px;margin-bottom:9px;}
  .devices .phone .ph-stats{gap:6px;margin-bottom:8px;}
  .devices .phone .ph-stats div{padding:8px 4px;border-radius:9px;}
  .devices .phone .ph-stats b{font-size:16px;} .devices .phone .ph-stats span{font-size:6.5px;margin-top:4px;}
  .devices .phone .ph-acts{gap:5px;margin-bottom:9px;}
  .devices .phone .ph-acts div{padding:8px 2px;border-radius:9px;}
  .devices .phone .ph-acts svg{width:13px;height:13px;}
  .devices .phone .ph-acts span{font-size:6px;margin-top:4px;}
  .devices .phone .ph-lbl{font-size:7px;margin-bottom:5px;}
  .devices .phone .ph-job{font-size:9px;padding:6px 0;gap:6px;}
  .devices .phone .ph-job i{width:5px;height:5px;}
  .devices .phone .ph-job em{font-size:7.5px;}
  .devices .phone .ph-sos{margin-top:9px;padding:8px;font-size:8px;border-radius:9px;}
}
@media(max-width:1039px){
  .devices .phone{margin-top:26px;}
}


/* ---------- service groups: eight cards in one grid gave the eye nothing to hold ---------- */
.svc-grp{display:block;margin:34px 0 16px;padding-top:20px;border-top:1px solid var(--line);}
.svc-grp:first-of-type{margin-top:26px;}
.svc-lbl{display:block;font-family:var(--disp);font-weight:700;font-size:19px;
  letter-spacing:.02em;color:var(--slate);}
.svc-sub{display:block;font-size:14px;color:var(--muted);margin-top:4px;}

/* ---------- industry cards with photographic backgrounds ----------
   Text sits ON the image, so every card carries a scrim heavy enough to hold white type
   at AA regardless of what the photograph is doing underneath. The image is atmosphere,
   never a claim: a laboratory does not mean MPX runs a laboratory, it means we carry for
   people who do. See media-src/CREDITS.md for the screening rules.                     */
.indcards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px;}
@media(max-width:1040px){.indcards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.indcards{grid-template-columns:1fr;}}

.indcard{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);
  min-height:186px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px 17px 17px;background:var(--slate-2);
  border:1px solid rgba(255,255,255,.09);
  transition:transform .22s var(--ease),border-color .22s var(--ease);}
.indcard:hover{transform:translateY(-3px);border-color:rgba(245,166,35,.5);}

.indcard picture,.indcard img{position:absolute;inset:0;z-index:0;}
.indcard img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.62) contrast(1.04);transition:transform .5s var(--ease);}
.indcard:hover img{transform:scale(1.045);}

/* two-stop scrim: near-opaque where the type sits, lighter at the top so the picture reads */
.indcard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(11,18,32,.34) 0%, rgba(11,18,32,.62) 42%,
    rgba(11,18,32,.90) 100%);}
.indcard>*{position:relative;z-index:2;}

.indcard .ico{width:22px;height:22px;color:var(--amber);margin-bottom:auto;}
.indcard b{display:block;font-family:var(--disp);font-weight:700;font-size:17px;
  letter-spacing:.02em;color:#fff;margin-top:14px;line-height:1.2;}
.indcard span{display:block;font-size:13px;line-height:1.45;color:#CBD5E1;margin-top:5px;}