:root {
  --navy: #0e2350;
  --orange: #f47920;
  --white: #ffffff;
  --soft: #f5f7fa;
  --ink: #16213e;
  --muted: #657086;
  --line: rgba(14, 35, 80, 0.12);
}

* { box-sizing: border-box; }
body {
  color: var(--ink);
  font-family: "Inter", Arial, sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, .navbar-brand { font-family: "Poppins", Arial, sans-serif; color: var(--navy); letter-spacing: 0; }
a { color: inherit; text-decoration: none; transition: all .3s ease; }
img { max-width: 100%; height: auto; }
section { padding: 82px 0; }
.section-soft { background: var(--soft); }
.topbar { background: var(--navy); color: #fff; padding: 9px 0; }
.topbar a, .topbar span { color: #fff; }
.topbar a:hover { color: var(--orange); }
.top-quote { border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 5px 14px; }
.main-nav { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); transition: all .3s ease; }
.main-nav.nav-scrolled { background: rgba(255,255,255,.74); backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(14,35,80,.12); }
.navbar-brand img { width: 166px; height: 74px; object-fit: contain; }
.nav-link { color: var(--navy); font-weight: 700; position: relative; }
.nav-link:after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 4px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.nav-link:hover, .nav-link.active { color: var(--orange); }
.nav-link:hover:after, .nav-link.active:after { transform: scaleX(1); }
.btn { border-radius: 8px; font-weight: 800; padding: .78rem 1.08rem; transition: all .3s ease; }
.btn-primary-custom { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary-custom:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-3px); box-shadow: 0 12px 24px rgba(244,121,32,.28); }
.btn-accent { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-accent:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-3px); }
.btn-light-custom { background: #fff; color: var(--navy); border-color: #fff; }
.btn-light-custom:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-3px); }
.glass-card {
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(14,35,80,.12);
}
.hero {
  min-height: 760px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(14,35,80,.96) 0%, rgba(14,35,80,.78) 42%, rgba(14,35,80,.08) 100%),
    url("../images/banners/hero-banner.png") center / cover no-repeat;
  color: #fff;
  padding-top: 110px;
  padding-bottom: 150px;
  position: relative;
}
.hero h1 { color: #fff; font-size: clamp(2.35rem, 6vw, 4.9rem); line-height: 1.05; max-width: 830px; }
.hero p { max-width: 650px; color: rgba(255,255,255,.88); font-size: 1.1rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0; }
.hero-badges span, .badge-chip { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 800; }
.truck-motion { animation: driveIn 1s ease both; }
@keyframes driveIn { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
.quick-quote { margin-top: -92px; position: relative; z-index: 3; }
.lead-form { padding: 24px; }
.form-control, .form-select { min-height: 52px; border-radius: 8px; border-color: var(--line); }
.form-control:focus, .form-select:focus { border-color: var(--orange); box-shadow: 0 0 0 .22rem rgba(244,121,32,.15); }
.section-heading { text-align: center; max-width: 760px; margin: 0 auto 42px; }
.section-heading span { color: var(--orange); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.section-heading h2 { font-size: clamp(1.8rem, 3.6vw, 3rem); margin: 8px 0 10px; }
.section-heading p { color: var(--muted); margin: 0; }
.stat-card, .service-card, .icon-card, .price-card, .testimonial-card, .team-card, .contact-card {
  height: 100%;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: all .3s ease;
}
.service-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.service-card-img { position: relative; height: 178px; overflow: hidden; background: var(--soft); }
.service-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.service-card-img .icon-box { position: absolute; left: 18px; bottom: -28px; margin: 0; background: #fff; box-shadow: 0 10px 24px rgba(14,35,80,.16); }
.service-card-body { padding: 42px 26px 26px; display: flex; flex: 1; flex-direction: column; }
.service-card-body p { flex: 1; }
.service-card:hover .service-card-img img { transform: scale(1.06); }
.stat-card:hover, .service-card:hover, .icon-card:hover, .price-card:hover, .testimonial-card:hover, .team-card:hover, .contact-card:hover {
  transform: translateY(-6px);
  border-color: var(--orange);
  box-shadow: 0 18px 36px rgba(14,35,80,.12);
}
.stat-card strong { color: var(--orange); font: 800 2.4rem "Poppins", Arial; display: block; }
.icon-box {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(244,121,32,.12);
  color: var(--orange);
  font-size: 1.6rem;
  margin-bottom: 18px;
  transition: all .3s ease;
}
.service-card:hover .icon-box, .icon-card:hover .icon-box, .contact-card:hover .icon-box { background: var(--orange); color: #fff; }
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { margin: 10px 0; padding-left: 30px; position: relative; }
.feature-list li:before { content: "\F26A"; font-family: "bootstrap-icons"; color: var(--orange); position: absolute; left: 0; }
.process-line { position: relative; }
.process-step { text-align: center; padding: 24px; }
.step-num { width: 54px; height: 54px; margin: 0 auto 15px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 900; box-shadow: 0 0 0 8px rgba(244,121,32,.12); }
.media-panel {
  min-height: 360px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(14,35,80,.88), rgba(244,121,32,.58));
  box-shadow: 0 20px 46px rgba(14,35,80,.18);
}
.media-panel.home-survey { background: linear-gradient(135deg, rgba(14,35,80,.12), rgba(244,121,32,.06)), url("../images/banners/home-survey-preview.png") center / cover no-repeat; }
.media-panel.about-story { background: linear-gradient(135deg, rgba(14,35,80,.12), rgba(244,121,32,.06)), url("../images/banners/about-team-banner.png") center / cover no-repeat; }
.service-photo { min-height: 310px; border-radius: 8px; background: linear-gradient(135deg, rgba(14,35,80,.16), rgba(244,121,32,.08)); background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0 18px 38px rgba(14,35,80,.14); }
.service-photo.household { background-image: linear-gradient(135deg, rgba(14,35,80,.1), rgba(244,121,32,.08)), url("../images/services/household-shifting.png"); }
.service-photo.office { background-image: linear-gradient(135deg, rgba(14,35,80,.1), rgba(244,121,32,.08)), url("../images/services/office-relocation.png"); }
.service-photo.vehicle { background-image: linear-gradient(135deg, rgba(14,35,80,.1), rgba(244,121,32,.08)), url("../images/services/vehicle-transportation.png"); }
.service-photo.warehouse { background-image: linear-gradient(135deg, rgba(14,35,80,.1), rgba(244,121,32,.08)), url("../images/services/warehousing-storage.png"); }
.service-photo.packing { background-image: linear-gradient(135deg, rgba(14,35,80,.08), rgba(244,121,32,.08)), url("../images/services/packing-unpacking.png"); }
.service-photo.loading { background-image: linear-gradient(135deg, rgba(14,35,80,.08), rgba(244,121,32,.08)), url("../images/services/loading-unloading.png"); }
.service-photo.local { background-image: linear-gradient(135deg, rgba(14,35,80,.08), rgba(244,121,32,.08)), url("../images/services/local-shifting.png"); }
.service-photo.intercity { background-image: linear-gradient(135deg, rgba(14,35,80,.08), rgba(244,121,32,.08)), url("../images/services/intercity-relocation.png"); }
.service-photo.insurance { background-image: linear-gradient(135deg, rgba(14,35,80,.08), rgba(244,121,32,.08)), url("../images/services/insurance-protection.png"); }
.page-hero {
  background: linear-gradient(135deg, var(--navy), #173a82 58%, var(--orange));
  color: #fff;
  padding: 90px 0;
}
body[data-page="services"] .page-hero { background-image: linear-gradient(135deg, rgba(14,35,80,.96), rgba(14,35,80,.72) 54%, rgba(244,121,32,.65)), url("../images/banners/services-banner.png"); }
body[data-page="locations"] .page-hero { background-image: linear-gradient(135deg, rgba(14,35,80,.92), rgba(14,35,80,.64) 54%, rgba(244,121,32,.42)), url("../images/banners/locations-map-banner.png"); }
body[data-page="about"] .page-hero { background-image: linear-gradient(135deg, rgba(14,35,80,.96), rgba(14,35,80,.72) 54%, rgba(244,121,32,.55)), url("../images/gallery/team-truck-gallery.png"); }
body[data-page="contact"] .page-hero { background-image: linear-gradient(135deg, rgba(14,35,80,.96), rgba(14,35,80,.72) 54%, rgba(244,121,32,.42)), url("../images/banners/contact-hero.png"); }
.page-hero h1 { color: #fff; max-width: 850px; font-size: clamp(2.2rem, 5vw, 4rem); }
.page-hero p { max-width: 760px; color: rgba(255,255,255,.86); font-size: 1.08rem; }
.breadcrumb a, .breadcrumb-item, .breadcrumb-item.active { color: rgba(255,255,255,.86); }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.68); }
.cta-band { background: linear-gradient(135deg, var(--navy), var(--orange)); color: #fff; }
.cta-band h2 { color: #fff; margin: 0 0 8px; }
.cta-band p { margin: 0; color: rgba(255,255,255,.88); }
.area-chip { display: block; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-weight: 800; transition: all .3s ease; }
.area-chip:hover { color: #fff; background: var(--orange); border-color: var(--orange); transform: translateY(-4px); }
.gallery-tile { min-height: 230px; border-radius: 8px; background: linear-gradient(135deg, rgba(14,35,80,.18), rgba(244,121,32,.08)); background-position: center; background-size: cover; background-repeat: no-repeat; cursor: pointer; transition: all .3s ease; }
.gallery-tile.gallery-wardrobe { background-image: linear-gradient(135deg, rgba(14,35,80,.12), rgba(244,121,32,.06)), url("../images/gallery/gallery-wardrobe-stairs.png"); }
.gallery-tile.gallery-taping { background-image: linear-gradient(135deg, rgba(14,35,80,.1), rgba(244,121,32,.06)), url("../images/gallery/gallery-box-taping.png"); }
.gallery-tile.gallery-loaded { background-image: linear-gradient(135deg, rgba(14,35,80,.1), rgba(244,121,32,.06)), url("../images/gallery/gallery-loaded-truck.png"); }
.gallery-tile.gallery-handover { background-image: linear-gradient(135deg, rgba(14,35,80,.1), rgba(244,121,32,.06)), url("../images/gallery/gallery-customer-handover.png"); }
.gallery-tile.gallery-unpacking { background-image: linear-gradient(135deg, rgba(14,35,80,.1), rgba(244,121,32,.06)), url("../images/gallery/gallery-unpacking-setup.png"); }
.gallery-tile.gallery-storage { background-image: linear-gradient(135deg, rgba(14,35,80,.1), rgba(244,121,32,.06)), url("../images/gallery/gallery-storage-inventory.png"); }
.gallery-tile:hover { transform: translateY(-5px); filter: saturate(1.12); }
.map-frame { border-radius: 8px; overflow: hidden; min-height: 420px; border: 1px solid var(--line); box-shadow: 0 16px 36px rgba(14,35,80,.1); }
.map-frame iframe { border: 0; width: 100%; min-height: 420px; display: block; }
.site-footer { background: var(--navy); color: rgba(255,255,255,.82); padding: 70px 0 24px; }
.site-footer h3 { color: #fff; font-size: 1.1rem; margin-bottom: 18px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 8px 0; }
.site-footer a:hover { color: var(--orange); }
.footer-logo { width: 190px; background: transparent; border-radius: 8px; padding: 8px; margin-bottom: 18px; }
.socials { display: flex; gap: 12px; }
.socials a { width: 38px; height: 38px; display: grid; place-items: center; background: rgba(255,255,255,.1); border-radius: 8px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.float-actions { position: fixed; right: 18px; bottom: 18px; z-index: 1000; display: grid; gap: 12px; }
.float-btn { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 1.45rem; box-shadow: 0 12px 28px rgba(14,35,80,.25); animation: pulse 1.8s infinite; }
.float-whatsapp { background: #25d366; }
.float-call { background: var(--orange); }
.float-btn:hover { color: #fff; transform: translateY(-4px); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(244,121,32,.35); } 70% { box-shadow: 0 0 0 14px rgba(244,121,32,0); } 100% { box-shadow: 0 0 0 0 rgba(244,121,32,0); } }
.accordion-button:not(.collapsed) { background: rgba(244,121,32,.1); color: var(--navy); box-shadow: none; }
.table thead th { background: var(--navy); color: #fff; }
.lightbox-modal { position: fixed; inset: 0; display: none; place-items: center; padding: 24px; background: rgba(14,35,80,.82); z-index: 2000; }
.lightbox-modal.show { display: grid; }
.lightbox-content { max-width: 920px; width: 100%; min-height: 520px; border-radius: 8px; background: linear-gradient(135deg, var(--navy), var(--orange)); position: relative; }
.lightbox-close { position: absolute; right: 16px; top: 16px; background: #fff; color: var(--navy); border: 0; border-radius: 50%; width: 42px; height: 42px; }

@media (max-width: 991.98px) {
  section { padding: 62px 0; }
  .hero { min-height: auto; padding: 82px 0 130px; background: linear-gradient(135deg, rgba(14,35,80,.96), rgba(14,35,80,.76), rgba(244,121,32,.46)), url("../images/banners/hero-banner.png") center / cover no-repeat; }
  .quick-quote { margin-top: -70px; }
  .navbar-brand img { width: 132px; height: 58px; }
  .nav-link:after { display: none; }
}

@media (max-width: 575.98px) {
  .topbar .container { justify-content: center !important; text-align: center; }
  .hero h1 { font-size: 2.25rem; }
  .lead-form { padding: 18px; }
  .footer-bottom { display: block; }
  .float-btn { width: 52px; height: 52px; }
}