/* =====================================================================
   BoltCargo Logistics — stylesheet
   Sections:
     1. Design tokens (CSS variables)
     2. Base / reset
     3. Reusable building blocks (container, buttons, eyebrow, headings)
     4. Header / navigation
     5. Hero
     6. Section helpers (split layout, swoosh image, lists, quotes)
     7. Individual sections (about banner, services cards, why, sustainability…)
     8. Contact form
     9. Footer
    10. Scroll-reveal animation
    11. Responsive (media queries)
    12. Motion preferences
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   Variables defined once and reused everywhere. Values come from
   BRAND_GUIDELINES.md. Change here -> updates site-wide.
   --------------------------------------------------------------------- */
:root {
  /* Brand colours */
  --navy:   #012069;
  --ocean:  #0079C1;
  /* Slightly darker ocean for SMALL text (links, eyebrows): #0079C1 is
     ~4.4:1 contrast on white, just under the 4.5:1 accessibility minimum.
     Keep --ocean for large text, buttons, and graphics. */
  --ocean-text: #006DAE;
  --teal:   #00CEB1;
  --indigo: #1A1BDF;
  --ink:    #09080C;

  /* Neutrals */
  --white:  #FFFFFF;
  --pale:   #EEF4FA;
  --mist:   #D9E2EC;
  --slate:  #3B4A63;

  /* Signature teal -> ocean -> indigo gradient */
  --brand-gradient: linear-gradient(120deg, #00CEB1 0%, #0079C1 45%, #1A1BDF 100%);

  /* Typography */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-hero:    clamp(2.4rem, 5vw, 4rem);
  --fs-h2:      clamp(1.8rem, 3.2vw, 2.75rem);
  --fs-h3:      clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-eyebrow: 0.8rem;
  --fs-body:    clamp(1rem, 1.1vw, 1.125rem);
  --fs-small:   0.875rem;

  /* Layout */
  --container:  1200px;
  --pad-x:      clamp(1.25rem, 5vw, 4rem);
  --section-y:  clamp(4rem, 9vw, 7rem);
  --header-h:   76px;

  --shadow:    0 10px 30px rgba(1, 32, 105, 0.10);
  --shadow-lg: 0 24px 50px rgba(1, 32, 105, 0.16);
  --radius:    14px;
}


/* ---------------------------------------------------------------------
   2. BASE / RESET
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--slate);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                 /* belt-and-braces: no sideways scroll */
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--ocean-text); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--navy); line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* Leave room for the fixed header when jumping to a section */
section[id], main > section { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Visible focus ring for keyboard users (accessibility) */
:focus-visible {
  outline: 3px solid var(--ocean);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link: hidden until focused, then appears top-left */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 0.7rem 1.2rem;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }


/* ---------------------------------------------------------------------
   3. REUSABLE BUILDING BLOCKS
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Standard vertical spacing for a section */
.section { padding-block: var(--section-y); }

/* Pale-blue alternating background */
.section--pale { background: var(--pale); }

/* Small uppercase label above section titles */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ocean-text);
  margin-bottom: 0.85rem;
}

/* Centred section heading block (used by Services, Why BCL) */
.section__head { max-width: 760px; margin: 0 auto clamp(2rem, 4vw, 3.5rem); text-align: center; }
.section__head .eyebrow { display: block; }
.section__intro { color: var(--slate); margin-top: 1rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary {
  background: var(--ocean);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(0, 121, 193, 0.30);
}
.btn--primary:hover { background: var(--navy); }
.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--mist);
}
.btn--ghost:hover { border-color: var(--ocean); color: var(--ocean-text); }


/* ---------------------------------------------------------------------
   4. HEADER / NAVIGATION
   --------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  background: transparent;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.logo img { width: 150px; height: auto; }

.nav__list {
  list-style: none;
  padding: 0;                          /* remove default 40px list indent */
  margin: 0;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
.nav__list a { color: var(--navy); font-weight: 500; font-size: 0.95rem; }
.nav__list a:hover { color: var(--ocean); text-decoration: none; }
.nav__cta {
  background: var(--navy);
  color: var(--white) !important;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
}
.nav__cta:hover { background: var(--ocean); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle__bar {
  width: 26px; height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ---------------------------------------------------------------------
   5. HERO  (PDF page 1)
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  min-height: 100vh;
  padding: var(--header-h) var(--pad-x) clamp(2rem, 5vw, 4rem);
  max-width: calc(var(--container) + 8vw);
  margin-inline: auto;
}
.hero__media {
  position: relative;
  height: min(82vh, 640px);
  border-radius: 0 var(--radius) var(--radius) 0;
  overflow: hidden;
  clip-path: ellipse(118% 100% at 0% 50%);   /* curved right edge = the "B" swoosh */
}
/* object-position keeps the ship (right side of the photo) in view
   instead of letting the default centre-crop cut it off */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.hero__swoosh-edge {
  position: absolute;
  inset: 0;
  clip-path: ellipse(118% 100% at 0% 50%);
  border-right: 6px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    var(--brand-gradient) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.hero__content { max-width: 34rem; }
.hero__title { font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 1.1rem; }
.hero__lead { font-size: var(--fs-body); color: var(--slate); margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }


/* ---------------------------------------------------------------------
   6. SECTION HELPERS
   --------------------------------------------------------------------- */

/* Two-column "split": text on one side, image on the other.
   Modifiers decide which side the image sits on (desktop). */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
/* media-right: content first, image second (image appears on the right) */
.split--media-right .split__content { order: 1; }
.split--media-right .split__media   { order: 2; }
/* media-left: image first (appears on the left), content second */
.split--media-left .split__media    { order: 1; }
.split--media-left .split__content  { order: 2; }

.split__content { max-width: 38rem; }

/* Plain image block (rounded corners + soft shadow).
   Scoped to "picture img" so overlay images (e.g. the DashPort logo)
   don't inherit the full-width sizing. */
.split__media picture img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

/* Swoosh-masked images: carve a curved edge like the deck's bracket.
   swoosh-right curves the RIGHT edge; swoosh-left curves the LEFT edge. */
.split__media--swoosh { position: relative; }
.split__media--swoosh picture img { box-shadow: none; }
.swoosh-right picture img { clip-path: ellipse(115% 100% at 0% 50%); border-radius: var(--radius); }
.swoosh-left  picture img { clip-path: ellipse(115% 100% at 100% 50%); border-radius: var(--radius); }

/* Tick list: chevron-marker bullets in ocean blue (matches the deck's "›")
   padding: 0 removes the browser's default 40px list indent, which would
   push the list right and make the side spacing uneven. */
.ticklist { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.7rem; }
.ticklist li { position: relative; padding-left: 1.7rem; }
.ticklist li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: -0.05em;
  color: var(--ocean);
  font-weight: 800;
  font-size: 1.2em;
}
/* Pull-quote blocks */
.quote { margin-top: clamp(2rem, 4vw, 3rem); }
.quote blockquote {
  position: relative;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.45;
  font-weight: 500;
  font-style: italic;
  color: var(--navy);
  padding-left: 1.5rem;
  border-left: 4px solid transparent;
  border-image: var(--brand-gradient) 1;     /* gradient accent bar */
  max-width: 60rem;
}
.quote--center { text-align: center; }
.quote--center blockquote {
  margin-inline: auto;
  border-left: 0;
  padding-left: 0;
  padding-top: 1.25rem;
  border-top: 4px solid transparent;
  border-image: var(--brand-gradient) 1;
}


/* ---------------------------------------------------------------------
   7. INDIVIDUAL SECTIONS
   --------------------------------------------------------------------- */

/* About — gradient banner with the positioning line.
   The banner is the section's last element, so the section's own bottom
   padding is removed to let the banner sit flush against the next section. */
.about { padding-bottom: 0; }
.banner {
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--brand-gradient);
}
.banner__text {
  color: #fff;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  padding-block: clamp(2rem, 4vw, 3rem);
  margin: 0;
  max-width: 60rem;
  margin-inline: auto;
}

/* Services — card grid */
.cards {
  list-style: none;
  padding: 0;                          /* remove default 40px list indent */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--brand-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 1.1rem;
}
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--slate); font-size: 1rem; }

/* Why BCL — benefits grid */
.benefits {
  list-style: none;
  padding: 0;                          /* remove default 40px list indent */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.benefit {
  padding-left: 1.25rem;
  border-left: 3px solid;
  border-image: var(--brand-gradient) 1;
}
/* When a 2-column grid has an odd number of items (e.g. the 5
   sustainability points), stretch the last one across both columns
   instead of leaving an empty cell beside it */
.benefit:last-child:nth-child(odd) { grid-column: 1 / -1; }
.benefit h3 { margin-bottom: 0.4rem; }
.benefit p { color: var(--slate); font-size: 1rem; }

/* Platform — DashPort logo sitting on the dark left side of the globe image */
.platform-logo {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  left: clamp(1.25rem, 3.5vw, 2.5rem);
  width: clamp(110px, 13vw, 180px);
  height: auto;
}


/* ---------------------------------------------------------------------
   8. CONTACT FORM
   --------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.contact__intro { max-width: 34rem; }

/* Contact details block (address, email, phone from the V3 deck) */
.contact__details {
  font-style: normal;                 /* <address> is italic by default */
  margin-block: 1.5rem;
  display: grid;
  gap: 0.35rem;
}
.contact__details p { margin: 0; }
.contact__details strong { color: var(--navy); }

/* Photo under the contact details */
.contact__photo {
  margin-top: 1.75rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.contact__form { display: grid; gap: 1.1rem; }
/* Stop the submit button from stretching to the full grid width:
   "justify-self: start" shrinks it to its content and aligns it left. */
.contact__form .btn { justify-self: start; }
.field { display: grid; gap: 0.4rem; }

/* Honeypot anti-spam field: moved far off-screen so humans never see it,
   but still present in the DOM for bots to auto-fill.
   (display:none is avoided — some bots skip hidden fields.) */
.field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.field label { font-weight: 600; color: var(--navy); font-size: 0.95rem; }
.field input,
.field textarea {
  font: inherit;
  color: var(--navy);
  padding: 0.8rem 1rem;
  border: 1px solid var(--mist);
  border-radius: 10px;
  background: var(--white);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(0, 121, 193, 0.18);
}
.field textarea { resize: vertical; }

/* Error state + message (toggled by JS) */
.field.invalid input,
.field.invalid textarea { border-color: #d33; }
.field__error { color: #d33; font-size: 0.85rem; min-height: 1em; }

.form-success {
  background: rgba(0, 206, 177, 0.12);
  border: 1px solid var(--teal);
  color: var(--navy);
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  font-weight: 500;
}


/* ---------------------------------------------------------------------
   9. FOOTER
   --------------------------------------------------------------------- */
.site-footer { background: var(--navy); color: #cdd6e8; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.footer__brand img { width: 180px; margin-bottom: 1rem; }
.footer__brand p { max-width: 34rem; font-size: 0.95rem; }
.footer__contact { font-style: normal; margin-top: 1rem; font-size: 0.95rem; }
.footer__contact p { margin: 0; }
.footer__contact a { color: #cdd6e8; }
.footer__contact a:hover { color: #fff; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer__nav a { color: #cdd6e8; font-weight: 500; }
.footer__nav a:hover { color: #fff; }
.footer__bar { border-top: 1px solid rgba(255,255,255,0.12); }
.footer__bar p { padding-block: 1.25rem; font-size: var(--fs-small); margin: 0; }


/* ---------------------------------------------------------------------
   10. SCROLL-REVEAL ANIMATION
   Elements with .reveal start faded/slightly down; JS adds .in-view
   (via IntersectionObserver) to fade them up when scrolled into view.
   --------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view { opacity: 1; transform: none; }


/* ---------------------------------------------------------------------
   11. RESPONSIVE
   --------------------------------------------------------------------- */

/* Below 1024px: services drop to 2 columns; tighten hero */
@media (max-width: 1024px) {
  .hero__media { height: min(70vh, 560px); }
  .cards { grid-template-columns: repeat(2, 1fr); }
}

/* Below 900px: switch to the hamburger menu.
   (900px, not 768px: between ~769-830px the six desktop nav links plus
   the logo only just fit — one longer label or font variance would make
   them wrap or collide, so we swap to the mobile menu a bit earlier.) */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--white);
    box-shadow: var(--shadow);
    max-height: 0;
    overflow: hidden;
    /* visibility (delayed until the close animation ends) takes the
       collapsed menu's links out of the keyboard tab order */
    visibility: hidden;
    transition: max-height 0.3s ease, visibility 0s 0.3s;
  }
  /* overflow-y lets short/landscape screens scroll to the Contact link */
  .nav.open {
    max-height: 80vh;
    overflow-y: auto;
    visibility: visible;
    transition: max-height 0.3s ease;
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--pad-x) 1.25rem; }
  .nav__list li { border-bottom: 1px solid var(--mist); }
  .nav__list a { display: block; padding: 0.9rem 0; }
  .nav__cta { text-align: center; margin-top: 0.75rem; }
}

/* Below 768px (mobile): single columns */
@media (max-width: 768px) {

  /* Hero stacks */
  .hero { grid-template-columns: 1fr; min-height: auto; gap: 1.5rem; padding-top: calc(var(--header-h) + 1rem); }
  .hero__media { height: 48vh; border-radius: var(--radius); clip-path: ellipse(140% 100% at 50% 0%); }
  .hero__swoosh-edge { display: none; }
  /* Ease the right-pinned crop: the tall mobile box shows a narrow slice,
     85% keeps the ship in frame with a little breathing room */
  .hero__media img { object-position: 85% 50%; }
  .hero__content { max-width: none; }

  /* All split layouts stack to one column; image always on top.
     We force the image first regardless of the desktop order. */
  .split { grid-template-columns: 1fr; gap: 1.75rem; }
  .split__media { order: -1 !important; }
  .split__content { order: 0 !important; max-width: none; }

  /* Soften the swoosh on small screens (curve the bottom instead of the side) */
  .swoosh-right picture img, .swoosh-left picture img { clip-path: ellipse(150% 100% at 50% 0%); }

  /* Services + benefits become single column */
  .cards { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr; }

  /* Contact + footer stack */
  .contact__grid { grid-template-columns: 1fr; }
  .contact__intro { max-width: none; }   /* align with the form below it */
  /* Hide the decorative yard photo on phones: it pushed the form (the
     actual call to action) a whole screen further down */
  .contact__photo { display: none; }
  .footer-inner { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------
   12. MOTION PREFERENCES
   Respect "reduce motion" system settings.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }   /* show content immediately */
}