/* =============================================
   DriveDataQ.us — Architectural Master Stylesheet
   Editorial Commercial Logistics System
   Inspired by Behance Master Logistics Reference
   ============================================= */


/* === Master Design Tokens === */
:root {
  /* Canvas & Surfaces */
  --bg-main:         #FFFFFF;       /* Pure editorial white canvas */
  --bg-surface:      #F8F9FA;       /* Technical gray for panels & alternating sections */
  --bg-subtle:       #F1F5F9;       /* Muted technical gray for chips, badges, tables */
  --bg-card:         #FFFFFF;       /* Pure white card containers */
  --bg-card-hover:   #FAFCFF;       /* High-clarity hover surface */

  /* Hairline Dividers & Rules */
  --border-rule:     #E2E8F0;       /* 1px subtle hairline technical rule */
  --border-card:     #E5E7EB;       /* Crisp container border */
  --border-focus:    #CBD5E1;       /* Focused container border */

  /* Typography */
  --text-headline:   #0A0D12;       /* Deep obsidian charcoal for display titles */
  --text-body:       #334155;       /* Slate neutral for readability copy */
  --text-muted:      #64748B;       /* Architectural slate for labels & metadata */
  --text-light:      #94A3B8;       /* Subtle technical annotation text */
  --text-inverse:    #FFFFFF;       /* Pure white text on dark accents/buttons */

  /* Action Accent (High-Visibility Highway Orange) */
  --accent-orange:   #FF5500;       /* Primary CTA & interactive directional accent */
  --accent-hover:    #E04B00;       /* Action hover state */
  --accent-subtle:   rgba(255, 85, 0, 0.08); /* Active pill fills & subtle badges */
  --accent-border:   rgba(255, 85, 0, 0.25); /* Active pill borders */

  /* Compatibility Aliases for Legacy Template Integration */
  --navy:            #FFFFFF;
  --navy-mid:        #F8F9FA;
  --navy-light:      #F1F5F9;
  --card-bg:         #FFFFFF;
  --card-border:     #E2E8F0;
  --blue:            #FF5500;
  --blue-light:      #FF5500;
  --blue-glow:       rgba(255, 85, 0, 0.15);
  --cyan:            #FF5500;
  --green:           #10B981;
  --orange:          #FF5500;
  --white:           #0A0D12;       /* Legacy headings mapped to obsidian */
  --gray-100:        #F8F9FA;
  --gray-300:        #CBD5E1;
  --gray-400:        #94A3B8;
  --text-main:       #334155;

  /* Sizing & Geometry */
  --radius-xs:       4px;
  --radius-sm:       6px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --radius-xl:       16px;
  --radius-pill:     9999px;

  /* Shadows (Subtle, clean, never muddy or glowing) */
  --shadow-subtle:   0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-card:     0 4px 20px -2px rgba(10, 13, 18, 0.04), 0 2px 6px -1px rgba(10, 13, 18, 0.02);
  --shadow-hover:    0 12px 32px -4px rgba(10, 13, 18, 0.08), 0 4px 12px -2px rgba(10, 13, 18, 0.03);
  --shadow-orange:   0 4px 20px rgba(255, 85, 0, 0.25);

  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Global Reset & Canvas === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-main);
  color: var(--text-body);
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-main);
  color: var(--text-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  outline: none;
}

input, textarea, select {
  font-family: inherit;
  outline: none;
}

/* === Editorial Typography === */
h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', 'DM Sans', sans-serif;
  font-weight: 700;
  color: var(--text-headline);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

h2 {
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

h4 {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-body);
}

.text-muted {
  color: var(--text-muted) !important;
}

.text-headline {
  color: var(--text-headline) !important;
}

.text-orange {
  color: var(--accent-orange) !important;
}

/* Editorial Category & Sequence Tags */
.editorial-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.editorial-tag .tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-orange);
}

.tag-orange {
  color: var(--accent-orange);
  background: var(--accent-subtle);
  padding: 4px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--accent-border);
}

.gradient-text {
  color: var(--text-headline);
}

/* === Layout & Containers === */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}

.section {
  padding: 100px 0;
  position: relative;
}

.section-sm {
  padding: 64px 0;
  position: relative;
}

.section-surface {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-rule);
  border-bottom: 1px solid var(--border-rule);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.text-center { text-align: center; }

/* Subtle Hairline Grid System */
.hairline-grid {
  border: 1px solid var(--border-rule);
  background-color: var(--bg-card);
}

.hairline-col {
  border-right: 1px solid var(--border-rule);
}

.hairline-col:last-child {
  border-right: none;
}

.hairline-row {
  border-bottom: 1px solid var(--border-rule);
}

.hairline-row:last-child {
  border-bottom: none;
}

/* === Architectural Sticky Navbar === */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 74px;
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  transition: var(--transition);
}

#navbar.scrolled {
  background-color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-headline);
}


.nav-logo img {
  height: 34px;
  width: auto;
  border-radius: var(--radius-xs);
}

.nav-logo span {
  color: var(--accent-orange);
  font-weight: 800;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links a {
  padding: 8px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-body);
  border-radius: var(--radius-xs);
  transition: var(--transition-fast);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-headline);
  background-color: var(--bg-surface);
}

.nav-links .dropdown {
  position: relative;
}

.nav-links .dropdown > a::after {
  content: " ▾";
  font-size: 0.72rem;
  color: var(--text-muted);
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-rule);
  border-radius: var(--radius-sm);
  padding: 8px;
  min-width: 240px;
  box-shadow: var(--shadow-hover);
}

.dropdown:hover .dropdown-menu {
  display: block;
  animation: fadeIn 0.15s ease-out;
}

.dropdown-menu a {
  display: block;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--text-body);
  border-radius: var(--radius-xs);
}

.dropdown-menu a:hover {
  background: var(--bg-surface);
  color: var(--accent-orange);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  padding: 8px;
}

.nav-hamburger span {
  width: 22px;
  height: 2px;
  background-color: var(--text-headline);
  transition: var(--transition);
}

/* === Clean Action Buttons (Original Flat System — Round) === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 9999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--accent-orange);
  color: var(--text-inverse);
  box-shadow: var(--shadow-orange);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(255, 85, 0, 0.35);
  color: #FFFFFF;
}

.btn-secondary {
  background-color: var(--bg-card);
  color: var(--text-headline);
  border: 1px solid var(--border-rule);
  box-shadow: var(--shadow-subtle);
}

.btn-secondary:hover {
  background-color: var(--bg-surface);
  border-color: var(--border-focus);
  color: var(--text-headline);
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  color: var(--accent-orange);
  border: 1px solid var(--accent-orange);
}

.btn-outline:hover {
  background-color: var(--accent-subtle);
  color: var(--accent-hover);
}

.btn-outline-white {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
}

.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #FFFFFF;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: 9999px;
}

.btn-lg {
  padding: 16px 36px;
  font-size: 1.02rem;
  border-radius: 9999px;
}

.btn-arrow::after {
  content: '→';
  transition: transform 0.2s ease;
  font-size: 1.1em;
  line-height: 1;
}

.btn-arrow:hover::after {
  transform: translateX(4px);
}

/* === Clean Editorial Cards === */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-rule);
  border-radius: var(--radius-sm);
  padding: 36px;
  transition: var(--transition);
  position: relative;
}

.card:hover {
  border-color: #CBD5E1;
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.card-num {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-orange);
  margin-bottom: 20px;
  display: block;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xs);
  background: var(--bg-surface);
  border: 1px solid var(--border-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 20px;
  color: var(--accent-orange);
}

/* Service Card (Behance Editorial Grid) */
.service-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-rule);
  padding: 40px 32px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.service-card:hover {
  border-color: var(--accent-orange);
  box-shadow: var(--shadow-hover);
}

.service-card .service-index {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

.service-card h3 {
  font-size: 1.45rem;
  margin-bottom: 14px;
  color: var(--text-headline);
}

.service-card p {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: 28px;
}

.service-card .service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent-orange);
}

.service-card .service-link:hover {
  color: var(--accent-hover);
}

/* === Photography Composition Panels === */
.photo-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-rule);
  background-color: var(--bg-surface);
}

.photo-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0, 0.2, 1);
}

.photo-panel:hover img {
  transform: scale(1.02);
}

.photo-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-rule);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-headline);
  letter-spacing: 0.04em;
}

/* === Metrics Ledger Strip === */
.metric-strip {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-rule);
  border-bottom: 1px solid var(--border-rule);
  padding: 44px 0;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.metric-item {
  border-right: 1px solid var(--border-rule);
  padding-right: 24px;
}

.metric-item:last-child {
  border-right: none;
  padding-right: 0;
}

.metric-val {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  font-weight: 800;
  color: var(--text-headline);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.metric-val span {
  color: var(--accent-orange);
}

.metric-desc {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.4;
}

/* === Corporate Settlement Ledger (Dispatch Proof) === */
.ledger-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-rule);
  border-radius: var(--radius-xs);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.ledger-header {
  padding: 24px 32px;
  border-bottom: 1px solid var(--border-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background-color: var(--bg-surface);
}

.ledger-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ledger-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}

.ledger-table th {
  background-color: var(--bg-subtle);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-rule);
  white-space: nowrap;
}

.ledger-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-rule);
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ledger-table tr:hover td {
  background-color: var(--bg-surface);
}

.ledger-table tr:last-child td {
  border-bottom: none;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  font-size: 0.78rem;
  font-weight: 600;
  background-color: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

/* Equipment Filter Bar */
.filter-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.filter-btn {
  padding: 8px 18px;
  border-radius: var(--radius-xs);
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--bg-surface);
  border: 1px solid var(--border-rule);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.filter-btn:hover {
  color: var(--text-headline);
  border-color: var(--border-focus);
}

.filter-btn.active {
  background-color: var(--text-headline);
  color: var(--text-inverse);
  border-color: var(--text-headline);
}

/* === Forms === */
.form-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-rule);
  border-radius: var(--radius-xs);
  padding: 44px 40px;
  box-shadow: var(--shadow-card);
}

.form-group {
  margin-bottom: 22px;
}

.form-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-headline);
  margin-bottom: 8px;
}

.form-label .req {
  color: var(--accent-orange);
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  background-color: var(--bg-main);
  border: 1px solid var(--border-rule);
  border-radius: var(--radius-xs);
  color: var(--text-headline);
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.form-control:focus {
  border-color: var(--accent-orange);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.12);
}

.form-control::placeholder {
  color: var(--text-light);
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-success {
  padding: 14px 20px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: var(--radius-xs);
  color: #065F46;
  font-size: 0.92rem;
  margin-bottom: 20px;
  display: none;
}

.form-error {
  padding: 14px 20px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-xs);
  color: #991B1B;
  font-size: 0.92rem;
  margin-bottom: 20px;
  display: none;
}

/* === Testimonials === */
.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border-rule);
  border-radius: var(--radius-xs);
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-card:hover {
  border-color: #CBD5E1;
  box-shadow: var(--shadow-card);
}

.testimonial-quote {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-headline);
  margin-bottom: 28px;
  font-weight: 500;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-rule);
  color: var(--text-headline);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.testimonial-info h5 {
  font-size: 0.95rem;
  color: var(--text-headline);
}

.testimonial-info p {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* === 21st.dev Modern Spectrum Footer === */
.footer-modern-wrap {
  background-color: #FFFFFF;
  background-image: radial-gradient(rgba(15, 23, 42, 0.11) 1.25px, transparent 1.25px);
  background-size: 20px 20px;
  border-top: 1px solid #E4E4E7;
  position: relative;
  padding: 84px 0 44px;
  overflow: hidden;
}
.footer-modern-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 45%, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0.2) 100%);
  pointer-events: none;
  z-index: 0;
}

.footer-modern-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.footer-modern-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr 1.3fr 1.05fr;
  gap: 56px;
  align-items: start;
}

/* Column 1: Stay Connected */
.footer-modern-title {
  font-family: 'DM Sans', 'DM Sans', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #09090B;
  margin: 0 0 14px;
}
.footer-modern-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  color: #64748B;
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 250px;
}

.footer-modern-newsletter {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E4E4E7;
  border-radius: 9999px;
  padding: 4px 5px 4px 18px;
  max-width: 265px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.footer-modern-newsletter:focus-within {
  border-color: #09090B;
  box-shadow: 0 0 0 2px rgba(9, 9, 11, 0.08);
}
.footer-newsletter-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.86rem;
  font-family: 'DM Sans', sans-serif;
  color: #09090B;
  width: 100%;
}
.footer-newsletter-input::placeholder {
  color: #A1A1AA;
}
.footer-newsletter-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: #09090B;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
  padding: 0;
}
.footer-newsletter-btn:hover {
  background: #27272A;
  transform: scale(1.05);
}

/* Headings */
.footer-col-heading {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.96rem;
  font-weight: 600;
  color: #09090B;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

/* Navigation Links */
.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.footer-nav-list a {
  font-size: 0.88rem;
  color: #64748B;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  transition: color 0.15s, transform 0.15s;
  display: inline-block;
}
.footer-nav-list a:hover {
  color: #09090B;
  transform: translateX(2px);
}

/* Contact Block */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer-contact-list p {
  font-size: 0.88rem;
  color: #64748B;
  margin: 0;
  line-height: 1.45;
  font-family: 'DM Sans', sans-serif;
}
.footer-contact-list a {
  color: #64748B;
  text-decoration: none;
  transition: color 0.15s;
}
.footer-contact-list a:hover {
  color: #09090B;
}

/* Follow Us & Social */
.footer-social-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.footer-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #E4E4E7;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #18181B;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s, background 0.15s, transform 0.15s, color 0.15s;
}
.footer-social-icon:hover {
  border-color: #09090B;
  background: #F4F4F5;
  color: #09090B;
  transform: translateY(-2px);
}

/* Theme Switcher */
.footer-theme-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.footer-theme-toggle-row .theme-icon {
  color: #71717A;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.theme-switch-track {
  width: 38px;
  height: 22px;
  border-radius: 9999px;
  background: #09090B;
  position: relative;
  padding: 2px;
  transition: background 0.25s;
}
.theme-switch-thumb {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-theme-toggle-row.theme-active-dark .theme-switch-thumb {
  transform: translateX(16px);
}
.footer-theme-toggle-row:hover .theme-icon {
  color: #09090B;
}

/* Divider */
.footer-modern-divider {
  height: 1px;
  background: #E4E4E7;
  margin: 52px 0 24px;
  width: 100%;
}

/* Bottom Row */
.footer-modern-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #71717A;
  font-family: 'DM Sans', sans-serif;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-modern-legal {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer-modern-legal a {
  color: #71717A;
  text-decoration: none;
  transition: color 0.15s;
}
.footer-modern-legal a:hover {
  color: #09090B;
}

/* Regulatory Note */
.footer-fmcsa-micro {
  font-size: 0.74rem;
  color: #94A3B8;
  line-height: 1.5;
  margin-top: 18px;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
}

/* === Mobile Nav (Clean White Architectural Drawer) === */
#mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background-color: #FFFFFF;
  flex-direction: column;
  padding: 32px;
  overflow-y: auto;
}

#mobile-nav.open {
  display: flex;
  animation: fadeIn 0.2s ease;
}

#mobile-nav-close {
  align-self: flex-end;
  font-size: 1.5rem;
  color: var(--text-headline);
  cursor: pointer;
  padding: 8px;
  margin-bottom: 24px;
}

#mobile-nav a {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-headline);
  padding: 12px 0;
  border-bottom: 1px solid var(--border-rule);
}

#mobile-nav a:hover {
  color: var(--accent-orange);
}

#mobile-nav .btn {
  margin-top: 32px;
  width: 100%;
}

/* ========================================================
   DISPATCH-FIRST BEHANCE REFERENCE EXTENSIONS (DESKTOP BASE)
   Master Composition & Restrained Editorial Hierarchy
   ======================================================== */

.nav-link-login {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-headline);
  padding: 8px 14px;
}
.nav-link-login:hover {
  color: var(--accent-orange);
}

/* Section 02 — Hero Composition (Truck left + Container right + Centered Typography) */
.hero-dispatch-container {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  background-image: url('../assets/images/hero-truck-container.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  padding: 120px 24px 80px;
  overflow: hidden;
}

.hero-dispatch-overlay {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 660px;
  height: 85%;
  max-height: 460px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0) 75%);
  pointer-events: none;
  z-index: 1;
}

.hero-dispatch-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
  margin: 0 auto;
}

.hero-dispatch-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2.8rem, 5.2vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #0A0D12;
  margin-bottom: 20px;
}

.hero-dispatch-sub {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: #334155;
  line-height: 1.6;
  max-width: 620px;
  margin: 0 auto 32px;
}

/* === Hero Night Port Terminal Video Architecture === */
.hero-video-container {
  position: relative;
  min-height: 78vh;
  max-height: 820px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0A0E1A;
  padding: 130px 24px 100px;
  overflow: hidden;
}

.hero-video-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background-color: #0A0E1A;
}

.hero-video-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(10, 14, 26, 0.48) 0%, rgba(10, 14, 26, 0.28) 55%, rgba(10, 14, 26, 0.12) 85%);
  pointer-events: none;
  z-index: 1;
}

.hero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 60%, #FFFFFF 100%);
  pointer-events: none;
  z-index: 2;
}

.hero-video-content {
  position: relative;
  z-index: 3;
  max-width: 760px;
  text-align: center;
  margin: 0 auto;
}

.hero-video-tag {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-video-title {
  color: #FFFFFF !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
}

.hero-video-sub {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.btn-secondary-video {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF !important;
  border-radius: 9999px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary-video:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #FFFFFF;
  color: #FFFFFF !important;
}

.hero-video-meta {
  color: rgba(255, 255, 255, 0.72) !important;
}
.hero-video-meta a {
  color: #FFFFFF !important;
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-video-media {
    display: none !important;
  }
  .hero-video-wrapper {
    background-image: url('../assets/images/hero-night-port-poster.jpg');
    background-size: cover;
    background-position: center 38%;
  }
}

/* Section 03 — Carrier Operating Standards (Service/Operating Standard Interaction) */
.operating-standards-section {
  padding: 104px 0 96px;
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--border-rule);
  position: relative;
}

.standards-header {
  max-width: 820px;
  margin-bottom: 52px;
}

.standards-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2.1rem, 3.8vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-headline);
  margin-bottom: 16px;
}

.standards-lead {
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
  max-width: 680px;
}

.standards-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-rule);
}

.standard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 24px;
  border-bottom: 1px solid var(--border-rule);
  background-color: #FFFFFF;
  position: relative;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  transition: background-color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.standard-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: #059669;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.standard-row:hover,
.standard-row.is-active,
.standard-row:focus-visible {
  background-color: #F8FAFC;
}

.standard-row:hover::before,
.standard-row.is-active::before,
.standard-row:focus-visible::before {
  transform: scaleY(1);
}

.standard-left {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  min-width: 0;
}

.standard-index {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #94A3B8;
  width: 36px;
  flex-shrink: 0;
  transition: color 0.25s ease;
}

.standard-row:hover .standard-index,
.standard-row.is-active .standard-index {
  color: #059669;
}

.standard-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.standard-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: 800;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--text-headline);
  margin: 0;
  line-height: 1.25;
  transition: color 0.25s ease;
}

.standard-row:hover .standard-title,
.standard-row.is-active .standard-title {
  color: #0F172A;
}

.standard-detail {
  font-size: 0.94rem;
  color: var(--text-body);
  line-height: 1.55;
  margin: 0;
  max-width: 620px;
}

.standard-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.standard-badge {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #047857;
  background-color: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.22);
  padding: 5px 12px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.standard-row:hover .standard-badge,
.standard-row.is-active .standard-badge {
  background-color: rgba(5, 150, 105, 0.14);
  border-color: rgba(5, 150, 105, 0.35);
}

.standard-preview-thumb {
  width: 0;
  opacity: 0;
  overflow: hidden;
  border-radius: 6px;
  transform: scale(0.92);
  transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.28s ease,
              transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  flex-shrink: 0;
}

.standard-preview-thumb img {
  width: 110px;
  height: 68px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

.standard-row:hover .standard-preview-thumb,
.standard-row.is-active .standard-preview-thumb {
  width: 110px;
  opacity: 1;
  transform: scale(1);
}

.standard-arrow {
  font-size: 1.6rem;
  font-weight: 400;
  color: #94A3B8;
  line-height: 1;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
  display: inline-block;
}

.standard-row:hover .standard-arrow,
.standard-row.is-active .standard-arrow {
  color: #059669;
  transform: translateX(8px);
}

/* === Pattern Beta: Operating Standards Architectural Containment Frame === */
.standards-containment-frame {
  background-color: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  margin-top: 36px;
}

.standards-containment-frame .standards-list {
  border-top: none;
}

.standards-containment-frame .standard-row:last-child {
  border-bottom: none;
}

/* ══════════════════════════════════════════════════
   Phase 3 — Commercial Proof Moment ($100K+ Dispatched Linehaul)
   Dedicated high-impact proof showcase, not four dashboard cards
══════════════════════════════════════════════════ */
.commercial-proof-section {
  padding: 104px 0 96px;
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-rule);
  position: relative;
}

/* === Pattern Alpha: Metric Stage Containment Enclosure === */
.proof-metric-stage-card {
  background-color: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: var(--radius-xl);
  padding: 56px 44px 52px;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
  position: relative;
}

.proof-moment-stage {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.proof-moment-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  padding: 6px 14px;
  border-radius: 4px;
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-headline);
  margin-bottom: 28px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.proof-hero-figure {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(3.8rem, 8vw, 6.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--text-headline);
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.proof-hero-figure .figure-accent {
  color: #059669;
}

.proof-hero-label {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-headline);
  margin-bottom: 16px;
}

.proof-hero-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.65;
  color: var(--text-body);
  max-width: 680px;
  margin: 0 auto 32px;
}

.proof-cta-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.proof-reassurance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 12px;
  font-size: 0.86rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 56px;
}

.proof-reassurance .proof-dot {
  color: #CBD5E1;
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border-rule);
  background-color: #FFFFFF;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.proof-strip-col {
  padding: 32px 24px;
  text-align: left;
  border-right: 1px solid var(--border-rule);
  transition: background-color 0.25s ease;
}

.proof-strip-col:last-child {
  border-right: none;
}

.proof-strip-col:hover {
  background-color: #FAFAFA;
}

.proof-strip-num {
  font-family: 'DM Sans', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text-headline);
  line-height: 1.1;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.proof-strip-num span {
  color: #059669;
}

.proof-strip-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-headline);
  margin-bottom: 6px;
}

.proof-strip-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* === Pattern Alpha: Precision 1px Rule Line with Center Node Dot === */
.proof-node-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px auto 28px;
  max-width: 320px;
}

.proof-node-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-rule) 50%, var(--border-focus));
}

.proof-node-line.reverse {
  background: linear-gradient(90deg, var(--border-focus), var(--border-rule) 50%, transparent);
}

.proof-node-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
  flex-shrink: 0;
}

/* === Pattern Gamma: Sequential Watermark Numbers === */
.card-watermark-num {
  position: absolute;
  bottom: 8px;
  right: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(15, 23, 42, 0.045);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* === Pattern Gamma: Section 06 Core Capabilities Containment Grid === */
.capabilities-containment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.capability-card-containment {
  background-color: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.capability-card-containment:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  border-color: rgba(255, 85, 0, 0.35);
}

.capability-eyebrow {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--accent-orange);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.capability-card-containment h3 {
  font-size: 1.22rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text-headline);
  position: relative;
  z-index: 2;
  line-height: 1.3;
}

.capability-card-containment p {
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
  flex-grow: 1;
}

.capability-card-containment .capability-link {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-orange);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
  transition: gap 0.2s ease;
}

.capability-card-containment:hover .capability-link {
  gap: 10px;
}

/* === Master Architectural Content Containment (Eliminates the "Void" Problem) === */
.containment-card {
  background-color: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.section-header-containment {
  max-width: 680px;
  margin-bottom: 40px;
}

.section-header-containment .editorial-tag,
.section-header-containment .capability-eyebrow {
  font-family: 'DM Sans', monospace, sans-serif;
  letter-spacing: 0.08em;
}

/* === Section 09: Tracking Subpoints Containment Enclosure === */
.subpoints-containment-card {
  background-color: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  margin-bottom: 28px;
}

.subpoints-containment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.subpoint-item {
  border-left: 3px solid var(--accent-orange);
  padding-left: 14px;
}

.subpoint-item strong {
  display: block;
  font-size: 0.98rem;
  color: var(--text-headline);
  margin-bottom: 2px;
}

.subpoint-item span {
  font-size: 0.84rem;
  color: var(--text-muted);
}

/* === Pattern Gamma: Section 10 Verified Feedback Containment Grid === */
.testimonials-containment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.testimonial-card-containment {
  background-color: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card-containment:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.testimonial-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #047857;
  background-color: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.22);
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
  width: fit-content;
}

.testimonial-quote {
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--text-headline);
  font-style: italic;
  margin-bottom: 24px;
  flex-grow: 1;
}

.testimonial-author-divider {
  height: 1px;
  background-color: var(--border-rule);
  margin-bottom: 16px;
}

.testimonial-author-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-headline);
}

.testimonial-author-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

/* === Pattern Delta: Section 11 Deep Gravity Conversion Block === */
.deep-gravity-cta {
  background-color: #0A0D12 !important;
  color: #FFFFFF !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  position: relative;
  overflow: hidden;
}

.deep-gravity-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: radial-gradient(circle, rgba(255, 85, 0, 0.5) 0%, transparent 80%);
}

.deep-gravity-cta .editorial-tag {
  background: rgba(255, 85, 0, 0.15) !important;
  border-color: rgba(255, 85, 0, 0.3) !important;
  color: #FFAA80 !important;
}

.deep-gravity-cta h2 {
  color: #FFFFFF !important;
  font-weight: 800;
}

.deep-gravity-cta p {
  color: rgba(255, 255, 255, 0.82) !important;
}

.deep-gravity-cta .meta-strip {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.deep-gravity-cta .meta-strip a,
.deep-gravity-cta .meta-strip span {
  color: #FFFFFF !important;
}

/* Section 05 — Dispatch / Tracking / Booking Operating System Pipeline
   6-Stage Operational Sequence: 01 FIND -> 02 QUOTE -> 03 NEGOTIATE -> 04 BOOK -> 05 TRACK -> 06 DELIVER */
.dispatch-system-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  margin-bottom: 56px;
}

.dispatch-system-step {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 28px 26px;
  position: relative;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.dispatch-system-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #059669;
  border-radius: 6px 6px 0 0;
  transition: width 0.3s ease;
}

.dispatch-system-step:hover,
.dispatch-system-step.is-active {
  border-color: rgba(5, 150, 105, 0.4);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.dispatch-system-step:hover::before,
.dispatch-system-step.is-active::before {
  width: 100%;
}

.step-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.step-num {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #059669;
  letter-spacing: 0.06em;
}

.step-pill {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-rule);
  padding: 3px 8px;
  border-radius: 3px;
}

.step-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-headline);
  margin: 0 0 6px;
  line-height: 1.15;
}

.step-action {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-orange);
  margin-bottom: 12px;
  letter-spacing: 0.01em;
}

.step-desc {
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0 0 20px;
  flex: 1;
}

.step-telemetry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border-rule);
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.telemetry-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #059669;
  display: inline-block;
  flex-shrink: 0;
}

/* Sample Dispatch Board Visual */
.dispatch-board-mockup {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 4px;
  padding: 24px 28px;
  margin-top: 48px;
  box-shadow: var(--shadow-card);
}

.dispatch-board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-rule);
  flex-wrap: wrap;
  gap: 12px;
}

.btn-lane {
  background: var(--bg-surface);
  border: 1px solid var(--border-rule);
  color: var(--text-body);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.02em;
}

.btn-lane:hover {
  background: #FFFFFF;
  border-color: var(--accent-orange);
  color: var(--accent-orange);
}

.btn-lane.active {
  background: var(--text-headline);
  color: #FFFFFF;
  border-color: var(--text-headline);
}

/* Section 07 — Equipment Alternating Storytelling (6 Classes) */
.equipment-story-item {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  padding: 68px 0;
  border-bottom: 1px solid var(--border-rule);
}

.equipment-story-item.reverse {
  grid-template-columns: 0.85fr 1.15fr;
}

.equipment-story-item:last-child {
  border-bottom: none;
}

.equipment-story-content {
  display: flex;
  flex-direction: column;
}

.equipment-story-tag {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.equipment-story-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.75rem, 2.4vw, 2.2rem);
  font-weight: 800;
  color: var(--text-headline);
  line-height: 1.18;
  margin: 0 0 14px;
}

.equipment-story-desc {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-body);
  margin: 0 0 24px;
}

.equipment-specs-pills {
  display: flex;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.equipment-spec-pill {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  color: var(--text-headline);
  padding: 6px 13px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.equipment-spec-pill .pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #059669;
  display: inline-block;
}

.equipment-story-media {
  position: relative;
}

.equipment-story-frame {
  border-radius: 6px;
  overflow: hidden;
  height: 380px;
  background: #E2E8F0;
  border: 1px solid var(--border-rule);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  position: relative;
}

.equipment-story-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.equipment-story-frame:hover img {
  transform: scale(1.025);
}

.equipment-media-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 3px;
  text-transform: uppercase;
}

/* Section 08 — Commercial Freight Intelligence Grid */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.insight-card {
  border-top: 1px solid var(--border-rule);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.insight-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--accent-orange);
  transition: width 0.3s ease;
}

.insight-card:hover::before {
  width: 48px;
}

.insight-card:hover {
  transform: translateY(-2px);
}

.insight-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.insight-category {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.insight-takeaway-badge {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--bg-surface);
  border: 1px solid var(--border-rule);
  padding: 3px 8px;
  border-radius: 3px;
  color: var(--accent-orange);
}

.insight-card h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin-bottom: 12px;
  color: var(--text-headline);
}

.insight-card p {
  font-size: 0.88rem;
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.insight-action-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-orange);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}

.insight-card:hover .insight-action-link {
  gap: 10px;
}

/* Section 09 — Minimalist Vector Map */
.map-graphic-box {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 4px;
  padding: 40px;
  text-align: center;
  margin-top: 36px;
  position: relative;
}

.map-corridor-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-rule);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-headline);
  margin: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.map-corridor-badge:hover, .map-corridor-badge.active {
  background: #0A0D12;
  color: #FFFFFF;
  border-color: #0A0D12;
}

/* Section 10 — Tracking Mockup Panel */
.tracking-interface-box {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 4px;
  padding: 36px;
  box-shadow: var(--shadow-card);
  margin-top: 32px;
}

.timeline-milestone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-rule);
}
.timeline-milestone:last-child {
  border-bottom: none;
}

/* ══════════════════════════════════════════════════
   Carrier Conversion Engine (dispatch.php)
   Professional Operational Standard & Settlement Infrastructure
   ══════════════════════════════════════════════════ */

/* Hero Extensions */
.dispatch-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.dispatch-hero-meta .meta-check {
  color: #059669;
  font-weight: 700;
  margin-right: 4px;
}
.dispatch-photo-panel {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-rule);
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
  background: #0F172A;
}
.dispatch-live-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dispatch-live-pill .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
}

/* 6-Step Carrier Onboarding Workflow */
.dispatch-workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.dispatch-workflow-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.dispatch-workflow-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #059669;
  border-radius: 6px 6px 0 0;
  transition: width 0.3s ease;
}
.dispatch-workflow-card:hover {
  border-color: rgba(5, 150, 105, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}
.dispatch-workflow-card:hover::before {
  width: 100%;
}
.workflow-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}
.workflow-step-num {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #059669;
  letter-spacing: 0.06em;
}
.workflow-step-pill {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-rule);
  padding: 3px 8px;
  border-radius: 3px;
}
.workflow-step-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-headline);
  margin: 0 0 10px;
  line-height: 1.25;
  position: relative;
  z-index: 2;
}
.workflow-step-desc {
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0 0 16px;
  flex: 1;
  position: relative;
  z-index: 2;
}
.workflow-step-timing {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--accent-orange);
  letter-spacing: 0.02em;
  padding-top: 12px;
  border-top: 1px solid var(--border-rule);
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}

/* Flat 10% Fee Breakdown & Ledger */
.fee-ledger-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  margin-top: 48px;
  align-items: stretch;
}
.fee-breakdown-box {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 36px 32px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.fee-columns-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
}
.fee-col-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-headline);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fee-item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fee-item-row {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-body);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.fee-item-row .icon-check {
  color: #059669;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
}
.fee-item-row .icon-zero {
  color: var(--accent-orange);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.2;
}

.fee-example-card {
  background: #0F172A;
  color: #FFFFFF;
  border-radius: 6px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12);
}
.fee-calc-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.fee-calc-tag {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #34D399;
  text-transform: uppercase;
}
.fee-calc-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 6px 0 0;
}
.fee-line-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fee-line-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
}
.fee-line-row.total-row {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 14px;
  margin-top: 4px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFFFFF;
}
.fee-line-row.total-row .green-val {
  color: #10B981;
  font-size: 1.35rem;
}
.fee-reassurance-note {
  margin-top: 20px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

/* Equipment Specialization Grid */
.dispatch-equip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.dispatch-equip-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.dispatch-equip-card:hover {
  border-color: var(--accent-orange);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}
.equip-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.equip-spec-pill-rpm {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  color: #047857;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.2);
  padding: 4px 10px;
  border-radius: 3px;
}
.equip-card-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-headline);
  margin: 0 0 10px;
}
.equip-card-desc {
  font-size: 0.88rem;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0 0 18px;
  flex: 1;
}
.equip-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border-rule);
}
.equip-tag {
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--bg-surface);
  border: 1px solid var(--border-rule);
  color: var(--text-headline);
  padding: 3px 8px;
  border-radius: 3px;
}

/* Operational Defense & Failure Protocols */
.protocol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.protocol-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.protocol-card:hover {
  border-color: #059669;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.protocol-recovery-badge {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-orange);
  background: rgba(255, 85, 0, 0.08);
  border: 1px solid rgba(255, 85, 0, 0.2);
  padding: 3px 8px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 12px;
  width: fit-content;
}
.protocol-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-headline);
  margin: 0 0 10px;
  line-height: 1.25;
}
.protocol-desc {
  font-size: 0.86rem;
  color: var(--text-body);
  line-height: 1.55;
  margin: 0 0 14px;
  flex: 1;
}
.protocol-action-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  color: #059669;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: 10px;
  border-top: 1px solid var(--border-rule);
}

/* Carrier Operational FAQs */
.carrier-faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 880px;
  margin: 48px auto 0;
}
.carrier-faq-item {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 24px 28px;
  transition: all 0.25s ease;
}
.carrier-faq-item:hover {
  border-color: rgba(5, 150, 105, 0.4);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.carrier-faq-question {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-headline);
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.carrier-faq-question .q-num {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  color: #059669;
}
.carrier-faq-answer {
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.65;
  margin: 0;
  padding-left: 28px;
}

/* Dedicated Carrier Conversion CTA Banner */
.carrier-conversion-box {
  background: #0A0D12;
  color: #FFFFFF;
  border-radius: 6px;
  padding: 64px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(10, 13, 18, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.carrier-conversion-box .cta-badge,
.carrier-conversion-box .conversion-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(5, 150, 105, 0.15) !important;
  border: 1px solid rgba(5, 150, 105, 0.35) !important;
  color: #34D399 !important;
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 9999px;
  margin: 0 auto 20px;
}
.carrier-conversion-box h2,
.carrier-conversion-box .cta-headline,
.carrier-conversion-box .conversion-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #FFFFFF !important;
  margin: 0 0 16px;
  line-height: 1.15;
}
.carrier-conversion-box p,
.carrier-conversion-box .cta-sub,
.carrier-conversion-box .conversion-sub {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: rgba(255, 255, 255, 0.85) !important;
  max-width: 640px;
  margin: 0 auto 32px;
  line-height: 1.6;
}
.carrier-conversion-box .cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.carrier-conversion-box .cta-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.65);
}
.btn-outline-white {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF !important;
  border-radius: 9999px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #FFFFFF;
  color: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════
   Brokerage & Capacity Network (brokerage.php)
   Bifurcated Two-Audience Freight Architecture
   ══════════════════════════════════════════════════ */

/* Bifurcated Hero Audience Selector */
.audience-selector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
}
.audience-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.audience-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  transition: width 0.3s ease;
}
.audience-card.shipper-card::before {
  background: #059669;
}
.audience-card.carrier-card::before {
  background: var(--accent-orange);
}
.audience-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
.audience-card.shipper-card:hover {
  border-color: rgba(5, 150, 105, 0.5);
}
.audience-card.carrier-card:hover {
  border-color: rgba(255, 85, 0, 0.5);
}
.audience-card:hover::before {
  width: 100%;
}
.audience-badge {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 16px;
  width: fit-content;
}
.audience-badge.shipper-badge {
  color: #047857;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.22);
}
.audience-badge.carrier-badge {
  color: var(--accent-orange);
  background: rgba(255, 85, 0, 0.08);
  border: 1px solid rgba(255, 85, 0, 0.22);
}
.audience-title {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(1.25rem, 4.5vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-headline);
  margin: 0 0 12px;
  line-height: 1.25;
  word-break: break-word;
}
.audience-desc {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.65;
  margin: 0 0 24px;
  flex: 1;
}
.audience-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.audience-feature-item {
  font-size: 0.88rem;
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: 10px;
}
.audience-feature-item .feat-icon {
  font-weight: 800;
  font-size: 0.95rem;
}
.audience-card.shipper-card .feat-icon {
  color: #059669;
}
.audience-card.carrier-card .feat-icon {
  color: var(--accent-orange);
}

/* 4-Step Shipper Freight Lifecycle */
.lifecycle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.lifecycle-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 26px 22px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.lifecycle-card:hover {
  border-color: #059669;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}
.lifecycle-step-num {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #059669;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}
.lifecycle-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--text-headline);
  margin: 0 0 10px;
  line-height: 1.25;
  position: relative;
  z-index: 2;
}
.lifecycle-desc {
  font-size: 0.88rem;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0 0 14px;
  flex: 1;
  position: relative;
  z-index: 2;
}
.lifecycle-badge {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-rule);
  padding: 4px 8px;
  border-radius: 3px;
  width: fit-content;
  position: relative;
  z-index: 2;
}

/* 4-Stage Wholesale Logistics Pipeline */
.logistics-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 991px) {
  .logistics-pipeline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .logistics-pipeline-grid {
    grid-template-columns: 1fr;
  }
}
.logistics-pipeline-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.logistics-pipeline-card:hover {
  border-color: var(--accent-orange);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}
.logistics-pipeline-num {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-orange);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}
.logistics-pipeline-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--text-headline);
  margin: 0 0 10px;
  line-height: 1.25;
  position: relative;
  z-index: 2;
}
.logistics-pipeline-desc {
  font-size: 0.88rem;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0 0 16px;
  flex: 1;
  position: relative;
  z-index: 2;
}
.logistics-pipeline-tag {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-rule);
  padding: 4px 8px;
  border-radius: 3px;
  width: fit-content;
  position: relative;
  z-index: 2;
}

/* Strategic Port Terminals & Corridors */
.corridor-terminal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 768px) {
  .corridor-terminal-grid {
    grid-template-columns: 1fr;
  }
}
.corridor-terminal-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  transition: all 0.25s ease;
}
.corridor-terminal-card:hover {
  border-color: rgba(255, 85, 0, 0.35);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}
.corridor-terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.corridor-terminal-port {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-headline);
}
.corridor-terminal-badge {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.25);
  padding: 4px 10px;
  border-radius: 12px;
}
.corridor-terminal-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-rule);
}
.corridor-spec-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: block;
}
.corridor-spec-value {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text-headline);
  margin-top: 2px;
  display: block;
}


/* Vetting Standards Grid */
.vetting-standards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.vetting-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.vetting-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.vetting-icon-pill {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
}
.vetting-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-headline);
  margin: 0;
}
.vetting-desc {
  font-size: 0.88rem;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0 0 16px;
  flex: 1;
}
.vetting-stat {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #059669;
  padding-top: 10px;
  border-top: 1px solid var(--border-rule);
}

/* Active Capacity Corridors Grid */
.capacity-corridors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.capacity-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.capacity-card:hover {
  border-color: var(--accent-orange);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.capacity-lane-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-headline);
  margin: 0 0 8px;
}
.capacity-lane-equip {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #059669;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.capacity-lane-details {
  font-size: 0.84rem;
  color: var(--text-body);
  line-height: 1.55;
  margin: 0 0 14px;
  flex: 1;
}
.capacity-freq-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-rule);
  padding: 4px 8px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.capacity-freq-tag .dot-pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10B981;
}

/* ══════════════════════════════════════════════════
   DataQ Master Compliance Engine (dataq.php)
   Interactive Violation Diagnostics & 49 CFR Defense
   ══════════════════════════════════════════════════ */

/* Hero Layout for DataQ Master Page */
.dataq-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.dataq-hero-preview-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}
.hero-quick-scan-box {
  padding: 22px 20px;
}
.zero-risk-card {
  margin-top: 36px;
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-left: 4px solid #059669;
  border-radius: 6px;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Diagnostic Selector Box */
.diagnostic-engine-box {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 36px 32px;
  margin-top: 40px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
.diagnostic-header {
  margin-bottom: 24px;
}
.diagnostic-selector-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 28px;
}
.violation-pill-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-rule);
  color: var(--text-headline);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.violation-pill-btn:hover {
  border-color: #059669;
  color: #059669;
  background: #FFFFFF;
}
.violation-pill-btn.is-active {
  background: #0A0D12;
  color: #FFFFFF;
  border-color: #0A0D12;
}
.violation-pill-btn.is-active .pill-code {
  color: #34D399;
}
.violation-pill-btn .pill-code {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
}

/* Diagnostic Output Card */
.diagnostic-result-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 28px 26px;
  position: relative;
  transition: all 0.3s ease;
}
.diag-top-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.diag-cfr-badge {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent-orange);
  background: rgba(255, 85, 0, 0.08);
  border: 1px solid rgba(255, 85, 0, 0.2);
  padding: 4px 10px;
  border-radius: 3px;
}
.diag-success-rate {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: #047857;
  display: flex;
  align-items: center;
  gap: 6px;
}
.diag-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-headline);
  margin: 0 0 10px;
}
.diag-defense-strategy {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-body);
  margin-bottom: 20px;
}
.diag-evidence-required {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 4px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.evidence-label {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.evidence-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.evidence-item {
  font-size: 0.86rem;
  color: var(--text-body);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.evidence-item .check-icon {
  color: #059669;
  font-weight: 800;
}

/* Evidence Checklist Grid */
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.checklist-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.checklist-num {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #059669;
  margin-bottom: 10px;
}
.checklist-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-headline);
  margin: 0 0 8px;
}
.checklist-desc {
  font-size: 0.88rem;
  color: var(--text-body);
  line-height: 1.55;
  margin: 0;
}

/* CSA Time-Weight & Severity Model */
.time-decay-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.time-decay-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 24px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.time-decay-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.time-decay-card.active-weight {
  border-color: var(--accent-orange);
}
.time-decay-period {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.time-decay-multiplier {
  font-family: 'DM Sans', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--text-headline);
  line-height: 1.1;
  margin-bottom: 10px;
}
.time-decay-card.active-weight .time-decay-multiplier {
  color: var(--accent-orange);
}
.time-decay-impact {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-body);
}

.csa-threshold-box {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-left: 4px solid var(--accent-orange);
  border-radius: 6px;
  padding: 24px 28px;
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.csa-threshold-box .thresh-icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.csa-threshold-box .thresh-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-headline);
  margin: 0 0 6px;
}
.csa-threshold-box .thresh-desc {
  font-size: 0.88rem;
  color: var(--text-body);
  line-height: 1.55;
  margin: 0;
}

/* Driver PSP vs MVR Distinction Box */
.psp-vs-mvr-box {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 36px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
}
.psp-record-col {
  padding: 32px 28px;
  border-right: 1px solid var(--border-rule);
}
.mvr-record-col {
  padding: 32px 28px;
  background: var(--bg-surface);
}
.record-type-badge {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 12px;
}
.record-type-badge.psp-badge {
  color: var(--accent-orange);
  background: rgba(255, 85, 0, 0.08);
  border: 1px solid rgba(255, 85, 0, 0.2);
}
.record-type-badge.mvr-badge {
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.2);
}
.record-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--text-headline);
  margin: 0 0 10px;
}
.record-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-body);
  margin-bottom: 16px;
}
.record-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--text-headline);
}
.record-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Dynamic Multi-Intent Contact Form Engine */
.contact-form-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 6px;
  padding: 36px 32px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .contact-form-card {
    padding: 24px 16px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}
.intent-tabs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.intent-tab-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-rule);
  color: var(--text-headline);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.intent-tab-btn:hover {
  border-color: #059669;
  color: #059669;
  background: #FFFFFF;
}
.intent-tab-btn.is-active {
  background: #0A0D12;
  color: #FFFFFF;
  border-color: #0A0D12;
}
.intent-context-banner {
  background: rgba(5, 150, 105, 0.06);
  border: 1px solid rgba(5, 150, 105, 0.25);
  border-radius: 5px;
  padding: 12px 16px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: #065F46;
}
.intent-context-banner .banner-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ========================================================
   21st.dev LOGISTICS & BENTO COMPONENT ARCHITECTURE
   High-density Bento modules, Team showcase, and Tracking HUD
   ======================================================== */

/* Bento Grid System */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.bento-col-4 { grid-column: span 4; }
.bento-col-6 { grid-column: span 6; }
.bento-col-8 { grid-column: span 8; }
.bento-col-12 { grid-column: span 12; }

.bento-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 8px;
  padding: 28px 26px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.bento-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -4px rgba(10, 13, 18, 0.07);
  border-color: #CBD5E1;
}
.bento-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.bento-tag {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.bento-status-pill {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.2);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bento-status-pill.orange {
  color: var(--accent-orange);
  background: rgba(255, 85, 0, 0.08);
  border-color: rgba(255, 85, 0, 0.2);
}

/* Executive & Operations Team Bento Showcase */
.team-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.team-bento-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.team-bento-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -4px rgba(10, 13, 18, 0.09);
  border-color: #CBD5E1;
}
.team-image-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  background: #F1F5F9;
  overflow: hidden;
}
.team-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.team-bento-card:hover .team-image-box img {
  transform: scale(1.03);
}
.team-status-ribbon {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(10, 13, 18, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: #FFFFFF;
}
.team-status-ribbon .pulse-dot {
  width: 6px;
  height: 6px;
  background: #10B981;
  border-radius: 50%;
  display: inline-block;
  animation: pulseLive 2s infinite;
}
.team-content-box {
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.team-member-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-headline);
  margin: 0 0 4px;
}
.team-member-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #059669;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.team-member-bio {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-body);
  margin-bottom: 16px;
  flex: 1;
}
.team-metrics-list {
  border-top: 1px solid var(--border-rule);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.team-metric-row {
  display: flex;
  justify-content: space-between;
}
.team-metric-row strong {
  color: var(--text-headline);
}

/* 21st.dev Parallax / Interactive Order Tracking HUD */
.tracking-hud-card {
  background: #0A0D12;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 28px 26px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.tracking-hud-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 14px;
}
.hud-badge-live {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  color: #34D399;
  background: rgba(5, 150, 105, 0.2);
  border: 1px solid rgba(5, 150, 105, 0.4);
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hud-route-display {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.hud-location-city {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 2px;
}
.hud-location-sub {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'DM Sans', monospace, sans-serif;
}
.hud-route-vector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hud-route-arrow {
  font-size: 1.4rem;
  color: var(--accent-orange);
}
.hud-route-distance {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 3px;
}
.hud-milestones-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 24px;
  position: relative;
}
.hud-milestone-step {
  text-align: center;
  position: relative;
}
.hud-step-bullet {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid #0A0D12;
}
.hud-milestone-step.is-done .hud-step-bullet {
  background: #10B981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
}
.hud-milestone-step.is-active .hud-step-bullet {
  background: var(--accent-orange);
  box-shadow: 0 0 10px rgba(255, 85, 0, 0.8);
  animation: pulseLive 1.5s infinite;
}
.hud-step-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.2;
}
.hud-telemetry-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 14px 16px;
}
.hud-telemetry-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hud-telemetry-label {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}
.hud-telemetry-val {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.96rem;
  font-weight: 800;
  color: #FFFFFF;
}
.tracking-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.tracking-subpoints-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}

/* ========================================================
   21st.dev LOGISTICS: HANGING ORANGE CONTAINER ARCHITECTURE
   Industrial Rigging & Intermodal Container System
   ======================================================== */
.hero-hanging-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  position: relative;
  width: 100%;
}
.hero-hanging-text {
  position: relative;
  z-index: 2;
  max-width: 680px;
}
.hero-hanging-visual {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: -30px;
}
.hanging-container-assembly {
  position: relative;
  width: 100%;
  max-width: 480px;
  text-align: center;
  animation: containerSway 6s ease-in-out infinite;
  transform-origin: 50% -50px;
  will-change: transform;
}
.crane-cable-line {
  position: absolute;
  top: -240px;
  left: 51.3%;
  transform: translateX(-50%);
  width: 3px;
  height: 250px;
  background: linear-gradient(to bottom, rgba(148, 163, 184, 0.1) 0%, rgba(100, 116, 139, 0.5) 40%, #475569 100%);
  z-index: -1;
}
.crane-cable-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  border-left: 1px dashed rgba(255, 255, 255, 0.6);
}
.hanging-container-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 36px rgba(10, 13, 18, 0.16));
  user-select: none;
  pointer-events: none;
}
.hanging-container-shadow {
  width: 65%;
  height: 18px;
  margin: 8px auto 0;
  background: radial-gradient(ellipse at center, rgba(10, 13, 18, 0.14) 0%, transparent 70%);
  border-radius: 50%;
  animation: shadowPulse 6s ease-in-out infinite;
}
@keyframes containerSway {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(-0.7deg);
  }
  50% {
    transform: translateY(-9px) rotate(0.4deg);
  }
  75% {
    transform: translateY(-4px) rotate(0.8deg);
  }
}
@keyframes shadowPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.5;
  }
}

/* ========================================================
   DISPATCH EQUIPMENT BLUEPRINT WATERMARKS
   ======================================================== */
.dispatch-equip-card {
  position: relative;
  overflow: hidden;
}
.equip-blueprint-watermark {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 220px;
  height: 120px;
  pointer-events: none;
  opacity: 0.08;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translate(0, 0);
  z-index: 1;
}
.dispatch-equip-card:hover .equip-blueprint-watermark {
  opacity: 0.20;
  transform: translate(-4px, -6px) scale(1.05);
}
.dispatch-equip-card > *:not(.equip-blueprint-watermark) {
  position: relative;
  z-index: 2;
}

/* ========================================================
   CARRIER RECOVERY FLOWING VEIN ANIMATION
   ======================================================== */
.protocol-conduit-wrapper {
  position: relative;
  margin-top: 48px;
}
.protocol-conduit-svg {
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  height: 28px;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}
.vein-track-base {
  stroke: #E2E8F0;
  stroke-width: 3;
  stroke-linecap: round;
}
.vein-flow-pulse {
  stroke: #FF5500;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 80 220;
  filter: drop-shadow(0 0 6px rgba(255, 85, 0, 0.8));
  animation: veinFlow 2.8s linear infinite;
}
@keyframes veinFlow {
  from {
    stroke-dashoffset: 600;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.protocol-vein-node {
  position: absolute;
  top: -8px;
  right: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #FF5500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(255, 85, 0, 0.4);
  z-index: 5;
}
.protocol-vein-node .node-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF5500;
  animation: pulseLive 1.5s infinite;
}

/* ========================================================
   RESPONSIVE ARCHITECTURE (MOBILE & TABLET OVERRIDES ONLY)
   Desktop (>= 1025px) remains completely unaffected
   ======================================================== */

/* ── Tablet Overrides (<= 1024px) ── */
@media (max-width: 1024px) {
  /* Architectural navigation */
  #navbar { padding: 0 24px; }
  .container { padding: 0 24px; }

  /* Grid adaptations */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .metric-item:nth-child(2) { border-right: none; }

  /* Dispatch-first extension adapters */
  .standard-row { padding: 24px 18px; gap: 20px; }
  .standard-preview-thumb { display: none; }
  .insights-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .dispatch-system-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .equipment-story-item, .equipment-story-item.reverse { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .equipment-story-item .equipment-story-content { order: 1; }
  .equipment-story-item .equipment-story-media { order: 2; }
  .equipment-story-frame { height: 320px; }
  .proof-header-grid { grid-template-columns: 1fr !important; gap: 32px; }

  /* Cross-page and inner section 2-column adapters */
  [style*="grid-template-columns: 1.15fr 0.85fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  #trusted-network [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px;
  }

  /* Commercial Proof Moment Tablet Adapter */
  .proof-strip { grid-template-columns: repeat(2, 1fr); }
  .proof-strip-col:nth-child(2) { border-right: none; }
  .proof-strip-col:nth-child(1),
  .proof-strip-col:nth-child(2) { border-bottom: 1px solid var(--border-rule); }

  #testimonials [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px;
  }

  /* Dispatch Carrier Conversion Tablet Adapters */
  .dispatch-workflow-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .fee-ledger-grid { grid-template-columns: 1fr; gap: 28px; }
  .fee-columns-split { grid-template-columns: 1fr 1fr; }
  .dispatch-equip-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .protocol-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* Brokerage Bifurcated Network Tablet Adapters */
  .audience-selector-grid { grid-template-columns: 1fr; gap: 24px; }
  .lifecycle-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .vetting-standards-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .capacity-corridors-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .conversion-split-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .split-col-shipper { border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; padding-right: 0 !important; padding-bottom: 32px !important; }

  /* DataQ Compliance Engine Tablet Adapters */
  .checklist-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .time-decay-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .csa-threshold-box { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* 21st.dev Bento & Team Tablet Adapters */
  .team-bento-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .bento-grid { grid-template-columns: 1fr; gap: 20px; }
  .bento-col-4, .bento-col-6, .bento-col-8, .bento-col-12 { grid-column: span 1 !important; }
  .hud-milestones-row { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .hud-telemetry-strip { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tracking-split-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-hanging-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; align-items: center; }
  .hero-hanging-text { max-width: 100%; }
  .hero-hanging-visual { display: flex; justify-content: center; }
  .hanging-container-assembly { max-width: 380px; }
  .crane-cable-line { top: -140px; height: 150px; }
}

/* ── Mobile Overrides (<= 768px) ── */
@media (max-width: 768px) {
  /* Viewport safety */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  h1 {
    font-size: clamp(1.85rem, 6.5vw, 2.35rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    word-break: normal;
    overflow-wrap: break-word;
  }
  h2 {
    font-size: clamp(1.45rem, 5vw, 1.95rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .container { padding: 0 16px; }
  .section { padding: 56px 0; }
  .section-sm { padding: 40px 0; }

  /* Navigation & Mobile Drawer Touch Targets */
  #navbar { height: 64px; padding: 0 16px; }
  .nav-links { display: none; }
  .nav-hamburger {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 48px !important;
    height: 48px !important;
    cursor: pointer !important;
    margin-left: auto !important;
  }
  .nav-cta .btn,
  .nav-cta .nav-link-login {
    display: none !important;
  }
  .containment-card {
    padding: 20px 16px;
  }

  #mobile-nav {
    padding: 24px 20px 32px;
  }
  #mobile-nav-close {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  #mobile-nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    padding: 8px 0;
  }
  #mobile-nav .btn {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
  }

  /* Universal Grids and Forms */
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 24px; }
  .form-row { grid-template-columns: 1fr; gap: 16px; }
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 48px;
  }

  /* Metrics Strip */
  .metric-grid { grid-template-columns: 1fr; gap: 16px; }
  .metric-item {
    border-right: none;
    border-bottom: 1px solid var(--border-rule);
    padding-bottom: 14px;
    padding-right: 0;
  }
  .metric-item:last-child { border-bottom: none; }

  /* Section 02 — Hero Recomposition for Tablet & Mobile */
  .hero-dispatch-container {
    min-height: 640px;
    padding: 100px 24px 60px;
  }
  .hero-dispatch-title {
    font-size: clamp(2.1rem, 5.5vw, 3.2rem);
    line-height: 1.1;
    margin-bottom: 16px;
  }
  .hero-dispatch-sub {
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 24px;
  }

  /* Mobile Phones Specific Overhaul (320px - 600px) */
  @media (max-width: 600px) {
    .hero-dispatch-container {
      min-height: 720px;
      padding: 90px 18px 300px;
      background-image: url('../assets/images/hero-truck-container-mobile.jpg');
      background-size: 100% auto;
      background-position: center bottom;
      background-repeat: no-repeat;
      background-color: #FFFFFF;
    }
    .hero-dispatch-overlay {
      display: none;
    }
    .hero-dispatch-content {
      max-width: 100%;
    }
    .hero-dispatch-title {
      font-size: clamp(1.95rem, 7.2vw, 2.45rem);
      line-height: 1.12;
      margin-bottom: 12px;
    }
    .hero-dispatch-sub {
      font-size: 0.92rem;
      line-height: 1.5;
      margin-bottom: 20px;
      max-width: 360px;
      margin-left: auto;
      margin-right: auto;
    }
    .hero-dispatch-container [style*="display: flex; gap: 16px"] {
      flex-direction: column;
      width: 100%;
      max-width: 360px;
      margin-left: auto;
      margin-right: auto;
      gap: 10px;
    }
    .hero-dispatch-container [style*="display: flex; gap: 16px"] .btn {
      width: 100%;
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-dispatch-meta {
      margin-top: 16px !important;
      font-size: 0.8rem !important;
      line-height: 1.5 !important;
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      gap: 4px 6px !important;
    }
    .hero-dispatch-meta .meta-item {
      white-space: nowrap !important;
    }
    .hero-dispatch-meta .meta-sep {
      display: inline-block !important;
    }

    /* Video Hero Mobile Refinement */
    .hero-video-container {
      min-height: 620px !important;
      padding: 95px 16px 70px !important;
      background-image: none !important;
    }
    .hero-video-media {
      object-position: 75% center !important;
    }
    .hero-video-tag {
      font-size: clamp(0.52rem, 2.5vw, 0.72rem) !important;
      padding: 4px 8px !important;
      letter-spacing: 0.02em !important;
      max-width: 100% !important;
    }
    .hero-video-title {
      font-size: clamp(1.45rem, 6.6vw, 2.35rem) !important;
      line-height: 1.12 !important;
      margin-bottom: 14px !important;
      word-wrap: break-word !important;
    }
    .hero-video-sub {
      font-size: 0.92rem !important;
      line-height: 1.5 !important;
      margin-bottom: 22px !important;
      max-width: 340px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    .hero-bottom-fade {
      height: 60px !important;
    }
  }

  /* Section 03 — Operating Standards Mobile Adapter */
  .operating-standards-section { padding: 68px 0 60px; }
  .standards-header { margin-bottom: 32px; }
  .standard-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 20px 16px;
  }
  .standard-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .standard-index {
    font-size: 0.92rem;
    color: #059669;
  }
  .standard-title {
    font-size: 1.22rem;
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .standard-detail {
    font-size: 0.88rem;
    line-height: 1.5;
  }
  .standard-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0 0;
    border-top: 1px solid rgba(226, 232, 240, 0.7);
  }
  .standard-badge {
    font-size: 0.68rem;
    padding: 4px 9px;
  }
  .standard-preview-thumb { display: none; }
  .standard-arrow { font-size: 1.25rem; color: #059669; }

  /* Commercial Proof Moment Mobile Adapter */
  .commercial-proof-section { padding: 68px 0 56px; }
  .proof-moment-badge {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    padding: 5px 10px;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    box-sizing: border-box;
  }
  .proof-hero-figure { font-size: clamp(3rem, 13vw, 4.2rem); }
  .proof-hero-label {
    font-size: clamp(1.15rem, 5vw, 1.45rem);
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .proof-hero-lead { font-size: 0.94rem; line-height: 1.6; margin-bottom: 24px; }
  .proof-cta-cluster { flex-direction: column; width: 100%; gap: 12px; }
  .proof-cta-cluster .btn {
    width: 100%;
    min-height: 50px;
    padding: 14px 18px !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .proof-reassurance { margin-bottom: 36px; font-size: 0.78rem; gap: 4px 8px; }
  .proof-strip { grid-template-columns: 1fr; border-radius: 4px; }
  .proof-strip-col { border-right: none !important; border-bottom: 1px solid var(--border-rule); padding: 22px 18px; }
  .proof-strip-col:last-child { border-bottom: none; }

  /* Section 05 — Dispatch Operating System Mobile Adapter */
  .dispatch-system-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
    margin-bottom: 36px;
  }
  .dispatch-system-step {
    padding: 22px 18px;
  }
  .step-title {
    font-size: 1.45rem;
  }
  .step-action {
    font-size: 0.84rem;
  }
  .step-desc {
    font-size: 0.88rem;
    margin-bottom: 14px;
  }
  .step-telemetry {
    font-size: 0.72rem;
  }

  .dispatch-board-mockup {
    padding: 18px 14px;
  }
  .dispatch-board-mockup [style*="text-align: right"] {
    text-align: left !important;
  }
  .dispatch-board-mockup [style*="text-align: right"] .btn {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
  }

  /* Section 05 — Capabilities */
  #trusted-network [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  /* Section 06/07 — Equipment Storytelling */
  .equipment-story-item,
  .equipment-story-item.reverse {
    display: flex;
    flex-direction: column;
    padding: 36px 0;
    gap: 20px;
  }
  .equipment-story-item .equipment-story-content {
    order: 1;
  }
  .equipment-story-item .equipment-story-media {
    order: 2;
    width: 100%;
  }
  .equipment-story-frame {
    height: 230px !important;
    width: 100%;
    border-radius: 4px;
  }
  .equipment-story-item .photo-panel,
  .equipment-story-item [style*="height: 360px"] {
    height: 220px !important;
    width: 100%;
  }
  .equipment-story-title {
    font-size: 1.45rem;
    line-height: 1.25;
  }
  .equipment-story-desc {
    font-size: 0.94rem;
    line-height: 1.6;
    margin-bottom: 18px;
  }
  .equipment-specs-pills {
    margin-bottom: 22px;
    gap: 6px 8px;
  }
  .equipment-spec-pill {
    font-size: 0.74rem;
    padding: 5px 10px;
  }

  /* Section 08 — Vector Map */
  .map-graphic-box {
    padding: 16px 10px;
  }
  #corridorStatusCard {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    max-width: 100% !important;
    width: 100%;
    margin-top: 14px;
    box-sizing: border-box;
  }

  /* Section 06 — Core Capabilities Mobile */
  .capabilities-containment-grid,
  #trusted-network [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Section 09 — Tracking */
  .tracking-interface-box {
    padding: 18px 14px;
  }
  .subpoints-containment-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .timeline-milestone {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 0;
  }
  .tracking-interface-box div[style*="display: flex; justify-content: space-between"] {
    flex-direction: column;
    gap: 6px;
  }

  /* Section 10 — Testimonials */
  #testimonials [style*="grid-template-columns: repeat(3, 1fr)"],
  .testimonials-containment-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Section 11 — Final CTA */
  #get-started [style*="display: flex; gap: 16px"],
  .deep-gravity-cta [style*="display: flex; gap: 16px"] {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  #get-started .btn,
  .deep-gravity-cta .btn {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #get-started [style*="display: flex; justify-content: center; gap: 32px"],
  .deep-gravity-cta .meta-strip {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* === Pattern Epsilon: Mobile Card Elevation Enclosure === */
  .containment-card,
  .standards-containment-frame,
  .proof-metric-stage-card,
  .capability-card-containment,
  .testimonial-card-containment,
  .subpoints-containment-card,
  .lifecycle-card,
  .audience-card,
  .vetting-card,
  .capacity-card,
  .dispatch-workflow-card,
  .equipment-card,
  .defense-card,
  .faq-card,
  .bento-card,
  .team-card,
  .citation-defense-card,
  .pillar-card,
  .case-type-card,
  .pricing-plan-card,
  .zero-risk-card,
  .logistics-pipeline-card,
  .corridor-terminal-card,
  .card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  }

  /* === Pattern Epsilon: Universal Mobile Button Ergonomics (100% Centered & 48px Min-Height) === */
  .btn:not(.btn-sm):not(.btn-lane):not(.map-corridor-badge):not(.portal-tab-btn):not(.intent-tab-btn):not(.violation-pill-btn),
  .btn-primary:not(.btn-sm),
  .btn-secondary:not(.btn-sm),
  .btn-secondary-video:not(.btn-sm),
  .btn-outline:not(.btn-sm),
  .btn-lg,
  .btn-md {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Multi-button CTA clusters on mobile */
  .proof-cta-cluster,
  .hero-video-content > div[style*="display: flex; gap: 16px"],
  .conversion-split-grid .split-col-shipper > div[style*="display: flex"],
  .conversion-split-grid .split-col-carrier > div[style*="display: flex"] {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  /* Preserve small auxiliary chips */
  .btn-sm,
  .btn-lane,
  .map-corridor-badge,
  .portal-tab-btn,
  .intent-tab-btn,
  .violation-pill-btn {
    width: auto !important;
    min-height: 36px !important;
    display: inline-flex !important;
  }

  /* Section 12 — Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }

  /* Inner Pages Hero Scaling */
  [style*="padding-top: 130px"] {
    padding-top: 84px !important;
    padding-bottom: 40px !important;
  }
  .photo-panel {
    height: 240px !important;
  }

  /* Dispatch Carrier Conversion Mobile Adapters */
  .dispatch-workflow-grid { grid-template-columns: 1fr; gap: 16px; }
  .fee-columns-split { grid-template-columns: 1fr; gap: 20px; }
  .fee-breakdown-box { padding: 24px 18px; }
  .fee-example-card { padding: 24px 18px; }
  .dispatch-equip-grid { grid-template-columns: 1fr; gap: 16px; }
  .protocol-grid { grid-template-columns: 1fr; gap: 14px; }
  .carrier-faq-answer { padding-left: 0; margin-top: 8px; }
  .carrier-conversion-box { padding: 40px 20px; }
  .carrier-conversion-box .cta-actions { flex-direction: column; width: 100%; }
  .carrier-conversion-box .cta-actions .btn { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; }
  .dispatch-hero-meta { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Brokerage Bifurcated Network Mobile Adapters */
  .audience-selector-grid { grid-template-columns: 1fr; gap: 20px; }
  .audience-card { padding: 26px 20px; }
  .lifecycle-grid { grid-template-columns: 1fr; gap: 14px; }
  .vetting-standards-grid { grid-template-columns: 1fr; gap: 16px; }
  .capacity-corridors-grid { grid-template-columns: 1fr; gap: 14px; }
  .conversion-split-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .split-col-shipper { border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; padding-right: 0 !important; padding-bottom: 32px !important; }

  /* DataQ Compliance Engine Mobile Adapters */
  .dataq-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .dataq-hero-preview-card { margin-top: 12px; }
  .diagnostic-engine-box { padding: 22px 16px; }
  .checklist-grid { grid-template-columns: 1fr; gap: 14px; }
  .diag-top-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .diagnostic-result-card { padding: 20px 16px; }
  .violation-pill-btn { font-size: 0.8rem; padding: 7px 12px; }
  .zero-risk-card { flex-direction: column; align-items: flex-start; padding: 22px 18px; gap: 18px; }
  .zero-risk-card .btn { width: 100%; display: flex; justify-content: center; }

  /* CSA Carrier Defense Mobile Adapters */
  .time-decay-grid { grid-template-columns: 1fr; gap: 14px; }
  .time-decay-card { padding: 20px 16px; }
  .csa-threshold-box { padding: 20px 16px; flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Driver PSP vs MVR Mobile Adapters */
  .psp-vs-mvr-box { grid-template-columns: 1fr; }
  .psp-record-col { border-right: none; border-bottom: 1px solid var(--border-rule); padding: 24px 18px; }
  .mvr-record-col { padding: 24px 18px; }

  /* Contact Dynamic Intent Mobile Adapters */
  .intent-tabs-container { gap: 6px; }
  .intent-tab-btn { font-size: 0.76rem; padding: 6px 10px; flex: 1 1 calc(50% - 6px); text-align: center; }
  .intent-context-banner { padding: 10px 12px; font-size: 0.82rem; }

  /* 21st.dev Bento, Team & HUD Mobile Adapters */
  .team-bento-grid { grid-template-columns: 1fr; gap: 18px; }
  .hud-route-display { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  .hud-route-vector { margin: 8px 0; }
  .hud-milestones-row { grid-template-columns: 1fr; text-align: left; gap: 10px; }
  .hud-milestone-step { display: flex; align-items: center; gap: 12px; text-align: left; }
  .hud-step-bullet { margin: 0; flex-shrink: 0; }
  .hud-telemetry-strip { grid-template-columns: 1fr; gap: 10px; }

  /* Hanging Container Mobile Overrides — Sits ALONG text on the right side */
  .hero-hanging-layout {
    position: relative;
    display: block;
  }
  .hero-hanging-text {
    max-width: 100%;
    position: relative;
    z-index: 2;
  }
  .hero-hanging-text h1 {
    font-size: clamp(1.65rem, 6.5vw, 2.1rem) !important;
    max-width: 58% !important;
    margin-bottom: 14px !important;
    line-height: 1.15 !important;
  }
  .hero-hanging-text p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    max-width: 54% !important;
    margin-bottom: 22px !important;
  }
  .hero-hanging-visual {
    position: absolute;
    top: 110px;
    right: -6px;
    width: 148px;
    z-index: 3;
    pointer-events: none;
    margin: 0;
    display: block;
  }
  .hanging-container-assembly {
    width: 148px;
    max-width: 148px;
  }
  .crane-cable-line {
    top: -260px;
    height: 270px;
  }
  .protocol-conduit-svg { display: none; }
  .protocol-card { position: relative; }
  .protocol-card:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 16px;
    background: linear-gradient(to bottom, #FF5500, rgba(255, 85, 0, 0.2));
    z-index: 3;
    animation: veinPulseVertical 1.5s infinite;
  }
  @keyframes veinPulseVertical {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; filter: drop-shadow(0 0 4px #FF5500); }
  }
}

/* ── Small Mobile Overrides (<= 480px) ── */
@media (max-width: 480px) {
  h1 {
    font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
    line-height: 1.15 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  .hero-buttons { flex-direction: column; width: 100%; }
  .hero-buttons .btn { width: 100%; }
  .card, .form-card, .service-card { padding: 20px 16px; }
  .portal-tabs {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .portal-tab-btn {
    font-size: 0.72rem !important;
    padding: 8px 4px !important;
  }
  .tracking-subpoints-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .hero-hanging-text h1 {
    font-size: clamp(1.45rem, 5.8vw, 1.8rem) !important;
    max-width: 58% !important;
  }
  .hero-hanging-text p {
    max-width: 54% !important;
    font-size: 0.82rem !important;
  }
  .hero-hanging-visual {
    top: 115px !important;
    right: -6px !important;
    width: 144px !important;
  }
  .hanging-container-assembly {
    width: 144px !important;
    max-width: 144px !important;
  }
  .crane-cable-line {
    top: -270px !important;
    height: 280px !important;
  }
  .equip-blueprint-watermark { width: 170px; height: 95px; right: -10px; bottom: -10px; }
}

/* ── Extra Small Mobile (<= 360px) ── */
@media (max-width: 360px) {
  .container { padding: 0 12px; }
  .hero-dispatch-container { padding: 90px 12px 48px; }
  .hero-dispatch-title { font-size: 2rem; }
  .map-corridor-badge { font-size: 0.75rem; padding: 6px 10px; }
  .hero-hanging-text h1 { max-width: 56% !important; font-size: 1.35rem !important; }
  .hero-hanging-text p { max-width: 52% !important; font-size: 0.78rem !important; }
  .hero-hanging-visual { width: 120px !important; top: 105px !important; right: -4px !important; }
  .hanging-container-assembly { width: 120px !important; max-width: 120px !important; }
  .crane-cable-line { top: -250px !important; height: 260px !important; }
}

/* ── DataQ Page Hero Hanging Container Integration ── */
.dataq-card-container-preview {
  height: 200px;
  background: radial-gradient(circle at 50% 60%, rgba(255, 85, 0, 0.08), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-rule);
}
@media (min-width: 769px) {
  .dataq-hero-grid .hero-hanging-layout { display: block !important; }
  .dataq-hero-grid .hero-hanging-visual { display: none !important; }
}
@media (max-width: 768px) {
  .dataq-card-container-preview { display: none !important; }
}

/* ================================================================
   MOBILE VERTICAL BRAND ELEVATOR RAIL (OPTION B HUD)
/* ================================================================
   ARCHITECTURAL LINE CRAWLER HUD (MINIMALIST TICK LINES)
   Simple horizontal lines. Press & hold / hover to view all pages.
   Universal across Desktop and Mobile with active chromatic glow.
   ================================================================ */

/* Universal Chromatic Tokens */
body, body.theme-orange {
  --crawler-accent: #FF5500;
  --crawler-glow:   rgba(255, 85, 0, 0.5);
}
body.theme-emerald {
  --crawler-accent: #059669;
  --crawler-glow:   rgba(5, 150, 105, 0.5);
}
body.theme-amber {
  --crawler-accent: #D97706;
  --crawler-glow:   rgba(217, 119, 6, 0.5);
}
body.theme-sapphire {
  --crawler-accent: #2563EB;
  --crawler-glow:   rgba(37, 99, 235, 0.5);
}
body.theme-teal {
  --crawler-accent: #0D9488;
  --crawler-glow:   rgba(13, 148, 136, 0.5);
}

/* Site Crawler Component */
#site-crawler {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9995;
  user-select: none;
  -webkit-user-select: none;
}

.crawler-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Clean Minimalist Line Track (The User's Drawn Lines) */
.crawler-lines-track {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  padding: 10px 5px;
  background: rgba(10, 13, 18, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  touch-action: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.crawler-lines-track:hover,
#site-crawler.crawler-open .crawler-lines-track {
  background: rgba(10, 13, 18, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

/* Individual Tick Lines */
.crawler-tick {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2px 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tick-bar {
  display: block;
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.38);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active Page Line (Longer + Glowing in Theme Color) */
.crawler-tick.active .tick-bar {
  width: 24px;
  height: 3.5px;
  background: var(--crawler-accent, #FF5500);
  box-shadow: 0 0 10px var(--crawler-glow, rgba(255, 85, 0, 0.5));
}

/* Hovered / Scrubbed State */
.crawler-tick.hovered .tick-bar,
.crawler-tick:hover .tick-bar {
  width: 22px;
  background: #FFFFFF;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Page Directory Peek Drawer (Opens on Press & Hold / Hover) */
.crawler-drawer {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(14px);
  width: 240px;
  background: rgba(10, 13, 18, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 10px 8px 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

#site-crawler:hover .crawler-drawer,
#site-crawler.crawler-open .crawler-drawer {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Drawer Header */
.crawler-drawer-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}

.drawer-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crawler-accent, #FF5500);
  box-shadow: 0 0 6px var(--crawler-glow);
}

.drawer-status-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

/* Drawer Links */
.crawler-drawer-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
}

.drawer-line-indicator {
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  transition: all 0.15s ease;
}

.drawer-page-num {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748B;
  width: 16px;
  line-height: 1;
}

.drawer-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drawer-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #E2E8F0;
  line-height: 1.2;
}

.drawer-desc {
  font-size: 0.62rem;
  color: #94A3B8;
  line-height: 1.2;
  margin-top: 1px;
}

/* Hover / Active Link Hierarchy */
.drawer-link:hover,
.drawer-link.hovered,
.drawer-link.active {
  background: rgba(255, 255, 255, 0.07);
  border-left-color: var(--crawler-accent, #FF5500);
}

.drawer-link:hover .drawer-line-indicator,
.drawer-link.hovered .drawer-line-indicator,
.drawer-link.active .drawer-line-indicator {
  background: var(--crawler-accent, #FF5500);
  height: 18px;
  box-shadow: 0 0 6px var(--crawler-glow);
}

.drawer-link:hover .drawer-page-num,
.drawer-link.hovered .drawer-page-num,
.drawer-link.active .drawer-page-num {
  color: var(--crawler-accent, #FF5500);
  font-weight: 800;
}

.drawer-link:hover .drawer-title,
.drawer-link.hovered .drawer-title,
.drawer-link.active .drawer-title {
  color: #FFFFFF;
}

/* Mobile Viewport Adaptation */
@media (max-width: 768px) {
  #site-crawler {
    right: 8px;
  }
  .crawler-drawer {
    width: 215px;
    right: calc(100% + 10px);
  }
  .editorial-tag .tag-dot {
    background-color: var(--crawler-accent, #FF5500) !important;
    box-shadow: 0 0 6px var(--crawler-glow) !important;
  }
}

/* ========================================================
   $1B COMPREHENSIVE DESIGN OVERHAUL STYLES
   ======================================================== */

/* Hero Social Proof Trust Badge */
.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(10, 14, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 18px;
  border-radius: 9999px;
  margin: 0 auto 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}
.hero-trust-badge:hover {
  border-color: rgba(255, 85, 0, 0.6);
  box-shadow: 0 4px 24px rgba(255, 85, 0, 0.3);
}
.hero-trust-stars {
  color: #FBBF24;
  letter-spacing: 2px;
  font-size: 0.84rem;
}
.hero-trust-count {
  font-weight: 800;
  color: #FFFFFF;
}

/* Carrier Operating Standards Bento Grid (21st.dev Logistics Architecture) */
.standards-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.standards-bento-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.standards-bento-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -4px rgba(10, 13, 18, 0.1);
  border-color: #CBD5E1;
}
.standards-bento-card-featured {
  grid-column: span 2;
}
.standards-card-visual {
  position: relative;
  width: 100%;
  height: 180px;
  background: #0A0D12;
  overflow: hidden;
}
.standards-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.standards-bento-card:hover .standards-card-visual img {
  transform: scale(1.04);
}
.standards-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 13, 18, 0.85) 0%, rgba(10, 13, 18, 0.2) 60%, transparent 100%);
  pointer-events: none;
}
.standards-badge-pill {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #34D399;
  background: rgba(10, 13, 18, 0.85);
  border: 1px solid rgba(5, 150, 105, 0.4);
  padding: 4px 10px;
  border-radius: 4px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.standards-badge-pill.orange {
  color: #FF5500;
  border-color: rgba(255, 85, 0, 0.4);
}
.standards-badge-pill .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
}
.standards-card-body {
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.standards-card-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-headline);
  margin-bottom: 10px;
}
.standards-card-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-body);
  margin-bottom: 16px;
  flex-grow: 1;
}
.standards-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border-rule);
  padding-top: 14px;
}
.standards-feature-list li {
  font-size: 0.84rem;
  color: var(--text-headline);
  display: flex;
  align-items: center;
  gap: 8px;
}
.standards-feature-list .check-icon {
  color: #059669;
  font-weight: 800;
}

/* Radar Telemetry for Corridor Map */
.radar-ping {
  animation: radarPingAnimation 2.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  transform-origin: center;
}
@keyframes radarPingAnimation {
  0% { r: 5px; opacity: 0.9; }
  70% { r: 18px; opacity: 0.2; }
  100% { r: 24px; opacity: 0; }
}
.map-status-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.map-status-item {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  padding: 5px 12px;
  border-radius: 4px;
}
.map-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #059669;
}

/* Premium Carrier Testimonials */
.testimonial-stars {
  color: #FBBF24;
  font-size: 0.88rem;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.testimonial-card-containment {
  background: #FFFFFF !important;
  border: 1px solid var(--border-rule) !important;
  border-radius: 8px !important;
  padding: 30px 26px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

/* About Page Executive Governance Card */
.governance-card {
  background: #FFFFFF;
  border: 1px solid var(--border-rule);
  border-radius: 8px;
  padding: 36px 32px;
  box-shadow: 0 4px 20px -2px rgba(10, 13, 18, 0.05);
}
.gov-badge-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.gov-badge-pill {
  font-family: 'DM Sans', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0A0D12;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  padding: 4px 10px;
  border-radius: 4px;
}
.gov-info-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-rule);
}
.gov-info-row:last-child {
  border-bottom: none;
}
.gov-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.2);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.gov-info-content strong {
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.gov-info-content span {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-headline);
}

/* Intermediate section divider */

/* ==========================================================================
   21st.dev Testimonials Columns Component (@efferd/testimonials-columns-1)
   ========================================================================== */
.testimonials-21st-section {
  padding: 104px 0 110px;
  background-color: #FAFAFA;
  position: relative;
  overflow: hidden;
}

.testimonials-21st-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 52px;
}

.testimonials-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  font-size: 0.82rem;
  font-weight: 600;
  color: #0F172A;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}

.testimonials-21st-header h2 {
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0A0D12;
  margin: 0 0 12px;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.testimonials-21st-header p {
  font-size: 1.05rem;
  color: #64748B;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 520px;
}

/* Drifting Marquee Viewport Window */
.testimonials-columns-window {
  position: relative;
  height: 640px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, transparent 100%);
}

.testimonials-columns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  height: 100%;
}

.testimonials-col-track {
  display: flex;
  flex-direction: column;
  gap: 24px;
  will-change: transform;
}

.testimonials-col-track.col-speed-1 {
  animation: marqueeVertical 36s linear infinite;
}

.testimonials-col-track.col-speed-2 {
  animation: marqueeVertical 48s linear infinite;
}

.testimonials-col-track.col-speed-3 {
  animation: marqueeVertical 40s linear infinite;
}

.testimonials-columns-window:hover .testimonials-col-track {
  animation-play-state: paused;
}

@keyframes marqueeVertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

/* Individual Testimonial Card */
.testimonial-21st-card {
  background: #FFFFFF;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  user-select: none;
}

.testimonial-21st-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.1);
  border-color: rgba(15, 23, 42, 0.14);
}

.testimonial-21st-quote {
  font-size: 0.93rem;
  line-height: 1.62;
  color: #334155;
  margin-bottom: 22px;
  font-weight: 400;
}

.testimonial-21st-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-21st-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid #F1F5F9;
}

.testimonial-21st-meta {
  display: flex;
  flex-direction: column;
}

.testimonial-21st-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.25;
}

.testimonial-21st-handle {
  font-size: 0.8rem;
  color: #64748B;
  margin-top: 2px;
  line-height: 1.2;
}

@media (max-width: 992px) {
  .testimonials-columns-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .testimonials-columns-grid .col-speed-3 {
    display: none;
  }
}

/* ==========================================================================
   2-Column Modern SaaS Sign-In Template (DriveDataQ Executive Authentication)
   ========================================================================== */
.signin-page-section {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 130px 24px 80px;
  background-color: #FFFFFF;
}

.signin-container-card {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Left Column: The Form */
.signin-form-col {
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
}

.signin-header {
  margin-bottom: 28px;
}

.signin-header h1 {
  font-size: clamp(2.1rem, 3.4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #0A0D12;
  margin: 0 0 10px;
  line-height: 1.15;
}

.signin-header p {
  font-size: 0.95rem;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
}

/* Role Selector Segmented Control */
.signin-role-segmented {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: #F1F5F9;
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 24px;
}

.signin-role-btn {
  background: transparent;
  color: #64748B;
  border: none;
  padding: 8px 4px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 7px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  font-family: inherit;
}

.signin-role-btn.active {
  background: #0F172A;
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

/* Form Groups */
.signin-field-group {
  margin-bottom: 18px;
}

.signin-field-label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}

.signin-input-wrapper {
  position: relative;
  width: 100%;
}

.signin-input {
  width: 100%;
  background-color: #F1F5F9;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 0.94rem;
  color: #0F172A;
  transition: all 0.2s ease;
  font-family: inherit;
  box-sizing: border-box;
}

.signin-input:focus {
  outline: none;
  background-color: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
}

.signin-input::placeholder {
  color: #94A3B8;
}

.signin-password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #64748B;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.signin-password-toggle:hover {
  color: #0F172A;
}

/* Utility Row (Remember me + Reset password) */
.signin-utility-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0 22px;
}

.signin-remember-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: #334155;
  cursor: pointer;
  user-select: none;
}

.signin-remember-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #CBD5E1;
  accent-color: #0F172A;
  cursor: pointer;
}

.signin-reset-link {
  font-size: 0.86rem;
  font-weight: 600;
  color: #6366F1;
  text-decoration: none;
  transition: color 0.15s ease;
}

.signin-reset-link:hover {
  color: #4F46E5;
  text-decoration: underline;
}

/* Submit Button */
.signin-btn-primary {
  width: 100%;
  height: 48px;
  background: #0F172A;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 6px rgba(15, 23, 42, 0.12);
  user-select: none;
}

.signin-btn-primary:hover {
  background: #1E293B;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1.5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 20px rgba(15, 23, 42, 0.22);
}

.signin-btn-primary:active {
  transform: translateY(0.5px) scale(0.99);
  background: #0A0D12;
}

/* Divider */
.signin-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  color: #94A3B8;
  font-size: 0.8rem;
  font-weight: 500;
}

.signin-divider::before,
.signin-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #E2E8F0;
}

.signin-divider span {
  padding: 0 14px;
}

/* Google Social Button */
.signin-btn-google {
  width: 100%;
  height: 48px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  color: #1E293B;
  font-size: 0.92rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  user-select: none;
}

.signin-btn-google:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}

.signin-btn-google:active {
  transform: translateY(0.5px) scale(0.99);
  background: #F1F5F9;
}

/* Footer Link */
.signin-footer-row {
  margin-top: 24px;
  text-align: center;
  font-size: 0.88rem;
  color: #64748B;
}

.signin-footer-row a {
  color: #6366F1;
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
}

.signin-footer-row a:hover {
  color: #4F46E5;
  text-decoration: underline;
}

/* Right Column: Visual Showcase */
.signin-visual-col {
  position: relative;
  width: 100%;
  height: 600px;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.2);
}

.signin-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.signin-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.1) 40%, transparent 100%);
  pointer-events: none;
}

/* Floating Glassmorphic Testimonial Card */
.signin-glass-card {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.signin-glass-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.signin-glass-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.signin-glass-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
}

.signin-glass-handle {
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.2;
}

.signin-glass-quote {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #1E293B;
  font-weight: 500;
  margin: 0;
}

/* Registration Template Architecture */
.register-page-section {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 130px 24px 80px;
  background-color: #FFFFFF;
}

.register-container-card {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: flex-start;
}

.register-form-col {
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
}

.register-visual-col {
  position: sticky;
  top: 100px;
  width: 100%;
  height: 640px;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.2);
}

.register-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.register-role-segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: #F1F5F9;
  padding: 5px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.register-role-btn {
  background: transparent;
  color: #64748B;
  border: none;
  padding: 10px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  font-family: inherit;
  letter-spacing: 0.02em;
}

.register-role-btn.active {
  background: #0F172A;
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.register-guarantee-badge {
  margin-top: 18px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 12px 16px;
  border-radius: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.register-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.register-perk-card {
  padding: 14px 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  text-align: center;
}

@media (max-width: 992px) {
  .signin-container-card,
  .register-container-card {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 520px;
  }
  .signin-visual-col,
  .register-visual-col {
    position: static;
    height: 420px;
    order: 2;
  }
}

/* ========================================================
   Mobile Responsiveness Overrides for Overhaul
   ======================================================== */
@media (max-width: 768px) {
  /* Standards Bento Mobile: single column */
  .standards-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .standards-bento-card-featured {
    grid-column: span 1 !important;
  }
  .standards-card-visual {
    height: 160px !important;
  }

  /* Dispatch Fee Ledger Mobile: 1 column */
  .fee-columns-split {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .fee-breakdown-box {
    padding: 22px 18px !important;
  }

  /* Audience Card on Brokerage Mobile */
  .audience-card {
    padding: 24px 18px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Contact Intent Tabs Mobile */
  .intent-tabs-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .intent-tab-btn {
    width: 100% !important;
    min-height: 46px !important;
    text-align: center !important;
    font-size: 0.84rem !important;
  }

  /* Timeline Mobile: 1 column */
  .lifecycle-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Testimonials Mobile: 1 column */
  .testimonials-containment-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* 21st.dev Testimonials Mobile */
  .testimonials-21st-section {
    padding: 72px 0 80px !important;
  }
  .testimonials-21st-header h2 {
    font-size: 1.6rem !important;
    padding: 0 4px !important;
    line-height: 1.2 !important;
  }
  .testimonials-columns-window {
    height: 520px !important;
  }
  .testimonials-columns-grid {
    grid-template-columns: 1fr !important;
    padding: 0 4px !important;
  }
  .testimonials-columns-grid .col-speed-2,
  .testimonials-columns-grid .col-speed-3 {
    display: none !important;
  }

  /* Layout Container Mobile */
  .container {
    padding: 0 16px !important;
  }

  /* Sign-In Template Mobile Overrides */
  .signin-page-section {
    padding-top: 100px !important;
    padding-bottom: 50px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .signin-container-card {
    grid-template-columns: 100% !important;
    gap: 32px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .signin-form-col {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .signin-header h1 {
    font-size: 1.85rem !important;
  }
  .signin-header p {
    font-size: 0.88rem !important;
  }
  .signin-role-segmented {
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 4px !important;
  }
  .signin-role-btn {
    font-size: 0.78rem !important;
    padding: 9px 4px !important;
  }
  .signin-input-wrapper {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .signin-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .signin-utility-row {
    font-size: 0.82rem !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  .signin-remember-label {
    font-size: 0.82rem !important;
  }
  .signin-reset-link {
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }
  .signin-btn-primary,
  .signin-btn-google {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .signin-visual-col {
    height: 320px !important;
    border-radius: 20px !important;
    order: 2 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .signin-glass-card {
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }
  .signin-glass-quote {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }

  /* Register Template Mobile Overrides */
  .register-page-section {
    padding-top: 100px !important;
    padding-bottom: 50px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .register-container-card {
    grid-template-columns: 100% !important;
    gap: 32px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .register-form-col {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .register-grid-2 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .register-role-segmented {
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 4px !important;
  }
  .register-visual-col {
    height: 320px !important;
    border-radius: 20px !important;
    order: 2 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .register-perks-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Modern Footer Mobile Adaptation */
  .footer-modern-wrap {
    padding: 50px 0 32px !important;
  }
  .footer-modern-container {
    padding: 0 16px !important;
  }
  .footer-modern-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-modern-title {
    font-size: 1.85rem !important;
  }
  .footer-modern-desc {
    max-width: 100% !important;
  }
  .footer-modern-newsletter {
    max-width: 100% !important;
  }
  .footer-modern-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .footer-modern-legal {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .footer-fmcsa-micro {
    text-align: left !important;
  }

  /* Strict Viewport Overflow Protection */
  html, body {
    overflow-x: hidden !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
}

/* ========================================================
   ACETERNITY UI WORLD MAP COMPONENT ARCHITECTURE
   Programmatic Dotted Matrix, Animated Bezier Arcs & Radar Telemetry
   ======================================================== */
.world-map-section {
  padding: clamp(60px, 8vw, 120px) 0 !important;
  width: 100%;
  background: var(--bg-surface, #ffffff);
  position: relative;
  overflow: hidden;
}
.world-map-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.world-map-header {
  max-width: 760px;
  margin: 0 auto clamp(28px, 5vw, 48px);
  text-align: center;
  padding: 0 8px;
}
.world-map-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 4vw, 2.5rem);
  color: var(--text-headline, #0A0D12);
  line-height: 1.25;
  letter-spacing: -0.02em;
  word-break: break-word;
}
.world-map-title-stagger {
  color: #94A3B8;
  display: inline-block;
}
.world-map-title-stagger span {
  display: inline-block;
  opacity: 0;
  transform: translateX(-10px);
  animation: mapLetterReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--idx) * 0.04s);
}
@keyframes mapLetterReveal {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.world-map-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.875rem, 1.8vw, 1.08rem);
  color: var(--text-body, #64748B);
  max-width: 640px;
  margin: 16px auto 0;
  line-height: 1.65;
}

/* Map Canvas Box (Aceternity UI 2:1 Aspect Ratio) */
.world-map-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 2 / 1;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border-rule, #F1F5F9);
  box-shadow: 0 4px 30px rgba(15, 23, 42, 0.04);
}
.world-map-base-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  mask-image: linear-gradient(to bottom, transparent, white 10%, white 90%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, white 10%, white 90%, transparent);
  pointer-events: none;
  user-select: none;
  display: block;
}
.world-map-svg-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}

/* Bezier Arcs Entrance & Looping Glow */
.map-arc-base {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawMapArc 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes drawMapArc {
  to {
    stroke-dashoffset: 0;
  }
}
.map-arc-glow {
  stroke-dasharray: 0.15 1.5;
  stroke-dashoffset: 1.65;
  animation: flowMapGlow 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes flowMapGlow {
  0% { stroke-dashoffset: 1.65; opacity: 0; }
  15% { opacity: 0.95; }
  85% { opacity: 0.95; }
  100% { stroke-dashoffset: -0.15; opacity: 0; }
}

@media (max-width: 640px) {
  .world-map-container {
    padding: 0 16px;
  }
  .world-map-wrap {
    border-radius: 8px;
  }
}