/* ===== CSS Vars ===== */
:root{
  --blue:#0B3D91; --red:#B91C1C; --white:#FFFFFF; --text:#0F172A; --bg:#F3F4F6;
  --radius:12px; --radius-sm:8px; --shadow:0 6px 18px rgba(0,0,0,.08);
  --space: clamp(16px, 2vw, 24px); --max:1200px;
  --focus: 2px solid #0B3D91;
}

*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text); background:#fff; line-height:1.6;
}

    /* scrollbar */

    body::-webkit-scrollbar {
        background-color: #fff;
        width: 14px;
    }
    body::-webkit-scrollbar-track {
        background-color: #fff;
    }
    body::-webkit-scrollbar-thumb {
        background-color: #babac0;
        border-radius: 15px;
        border: 4px solid #fff;
    }
    body::-webkit-scrollbar-button {
        display: none;
    }

    /* Custom text selection colors */
::selection {
  background: var(--blue);
  color: #ffffff;
}

::-moz-selection { /* Firefox support */
  background: var(--blue);
  color: #ffffff;
}


img{max-width:100%; display:block}
a{color:var(--blue); text-decoration:none}
a:focus-visible{outline:var(--focus); border-radius:6px; text-decoration:underline}
a:hover{text-decoration:none} /* No underline on hover per req */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:8px; top:8px; width:auto; height:auto; background:#fff; padding:8px 12px; border-radius:8px; box-shadow:var(--shadow)}

/* Containers */
.container{max-width:var(--max); margin-inline:auto; padding:0 var(--space)}
.section{position:relative}
.section-pad{padding: clamp(56px, 8vw, 96px) 0}
.bg-light{background:var(--bg)}

/* Section title with flag stripe detail */
.section-title{
  font-size: clamp(24px, 4vw, 36px); line-height:1.2; margin:0 0 18px;
  position:relative; padding-bottom:14px;
}
.section-title::after{
  content:""; position:absolute; left:0; bottom:0; width:110px; height:6px;
  background: linear-gradient(90deg, var(--blue) 0 50%, var(--red) 50% 100%);
  border-radius:4px;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid #e5e7eb;
  transition:all .25s ease;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:72px}
.site-header.shrink .header-inner{min-height:56px}

/* Logo image (replaces .logo svg) */
.logo-img{display:block; height:40px; width:auto; object-fit:contain}
.site-header.shrink .logo-img{height:32px}

/* Nav */
.nav-toggle{display:none; background:transparent; border:0; padding:10px; border-radius:10px}
.nav-toggle:focus-visible{outline:var(--focus)}
.nav-toggle-bar{display:block; width:24px; height:2px; background:var(--text); margin:5px 0}

.nav-list{display:flex; align-items:center; gap:14px; list-style:none; margin:0; padding:0}
.nav-link{padding:8px 10px; border-radius:8px}
.nav-link.active{background:rgba(11,61,145,.08)}
.nav-social a svg{width:20px; height:20px; fill:var(--text)}
.nav-cta .btn{padding:10px 14px}

/* Optional: a tiny divider before social icons for clarity */
.nav-social{display:flex; gap:10px; padding-left:10px; margin-left:6px; border-left:1px solid #e5e7eb}

/* Mobile nav */
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-list{
    position:fixed; inset:72px 0 0 0; background:#fff;
    flex-direction:column; padding:24px;
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .nav-list.open{opacity:1; pointer-events:auto}
  .nav-social{border-left:0; margin-left:0; padding-left:0}
  .logo-img{height:36px}
  .site-header.shrink .logo-img{height:34px}
}


/* Mobile nav */
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-list{position:fixed; inset:72px 0 0 0; background:#fff; flex-direction:column; padding:24px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s ease}
  .nav-list.open{opacity:1; pointer-events:auto}
}

/* Buttons */
.btn{display:inline-block; padding:12px 18px; border-radius:10px; font-weight:700; box-shadow:0 1px 0 rgba(0,0,0,.04); transition:transform .1s ease, box-shadow .2s ease; border:2px solid transparent}
.btn:focus-visible{outline:var(--focus)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{box-shadow:var(--shadow)}
.btn-outline-red{background:var(--red); color:var(--white); border-color:var(--red)}
.btn-outline-red:hover{background:#981c1c;}

/* Hero */
.hero{position:relative; min-height:72vh; display:grid; place-items:center; text-align:center; color:#fff;
  /* subtle flag-inspired diagonal layers (CSS only) */
  background:
    repeating-linear-gradient(135deg, rgba(11,61,145,.08) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(45deg, rgba(185,28,28,.06) 0 12px, transparent 12px 24px);
}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25)); z-index:-1}
.hero-content{max-width:900px}
.hero h1{font-size: clamp(28px, 6vw, 48px); line-height:1.1; margin:0 0 10px}
.hero .sub{font-size: clamp(16px, 3.2vw, 20px); margin:0 0 20px}
.hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.trust-badges{list-style:none; padding:0; margin:16px 0 0; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.trust-badges li{background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); padding:6px 10px; border-radius:999px}

/* Two column */
.two-col{display:grid; grid-template-columns: 1.3fr 1fr; gap: clamp(18px,4vw,42px); align-items:center}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}

.flag-frame{border-radius:var(--radius); overflow:hidden; position:relative; box-shadow:var(--shadow)}
.flag-frame::before{
  content:""; position:absolute; inset:auto 0 0 0; height:8px;
  background:linear-gradient(90deg, var(--blue), var(--red)); z-index:2;
}

.checks{list-style:none; padding:0; margin:18px 0 0}
.checks li{padding-left:28px; position:relative; margin:8px 0}
.checks .check{position:absolute; left:0; top:0; font-weight:800; color:var(--blue)}

/* Cards grid */
.grid.cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
@media (max-width:900px){.grid.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid.cards{grid-template-columns:1fr}}
.card{background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .2s ease}
.card:hover,.card:focus-within{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.12)}
.card .icon svg{width:32px; height:32px; fill:var(--blue); margin-bottom:8px}

/* Stats */
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stats-grid{grid-template-columns:1fr}}
.stat{background:#fff; border-radius:var(--radius); padding:20px; text-align:center; box-shadow:var(--shadow)}
.stat .num{font-size: clamp(28px, 6vw, 44px); font-weight:800; color:var(--blue)}
.stat .label{margin-top:6px; color:#334155}
.updated-note{margin-top:10px; font-size:14px; color:#475569}

/* Gallery */
.gallery-grid{display:grid; gap:8px; grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.gallery-grid{grid-template-columns:1fr}}
.gallery-item{display:block; border-radius:10px; overflow:hidden; box-shadow:var(--shadow)}
.gallery-item img{aspect-ratio: 4/3; object-fit:cover; transition:transform .25s ease}
.gallery-item:hover img{transform:scale(1.03)}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.9); display:grid; place-items:center; gap:0; z-index:1200}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(92vw, 1200px); max-height:80vh; border-radius:12px}
.lb-close,.lb-prev,.lb-next{
  position:absolute; top:50%; transform:translateY(-50%); background:transparent; color:#fff; border:2px solid rgba(255,255,255,.7);
  border-radius:999px; width:44px; height:44px; display:grid; place-items:center; cursor:pointer; font-size:28px;
}
.lb-close{top:20px; right:20px; transform:none}
.lb-prev{left:20px}
.lb-next{right:20px}
.lb-close:focus-visible,.lb-prev:focus-visible,.lb-next:focus-visible{outline:var(--focus)}

/* Lanes */
.lanes{display:flex; gap:10px; list-style:none; padding:0; margin:10px 0 0; flex-wrap:wrap}
.badge{background:#fff; border:2px solid var(--blue); color:var(--blue); border-radius:999px; padding:8px 12px; font-weight:700}

/* Map */
.map-embed {
  text-align: center;
  margin-top: 20px;
}

.lanes-map {
  max-width: 100%;
  height: 400px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: var(--shadow);
  border: 2px solid #e5e7eb;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lanes-map:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}


/* Packet panel */
.packet-panel{display:flex; align-items:center; justify-content:space-between; gap:18px; background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.packet-actions{display:flex; align-items:center; gap:12px}
.file-note{color:#334155}

/* Contact */
.contact-wrap{align-items:start}
.contact-card{min-height:100%}
.contact-list{list-style:none; padding:0; margin:0}
.contact-list li{margin:8px 0}

/* Footer */
.site-footer{background:#0b1220; color:#e2e8f0; padding: 30px 12px 30px 12px;}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer-mark{height:42px}
.brand-text small{display:block; color:#94a3b8}
.footer-nav,.footer-social{list-style:none; padding:0; margin:0; display:flex; gap:12px; flex-wrap:wrap}
.footer-nav a,.footer-social a{color:#e2e8f0}
.footer-nav a:focus-visible,.footer-social a:focus-visible{outline:var(--focus)}
.legal{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}
.back-to-top{display:inline-block; background:var(--blue); color:#fff; padding:8px 12px; border-radius:999px}
.back-to-top:focus-visible{outline:var(--focus)}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}

/* Other */

.contact-btn {
  height: 35px;
  padding: 2px 14px !important;
  font-weight: lighter;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.packet-actions {
  text-align: center;
}