/* =========================================================
   TOKENS
========================================================= */
:root{
  --paper:      #F2F3EC;
  --paper-2:    #E7E9DE;
  --line:       #CDD1C3;
  --navy:       #0D1A2B;
  --navy-2:     #14263D;
  --ink:        #10161F;
  --muted:      #57626C;
  --orange:     #FF5A1F;
  --orange-dk:  #C8410C;
  --white:      #FFFFFF;
 
  --display: 'Big Shoulders Stencil Text', sans-serif;
  --body:    'IBM Plex Sans', sans-serif;
  --mono:    'IBM Plex Mono', monospace;
}
 
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.container{ max-width:1180px; margin:0 auto; padding:0 28px; }
 
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}
 
/* Eyebrow / manifest code label used throughout */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange-dk);
  font-weight:600;
}
.eyebrow::before{
  content:"";
  width:16px; height:1px;
  background:var(--orange-dk);
}
 
.section-title{ max-width:640px; margin-bottom:52px; }
.section-title h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(30px,4vw,44px);
  letter-spacing:.01em;
  line-height:1.05;
  margin:14px 0 14px;
  color:var(--navy);
}
.section-title p{ color:var(--muted); font-size:15.5px; max-width:520px; }
.section-title.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-title.center p{ margin-left:auto; margin-right:auto; }
 
/* =========================================================
   HEADER
========================================================= */
.ship-header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.header-wrapper{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
  gap:24px;
}
.brand-row{ display:flex; align-items:center; gap:12px; }
.company-logo{
  width:42px; height:42px;
  background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  color:var(--orange);
  font-family:var(--display);
  font-size:20px;
  flex-shrink:0;
}
.brand-details h1{
  font-family:var(--display);
  font-size:19px;
  letter-spacing:.05em;
  color:var(--navy);
  font-weight:700;
}
.brand-details p{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.header-left{ display:flex; align-items:center; gap:44px; }
.navbar{ display:flex; gap:30px; }
.navbar a{
  font-size:14px; font-weight:500; color:var(--ink);
  position:relative; padding:4px 0;
}
.navbar a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--orange); transition:width .2s ease;
}
.navbar a:hover::after, .navbar a.active::after{ width:100%; }
.navbar a.active{ color:var(--orange-dk); }
.track-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--navy); color:var(--white);
  padding:11px 20px; font-size:13.5px; font-weight:600;
  border:1px solid var(--navy);
}
.track-btn:hover{ background:var(--orange); border-color:var(--orange); }
 
/* =========================================================
   HERO — waybill stub as signature element
========================================================= */
.ship-hero{
  background:var(--navy);
  color:var(--white);
  position:relative;
  overflow:hidden;
  padding:76px 0 0;
}
.ship-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px;
  align-items:center; position:relative; z-index:1;
  padding-bottom:64px;
}
.hero-tag{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--orange);
  display:inline-block; margin-bottom:18px;
}
.hero-left h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(38px,5vw,58px); line-height:1.02;
  letter-spacing:.005em;
}
.hero-left > p{
  color:#C6CDD6; font-size:16px; max-width:480px; margin:22px 0 32px;
}
.hero-buttons{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }
.primary-btn, .secondary-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; font-size:14px; font-weight:600;
  border:1px solid transparent; cursor:pointer;
}
.primary-btn{ background:var(--orange); color:var(--white); }
.primary-btn:hover{ background:var(--orange-dk); }
.secondary-btn{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.35); }
.secondary-btn:hover{ border-color:var(--orange); color:var(--orange); }
 
.hero-stats{ display:flex; gap:36px; border-top:1px solid rgba(255,255,255,.14); padding-top:26px; }
.stat-box h2{ font-family:var(--display); font-size:30px; color:var(--orange); }
.stat-box span{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#9BA6B2; }
 
/* --- the waybill stub card (signature element) --- */
.hero-right{ position:relative; }
.hero-card{
  background:var(--paper);
  color:var(--ink);
  position:relative;
  padding:0;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
  transform:rotate(1.2deg);
}
.hero-card-top{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--mono);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
  padding:14px 22px;
}
.hero-card-top i{ color:var(--orange); }
.shipment-preview{ padding:26px 22px 10px; position:relative; }
.preview-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:12px 0; border-bottom:1px dashed var(--line);
  font-size:14px;
}
.preview-row span{ color:var(--muted); font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; }
.preview-row strong{ font-weight:600; }
 
/* barcode */
.barcode{
  margin:22px 22px 0;
  height:46px;
  background-image:repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px,
    var(--ink) 5px 9px, transparent 9px 12px,
    var(--ink) 12px 13px, transparent 13px 17px);
}
.barcode-label{
  margin:6px 22px 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; color:var(--muted); display:flex; justify-content:space-between;
  padding-bottom:20px;
}
 
/* stamp seal */
.hero-stamp{
  position:absolute; right:26px; top:112px;
  width:92px; height:92px; border-radius:50%;
  border:2px dashed var(--orange-dk);
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-14deg);
  color:var(--orange-dk);
  font-family:var(--display); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  text-align:center; line-height:1.15;
  background:rgba(255,90,31,.06);
}
 
.preview-footer{
  display:flex; align-items:center; gap:10px;
  background:var(--navy); color:#C6CDD6;
  font-size:12.5px; padding:14px 22px;
}
.preview-footer i{ color:var(--orange); }
 
/* perforation strip between hero and next section */
.perforation{
  height:18px;
  background:var(--paper);
  position:relative;
  background-image:radial-gradient(circle at 14px 0, var(--navy) 7px, transparent 7.5px);
  background-size:28px 18px;
  background-repeat:repeat-x;
  background-position-y:-9px;
}
 
/* =========================================================
   PROCESS (real sequence -> lettered manifest codes)
========================================================= */
.shipping-process{ padding:96px 0 88px; }
.process-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.process-card{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:34px 26px; position:relative;
  transition:background .2s ease;
}
.process-card:hover{ background:var(--paper-2); }
.process-card::before{
  counter-increment:step;
  content:"RQ-0" counter(step);
  font-family:var(--mono); font-size:11px; color:var(--orange-dk);
  letter-spacing:.08em; display:block; margin-bottom:22px;
}
.process-grid{ counter-reset:step; }
.process-icon{
  width:44px; height:44px; border:1px solid var(--navy);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy); font-size:17px; margin-bottom:18px;
}
.process-card h3{ font-family:var(--display); font-size:20px; color:var(--navy); margin-bottom:8px; letter-spacing:.01em; }
.process-card p{ color:var(--muted); font-size:14px; }
 
/* =========================================================
   SHIPMENT BOOKING FORM
========================================================= */
.shipment-booking{ background:var(--navy-2); padding:96px 0; color:var(--white); }
.shipment-booking .section-title h2{ color:var(--white); }
.shipment-booking .section-title p{ color:#AFB9C4; }
.shipment-booking .eyebrow{ color:var(--orange); }
.shipment-booking .eyebrow::before{ background:var(--orange); }
 
.form-card{
  background:var(--paper); color:var(--ink);
  padding:32px; margin-bottom:22px;
  border-top:3px solid var(--orange);
}
.form-card-title{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-size:19px; color:var(--navy);
  letter-spacing:.02em; margin-bottom:24px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.form-card-title i{ color:var(--orange-dk); }
 
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group.full-width{ grid-column:1 / -1; }
.form-group label{
  display:block; font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.form-group input, .form-group select, .form-group textarea{
  width:100%; border:1px solid var(--line); background:var(--white);
  padding:12px 14px; font-family:var(--body); font-size:14px; color:var(--ink);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange);
}
.form-group textarea{ resize:vertical; }
 
.options-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.option-box{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); padding:14px; cursor:pointer; font-size:13.5px;
}
.option-box:has(input:checked){ border-color:var(--orange); background:#FFF4EE; }
.option-box i{ color:var(--orange-dk); }
 
.shipping-summary{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.15); margin:8px 0 30px; }
.summary-card{ background:var(--navy); padding:26px 22px; text-align:center; }
.summary-card i{ color:var(--orange); font-size:20px; margin-bottom:10px; }
.summary-card h3{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#9BA6B2; margin-bottom:6px; }
.summary-card h2{ font-family:var(--display); font-size:22px; }
 
.submit-section{ text-align:center; }
.submit-section > p{ color:#AFB9C4; font-size:13px; max-width:460px; margin:0 auto 18px; }
.submit-request-btn{
  background:var(--orange); color:var(--white); border:none;
  padding:16px 36px; font-size:14.5px; font-weight:700;
  letter-spacing:.02em; display:inline-flex; align-items:center; gap:10px; cursor:pointer;
}
.submit-request-btn:hover{ background:var(--orange-dk); }
 
/* =========================================================
   WHY CHOOSE US
========================================================= */
.why-choose{ padding:96px 0; }
.features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); }
.feature-card{ background:var(--paper); padding:34px 30px; }
.feature-icon{
  width:46px; height:46px; background:var(--navy); color:var(--orange);
  display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:18px;
}
.feature-card h3{ font-family:var(--display); font-size:19px; color:var(--navy); margin-bottom:8px; }
.feature-card p{ color:var(--muted); font-size:14px; }
 
/* =========================================================
   SERVICES
========================================================= */
.shipping-services{ background:var(--paper-2); padding:96px 0; }
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.service-card{
  background:var(--white); border:1px solid var(--line);
  padding:30px 26px; transition:border-color .2s ease, transform .2s ease;
}
.service-card:hover{ border-color:var(--orange); transform:translateY(-3px); }
.service-card i{ font-size:22px; color:var(--orange-dk); margin-bottom:16px; }
.service-card h3{ font-family:var(--display); font-size:19px; color:var(--navy); margin-bottom:8px; }
.service-card p{ color:var(--muted); font-size:14px; }
 
/* =========================================================
   COVERAGE — flight path device
========================================================= */
.coverage-section{ background:var(--navy); color:var(--white); padding:100px 0; position:relative; overflow:hidden; }
.coverage-wrapper{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; position:relative; z-index:1; }
.coverage-left > span{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); }
.coverage-left h2{ font-family:var(--display); font-size:clamp(28px,3.6vw,40px); margin:14px 0 18px; line-height:1.08; }
.coverage-left p{ color:#AFB9C4; font-size:15px; margin-bottom:26px; }
.coverage-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
.coverage-list li{ display:flex; align-items:center; gap:10px; font-size:13.5px; }
.coverage-list i{ color:var(--orange); }
 
.coverage-card{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.15); }
.coverage-item{ background:var(--navy-2); padding:32px 24px; }
.coverage-item h3{ font-family:var(--display); font-size:34px; color:var(--orange); }
.coverage-item p{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#9BA6B2; margin-top:6px; }
 
/* =========================================================
   CUSTOMER PROMISE
========================================================= */
.customer-promise{ padding:90px 0; }
.promise-card{
  background:var(--paper-2); border:1px solid var(--line);
  padding:56px 48px; text-align:center; max-width:760px; margin:0 auto;
}
.promise-icon{ width:56px; height:56px; margin:0 auto 20px; background:var(--orange); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:22px; }
.promise-card h2{ font-family:var(--display); font-size:clamp(24px,3vw,32px); color:var(--navy); margin-bottom:14px; }
.promise-card p{ color:var(--muted); font-size:15px; max-width:560px; margin:0 auto; }
.promise-badges{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:28px; }
.promise-badges span{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--line); padding:9px 14px; }
.promise-badges i{ color:var(--orange-dk); }
 
/* =========================================================
   FAQ
========================================================= */
.faq-section{ padding:96px 0; background:var(--paper-2); }
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); }
.faq-card{ background:var(--paper); padding:28px 30px; }
.faq-card h3{ display:flex; gap:12px; align-items:flex-start; font-size:16px; color:var(--navy); font-weight:600; margin-bottom:10px; }
.faq-card h3 i{ color:var(--orange-dk); margin-top:3px; }
.faq-card p{ color:var(--muted); font-size:14px; padding-left:26px; }
 
/* =========================================================
   CTA
========================================================= */
.cta-section{ background:var(--navy); padding:90px 0; }
.cta-box{ text-align:center; max-width:640px; margin:0 auto; }
.cta-box h2{ font-family:var(--display); font-size:clamp(28px,3.6vw,38px); color:var(--white); margin-bottom:14px; }
.cta-box p{ color:#AFB9C4; font-size:15px; margin-bottom:30px; }
.cta-buttons{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
 
/* =========================================================
   CONTACT
========================================================= */
.contact-section{ padding:96px 0; }
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); }
.contact-card{ background:var(--paper); padding:32px 28px; }
.contact-card i{ color:var(--orange-dk); font-size:19px; margin-bottom:14px; }
.contact-card h3{ font-family:var(--display); font-size:17px; color:var(--navy); margin-bottom:8px; letter-spacing:.02em; }
.contact-card p{ color:var(--muted); font-size:14px; }
 
/* =========================================================
   FOOTER
========================================================= */
.footer{ background:var(--navy); color:#AFB9C4; padding:70px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-about img{ display:none; }
.footer-about h3{ font-family:var(--display); font-size:20px; color:var(--white); margin-bottom:12px; }
.footer-about p{ font-size:13.5px; line-height:1.7; }
.footer-links h4{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--white); margin-bottom:16px; }
.footer-links ul li{ font-size:13.5px; margin-bottom:10px; }
.footer-links a:hover{ color:var(--orange); }
.social-icons{ display:flex; gap:10px; }
.social-icons a{
  width:34px; height:34px; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
}
.social-icons a:hover{ border-color:var(--orange); color:var(--orange); }
.footer-bottom{ display:flex; justify-content:space-between; padding:24px 0; font-size:12px; flex-wrap:wrap; gap:8px; }
 
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px){
  .header-left{ gap:20px; }
  .navbar{ display:none; }
  .hero-grid{ grid-template-columns:1fr; padding-bottom:40px; }
  .process-grid{ grid-template-columns:1fr 1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .options-grid{ grid-template-columns:1fr 1fr; }
  .features-grid, .services-grid, .contact-grid{ grid-template-columns:1fr 1fr; }
  .coverage-wrapper{ grid-template-columns:1fr; }
  .faq-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  .process-grid, .features-grid, .services-grid, .contact-grid, .options-grid, .coverage-card, .footer-grid, .shipping-summary, .faq-grid{ grid-template-columns:1fr; }
  .hero-stats{ flex-wrap:wrap; gap:22px; }
  .hero-card{ transform:none; }
  .header-wrapper{ flex-wrap:wrap; }
}