/* Swift Logistics — custom, original design (no template copy) */
:root{
  --bg: #070A14;
  --bg2: #0B1020;
  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.58);
  --primary: #6EE7FF;
  --primary2: #7C3AED;
  --good: #22c55e;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 24px;
  --container: 1100px;
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --display: "Space Grotesk", var(--font);
}

html[data-theme="light"]{
  --bg: #F6F7FB;
  --bg2: #FFFFFF;
  --surface: rgba(20,23,35,.06);
  --surface2: rgba(20,23,35,.10);
  --stroke: rgba(20,23,35,.14);
  --text: rgba(12,14,22,.92);
  --muted: rgba(12,14,22,.72);
  --muted2: rgba(12,14,22,.60);
  --shadow: 0 18px 55px rgba(12,14,22,.12);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(110,231,255,.20), transparent 55%),
    radial-gradient(900px 500px at 95% 0%, rgba(124,58,237,.22), transparent 55%),
    radial-gradient(700px 500px at 60% 120%, rgba(110,231,255,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  min-height:100vh;
  overflow-x:hidden;
}

a{color:inherit}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
p{line-height:1.6}

.container{
  width:min(var(--container), calc(100% - 40px));
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  background:var(--bg2);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--stroke);
  z-index:9999;
}
.skip-link:focus{left:10px}

.muted{color:var(--muted)}
.lead{font-size:1.1rem; color:var(--muted); max-width:62ch}
.fineprint{font-size:.9rem}
.h3{font-family:var(--display); font-size:1.15rem; margin:0 0 10px}

.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background: rgba(10,12,20,.62);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}
html[data-theme="light"] .site-header{ background: rgba(255,255,255,.78); }

.nav-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  min-width: 230px;
}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-name{font-family:var(--display); font-weight:700; letter-spacing:.2px}
.brand-sub{font-size:.83rem; color:var(--muted2)}

.nav{display:flex; align-items:center; gap:10px}
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border:1px solid var(--stroke);
  border-radius:14px;
  background:var(--surface);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  height:2px; width:18px;
  background:var(--text);
  margin:4px auto;
  opacity:.9;
}
.nav-menu{
  display:flex;
  align-items:center;
  gap:14px;
}

/* Drawer overlay (mobile) */
.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index:70;
}
body.nav-open{
  overflow:hidden;
}
body.nav-open .nav-overlay{
  opacity:1;
  pointer-events:auto;
}


/*
  FIX (mobile): When the hamburger menu is open on iOS Safari, some pill/outline
  CTAs from the page content can render as an empty dark rounded bar behind the
  menu (backdrop-filter quirk). Hide hero action CTAs while nav is open.
*/
body.nav-open .page-hero .hero-actions{
  display:none !important;
}

/* Extra safety: on iOS Safari, other pill/outline buttons (not just .btn-ghost)
   can still render as an empty dark bar behind the open mobile menu.
   While the nav drawer is open, hide buttons in the page content (main).
   This does NOT affect buttons inside the header nav drawer.
*/
@media (max-width: 860px){
  /* Hide page-content buttons while the nav drawer is open (prevents stray bars) */
  body.nav-open main .btn,
  body.nav-open main a.btn,
  body.nav-open main button.btn{
    display: none !important;
  }
}


.nav-link{
  text-decoration:none;
  color:var(--muted);
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  transition: all .2s ease;
}
.nav-link:hover{
  color:var(--text);
  background:var(--surface);
  border-color:var(--stroke);
}
.nav-actions{display:flex; gap:10px; align-items:center; margin-left:6px}

.btn{
  border-radius:14px;
  padding:10px 14px;
  border:1px solid var(--stroke);
  background:var(--surface);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
  user-select:none;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(110,231,255,.35)}
.btn:active{transform: translateY(0px)}
.btn-primary{
  background: linear-gradient(135deg, rgba(110,231,255,.95), rgba(124,58,237,.95));
  border-color: transparent;
  color: #0b1020;
  font-weight: 700;
}
.btn-primary:hover{filter: brightness(1.03)}
.btn-ghost{background:transparent}
.btn-block{width:100%}
.icon-btn{
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:var(--surface);
  cursor:pointer;
}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  padding: 16px 0 24px;
  /* Keep hero content close to the header (remove large empty band) */
}
.hero-media{
  position:absolute;
  inset:0;
  background: url("../images/ship-top-containers.jpg") center/cover no-repeat;
  opacity:.55;
  filter: saturate(1.05) contrast(1.08);
  overflow:hidden;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
  animation: heroBreath 14s ease-in-out infinite;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(600px 320px at 18% 22%, rgba(110,231,255,.20), transparent 60%),
    radial-gradient(650px 320px at 82% 20%, rgba(124,58,237,.18), transparent 60%),
    linear-gradient(180deg, rgba(7,10,20,.12), rgba(7,10,20,.65));
  pointer-events:none;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 350px at 15% 15%, rgba(110,231,255,.26), transparent 55%),
    radial-gradient(700px 350px at 85% 20%, rgba(124,58,237,.26), transparent 55%),
    linear-gradient(180deg, rgba(7,10,20,.25), rgba(7,10,20,.92));
  pointer-events:none;
}
.hero-fade{
  position:absolute;
  inset:auto 0 0 0;
  height: 70px;
  background: linear-gradient(180deg, transparent, var(--bg2));
  pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: start;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size:.92rem;
}
.pill .dot{width:8px;height:8px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary2))}
.hero-copy h1{
  font-family: var(--display);
  font-size: clamp(2.0rem, 3.2vw, 3.1rem);
  line-height: 1.05;
  margin: 14px 0 10px;
  letter-spacing: -0.6px;
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin: 18px 0 14px}
.hero-metrics{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.metric{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 12px 12px;
}
.metric-title{font-weight:700}
.metric-text{font-size:.92rem}

.glass-card{
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  padding: 18px;
  position:relative;
  overflow:hidden;
}
.glass-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(500px 260px at 30% 10%, rgba(110,231,255,.20), transparent 55%),
              radial-gradient(500px 260px at 90% 30%, rgba(124,58,237,.20), transparent 55%);
  pointer-events:none;
}
.glass-card > *{position:relative}
.checklist{list-style:none; padding:0; margin: 10px 0 0; display:grid; gap:10px}
.checklist li{display:flex; gap:10px; align-items:flex-start; color:var(--muted)}
.checklist li span{color:var(--good); font-weight:800}
.mini-cta{margin-top:14px}

/* Sections */
.section{padding: 58px 0}
.section.alt{
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.03), transparent);
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.section-head{margin-bottom: 18px}
.section-head h2{
  font-family: var(--display);
  font-size: clamp(1.55rem, 2.3vw, 2.2rem);
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}
.section-head p{max-width: 70ch; margin:0}

.cards{display:grid; gap: 14px}
.services-grid{
  grid-template-columns: repeat(3, 1fr);
}
.card{
  border:1px solid var(--stroke);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  transition: transform .18s ease, border-color .2s ease, background .2s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(110,231,255,.35);
  background: rgba(255,255,255,.07);
}
.card-icon{font-size:1.35rem; margin-bottom: 10px}
.card h3{margin:0 0 8px; font-family: var(--display)}
.link{
  display:inline-flex;
  gap:8px;
  align-items:center;
  margin-top: 10px;
  color: var(--primary);
  text-decoration:none;
  font-weight: 700;
}

.cta-banner{
  margin-top: 18px;
  border-radius: var(--radius2);
  border:1px solid var(--stroke);
  background:
    radial-gradient(700px 260px at 25% 50%, rgba(110,231,255,.16), transparent 60%),
    radial-gradient(700px 260px at 85% 50%, rgba(124,58,237,.16), transparent 60%),
    var(--surface);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.cta-banner.compact{padding: 14px}
.cta-banner h3{margin:0 0 6px; font-family: var(--display)}
.cta-banner p{margin:0}

.two-col{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items:start;
}
.feature-list{display:grid; gap:14px; margin:18px 0}
.feature{display:flex; gap:12px; align-items:flex-start}
.feature-icon{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:grid; place-items:center;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  flex: 0 0 auto;
}

.media-stack{display:grid; gap:12px; align-content:start}
.media{
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
.media img{width:100%; height:auto}
.media.small{width:100%; transform:none}
.media.tall img{aspect-ratio: 16/11; object-fit:cover}
.media.tall{margin-bottom: 12px}
.quote-card{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  border-radius: var(--radius2);
  padding: 16px;
}

.steps{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.step{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  padding: 14px;
}
.step-num{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:grid; place-items:center;
  font-weight: 800;
  color: #0b1020;
  background: linear-gradient(135deg, rgba(110,231,255,.95), rgba(124,58,237,.95));
  margin-bottom: 10px;
}
.step h3{margin:0 0 8px; font-family: var(--display)}
.step p{margin:0}

.contact-strip{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}
.contact-chip{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  text-decoration:none;
  min-width: 220px;
}
.contact-chip strong{display:block}
.contact-chip span span{display:block}
.chip-ico{width:36px;height:36px;border-radius:14px;border:1px solid var(--stroke);background:rgba(255,255,255,.05);display:grid;place-items:center}

/* Page hero */
.page-hero{
  position:relative;
  overflow:hidden;
  padding: 48px 0 26px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.page-hero-bg{
  position:absolute;
  inset:-30px -30px 0 -30px;
  background-size: cover;
  background-position: center;
  opacity:.18;
  filter: saturate(1.12) contrast(1.05);
}
.page-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 320px at 20% 10%, rgba(110,231,255,.22), transparent 55%),
    radial-gradient(700px 320px at 85% 20%, rgba(124,58,237,.22), transparent 55%),
    linear-gradient(180deg, rgba(7,10,20,.35), rgba(7,10,20,.95));
  pointer-events:none;
}
.page-hero-inner{position:relative}
.page-hero-inner h1{
  font-family: var(--display);
  font-size: clamp(2.0rem, 3.1vw, 2.8rem);
  margin: 0 0 10px;
}
.page-hero-inner p{margin:0; max-width: 72ch}

/* Services detail */
.toc{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom: 18px;
}
.toc a{
  text-decoration:none;
  padding: 8px 12px;
  border:1px solid var(--stroke);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
}
.toc a:hover{color:var(--text); border-color: rgba(110,231,255,.35)}

.service-block{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  padding: 18px;
  border-radius: var(--radius2);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  margin: 14px 0;
}
.service-media{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.service-media img{width:100%; height:100%; object-fit:cover; aspect-ratio: 16/11}
.service-copy h2{
  margin: 0 0 8px;
  font-family: var(--display);
  text-align: center; /* center only the service heading */
}
.service-copy{
  /* Center the copy vertically so each service block looks balanced */
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 12px;
  padding: 6px 4px;
}
.service-copy p{ margin:0 }
.bullets{margin: 12px 0 0 18px; color: var(--muted)}
.bullets li{margin: 8px 0}

/* About + coverage */
.mini-cards{grid-template-columns: repeat(3, 1fr); margin-top: 12px}
.reasons-grid{grid-template-columns: repeat(3, 1fr)}
.coverage{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
}
.gallery{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.gallery img{
  border-radius: 16px;
  border: 1px solid var(--stroke);
  height: 100%;
  object-fit: cover;
}
.gallery img:first-child{grid-column: 1 / -1; aspect-ratio: 16/9}

.footer-badges{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px}
.badge{
  font-size:.85rem;
  color: var(--muted);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: 6px 10px;
}

/* Contact page */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
}
.contact-card, .map-card{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius2);
  padding: 18px;
}
.contact-info{display:grid; gap: 12px; margin: 14px 0}
.info-row{display:flex; gap: 12px; align-items:flex-start}
.info-ico{
  width: 42px; height: 42px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  display:grid; place-items:center;
  flex: 0 0 auto;
}
.info-label{font-size:.9rem; color: var(--muted2); margin-bottom: 2px}
.divider{height:1px; background: var(--stroke); margin: 16px 0}

/* Contact page - center the whole "Get in touch" content block */
.contact-grid{
  display:flex;
  justify-content:center;
}
.contact-card{
  width:100%;
  max-width: 980px;
  margin: 0 auto;
  text-align:center;
}
.contact-info{
  width:100%;
  max-width: 560px;
  margin: 18px auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
}
.info-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
}
.info-row > div{
  text-align:center;
}
@media (max-width: 640px){
  .contact-card{ text-align:center; }
  .contact-card h1, .contact-card h2{ text-align:center; }
}


.form{display:grid; gap: 12px}
.form label{display:grid; gap: 7px; color: var(--muted)}
input,select,textarea{
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  padding: 12px 12px;
  outline:none;
  width: 100%;
  box-sizing: border-box;
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(110,231,255,.45);
  /* Slightly tighter focus ring so adjacent fields never visually clash */
  box-shadow: 0 0 0 3px rgba(110,231,255,.12);
}
textarea{resize: vertical; min-height: 120px}
.grid-2{display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px}
.grid-3{display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 22px}
.form-actions{display:flex; gap: 10px; flex-wrap:wrap; margin-top: 6px}

.map-wrap{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  height: 320px;
}
.map-wrap iframe{width:100%; height:100%; border:0}
.map-below{margin-top: 14px}
.mini-gallery{display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px}
.mini-gallery img{
  border-radius: 16px;
  border: 1px solid var(--stroke);
  aspect-ratio: 16/11;
  object-fit: cover;
}

.faq details{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 10px 0;
}
.faq summary{cursor:pointer; font-weight:700; color: var(--text)}
.faq p{margin: 10px 0 0}

/* Footer */

/* ------------------------------------------------------------
   Quote Modal – spacing + no-scrollbar polish (2026-02)
   Fixes:
   - labels sitting too close to the previous row's inputs
   - Notes textarea height too tall (forces cramped layout)
   - hides inner scrollbars (still allows scrolling if needed)
------------------------------------------------------------ */

#quoteModal #quoteForm.form{
  /* more vertical breathing room between the grid rows */
  gap: 34px !important;
}

#quoteModal #quoteForm .grid-3,
#quoteModal #quoteForm .grid-2{
  /* keep columns spaced evenly */
  gap: 22px !important;
}

#quoteModal #quoteForm label{
  /* label-to-control spacing */
  gap: 12px !important;
}

#quoteModal #quoteForm textarea{
  /* reduce Notes height to reclaim space for row spacing */
  min-height: 80px !important;
  height: 80px !important;
}

/* Center the quote modal title & subtitle (keep rest untouched) */
#quoteModal .modal-head{
  position: relative;
  justify-content: center !important;
}
#quoteModal .modal-head > div{
  width: 100%;
  text-align: center;
    padding-left: clamp(44px, 6vw, 72px);
  padding-right: clamp(44px, 6vw, 72px); /* reserve space so the close button doesn't offset centering */
}
#quoteModal .modal-head .modal-close{
  position: absolute;
  right: 0;
  top: 0;
}



/* Hide any inner scrollbar while preserving scroll (small screens) */
#quoteModal .modal-body{
  scrollbar-width: none;
}
#quoteModal .modal-body::-webkit-scrollbar{
  width: 0;
  height: 0;
}
.site-footer{
  padding: 34px 0 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.12);
}
html[data-theme="light"] .site-footer{ background: rgba(20,23,35,.04); }
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr .8fr 1fr;
  gap: 18px;
  align-items:start;
}
.footer-brand{
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
}
.site-footer h3{margin: 4px 0 12px; font-size: 1rem}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap: 10px}
.footer-links a{text-decoration:none; color: var(--muted)}
.footer-links a:hover{color:var(--text)}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Modal */
.modal{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 9999;
}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.modal-card{
  position:relative;
  width:min(760px, calc(100% - 24px));
  margin: 6vh auto;
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.05));
  box-shadow: var(--shadow);
  padding: 16px;
  /* Prevent horizontal overflow that can create a bottom scrollbar */
  overflow-x:hidden;
}

/* Allow grid children to shrink instead of forcing page overflow */
.grid-2 > *, .grid-3 > *{min-width:0}

/* Defensive: any form control stays within its column */
input, select, textarea{max-width:100%}
.modal-head{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:flex-start;
  margin-bottom: 12px;
}
.modal-head h2{margin: 0 0 6px; font-family: var(--display)}
.modal-head p{margin:0}

/* Floating action button */
.fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  color: var(--text);
  box-shadow: var(--shadow);
  cursor:pointer;
  display:none;
}
.fab.show{display:grid; place-items:center}
.fab:hover{border-color: rgba(110,231,255,.35)}

/* Reveal animations */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1; transform: translateY(0px)}

/* Responsive */
@media (max-width: 980px){
  /* Slightly darker scrim on small screens to avoid iOS blur artifacts */
  body.nav-open .nav-overlay{ background: rgba(3,6,12,.78); }
  .hero-grid{grid-template-columns: 1fr; }
  .hero-metrics{grid-template-columns: 1fr; }
  .services-grid{grid-template-columns: 1fr 1fr}
  .two-col{grid-template-columns: 1fr}
  .steps{grid-template-columns: 1fr 1fr}
  .footer-grid{grid-template-columns: 1fr 1fr}
  .contact-grid{grid-template-columns: 1fr}
  .service-block{grid-template-columns: 1fr}
  .grid-3{grid-template-columns: 1fr}
  .mini-cards{grid-template-columns: 1fr}
  .reasons-grid{grid-template-columns: 1fr 1fr}
  .coverage{grid-template-columns: 1fr}
}
@media (max-width: 720px){
  .nav-toggle{display:block}
    .nav-menu{
    position: fixed;
    /* Mobile drawer: start below the sticky header */
    top: 76px;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(82vw, 320px);
    border: 1px solid var(--stroke);
    /* Solid background on phones prevents the dark/ghost bar artifact */
    background: rgba(10,12,20,1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-left-color: rgba(255,255,255,.08);
    border-radius: 18px 0 0 18px;
    /*
      Phones: keep "Home" clear of the top edge/pill that some mobile browsers
      render behind the drawer.
    */
    padding: calc(18px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom));
    height: calc(100dvh - 76px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
    display:flex;
    transform: translateX(110%);
    transition: transform .2s ease;
    z-index: 90;
  }
  html[data-theme="light"] .nav-menu{background: rgba(255,255,255,.98)}
  .nav-menu.open{transform: translateX(0)}
  .nav-actions{margin-left:0; flex-direction:column}
  .media-stack{gap: 14px;}
  .media-card img{max-height: 240px;}
  .services-grid{grid-template-columns: 1fr}
  .steps{grid-template-columns: 1fr}
  .footer-grid{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
}

/* ------------------------------
   Next‑gen “AI powered” motion layer
---------------------------------*/

/* Subtle animated grid + aurora wash */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(800px 600px at 15% 20%, rgba(110,231,255,.12), transparent 60%),
    radial-gradient(900px 700px at 85% 10%, rgba(124,58,237,.14), transparent 60%),
    radial-gradient(700px 700px at 70% 85%, rgba(110,231,255,.10), transparent 62%),
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, auto, auto, 80px 80px, 80px 80px;
  background-position: center;
  opacity:.55;
  filter: blur(.0px);
  animation: gridDrift 16s ease-in-out infinite;
  z-index:-1;
}
html[data-theme="light"] body::before{
  opacity:.25;
  background:
    radial-gradient(800px 600px at 15% 20%, rgba(110,231,255,.14), transparent 60%),
    radial-gradient(900px 700px at 85% 10%, rgba(124,58,237,.14), transparent 60%),
    radial-gradient(700px 700px at 70% 85%, rgba(110,231,255,.10), transparent 62%),
    linear-gradient(to right, rgba(10,12,20,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,12,20,.05) 1px, transparent 1px);
  background-size:auto, auto, auto, 84px 84px, 84px 84px;
}
@keyframes gridDrift{
  0%,100%{ background-position: 0% 0%, 0% 0%, 0% 0%, 0 0, 0 0; }
  50%{ background-position: 10% 15%, -10% 8%, 5% -10%, 18px 12px, 18px 12px; }
}

/* Particle canvas */
#fxCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.42;
}
html[data-theme="light"] #fxCanvas{ opacity:.22; }

/* Stronger card “neon edge” */
.card, .glass-card, .service-block, .cta-banner{
  position:relative;
}
.card::after, .glass-card::after, .service-block::after, .cta-banner::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(120deg, rgba(110,231,255,.55), rgba(124,58,237,.45), rgba(110,231,255,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.28;
  transition: opacity .25s ease;
  pointer-events:none;
}
.card:hover::after, .glass-card:hover::after, .service-block:hover::after, .cta-banner:hover::after{opacity:.55;}

/* Reveal animations (stagger capable) */
.reveal{
  opacity:0;
  transform: translateY(14px) scale(.985);
  transition:
    opacity .75s ease,
    transform .75s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}
.reveal.in{
  opacity:1;
  transform: translateY(0) scale(1);
}
.reveal-left{ transform: translateX(-16px) scale(.99); }
.reveal-right{ transform: translateX(16px) scale(.99); }
.reveal-left.in, .reveal-right.in{ transform: translateX(0) scale(1); }

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* Service cards: slight lift + animated sheen */
.services-grid .card{
  overflow:hidden;
}
.services-grid .card::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: radial-gradient(circle at 20% 20%, rgba(110,231,255,.22), transparent 45%),
              radial-gradient(circle at 70% 30%, rgba(124,58,237,.20), transparent 55%);
  transform: rotate(12deg);
  opacity:.0;
  transition: opacity .35s ease;
}
.services-grid .card:hover::before{ opacity:.95; }
.services-grid .card:hover{ transform: translateY(-6px); }

/* Media stack: no overlap + professional collage */
.media-stack{
  display:grid;
  gap:14px;
}
.media-stack .media{
  border-radius: 24px;
  overflow:hidden;
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.media-stack .media img{
  width:100%;
  height:320px;
  object-fit:cover;
}
.media-stack .media.small img{ height:220px; }

@media (max-width: 980px){
  .media-stack .media img{ height:280px; }
  .media-stack .media.small img{ height:200px; }
}


@keyframes heroPan{
  0%,100%{ transform: scale(1.08) translate3d(0,0,0); background-position: 50% 50%; }
  50%{ transform: scale(1.12) translate3d(-1.5%, -0.5%, 0); background-position: 55% 45%; }
}

@keyframes heroBreath{
  0%,100%{ transform: scale(1.02) translate3d(0,0,0); filter: saturate(1.05) contrast(1.08); }
  50%{ transform: scale(1.05) translate3d(-0.6%, -0.3%, 0); filter: saturate(1.12) contrast(1.10); }
}



/* === DARK THEME RESTORE (High Contrast) === */
:root{
  --bg:#070a12;
  --bg2:#0b1020;
  --surface: rgba(17,24,39,0.62);
  --surface2: rgba(15,23,42,0.82);
  --text:#e6edf7;
  --muted:#b6c2d6;
  --primary:#38bdf8;
  --primary2:#6366f1;
  --border: rgba(148,163,184,0.18);
  --shadow: 0 18px 50px rgba(0,0,0,0.35);
}

body{
  background:
    radial-gradient(1100px 650px at 10% 0%, rgba(56,189,248,0.12), transparent 60%),
    radial-gradient(900px 520px at 90% 10%, rgba(99,102,241,0.14), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;
  color: var(--text) !important;
}

/* Header/Nav */
.nav, header.nav, .site-header{
  background: rgba(10,14,24,0.72) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(12px);
}
.nav a, header.nav a, .site-header a{ color: var(--text) !important; }
.nav a:hover, .site-header a:hover{ color: var(--primary) !important; }

/* Hero readability */
.hero::before, .hero-section::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 15% 25%, rgba(56,189,248,0.18), transparent 60%),
    radial-gradient(900px 520px at 85% 15%, rgba(99,102,241,0.20), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,0.82), rgba(2,6,23,0.55));
  pointer-events:none;
  z-index:1;
}
.hero video, .hero-section video{
  opacity: 0.55 !important;
  filter: saturate(1.05) contrast(1.05) brightness(0.85);
}
.hero .hero-content, .hero-section .hero-content{ position:relative; z-index:2; }
.hero h1, .hero-section h1{ color: var(--text) !important; text-shadow: 0 10px 30px rgba(0,0,0,0.55); }
.hero p, .hero-section p{ color: var(--muted) !important; }

/* Cards */
.card, .service-card, .feature-card{
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.card p, .service-card p, .feature-card p, li{ color: var(--muted) !important; }
h2, h3, .section-title{ color: var(--text) !important; }

/* Buttons */
.btn, a.btn, button.btn{ border-radius: 999px !important; }
.btn.primary, .btn-primary, a.primary{
  background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
  color:#06101a !important;
  border:0 !important;
}
.btn.secondary, .btn-secondary, a.secondary{
  background: rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
  border:1px solid var(--border) !important;
}

/* Modal readability */
.modal, .quote-modal, .dialog{
  background: rgba(2,6,23,0.92) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
input, select, textarea{
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(148,163,184,0.25) !important;
}
input::placeholder, textarea::placeholder{ color: rgba(230,237,247,0.55) !important; }

footer, .footer{
  background: rgba(10,14,24,0.9) !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--border) !important;
}


/* === HERO TOP READABILITY FIX === */
.hero::before, .hero-section::before{
  background:
    radial-gradient(900px 520px at 15% 25%, rgba(56,189,248,0.12), transparent 60%),
    radial-gradient(900px 520px at 85% 15%, rgba(99,102,241,0.14), transparent 60%),
    linear-gradient(180deg,
      rgba(2,6,23,0.94) 0%,
      rgba(2,6,23,0.82) 35%,
      rgba(2,6,23,0.62) 70%,
      rgba(2,6,23,0.45) 100%) !important;
}

.hero video, .hero-section video{
  opacity: 0.45 !important;
  filter: saturate(1.0) contrast(1.08) brightness(0.70) !important;
}

.hero .hero-content, .hero-section .hero-content{
  max-width: 980px;
  margin: 0 auto;
  padding: 22px 22px;
}

.hero .hero-content{
  background: rgba(2,6,23,0.55);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
}

.hero h1, .hero-section h1{
  color: #f8fbff !important;
  text-shadow: 0 10px 30px rgba(0,0,0,0.65) !important;
}

.hero p, .hero-section p,
.hero .hero-content li, .hero-section li{
  color: rgba(230,237,247,0.88) !important;
}

.hero .eyebrow, .hero .kicker, .hero small{
  color: rgba(230,237,247,0.78) !important;
}

@media (max-width: 720px){
  .hero .hero-content{
    padding: 18px 16px;
    border-radius: 16px;
  }
  .hero h1{ font-size: clamp(28px, 7vw, 44px) !important; }
}


/* === HERO CONTRAST HOTFIX (make top readable) === */
.hero-video{
  opacity: 0.60 !important;
  filter: brightness(0.55) contrast(1.12) saturate(1.05) !important;
}

.hero-overlay{
  background:
    radial-gradient(700px 360px at 18% 22%, rgba(110,231,255,.14), transparent 60%),
    radial-gradient(750px 360px at 82% 20%, rgba(124,58,237,.14), transparent 60%),
    linear-gradient(180deg,
      rgba(2,6,23,.92) 0%,
      rgba(2,6,23,.78) 38%,
      rgba(2,6,23,.62) 70%,
      rgba(2,6,23,.50) 100%) !important;
}

/* Put hero text on a glass panel */
.hero-copy{
  background: rgba(2,6,23,.55) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  border-radius: 18px !important;
  padding: 22px 22px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.48) !important;
  backdrop-filter: blur(10px);
}

.hero-copy h1{
  color:#f8fbff !important;
  text-shadow: 0 10px 30px rgba(0,0,0,.70) !important;
}
.hero-copy .lead,
.hero-copy p{
  color: rgba(230,237,247,.90) !important;
}

.pill{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(148,163,184,.20) !important;
  color: rgba(230,237,247,.92) !important;
}

.metric-title{ color:#f1f5ff !important; }
.metric-text{ color: rgba(230,237,247,.80) !important; }

@media (max-width: 840px){
  .hero-copy{ padding:18px 16px !important; }
}


/* === HERO: NO VIDEO (Static Background) === */
.hero, .hero-section {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(2,6,23,0.92) 0%, rgba(2,6,23,0.78) 40%, rgba(2,6,23,0.65) 100%),
    url("assets/images/port-cranes.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Remove any leftover hero video space */
.hero video, .hero-section video, .hero-video {
  display: none !important;
}

/* Make sure overlay exists but doesn't double-darken weirdly */
.hero::before, .hero-section::before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 15% 25%, rgba(56,189,248,0.14), transparent 60%),
    radial-gradient(900px 520px at 85% 15%, rgba(99,102,241,0.16), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,0.88) 0%, rgba(2,6,23,0.70) 45%, rgba(2,6,23,0.58) 100%);
  pointer-events:none;
  z-index:1;
}

.hero .hero-content, .hero-section .hero-content {
  position: relative;
  z-index: 2;
}

/* Strong readable hero text */
.hero h1, .hero-section h1 {
  color: #f8fbff !important;
  text-shadow: 0 10px 30px rgba(0,0,0,0.65) !important;
}
.hero p, .hero-section p, .hero li {
  color: rgba(230,237,247,0.90) !important;
}

/* Add a solid glass panel behind main hero content */
.hero .hero-content, .hero-section .hero-content {
  background: rgba(2,6,23,0.62);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  padding: 26px 26px;
  max-width: 1120px;
}

@media (max-width: 720px) {
  .hero .hero-content, .hero-section .hero-content {
    padding: 18px 16px;
    border-radius: 16px;
  }
}



/* === HERO CONTRAST FIX (Make text readable) === */
.hero, .hero-section{
  color: #f8fbff;
}

/* Stronger overlay on the whole hero */
.hero::before, .hero-section::before{
  background:
    radial-gradient(900px 520px at 15% 25%, rgba(56,189,248,0.10), transparent 60%),
    radial-gradient(900px 520px at 85% 15%, rgba(99,102,241,0.12), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,0.94) 0%, rgba(2,6,23,0.86) 40%, rgba(2,6,23,0.74) 75%, rgba(2,6,23,0.62) 100%) !important;
}

/* Make background image slightly darker */
.hero, .hero-section{
  background-blend-mode: multiply;
}

/* Put ALL hero text inside a darker panel */
.hero .hero-content, .hero-section .hero-content{
  background: rgba(2,6,23,0.78) !important;
  border: 1px solid rgba(148,163,184,0.22) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.55) !important;
}

/* Force readable text colors */
.hero .hero-content *{
  color: #f8fbff !important;
}

.hero .hero-content p,
.hero .hero-content li{
  color: rgba(230,237,247,0.92) !important;
}

/* Make the small top line more visible */
.hero .hero-content .eyebrow,
.hero .hero-content .kicker,
.hero .hero-content small,
.hero .hero-content .subtle{
  color: rgba(230,237,247,0.88) !important;
  letter-spacing: 0.02em;
}

/* Increase heading weight and clarity */
.hero .hero-content h1{
  font-weight: 800 !important;
  text-shadow: 0 12px 34px rgba(0,0,0,0.70) !important;
}

/* Buttons: ensure readable */
.hero .btn, .hero a.btn{
  font-weight: 700;
}

/* If there is a right-side hero card, increase its opacity too */
.hero .hero-card, .hero-section .hero-card{
  background: rgba(2,6,23,0.78) !important;
}




/* =========================================================
   Swift Logistics — Professional Readable Overhaul
   ========================================================= */
:root{
  --bg0:#070a12;
  --bg1:#0b1020;
  --surface:#0f172a;
  --surface2:#111b34;
  --text:#f1f5ff;
  --muted:#b7c2d6;
  --muted2:#92a3bd;
  --primary:#38bdf8;
  --primary2:#6366f1;
  --border:rgba(148,163,184,0.20);
  --shadow:0 18px 55px rgba(0,0,0,0.55);
  --radius:18px;
  --max:1180px;
}

html,body{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 650px at 10% 0%, rgba(56,189,248,0.10), transparent 60%),
    radial-gradient(900px 520px at 90% 10%, rgba(99,102,241,0.12), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1)) !important;
  color: var(--text) !important;
}

/* Make default text readable everywhere */
p,li,span{color: var(--muted) !important}
h1,h2,h3,h4{color: var(--text) !important}
a{color: var(--primary)}

/* NAV (keep your layout, improve contrast) */
.nav, header.nav, .site-header{
  background: rgba(10,14,24,0.78) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(12px);
}
.nav a, header.nav a, .site-header a{color: var(--text) !important}
.nav a:hover, .site-header a:hover{color: var(--primary) !important}

/* HERO: remove dependence on video/image for readability */
.hero, .hero-section{
  position: relative;
  padding: 110px 18px 70px;
  overflow: hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(56,189,248,0.16), transparent 60%),
    radial-gradient(900px 520px at 85% 12%, rgba(99,102,241,0.16), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,0.92) 0%, rgba(2,6,23,0.82) 45%, rgba(2,6,23,0.68) 100%);
  z-index:0;
}

.hero::before, .hero-section::before{display:none !important}
.hero video, .hero-section video, .hero-video{display:none !important}

.hero-shell{
  position:relative;
  z-index:1;
  max-width: var(--max);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 22px;
  align-items: start;
}

.hero-left,
.hero-right{
  background: rgba(15,23,42,0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.hero-left{padding: 26px 26px}
.hero-right{padding: 22px 22px}

.hero-left h1{
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 850;
  margin: 10px 0 14px;
}
.hero-left p{
  font-size: 1.05rem;
  color: rgba(230,237,247,0.92) !important;
  max-width: 62ch;
}

.hero-left .btn, .hero-right .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration:none;
}

.btn-primary, .btn.primary{
  background: linear-gradient(135deg, var(--primary), var(--primary2)) !important;
  color: #06101a !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(56,189,248,0.18);
}
.btn-secondary, .btn.secondary{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Right card */
.hero-right h3{
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.hero-right ul{margin: 10px 0 14px; padding-left: 18px}
.hero-right li{margin: 8px 0; color: rgba(230,237,247,0.86) !important}
.hero-right-note{
  margin-top: 12px;
  color: var(--muted2) !important;
  font-size: 0.95rem;
}

/* Sections: remove heavy background images and keep clean */
section{
  background: transparent !important;
}
.section, .services, .about, .contact, .cta, .features{
  padding: 70px 18px;
}
.container{
  max-width: var(--max);
  margin: 0 auto;
}

/* Cards */
.card, .service-card, .feature-card{
  background: rgba(15,23,42,0.82) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
.card p, .service-card p{color: var(--muted) !important}

/* Headings spacing */
h2, .section-title{
  font-size: clamp(28px, 2.4vw, 40px);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

/* Modal */
.modal, .quote-modal, .dialog{
  background: rgba(2,6,23,0.94) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
input, select, textarea{
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(148,163,184,0.25) !important;
}
input::placeholder, textarea::placeholder{
  color: rgba(230,237,247,0.55) !important;
}

/* Responsive */
@media (max-width: 980px){
  .hero-shell{grid-template-columns: 1fr}
  .hero{padding-top: 90px}
}


/* === HERO LAYOUT FIX (use existing hero-grid) === */
.hero .hero-grid{
  max-width: var(--max, 1180px);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 22px;
  align-items:start;
}
.hero .hero-copy, .hero .hero-aside{
  background: rgba(15,23,42,0.80);
  border: 1px solid rgba(148,163,184,0.20);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
}
.hero .hero-copy{ padding: 26px 26px; }
.hero .hero-aside{ padding: 22px 22px; }
.hero .pill{ color: rgba(230,237,247,0.88); }
.hero .hero-copy h1{ color:#f8fbff; font-weight:850; text-shadow:0 12px 34px rgba(0,0,0,0.7); }
.hero .lead{ color: rgba(230,237,247,0.92) !important; }
.hero .hero-aside h3, .hero .hero-aside h4{ color:#f8fbff !important; }
.hero .hero-aside li{ color: rgba(230,237,247,0.86) !important; }
@media (max-width: 980px){
  .hero .hero-grid{ grid-template-columns: 1fr; }
}


/* === HIDE THEME TOGGLE === */
.theme-toggle, .toggle-theme, #themeToggle, [data-theme-toggle]{display:none !important;}

/* === SELECT OPTION READABILITY (Quote modal) === */
.modal select, .quote-modal select, .dialog select{
  background: rgba(255,255,255,0.06) !important;
  color: #f8fbff !important;
}
.modal select option, .quote-modal select option, .dialog select option{
  background: #0b1020 !important;
  color: #f8fbff !important;
}

/* === MODAL READABILITY TWEAK === */
.modal, .quote-modal, .dialog{
  backdrop-filter: blur(14px);
}

/* === SELECT OPTION READABILITY FINAL (Quote modal) === */
#quoteModal select, #quoteModal option,
.modal select, .modal option{
  color: #f8fbff;
}
#quoteModal select{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
}
/* Windows/Chrome uses system popup for options — ensure at least readable */
#quoteModal select option{
  background-color: #0b1224;
  color: #f8fbff;
}

/* === HIDE THEME TOGGLE HARD FINAL === */
.theme-toggle, .toggle-theme, #themeToggle, [data-theme-toggle], .nav-theme {display:none !important;}

/* === NONAJAX QUOTE FIX === */
#quoteModal{ z-index: 9999; }
#quoteModal select, #quoteModal option{ color:#f8fbff; }
#quoteModal select option{ background-color:#0b1224; color:#f8fbff; }

/* === PHONE FIELD TWEAK === */
.field input[type="tel"]{width:100%;}

/* === FORM LAYOUT HELPERS === */
.form-grid .span-2{grid-column: 1 / -1;}

/* === QUOTE FORM: SPACING & READABILITY === */
#quoteForm.form{ gap: 16px; }

#quoteForm label{
  gap: 10px;
  line-height: 1.25;
}

#quoteForm input,
#quoteForm select,
#quoteForm textarea{
  padding-top: 13px;
  padding-bottom: 13px;
}

#quoteForm .grid-2{ gap: 16px; }
#quoteForm .grid-3{ gap: 16px; }

/* Keep status message from squeezing buttons */
#quoteForm .form-actions{ flex-wrap: wrap; }
#quoteForm #quoteStatus{ flex-basis: 100%; margin-top: 6px; }


/* === Quote Modal: ensure action buttons are always visible === */
.modal .modal-content{
  max-height: min(86vh, 780px);
  display: flex;
  flex-direction: column;
}
/* allow content to scroll, not the whole modal */
.modal .modal-body{
  overflow: auto;
  padding-bottom: 20px;
  -webkit-overflow-scrolling: touch;
}
/* footer sticks to bottom */
.modal .modal-actions{
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 14px 0 6px;
  background: linear-gradient(to bottom, rgba(10,14,24,0), rgba(10,14,24,0.92) 30%, rgba(10,14,24,0.98));
  backdrop-filter: blur(10px);
}
.modal .modal-actions .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* =========================================================
   Extra responsiveness polish (mobile + tablet)
   ========================================================= */

@media (max-width: 1024px){
  .section{padding: 72px 0}
  .section-header h2{font-size: 34px}
}

@media (max-width: 480px){
  .nav-inner{padding: 12px 14px}
  .brand-title{font-size: 16px}
  .brand-sub{font-size: 12px}
  .nav-cta .btn{padding: 10px 14px; font-size: 14px}

  .section{padding: 64px 0}
  .section-header h2{font-size: 30px}
  .section-header p{font-size: 16px}

  .card{padding: 18px}
  .service-card{padding: 16px}

  .modal-card{width: calc(100% - 24px); padding: 18px}
  .modal-card h3{font-size: 28px}
  .modal-actions{flex-direction: column}
  .modal-actions .btn{width: 100%}
}



/* About: 3-up gallery row */
.gallery-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;margin-top:8px}
.gallery-row img{width:100%;height:260px;object-fit:cover;border-radius:22px;box-shadow:0 14px 40px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
@media (max-width:900px){.gallery-row{grid-template-columns:1fr}.gallery-row img{height:220px}}

/* Services page spacing polish (reduce large gap above recommendation banner) */
body.services-page .section.services-main{ padding-bottom: 28px; }
body.services-page .cta-banner{ padding-top: 28px; }
@media (max-width: 720px){
  body.services-page .section.services-main{ padding-bottom: 22px; }
  body.services-page .cta-banner{ padding-top: 22px; }
}


/* Contact page centering fix */
body.contact-page .contact-grid{
  grid-template-columns: 1fr;
  justify-items: center;
}
body.contact-page .contact-card{
  /* Keep the card visually centered with balanced empty space on both sides */
  width: min(640px, 100%);
  margin: 0 auto;
  padding-left: 44px;
  padding-right: 44px;
}

/* Center the content block inside the card so it doesn't feel left-heavy */
body.contact-page .contact-card h1,
body.contact-page .contact-card h2{
  text-align: center;
}

body.contact-page .contact-card .contact-info{
  max-width: 520px;
  margin: 0 auto;
}

/* =========================================================
   Quote modal safety: prevent bottom button from clipping
   ========================================================= */
.modal-card{
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 24px);
  margin: 12px auto;
}

.modal-head{ flex: 0 0 auto; }

.modal-body{
  flex: 1 1 auto;
  max-height: none;
  overflow-y: auto;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

.form-actions{
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* =====================================================================
   Quote modal final fixes (no clipped buttons, tidy spacing, no bars)
   ===================================================================== */

/* Keep the modal comfortably inside the viewport */
.modal-card{max-height:92vh;}
.modal-body{
  max-height:calc(92vh - 120px);
  overflow-y:auto;
  padding-bottom:28px; /* prevents the Send Request button from clipping */
  scrollbar-width:none; /* Firefox: hide scrollbar */
}
.modal-body::-webkit-scrollbar{width:0;height:0;} /* WebKit: hide scrollbar */

/* Consistent spacing between labels/fields */
.quote-form label{display:block;margin:0 0 8px;}
.quote-form .grid-2,.quote-form .grid-3{gap:18px;}

/* Keep action buttons on one row (Cancel next to Send) */
.form-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding-top:18px;
}
.form-actions .btn{flex:0 0 auto;}
.form-status{flex:1 0 100%;margin:10px 0 0;opacity:.9;font-size:13px;}

@media (max-width:560px){
  /* Ensure buttons stay readable on phones */
  .form-actions .btn{flex:1 1 160px;}
}

/* =====================================================================
   Quote modal (override): keep Submit visible + consistent spacing
   ===================================================================== */

/* Allow the overlay to scroll if the screen is very short,
   but avoid hiding the scrollbar (hidden scrollbar = users think
   the Submit button is missing). */
#quoteModal{ overflow-y:auto; }

/* Keep the card within the viewport while still letting the overlay scroll */
#quoteModal .modal-card{ max-height: calc(100dvh - 32px); }

/* =====================================================================
   Quote modal – FINAL layout rules
   Fixes:
   - Buttons appearing outside / clipped by the modal border
   - Labels looking like they belong to the row above
   - Label text not centered above its own field
   - Unwanted scrollbars
   NOTE: Kept as overrides at the end of the file to win specificity.
   ===================================================================== */

/* Modal container */
#quoteModal .modal-card{
  display: flex;
  flex-direction: column;
  overflow: hidden;               /* keep border clean */
  padding-bottom: 22px;           /* ensure buttons never touch/cross border */
}

/* Modal body: no internal scrollbars */
#quoteModal .modal-body{
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 0;
}

/* Form layout + consistent spacing */
#quoteModal form{
  display: grid;
  gap: 18px;
}

/* Each label wraps its input – keep label close to its own field */
#quoteModal form label{
  display: flex;
  flex-direction: column;
  gap: 10px;                      /* label-to-input spacing */
  margin: 0;
  text-align: center;             /* center label text over its own control */
}

/* Inputs remain normal inside */
#quoteModal form input,
#quoteModal form select,
#quoteModal form textarea{
  width: 100%;
}

/* Buttons row stays inside the modal */
#quoteModal .form-actions{
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 6px;
}

/* Reduce textarea height slightly so the whole form fits comfortably */
#quoteModal textarea{
  min-height: 140px;
  max-height: 180px;
}

/* Responsive: stack the first row (company/phone/email) on small screens */
@media (max-width: 900px){
  #quoteModal .quote-grid-3,
  #quoteModal .quote-grid-3wide,
  #quoteModal .quote-grid-3cols{
    grid-template-columns: 1fr !important;
  }
}

/* Show the whole form without hiding scrollbars inside the modal body.
   If scrolling is needed, it will happen on the overlay. */
#quoteModal .modal-body{
  max-height: none !important;
  overflow: visible !important;
  padding: 20px 22px 18px !important;
}

/* Tighter, cleaner vertical rhythm so everything fits nicely */
#quoteModal .form-group{ margin-bottom: 14px; }
#quoteModal label{ margin: 0 0 6px; }
#quoteModal .form-grid{ gap: 14px; }

/* Keep action buttons on one line (Cancel next to Submit) */
#quoteModal .form-actions{
  display:flex;
  gap:14px;
  flex-wrap: nowrap;
  align-items:center;
  margin-top: 14px;
  padding-bottom: 2px;
}

/* Make Notes not excessively tall to avoid pushing buttons off-screen */
#quoteModal textarea{ min-height: 120px; }

@media (max-width:560px){
  /* On small screens, allow the buttons to wrap if absolutely necessary */
  #quoteModal .form-actions{ flex-wrap: wrap; }
  #quoteModal .form-actions .btn{ flex: 1 1 180px; }
}

/* ==============================
   Quote modal – keep everything visible (no internal scrollbar)
   ============================== */
html, body{ overflow-x: hidden; }

/* No scrollbars inside the modal overlay/card */
#quoteModal{ overflow: hidden; }
#quoteModal .modal-card{ max-height: 88vh; overflow: hidden; }
#quoteModal .modal-body{ overflow: visible; padding-bottom: 22px; }

/* Make sure the content fits comfortably */
#quoteModal input,
#quoteModal select{
  height: 44px;
}
#quoteModal textarea{
  height: 120px;
  max-height: 120px;
  resize: none;
}

/* Keep buttons on one row on desktop */
#quoteModal .form-actions{ gap: 14px; align-items: center; flex-wrap: nowrap; }

@media (max-height: 720px){
  #quoteModal .modal-card{ max-height: 92vh; }
  #quoteModal textarea{ height: 96px; max-height: 96px; }
}

/* ================================
   FINAL: Quote modal (no scroll, buttons not clipped)
   ================================ */
#quoteModal{ overflow: hidden !important; }

/* Make the card a flex column so footer buttons always have space */
#quoteModal .modal-card{
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  /* Use dynamic viewport units for mobile browser toolbars */
  max-height: calc(100dvh - 72px) !important; /* leave room so buttons never clip */
  padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important;
}

/* Keep the body from creating an inner scrollbar */
#quoteModal .modal-body{
  flex: 1 1 auto !important;
  overflow: visible !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
}

/* Ensure buttons are fully visible and aligned */
#quoteModal .form-actions,
#quoteModal .modal-actions{
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-top: 18px !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
}

/* ---- Quote modal label + grid spacing polish ---- */
/* Make label text clearly belong to the field under it (and align centered) */
#quoteModal .quote-form label,
#quoteModal .form label{
  display: flex;
  flex-direction: column;
  gap: 12px;              /* more space between label text and input */
  text-align: center;     /* center label text relative to its input */
  margin: 0;
}

/* Increase row spacing so labels don't look attached to the previous row */
#quoteModal .quote-form .grid-3,
#quoteModal .quote-form .grid-2,
#quoteModal .form .grid-3,
#quoteModal .form .grid-2{
  gap: 18px 22px;
}

/* Keep inputs looking consistent even when labels are centered */
#quoteModal .quote-form input,
#quoteModal .quote-form select,
#quoteModal .quote-form textarea,
#quoteModal .form input,
#quoteModal .form select,
#quoteModal .form textarea{
  width: 100%;
  margin: 0; /* spacing handled by label gap */
}

/* Buttons should stay inside the card and not cross the border line */
#quoteModal .form-actions{
  flex-wrap: nowrap;
}

/* Ensure action buttons never sit on the modal border */
#quoteModal .form-actions{
  position: static;
  margin-top: 18px;
  padding-top: 0;
  padding-bottom: 14px; /* extra bottom space so buttons never touch the border */
}

#quoteModal .modal-body{
  padding-bottom: 20px;
}

#quoteModal .modal-card{
  padding-bottom: 28px;
}

/* Clearer label↔input spacing + centered labels per field */
#quoteModal .field{ gap: 10px; }

/* Slightly larger row spacing without making the modal scroll */
#quoteModal .form-grid{ gap: 20px; }

/* Reduce Notes height to free space for consistent spacing */
#quoteModal textarea{ min-height: 120px; height: 120px; }

/* =====================================================
   FINAL v3: Quote modal spacing polish (requested)
   - More vertical space between rows (labels not stuck to above inputs)
   - Smaller Notes height to free space
   - Buttons never touch the bottom border
   ===================================================== */

#quoteModal form{
  gap: 26px !important;
}

#quoteModal .quote-grid-3,
#quoteModal .quote-grid-2{
  row-gap: 16px !important;
  column-gap: 22px !important;
}

#quoteModal label{
  gap: 12px !important;
}

#quoteModal textarea{
  height: 100px !important;
  min-height: 100px !important;
  max-height: 100px !important;
}

#quoteModal .form-actions{
  margin-top: 10px !important;
  padding-bottom: 22px !important;
}

/* =====================================================
   FINAL v5: Buttons never clip + better vertical rhythm
   - Slightly smaller Notes height
   - Slightly tighter overall gaps
   - Give footer buttons a bit more breathing room
   ===================================================== */

/* Let the card use a tiny bit more viewport height */
#quoteModal .modal-card{
  max-height: calc(100dvh - 56px) !important;
}

/* Keep the existing spacing (labels looked good), just free a little height */
#quoteModal textarea{
  height: 90px !important;
  min-height: 90px !important;
  max-height: 90px !important;
}

/* Bring buttons up a little so they never touch/cut the bottom border */
#quoteModal .form-actions{
  margin-top: 6px !important;
  padding-bottom: 22px !important;
}

/* =============================
   FINAL: Request a Quote modal layout
   - Keep generous spacing between sections
   - Center labels over their own fields
   - Prevent any internal scrollbars/clipping
   ============================= */

#quoteModal .modal-card{
  /* ensure buttons never clip on bottom */
  padding-bottom: 28px !important;
  padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  max-height: calc(100dvh - 40px) !important;
}

#quoteModal .modal-body{
  display: flex !important;
  flex-direction: column !important;
  /* spacing BETWEEN field blocks (company row -> service row -> cargo row -> notes -> actions) */
  gap: 20px !important;
  padding-bottom: 22px !important;
}

/* label sits clearly ABOVE its own input */
#quoteModal .modal-body label{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;          /* space between label text and its input */
  margin: 0 !important;
  text-align: center !important; /* center the label text */
}

/* keep user typing left-aligned inside inputs */
#quoteModal .modal-body input,
#quoteModal .modal-body select,
#quoteModal .modal-body textarea{
  text-align: left !important;
}

/* grid blocks */
#quoteModal .quote-grid-3{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 22px !important;
}

#quoteModal .quote-grid-2{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 22px !important;
}

/* notes height reduced to free space for section spacing */
#quoteModal .quote-notes textarea{
  height: 96px !important;
  min-height: 96px !important;
  resize: none !important;
}

/* action buttons: sit comfortably above modal border */
#quoteModal .form-actions{
  margin-top: 4px !important;   /* smaller gap from Notes */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* keep buttons comfortably above the modal border without changing overall layout */
  position: relative !important;
  top: -10px !important;
}

/* Responsive: stack fields on tablet/mobile and keep modal within viewport */
@media (max-width: 900px){
  #quoteModal .quote-grid-3{ grid-template-columns: 1fr !important; }
  #quoteModal .quote-grid-2{ grid-template-columns: 1fr !important; }
  #quoteModal .modal-body{ gap: 18px !important; }
  #quoteModal .quote-notes textarea{ height: 88px !important; min-height: 88px !important; }
}

@media (max-width: 520px){
  #quoteModal .modal-card{
    max-height: calc(100dvh - 24px) !important;
    padding: 18px !important;
    padding-bottom: 22px !important;
    padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important;
  }
  #quoteModal .modal-body{ gap: 16px !important; }
  #quoteModal .modal-head h2{ font-size: 34px !important; }
  #quoteModal .quote-notes textarea{ height: 78px !important; min-height: 78px !important; }
}

/* ---- Phone fixes: Quote modal should be scrollable (without visible scrollbars) ---- */
@media (max-width: 520px){
  /* Allow the modal overlay to scroll so users can reach all fields/buttons */
  #quoteModal{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 12px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #quoteModal::-webkit-scrollbar{ width: 0; height: 0; }

  /* Let the card grow naturally; the overlay handles scrolling */
  #quoteModal .modal-card{ max-height: none !important; }

  /* Services page: keep bullets left-aligned on phones */
  .bullets{ width: 100% !important; text-align: left !important; }
  .bullets li{ justify-content: flex-start !important; text-align: left !important; }
}

/* ---- Phone fixes: Quote modal should be scrollable (without visible scrollbars) ---- */
@media (max-width: 520px){
  /* Allow the modal overlay to scroll so users can reach all fields/buttons */
  #quoteModal{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 12px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #quoteModal::-webkit-scrollbar{ width:0; height:0; }

  /* Let the card grow taller than the viewport; the overlay will scroll */
  #quoteModal .modal-card{
    max-height: none !important;
  }
}

/* ---- Phone-only: Services bullets should stay left-aligned ---- */
@media (max-width: 520px){
  .bullets{
    width: 100% !important;
    text-align: left !important;
  }
  .bullets li{
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* =====================================================
   FINAL v5: Quote modal footer safeguard
   - Keep Send Request + Cancel comfortably above the bottom border
   - Do NOT change field/label spacing
   ===================================================== */

#quoteModal .modal-card{
  padding-bottom: 34px !important;
}

#quoteModal .form-actions{
  /* Avoid edge-touching / clipping on pages with different underlying layouts */
  margin-top: 18px !important;
  position: relative !important;
  top: -12px !important;
  padding-bottom: 10px !important;
}

/* =====================================================
   FINAL v6: Quote modal vertical positioning on desktop
   Purpose: ensure the action buttons never touch or get clipped by the
   bottom edge when opening the modal from any page.
   (Keeps all existing field/label spacing unchanged.)
   ===================================================== */
@media (min-width: 521px){
  #quoteModal .modal-card{ margin: 4vh auto !important; }
}
@media (min-width: 521px) and (max-height: 760px){
  #quoteModal .modal-card{ margin: 3vh auto !important; }
}

/* =====================================================
   MOBILE MENU: remove the "ghost" rounded bar on phones
   Cause: iOS/Android browsers can render blurred/backdrop-filtered
   layers with underlying pill CTAs as a dark rounded rectangle.
   Fix: disable backdrop-filter on the mobile drawer and make it nearly
   opaque so the page behind can’t bleed through.
   (Desktop stays unchanged.)
   ===================================================== */
@media (max-width: 900px){
  .nav-menu{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(8, 12, 20, 0.98) !important;
  }
}

/* -------------------------------------------------
   Mobile menu iOS/Android fix
   Some in-app browsers clip fixed elements inside backdrop-filter/sticky headers.
   When the drawer is open, disable header blur and overlay blur on small screens
   so the menu paints correctly and the stray rounded bar disappears.
------------------------------------------------- */
@media (max-width: 720px){
  body.nav-open .site-header{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(10,12,20,.92) !important;
  }
  .nav-overlay{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}


/* Full-bleed Swift banner (Home) */
#swift-banner{ padding:0; margin:0; }
#swift-banner .swift-banner-img{
  display:block;
  width:100vw;
  max-width:none;
  height:auto;
  margin-left: calc(50% - 50vw);
  border:0;
  border-radius:0;
  box-shadow:none;
}