/* ============================================================
   Flash Logistics — design system
   Navy #0a2540 + Flash orange #F07830. Static, self-contained.
   Built by Saigal Dev (dev.saigal.us).
   ============================================================ */

:root{
  --navy:#0a2540; --navy-2:#0d2c4d; --navy-3:#12395f;
  --orange:#f07830; --orange-2:#e2661c; --orange-soft:#fff2e9;
  --ink:#12233a; --body:#40556e; --muted:#6b7f96;
  --line:#e4ebf2; --bg:#ffffff; --bg-soft:#f5f8fb; --bg-soft-2:#eef3f9;
  --white:#ffffff;
  --radius:14px; --radius-lg:22px;
  --shadow:0 10px 30px rgba(10,37,64,.08);
  --shadow-lg:0 24px 60px rgba(10,37,64,.16);
  --wrap:1200px;
  --ff:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--ff); color:var(--body);
  font-size:17px; line-height:1.65; background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
svg{width:20px; height:20px; flex-shrink:0}  /* base icon size; class rules below override */
a{color:var(--orange-2); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink); line-height:1.15; margin:0 0 .5em; font-weight:800; letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.28rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.section{padding:88px 0}
.section--soft{background:var(--bg-soft)}
.section--navy{background:var(--navy); color:#c9d8e8}
.section--navy h2,.section--navy h3{color:#fff}
.center{text-align:center}
.lead{font-size:1.18rem; color:var(--muted); max-width:640px}
.center .lead{margin-left:auto; margin-right:auto}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--orange-2);
  background:var(--orange-soft); padding:6px 14px; border-radius:100px; margin-bottom:18px;
}
.section--navy .eyebrow{background:rgba(240,120,48,.16); color:#ffb280}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:1rem;
  padding:14px 26px; border-radius:100px; border:2px solid transparent; cursor:pointer;
  transition:transform .15s var(--ease), box-shadow .2s, background .2s, color .2s;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn svg{width:18px; height:18px}
.btn--primary{background:var(--orange); color:#fff; box-shadow:0 8px 20px rgba(240,120,48,.35)}
.btn--primary:hover{background:var(--orange-2); box-shadow:0 12px 28px rgba(240,120,48,.45)}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn--dark{background:var(--navy); color:#fff}
.btn--dark:hover{background:var(--navy-3)}
.btn--wa{background:#25d366; color:#fff; box-shadow:0 8px 20px rgba(37,211,102,.32)}
.btn--wa:hover{background:#1fb457}
.btn--lg{padding:17px 34px; font-size:1.06rem}

/* ---------- top contact strip ---------- */
.topbar{background:var(--navy-2); color:#a9c0d6; font-size:.86rem}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; height:42px}
.topbar a{color:#cfe0f0; display:inline-flex; align-items:center; gap:6px}
.topbar a:hover{color:#fff; text-decoration:none}
.topbar__left{display:flex; gap:22px}
.topbar__right{display:flex; gap:18px}
.topbar svg{width:14px; height:14px; opacity:.8}
@media(max-width:820px){ .topbar__left .t-hide{display:none} .topbar .wrap{justify-content:center} .topbar__right{display:none} }

/* ---------- header / nav ---------- */
.header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.28rem; color:var(--navy); letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand__mark{width:40px; height:40px; border-radius:11px; background:var(--orange); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.02rem; box-shadow:0 6px 14px rgba(240,120,48,.35)}
.brand small{display:block; font-size:.62rem; font-weight:700; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; margin-top:2px}
.nav__links{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0}
.nav__links a{color:var(--ink); font-weight:600; font-size:.98rem; padding:9px 14px; border-radius:9px; transition:background .15s,color .15s}
.nav__links a:hover{background:var(--bg-soft-2); color:var(--navy); text-decoration:none}
.nav__links a.active{color:var(--orange-2)}
.nav__cta{display:flex; align-items:center; gap:10px}
.nav__toggle{display:none; width:46px; height:46px; border:1px solid var(--line); background:#fff; border-radius:11px; cursor:pointer; align-items:center; justify-content:center}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{content:''; display:block; width:20px; height:2px; background:var(--navy); border-radius:2px; position:relative; transition:.2s}
.nav__toggle span::before{position:absolute; top:-6px}
.nav__toggle span::after{position:absolute; top:6px}
.badge-soon{font-size:.6rem; font-weight:800; letter-spacing:.06em; background:var(--orange-soft); color:var(--orange-2); padding:2px 6px; border-radius:5px; margin-left:5px; vertical-align:middle; text-transform:uppercase}

@media(max-width:1000px){
  .nav__links{
    position:fixed; inset:76px 0 auto 0; flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-bottom:1px solid var(--line); padding:14px 20px 22px;
    box-shadow:var(--shadow); transform:translateY(-140%); transition:transform .3s var(--ease); z-index:55;
  }
  .nav__links.open{transform:translateY(0)}
  .nav__links a{padding:13px 12px; font-size:1.05rem; border-radius:10px}
  .nav__toggle{display:inline-flex}
  .nav__cta .btn--quote-desktop{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative; background:linear-gradient(160deg,#08203a 0%,#0d2c4d 55%,#12395f 100%); color:#dbe7f3; overflow:hidden}
.hero__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero__overlay{position:absolute; inset:0; z-index:1;
  /* uniform light tint so the video shows through evenly */
  background:rgba(8,28,50,.48);
}
.hero__overlay::before{/* dots motif */
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1.4px, transparent 1.4px);
  background-size:26px 26px; opacity:.4;
}
.hero__overlay::after{content:''; position:absolute; right:-8%; top:-30%; width:55%; height:160%; background:radial-gradient(circle,rgba(240,120,48,.28),transparent 62%)}
.hero .wrap{position:relative; z-index:2; padding-top:84px; padding-bottom:92px; display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center}
/* mobile: skip the 14MB video, use the poster image as a static bg */
@media(max-width:820px){
  .hero__video{display:none}
  .hero{background:#08203a url('/assets/img/hero/hero-port.jpg') center/cover no-repeat}
}
.hero h1{color:#fff; margin-bottom:20px; text-shadow:0 2px 18px rgba(4,16,30,.5)}
.hero__sub,.hero__tag{text-shadow:0 1px 10px rgba(4,16,30,.45)}
.hero h1 .accent{color:var(--orange); position:relative}
.hero__sub{font-size:1.2rem; color:#b9cde0; max-width:560px; margin-bottom:14px}
.hero__tag{font-weight:700; color:#ffb280; letter-spacing:.02em; margin-bottom:26px}
.hero__cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px}
.hero__stats{display:flex; gap:30px; flex-wrap:wrap}
.hero__stat b{display:block; font-size:1.9rem; color:#fff; font-weight:800; letter-spacing:-.02em}
.hero__stat span{font-size:.86rem; color:#9fb6cd}
.hero__card{
  position:relative; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg); padding:26px; backdrop-filter:blur(6px); box-shadow:var(--shadow-lg);
}
.hero__card h3{color:#fff; font-size:1.15rem; margin-bottom:16px; display:flex; align-items:center; gap:10px}
.qform label{display:block; font-size:.8rem; font-weight:600; color:#9fb6cd; margin:10px 0 5px}
.qform input,.qform select{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.9); color:var(--ink); font-family:inherit; font-size:.95rem;
}
.qform .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.qform .btn{width:100%; justify-content:center; margin-top:16px}
.qform__note{font-size:.76rem; color:#8fa8c1; margin:12px 0 0; text-align:center}
@media(max-width:920px){ .hero .wrap{grid-template-columns:1fr; gap:36px} .hero__card{order:2} }

/* ---------- trust logos / stat band ---------- */
.statband{background:var(--navy); color:#c9d8e8; border-top:1px solid rgba(255,255,255,.06)}
.statband .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:40px 24px}
.statband .s b{display:block; font-size:1.7rem; color:#fff; font-weight:800}
.statband .s span{font-size:.9rem; color:#9fb6cd}
@media(max-width:720px){ .statband .wrap{grid-template-columns:1fr 1fr; gap:26px} }

/* ---------- cards / services ---------- */
.grid{display:grid; gap:24px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){ .grid--3,.grid--4{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .grid--2,.grid--3,.grid--4{grid-template-columns:1fr} }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px;
  transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; position:relative;
}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent}
.card__icon{width:56px; height:56px; border-radius:15px; background:var(--orange-soft); color:var(--orange-2); display:grid; place-items:center; margin-bottom:18px}
.card__icon svg{width:28px; height:28px}
.card h3{margin-bottom:8px}
.card p{color:var(--body); font-size:.98rem; margin-bottom:14px}
.card__link{font-weight:700; color:var(--orange-2); display:inline-flex; align-items:center; gap:6px; font-size:.95rem}
.card__link svg{width:16px; height:16px; transition:transform .2s}
.card:hover .card__link svg{transform:translateX(4px)}

/* feature list */
.feats{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
@media(max-width:700px){ .feats{grid-template-columns:1fr} }
.feat{display:flex; gap:15px}
.feat__ic{flex:0 0 46px; width:46px; height:46px; border-radius:12px; background:var(--orange-soft); color:var(--orange-2); display:grid; place-items:center}
.feat__ic svg{width:24px;height:24px}
.feat h3{font-size:1.1rem; margin-bottom:4px}
.feat p{font-size:.95rem; margin:0}
.section--navy .feat__ic{background:rgba(240,120,48,.16); color:#ffb280}
.section--navy .feat p{color:#a9c0d6}

/* split (image/visual + text) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
@media(max-width:900px){ .split{grid-template-columns:1fr; gap:34px} }
.visual{
  border-radius:var(--radius-lg); background:linear-gradient(150deg,#0d2c4d,#12395f); color:#fff;
  padding:40px; min-height:320px; display:flex; flex-direction:column; justify-content:center; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.visual::after{content:''; position:absolute; right:-30px; bottom:-30px; width:180px; height:180px; background:radial-gradient(circle,rgba(240,120,48,.3),transparent 65%)}

/* ---------- process steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step}
@media(max-width:820px){ .steps{grid-template-columns:1fr 1fr} }
@media(max-width:480px){ .steps{grid-template-columns:1fr} }
.step{position:relative; padding-top:8px}
.step__n{width:46px; height:46px; border-radius:12px; background:var(--navy); color:#fff; font-weight:800; display:grid; place-items:center; margin-bottom:14px; font-size:1.1rem}
.step h3{font-size:1.08rem; margin-bottom:5px}
.step p{font-size:.93rem; margin:0}

/* ---------- coverage ---------- */
.cities{display:flex; flex-wrap:wrap; gap:12px; margin-top:6px}
.city{background:#fff; border:1px solid var(--line); border-radius:100px; padding:9px 18px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:8px}
.city svg{width:16px; height:16px; color:var(--orange-2)}
.section--navy .city{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#fff}

/* ---------- testimonials ---------- */
.quote{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow)}
.quote__stars{color:var(--orange); letter-spacing:3px; margin-bottom:10px}
.quote p{font-size:1.02rem; color:var(--ink); font-style:italic}
.quote__who{display:flex; align-items:center; gap:12px; margin-top:16px}
.quote__av{width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:800}
.quote__who b{color:var(--ink); display:block; font-size:.96rem}
.quote__who span{font-size:.84rem; color:var(--muted)}

/* ---------- CTA band ---------- */
.ctaband{background:linear-gradient(135deg,var(--orange),#f59b52); color:#fff; border-radius:var(--radius-lg); padding:52px; text-align:center; box-shadow:var(--shadow-lg); position:relative; overflow:hidden}
.ctaband h2{color:#fff; margin-bottom:10px}
.ctaband p{color:rgba(255,255,255,.92); max-width:560px; margin:0 auto 24px; font-size:1.1rem}
.ctaband .btn--primary{background:#fff; color:var(--orange-2)}
.ctaband .btn--primary:hover{background:#0a2540; color:#fff}
.ctaband .btn--ghost{border-color:rgba(255,255,255,.6)}
.ctaband__row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ---------- footer ---------- */
.footer{background:#071a2e; color:#8ba4bd; font-size:.95rem; padding:64px 0 0}
.footer a{color:#b9cde0}
.footer a:hover{color:#fff; text-decoration:none}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:44px}
@media(max-width:860px){ .footer__grid{grid-template-columns:1fr 1fr; gap:32px} }
@media(max-width:520px){ .footer__grid{grid-template-columns:1fr} }
.footer h4{color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.footer .brand{color:#fff; margin-bottom:14px}
.footer .brand small{color:#7f97b0}
.footer__contact li{display:flex; gap:9px; align-items:flex-start}
.footer__contact svg{width:16px; height:16px; margin-top:4px; color:var(--orange); flex:0 0 16px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.08); padding:20px 0; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.85rem; color:#6f89a3}
.footer__bottom a{color:#8ba4bd}
.builtby{display:inline-flex; align-items:center; gap:6px}
.builtby b{color:#cfe0f0}

/* ---------- page hero (inner) ---------- */
.phero{background:linear-gradient(160deg,#08203a,#12395f); color:#c9d8e8; padding:64px 0}
.phero h1{color:#fff; margin-bottom:12px}
.phero p{font-size:1.15rem; color:#b9cde0; max-width:640px; margin:0}
.crumbs{font-size:.85rem; color:#8fa8c1; margin-bottom:18px}
.crumbs a{color:#b9cde0}
.crumbs span{opacity:.6; margin:0 6px}

/* ---------- contact ---------- */
.cfrm{display:grid; gap:14px}
.cfrm .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:560px){ .cfrm .row{grid-template-columns:1fr} }
.cfrm label{font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:5px; display:block}
.cfrm input,.cfrm select,.cfrm textarea{width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:11px; font-family:inherit; font-size:1rem; color:var(--ink); background:#fff}
.cfrm input:focus,.cfrm select:focus,.cfrm textarea:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(240,120,48,.15)}
.cfrm textarea{min-height:130px; resize:vertical}
.infocard{background:var(--navy); color:#c9d8e8; border-radius:var(--radius-lg); padding:34px}
.infocard h3{color:#fff}
.infocard .ic-row{display:flex; gap:13px; margin-bottom:18px}
.infocard .ic-row svg{width:20px; height:20px; color:var(--orange); flex:0 0 20px; margin-top:3px}
.infocard .ic-row b{color:#fff; display:block}
.infocard a{color:#cfe0f0}

/* ---------- coming soon ---------- */
.soon{min-height:calc(100vh - 118px); display:flex; align-items:center; background:linear-gradient(160deg,#08203a,#0d2c4d 60%,#12395f); color:#c9d8e8; position:relative; overflow:hidden}
.soon::before{content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1.4px,transparent 1.4px); background-size:26px 26px}
.soon::after{content:''; position:absolute; left:-10%; bottom:-40%; width:55%; height:150%; background:radial-gradient(circle,rgba(240,120,48,.2),transparent 60%)}
.soon .wrap{position:relative; z-index:2; max-width:720px; text-align:center; padding-top:70px; padding-bottom:70px}
.soon__ic{width:88px; height:88px; border-radius:24px; background:rgba(240,120,48,.16); color:#ffb280; display:grid; place-items:center; margin:0 auto 26px}
.soon__ic svg{width:44px; height:44px}
.soon h1{color:#fff}
.soon p{font-size:1.18rem; color:#b9cde0; margin:0 auto 28px; max-width:540px}
.soon .pill{display:inline-block; background:rgba(240,120,48,.16); color:#ffb280; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.75rem; padding:7px 16px; border-radius:100px; margin-bottom:24px}
.notify{display:flex; gap:10px; max-width:460px; margin:0 auto; flex-wrap:wrap; justify-content:center}
.notify input{flex:1; min-width:220px; padding:14px 16px; border-radius:100px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.95); color:var(--ink); font-family:inherit; font-size:1rem}
.soon__back{display:inline-block; margin-top:26px; color:#9fb6cd; font-weight:600}

/* ---------- blog ---------- */
.blogcard{padding:0; overflow:hidden; display:flex; flex-direction:column}
.blogcard:hover{text-decoration:none}
.blogcard__img{aspect-ratio:16/9; background:var(--navy-2); overflow:hidden}
.blogcard__img img{width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease)}
.blogcard:hover .blogcard__img img{transform:scale(1.06)}
.blogcard__body{padding:22px 24px 26px}
.blogcard h3{margin:9px 0 9px; font-size:1.16rem}
.blogcard p{font-size:.95rem; margin-bottom:14px}
.post-date{font-size:.82rem; color:var(--orange-2); font-weight:700; letter-spacing:.02em}
.phero--post{padding:54px 0 40px}
.phero--post h1{font-size:clamp(1.8rem,4vw,2.8rem)}
.post{font-size:1.06rem; line-height:1.78; color:var(--ink)}
.post p{margin:0 0 1.15rem}
.post h2{font-size:1.55rem; margin:2rem 0 .8rem}
.post h3{font-size:1.25rem; margin:1.6rem 0 .6rem}
.post h4{font-size:1.08rem; margin:1.4rem 0 .5rem}
.post ul,.post ol{margin:0 0 1.2rem; padding-left:1.35rem}
.post li{margin-bottom:.5rem}
.post img{border-radius:14px; margin:1.6rem 0; box-shadow:var(--shadow)}
.post a{color:var(--orange-2); text-decoration:underline}
.post blockquote{border-left:4px solid var(--orange); padding:8px 0 8px 22px; margin:1.6rem 0; color:var(--muted); font-style:italic}
.post cite{display:block; margin-top:8px; font-size:.9rem; color:var(--muted); font-style:normal}
.post-cover{aspect-ratio:16/8; border-radius:16px; overflow:hidden; margin-bottom:30px; box-shadow:var(--shadow)}
.post-cover img{width:100%; height:100%; object-fit:cover; margin:0; border-radius:0; box-shadow:none}
.backlink{display:inline-flex; align-items:center; gap:6px; font-weight:700; margin-top:34px; color:var(--orange-2)}

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

/* utils */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.hr{height:1px; background:var(--line); border:0; margin:0}