/* 
  WHITELINE LOGISTICS - Advanced Modern Design System
  Brand Colors matched from WL Logo: Sky Blue (#3AAFE4) + Green (#2DA84E)
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* === BRAND COLORS (from WL logo) === */
  --wl-blue: #3AAFE4;
  --wl-blue-dark: #2591C4;
  --wl-blue-light: #E8F5FC;
  --wl-green: #2DA84E;
  --wl-green-dark: #22853C;
  --wl-green-light: #E8F7EC;

  /* Sampled from assets/images/logo.png - the exact ink used in the mark. */
  --wl-logo-blue: #00AAFB;
  --wl-logo-green: #02A83D;

  /* Wordmark on a white header.
     The logo's own blue reads at only 2.6:1 on white, under the 3:1 WCAG
     asks for large text, so the wordmark uses the same hue a few steps
     deeper: 3.4:1 for the blue and 4.1:1 for the green. Set beside the logo
     they read as the same two colours. */
  --wl-ink-blue: #0091DE;
  --wl-ink-green: #00913A;

  /* === OCEAN TEAL SURFACES ===
     Replaces the neutral navy that used to sit behind the contact bar, hero,
     table headers and footer. Teal sits between the logo's blue and green, so
     it belongs to the brand without competing with either.

     Every value below carries white text at 8:1 or better - the logo's own
     blue manages only 2.6:1, which is why the surfaces are deepened rather
     than simply brightened. */
  --teal-deep: #062E38;
  --teal-dark: #08505C;
  --teal: #0A5E6B;
  --teal-hover: #0C6E7D;

  /* Neutrals.
     dark-navy and slate-dark keep their names because they are referenced
     throughout, but the values now carry a slight teal cast so the greys read
     as chosen rather than inherited. Body copy stays at 16.8:1 on white. */
  --dark-navy: #0E1F2B;
  --slate-dark: #1E3038;
  --slate-muted: #64748B;
  --bg-light: #F8FAFC;
  --card-bg: #FFFFFF;
  --border-color: #E2E8F0;

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 60px;

  /* Shadows */
  --shadow-sm: 0 4px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 12px 24px -6px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 48px -12px rgba(58, 175, 228, 0.18);
  --shadow-glow: 0 0 30px rgba(58, 175, 228, 0.25);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #2DA84E 0%, #3AAFE4 100%);
  --gradient-blue: linear-gradient(135deg, #3AAFE4 0%, #2591C4 100%);
  --gradient-green: linear-gradient(135deg, #2DA84E 0%, #22853C 100%);
  --gradient-dark: linear-gradient(135deg, #062E38 0%, #0A5E6B 100%);
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-light);
  color: var(--dark-navy);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* ========== TOP BAR ========== */
.top-bar {
  background: var(--teal);
  color: #CFE6EA;
  font-size: 0.85rem;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.top-bar a {
  color: #E2E8F0;
  text-decoration: none;
  transition: all 0.2s ease;
}

.top-bar a:hover {
  /* --wl-blue was picked against the old near-black bar and manages only
     2.98:1 on teal. This is the same hue lifted until it clears 4.5:1. */
  color: #7DD6FA;
}

/* ========== LOGO & HEADER ========== */
.navbar-brand-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.logo-img {
  height: 52px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.navbar-brand-logo:hover .logo-img {
  transform: scale(1.05);
}

.logo-text-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.45rem;
  line-height: 1.05;
  /* Logo colours only - no navy. Every part of the wordmark is spanned, so
     this is just a safety net if the markup ever changes. */
  color: var(--wl-ink-blue);
  letter-spacing: -0.03em;
}

.logo-text-title .blue { color: var(--wl-ink-blue); }
.logo-text-title .green { color: var(--wl-ink-green); }

/* The footer sits on dark navy, where the deepened inks go muddy. There the
   logo's own brighter values are the legible choice - same hue, opposite
   end of the lightness range. */
.logo-text-title.text-white .blue { color: var(--wl-logo-blue); }
.logo-text-title.text-white .green { color: #3ED37A; }

.logo-text-subtitle {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--wl-green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Sticky Navbar */
.sticky-navbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
}

.nav-link {
  font-weight: 700;
  color: var(--slate-dark);
  padding: 8px 18px !important;
  border-radius: var(--radius-pill);
  transition: all 0.25s ease;
}

.nav-link:hover, .nav-link.active {
  color: var(--wl-blue) !important;
  background: var(--wl-blue-light);
}

/* ========== HERO SECTION ========== */
.hero-section {
  position: relative;
  /* Painted before any image loads, so the white headline is never briefly
     white-on-white on a slow connection. */
  background-color: var(--teal-deep);
  padding: 110px 0 160px 0;
  color: white;
  border-radius: 0 0 50px 50px;
  overflow: hidden;
}

/* ---------- Rotating hero banners ----------
   Three self-hosted images crossfading: surface freight, warehouse, air
   cargo. Done in CSS rather than a carousel library - there are no controls,
   no state and nothing to click, so JavaScript would add a dependency and a
   failure mode for an effect that animation handles on its own. */

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1);
  will-change: opacity, transform;
  animation: heroBannerFade 35s linear infinite;
}

.hero-slide-1 { background-image: url('../images/hero/hero-1-truck.jpg');     animation-delay: 0s;  }
.hero-slide-2 { background-image: url('../images/hero/hero-2-logistics.jpg'); animation-delay: 7s;  }
.hero-slide-3 { background-image: url('../images/hero/hero-3-flight.jpg');    animation-delay: 14s; }
.hero-slide-4 { background-image: url('../images/hero/hero-4-yard.jpg');      animation-delay: 21s; }
.hero-slide-5 { background-image: url('../images/hero/hero-5-warehouse.jpg'); animation-delay: 28s; }

/* Five banners on a 35s cycle, one starting every 7s: about five and a half
   seconds held, then a fade of roughly a second and a half. Only two are ever
   overlapping, so the crossfade never muddies into a third image. Includes subtle
   pan/zoom for dynamic cinematic feel. */
@keyframes heroBannerFade {
  0%   { opacity: 0; transform: scale(1); }
  3%   { opacity: 1; }
  18%  { opacity: 1; transform: scale(1.04); }
  23%  { opacity: 0; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1); }
}

/* ---- Slide indicators ----
   Without these a visitor who looks away misses the change entirely and never
   learns the banner is showing five sides of the business. */
.hero-indicators {
  position: absolute;
  bottom: 42px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 9px;
  pointer-events: none;
}

.hero-indicators span {
  width: 26px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
  position: relative;
}

/* The fill runs on the same 35s clock as the banners, so a dot is lit exactly
   while its own image is on screen. */
.hero-indicators span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #5FE39B;
  transform: scaleX(0);
  transform-origin: left center;
  animation: heroIndicator 35s linear infinite;
}

.hero-indicators span:nth-child(1)::after { animation-delay: 0s;  }
.hero-indicators span:nth-child(2)::after { animation-delay: 7s;  }
.hero-indicators span:nth-child(3)::after { animation-delay: 14s; }
.hero-indicators span:nth-child(4)::after { animation-delay: 21s; }
.hero-indicators span:nth-child(5)::after { animation-delay: 28s; }

@keyframes heroIndicator {
  0%   { transform: scaleX(0); }
  20%  { transform: scaleX(1); }
  23%  { transform: scaleX(1); opacity: 1; }
  26%  { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(1); opacity: 0; }
}

@media (max-width: 991.98px) {
  .hero-indicators { bottom: 26px; }
  .hero-indicators span { width: 18px; }
}

/* The wash over the banners.
   It was a flat 93%, which made the headline perfectly readable and the
   photograph almost invisible - a lorry you could only just make out behind
   a slab of teal. It is now two layers doing two different jobs.

   Layer one, here, is a light overall tone that ties any photograph to the
   brand without hiding it. */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(6, 46, 56, 0.42) 0%, rgba(10, 94, 107, 0.34) 100%);
  pointer-events: none;
}

/* Layer two is a scrim that is heavy on the left, where the headline sits,
   and clears completely on the right, where the photograph is left to show.
   Compositing the two gives roughly 86% behind the text and 40% over the
   image - readable copy and a visible lorry, instead of one or the other. */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(4, 34, 42, 0.82) 0%,
    rgba(4, 34, 42, 0.66) 34%,
    rgba(4, 34, 42, 0.22) 62%,
    rgba(4, 34, 42, 0) 85%
  );
  pointer-events: none;
  /* The decorative glow this pseudo-element used to carry is gone; the photo
     is doing that work now. */
  width: auto;
  height: auto;
  bottom: 0;
  right: 0;
}

/* Below the large breakpoint the copy centres and spans the full width, so a
   left-weighted scrim would leave half the text on bare photograph. */
@media (max-width: 991.98px) {
  .hero-section::after {
    background: linear-gradient(
      180deg,
      rgba(4, 34, 42, 0.5) 0%,
      rgba(4, 34, 42, 0.78) 45%,
      rgba(4, 34, 42, 0.86) 100%
    );
  }
}

/* Insurance for the moment a bright sky sits directly behind a letterform.
   Cheap, and invisible when it is not needed. */
.hero-title,
.hero-section .lead {
  text-shadow: 0 2px 14px rgba(3, 26, 32, 0.55);
}

.hero-section > .container {
  position: relative;
  z-index: 2;
}

/* A moving background is a common migraine and vestibular trigger, so hold
   on the first banner when the visitor has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    animation: none;
  }
  .hero-slide-1 {
    opacity: 1;
  }
  /* The indicators describe a rotation that is no longer happening, so the
     first one is simply shown as filled and the rest stay dim. */
  .hero-indicators span::after { animation: none; }
  .hero-indicators span:nth-child(1)::after { transform: scaleX(1); }
}

/* The decorative blue glow that used to sit here has been removed. It was a
   second ::after on the same element, declared later in the file, so it beat
   the readability scrim above on the cascade and left the headline sitting on
   bare photograph. The banners provide the visual interest it was standing in
   for. */

.hero-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(45, 168, 78, 0.15);
  border: 1px solid rgba(45, 168, 78, 0.4);
  color: #6EE7A0;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #6EE7A0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(110, 231, 160, 0.7);
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(110, 231, 160, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(110, 231, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(110, 231, 160, 0); }
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1.12;
  margin-bottom: 24px;
}

.hero-title span {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ========== HERO MULTI-TAB WIDGET ========== */
.hero-widget-box {
  background: white;
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  color: var(--dark-navy);
  margin-top: -80px;
  position: relative;
  z-index: 20;
  border: 1px solid rgba(58, 175, 228, 0.15);
}

.widget-nav-tabs {
  border: none;
  gap: 8px;
  margin-bottom: 24px;
}

.widget-nav-tabs .nav-link {
  border: 1px solid var(--border-color);
  background: var(--bg-light);
  color: var(--slate-dark);
  font-weight: 700;
  border-radius: var(--radius-pill) !important;
  padding: 10px 22px !important;
}

.widget-nav-tabs .nav-link.active {
  background: var(--gradient-blue) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(58, 175, 228, 0.3);
}

.tracking-input-group {
  background: #F1F5F9;
  border-radius: var(--radius-pill);
  padding: 6px;
  display: flex;
  align-items: center;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.tracking-input-group:focus-within {
  border-color: var(--wl-blue);
  background: white;
  box-shadow: 0 0 0 4px rgba(58, 175, 228, 0.15);
}

.tracking-input-group input {
  border: none;
  background: transparent;
  padding: 14px 22px;
  font-size: 1.15rem;
  font-weight: 700;
  outline: none;
  width: 100%;
}

.btn-track-submit {
  background: var(--gradient-blue);
  color: white;
  font-weight: 800;
  border: none;
  padding: 16px 36px;
  border-radius: var(--radius-pill);
  font-size: 1.05rem;
  box-shadow: 0 6px 20px rgba(58, 175, 228, 0.4);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn-track-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(58, 175, 228, 0.5);
  color: white;
}

/* ========== FEATURE CARDS ========== */
.feature-glass-card {
  background: white;
  border-radius: var(--radius-md);
  padding: 32px 26px;
  border: 1px solid var(--border-color);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  height: 100%;
}

.feature-glass-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-md);
  border-color: var(--wl-blue);
}

.feature-icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--wl-blue-light);
  color: var(--wl-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 22px;
  transition: all 0.3s ease;
}

.feature-glass-card:hover .feature-icon-wrapper {
  background: var(--gradient-blue);
  color: white;
  transform: scale(1.1) rotate(5deg);
}

/* Alternate green icon cards */
.feature-icon-green {
  background: var(--wl-green-light);
  color: var(--wl-green);
}
.feature-glass-card:hover .feature-icon-green {
  background: var(--gradient-green);
  color: white;
}

/* ========== PROCESS STEPS ========== */
.process-step-number {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--gradient-blue);
  color: white;
  font-weight: 800;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  box-shadow: 0 6px 18px rgba(58, 175, 228, 0.3);
}

.process-step-number.green-step {
  background: var(--gradient-green);
  box-shadow: 0 6px 18px rgba(45, 168, 78, 0.3);
}

/* ========== INDUSTRY CARDS ========== */
.industry-card {
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.industry-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--wl-blue);
}

.industry-card-img {
  height: 180px;
  object-fit: cover;
  width: 100%;
}

/* ========== TESTIMONIALS ========== */
.testimonial-card {
  background: white;
  border-radius: var(--radius-md);
  padding: 30px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  height: 100%;
}

.client-logo-pill {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  font-weight: 800;
  color: var(--slate-dark);
  box-shadow: var(--shadow-sm);
}

/* ========== FAQ ACCORDION ========== */
.accordion-item {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 12px;
  overflow: hidden;
}

.accordion-button {
  font-weight: 700;
  font-size: 1.05rem;
  padding: 18px 24px;
  color: var(--dark-navy);
}

.accordion-button:not(.collapsed) {
  background: var(--wl-blue-light);
  color: var(--wl-blue);
  box-shadow: none;
}

/* ========== ADMIN TABLE ========== */
.admin-table-wrapper {
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  font-size: 0.88rem;
  border-collapse: collapse;
}

.admin-table th {
  background: var(--teal-dark);
  color: white;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 14px 10px;
  white-space: nowrap;
}

.admin-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #F1F5F9;
  white-space: nowrap;
}

.admin-table tr:hover {
  background: #F8FAFC;
}

/* ========== ADMIN SUMMARY KPI CHIPS & DATE FILTERS ========== */
.date-filter-group {
  gap: 3px;
}

.date-pill-btn {
  border: none;
  background: transparent;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--slate-muted);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.date-pill-btn:hover {
  color: var(--dark-navy);
  background: rgba(0, 0, 0, 0.05);
}

.date-pill-btn.active {
  background: #02843B;
  color: white !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
}

/* Compact KPI Chips */
.kpi-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kpi-chip {
  flex: 1 1 auto;
  min-width: 150px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.kpi-chip:hover {
  background: white;
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.kpi-chip.active {
  background: white;
  border-color: var(--wl-blue);
  box-shadow: 0 0 0 2px rgba(58, 175, 228, 0.25), 0 4px 10px rgba(58, 175, 228, 0.1);
}

.kpi-chip.kpi-transit.active {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25), 0 4px 10px rgba(245, 158, 11, 0.1);
}

.kpi-chip.kpi-out.active {
  border-color: var(--wl-blue);
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.25), 0 4px 10px rgba(6, 182, 212, 0.1);
}

.kpi-chip.kpi-delivered.active {
  border-color: var(--wl-green);
  box-shadow: 0 0 0 2px rgba(120, 185, 40, 0.25), 0 4px 10px rgba(120, 185, 40, 0.1);
}

.kpi-chip.kpi-booked.active {
  border-color: #64748b;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.25), 0 4px 10px rgba(100, 116, 139, 0.1);
}

.kpi-chip-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.kpi-chip-info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.kpi-chip-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.04em;
}

.kpi-chip-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark-navy);
}

.kpi-chip-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 12px;
  margin-left: auto;
}

/* Pagination buttons */
.admin-page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: white;
  color: var(--slate-muted);
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

.admin-page-btn:hover:not(:disabled) {
  border-color: var(--wl-blue);
  color: var(--wl-blue);
  background: var(--wl-blue-light);
}

.admin-page-btn.active {
  background: var(--wl-blue);
  border-color: var(--wl-blue);
  color: white;
  box-shadow: 0 2px 6px rgba(58, 175, 228, 0.3);
}

.admin-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Table sorting cursor */
.admin-table th.cursor-pointer {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.admin-table th.cursor-pointer:hover {
  background: var(--teal-hover) !important;
  color: #3AAFE4 !important;
}

/* ========== BADGES & BUTTONS (WL Theme) ========== */
.bg-gradient-primary { background: var(--gradient-blue) !important; }
.bg-gradient-brand { background: var(--gradient-brand) !important; }
.text-wl-blue { color: var(--wl-blue) !important; }
.text-wl-green { color: var(--wl-green) !important; }

/* Bootstrap Success/Info override to match WL brand */
.btn-success {
  background-color: var(--wl-green) !important;
  border-color: var(--wl-green) !important;
}
.btn-success:hover {
  background-color: var(--wl-green-dark) !important;
  border-color: var(--wl-green-dark) !important;
}
.btn-outline-success {
  color: var(--wl-green) !important;
  border-color: var(--wl-green) !important;
}
.btn-outline-success:hover {
  background-color: var(--wl-green) !important;
  color: white !important;
}
.btn-info {
  background-color: var(--wl-blue) !important;
  border-color: var(--wl-blue) !important;
}
.text-success { color: var(--wl-green) !important; }
.text-info { color: var(--wl-blue) !important; }
.bg-success-subtle { background-color: var(--wl-green-light) !important; }
.bg-info-subtle { background-color: var(--wl-blue-light) !important; }

/* ========== MOBILE BOTTOM NAV ========== */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: white;
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  justify-content: space-around;
  align-items: center;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--slate-muted);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
}

.bottom-nav-item i {
  font-size: 1.25rem;
  margin-bottom: 2px;
}

.bottom-nav-item.active {
  color: var(--wl-blue);
}

/* Footer brand accents */
footer .border-success { border-color: var(--wl-green) !important; }

/* Hide footer completely on Admin Dashboard */
#section-admin.active-section ~ footer,
#section-admin:not([style*="display: none"]) ~ footer,
body.admin-active footer,
body.admin-active #siteFooter {
  display: none !important;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.3rem;
  }
  .hero-section {
    padding: 60px 0 110px 0;
  }
  .hero-widget-box {
    margin-top: -60px;
    padding: 20px;
  }
  .mobile-bottom-nav {
    display: flex;
  }
  body {
    padding-bottom: 70px;
  }
  .logo-img {
    height: 42px;
  }
}

/* ==================== Admin section tabs (Phase 3) ==================== */

.admin-tabs {
  flex-wrap: wrap;
}

.admin-tabs .nav-link {
  color: #64748B;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 50rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.admin-tabs .nav-link:hover:not(.active) {
  background-color: #F1F5F9;
  color: var(--dark-navy);
}

.admin-tabs .nav-link.active {
  background-color: #00A859;
  color: #FFFFFF;
}

.admin-tabs .nav-link:focus-visible {
  outline: 2px solid #00A859;
  outline-offset: 2px;
}

/* Keep the "new enquiries" count legible on the active green pill. */
.admin-tabs .nav-link.active .badge {
  background-color: #FFFFFF !important;
  color: #B3261E !important;
}

.admin-tab-pane .admin-table td {
  vertical-align: middle;
}

.extra-small {
  font-size: 0.72rem;
}

/* ============ Toast & notice feedback (Phase 5) ============ */

#whitelineToastContainer .toast {
  border-radius: 12px;
  min-width: 260px;
}

#whitelineToastContainer .toast-body {
  font-size: 0.9rem;
  font-weight: 500;
}

/* Import summaries and validation echoes: monospace so row numbers and AWBs
   line up, and scrollable so a long skip list cannot stretch the modal. */
.ui-notice-lines {
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  max-height: 15rem;
  overflow-y: auto;
  overflow-x: auto;
  white-space: nowrap;
}

/* The notice header takes a Bootstrap text-bg-* class, so make the close
   button legible on the dark variants too. */
#uiNoticeHeader.text-bg-dark .btn-close,
#uiNoticeHeader.text-bg-danger .btn-close,
#uiNoticeHeader.text-bg-success .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============ Ocean teal surfaces ============ */

/* The footer carries Bootstrap's .bg-dark, which is a neutral near-black.
   Override it so the foot of the page belongs to the same family as the
   contact bar at the top. */
footer#siteFooter.bg-dark {
  background: var(--gradient-dark) !important;
}

/* Login modal header and anything else asking for the dark gradient. */
.bg-gradient-dark {
  background: var(--gradient-dark) !important;
}

/* Muted footer copy: Bootstrap's .text-secondary is tuned for a near-black
   ground and drops to about 3:1 on teal. */
footer#siteFooter .text-secondary {
  color: #B8D8DE !important;
}

/* ============ Image-led home sections ============ */

/* ---- Service cards: photo with the icon kept as a badge ----
   These were icon-only cards on the most-scanned block of the page. The icon
   still does its job at a glance; the photograph is what makes the section
   look like a company that moves freight rather than a component library. */

.service-photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-photo-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.service-photo-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--teal-deep);
}

.service-photo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.service-photo-card:hover .service-photo-media img {
  transform: scale(1.06);
}

/* Keeps the lower edge of the photo dark so the icon badge reads on any
   image, rather than depending on what happens to be in that corner. */
.service-photo-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 46, 56, 0.72) 0%, rgba(6, 46, 56, 0) 55%);
  pointer-events: none;
}

.service-photo-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  /* The standard brand gradient puts a white glyph at 2.5:1 on its blue end,
     under the 3:1 WCAG asks for meaningful graphics. Same two hues, deepened:
     4.1:1 and 3.4:1. */
  background: linear-gradient(135deg, var(--wl-ink-green) 0%, var(--wl-ink-blue) 100%);
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 6px 16px rgba(6, 46, 56, 0.35);
}

.service-photo-body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.service-photo-body h4 {
  font-size: 1.08rem;
  margin: 0;
}

.service-photo-body p {
  margin: 0;
  flex: 1;
}

.service-photo-link {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--wl-ink-green);
  text-decoration: none;
}

.service-photo-link:hover { color: var(--wl-green-dark); }

.service-photo-card:focus-within {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ---- Full-bleed photo bands ----
   Used behind the statistics row and the booking call to action, both of
   which were flat colour. Same treatment as the hero: photograph, dark wash
   over it, content above. */

.photo-band {
  position: relative;
  isolation: isolate;
  background-color: var(--teal-deep);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}

.photo-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, rgba(6, 46, 56, 0.92) 0%, rgba(10, 94, 107, 0.86) 100%);
  pointer-events: none;
}

.photo-band > * { position: relative; z-index: 1; }

.band-stats { background-image: url('../images/bands/band-stats.jpg'); }
.band-cta   { background-image: url('../images/bands/band-cta.jpg'); }

/* Stat cells sit directly on the band now - the white cards they used to
   live in would hide the photograph they are standing on. */
.band-stat {
  padding: 22px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  height: 100%;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.band-stat h2 {
  font-size: 2.1rem;
  font-weight: 900;
  margin: 0 0 2px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* On the teal wash the site's usual green and blue drop below 4.5:1, so the
   figures use lifted versions of the same two hues. */
.band-stat .fig-green { color: #5FE39B; }
.band-stat .fig-blue  { color: #7DD6FA; }

.band-stat p {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #CFE6EA;
}

@media (max-width: 768px) {
  .band-stat { padding: 16px 10px; }
  .band-stat h2 { font-size: 1.6rem; }
}

/* ============ Why Whiteline, gallery, network, avatars ============ */

/* ---- Why Whiteline: photo beside text ---- */
.about-split-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3 / 2;
}

.about-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Founder credit sits on the photo rather than under it, so the block stays
   two columns instead of becoming three stacked things. */
.about-split-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 22px 18px;
  background: linear-gradient(to top, rgba(6, 46, 56, 0.9) 0%, rgba(6, 46, 56, 0) 100%);
  color: #fff;
}

.about-split-caption strong { display: block; font-size: 0.95rem; }
.about-split-caption span { font-size: 0.78rem; color: #CFE6EA; }

/* ---- Operations gallery ---- */
.ops-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px;
  gap: 10px;
}

.ops-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--teal-deep);
}

.ops-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.ops-tile:hover img { transform: scale(1.07); }

/* A deliberately uneven grid - six equal squares reads as a stock-photo
   contact sheet, which is what this section is trying not to look like. */
.ops-tile:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.ops-tile:nth-child(2) { grid-column: span 3; }
.ops-tile:nth-child(3) { grid-column: span 2; }
.ops-tile:nth-child(4) { grid-column: span 1; }
.ops-tile:nth-child(5) { grid-column: span 3; }
.ops-tile:nth-child(6) { grid-column: span 3; }

@media (max-width: 768px) {
  .ops-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
  .ops-tile:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .ops-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

/* ---- Service network panel ---- */
.network-panel {
  background: var(--gradient-dark);
  border-radius: var(--radius-lg);
  padding: 30px;
  color: #fff;
  overflow: hidden;
}

.network-figure { width: 100%; height: auto; display: block; }

.network-figure .route { stroke: rgba(125, 214, 250, 0.45); stroke-width: 0.5; fill: none; }
.network-figure .node { fill: #7DD6FA; }
.network-figure .node-hq { fill: #5FE39B; }
.network-figure .node-label { fill: #CFE6EA; font-size: 3.1px; font-weight: 600; }
.network-figure .node-label-hq { fill: #5FE39B; font-size: 3.4px; font-weight: 800; }

/* The pulse marks the hub the network radiates from; it is decoration, so it
   goes when the visitor has asked for less motion. */
.network-figure .pulse {
  fill: none;
  stroke: #5FE39B;
  stroke-width: 0.4;
  transform-origin: center;
  animation: netPulse 3s ease-out infinite;
}

@keyframes netPulse {
  0%   { r: 1.6; opacity: 0.9; }
  100% { r: 5.5; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .network-figure .pulse { animation: none; opacity: 0; }
}

.network-hub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.network-hub-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #CFE6EA;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.network-hub-list li:last-child { border-bottom: none; padding-bottom: 0; }
.network-hub-list .dot { width: 8px; height: 8px; border-radius: 50%; background: #7DD6FA; flex: none; }
.network-hub-list .dot.hq { background: #5FE39B; }
.network-hub-list strong { color: #fff; font-weight: 700; }

/* ---- Testimonial avatars ----
   Initials rather than a stock portrait. Attaching a photograph of a stranger
   to a named quote invents a person who did not say it. */
.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(135deg, var(--wl-ink-green) 0%, var(--wl-ink-blue) 100%);
  flex: none;
  letter-spacing: 0.02em;
}

.client-logo-placeholder {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--slate-muted);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  background: var(--card-bg);
}