:root { --ink:#102a43; --blue:#1359d2; --sky:#dce8ff; --orange:#f15a24; --cream:#f6f3ed; --line:#d9ddd9; --mono:"DM Mono",monospace; --sans:"Manrope",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
.site-header { height:84px; padding:0 clamp(24px,5vw,80px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(246,243,237,.95); position:sticky; top:0; z-index:5; }
.brand { display:flex; gap:10px; align-items:center; font-size:14px; font-weight:800; letter-spacing:.08em; } .brand em { color:var(--orange); font-style:normal; }
.brand-mark { width:30px; height:30px; display:grid; place-items:center; color:#fff; background:var(--blue); border-radius:50% 50% 50% 10%; font-size:16px; font-family:Georgia,serif; font-style:italic; }
.site-nav { display:flex; align-items:center; gap:32px; font-size:13px; font-weight:700; } .site-nav a:not(.nav-cta):hover { color:var(--orange); }
.nav-cta,.button { display:inline-flex; align-items:center; gap:16px; padding:12px 17px; font-size:12px; font-weight:800; letter-spacing:.02em; transition:transform .2s,background .2s; } .nav-cta { background:var(--ink); color:#fff; } .nav-cta span,.button span { font-size:18px; line-height:0; } .button:hover,.nav-cta:hover { transform:translateY(-2px); }
.menu-toggle { display:none; border:0; background:transparent; color:var(--ink); font:700 12px var(--sans); }
.hero { min-height:640px; padding:clamp(72px,11vw,150px) clamp(24px,9vw,145px) 84px; display:grid; grid-template-columns:1.04fr .96fr; gap:48px; overflow:hidden; background:#f6f3ed; }
.eyebrow,.section-label { font:12px var(--mono); letter-spacing:.06em; color:var(--orange); text-transform:uppercase; } .eyebrow { display:flex; align-items:center; gap:9px; color:var(--ink); }.eyebrow span { width:27px; height:1px; background:var(--orange); }
h1,h2,h3,p { margin-top:0; } h1 { max-width:650px; margin:20px 0 23px; font-size:clamp(48px,6.2vw,94px); line-height:.97; letter-spacing:-.07em; } h1 i { font-family:Georgia,serif; font-weight:400; color:var(--orange); letter-spacing:-.09em; }
.hero-text { max-width:470px; color:#52697d; font-size:17px; line-height:1.65; }.hero-actions { margin-top:35px; display:flex; gap:28px; align-items:center; }.button-primary { background:var(--blue); color:#fff; padding:15px 20px; }.text-link { font-size:13px; font-weight:800; border-bottom:1px solid var(--ink); padding-bottom:5px; }.text-link span { color:var(--orange); margin-left:7px; }
.hero-art { min-height:390px; position:relative; overflow:hidden; align-self:center; background:var(--sky); border-radius:2px; }.sun { position:absolute; right:12%; top:12%; width:92px; height:92px; background:#ffd36a; border-radius:50%; }.route { position:absolute; width:115%; height:46%; border:2px solid rgba(19,89,210,.15); border-radius:50%; transform:rotate(-15deg); }.route-one { left:-24%; top:18%; }.route-two { left:-10%; top:31%; }
.truck { position:absolute; left:14%; bottom:22%; width:71%; height:132px; }.truck-cargo { position:absolute; left:0; top:0; width:63%; height:91px; background:var(--blue); border:5px solid var(--ink); border-radius:7px 3px 3px 3px; }.truck-cargo span { display:block; padding:26px 14px; color:#fff; font-size:15px; font-weight:800; letter-spacing:.1em; }.truck-cab { position:absolute; left:63%; top:33px; width:29%; height:58px; background:#f5f8ff; border:5px solid var(--ink); border-left:0; border-radius:0 22px 4px 0; }.truck-cab span { position:absolute; left:11px; top:8px; width:28px; height:20px; background:#9ec3ee; border:3px solid var(--ink); }.wheel { position:absolute; bottom:-13px; width:42px; height:42px; border:9px solid var(--ink); border-radius:50%; background:#f6f3ed; }.wheel-left { left:14%; }.wheel-right { right:10%; }.art-caption { position:absolute; left:25px; bottom:19px; color:rgba(16,42,67,.56); font:10px var(--mono); letter-spacing:.12em; }
.trust-strip { padding:20px clamp(24px,9vw,145px); color:#fff; background:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:20px; font:11px var(--mono); letter-spacing:.06em; }.trust-strip p { margin:0; }.trust-strip span { width:5px; height:5px; border-radius:50%; background:var(--orange); }
.section { padding:112px clamp(24px,9vw,145px); }.intro-section { display:grid; grid-template-columns:1fr 2fr; gap:40px; }.intro-section h2,.section-heading h2,.coverage-copy h2 { margin-bottom:20px; font-size:clamp(32px,4.4vw,59px); letter-spacing:-.06em; line-height:1; }.intro-section div p { max-width:600px; color:#52697d; font-size:16px; line-height:1.75; }
.fleet-section { background:#fff; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:46px; }.section-heading > p { max-width:280px; margin:0; color:#52697d; line-height:1.6; font-size:14px; }.fleet-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.vehicle-card { min-height:380px; padding:24px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; overflow:hidden; }.vehicle-blue { background:var(--blue); }.vehicle-orange { background:var(--orange); }.vehicle-topline { display:flex; justify-content:space-between; color:rgba(255,255,255,.75); font:10px var(--mono); letter-spacing:.08em; }.vehicle-info { position:relative; z-index:1; }.vehicle-info h3 { margin-bottom:3px; font-size:30px; letter-spacing:-.05em; }.vehicle-info p { margin:0; font:11px var(--mono); letter-spacing:.04em; }.vehicle-illustration { position:relative; margin:auto; width:58%; height:120px; border-bottom:4px solid rgba(255,255,255,.7); }.vehicle-illustration div { position:absolute; left:0; bottom:15px; width:65%; height:62px; border:4px solid #fff; border-radius:6px; }.vehicle-illustration i { position:absolute; left:65%; bottom:15px; width:26%; height:43px; border:4px solid #fff; border-left:0; border-radius:0 16px 2px 0; }.vehicle-illustration b { position:absolute; left:12%; bottom:-9px; width:18px; height:18px; border:4px solid #fff; border-radius:50%; box-shadow:106px 0 #fff,106px 0 0 4px var(--blue); }.ev b { box-shadow:106px 0 #fff,106px 0 0 4px var(--orange); }.ev div:after { content:"EV"; position:absolute; left:18px; top:14px; font:700 20px var(--mono); color:#fff; }
.coverage-section { display:grid; grid-template-columns:1fr 1fr; min-height:580px; }.coverage-map { position:relative; overflow:hidden; background:#d8ebe5; }.coverage-map:before,.coverage-map:after { content:""; position:absolute; border:1px solid rgba(16,42,67,.16); border-radius:48%; }.coverage-map:before { width:150%; height:90%; left:-30%; top:-12%; transform:rotate(-19deg); }.coverage-map:after { width:130%; height:90%; left:7%; bottom:-34%; transform:rotate(22deg); }.map-line { position:absolute; left:30%; top:24%; height:50%; width:34%; border-left:3px dashed var(--orange); border-radius:50%; transform:rotate(25deg); }.pin { position:absolute; z-index:1; padding:8px 10px; color:#fff; background:var(--ink); font:11px var(--mono); }.pin:before { content:""; position:absolute; left:12px; bottom:-7px; border-width:7px 6px 0; border-style:solid; border-color:var(--ink) transparent transparent; }.pin-mumbai { left:18%; top:22%; }.pin-navi { left:54%; top:45%; }.pin-alibaug { left:33%; bottom:20%; background:var(--orange); }.pin-alibaug:before { border-top-color:var(--orange); }.coverage-copy { padding:112px clamp(24px,9vw,145px); background:var(--ink); color:#fff; }.coverage-copy h2 { max-width:370px; }.coverage-copy > p:not(.section-label) { max-width:370px; color:#b6c8d9; line-height:1.75; }.coverage-copy ul { padding:0; margin-top:40px; list-style:none; display:flex; flex-wrap:wrap; gap:10px; }.coverage-copy li { border:1px solid rgba(255,255,255,.38); padding:9px 13px; font:11px var(--mono); }
.contact-section { padding:112px 24px; text-align:center; color:#fff; background:var(--orange); }.contact-section .section-label { color:var(--ink); }.contact-section h2 { max-width:700px; margin:20px auto; font-size:clamp(39px,5vw,70px); letter-spacing:-.065em; line-height:1; }.contact-section p:not(.section-label) { margin-bottom:32px; }.button-light { color:var(--ink); background:#fff; padding:15px 20px; }
footer { padding:35px clamp(24px,5vw,80px); display:flex; justify-content:space-between; align-items:center; gap:25px; } footer p { margin:0; color:#698094; font:10px var(--mono); }
@media (max-width:760px) { .site-header { height:68px; }.menu-toggle { display:block; }.site-nav { display:none; position:absolute; top:68px; left:0; right:0; padding:22px 24px; background:var(--cream); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:20px; }.site-nav.open { display:flex; }.hero { min-height:auto; grid-template-columns:1fr; padding-top:72px; }.hero-art { min-height:320px; }.trust-strip { padding:17px 24px; flex-wrap:wrap; justify-content:center; }.trust-strip p { font-size:9px; }.trust-strip span { display:none; }.intro-section,.coverage-section { grid-template-columns:1fr; }.section { padding-top:76px; padding-bottom:76px; }.section-heading { display:block; }.section-heading > p { margin-top:16px; }.fleet-grid { grid-template-columns:1fr; }.coverage-map { min-height:330px; }.coverage-copy { padding-top:76px; padding-bottom:76px; }.contact-section { padding:76px 24px; } footer { flex-direction:column; align-items:flex-start; } }