/* ==========================================================================
   Matoshree Transport Company (MTC) — matoshreegrouppune.com
   Brand mark stays red (the MTC logo); the site accent is steel blue.
   Palette: steel blue + black + white.  Display: Oswald.  Body: Inter.
   To re-theme the whole site, change ONLY the --accent* block below.
   ========================================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* ---- accent: the one place the site's colour is decided ----------------
     --accent    on white / light panels        --accent-2  on near-black
     --accent-d  hover of a filled accent       *-rgb feed the rgba() tints
     Alternate cool set (deep teal), swap in as one block:
       --accent:#0a6d78; --accent-rgb:10,109,120;
       --accent-2:#3fc7d8; --accent-2-rgb:63,199,216;
       --accent-d:#065159; --accent-d-rgb:6,81,89;
  -------------------------------------------------------------------------*/
  --accent:#0d5fa8;    --accent-rgb:13,95,168;
  --accent-2:#45a6f5;  --accent-2-rgb:69,166,245;
  --accent-d:#094878;  --accent-d-rgb:9,72,120;
  --accent-soft:rgba(var(--accent-rgb),.10);
  /* true red is kept for validation errors only, so a failed field never
     reads as a brand flourish */
  --danger:#d92d20;    --danger-2:#ff7a6e;
  --ink:#0d0e11;  --ink-2:#171a1f;  --ink-3:#242830;
  --paper:#ffffff; --paper-2:#f5f6f8; --paper-3:#eaecf0;
  --line:#e2e5ea; --line-d:rgba(255,255,255,.12);
  --tx:#14161a;   --muted:#5c6169;  --muted-d:#a7adb7;
  --wrap:1220px;  --rad:6px;
  --shadow:0 2px 4px rgba(13,14,17,.04),0 12px 32px rgba(13,14,17,.08);
  --shadow-lg:0 8px 24px rgba(13,14,17,.10),0 32px 64px rgba(13,14,17,.14);
  --hdr:78px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 8px)}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.65; color:var(--tx); background:var(--paper);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.nav-open{overflow:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- display type ---------- */
h1,h2,h3,h4,.disp{font-family:'Oswald',Impact,'Arial Narrow',sans-serif;font-weight:600;
  line-height:1.06;letter-spacing:.005em;text-transform:uppercase}
h1{font-size:clamp(2.4rem,6.2vw,4.6rem);font-weight:700}
h2{font-size:clamp(1.85rem,4vw,3.05rem);font-weight:600}
h3{font-size:clamp(1.05rem,1.7vw,1.3rem);font-weight:600;letter-spacing:.02em}
p{overflow-wrap:break-word}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.6rem;border-radius:var(--rad);border:2px solid transparent;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:.94rem;letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),
             border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(var(--accent-rgb),.30)}
.btn-accent:hover{background:var(--accent-d);box-shadow:0 12px 28px rgba(var(--accent-rgb),.38)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-3)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-white{border-color:rgba(255,255,255,.55);color:#fff}
.btn-white:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-sm{padding:.62rem 1.05rem;font-size:.82rem}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:900;height:var(--hdr);
  background:linear-gradient(180deg,rgba(9,10,12,.62),rgba(9,10,12,.08));
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.hdr.solid{background:#fff;background-image:none;border-bottom-color:var(--line);box-shadow:0 2px 16px rgba(13,14,17,.07)}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}

.brand{display:flex;align-items:center;gap:.7rem;flex:none}
.brand img{height:46px;width:auto;aspect-ratio:600/543}
.brand .bt{line-height:1.12}
.brand .bt b{display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:1.02rem;
  letter-spacing:.045em;color:#fff;text-transform:uppercase;transition:color .3s var(--ease)}
.brand .bt i{display:block;font-style:normal;font-size:.605rem;letter-spacing:.19em;
  font-weight:600;color:var(--accent-2);text-transform:uppercase;margin-top:2px}
.hdr.solid .brand .bt b{color:var(--ink)}
.hdr.solid .brand .bt i{color:var(--accent)}
.brand .logo-d{display:none}
.hdr.solid .brand .logo-l{display:none}
.hdr.solid .brand .logo-d{display:block}

.nav{display:flex;align-items:center;gap:1.9rem}
.nav a{font-family:'Oswald',sans-serif;font-weight:400;font-size:.87rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.88);position:relative;padding:.35rem 0;
  transition:color .2s var(--ease)}
.hdr.solid .nav a{color:var(--tx)}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--accent);transition:right .28s var(--ease)}
.nav a:hover::after,.nav a.on::after{right:0}
.nav a:hover,.nav a.on{color:var(--accent-2)}
.hdr.solid .nav a:hover,.hdr.solid .nav a.on{color:var(--accent)}

.nav .nav-cta{display:none}
.hdr-cta{display:flex;align-items:center;gap:.6rem;flex:none}
.hdr-tel{display:flex;align-items:center;gap:.5rem;font-family:'Oswald',sans-serif;
  font-size:1.02rem;letter-spacing:.03em;color:#fff;transition:color .3s var(--ease)}
.hdr.solid .hdr-tel{color:var(--ink)}
.hdr-tel svg{width:17px;height:17px;color:var(--accent-2)}
.hdr.solid .hdr-tel svg{color:var(--accent)}
.hdr-tel:hover{color:var(--accent-2)}

/* Staff portal link — a utility, not a call to action.
   It lives at the end of the nav rather than in .hdr-cta: a third button there
   overflowed the header at 1100px and pushed "Get a Quote", the commercial CTA,
   off the right edge entirely. The lock mark and the lighter weight are what
   separate it from the marketing links either side of it, without giving it
   the visual weight of a button it does not deserve.

   The label is hidden on desktop and the lock stands alone. Measured, not
   guessed: with the word "Portal" in place, "Get a Quote" ended at 1141px in a
   1100px viewport - clipped - where without it the header ended at 1080px and
   fitted. The mobile menu is a full-height vertical list with room to spare, so
   the word comes back there.

   display and width carry !important because .nav a and the global
   "img,svg{max-width:100%}" both outrank a single class here, and without them
   the anchor blockifies and the icon collapses to 6px wide. */
.nav-login{display:inline-flex!important;align-items:center;gap:.4rem;white-space:nowrap;opacity:.78}
.nav-login:hover{opacity:1}
.nav-login svg{width:15px!important;height:15px;flex:none}
.nav-login span{display:none}

.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  align-items:center;justify-content:center;flex:none}
.burger span{display:block;position:relative;width:24px;height:2px;background:#fff;
  transition:background .2s var(--ease)}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:24px;height:2px;
  background:inherit;transition:transform .28s var(--ease),top .28s var(--ease)}
.burger span::before{top:-8px}.burger span::after{top:8px}
.hdr.solid .burger span{background:var(--ink)}
body.nav-open .burger span{background:transparent!important}
body.nav-open .burger span::before{top:0;transform:rotate(45deg);background:#fff}
body.nav-open .burger span::after{top:0;transform:rotate(-45deg);background:#fff}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,860px);display:flex;flex-direction:column;
  justify-content:flex-end;padding:calc(var(--hdr) + 4rem) 0 0;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:54% 52%}
.hero-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(9,10,12,.94) 0%,rgba(9,10,12,.80) 38%,rgba(9,10,12,.34) 72%,rgba(9,10,12,.55) 100%)}
.hero-glow{position:absolute;inset:auto auto -20% -12%;width:60vw;height:60vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.30),transparent 66%);z-index:1;pointer-events:none}
.hero-mark{position:absolute;right:-5%;top:46%;transform:translateY(-50%);
  width:min(50vw,620px);height:auto;z-index:1;pointer-events:none;user-select:none;
  opacity:.10;filter:brightness(0) invert(1)}
.hero .wrap{position:relative;z-index:2;flex:0 0 auto}
.hero-in{max-width:56rem;padding-bottom:3.2rem}
.tagline{display:inline-flex;align-items:center;gap:.7rem;font-family:'Oswald',sans-serif;
  font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:#fff;
  background:var(--accent);padding:.42rem .95rem;border-radius:3px;margin-bottom:1.3rem}
.hero h1{color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.45)}
.hero h1 em{font-style:normal;color:var(--accent-2)}
.hero-sub{color:rgba(255,255,255,.86);font-size:clamp(1rem,1.45vw,1.16rem);max-width:46rem;margin-top:1.25rem}
.hero-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.1rem}

.hero-stats{position:relative;z-index:2;background:rgba(13,14,17,.72);
  backdrop-filter:blur(10px);border-top:3px solid var(--accent)}
.hero-stats ul{display:grid;grid-template-columns:repeat(4,1fr)}
.hero-stats li{padding:1.5rem .9rem;text-align:center;border-left:1px solid rgba(255,255,255,.10)}
.hero-stats li:first-child{border-left:0}
.hero-stats b{display:block;font-family:'Oswald',sans-serif;font-weight:600;
  font-size:clamp(1.6rem,3.2vw,2.5rem);color:#fff;line-height:1}
.hero-stats span{display:block;font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted-d);margin-top:.42rem;font-weight:500}

/* ---------- section furniture ---------- */
.sec{padding:clamp(3.6rem,7vw,6.4rem) 0}
.sec-dark{background:var(--ink);color:#fff}
.sec-grey{background:var(--paper-2)}
.sec-head{max-width:52rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head.mid{margin-inline:auto;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:.65rem;font-family:'Oswald',sans-serif;
  font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);
  font-weight:500;margin-bottom:.85rem}
.kicker::before{content:'';width:26px;height:3px;background:var(--accent);transform:skewX(-24deg)}
.sec-dark .kicker{color:var(--accent-2)}
.sec-head p{color:var(--muted);margin-top:1rem;font-size:1.03rem}
.sec-dark .sec-head p{color:var(--muted-d)}
.sec-dark h2{color:#fff}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(2rem,5vw,4.2rem);align-items:center}
.about-media{position:relative}
.about-media img{width:100%;height:clamp(320px,42vw,520px);object-fit:cover;border-radius:var(--rad)}
.about-media .badge{position:absolute;right:-14px;bottom:-14px;background:var(--accent);color:#fff;
  padding:1.2rem 1.5rem;border-radius:var(--rad);box-shadow:var(--shadow-lg);text-align:center}
.about-media .badge b{display:block;font-family:'Oswald',sans-serif;font-size:2.4rem;line-height:1;font-weight:700}
.about-media .badge span{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;margin-top:.3rem}
.about-body>p{color:var(--muted);margin-bottom:1.05rem}
.about-body>p:first-of-type{font-size:1.1rem;color:var(--tx)}
.vals{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.9rem}
.val{background:var(--paper-2);border-left:3px solid var(--accent);border-radius:0 var(--rad) var(--rad) 0;padding:1rem 1.1rem}
.val b{display:block;font-family:'Oswald',sans-serif;font-size:.98rem;letter-spacing:.04em;text-transform:uppercase}
.val span{display:block;font-size:.86rem;color:var(--muted);margin-top:.15rem;line-height:1.5}

/* ---------- quote strip ---------- */
.quote{background:var(--accent);color:#fff;padding:clamp(2.4rem,5vw,3.6rem) 0}
.quote .wrap{display:flex;gap:1.6rem;align-items:flex-start}
.quote .qm{font-family:'Oswald',sans-serif;font-size:4.6rem;line-height:.7;opacity:.42;flex:none}
.quote p{font-family:'Oswald',sans-serif;font-weight:300;font-size:clamp(1.12rem,2.3vw,1.72rem);
  line-height:1.38;text-transform:none;letter-spacing:.005em}
.quote cite{display:block;font-style:normal;font-family:'Inter',sans-serif;font-size:.76rem;
  letter-spacing:.19em;text-transform:uppercase;margin-top:1rem;font-weight:600;
  color:rgba(255,255,255,.92)}

/* ---------- service cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:1.9rem 1.6rem;
  position:relative;overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.card::after{content:'';position:absolute;left:0;top:0;width:100%;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.card:hover::after{transform:scaleX(1)}
.card .ic{width:52px;height:52px;border-radius:var(--rad);display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);margin-bottom:1.15rem;transition:background .28s var(--ease),color .28s var(--ease)}
.card:hover .ic{background:var(--accent);color:#fff}
.card .ic svg{width:26px;height:26px}
.card h3{margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.94rem}

/* ---------- fleet ---------- */
.fleet-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:center;margin-bottom:2.4rem}
.fleet-hero img{width:100%;height:clamp(260px,32vw,400px);object-fit:cover;border-radius:var(--rad)}
.spec{background:var(--ink);color:#fff;border-radius:var(--rad);padding:clamp(1.6rem,3vw,2.4rem);position:relative;overflow:hidden}
.spec::before{content:'';position:absolute;right:-70px;top:-70px;width:200px;height:200px;border-radius:50%;
  border:26px solid rgba(var(--accent-rgb),.16)}
.spec .kicker{color:var(--accent-2)}
.spec h3{font-size:clamp(1.35rem,2.6vw,1.95rem);color:#fff;margin-bottom:.7rem}
.spec p{color:var(--muted-d);font-size:.96rem}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem}
.vtype{background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
.vtype:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.vtype figure{position:relative;margin:0;aspect-ratio:9/6.2;overflow:hidden;background:var(--paper-3)}
.vtype figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.vtype:hover figure img{transform:scale(1.06)}
.vtype .n{position:absolute;left:0;top:0;background:var(--accent);color:#fff;
  font-family:'Oswald',sans-serif;font-size:.78rem;letter-spacing:.14em;font-weight:500;
  padding:.3rem .7rem;border-radius:0 0 var(--rad) 0}
.vtype .vt-body{padding:1.25rem 1.3rem 1.45rem;display:flex;flex-direction:column;gap:.4rem}
.vtype b{font-family:'Oswald',sans-serif;font-weight:600;font-size:1.06rem;text-transform:uppercase;letter-spacing:.02em}
.vtype span{font-size:.88rem;color:var(--muted);line-height:1.55}

/* ---------- numbers band ---------- */
.band{position:relative;padding:clamp(3.4rem,7vw,5.6rem) 0;background:var(--ink);color:#fff;overflow:hidden}
.band-bg{position:absolute;inset:0;z-index:0}
.band-bg img{width:100%;height:100%;object-fit:cover}
.band-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,10,12,.90),rgba(9,10,12,.80))}
.band .wrap{position:relative;z-index:1}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem;margin-top:2.6rem}
.num{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--rad);padding:1.7rem 1.3rem;text-align:center;backdrop-filter:blur(6px)}
.num b{display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(1.8rem,3.4vw,2.7rem);
  color:var(--accent-2);line-height:1}
.num span{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin-top:.55rem;font-weight:500;line-height:1.45}

/* ---------- operations ---------- */
.ops-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
.ops-list{display:grid;gap:1rem}
.op{display:flex;gap:1.1rem;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:1.35rem}
.op .ic{width:42px;height:42px;flex:none;border-radius:var(--rad);display:grid;place-items:center;
  background:var(--ink);color:var(--accent-2)}
.op .ic svg{width:21px;height:21px}
.op b{display:block;font-family:'Oswald',sans-serif;font-size:1rem;text-transform:uppercase;letter-spacing:.03em}
.op p{font-size:.9rem;color:var(--muted);margin-top:.2rem}
.ops-media img{width:100%;height:clamp(300px,40vw,470px);object-fit:cover;border-radius:var(--rad)}

/* ---------- network ---------- */
.net{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:.7rem;margin-top:.5rem}
.br{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:var(--rad);
  padding:.85rem 1rem;display:flex;align-items:center;gap:.6rem;
  transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)}
.br:hover{background:rgba(var(--accent-rgb),.16);border-color:var(--accent);transform:translateY(-3px)}
.br i{width:7px;height:7px;border-radius:50%;background:var(--accent-2);flex:none}
.br span{font-family:'Oswald',sans-serif;font-size:.93rem;letter-spacing:.045em;text-transform:uppercase;color:#fff}
.br.ho{background:var(--accent);border-color:var(--accent)}
.br.ho i{background:#fff}
.br.ho small{display:block;font-size:.58rem;letter-spacing:.15em;opacity:.9;font-family:'Inter',sans-serif}

/* ---------- industries ---------- */
.inds{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.ind{position:relative;border-radius:var(--rad);overflow:hidden;background:var(--ink);min-height:210px;
  display:flex;align-items:flex-end;padding:1.5rem;isolation:isolate}
.ind::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 20%,rgba(9,10,12,.92) 100%)}
.ind img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease)}
.ind:hover img{transform:scale(1.06)}
.ind b{font-family:'Oswald',sans-serif;font-size:1.16rem;text-transform:uppercase;letter-spacing:.05em;color:#fff}
.ind span{display:block;font-size:.85rem;color:rgba(255,255,255,.75);margin-top:.15rem}

/* ---------- fleet owners ---------- */
.own-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(1.8rem,4.5vw,3.2rem);align-items:center}
.own-lede{color:var(--muted-d)}
.own-media{position:relative;border-radius:var(--rad);overflow:hidden}
.own-media img{width:100%;height:clamp(300px,38vw,460px);object-fit:cover}
.own-media .tag{position:absolute;left:0;bottom:22px;background:var(--accent);color:#fff;
  font-family:'Oswald',sans-serif;letter-spacing:.13em;text-transform:uppercase;font-size:.82rem;
  padding:.55rem 1.15rem;border-radius:0 var(--rad) var(--rad) 0}
.own-list{display:grid;gap:.8rem;margin:1.5rem 0 1.9rem}
.own-list li{display:flex;gap:.85rem;align-items:flex-start;color:var(--muted-d);font-size:.96rem}
.own-list svg{width:20px;height:20px;flex:none;color:var(--accent-2);margin-top:3px}
.own-list b{color:#fff;font-weight:600}
.own-btns{display:flex;gap:.7rem;flex-wrap:wrap}

/* ---------- cta band ---------- */
.cta{position:relative;padding:clamp(3.4rem,7vw,5.4rem) 0;overflow:hidden;text-align:center;color:#fff}
.cta-bg{position:absolute;inset:0;z-index:0}
.cta-bg img{width:100%;height:100%;object-fit:cover}
.cta-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(var(--accent-d-rgb),.93),rgba(13,14,17,.90))}
.cta .wrap{position:relative;z-index:1}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.86);max-width:44rem;margin:1rem auto 2rem}
.cta-btns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* ---------- contact ---------- */
.con-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.8rem,4.5vw,3.4rem);align-items:start}
.con-list{display:grid;gap:.9rem}
.ci{display:flex;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:1.15rem 1.25rem}
.ci .ic{width:42px;height:42px;flex:none;border-radius:var(--rad);display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent)}
.ci .ic svg{width:20px;height:20px}
.ci b{display:block;font-family:'Oswald',sans-serif;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.ci a,.ci p{display:block;font-size:1rem;margin-top:.15rem;font-weight:500;line-height:1.5}
.ci a:hover{color:var(--accent)}

.form{background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  padding:clamp(1.5rem,3vw,2.2rem);box-shadow:var(--shadow)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fld{margin-bottom:1rem;position:relative}
.fld label{display:block;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin-bottom:.4rem}
.fld label .rq{color:var(--danger)}
.fld input,.fld select,.fld textarea{width:100%;padding:.82rem .95rem;border:1px solid var(--line);
  border-radius:var(--rad);background:var(--paper-2);font-size:.97rem;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}
.fld textarea{min-height:118px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--accent);
  background:#fff;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.13)}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:var(--danger);background:#fff5f4}
.err{display:block;font-size:.78rem;color:var(--danger);margin-top:.3rem;min-height:0}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form .btn{width:100%}
.f-note{font-size:.8rem;color:var(--muted);margin-top:.85rem;text-align:center}
.f-msg{display:none;margin-bottom:1.2rem;padding:.95rem 1.1rem;border-radius:var(--rad);font-size:.92rem;line-height:1.55}
.f-msg.ok{display:block;background:#e9f8ef;border:1px solid #b5e3c8;color:#14663a}
.f-msg.bad{display:block;background:#fdeced;border:1px solid #f5c2c6;color:#8e0713}
.f-msg a{text-decoration:underline;font-weight:600}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn.busy .spin{display:block}
.btn.busy{pointer-events:none;opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- dark form variant (vendor registration) ---------- */
.form-title{font-size:clamp(1.2rem,2.2vw,1.5rem);color:#fff;margin-bottom:.3rem}
.form-sub{color:var(--muted-d);font-size:.92rem;margin-bottom:1.35rem}
.form-dark{background:rgba(10,11,14,.90);border-color:rgba(255,255,255,.15);
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
.form-dark .fld label{color:var(--muted-d)}
.form-dark .fld label .rq{color:var(--danger-2)}
.form-dark input,.form-dark select,.form-dark textarea{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.17);color:#fff}
.form-dark input::placeholder,.form-dark textarea::placeholder{color:rgba(255,255,255,.40)}
.form-dark select option{color:#14161a;background:#fff}
.form-dark input:focus,.form-dark select:focus,.form-dark textarea:focus{
  background:rgba(255,255,255,.11);border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(var(--accent-2-rgb),.22)}
.form-dark input[aria-invalid="true"],.form-dark select[aria-invalid="true"],
.form-dark textarea[aria-invalid="true"]{border-color:var(--danger-2);background:rgba(217,45,32,.16)}
.form-dark .err{color:var(--danger-2)}
.form-dark .f-note{color:var(--muted-d)}
.form-dark .f-note a,.form-dark .f-note strong{color:#fff}

/* ---------- footer ---------- */
.ft{background:var(--ink);color:#fff;padding:clamp(3rem,5vw,4.2rem) 0 0}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:2.2rem}
.ft h4{font-size:.8rem;letter-spacing:.2em;color:var(--accent-2);margin-bottom:1.1rem;font-weight:500}
.ft-brand img{height:58px;width:auto;aspect-ratio:600/543;margin-bottom:1rem}
.ft-brand p{color:var(--muted-d);font-size:.92rem;max-width:24rem}
.ft ul li{margin-bottom:.6rem}
.ft ul a,.ft address{color:var(--muted-d);font-size:.93rem;font-style:normal;line-height:1.75}
.ft ul a:hover{color:var(--accent-2)}
.ft address a{color:var(--muted-d)}
.ft address a:hover{color:#fff}
.ft-soc{display:flex;gap:.55rem;margin-top:1.2rem}
.ft-soc a{width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:var(--rad);
  display:grid;place-items:center;color:#fff;transition:background .2s var(--ease),border-color .2s var(--ease)}
.ft-soc a:hover{background:var(--accent);border-color:var(--accent)}
.ft-soc svg{width:18px;height:18px}
.ft-bot{margin-top:3rem;border-top:1px solid rgba(255,255,255,.12);padding:1.3rem 0;
  display:flex;justify-content:space-between;gap:1rem 1.6rem;flex-wrap:wrap;align-items:center;
  font-size:.82rem;color:var(--muted-d)}
.ft-credit{display:inline-flex;align-items:center;gap:.45rem}
.ft-credit a{color:#fff;font-weight:600;border-bottom:1px solid rgba(var(--accent-rgb),.75);
  padding-bottom:1px;transition:color .2s var(--ease),border-color .2s var(--ease)}
.ft-credit a:hover{color:var(--accent-2);border-bottom-color:var(--accent-2)}

/* ---------- floating actions ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:850;width:58px;height:58px;border-radius:50%;
  background:#25d366;display:grid;place-items:center;box-shadow:0 8px 26px rgba(37,211,102,.42);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
.wa svg{width:31px;height:31px;color:#fff}
.wa:hover{transform:scale(1.08)}
.wa::before{content:'';position:absolute;inset:0;border-radius:50%;background:#25d366;
  animation:pulse 2.4s ease-out infinite;z-index:-1}
@keyframes pulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.75);opacity:0}100%{opacity:0}}
.wa-tip{position:absolute;right:70px;top:50%;transform:translateY(-50%) translateX(8px);
  background:var(--ink);color:#fff;font-size:.8rem;padding:.5rem .8rem;border-radius:var(--rad);
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease)}
.wa:hover .wa-tip{opacity:1;transform:translateY(-50%) translateX(0)}

.totop{position:fixed;left:18px;bottom:18px;z-index:849;width:58px;height:58px;border-radius:50%;
  background:var(--ink);color:#fff;display:grid;place-items:center;border:0;cursor:pointer;
  box-shadow:0 8px 26px rgba(13,14,17,.34);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s var(--ease),visibility .26s var(--ease),background .2s var(--ease)}
.totop.on{opacity:1;visibility:visible;pointer-events:auto}
.totop:hover{background:var(--accent)}
.totop svg{width:22px;height:22px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .nav{gap:1.25rem}
  .nav a{font-size:.82rem}
  .hdr-tel span{display:none}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--hdr:68px}
  .burger{display:flex}
  /* The mobile menu has room for the word, and a lone padlock in a vertical
     list of text links would read as an icon nobody put a label on. */
  .nav-login span{display:inline}
  .nav-login{opacity:1}
  .nav{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100svh;
    background:#0d0e11;flex-direction:column;justify-content:center;gap:.4rem;
    transform:translateX(100%);transition:transform .38s var(--ease);
    overflow-y:auto;overscroll-behavior:contain;z-index:880;padding:5rem 2rem 2rem}
  body.nav-open .nav{transform:none}
  .nav a{font-size:1.45rem;color:#fff!important;padding:.7rem 1rem;letter-spacing:.12em}
  .nav a::after{display:none}
  .nav .nav-cta{display:inline-flex;margin-top:1.2rem;font-size:.95rem}
  .hdr-cta .btn{display:none}
  .about-grid,.ops-grid,.con-grid,.fleet-hero,.own-grid{grid-template-columns:1fr}
  .own-media{order:-1}
  .about-media .badge{right:12px;bottom:12px}
  .grid3,.inds{grid-template-columns:repeat(2,1fr)}
  .grid4,.nums{grid-template-columns:repeat(2,1fr)}
  .ops-media{order:-1}
  .hero{min-height:min(86svh,720px)}
  .hero-bg img{object-position:64% 52%}
  .hero-in{padding-bottom:2.4rem}
}
@media (max-width:640px){
  .wrap{width:min(100% - 1.75rem,var(--wrap))}
  .hero{min-height:auto;padding-top:calc(var(--hdr) + 3rem)}
  .hero-bg img{object-position:68% 52%}
  .hero-in{padding-bottom:2rem}
  .hero-stats ul{grid-template-columns:1fr 1fr}
  .hero-stats li{border-left:0;border-top:1px solid rgba(255,255,255,.10);padding:1.1rem .6rem}
  .hero-stats li:nth-child(-n+2){border-top:0}
  .hero-stats li:nth-child(even){border-left:1px solid rgba(255,255,255,.10)}
  .hero-btns .btn{flex:1 1 100%}
  .grid3,.inds,.nums,.vals,.f2{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .hero-mark{width:96vw;right:-26%;top:34%;opacity:.07}
  .ft-grid{grid-template-columns:1fr;gap:1.9rem}
  .ft-bot{justify-content:center;text-align:center}
  .quote .wrap{flex-direction:column;gap:.4rem}
  .quote .qm{font-size:3rem}
  .brand img{height:38px}
  .brand .bt b{font-size:.9rem}
  .wa{width:52px;height:52px;right:14px;bottom:14px}
  .wa svg{width:27px;height:27px}
  .totop{left:14px;bottom:14px;width:52px;height:52px}
  .totop svg{width:20px;height:20px}
}
@media (min-width:1500px){ :root{--wrap:1320px} }

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}
@media print{
  .hdr,.wa,.totop,.hero-bg,.band-bg,.cta-bg,.form{display:none!important}
  body{color:#000;background:#fff}
}

/* ---------- driver app (#driverapp) ----------
   The one dark section in the middle of the page. The .op card was drawn for a
   white surface - white fill, hairline grey border, grey body text - and left
   alone it would sit on the dark band as four bright slabs, louder than the
   heading above them. So the same card is restated for the dark surface rather
   than a second card class being invented: one component, two grounds. */
.sec-dark .op{background:var(--ink-2);border-color:var(--line-d)}
.sec-dark .op .ic{background:rgba(255,255,255,.07);color:var(--accent-2)}
.sec-dark .op p{color:var(--muted-d)}

/* The download panel. Accent-bordered rather than accent-filled: the button inside it
   is the call to action, and a filled panel would compete with its own button. */
.da-card{background:var(--ink-2);border:1px solid var(--line-d);border-left:3px solid var(--accent);
  border-radius:var(--rad);padding:clamp(1.6rem,3vw,2.4rem)}
.da-name{font-family:'Noto Sans Devanagari','Inter',sans-serif;font-size:1.9rem;
  font-weight:700;line-height:1.25;color:#fff}
.da-sub{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.12em;
  font-size:.74rem;color:var(--accent-2);margin-top:.35rem}
.da-body{color:var(--muted-d);font-size:.95rem;margin:1.1rem 0 1.6rem}
.da-foot{color:var(--muted-d);font-size:.8rem;margin-top:1rem}