*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{scroll-behavior:smooth}body{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));font-family:Inter,Segoe UI,system-ui,sans-serif;--tw-text-opacity:1;color:rgb(20 33 61/var(--tw-text-opacity,1));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4{margin-bottom:1rem;font-family:Poppins,Segoe UI,system-ui,sans-serif;font-weight:600;line-height:1.25;--tw-text-opacity:1;color:rgb(11 44 92/var(--tw-text-opacity,1))}h1{font-size:2.25rem;line-height:2.5rem;font-weight:700}@media (min-width:768px){h1{font-size:3rem;line-height:1}}h2{font-size:1.5rem;line-height:2rem}@media (min-width:768px){h2{font-size:1.875rem;line-height:2.25rem}}h3{font-size:1.25rem;line-height:1.75rem}p{margin-bottom:1rem;--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}a{color:inherit;text-decoration-line:none}img{display:block;max-width:100%}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.container{margin-left:auto;margin-right:auto;max-width:1180px;padding-left:1.5rem;padding-right:1.5rem}.section{padding-top:4rem;padding-bottom:4rem}@media (min-width:768px){.section{padding-top:6rem;padding-bottom:6rem}}.section--alt{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.section-head{margin-bottom:2.5rem;max-width:36rem}.section-head p{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.btn{display:inline-flex;cursor:pointer;align-items:center;gap:.5rem;border-radius:.5rem;border-width:2px;border-color:transparent;padding:.75rem 1.5rem;font-size:.875rem;line-height:1.25rem;font-weight:600;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.btn:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.btn-primary{--tw-bg-opacity:1;background-color:rgb(30 143 94/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.btn-primary:hover{--tw-bg-opacity:1;background-color:rgb(36 168 110/var(--tw-bg-opacity,1));--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.btn-outline{--tw-border-opacity:1;border-color:rgb(11 44 92/var(--tw-border-opacity,1));background-color:transparent;--tw-text-opacity:1;color:rgb(11 44 92/var(--tw-text-opacity,1))}.btn-outline:hover{--tw-bg-opacity:1;background-color:rgb(11 44 92/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.btn-outline--light{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.btn-outline--light:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(11 44 92/var(--tw-text-opacity,1))}.btn-sm{padding:.5rem 1rem;font-size:.85rem}.site-header{position:sticky;top:0;z-index:50;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.nav-wrap{margin-left:auto;margin-right:auto;max-width:1180px;justify-content:space-between;padding:.75rem 1.5rem}.brand,.nav-wrap{display:flex;align-items:center}.brand{gap:.5rem;font-family:Poppins,Segoe UI,system-ui,sans-serif;font-size:1.125rem;line-height:1.75rem;font-weight:700}.brand img{height:2.25rem}.brand-navy{--tw-text-opacity:1;color:rgb(11 44 92/var(--tw-text-opacity,1))}.brand-green{--tw-text-opacity:1;color:rgb(30 143 94/var(--tw-text-opacity,1))}.nav-links{margin:0;display:none;list-style-type:none;gap:1.5rem;padding:0}@media (min-width:768px){.nav-links{display:flex}}.nav-links a{font-size:.95rem;font-weight:500;--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.nav-links a.active,.nav-links a:hover{--tw-text-opacity:1;color:rgb(11 44 92/var(--tw-text-opacity,1))}.nav-links.is-open{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:1.5rem}.nav-cta{display:flex;align-items:center;gap:.75rem}.nav-toggle{cursor:pointer;border-style:none;background-image:none;font-size:1.5rem;line-height:2rem}@media (min-width:768px){.nav-toggle{display:none}}.hero{padding-top:4rem;padding-bottom:4rem}@media (min-width:768px){.hero{padding-top:6rem;padding-bottom:6rem}}.hero-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));align-items:center;gap:2.5rem}@media (min-width:768px){.hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem}}.hero-badge{margin-bottom:1rem;display:inline-block;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(229 245 236/var(--tw-bg-opacity,1));padding:.375rem 1rem;font-size:.8rem;font-weight:600;--tw-text-opacity:1;color:rgb(30 143 94/var(--tw-text-opacity,1))}.hero-cta{margin-top:1.5rem;margin-bottom:1.5rem;display:flex;flex-wrap:wrap;gap:1rem}.hero-strip{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.85rem;--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.hero-strip span:not(:first-child):before{
  content:"•";
  margin-right:.5rem;
  --tw-text-opacity:1;
  color:rgb(30 143 94/var(--tw-text-opacity,1))
}
@media (max-width:767px){
  .hero-strip{
    flex-direction:column;
    align-items:flex-start;
    gap:.5rem;
  }
  .hero-strip span:first-child:before{
    content:"•";
    margin-right:.5rem;
    color:rgb(30 143 94);
  }
}
.hero-image{order:-9999}@media (min-width:768px){.hero-image{order:9999}}.hero-image img{border-radius:14px;--tw-shadow:0 4px 20px rgba(11,44,92,.08);--tw-shadow-colored:0 4px 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.card-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1.5rem}@media (min-width:768px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.card{border-radius:14px;border-width:1px;--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));padding:2rem;--tw-shadow:0 4px 20px rgba(11,44,92,.08);--tw-shadow-colored:0 4px 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.card-icon{margin-bottom:1rem;display:flex;height:52px;width:52px;align-items:center;justify-content:center;border-radius:.75rem;--tw-bg-opacity:1;background-color:rgb(229 245 236/var(--tw-bg-opacity,1));font-size:1.5rem;line-height:2rem;--tw-text-opacity:1;color:rgb(30 143 94/var(--tw-text-opacity,1))}.card ul{margin-bottom:1.5rem;list-style-type:none;padding:0}.card li{position:relative;margin-bottom:.5rem;padding-left:1.5rem;--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.card li:before{content:"✓";position:absolute;left:0;font-weight:700;--tw-text-opacity:1;color:rgb(30 143 94/var(--tw-text-opacity,1))}.feature-row{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1.5rem;text-align:left}@media (min-width:640px){.feature-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.feature-row{grid-template-columns:repeat(4,minmax(0,1fr))}}.step-row{display:flex;gap:1.5rem;overflow-x:auto;padding-bottom:1rem}.step{position:relative;min-width:200px;flex:1 1 0%;padding-top:1rem}.step-num{margin-bottom:1rem;display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(11 44 92/var(--tw-bg-opacity,1));font-weight:700;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.step:not(:last-child):after{content:"";position:absolute;top:1.25rem;left:60px;right:-20px;display:none;height:.125rem}@media (min-width:1024px){.step:not(:last-child):after{display:block}}.step:not(:last-child):after{background-image:repeating-linear-gradient(90deg,#e4e8f0 0 6px,transparent 6px 12px)}.faq-item{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.faq-question{display:flex;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-style:none;background-image:none;padding-top:1rem;padding-bottom:1rem;text-align:left;font-family:Poppins,Segoe UI,system-ui,sans-serif;font-size:1rem;line-height:1.5rem;font-weight:600;--tw-text-opacity:1;color:rgb(11 44 92/var(--tw-text-opacity,1))}.faq-answer{display:none;padding-bottom:1rem;--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.faq-item.is-open .faq-answer{display:block}.faq-item.is-open .faq-icon{--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.faq-icon{font-size:1.5rem;line-height:2rem;--tw-text-opacity:1;color:rgb(30 143 94/var(--tw-text-opacity,1));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tracking-bar{border-radius:14px;--tw-bg-opacity:1;background-color:rgb(11 44 92/var(--tw-bg-opacity,1));padding:2rem;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}@media (min-width:768px){.tracking-bar{padding:2.5rem}}.tracking-form{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.75rem}.tracking-form input{min-width:220px;flex:1 1 0%;border-radius:.5rem;border-style:none;padding:.75rem 1rem;font-size:1rem;line-height:1.5rem;--tw-text-opacity:1;color:rgb(20 33 61/var(--tw-text-opacity,1))}.form-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem}@media (min-width:768px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.form-field{margin-bottom:1rem;display:flex;flex-direction:column;gap:.375rem}.form-field label{font-size:.875rem;line-height:1.25rem;font-weight:600}.form-field input,.form-field select,.form-field textarea{border-radius:.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1));padding:.75rem 1rem;font-family:Inter,Segoe UI,system-ui,sans-serif;font-size:1rem;line-height:1.5rem}@media (min-width:768px){.form-field.full{grid-column:span 2/span 2}}.form-msg{margin-bottom:1rem;border-radius:.5rem;padding:.75rem 1rem;font-weight:500}.form-msg--success{--tw-bg-opacity:1;background-color:rgb(229 245 236/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(30 143 94/var(--tw-text-opacity,1))}.form-msg--error{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.cta-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;border-radius:14px;--tw-bg-opacity:1;background-color:rgb(11 44 92/var(--tw-bg-opacity,1));padding:2rem;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}@media (min-width:768px){.cta-banner{padding:2.5rem}}.cta-banner h2{margin-bottom:.25rem;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.cta-banner-actions{display:flex;flex-wrap:wrap;gap:1rem}.site-footer{--tw-bg-opacity:1;background-color:rgb(11 44 92/var(--tw-bg-opacity,1));padding-top:4rem;padding-bottom:1.5rem;--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.footer-grid{margin-bottom:2.5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}@media (min-width:768px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}.footer-grid h4{margin-bottom:1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.footer-grid ul{margin:0;list-style-type:none;padding:0}.footer-grid li{margin-bottom:.625rem;font-size:.875rem;line-height:1.25rem}.footer-grid a:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;border-top-width:1px;border-color:hsla(0,0%,100%,.1);padding-top:1rem;font-size:.75rem;line-height:1rem}.visually-hidden{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(0,0,0,0)}.fixed{position:fixed}.contents{display:contents}.hidden{display:none}.grow{flex-grow:1}.text-center{text-align:center}
/* --- Hero background image (custom, added on top of Tailwind build) --- */
.hero{
  position:relative;
  background-image:url("../images/hero-bg.webp");
  background-size:cover;
  background-position:right center;
  background-repeat:no-repeat;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.85) 35%, rgba(255,255,255,.35) 65%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.hero .container{
  position:relative;
  z-index:1;
}

/* =========================================================
   Custom refinements (added on top of Tailwind build)
   ========================================================= */

/* --- Full-screen sections: each major section fills the viewport --- */
.section{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:5rem;
  padding-bottom:5rem;
  box-sizing:border-box;
}
.section > .container{
  width:100%;
}
/* Compact variant: content-sized section instead of full viewport
   height, for sections whose content (like the tracking card) is
   naturally short and shouldn't float in a sea of empty space. */
.section--compact{
  min-height:0;
  padding-top:4rem;
  padding-bottom:4rem;
}
.tracking-bar{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}
/* Account for the fixed floating navbar so anchor-jumps (Services,
   How It Works, Track, etc.) don't land tucked underneath it. */
[id]{
  scroll-margin-top:160px;
}
@media (max-width:768px){
  .section{
    min-height:auto;
    padding-top:4rem;
    padding-bottom:4rem;
  }
}

/* --- Wider, more "full-screen" layout on large monitors --- */
.container,
.nav-wrap{
  max-width:1360px;
}

/* --- Navbar: bigger, clearer brand mark --- */
.nav-wrap{
  padding-top:.6rem;
  padding-bottom:.6rem;
}
.brand img{
  height:5.5rem;
  width:auto;
}
.brand{
  font-size:1.5rem;
  gap:.85rem;
}

/* --- Floating pill navbar (replaces the earlier full-width glass bar) --- */
.site-header{
  background:transparent;
  border-bottom:none;
  box-shadow:none;
  padding-top:1.1rem;
  padding-bottom:.5rem;
}
.nav-wrap{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:9999px;
  box-shadow:0 10px 34px rgba(11,44,92,.14), 0 1px 3px rgba(11,44,92,.06);
  padding-left:2rem;
  padding-right:2rem;
}
.site-header--transparent{
  position:fixed;
  top:0; left:0; right:0;
  background:transparent;
  border-bottom:none;
  box-shadow:none;
}
.nav-links{
  gap:2rem;
  align-items:center;
}
.nav-links a{
  font-size:1.1rem;
  font-weight:600;
  text-decoration:none;
  position:relative;
  transition:all .5s;
}
.nav-links a:hover{
  color:#1e8f5e;
  text-shadow:0 0 10px rgba(30,143,94,.7), 0 0 20px rgba(30,143,94,.5), 0 0 30px rgba(30,143,94,.35);
}
.nav-links a:active{
  color:#1e8f5e;
  text-shadow:0 0 10px rgba(30,143,94,.7), 0 0 20px rgba(30,143,94,.5), 0 0 30px rgba(30,143,94,.35);
}
.btn:active{
  transform:translateY(-0.125rem);
}
.nav-links a.active{
  color:rgb(30 143 94) !important;
  font-weight:700;
}

/* --- Icon system: SVG icons replace emoji, with two colour tones --- */
.card-icon{
  font-size:0;              /* neutralize leftover emoji sizing */
  padding:12px;
}
.card-icon svg{
  width:100%;
  height:100%;
}
.card-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.card-icon.icon-green{
  background-color:rgb(229 245 236);
  color:rgb(30 143 94);
}
.card-icon.icon-navy{
  background-color:rgba(11,44,92,.09);
  color:rgb(11 44 92);
}
/* Brand WebP icons carry their own colour — give them a little more
   breathing room than the thin-line SVG set. */
.card-icon:has(img){
  padding:9px;
  width:64px;
  height:64px;
}

/* --- Multi-modal transport icon strip (Coverage card) --- */
.mode-strip{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:1.25rem;
}
.mode-strip img{
  width:46px;
  height:46px;
  border-radius:10px;
  object-fit:cover;
}

/* --- Section headings: small accent rule for visual rhythm --- */
.section-head{
  position:relative;
  padding-top:.25rem;
}
.section-head:before{
  content:"";
  display:block;
  width:52px;
  height:4px;
  border-radius:99px;
  margin-bottom:1rem;
  background:linear-gradient(90deg, #1e8f5e, #0b2c5c);
}
.section-head.text-center:before{
  margin-left:auto;
  margin-right:auto;
}

/* --- Slightly richer alternating section backgrounds --- */
.section--alt{
  background-color:rgb(246 248 251);
}

/* --- Cards: subtle hover lift for interactivity --- */
.card{
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover,
.card:active{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(30,143,94,.28);
}
.feature-card{
  transition:box-shadow .18s ease;
}
.feature-card:hover{
  box-shadow:0 14px 32px rgba(30,143,94,.24);
}

/* --- Buttons: coloured hover shadow to match theme --- */
.btn-primary:hover{
  box-shadow:0 10px 20px rgba(30,143,94,.28);
}
.btn-outline:hover{
  box-shadow:0 10px 20px rgba(11,44,92,.18);
}

/* --- Tracking bar: headings must stay white on the navy background --- */
.tracking-bar h2,
.tracking-bar h3{
  color:#fff;
}
.hero{
  position:relative;
  min-height:100vh;
  padding-top:8.5rem;
  padding-bottom:6rem;
  display:flex;
  align-items:center;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  overflow:hidden;
}
.hero::before{
  background:linear-gradient(90deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.55) 26%, rgba(255,255,255,.2) 48%, rgba(255,255,255,0) 68%);
}
.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:220px;
  background:linear-gradient(180deg, rgba(246,248,251,0) 0%, rgba(246,248,251,.85) 65%, rgba(246,248,251,1) 100%);
  pointer-events:none;
  z-index:1;
}
.hero .container{
  position:relative;
  z-index:1;
  width:100%;
}

/* Content block: left-aligned, consistent rhythm between each piece */
.hero-content{
  max-width:560px;
  display:flex;
  flex-direction:column;
}
.hero-content .hero-badge{
  margin-bottom:1.25rem;
}
.hero-content h1{
  margin-bottom:1.25rem;
  text-shadow:0 1px 2px rgba(255,255,255,.4);
}
.hero-content > p{
  margin-bottom:2rem;
  font-size:1.05rem;
}
.hero-content .hero-cta{
  margin-top:0;
  margin-bottom:1.75rem;
}
.hero-content .hero-strip{
  margin-top:0;
  color:rgb(11 44 92);
  font-weight:700;
  text-shadow:
    0 0 6px #fff,
    0 0 10px #fff,
    0 0 14px #fff,
    0 1px 2px rgba(255,255,255,.9);
}

.hero-image-frame{
  background:#fff;
  padding:10px;
  border-radius:18px;
  box-shadow:0 24px 48px rgba(11,44,92,.22), 0 4px 14px rgba(11,44,92,.10);
}
.hero-image-frame img{
  border-radius:12px;
  box-shadow:none;
}

/* Responsive: tablet / mobile */
@media (max-width:900px){
  .hero{
    min-height:100vh;
    padding-top:9.5rem;
    padding-bottom:4rem;
    background-position:65% center;
  }
  .hero::before{
    background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 60%, rgba(255,255,255,.7) 100%);
  }
  .hero::after{
    height:140px;
  }
  .hero-content{
    max-width:100%;
  }
}
@media (max-width:520px){
  .hero-content .hero-cta{
    flex-direction:column;
    align-items:stretch;
  }
  .hero-content .hero-cta .btn,
  .hero-content .hero-cta .btn-gradient{
    justify-content:center;
    text-align:center;
  }
}

/* =========================================================
   "We Come to You" — wrapped in one long card
   ========================================================= */
.feature-card{
  background:#fff;
  border:1px solid rgb(226 232 240);
  border-radius:14px;
  box-shadow:0 4px 20px rgba(11,44,92,.08);
  padding:2.5rem 2rem;
}
.feature-row{
  gap:2rem;
}
@media (min-width:1024px){
  .feature-row > .feature-item{
    border-left:1px solid rgb(226 232 240);
    padding-left:2rem;
  }
  .feature-row > .feature-item:first-child{
    border-left:none;
    padding-left:0;
  }
}
.feature-item .card-icon{
  width:52px;
  height:52px;
}

/* =========================================================
   STEPS — distinct, separated connector segments between each
   pair of circles (not one continuous line running the full
   row). Each segment is a dash run that butts directly into a
   crisp triangular arrowhead with zero gap, so the two read as
   one clean "-->" flowing into the next step, then a small
   clearance gap before the circle itself.
   ========================================================= */
.step{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.step-num{
  position:relative;
  z-index:2;
  margin-left:auto;
  margin-right:auto;
}
.step h3,
.step p{
  max-width:240px;
}

/* Default (plain number) badge: 2.5rem / 40px diameter → 20px radius.
   The dash run butts directly against a crisp triangular arrowhead
   (no gap between them) — together they read as one clean "-->"
   flowing into the next step, with a small 10px clearance before
   the next circle. */
.step:not(:last-child):after{
  content:"";
  position:absolute;
  left:calc(50% + 30px);
  right:auto;
  width:calc(100% - 74px);
  height:3px;
  z-index:1;
  background-image:repeating-linear-gradient(90deg, rgb(30 143 94) 0 7px, transparent 7px 15px);
}
.step:not(:last-child):before{
  content:"";
  position:absolute;
  top:.84rem;
  left:calc(150% - 44px);
  right:auto;
  width:14px;
  height:16px;
  display:none;
  background:rgb(30 143 94);
  clip-path:polygon(0 0, 0 100%, 100% 50%);
  z-index:2;
}
@media (min-width:1024px){
  .step:not(:last-child):before{
    display:block;
  }
}
.step-num{
  box-shadow:0 8px 20px rgba(11,44,92,.3);
}

/* Icon-badge variant (used for the multi-step process rows):
   68px diameter → 34px radius, same butted-arrowhead treatment. */
.step-num--icon{
  position:relative;
  z-index:2;
  width:68px;
  height:68px;
  border-radius:50%;
  background:#fff;
  padding:14px;
  box-shadow:0 10px 24px rgba(11,44,92,.22), 0 0 0 1px rgba(226,232,240,.8);
}
.step-num--icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.step:has(.step-num--icon):not(:last-child):after{
  top:2.125rem;
  left:calc(50% + 44px);
  width:calc(100% - 102px);
}
.step:has(.step-num--icon):not(:last-child):before{
  top:1.72rem;
  left:calc(150% - 58px);
}

/* Small eyebrow label above a section heading (e.g. "E-COMMERCE LOGISTICS") */
.section-eyebrow{
  display:block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgb(30 143 94);
  margin-bottom:.5rem;
}

/* Hero — small centered badge (brand colours) */
.hero-badge--sm{
  display:block;
  width:fit-content;
  margin:0 auto 1.25rem;
  padding:.3rem .85rem;
  font-family:Poppins, Segoe UI, system-ui, sans-serif;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.01em;
  color:rgb(30 143 94);
  background-color:rgb(229 245 236);
  border-radius:9999px;
  text-align:center;
}
@media (min-width:768px){
  .hero-badge--sm{
    margin-left:0;
    margin-right:0;
  }
}

/* =========================================================
   Transparent overlay navbar (used on pages with a full-bleed
   hero, e.g. Contact) — floats over the background image
   instead of pushing content down. (Styling now lives in the
   floating-pill block above; this just repeats the positioning
   for clarity/future edits.)
   ========================================================= */
.site-header--transparent{
  position:fixed;
  top:0; left:0; right:0;
}

/* =========================================================
   Contact page — single full-viewport hero (bg image + intro +
   glass form panel), footer follows immediately after.
   ========================================================= */
.contact-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:8.5rem;
  padding-bottom:2rem;
  background-image:url("../images/hero-bg.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.contact-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.32) 35%, rgba(255,255,255,.48) 100%);
  pointer-events:none;
}
.contact-hero .container{
  position:relative;
  z-index:1;
  width:100%;
}
.contact-intro{
  margin-bottom:1.75rem;
}
.contact-intro--center{
  text-align:center;
}
.contact-intro--center .hero-badge{
  margin-left:auto;
  margin-right:auto;
}
.contact-panel{
  display:flex;
  justify-content:center;
}
.contact-panel .card--glass{
  width:100%;
  max-width:1140px;
}

/* --- Glassmorphism form card --- */
.card--glass{
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 32px rgba(11,44,92,.18);
  padding:1.5rem 2.25rem;
}
.card--glass .form-field{
  margin-bottom:.5rem;
}
.card--glass input,
.card--glass select,
.card--glass textarea{
  background:rgba(255,255,255,.7);
}

/* =========================================================
   Hero "Book a Pickup" button — continuous green ripple pulse
   ========================================================= */
.btn-ripple{
  position:relative;
  z-index:1;
  overflow:visible;
}
.btn-ripple:before,
.btn-ripple:after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(30,143,94,0);
  border:2px solid rgba(30,143,94,.55);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  z-index:-1;
  pointer-events:none;
  animation:btn-ripple 2.2s ease-out infinite;
}
.btn-ripple:after{
  animation-delay:1.1s;
}
.btn-ripple:hover{
  background-color:rgb(23 122 79);
  box-shadow:0 8px 22px rgba(30,143,94,.35);
}
.btn-ripple:active{
  transform:scale(.96);
}
@keyframes btn-ripple{
  0%{
    transform:translate(-50%,-50%) scale(0);
    opacity:.9;
    border-width:2px;
  }
  100%{
    transform:translate(-50%,-50%) scale(6);
    opacity:0;
    border-width:0;
  }
}
@media (prefers-reduced-motion: reduce){
  .btn-ripple:before,
  .btn-ripple:after{
    animation:none;
    display:none;
  }
}

/* =========================================================
   Navbar "Book a Pickup" — animated pill button
   ========================================================= */
/* Rebuilt to guarantee spacing via flex layout instead of manual
   pixel offsets — the text and resting arrow are normal flex items
   with a fixed gap, so they can never crowd each other regardless
   of padding or label length. Only the hover "swap" animation uses
   absolute positioning (arr-2 sliding in, arr-1 sliding out). */
.nav-btn-animated{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:.75rem 1.85rem;
  border:2px solid transparent;
  font-family:Inter,Segoe UI,system-ui,sans-serif;
  font-size:.9rem;
  background-color:rgb(30 143 94);
  border-radius:100px;
  font-weight:600;
  color:#fff;
  box-shadow:0 0 0 2px #fff;
  cursor:pointer;
  overflow:hidden;
  transition:all .6s cubic-bezier(.23,1,.32,1);
}
.nav-btn-animated svg{
  width:16px;
  flex:0 0 auto;
  fill:#fff;
  z-index:1;
  transition:all .5s cubic-bezier(.23,1,.32,1);
}
.nav-btn-animated .arr-1{
  position:relative;
  order:-1;
}
.nav-btn-animated .arr-2{
  position:absolute;
  width:18px;
  left:-30%;
  z-index:9;
}
.nav-btn-animated .circle{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:20px;
  height:20px;
  background-color:rgb(11 44 92);
  border-radius:50%;
  opacity:0;
  transition:all .8s cubic-bezier(.23,1,.32,1);
}
.nav-btn-animated .text{
  position:relative;
  z-index:1;
  transition:transform .5s cubic-bezier(.23,1,.32,1);
}
.nav-btn-animated:hover,
.nav-btn-animated:active{
  box-shadow:0 0 0 12px transparent;
  color:#fff;
  border-radius:12px;
}
.nav-btn-animated:hover .arr-1,
.nav-btn-animated:active .arr-1{
  transform:translateX(10px);
  opacity:0;
}
.nav-btn-animated:hover .arr-2,
.nav-btn-animated:active .arr-2{
  left:calc(100% - 34px);
}
.nav-btn-animated:hover .text,
.nav-btn-animated:active .text{
  transform:translateX(-4px);
}
.nav-btn-animated:hover svg,
.nav-btn-animated:active svg{
  fill:#fff;
}
.nav-btn-animated:hover .circle,
.nav-btn-animated:active .circle{
  width:220px;
  height:220px;
  opacity:1;
}
.nav-btn-animated:active{
  scale:.95;
  box-shadow:0 0 0 4px rgb(30 143 94 / .45);
}

/* =========================================================
   Gradient glow buttons — "Get a Business Quote",
   "Know More About Us", "Partner With Us"
   (adapted from Uiverse.io by nima-mollazadeh, retinted to
   the TrueTransit green/navy palette)
   ========================================================= */
.btn-gradient{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(45deg, #1e8f5e, #24a86e, #0b2c5c);
  padding:.75rem 1.75rem;
  border-radius:10px;
  font-family:Inter,Segoe UI,system-ui,sans-serif;
  font-size:.95rem;
  font-weight:600;
  cursor:pointer;
}
.btn-gradient span{
  position:relative;
  z-index:1;
}
.btn-gradient::before{
  content:"";
  position:absolute;
  inset:2px;
  background:#0b2c5c;
  border-radius:8px;
  transition:.5s;
}
.btn-gradient:hover::before,
.btn-gradient:active::before{
  opacity:.7;
}
.btn-gradient::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(45deg, #1e8f5e, #24a86e, #0b2c5c);
  border-radius:9px;
  transition:.5s;
  opacity:0;
  filter:blur(20px);
}
.btn-gradient:hover::after,
.btn-gradient:active::after{
  opacity:1;
}

/* =========================================================
   FAQ — smooth open/close transition (replaces display toggle)
   ========================================================= */
.faq-answer{
  display:block;
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding-bottom:0;
  transition:max-height .45s cubic-bezier(.4,0,.2,1), opacity .35s ease, padding-bottom .35s ease;
}
.faq-item.is-open .faq-answer{
  max-height:320px;
  opacity:1;
  padding-bottom:1.25rem;
}

/* =========================================================
   Homepage: extra gap + content for "Making Logistics Simpler"
   ========================================================= */
.mini-highlights{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:1.5rem;
  margin-top:2rem;
  margin-bottom:2rem;
}
.mini-highlight{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.mini-highlight .card-icon{
  margin-bottom:.25rem;
}
.mini-highlight h4{
  font-family:Poppins,Segoe UI,system-ui,sans-serif;
  font-weight:600;
  color:rgb(11 44 92);
  margin-bottom:.15rem;
}
.mini-highlight p{
  font-size:.92rem;
  margin-bottom:0;
}
.faq-section{
  margin-top:3rem;
}
@media (max-width:768px){
  .faq-section{
    margin-top:1.5rem;
  }
}


/* =========================================================
   CTA banner — centered, bigger shadow, richer look
   ========================================================= */
.cta-banner{
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.75rem;
  background:linear-gradient(135deg, rgb(11 44 92), rgb(8 33 70));
  border-radius:20px;
  box-shadow:0 24px 60px rgba(11,44,92,.35), 0 0 0 1px rgba(255,255,255,.06);
  padding:3rem 2rem;
}
.cta-banner p{
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}
.cta-banner-actions{
  justify-content:center;
}

/* --- "Why Choose" style feature rows: centered content --- */
.feature-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* --- Mini highlight blocks now read as proper cards --- */
.mini-highlight{
  align-items:center;
  text-align:center;
  background:#fff;
  border:1px solid rgb(226 232 240);
  border-radius:14px;
  padding:1.75rem 1.5rem;
  box-shadow:0 16px 40px rgba(11,44,92,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.mini-highlight:hover,
.mini-highlight:active{
  transform:translateY(-4px);
  box-shadow:0 22px 48px rgba(30,143,94,.32);
}

/* --- Global shadow boost: cards + step badges read a bit richer --- */
.card{
  box-shadow:0 18px 44px rgba(11,44,92,.2) !important;
}
.card:hover{
  box-shadow:0 26px 56px rgba(30,143,94,.4) !important;
}
.feature-card{
  box-shadow:0 18px 44px rgba(11,44,92,.16) !important;
}

/* --- Guarantee: nav-links a{color:...} must never dim the CTA button --- */
.nav-links .nav-btn-animated,
.nav-links .nav-btn-animated .text{
  color:#fff;
}

/* (Old burger→X block removed — superseded by the absolute-position
   version further down in this file, which centers correctly.) */

/* Mobile dropdown panel: smoother open/close + full-width CTAs */
.nav-links.is-open{
  border-radius:20px;
  box-shadow:0 20px 40px rgba(11,44,92,.18);
  animation:navDropIn .25s ease;
}
@keyframes navDropIn{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* (Anchor scroll offset for #services / #how-it-works / #for-businesses /
   #tracking is handled by the global [id] rule above — these ids now sit
   on the inner heading block, not the outer full-height section, so the
   jump lands right at the heading instead of the section's empty top.) */

/* --- "What We Do" cards: centered content --- */
.card--center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.card--center .card-icon{
  margin-left:auto;
  margin-right:auto;
}
.card--center ul{
  display:inline-block;
  text-align:left;
}

/* --- Card grid: flexible layout that adapts to card count --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .card-grid {
    /* Auto-fit: adapts to number of cards */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* --- Services card grid: force 3 columns on desktop (home page) --- */
.card-grid--services {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .card-grid--services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .card-grid--services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- "Why Choose TrueTransit" grid: fixed columns instead of
   auto-fit (which stretched an odd trailing row unevenly) --- */
.mini-highlights{
  grid-template-columns:repeat(1, minmax(0,1fr));
  justify-content:center;
}
@media (min-width:640px) and (max-width:1023.98px){
  .mini-highlights{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .mini-highlights > *:last-child:nth-child(2n+1){
    grid-column:1 / -1;
    max-width:360px;
    margin-left:auto;
    margin-right:auto;
  }
}
@media (min-width:1024px){
  .mini-highlights{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
  /* If the last card is alone in its row (item count ≡ 1 mod 3),
     center it instead of leaving it stranded on the left. */
  .mini-highlights > *:last-child:nth-child(3n+1){
    grid-column:1 / -1;
    max-width:360px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* --- Navbar: center the links between the logo and the CTA,
   and make them read a bit larger/bolder --- */
@media (min-width:1024px){
  .nav-links{
    flex:1;
    justify-content:center;
  }
}
.nav-links a{
  font-size:1.2rem;
  letter-spacing:.01em;
  display:inline-block;
  padding-top:.3rem;
  line-height:1;
}

/* =========================================================
   Transparent scrollbar site-wide (thin, see-through track,
   subtle thumb — still functional, just unobtrusive)
   ========================================================= */
html{
  scrollbar-width:thin;                          /* Firefox */
  scrollbar-color:rgba(11,44,92,.25) transparent; /* Firefox: thumb, track */
  overflow-x:hidden;
  max-width:100%;
}
body{
  overflow-x:hidden;
  max-width:100%;
}
::-webkit-scrollbar{
  width:10px;
  height:10px;
  background:transparent;                        /* Chrome, Safari, new Edge */
}
::-webkit-scrollbar-track{
  background:transparent;
}
::-webkit-scrollbar-thumb{
  background-color:rgba(11,44,92,.25);
  border-radius:9999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background-color:rgba(11,44,92,.45);
}

/* =========================================================
   Navbar: truly center the nav links regardless of logo /
   CTA width, using a 3-column grid instead of space-between
   ========================================================= */
.nav-wrap{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1.5rem;
}
.nav-wrap .nav-links{
  justify-content:center;
  justify-self:center;
}

/* =========================================================
   Navbar menu wrapper — groups nav-links + nav-cta as ONE
   mobile dropdown, while staying invisible to layout on
   desktop (display:contents lets its children act as direct
   grid items of .nav-wrap, same as before this change).
   ========================================================= */
.nav-menu{
  display:none;
}
@media (min-width:1024px){
  .nav-menu{
    display:contents;
  }
}
.nav-menu.is-open{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:.75rem;
  padding:1.5rem;
  background:#fff;
  border-radius:20px;
  box-shadow:0 20px 40px rgba(11,44,92,.18);
  animation:navDropIn2 .2s ease;
}
@keyframes navDropIn2{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}
.nav-menu.closing{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:.75rem;
  padding:1.5rem;
  background:#fff;
  border-radius:20px;
  box-shadow:0 20px 40px rgba(11,44,92,.18);
  animation:navDropOut2 .18s ease forwards;
}
@keyframes navDropOut2{
  from{ opacity:1; transform:translateY(0); }
  to{ opacity:0; transform:translateY(-8px); }
}

/* Links: row on desktop, stacked column inside the mobile dropdown */
.nav-links{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
@media (min-width:1024px){
  .nav-links{
    flex-direction:row;
  }
}

/* CTA area: row on desktop (unchanged), full-width stacked buttons
   inside the mobile dropdown */
.nav-cta{
  flex-direction:column;
  align-items:stretch;
  width:100%;
}
@media (min-width:1024px){
  .nav-cta{
    flex-direction:row;
    align-items:center;
    width:auto;
  }
}
.nav-cta .btn,
.nav-cta .nav-btn-animated{
  width:100%;
  justify-content:center;
}
@media (min-width:1024px){
  .nav-cta .btn,
  .nav-cta .nav-btn-animated{
    width:auto;
  }
}

/* --- Mobile toggle: give it its own circular button chrome --- */
.nav-toggle{
  position:relative;
  justify-self:end;
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgb(11 44 92 / .06);
}
/* Force it visible below 1024px — an older leftover Tailwind rule
   still hides it at >=768px, so without this it disappears in the
   768-1023px tablet gap (neither the old rule nor the new one shows it). */
@media (max-width:1023px){
  .nav-toggle{
    display:flex;
  }
}
@media (min-width:1024px){
  .nav-toggle{
    display:none;
  }
}
.nav-toggle i{
  position:absolute;
  left:50%;
  width:20px;
  height:2px;
  border-radius:9999px;
  background-color:rgb(11 44 92);
  transform:translate(-50%,-50%);
  transition:transform .25s ease, opacity .25s ease, top .25s ease;
}
.nav-toggle i:nth-child(1){ top:calc(50% - 6px); }
.nav-toggle i:nth-child(2){ top:50%; }
.nav-toggle i:nth-child(3){ top:calc(50% + 6px); }
.nav-toggle.active i:nth-child(1){ top:50%; transform:translate(-50%,-50%) rotate(45deg); }
.nav-toggle.active i:nth-child(2){ opacity:0; }
.nav-toggle.active i:nth-child(3){ top:50%; transform:translate(-50%,-50%) rotate(-45deg); }

/* --- Logo: readable but not overwhelming on small screens,
   full size from tablet up --- */
.brand img{
  height:3.5rem;
}

/* Scroll-triggered content reveal. Transform does not affect the final layout. */
.tt-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.tt-reveal.tt-reveal--visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .tt-reveal{opacity:1;transform:none;transition:none;}
}
@media (min-width:1024px){
  .brand img{
    height:5.5rem;
  }
}

/* --- Footer: let long unbreakable strings (email addresses, long
   addresses) wrap instead of overflowing their column on narrow
   screens --- */
.footer-grid,
.footer-grid li,
.footer-grid a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Footer link styling - remove underlines and ensure visibility */
.site-footer a {
  text-decoration: none;
  color: rgb(203 213 225);
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: rgb(255 255 255);
  text-decoration: none;
}

.footer-bottom a {
  text-decoration: none;
  color: rgb(203 213 225);
}

.footer-bottom a:hover {
  text-decoration: none;
  color: rgb(255 255 255);
}

/* Ensure footer-bottom is always visible */
.footer-bottom {
  position: relative;
  z-index: 10;
  opacity: 1;
  visibility: visible;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  border-top-width: 1px;
  border-color: hsla(0,0%,100%,.1);
  padding-top: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  animation: fadeIn 0.3s ease-in forwards;
  will-change: opacity;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}

/* StartUp India recognition beside the header logo */
.brand-recognition {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(11,44,92,.22);
  padding-left: .75rem;
  color: #0b2c5c;
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.brand-recognition strong {
  font-family: 'Poppins', sans-serif;
  font-size: .8rem;
  font-weight: 700;
}
@media (max-width: 520px) {
  .brand { gap: .6rem; }
  .brand-recognition { padding-left: .45rem; font-size: .58rem; }
  .brand-recognition strong { font-size: .68rem; }
}

/* CourierCart tracking states and shipment history */
.tracking-form button:disabled { cursor: wait; opacity: .75; }
.tracking-spinner {
  display: inline-block; width: 1rem; height: 1rem; margin-left: .35rem;
  border: 2px solid rgba(255,255,255,.85); border-right-color: transparent;
  border-radius: 50%; animation: tracking-spin .7s linear infinite;
}
.tracking-spinner[hidden] { display: none; }
@keyframes tracking-spin { to { transform: rotate(360deg); } }
.tracking-feedback:not([hidden]) { margin-top: 1rem; color: #fecaca; font-weight: 600; }
.tracking-results:not([hidden]) { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.2); }
.tracking-mock-note { color: #fcd34d !important; font-size: .85rem; font-weight: 600; }
.tracking-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin: 0; margin-bottom: 1rem; }
.tracking-detail { background: rgba(255,255,255,.05); padding: 1rem; border-radius: .5rem; border-left: 3px solid #36a36d; }
.tracking-detail dt { color: #c7d4e8; font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.tracking-detail dd { color: #fff; font-weight: 600; font-size: 1rem; margin: 0; overflow-wrap: anywhere; word-break: break-word; }
.tracking-history-heading { margin-top: 1.5rem; margin-bottom: 1rem; font-size: 1.2rem; font-weight: 600; color: #fff; }
.tracking-timeline { border-left: 2px solid rgba(54,163,109,.5); list-style: none; margin: 0; padding: 0 0 0 1.5rem; }
.tracking-event { padding: 0 0 1.75rem 1.5rem; position: relative; }
.tracking-event:last-child { padding-bottom: 0; }
.tracking-event::before {
  background: #36a36d; border: 3px solid #0b2c5c; border-radius: 50%;
  content: ""; height: .75rem; left: -2.125rem; position: absolute; top: .25rem; width: .75rem; box-shadow: 0 0 0 3px rgba(54,163,109,.2);
}
.tracking-event h4 { color: #36a36d; font-size: 1.05rem; font-weight: 600; margin: 0 0 .5rem; }
.tracking-event p { color: #c7d4e8; font-size: .95rem; margin: 0; line-height: 1.4; }
.tracking-event p:first-of-type { color: #fff; font-weight: 500; }
.tracking-event p + p { margin-top: .5rem; }
.tracking-empty { color: #c7d4e8; font-size: 1rem; }

/* Arctis Digital link styling with underline and hover animation */
.footer-credit-link {
  text-decoration: underline;
  color: rgb(203 213 225);
  transition: all 0.3s ease;
  position: relative;
}

.footer-credit-link:hover {
  text-decoration: underline;
  color: rgb(255 255 255);
  letter-spacing: 0.5px;
}

.footer-bottom {
  align-items: center;
  flex-direction: column;
  gap: 0.75rem;
  color: #fff;
  text-align: center;
}

.footer-bottom p,
.footer-bottom nav,
.footer-bottom nav span,
.footer-bottom a,
.footer-bottom a:hover {
  color: #fff;
}

.footer-copyright,
.footer-credit {
  margin: 0;
}

.footer-bottom-meta,
.footer-policy-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.footer-bottom-meta {
  width: 100%;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-bottom .footer-credit-link,
.footer-bottom .footer-credit-link:hover {
  text-decoration: underline;
}

@media (max-width: 360px) {
  .footer-policy-links {
    gap: 0.35rem;
    font-size: 0.7rem;
  }
}