/* logistics-company-website/css/styles.css */
/* =========
   Variables & Reset
   ========= */
:root{
  --brand:#FF7A00;
  --brand-dark:#d96600;
  --accent-yellow:#FFD400;

  --black:#000000;
  --near-black:#0B0B0B;
  --white:#FFFFFF;

  --text:#EAEAEA;
  --text-dark:#141414;
  --muted:#6A6A6A;

  --container:1200px;
  --carousel-max:1200px; /* cap carousel width on desktop */
  --gutter:24px;
  --space-xxs:4px;
  --space-xs:8px;
  --space-s:12px;
  --space-m:16px;
  --space-l:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;
  --space-4xl:80px;

  --shadow-strong:0 14px 40px rgba(0,0,0,0.35);
  --shadow:0 0 0 1px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.14);

  --speed-fast:240ms;
  --speed:520ms;
  --speed-slow:680ms;
  --ease:cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Remove horizontal scrollbar; hide vertical bar visuals but keep scrolling */
html,body{height:100%;overflow-x:hidden;scrollbar-width:none}
html::-webkit-scrollbar, body::-webkit-scrollbar{width:0;height:0}
*{box-sizing:border-box}

/* Base */
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text-dark);
  background:#FFFFFF;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus,button:focus,input:focus,textarea:focus,select:focus{outline:2px solid var(--brand);outline-offset:2px}
button{font:inherit;border:0;background:transparent;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:Poppins,Inter,system-ui,Arial,Helvetica,sans-serif;margin:0 0 var(--space-l);color:var(--text-dark)}
.h1{font-size:clamp(28px,4vw,46px);line-height:1.1}
.h2{font-size:clamp(22px,3vw,34px);line-height:1.2}
.h3{font-size:20px}
.h4{font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.lead{color:var(--muted);font-size:18px}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Layout */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--space-4xl) 0;background:#FFFFFF}
.section.dark{background:var(--near-black);color:var(--text)}
.section.stripe{background:#F6F6F6}
.grid{display:grid;gap:var(--space-2xl)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.section-head{margin-bottom:var(--space-3xl)}
.cta-row{margin-top:var(--space-2xl);display:flex;gap:var(--space-l)}
.mt{margin-top:var(--space-2xl)}
.mt-small{margin-top:var(--space-l)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border:2px solid var(--black);background:#fff;color:var(--black);text-transform:uppercase;font-weight:700;letter-spacing:.03em;transition:background var(--speed) var(--ease),color var(--speed) var(--ease),border-color var(--speed) var(--ease)}
.btn:hover{background:var(--black);color:#fff}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn.outline{background:transparent;border-color:var(--brand);color:var(--brand)}
.btn.outline:hover{background:var(--brand);color:#fff}
.btn.link{border-color:transparent;padding:0;border-width:0}
.btn.link:hover{color:var(--brand)}
.btn.full{width:100%}

/* Header & Nav */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(0,0,0,0.9);backdrop-filter:saturate(150%) blur(6px);
  border-bottom:2px solid rgba(255,255,255,0.12);
}
.nav-wrap{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;
  max-width:var(--container);margin:0 auto;padding:18px var(--gutter);color:#fff;gap:18px;
}
.brand{display:flex;align-items:center;gap:14px;color:#fff;justify-self:start}
.brand-text{font-weight:700;letter-spacing:.02em;font-size:26px}
.brand-text em{font-style:normal;color:var(--accent-yellow)}
.primary-nav .menu{display:flex;align-items:center;gap:var(--space-xl)}
.primary-nav a{color:#fff;padding:12px 6px;border-bottom:2px solid transparent}
.primary-nav a:hover,.primary-nav a[aria-current="true"]{border-bottom-color:var(--brand)}
.btn-link{padding:12px 8px;border-bottom:2px solid transparent}

/* Desktop dropdowns as FAQ-style accordions */
.has-dropdown{position:relative}
.dropdown-toggle{display:flex;align-items:center;gap:10px;color:#fff;padding:12px 6px;border-bottom:2px solid transparent;transition:color var(--speed) var(--ease)}
.dropdown-toggle:hover{border-bottom-color:var(--brand);color:var(--accent-yellow)}
.dd-caret{transition:transform var(--speed-fast) var(--ease)}
.dropdown{
  position:absolute;top:100%;left:0;min-width:280px;
  background:#111;border:1px solid #2a2a2a;color:#fff;display:flex;flex-direction:column;
  box-shadow:var(--shadow);transform-origin:top;transform:scaleY(0.95);opacity:0;pointer-events:none;transition:transform var(--speed) var(--ease),opacity var(--speed) var(--ease)
}
.has-dropdown.open .dropdown{transform:scaleY(1);opacity:1;pointer-events:auto}
.has-dropdown.open .dd-caret{transform:rotate(180deg)}
.dropdown a{display:flex;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid #1f1f1f}
.dropdown a:hover{background:#0f0f0f;color:var(--accent-yellow)}

/* Hamburger */
.hamburger{display:none;width:42px;height:42px;position:relative;justify-self:end}
.hamburger .line{position:absolute;left:6px;right:6px;height:2px;background:#fff;transform-origin:left center;transition:transform var(--speed) var(--ease),opacity var(--speed) var(--ease)}
.hamburger .l1{top:11px}
.hamburger .l2{top:20px}
.hamburger .l3{top:29px}
.hamburger.active .l1{transform:translateX(4px) rotate(45deg)}
.hamburger.active .l2{opacity:0}
.hamburger.active .l3{transform:translateX(4px) rotate(-45deg)}

/* Mobile drawer under header */
.mobile-menu{
  background:#0f0f0f;color:#fff;border-top:1px solid #222;
  transform:translateY(-16px);opacity:0;pointer-events:none;
  transition:transform var(--speed-slow) var(--ease),opacity var(--speed-slow) var(--ease);
}
.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-list{display:flex;flex-direction:column;gap:2px;padding:var(--gutter)}
.mobile-list a{display:flex;gap:10px;align-items:center;padding:16px 8px;border-bottom:1px solid #1f1f1f}
.mobile-socials{display:flex;gap:12px;padding:14px 8px;border-top:1px solid #1f1f1f}
.mobile-address{display:flex;gap:10px;align-items:flex-start;color:#bbb;padding:14px 8px;border-top:1px solid #1f1f1f}

/* Splash */
.splash{position:fixed;inset:0;background:#000;display:grid;place-items:center;z-index:2000}
.splash-inner{text-align:center;color:#fff}
.brand-reveal{font:700 38px/1.1 Poppins,Inter,sans-serif;color:var(--brand);letter-spacing:.02em;opacity:0;transform:translateY(12px);animation:reveal var(--speed-slow) var(--ease) forwards}
@keyframes reveal{to{opacity:1;transform:none}}
.splash.exit{animation:fadeUp var(--speed) var(--ease) forwards}
@keyframes fadeUp{to{opacity:0;transform:translateY(-20px)}}

/* Spinner */
.spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,0.25);border-top-color:#fff;animation:spin 1s linear infinite;margin:14px auto 0}
.spinner.brand{border-color:rgba(0,0,0,0.15);border-top-color:var(--brand)}
@keyframes spin{to{transform:rotate(360deg)}}

/* HERO: 16:9; full width on mobile/tablet; max-width on desktop. No peeking & no big black gaps */
.hero{position:relative}
.hero.dark{background-color:var(--near-black);color:var(--text)}
.hero-slideshow{
  position:relative;overflow:hidden;background:#0e0e0e;
  width:min(100vw,var(--carousel-max)); /* full-viewport width on mobile; capped on desktop */
  margin-left:auto;margin-right:auto;
}
.slides{display:flex;touch-action:pan-y;will-change:transform;gap:0} /* no visible gap = no black bar */
.slide{
  position:relative;flex:0 0 auto;
  aspect-ratio:16/9;
  max-height:52vh;min-height:36vh;
  width:100%; /* width is set via JS to 100%/N of track */
  background:#0e0e0e;
  display:flex;align-items:center;justify-content:center;
  border-bottom:2px solid rgba(255,255,255,0.06);
}
@media (max-width:768px){
  .slide{max-height:46vh;min-height:34vh}
}
.slide-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center; /* show full image at any size */
}
.hero-overlay{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--space-m);padding-top:var(--space-xl)}
.hero-overlay .h1,.hero-overlay .lead{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.hero .actions{display:flex;gap:var(--space-l);margin-top:var(--space-l);flex-wrap:wrap}

.slide-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:10px;z-index:3}
.slide-dots::before{content:"";position:absolute;top:-6px;left:0;right:0;height:2px;background:rgba(255,255,255,0.2)}
.slide-dots button{width:12px;height:12px;border:2px solid #fff;background:transparent}
.slide-dots button.active{background:var(--accent-yellow);border-color:var(--accent-yellow)}

/* Ticker under hero */
.ticker{overflow:hidden;border-top:2px solid rgba(0,0,0,0.12);border-bottom:2px solid rgba(0,0,0,0.12);background:linear-gradient(90deg,#FFE7CC,#FFF2D1)}
.ticker-track{display:flex;gap:48px;align-items:center;padding:12px;animation:scroll 22s linear infinite;color:#1a1a1a}
.ticker-track span{white-space:nowrap}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

.hero-badges{margin-top:var(--space-2xl);display:flex;gap:var(--space-l);flex-wrap:wrap}
.badge{padding:10px 12px;border:1px solid #2a2a2a;background:#101010;color:#eaeaea;display:inline-flex;align-items:center;gap:10px}

/* Cards / Tiles */
.card{padding:var(--space-xl);border:1px solid #e3e3e3;background:#fff;box-shadow:var(--shadow)}
.card .icon{font-size:26px;color:var(--brand);margin-bottom:12px}
.tile{display:flex;align-items:center;gap:12px;padding:18px;border:2px solid var(--black);background:#fff;color:#000;font-weight:700;text-transform:uppercase}
.tile:hover{background:#000;color:#fff}

/* Coverage */
.coverage-tags{display:flex;flex-wrap:wrap;gap:12px;margin:var(--space-l) 0}
.coverage-tags li{padding:10px 12px;border:1px solid #e3e3e3;background:#fff}
.map-embed iframe{width:100%}

/* Steps */
.steps .step{padding:var(--space-xl);border:1px solid #2a2a2a;background:#101010;box-shadow:var(--shadow)}
.step-num{font:700 16px/1 Poppins,Inter,sans-serif;color:var(--accent-yellow);margin-bottom:10px}
.step-title{color:#fff}

/* KPIs */
.kpis{background:#fff;border-top:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7}
.kpi{text-align:center}
.kpi-num{font:700 34px/1 Poppins,Inter,sans-serif;color:var(--brand)}
.kpi-label{color:var(--text-dark);margin-top:8px}

/* FAQ */
.faq{display:grid;gap:12px}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px;border:1px solid #e3e3e3;background:#fff;font-weight:700}
.faq-q .sign{font-weight:900}
.faq-a{border:1px solid #e3e3e3;border-top:0;background:#fff;padding:16px}

/* Testimonials */
.testimonials{background-image:url('../assets/bg-testimonials.png');background-size:cover;background-position:center}
.testimonials .section-head .h2{color:#fff}
.quote{border:1px solid #2a2a2a;background:rgba(16,16,16,0.9);color:#ddd;padding:var(--space-xl);display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start}
.quote .avatar{grid-row:span 2;object-fit:cover}
.quote blockquote{margin:0 0 6px 0}
.quote figcaption{color:#bbb}

/* Marquee (partners) — spaced out more */
.marquee{overflow:hidden;border-top:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7;background:#fff}
.marquee-track{display:flex;gap:72px;align-items:center;padding:18px;animation:scroll 24s linear infinite}
@media (max-width:768px){ .marquee-track{gap:48px} }
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* Booking form */
.booking-form{background:#fff;border:1px solid #e3e3e3;box-shadow:var(--shadow);padding:var(--space-2xl)}
.booking-form .field{display:flex;flex-direction:column;gap:8px}
.booking-form label{font-weight:700}
.booking-form input,
.booking-form select,
.booking-form textarea{padding:12px;border:1px solid #e3e3e3;background:#fff;color:#111}
.choices{display:flex;gap:16px;align-items:center}

/* CTA wide */
.cta-wide{display:flex;flex-direction:column;gap:16px}
.section.stripe.parallax{background-image:url('../assets/bg-cta.png');background-size:cover;background-position:center}

/* Footer */
.site-footer{background-image:url('../assets/footer-bg.png');background-size:cover;background-position:center;color:#fff;margin:0}
.footer-overlay{background:linear-gradient(0deg,rgba(0,0,0,0.94),rgba(0,0,0,0.88))}
.site-footer .container{padding-top:var(--space-3xl);padding-bottom:var(--space-3xl)}
.foot-col .brand{color:#fff;display:flex;align-items:center;gap:10px}
.foot-col .brand span{font-size:22px}
.foot-links a{color:#ddd}
.foot-links a:hover{color:var(--accent-yellow)}
.foot-heading{color:#fff}
.social a{display:inline-flex;padding:10px;border:1px solid #2a2a2a;margin-right:8px;color:#fff}
.newsletter{display:flex;gap:8px;margin-top:8px}
.newsletter input{flex:1;padding:12px;border:1px solid #333;background:#0c0c0c;color:#fff}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #1c1c1c;margin-top:var(--space-2xl);padding-top:var(--space-l)}
.legal{display:flex;gap:16px}

/* WhatsApp widget — CLOSED by default; icon toggles open/close; X also closes */
.wa-widget{position:fixed;right:18px;bottom:18px;z-index:1200}
.wa-btn{width:58px;height:58px;display:grid;place-items:center;background:var(--brand);color:#fff;box-shadow:var(--shadow-strong)}
.wa-panel{position:absolute;right:0;bottom:68px;width:320px;background:#fff;border:1px solid #e3e3e3;box-shadow:var(--shadow);display:none;grid-template-rows:auto 1fr auto auto}
.wa-widget.open .wa-panel{display:grid}
.wa-header{background:#0f0f0f;color:#fff;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.wa-id{display:flex;align-items:center;gap:8px}
.wa-id span small{opacity:.7}
.wa-close{color:#fff}
.wa-chat{max-height:260px;overflow:auto;padding:12px;background:#f4f3ee}
.bubble{padding:10px 12px;border:1px solid #e3e3e3;background:#fff;margin:6px 0;max-width:85%}
.bubble.bot{border-color:#ececec;background:#fafafa}
.bubble.me{margin-left:auto;background:var(--brand);border-color:var(--brand);color:#fff}
.wa-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border-top:1px solid #eee;background:#fff}
.wa-quick button{padding:8px;border:1px solid #e3e3e3;background:#fff}
.wa-quick button:hover{border-color:var(--brand);color:var(--brand)}
.wa-compose{display:flex;gap:8px;padding:10px;border-top:1px solid #eee;background:#fff}
.wa-compose textarea{flex:1;padding:10px;border:1px solid #e3e3e3}

/* Cookie bar */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;background:#0e0e0e;color:#fff;border-top:2px solid #222;z-index:1100}
.cookie-inner{max-width:var(--container);margin:0 auto;padding:12px var(--gutter);display:flex;justify-content:space-between;gap:16px;align-items:center}
.cookie-actions{display:flex;gap:12px}

/* Scroll to top */
.to-top{position:fixed;right:18px;bottom:88px;width:46px;height:46px;background:#111;color:#fff;border:1px solid #2a2a2a;display:grid;place-items:center;z-index:900}

/* Parallax hint */
.parallax{background-attachment:scroll}

/* Responsive */
@media (max-width:1199px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .primary-nav{display:none}
  .hamburger{display:block}
}









/* ======= Add to the END of css/styles.css for the premium About page ======= */

/* Utilities */
.center{ text-align:center; }
.center-left{ text-align:left; }

/* ABOUT — shared backgrounds */
.about-hero{
  background-image: url('../assets/about-hero.png');
  background-size: cover; background-position: center;
  padding-top: calc(var(--space-4xl) + 84px);
  padding-bottom: var(--space-4xl);
}
.about-promise{ background-image: url('../assets/about-grid.png'); background-size: cover; background-position: center; }
.about-why{ background-image: url('../assets/about-values.png'); background-size: cover; background-position: center; }
.about-story{ background-image: url('../assets/about-story.png'); background-size: cover; background-position: center; }
.about-numbers{ background-image: url('../assets/about-numbers.png'); background-size: cover; background-position: center; }
.about-leadership{ background-image: url('../assets/about-leadership.png'); background-size: cover; background-position: center; }
.about-cta{ background-image: url('../assets/about-cta.png'); background-size: cover; background-position: center; }

/* ABOUT hero box */
.about-hero-box{
  max-width: 920px;
  margin: 0 auto;
  background: rgba(0,0,0,0.72);
  color: #fff;
  padding: var(--space-3xl) var(--space-2xl);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow);
}
.about-hero .actions{ display:flex; gap: var(--space-l); margin-top: var(--space-l); justify-content: center; flex-wrap: wrap; }

/* Promise cards center tweak */
.about-promise .card{ text-align:center; }

/* Mosaic (culture) */
.mosaic{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xl); }
.m-item{ position:relative; border: 1px solid #e3e3e3; background:#fff; box-shadow: var(--shadow); }
.m-item img{ width:100%; height: 220px; object-fit: cover; display:block; }
.m-item figcaption{
  position:absolute; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.65); color:#fff; padding:10px 12px;
  display:flex; align-items:center; gap:10px; font-weight:600;
}
@media (max-width: 991px){ .mosaic{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px){ .mosaic{ grid-template-columns: 1fr; } .m-item img{ height: 200px; } }

/* Story timeline (on dark) — brighter dots and lines */
.about-story .timeline::before{ background: rgba(255,255,255,0.25); }
.about-story .t-dot{ background:#111; border-color: var(--accent-yellow); }
.about-story .t-body{ border-bottom-color: rgba(255,255,255,0.28); }
.about-story .t-body h3{ color:#fff; }

/* Numbers — extra contrast for counters */
.about-numbers .kpi-num{ color: var(--accent-yellow); }
.about-numbers .kpi-label{ color:#fff; }

/* Team cards — center for premium vibe */
.about-leadership .team-cards{ align-items: stretch; }
.about-leadership .team-card{
  background: rgba(16,16,16,0.9);
  border: 1px solid #2a2a2a;
}
.about-leadership .team-copy .role{ color:#cfcfcf; }

/* Coverage section alignment on left column */
.about-coverage .coverage-tags{ margin: var(--space-m) 0 var(--space-l); }

/* Media block spacing on image-heavy backgrounds */
.about-why .media-block,
.about-promise .grid { backdrop-filter: saturate(120%); }

/* Responsive refinements */
@media (max-width: 991px){
  .about-hero{ padding-top: calc(var(--space-4xl) + 72px); }
  .about-hero-box{ padding: var(--space-2xl) var(--space-xl); }
}






/* ======= Add to the END of css/styles.css (Services page styling) ======= */

/* Utilities */
.center { text-align:center; }

/* Hero */
.services-hero{
  background-image:url('../assets/services-hero.png');
  background-size:cover;background-position:center;
  padding-top:calc(var(--space-4xl) + 84px);
  padding-bottom:var(--space-4xl);
}
.hero-box{
  max-width:900px;margin:0 auto;background:rgba(0,0,0,0.72);color:#fff;
  padding:var(--space-3xl) var(--space-2xl);border:1px solid rgba(255,255,255,0.12);
  box-shadow:var(--shadow);
}
.hero-box .actions{display:flex;gap:var(--space-l);justify-content:center;flex-wrap:wrap}

/* Catalog */
.services-catalog{
  background-image:url('../assets/services-grid.png');
  background-size:cover;background-position:center;
}
.service-tiles .tile{min-height:110px;justify-content:center;font-size:14px}
.service-tiles .tile i{font-size:22px}

/* Pricing snapshot */
.services-pricing{
  background-image:url('../assets/services-pricing.png');
  background-size:cover;background-position:center;
}
.rate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2xl)}
.rate-card{
  background:#fff;border:1px solid #e3e3e3;box-shadow:var(--shadow);
  padding:var(--space-2xl);display:flex;flex-direction:column;gap:12px
}
.rate-card .rate-points{display:grid;gap:10px}
.rate-card .rate-points i{color:var(--brand);margin-right:8px}

/* Service detail (alternating) */
.service-detail{color:#fff}
#bike{ background-image:url('../assets/services-bike-bg.png'); background-size:cover;background-position:center; }
#car{ background-image:url('../assets/services-car-bg.png'); background-size:cover;background-position:center; color:var(--text-dark); }
#errands{ background-image:url('../assets/services-errands-bg.png'); background-size:cover;background-position:center; }
#docs{ background-image:url('../assets/services-docs-bg.png'); background-size:cover;background-position:center; color:var(--text-dark); }
#food{ background-image:url('../assets/services-food-bg.png'); background-size:cover;background-position:center; }
#intercity{ background-image:url('../assets/services-intercity-bg.png'); background-size:cover;background-position:center; color:var(--text-dark); }

.service-detail .detail{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-3xl);align-items:center}
.service-detail .media img{width:100%;height:auto;object-fit:cover;border:1px solid rgba(255,255,255,0.15);box-shadow:var(--shadow)}
.service-detail .copy{background:rgba(0,0,0,0.7);padding:var(--space-2xl);border:1px solid rgba(255,255,255,0.12)}
#car .copy, #docs .copy, #intercity .copy{background:rgba(255,255,255,0.9);border:1px solid #e3e3e3}
.feature-list{display:grid;gap:10px;margin:var(--space-m) 0}
.feature-list i{color:var(--brand);margin-right:8px}

/* Use cases */
.use-cases{background:#fff}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-2xl)}
.u-card{border:1px solid #e3e3e3;background:#fff;box-shadow:var(--shadow);padding:var(--space-2xl)}
.u-card i{font-size:26px;color:var(--brand);margin-bottom:10px;display:inline-block}

/* Service FAQ */
.service-faq{background:#F6F6F6}

/* Coverage */
.services-coverage{
  background-image:url('../assets/services-coverage.png');
  background-size:cover;background-position:center;
}

/* Final CTA */
.services-cta{
  background-image:url('../assets/services-cta.png');
  background-size:cover;background-position:center;
}

/* Responsive */
@media (max-width:1199px){
  .rate-grid{grid-template-columns:1fr 1fr}
  .grid-5{grid-template-columns:repeat(3,1fr)}
  .service-detail .detail{grid-template-columns:1fr;gap:var(--space-2xl)}
  .service-detail .copy{order:2}
  .service-detail .media{order:1}
}
@media (max-width:767px){
  .rate-grid{grid-template-columns:1fr}
  .grid-5{grid-template-columns:1fr 1fr}
}
@media (max-width:479px){
  .grid-5{grid-template-columns:1fr}
}









/* ======= Append to the end of css/styles.css for Solutions page ======= */

/* Utilities */
.center { text-align:center; }

/* Hero */
.solutions-hero{
  background-image:url('../assets/solutions-hero.png');
  background-size:cover;background-position:center;
  padding-top:calc(var(--space-4xl) + 84px);
  padding-bottom:var(--space-4xl);
}
.sol-hero-box{
  max-width:900px;margin:0 auto;background:rgba(0,0,0,0.72);color:#fff;
  padding:var(--space-3xl) var(--space-2xl);
  border:1px solid rgba(255,255,255,0.12);box-shadow:var(--shadow)
}
.sol-hero-box .actions{display:flex;gap:var(--space-l);justify-content:center;flex-wrap:wrap}

/* Catalog tiles */
.solutions-catalog{
  background-image:url('../assets/solutions-grid.png');
  background-size:cover;background-position:center;
}
.sol-tiles .tile{min-height:110px;justify-content:center;font-size:14px}
.sol-tiles .tile i{font-size:22px}

/* Programs snapshot */
.solutions-programs{
  background-image:url('../assets/solutions-programs.png');
  background-size:cover;background-position:center;
}
.prog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2xl)}
.prog-card{
  background:#fff;border:1px solid #e3e3e3;box-shadow:var(--shadow);
  padding:var(--space-2xl);display:flex;flex-direction:column;gap:12px
}
.prog-card .check-list{display:grid;gap:10px}
.prog-card .check-list i{color:var(--brand);margin-right:8px}

/* Solution detail bands (alternating) */
.solution-detail{color:#fff}
#smb{ background-image:url('../assets/solutions-smb-bg.png'); background-size:cover;background-position:center; }
#ecom{ background-image:url('../assets/solutions-ecom-bg.png'); background-size:cover;background-position:center; color:var(--text-dark); }
#pharma{ background-image:url('../assets/solutions-pharma-bg.png'); background-size:cover;background-position:center; }
#food{ background-image:url('../assets/solutions-food-bg.png'); background-size:cover;background-position:center; color:var(--text-dark); }

.solution-detail .detail{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-3xl);align-items:center}
.solution-detail .media img{width:100%;height:auto;object-fit:cover;border:1px solid rgba(255,255,255,0.15);box-shadow:var(--shadow)}
.solution-detail .copy{background:rgba(0,0,0,0.72);padding:var(--space-2xl);border:1px solid rgba(255,255,255,0.12)}
#ecom .copy, #food .copy{background:rgba(255,255,255,0.9);border:1px solid #e3e3e3;color:var(--text-dark)}
.feature-list{display:grid;gap:10px;margin:var(--space-m) 0}
.feature-list i{color:var(--brand);margin-right:8px}

/* Playbooks (dark) */
.solutions-playbooks{
  background-image:url('../assets/solutions-playbooks.png');
  background-size:cover;background-position:center;
}

/* Tech band */
.solutions-tech{
  background-image:url('../assets/solutions-tech.png');
  background-size:cover;background-position:center;
}

/* Case studies teaser */
.solutions-cases{
  background-image:url('../assets/solutions-cases.png');
  background-size:cover;background-position:center;
}
.case-teaser{
  max-width:720px;background:rgba(255,255,255,0.96);border:1px solid #e3e3e3;
  box-shadow:var(--shadow);padding:var(--space-2xl)
}

/* Final CTA */
.solutions-cta{
  background-image:url('../assets/solutions-cta.png');
  background-size:cover;background-position:center;
}

/* Responsive */
@media (max-width:1199px){
  .prog-grid{grid-template-columns:1fr 1fr}
  .solution-detail .detail{grid-template-columns:1fr;gap:var(--space-2xl)}
  .solution-detail .copy{order:2}
  .solution-detail .media{order:1}
}
@media (max-width:767px){
  .prog-grid{grid-template-columns:1fr}
}