/* ========================================
   EOS-CSS v6.0 Updated
   Table of Contents
======================================== */

/* 01. Design Tokens */
/* 02. Global Base */
/* 03. Layout / Wrappers */
/* 04. Shared Buttons */
/* 05. Shared Panels / Cards Foundation */
/* 06. Shared FAQ System */
/* 07. Shared Workflow System */

/* 08. Solutions Module */
/* 08.01 Solutions Wrapper */
/* 08.02 Solutions Section System */
/* 08.03 Solutions Typography */
/* 08.04 Solutions Hero */
/* 08.05 Hero Overlay Modifiers */
/* 08.06 Individual Solution Hero Panel */
/* 08.07 Solutions Buttons Skin */
/* 08.08 Two-Column Layout */
/* 08.09 Challenge Lists */
/* 08.10 Process Grid */
/* 08.11 Why EOS Cards */
/* 08.12 Stat Row */
/* 08.13 Orange CTA / Contact Intro */
/* 08.14 Optional Contact/Form Handoff Stability */
/* 08.15 Solutions Responsive Rules */

/* 09. Pillar Pages Module */
/* 09.01 Pillar Wrapper */
/* 09.02 Pillar Hero */
/* 09.03 Pillar Panels / Body Text */
/* 09.04 Learning List */
/* 09.05 Pillar Article Grid */
/* 09.06 Related Topics / Button Groups */
/* 09.07 Knowledge Guide Footer CTA */
/* 09.08 Pillar Responsive Rules */

/* 10. Article Pages Module */
/* 10.01 Article Wrapper / Shell */
/* 10.02 Article Intro Card */
/* 10.03 Article Jump Menu */
/* 10.04 Article Section Cards */
/* 10.05 Article Lists */
/* 10.06 Article Images / WordPress Blocks */
/* 10.07 Article Closing / Internal Link Notes */
/* 10.08 Article FAQ Layout Hook */
/* 10.09 Article Return / Next Guide Card */
/* 10.10 Article Responsive Rules */

/* 11. Location Pages Module */
/* 11.01 Location Wrapper */
/* 11.02 Location Hero */
/* 11.03 Location Buttons */
/* 11.04 Location Sections / Typography */
/* 11.05 Facility Snapshot Cards */
/* 11.06 Split Sections / Media Cards */
/* 11.07 State / Regional Coverage List */
/* 11.08 Access / Capability / Visibility Cards */
/* 11.09 Metric Cards */
/* 11.10 Team Cards */
/* 11.11 Gallery */
/* 11.12 Location Responsive Rules */

/* 12. About EOS Module */
/* 12.01 About Wrapper */
/* 12.02 About Hero */
/* 12.03 About Sections / Typography */
/* 12.04 Story Grid / Proof Panel */
/* 12.05 EOS Difference / Transform Cards */
/* 12.06 Operational Tour Cards */
/* 12.07 About Support Boxes */
/* 12.08 About Location Network Cards */
/* 12.09 Fulfillment Photo Band */
/* 12.10 About Related Knowledge CTA */
/* 12.11 About Workflow Embed */
/* 12.12 About Responsive Rules */

/* 13. Homepage Module */
/* 13.01 Homepage Wrapper */
/* 13.02 Homepage Hero */
/* 13.03 Homepage Section Helpers */
/* 13.04 Homepage Proof Band */
/* 13.05 Homepage Logistics Guides Preview */
/* 13.06 Homepage RSS / Industry Updates */
/* 13.07 Homepage Responsive Rules */

/* 14. Service Cards Module */
/* 14.01 Service Map Section */
/* 14.02 Service Card Grid */
/* 14.03 Front Face Content */
/* 14.04 Back Face Content */
/* 14.05 Non-Flip / Static Service Cards */
/* 14.06 Accessibility / Reduced Motion */
/* 14.07 Service Card Responsive Rules */

/* 15. Utilities */
/* 15.01 Width / Bleed Helpers */
/* 15.02 Text Helpers */
/* 15.03 Spacing Helpers */
/* 15.04 Media Helpers */
/* 15.05 Visibility Helpers */

/* 16. Legacy Elementor / Envato Support */
/* 16.01 Elementor / Theme Container Guardrails */
/* 16.02 Elementor Text / Widget Safety */
/* 16.03 WordPress Image Block Compatibility */
/* 16.04 Form Handoff Safety */
/* 16.05 Legacy Full-Width Compatibility */
/* 16.06 Safe Print Fallback */

/* ========================================
   EOS-CSS v6.0 Candidate
   Enterprise Order Solutions
   Clean Modular Rebuild

   Purpose:
   - Rebuild EOS-CSS as a cleaner, modular design system.
   - Preserve active EOS page layouts.
   - Reduce duplicate rules, inline fixes, and unnecessary !important usage.
   - Keep Elementor / Logio compatibility isolated and intentional.

   Primary active page families:
   - Solutions pages
   - Pillar pages
   - Article pages
   - Location pages
   - About EOS
   - Homepage / service cards

   Governance:
   - Scope EOS page styling under .eos-css whenever possible.
   - Avoid broad WordPress, Elementor, theme, or plugin selectors unless required.
   - Prefer reusable classes over inline styling.
   - Prefer stronger scoped selectors over !important.
   - Keep page-specific exceptions minimal and clearly labeled.
======================================== */


/* ========================================
   01. Design Tokens
   Source: EOS-CSS v5.4 Stable
======================================== */

.eos-css {
  --eos-blue: #0063B2;
  --eos-orange: #E35205;
  --eos-orange-dark: #C94704;
  --eos-teal: #2FA4A8;

  --eos-white: #FFFFFF;
  --eos-offwhite: #F5F7FA;
  --eos-bg: #F6F9FC;

  --eos-text: #1B2430;
  --eos-text-dark: #1D1D1D;
  --eos-muted: #546372;
  --eos-light-gray: #D6DDE5;
  --eos-mid-gray: #A9AFB7;

  --eos-line: #D9E2EC;
  --eos-line-soft: #EDF2F7;

  --eos-black: #111111;
  --eos-charcoal: #1B1B1B;
  --eos-panel: #202327;

  --eos-shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.08);
  --eos-shadow-strong: 0 16px 42px rgba(0, 0, 0, 0.22);

  --eos-radius-sm: 10px;
  --eos-radius: 18px;
  --eos-radius-lg: 22px;

  --eos-max-width: 100%;
  --eos-content-width: min(1720px, 96vw);
  --eos-navy-overlay: rgba(7, 35, 64, 0.62);

  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
  color: var(--eos-text);
}


/* ========================================
   02. Global Base
======================================== */

.eos-css,
.eos-css *,
.eos-css *::before,
.eos-css *::after {
  box-sizing: border-box;
}

.eos-css img {
  max-width: 100%;
  display: block;
}

.eos-css a {
  text-decoration: none;
}

.eos-css p {
  margin: 0 0 16px;
}

.eos-css h1,
.eos-css h2,
.eos-css h3,
.eos-css h4 {
  margin: 0 0 14px;
  line-height: 1.18;
}

.eos-css h1 {
  font-size: clamp(2.3rem, 4vw, 3.8rem);
  letter-spacing: -0.02em;
}

.eos-css h2 {
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
}

.eos-css h3 {
  font-size: 1.18rem;
}

.eos-css ul,
.eos-css ol {
  margin: 0 0 16px;
  padding-left: 20px;
}

.eos-css li {
  margin: 0 0 10px;
}


/* ========================================
   03. Layout / Wrappers
======================================== */

.eos-css .eos-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.eos-css .eos-section {
  margin: 0 0 58px;
}

.eos-css .eos-section-intro {
  max-width: 840px;
  color: var(--eos-muted);
}

@media (min-width: 768px) {
  .eos-css .eos-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1200px) {
  .eos-css .eos-wrap {
    max-width: var(--eos-content-width);
    padding-left: 32px;
    padding-right: 32px;
  }
}


/* ========================================
   04. Shared Buttons
======================================== */

.eos-css .eos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.eos-css .eos-btn-primary {
  background: var(--eos-blue);
  color: #ffffff;
}

.eos-css .eos-btn-primary:hover {
  background: #00579A;
  color: #ffffff;
  transform: translateY(-1px);
}

.eos-css .eos-btn-secondary {
  background: transparent;
  color: var(--eos-blue);
  border: 1px solid rgba(0, 99, 178, 0.22);
}

.eos-css .eos-btn-secondary:hover {
  border-color: var(--eos-orange);
  color: var(--eos-orange);
}

.eos-css .eos-button-row,
.eos-css .eos-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.eos-css .eos-button-group--stack {
  flex-direction: column;
  align-items: flex-start;
}


/* ========================================
   05. Shared Panels / Cards Foundation
======================================== */

.eos-css .eos-panel {
  background: var(--eos-white);
  border: 1px solid var(--eos-line-soft);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-soft);
  padding: 34px 34px 30px;
}

.eos-css .eos-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  background: var(--eos-white);
  border: 1px solid var(--eos-line);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-soft);
}

.eos-css .eos-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  padding: 22px 22px 24px;
}

.eos-css .eos-card-body p {
  margin: 0;
  color: var(--eos-muted);
}

.eos-css .eos-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 24px;
}

@media (max-width: 1100px) {
  .eos-css .eos-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .eos-css .eos-panel {
    padding: 24px 20px 22px;
  }

  .eos-css .eos-card-grid {
    grid-template-columns: 1fr;
  }
}


/* ========================================
   06. Shared FAQ System
   Goal: Allow articles and location pages to use FAQ styling
   without requiring an .eos-article wrapper.
======================================== */

.eos-css .eos-faq {
  margin-top: 2rem;
}

.eos-css .eos-faq details,
.eos-css details.eos-faq-item {
  margin-bottom: 12px;
  padding: 0 18px 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  color: #374151;
  line-height: 1.7;
}

.eos-css .eos-faq summary,
.eos-css details.eos-faq-item summary {
  list-style: none;
  cursor: pointer;
  margin: 0 -18px 16px;
  padding: 16px 18px;
  font-weight: 800;
  color: #ffffff;
  background: var(--eos-orange);
}

.eos-css .eos-faq summary::-webkit-details-marker,
.eos-css details.eos-faq-item summary::-webkit-details-marker {
  display: none;
}

.eos-css .eos-faq details[open] summary,
.eos-css details.eos-faq-item[open] summary {
  background: var(--eos-orange-dark);
}

.eos-css .eos-faq details > *:not(summary),
.eos-css details.eos-faq-item > *:not(summary) {
  margin: 0;
  padding: 0;
  color: inherit;
  line-height: inherit;
}


/* ========================================
   07. Shared Workflow System
   Used by:
   - Solutions Hub
   - Individual Solutions pages
   - About EOS workflow embed
   - Location network cards
   - Location solutions workflow

   Rules:
   - Workflow section remains dark.
   - Cards are white by default.
   - Current card turns blue only when .is-current is present.
======================================== */

.eos-css .eos-solution-workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
  align-items: stretch;
}

.eos-css .eos-workflow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 290px;
  padding: 24px 18px 22px;
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  color: var(--eos-text-dark);
  font-size: 14px;
  line-height: 1.55;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.eos-css .eos-workflow-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
  border-color: rgba(0, 99, 178, 0.18);
}

.eos-css .eos-workflow-card::after {
  content: "";
  position: absolute;
  top: 34px;
  right: -9px;
  width: 18px;
  height: 2px;
  background: rgba(0, 99, 178, 0.22);
}

.eos-css .eos-workflow-card:last-child::after {
  display: none;
}

.eos-css .eos-workflow-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  background: #eaf3fb;
  border-radius: 999px;
  color: var(--eos-blue);
  font-size: 14px;
  font-weight: 800;
}

.eos-css .eos-workflow-label {
  margin-bottom: 8px;
  color: var(--eos-orange);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.eos-css .eos-workflow-card h3 {
  margin: 0 0 8px;
  color: var(--eos-text-dark);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
}

.eos-css .eos-workflow-card h3 a {
  color: inherit;
  text-decoration: none;
}

.eos-css .eos-workflow-card h3 a:hover {
  color: var(--eos-blue);
}

.eos-css .eos-workflow-card p {
  margin: 0;
  color: #111111;
  font-size: 14px;
  line-height: 1.55;
  flex: 1;
}

.eos-css .eos-workflow-card p + .eos-card-link,
.eos-css .eos-workflow-card p + .eos-workflow-status {
  margin-top: auto;
}

.eos-css .eos-workflow-card .eos-card-link,
.eos-css .eos-workflow-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 18px;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.eos-css .eos-workflow-card .eos-card-link {
  background: #ffffff;
  border: 1px solid rgba(0, 99, 178, 0.16);
  color: var(--eos-blue);
}

.eos-css .eos-workflow-card .eos-card-link:hover {
  background: #f5fafe;
  border-color: rgba(0, 99, 178, 0.28);
  color: #00579a;
}

.eos-css .eos-workflow-card.is-current {
  background: var(--eos-blue);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 36px rgba(0, 99, 178, 0.26);
  color: #ffffff;
}

.eos-css .eos-workflow-card.is-current .eos-workflow-step {
  background: #eaf3fb;
  color: var(--eos-blue);
}

.eos-css .eos-workflow-card.is-current .eos-workflow-label {
  color: var(--eos-orange);
}

.eos-css .eos-workflow-card.is-current h3,
.eos-css .eos-workflow-card.is-current h3 a,
.eos-css .eos-workflow-card.is-current p {
  color: #ffffff;
}

.eos-css .eos-workflow-card.is-current .eos-workflow-status {
  background: #eaf3fb;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: var(--eos-blue);
}

@media (max-width: 1024px) {
  .eos-css .eos-solution-workflow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eos-css .eos-workflow-card::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .eos-css .eos-solution-workflow {
    grid-template-columns: 1fr;
  }
}


/* ========================================
   08. Solutions Module
   Supports:
   - Solutions Hub
   - Individual Solutions Pages
   - Solutions hero
   - Hero jump panel
   - Challenge sections
   - Process grids
   - Why EOS cards
   - Stats
   - Orange CTA / contact intro sections

   Notes:
   - Shared workflow rules live in Section 07.
   - Shared button foundation lives in Section 04.
   - Shared card foundation lives in Section 05.
   - This module only adds Solutions-specific layout, color, and component behavior.
======================================== */


/* ----------------------------------------
   08.01 Solutions Wrapper
---------------------------------------- */

.eos-css.eos-solutions {
  margin: 0;
  background: var(--eos-black);
  color: var(--eos-white);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
}


/* ----------------------------------------
   08.02 Solutions Section System
---------------------------------------- */

.eos-css.eos-solutions .eos-section-block {
  padding: 76px 0;
}

.eos-css.eos-solutions .eos-section-dark {
  background: var(--eos-charcoal);
  color: var(--eos-white);
}

.eos-css.eos-solutions .eos-section-light {
  background: #f5f5f3;
  color: var(--eos-text-dark);
}

.eos-css.eos-solutions .eos-section-orange {
  background: linear-gradient(135deg, #d94c04, #f06a1d);
  color: var(--eos-white);
}


/* ----------------------------------------
   08.03 Solutions Typography
---------------------------------------- */

.eos-css.eos-solutions .eos-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  color: var(--eos-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.8px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-solutions .eos-eyebrow-light,
.eos-css.eos-solutions .eos-section-orange .eos-eyebrow {
  color: #ffffff;
}

.eos-css.eos-solutions .eos-heading {
  margin: 0 0 18px;
  color: inherit;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  font-weight: 800;
}

.eos-css.eos-solutions .eos-lead {
  max-width: 760px;
  margin: 0;
  color: #d1d5db;
  font-size: 18px;
  line-height: 1.7;
}

.eos-css.eos-solutions .eos-body {
  margin: 0;
  color: #d1d5db;
  font-size: 16px;
  line-height: 1.7;
}

.eos-css.eos-solutions .eos-section-light .eos-lead,
.eos-css.eos-solutions .eos-section-light .eos-body {
  color: #4d4d4d;
}

.eos-css.eos-solutions .eos-section-orange .eos-body,
.eos-css.eos-solutions .eos-section-orange .eos-lead {
  color: rgba(255, 255, 255, 0.92);
}

.eos-css.eos-solutions .eos-divider {
  width: 88px;
  height: 4px;
  margin: 0 0 22px;
  background: var(--eos-orange);
  border-radius: 999px;
}

.eos-css.eos-solutions .eos-section-orange .eos-divider {
  background: rgba(255, 255, 255, 0.72);
}


/* ----------------------------------------
   08.04 Solutions Hero
---------------------------------------- */

.eos-css.eos-solutions .eos-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 640px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  overflow: hidden;
}

.eos-css.eos-solutions .eos-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(7, 35, 64, 0.62),
    rgba(7, 35, 64, 0.62)
  );
  pointer-events: none;
}

.eos-css.eos-solutions .eos-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 34px;
  align-items: center;
}

.eos-css.eos-solutions .eos-hero-copy {
  padding: 88px 0;
}

.eos-css.eos-solutions .eos-hero-kicker {
  display: block;
  margin: 0 0 14px;
  color: #d8e8f6;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-solutions .eos-hero-title {
  max-width: 760px;
  margin: 0 0 14px;
  color: #ffffff;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.eos-css.eos-solutions .eos-hero-statement {
  margin: 0 0 20px;
  color: var(--eos-orange);
  font-size: clamp(22px, 2.7vw, 34px);
  line-height: 1.15;
  font-weight: 800;
}

.eos-css.eos-solutions .eos-hero-text {
  max-width: 760px;
  margin: 0;
  color: #e6e6e6;
  font-size: 18px;
  line-height: 1.7;
}


/* ----------------------------------------
   08.05 Hero Overlay Modifiers
   Optional image-specific readability classes.
---------------------------------------- */

.eos-css.eos-solutions .eos-hero.eos-hero-overlay-light::before {
  background: linear-gradient(
    rgba(7, 35, 64, 0.38),
    rgba(7, 35, 64, 0.62)
  );
}

.eos-css.eos-solutions .eos-hero.eos-hero-overlay-standard::before {
  background: linear-gradient(
    rgba(7, 35, 64, 0.62),
    rgba(7, 35, 64, 0.62)
  );
}

.eos-css.eos-solutions .eos-hero.eos-hero-overlay-strong::before {
  background: linear-gradient(
    rgba(7, 35, 64, 0.72),
    rgba(7, 35, 64, 0.78)
  );
}


/* ----------------------------------------
   08.06 Individual Solution Hero Panel
---------------------------------------- */

.eos-css.eos-solutions .eos-hero-panel {
  position: relative;
  z-index: 2;
  background: rgba(20, 20, 20, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--eos-radius);
  padding: 24px;
  box-shadow: var(--eos-shadow-strong);
  backdrop-filter: blur(6px);
}

.eos-css.eos-solutions .eos-hero-panel h3 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 800;
}

.eos-css.eos-solutions .eos-mini-links {
  display: grid;
  gap: 10px;
}

.eos-css.eos-solutions .eos-mini-link {
  display: block;
  padding: 13px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #ffffff;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.eos-css.eos-solutions .eos-mini-link:hover {
  background: rgba(227, 82, 5, 0.08);
  border-color: rgba(227, 82, 5, 0.55);
}

.eos-css.eos-solutions .eos-mini-link-primary {
  position: relative;
  background: rgba(227, 82, 5, 0.12);
  border-color: rgba(227, 82, 5, 0.45);
}

.eos-css.eos-solutions .eos-mini-link-primary::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--eos-orange);
  font-weight: 800;
}

.eos-css.eos-solutions .eos-mini-link span {
  display: block;
  margin-bottom: 4px;
  color: var(--eos-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  line-height: 1.3;
  text-transform: uppercase;
}

.eos-css.eos-solutions .eos-mini-link strong {
  display: block;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.35;
}


/* ----------------------------------------
   08.07 Solutions Buttons Skin
---------------------------------------- */

.eos-css.eos-solutions .eos-button-row,
.eos-css.eos-solutions .eos-cta-actions {
  margin-top: 28px;
}

.eos-css.eos-solutions .eos-btn-primary {
  background: var(--eos-orange);
  color: #ffffff;
}

.eos-css.eos-solutions .eos-btn-primary:hover {
  background: var(--eos-orange-dark);
  color: #ffffff;
  transform: translateY(-1px);
}

.eos-css.eos-solutions .eos-btn-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.eos-css.eos-solutions .eos-btn-secondary:hover {
  border-color: var(--eos-orange);
  color: var(--eos-orange);
}

.eos-css.eos-solutions .eos-section-light .eos-btn-secondary {
  border-color: rgba(17, 17, 17, 0.16);
  color: var(--eos-text-dark);
}


/* ----------------------------------------
   08.08 Two-Column Layout
---------------------------------------- */

.eos-css.eos-solutions .eos-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  align-items: start;
}


/* ----------------------------------------
   08.09 Challenge Lists
---------------------------------------- */

.eos-css.eos-solutions .eos-list {
  margin: 20px 0 0;
  padding-left: 20px;
  color: #d1d5db;
  font-size: 16px;
  line-height: 1.65;
}

.eos-css.eos-solutions .eos-list li {
  margin: 0 0 10px;
  color: inherit;
}

.eos-css.eos-solutions .eos-section-light .eos-list {
  color: #4d4d4d;
}

.eos-css.eos-solutions .eos-arrow-list {
  display: grid;
  gap: 12px;
}

.eos-css.eos-solutions .eos-arrow-item {
  margin: 0;
  color: #d1d5db;
  font-size: 16px;
  line-height: 1.65;
}

.eos-css.eos-solutions .eos-arrow-item strong,
.eos-css.eos-solutions .eos-list strong {
  color: #ffffff;
  font-weight: 800;
}

.eos-css.eos-solutions .eos-section-light .eos-arrow-item {
  color: #4d4d4d;
}

.eos-css.eos-solutions .eos-section-light .eos-arrow-item strong,
.eos-css.eos-solutions .eos-section-light .eos-list strong {
  color: var(--eos-text-dark);
}


/* ----------------------------------------
   08.10 Process Grid
---------------------------------------- */

.eos-css.eos-solutions .eos-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 34px;
}

.eos-css.eos-solutions .eos-process-step {
  padding: 24px;
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: 18px;
  box-shadow: var(--eos-shadow-soft);
  color: var(--eos-text-dark);
}

.eos-css.eos-solutions .eos-section-dark .eos-process-step {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--eos-shadow-strong);
  color: #ffffff;
}

.eos-css.eos-solutions .eos-process-step h3 {
  margin: 0 0 10px;
  color: inherit;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
}

.eos-css.eos-solutions .eos-process-step p {
  margin: 0;
  color: #4d4d4d;
  font-size: 15px;
  line-height: 1.65;
}

.eos-css.eos-solutions .eos-section-dark .eos-process-step p {
  color: #d1d5db;
}

.eos-css.eos-solutions .eos-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  background: #eaf3fb;
  border-radius: 999px;
  color: var(--eos-blue);
  font-size: 14px;
  font-weight: 900;
}


/* ----------------------------------------
   08.11 Why EOS Cards
---------------------------------------- */

.eos-css.eos-solutions .eos-card-grid {
  margin-top: 24px;
}

.eos-css.eos-solutions .eos-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--eos-shadow-strong);
}

.eos-css.eos-solutions .eos-section-light .eos-card {
  background: #ffffff;
  border-color: #d9e2ec;
  box-shadow: var(--eos-shadow-soft);
}

.eos-css.eos-solutions .eos-card-accent {
  height: 4px;
  width: 100%;
  background: var(--eos-orange);
  flex: 0 0 auto;
}

.eos-css.eos-solutions .eos-card h3 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
}

.eos-css.eos-solutions .eos-card p {
  margin: 0;
  color: #d1d5db;
  font-size: 15px;
  line-height: 1.65;
}

.eos-css.eos-solutions .eos-section-light .eos-card h3 {
  color: var(--eos-text-dark);
}

.eos-css.eos-solutions .eos-section-light .eos-card p {
  color: #4d4d4d;
}


/* ----------------------------------------
   08.12 Stat Row
---------------------------------------- */

.eos-css.eos-solutions .eos-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 34px;
}

.eos-css.eos-solutions .eos-stat {
  padding: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: var(--eos-shadow-strong);
  color: #d1d5db;
}

.eos-css.eos-solutions .eos-section-light .eos-stat {
  background: #ffffff;
  border-color: #d9e2ec;
  box-shadow: var(--eos-shadow-soft);
  color: #4d4d4d;
}

.eos-css.eos-solutions .eos-stat strong {
  display: block;
  margin-bottom: 8px;
  color: var(--eos-orange);
  font-size: 28px;
  line-height: 1.05;
  font-weight: 900;
}

.eos-css.eos-solutions .eos-stat p,
.eos-css.eos-solutions .eos-stat span {
  display: block;
  margin: 0;
  color: inherit;
  font-size: 14px;
  line-height: 1.6;
}


/* ----------------------------------------
   08.13 Orange CTA / Contact Intro
---------------------------------------- */

.eos-css.eos-solutions .eos-cta-box {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 42px;
  align-items: center;
  padding: 42px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
}

.eos-css.eos-solutions .eos-cta-box-single {
  grid-template-columns: 1fr;
}

.eos-css.eos-solutions .eos-section-orange .eos-cta-box {
  color: #ffffff;
}

.eos-css.eos-solutions .eos-section-orange .eos-cta-box .eos-body {
  color: rgba(255, 255, 255, 0.92);
}

.eos-css.eos-solutions .eos-section-orange .eos-cta-box .eos-btn-primary {
  background: #111111;
  color: #ffffff;
}

.eos-css.eos-solutions .eos-section-orange .eos-cta-box .eos-btn-primary:hover {
  background: #000000;
  color: #ffffff;
}

.eos-css.eos-solutions .eos-form-intro {
  max-width: 920px;
  color: rgba(255, 255, 255, 0.92);
}


/* ----------------------------------------
   08.14 Optional Contact/Form Handoff Stability
   Use only when an EOS orange intro section
   hands off to a separate Elementor form below.
---------------------------------------- */

.eos-css.eos-solutions .eos-contact-transition {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(135deg, #d94c04, #f06a1d);
  color: #ffffff;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.eos-css.eos-solutions .eos-contact-box {
  position: relative;
  z-index: 3;
  grid-template-columns: 1fr;
}

.eos-css.eos-solutions .eos-contact-eyebrow {
  color: #ffffff;
}

.eos-css.eos-solutions .eos-contact-transition .eos-body {
  color: rgba(255, 255, 255, 0.92);
}


/* ----------------------------------------
   08.15 Solutions Responsive Rules
---------------------------------------- */

@media (min-width: 1200px) {
  .eos-css.eos-solutions .eos-full-width {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .eos-css.eos-solutions .eos-full-width .eos-wrap {
    max-width: var(--eos-content-width);
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 1024px) {
  .eos-css.eos-solutions .eos-hero-grid,
  .eos-css.eos-solutions .eos-two-col,
  .eos-css.eos-solutions .eos-process-grid,
  .eos-css.eos-solutions .eos-card-grid,
  .eos-css.eos-solutions .eos-stat-row,
  .eos-css.eos-solutions .eos-cta-box {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .eos-css.eos-solutions .eos-section-block {
    padding: 56px 0;
  }

  .eos-css.eos-solutions .eos-hero {
    min-height: auto;
  }

  .eos-css.eos-solutions .eos-hero-copy {
    padding: 64px 0 24px;
  }

  .eos-css.eos-solutions .eos-hero-panel {
    margin-bottom: 40px;
    backdrop-filter: none;
  }

  .eos-css.eos-solutions .eos-hero-grid,
  .eos-css.eos-solutions .eos-two-col,
  .eos-css.eos-solutions .eos-process-grid,
  .eos-css.eos-solutions .eos-card-grid,
  .eos-css.eos-solutions .eos-stat-row,
  .eos-css.eos-solutions .eos-cta-box {
    grid-template-columns: 1fr;
  }

  .eos-css.eos-solutions .eos-process-step,
  .eos-css.eos-solutions .eos-stat,
  .eos-css.eos-solutions .eos-card-body,
  .eos-css.eos-solutions .eos-cta-box {
    padding: 22px 20px;
  }

  .eos-css.eos-solutions .eos-cta-actions .eos-btn,
  .eos-css.eos-solutions .eos-button-row .eos-btn {
    width: 100%;
  }

  .eos-css.eos-solutions .eos-contact-transition {
    min-height: 260px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
}


/* ========================================
   09. Pillar Pages Module
   Supports:
   - Logistics Guide pillar pages
   - Pillar hero
   - Intro / learning panels
   - Article card grids
   - Related topic buttons
   - Related solution panels
   - Knowledge Guide footer CTA

   Notes:
   - Pillar pages were confirmed uniform across early and newer examples.
   - This module keeps the existing .eos-css.eos-pillar system.
   - Shared .eos-wrap, .eos-panel, .eos-btn, and .eos-button-group foundations live above.
======================================== */


/* ----------------------------------------
   09.01 Pillar Wrapper
---------------------------------------- */

.eos-css.eos-pillar {
  background: var(--eos-bg);
  color: var(--eos-text);
}

.eos-css.eos-pillar .eos-page-wrap {
  padding: 46px 0 0;
}


/* ----------------------------------------
   09.02 Pillar Hero
---------------------------------------- */

.eos-css.eos-pillar .eos-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  overflow: hidden;
}

.eos-css.eos-pillar .eos-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(7, 35, 64, 0.64),
    rgba(7, 35, 64, 0.72)
  );
  pointer-events: none;
}

.eos-css.eos-pillar .eos-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--eos-content-width);
  margin: 0 auto;
  padding: 88px 32px;
}

.eos-css.eos-pillar .eos-hero-eyebrow {
  margin: 0 0 12px;
  color: #d8e8f6;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eos-css.eos-pillar .eos-hero h1 {
  max-width: 920px;
  margin: 0 0 16px;
  color: #ffffff;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.eos-css.eos-pillar .eos-hero-subtitle {
  max-width: 820px;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 19px;
  line-height: 1.7;
}


/* ----------------------------------------
   09.03 Pillar Panels / Body Text
---------------------------------------- */

.eos-css.eos-pillar .eos-panel {
  color: var(--eos-muted);
  font-size: 16px;
  line-height: 1.75;
}

.eos-css.eos-pillar .eos-panel h2 {
  margin: 0 0 14px;
  color: var(--eos-text);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
  font-weight: 900;
}

.eos-css.eos-pillar .eos-section-intro {
  margin: 0 0 20px;
  max-width: 920px;
  color: var(--eos-muted);
  font-size: 16px;
  line-height: 1.7;
}

.eos-css.eos-pillar .eos-section-intro-spaced {
  margin-top: 22px;
}


/* ----------------------------------------
   09.04 Learning List
---------------------------------------- */

.eos-css.eos-pillar .eos-learn-list {
  margin: 18px 0 0;
  padding-left: 22px;
}

.eos-css.eos-pillar .eos-learn-list li {
  margin: 0 0 12px;
  color: var(--eos-muted);
  line-height: 1.7;
}

.eos-css.eos-pillar .eos-learn-list li strong {
  color: #243243;
  font-weight: 800;
}


/* ----------------------------------------
   09.05 Pillar Article Grid
---------------------------------------- */

.eos-css.eos-pillar .eos-article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 24px;
}

.eos-css.eos-pillar .eos-article-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  background: var(--eos-white);
  border: 1px solid var(--eos-line);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-soft);
}

.eos-css.eos-pillar .eos-article-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  background: #edf4fa;
  overflow: hidden;
}

.eos-css.eos-pillar .eos-article-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.eos-css.eos-pillar .eos-article-card:hover .eos-article-card-media img {
  transform: scale(1.03);
}

.eos-css.eos-pillar .eos-article-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  padding: 22px 22px 24px;
  color: var(--eos-muted);
}

.eos-css.eos-pillar .eos-article-card-body h3 {
  margin: 0;
  color: var(--eos-text);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 900;
}

.eos-css.eos-pillar .eos-article-card h3 a {
  color: var(--eos-text);
}

.eos-css.eos-pillar .eos-article-card h3 a:hover {
  color: var(--eos-blue);
}

.eos-css.eos-pillar .eos-article-card-body p {
  margin: 0;
  flex: 1;
  color: var(--eos-muted);
}

.eos-css.eos-pillar .eos-article-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-weight: 800;
  color: var(--eos-blue);
}

.eos-css.eos-pillar .eos-article-link:hover {
  color: var(--eos-orange);
}


/* ----------------------------------------
   09.06 Related Topics / Button Groups
---------------------------------------- */

.eos-css.eos-pillar .eos-related-topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 34px;
  margin-top: 10px;
}

.eos-css.eos-pillar .eos-related-topics li {
  margin-bottom: 0;
}

.eos-css.eos-pillar .eos-button-group {
  gap: 12px;
  margin-top: 18px;
}

.eos-css.eos-pillar .eos-button-group--stack {
  flex-direction: column;
  align-items: flex-start;
}

.eos-css.eos-pillar .eos-button-group .eos-btn-secondary {
  background: #f8fbfe;
}


/* ----------------------------------------
   09.07 Knowledge Guide Footer CTA
---------------------------------------- */

.eos-css.eos-pillar .eos-knowledge-footer {
  margin-top: 84px;
  padding: 78px 20px;
  background: var(--eos-teal);
  color: var(--eos-white);
  text-align: center;
}

.eos-css.eos-pillar .eos-knowledge-footer h2 {
  margin: 0 0 14px;
  color: var(--eos-white);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
  font-weight: 900;
}

.eos-css.eos-pillar .eos-knowledge-footer p {
  max-width: 820px;
  margin: 0 auto 28px;
  font-size: 1.04rem;
  color: rgba(255, 255, 255, 0.95);
}

.eos-css.eos-pillar .eos-knowledge-footer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 230px;
  padding: 15px 28px;
  background: var(--eos-white);
  color: var(--eos-teal);
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.eos-css.eos-pillar .eos-knowledge-footer-button:hover {
  background: #f4f7f9;
  color: #208982;
}


/* ----------------------------------------
   09.08 Pillar Responsive Rules
---------------------------------------- */

@media (max-width: 1100px) {
  .eos-css.eos-pillar .eos-article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .eos-css.eos-pillar .eos-button-group {
    gap: 10px;
  }
}

@media (max-width: 767px) {
  .eos-css.eos-pillar .eos-hero {
    min-height: 320px;
  }

  .eos-css.eos-pillar .eos-hero-inner {
    padding: 56px 24px;
  }

  .eos-css.eos-pillar .eos-article-grid,
  .eos-css.eos-pillar .eos-related-topics {
    grid-template-columns: 1fr;
  }

  .eos-css.eos-pillar .eos-button-group,
  .eos-css.eos-pillar .eos-button-group--stack {
    flex-direction: column;
    align-items: stretch;
  }

  .eos-css.eos-pillar .eos-button-group .eos-btn,
  .eos-css.eos-pillar .eos-button-group--stack .eos-btn {
    width: 100%;
  }

  .eos-css.eos-pillar .eos-knowledge-footer {
    padding: 62px 18px;
  }
}


/* ========================================
   10. Article Pages Module
   Supports:
   - EOS Logistics Guide article pages
   - Article shell
   - Intro card
   - Jump menu / table of contents
   - Section cards
   - Alternating section cards
   - Article lists
   - WordPress image blocks
   - Closing links
   - Return / next-guide card

   Notes:
   - Article pages were confirmed uniform with the current ecommerce fulfillment article.
   - FAQ styling lives in the Shared FAQ System above.
   - This module keeps article-specific layout and content presentation only.
======================================== */


/* ----------------------------------------
   10.01 Article Wrapper / Shell
---------------------------------------- */

.eos-css.eos-article {
  background: var(--eos-bg);
  color: var(--eos-text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.75;
}

.eos-css.eos-article .eos-article-shell {
  width: min(980px, 92vw);
  margin: 0 auto;
  padding: 44px 0 72px;
}


/* ----------------------------------------
   10.02 Article Intro Card
---------------------------------------- */

.eos-css.eos-article .eos-intro-card {
  margin: 0 0 28px;
  padding: 30px 32px;
  background: #ffffff;
  border: 1px solid var(--eos-line-soft);
  border-left: 6px solid var(--eos-orange);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-soft);
  color: var(--eos-muted);
  font-size: 18px;
  line-height: 1.75;
}

.eos-css.eos-article .eos-intro-card p:last-child {
  margin-bottom: 0;
}

.eos-css.eos-article .eos-intro-label {
  display: block;
  margin: 0 0 12px;
  color: var(--eos-orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-transform: uppercase;
}


/* ----------------------------------------
   10.03 Article Jump Menu
---------------------------------------- */

.eos-css.eos-article .eos-jump-menu {
  margin: 0 0 30px;
  padding: 24px 26px;
  background: #ffffff;
  border: 1px solid var(--eos-line-soft);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-soft);
}

.eos-css.eos-article .eos-jump-label {
  margin-bottom: 10px;
  color: var(--eos-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-article .eos-jump-menu ul {
  margin: 0;
  padding-left: 20px;
}

.eos-css.eos-article .eos-jump-menu li {
  margin: 0 0 8px;
  color: var(--eos-muted);
  line-height: 1.55;
}

.eos-css.eos-article .eos-jump-menu li:last-child {
  margin-bottom: 0;
}

.eos-css.eos-article .eos-jump-menu a {
  color: var(--eos-blue);
  font-weight: 800;
}

.eos-css.eos-article .eos-jump-menu a:hover {
  color: var(--eos-orange);
}


/* ----------------------------------------
   10.04 Article Section Cards
---------------------------------------- */

.eos-css.eos-article .eos-section-card {
  margin: 0 0 30px;
  padding: 34px 36px;
  background: #ffffff;
  border: 1px solid var(--eos-line-soft);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-soft);
  color: var(--eos-muted);
}

.eos-css.eos-article .eos-section-card.alt {
  background: #f8fbfe;
}

.eos-css.eos-article .eos-section-card h2 {
  margin: 0 0 18px;
  color: var(--eos-text);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.eos-css.eos-article .eos-section-card h3 {
  margin: 24px 0 10px;
  color: var(--eos-text);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 900;
}

.eos-css.eos-article .eos-section-card p {
  margin: 0 0 18px;
  color: var(--eos-muted);
  line-height: 1.75;
}

.eos-css.eos-article .eos-section-card p:last-child {
  margin-bottom: 0;
}

.eos-css.eos-article .eos-section-card strong {
  color: #243243;
  font-weight: 900;
}

.eos-css.eos-article .eos-section-card a {
  color: var(--eos-blue);
  font-weight: 800;
}

.eos-css.eos-article .eos-section-card a:hover {
  color: var(--eos-orange);
}


/* ----------------------------------------
   10.05 Article Lists
---------------------------------------- */

.eos-css.eos-article .eos-list {
  margin: 18px 0 22px;
  padding-left: 22px;
}

.eos-css.eos-article .eos-list li {
  margin: 0 0 10px;
  color: var(--eos-muted);
  line-height: 1.65;
}

.eos-css.eos-article .eos-list li:last-child {
  margin-bottom: 0;
}


/* ----------------------------------------
   10.06 Article Images / WordPress Blocks
---------------------------------------- */

.eos-css.eos-article .wp-block-image {
  margin: 34px 0;
}

.eos-css.eos-article .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-soft);
}

.eos-css.eos-article .wp-block-image figcaption {
  margin-top: 10px;
  color: var(--eos-muted);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}


/* ----------------------------------------
   10.07 Article Closing / Internal Link Notes
---------------------------------------- */

.eos-css.eos-article .eos-closing {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--eos-line-soft);
  color: var(--eos-muted);
  font-weight: 700;
}

.eos-css.eos-article .eos-closing a {
  color: var(--eos-blue);
  font-weight: 900;
}

.eos-css.eos-article .eos-closing a:hover {
  color: var(--eos-orange);
}


/* ----------------------------------------
   10.08 Article FAQ Layout Hook
   FAQ colors and details styling live in Section 06.
---------------------------------------- */

.eos-css.eos-article .eos-faq {
  margin: 34px 0 30px;
}

.eos-css.eos-article .eos-faq h2,
.eos-css.eos-article .eos-faq > h2 {
  margin: 0 0 18px;
  color: var(--eos-text);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.16;
  font-weight: 900;
}


/* ----------------------------------------
   10.09 Article Return / Next Guide Card
---------------------------------------- */

.eos-css.eos-article .eos-return {
  margin-top: 34px;
}

.eos-css.eos-article .eos-return-card {
  padding: 32px 34px;
  background: linear-gradient(135deg, var(--eos-blue), #004f8f);
  border-radius: var(--eos-radius-lg);
  box-shadow: var(--eos-shadow-soft);
  color: #ffffff;
}

.eos-css.eos-article .eos-return-label {
  margin-bottom: 10px;
  color: #d8e8f6;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-article .eos-return-card h3 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.16;
  font-weight: 900;
}

.eos-css.eos-article .eos-return-card p {
  max-width: 820px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.7;
}

.eos-css.eos-article .eos-return-card .eos-btn {
  background: #ffffff;
  color: var(--eos-blue);
}

.eos-css.eos-article .eos-return-card .eos-btn:hover {
  background: #f4f7f9;
  color: #004f8f;
}


/* ----------------------------------------
   10.10 Article Responsive Rules
---------------------------------------- */

@media (max-width: 767px) {
  .eos-css.eos-article .eos-article-shell {
    width: min(94vw, 980px);
    padding: 30px 0 56px;
  }

  .eos-css.eos-article .eos-intro-card,
  .eos-css.eos-article .eos-jump-menu,
  .eos-css.eos-article .eos-section-card,
  .eos-css.eos-article .eos-return-card {
    padding: 24px 20px;
  }

  .eos-css.eos-article .eos-intro-card {
    font-size: 16px;
  }

  .eos-css.eos-article .wp-block-image {
    margin: 26px 0;
  }
}


/* ========================================
   11. Location Pages Module
   Supports:
   - EOS warehouse location pages
   - Location hero
   - Facility snapshot cards
   - Regional coverage split sections
   - Logistics access cards
   - Warehouse capability cards
   - Metric cards
   - Visibility cards
   - Team cards
   - Facility gallery

   Notes:
   - Ontario and Dayton confirmed this is a repeatable page family.
   - FAQ styling lives in Shared FAQ System.
   - Nationwide network and EOS workflow cards use Shared Workflow System.
   - Location-specific wrappers should remain hooks only unless needed.
======================================== */


/* ----------------------------------------
   11.01 Location Wrapper
---------------------------------------- */

.eos-css.eos-location-page {
  background: var(--eos-bg);
  color: var(--eos-text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
}


/* ----------------------------------------
   11.02 Location Hero
---------------------------------------- */

.eos-css.eos-location-page .eos-location-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #ffffff;
  background: #0b2239;
}

.eos-css.eos-location-page .eos-location-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.eos-css.eos-location-page .eos-location-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eos-css.eos-location-page .eos-location-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(7, 35, 64, 0.82),
    rgba(7, 35, 64, 0.62),
    rgba(7, 35, 64, 0.26)
  );
  pointer-events: none;
}

.eos-css.eos-location-page .eos-location-hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 92px;
  padding-bottom: 92px;
}

.eos-css.eos-location-page .eos-location-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  color: var(--eos-orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.8px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-location-page .eos-location-hero-title {
  max-width: 940px;
  margin: 0 0 18px;
  color: #ffffff;
  font-size: clamp(40px, 5vw, 66px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.eos-css.eos-location-page .eos-location-hero-subtitle {
  max-width: 880px;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 19px;
  line-height: 1.7;
}


/* ----------------------------------------
   11.03 Location Buttons
---------------------------------------- */

.eos-css.eos-location-page .eos-location-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.eos-css.eos-location-page .eos-location-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.eos-css.eos-location-page .eos-location-btn-primary {
  background: var(--eos-orange);
  color: #ffffff;
}

.eos-css.eos-location-page .eos-location-btn-primary:hover {
  background: var(--eos-orange-dark);
  color: #ffffff;
  transform: translateY(-1px);
}

.eos-css.eos-location-page .eos-location-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.eos-css.eos-location-page .eos-location-btn-secondary:hover {
  border-color: var(--eos-orange);
  color: var(--eos-orange);
}


/* ----------------------------------------
   11.04 Location Sections / Typography
---------------------------------------- */

.eos-css.eos-location-page .eos-location-section {
  padding: 76px 0;
}

.eos-css.eos-location-page .eos-location-section-light {
  background: #f5f5f3;
  color: var(--eos-text-dark);
}

.eos-css.eos-location-page .eos-location-section-dark {
  background: var(--eos-charcoal);
  color: #ffffff;
}

.eos-css.eos-location-page .eos-location-section-header {
  max-width: 980px;
  margin-bottom: 32px;
}

.eos-css.eos-location-page .eos-location-heading {
  margin: 0 0 18px;
  color: inherit;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.eos-css.eos-location-page .eos-location-divider {
  width: 88px;
  height: 4px;
  margin: 0 0 22px;
  background: var(--eos-orange);
  border-radius: 999px;
}

.eos-css.eos-location-page .eos-location-lead {
  max-width: 920px;
  margin: 0;
  color: #d1d5db;
  font-size: 18px;
  line-height: 1.7;
}

.eos-css.eos-location-page .eos-location-lead-dark {
  color: #4d4d4d;
}


/* ----------------------------------------
   11.05 Facility Snapshot Cards
---------------------------------------- */

.eos-css.eos-location-page .eos-location-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.eos-css.eos-location-page .eos-location-snapshot-card {
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--eos-line);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-soft);
  color: #4d4d4d;
  font-size: 14px;
  line-height: 1.6;
}

.eos-css.eos-location-page .eos-location-snapshot-card strong {
  display: block;
  margin: 6px 0 8px;
  color: var(--eos-text-dark);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 900;
}

.eos-css.eos-location-page .eos-location-snapshot-card a {
  color: var(--eos-blue);
}

.eos-css.eos-location-page .eos-location-snapshot-card a:hover {
  color: var(--eos-orange);
}


/* ----------------------------------------
   11.06 Split Sections / Media Cards
---------------------------------------- */

.eos-css.eos-location-page .eos-location-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 42px;
  align-items: center;
}

.eos-css.eos-location-page .eos-location-split-reverse {
  grid-template-columns: 0.95fr 1.05fr;
}

.eos-css.eos-location-page .eos-location-split-reverse .eos-location-split-copy {
  order: 2;
}

.eos-css.eos-location-page .eos-location-split-reverse .eos-location-split-media {
  order: 1;
}

.eos-css.eos-location-page .eos-location-image-card {
  margin: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-strong);
}

.eos-css.eos-location-page .eos-location-section-light .eos-location-image-card {
  border-color: var(--eos-line);
  box-shadow: var(--eos-shadow-soft);
}

.eos-css.eos-location-page .eos-location-image-card-square img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.eos-css.eos-location-page .eos-location-image-card figcaption {
  padding: 14px 16px;
  color: #4d4d4d;
  background: #ffffff;
  font-size: 14px;
  line-height: 1.5;
}


/* ----------------------------------------
   11.07 State / Regional Coverage List
---------------------------------------- */

.eos-css.eos-location-page .eos-location-state-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 760px;
  margin-top: 26px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
}


/* ----------------------------------------
   11.08 Access / Capability / Visibility Cards
---------------------------------------- */

.eos-css.eos-location-page .eos-location-access-grid,
.eos-css.eos-location-page .eos-location-capability-grid,
.eos-css.eos-location-page .eos-location-visibility-grid {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.eos-css.eos-location-page .eos-location-access-grid,
.eos-css.eos-location-page .eos-location-capability-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eos-css.eos-location-page .eos-location-visibility-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.eos-css.eos-location-page .eos-location-access-card,
.eos-css.eos-location-page .eos-location-capability-card,
.eos-css.eos-location-page .eos-location-visibility-card {
  padding: 22px;
  border-radius: var(--eos-radius);
  font-size: 15px;
  line-height: 1.65;
}

.eos-css.eos-location-page .eos-location-section-light .eos-location-access-card,
.eos-css.eos-location-page .eos-location-section-light .eos-location-capability-card,
.eos-css.eos-location-page .eos-location-section-light .eos-location-visibility-card {
  background: #ffffff;
  border: 1px solid var(--eos-line);
  box-shadow: var(--eos-shadow-soft);
  color: #4d4d4d;
}

.eos-css.eos-location-page .eos-location-section-dark .eos-location-access-card,
.eos-css.eos-location-page .eos-location-section-dark .eos-location-capability-card,
.eos-css.eos-location-page .eos-location-section-dark .eos-location-visibility-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--eos-shadow-strong);
  color: #d1d5db;
}

.eos-css.eos-location-page .eos-location-access-card h3,
.eos-css.eos-location-page .eos-location-capability-card h3,
.eos-css.eos-location-page .eos-location-visibility-card h3 {
  margin: 0 0 10px;
  color: inherit;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 900;
}

.eos-css.eos-location-page .eos-location-section-light .eos-location-access-card h3,
.eos-css.eos-location-page .eos-location-section-light .eos-location-capability-card h3,
.eos-css.eos-location-page .eos-location-section-light .eos-location-visibility-card h3 {
  color: var(--eos-text-dark);
}

.eos-css.eos-location-page .eos-location-section-dark .eos-location-access-card h3,
.eos-css.eos-location-page .eos-location-section-dark .eos-location-capability-card h3,
.eos-css.eos-location-page .eos-location-section-dark .eos-location-visibility-card h3 {
  color: #ffffff;
}

.eos-css.eos-location-page .eos-location-access-card p,
.eos-css.eos-location-page .eos-location-capability-card p,
.eos-css.eos-location-page .eos-location-visibility-card p {
  margin: 0;
  color: inherit;
}


/* ----------------------------------------
   11.09 Metric Cards
---------------------------------------- */

.eos-css.eos-location-page .eos-location-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.eos-css.eos-location-page .eos-location-metric-card {
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--eos-line);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-soft);
  color: #4d4d4d;
  font-size: 14px;
  line-height: 1.6;
}

.eos-css.eos-location-page .eos-location-metric-card strong {
  display: block;
  margin: 6px 0 8px;
  color: var(--eos-orange);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
}


/* ----------------------------------------
   11.10 Team Cards
---------------------------------------- */

.eos-css.eos-location-page .eos-location-team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.eos-css.eos-location-page .eos-location-team-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 22px;
  align-items: center;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--eos-line);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-soft);
}

.eos-css.eos-location-page .eos-location-team-photo {
  overflow: hidden;
  border-radius: 14px;
  background: #eaf3fb;
}

.eos-css.eos-location-page .eos-location-team-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.eos-css.eos-location-page .eos-location-team-body {
  color: #4d4d4d;
  font-size: 15px;
  line-height: 1.65;
}

.eos-css.eos-location-page .eos-location-team-body h3 {
  margin: 6px 0 10px;
  color: var(--eos-text-dark);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 900;
}

.eos-css.eos-location-page .eos-location-team-body p {
  margin: 0;
  color: inherit;
}


/* ----------------------------------------
   11.11 Gallery
---------------------------------------- */

.eos-css.eos-location-page .eos-location-gallery-section {
  padding-top: 76px;
}

.eos-css.eos-location-page .eos-location-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.eos-css.eos-location-page .eos-location-gallery-card {
  margin: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--eos-line);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-soft);
}

.eos-css.eos-location-page .eos-location-gallery-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.eos-css.eos-location-page .eos-location-gallery-card figcaption {
  padding: 12px 14px;
  color: #4d4d4d;
  font-size: 13px;
  line-height: 1.45;
}


/* ----------------------------------------
   11.12 Location Responsive Rules
---------------------------------------- */

@media (max-width: 1200px) {
  .eos-css.eos-location-page .eos-location-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .eos-css.eos-location-page .eos-location-visibility-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .eos-css.eos-location-page .eos-location-snapshot-grid,
  .eos-css.eos-location-page .eos-location-access-grid,
  .eos-css.eos-location-page .eos-location-capability-grid,
  .eos-css.eos-location-page .eos-location-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eos-css.eos-location-page .eos-location-split,
  .eos-css.eos-location-page .eos-location-split-reverse {
    grid-template-columns: 1fr;
  }

  .eos-css.eos-location-page .eos-location-split-reverse .eos-location-split-copy,
  .eos-css.eos-location-page .eos-location-split-reverse .eos-location-split-media {
    order: initial;
  }
}

@media (max-width: 767px) {
  .eos-css.eos-location-page .eos-location-hero {
    min-height: auto;
  }

  .eos-css.eos-location-page .eos-location-hero-overlay {
    background: linear-gradient(
      rgba(7, 35, 64, 0.82),
      rgba(7, 35, 64, 0.7)
    );
  }

  .eos-css.eos-location-page .eos-location-hero-inner {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .eos-css.eos-location-page .eos-location-section {
    padding: 56px 0;
  }

  .eos-css.eos-location-page .eos-location-button-row {
    flex-direction: column;
    align-items: stretch;
  }

  .eos-css.eos-location-page .eos-location-btn {
    width: 100%;
  }

  .eos-css.eos-location-page .eos-location-snapshot-grid,
  .eos-css.eos-location-page .eos-location-access-grid,
  .eos-css.eos-location-page .eos-location-capability-grid,
  .eos-css.eos-location-page .eos-location-metric-grid,
  .eos-css.eos-location-page .eos-location-visibility-grid,
  .eos-css.eos-location-page .eos-location-team-grid,
  .eos-css.eos-location-page .eos-location-gallery-grid {
    grid-template-columns: 1fr;
  }

  .eos-css.eos-location-page .eos-location-team-card {
    grid-template-columns: 1fr;
  }

  .eos-css.eos-location-page .eos-location-team-photo {
    max-width: 180px;
  }
}


/* ========================================
   12. About EOS Module
   Supports:
   - About EOS page
   - About hero
   - Company story grid
   - Proof cards
   - EOS difference comparison cards
   - Operational tour cards
   - Support boxes
   - Nationwide warehouse network cards
   - Fulfillment photo band
   - Related Knowledge CTA

   Notes:
   - About EOS is a unique page, not a repeatable page family.
   - Keep About-specific classes contained here.
   - Shared workflow rules live in Section 07.
   - Shared location page CSS lives in Section 11, but About uses its own compact location-card presentation.
======================================== */


/* ----------------------------------------
   12.01 About Wrapper
---------------------------------------- */

.eos-css.eos-about-v2,
.eos-css.eos-about {
  background: var(--eos-bg);
  color: var(--eos-text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
}

.eos-css.eos-about-v2 .eos-wrap,
.eos-css.eos-about .eos-wrap {
  width: 100%;
  max-width: var(--eos-content-width);
  margin: 0 auto;
}


/* ----------------------------------------
   12.02 About Hero
---------------------------------------- */

.eos-css.eos-about-v2 .eos-about-hero,
.eos-css.eos-about .eos-about-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 460px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(7, 35, 64, 0.92), rgba(0, 99, 178, 0.72)),
    radial-gradient(circle at top right, rgba(47, 164, 168, 0.34), transparent 40%);
  color: #ffffff;
}

.eos-css.eos-about-v2 .eos-about-hero-inner,
.eos-css.eos-about .eos-about-hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 86px;
  padding-bottom: 86px;
}

.eos-css.eos-about-v2 .eos-about-eyebrow,
.eos-css.eos-about .eos-about-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  color: var(--eos-orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.8px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-about-v2 .eos-about-hero-title,
.eos-css.eos-about .eos-about-hero-title {
  max-width: 980px;
  margin: 0 0 18px;
  color: #ffffff;
  font-size: clamp(42px, 5.2vw, 68px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.eos-css.eos-about-v2 .eos-about-hero-subtitle,
.eos-css.eos-about .eos-about-hero-subtitle {
  max-width: 880px;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 20px;
  line-height: 1.7;
}


/* ----------------------------------------
   12.03 About Sections / Typography
---------------------------------------- */

.eos-css.eos-about-v2 .eos-about-section,
.eos-css.eos-about .eos-about-section {
  padding: 76px 0;
}

.eos-css.eos-about-v2 .eos-about-section-light,
.eos-css.eos-about .eos-about-section-light {
  background: #f5f5f3;
  color: var(--eos-text-dark);
}

.eos-css.eos-about-v2 .eos-about-section-dark,
.eos-css.eos-about .eos-about-section-dark {
  background: var(--eos-charcoal);
  color: #ffffff;
}

.eos-css.eos-about-v2 .eos-about-heading,
.eos-css.eos-about .eos-about-heading {
  margin: 0 0 18px;
  color: inherit;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.eos-css.eos-about-v2 .eos-about-divider,
.eos-css.eos-about .eos-about-divider {
  width: 88px;
  height: 4px;
  margin: 0 0 22px;
  background: var(--eos-orange);
  border-radius: 999px;
}

.eos-css.eos-about-v2 .eos-about-lead,
.eos-css.eos-about .eos-about-lead {
  max-width: 960px;
  margin: 0 0 20px;
  color: #d1d5db;
  font-size: 18px;
  line-height: 1.7;
}

.eos-css.eos-about-v2 .eos-about-section-light .eos-about-lead,
.eos-css.eos-about .eos-about-section-light .eos-about-lead {
  color: #4d4d4d;
}

.eos-css.eos-about-v2 .eos-about-subheading,
.eos-css.eos-about .eos-about-subheading {
  margin: 26px 0 12px;
  color: var(--eos-blue);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
}


/* ----------------------------------------
   12.04 Story Grid / Proof Panel
---------------------------------------- */

.eos-css.eos-about-v2 .eos-about-story-grid,
.eos-css.eos-about .eos-about-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 42px;
  align-items: start;
}

.eos-css.eos-about-v2 .eos-about-story-copy,
.eos-css.eos-about .eos-about-story-copy {
  color: #4d4d4d;
  font-size: 17px;
  line-height: 1.75;
}

.eos-css.eos-about-v2 .eos-about-story-copy p,
.eos-css.eos-about .eos-about-story-copy p {
  margin: 0 0 18px;
}

.eos-css.eos-about-v2 .eos-about-belief,
.eos-css.eos-about .eos-about-belief {
  margin: 0 0 20px;
  color: var(--eos-text-dark);
  font-size: 18px;
  line-height: 1.7;
}

.eos-css.eos-about-v2 .eos-about-proof-panel,
.eos-css.eos-about .eos-about-proof-panel {
  display: grid;
  gap: 18px;
}

.eos-css.eos-about-v2 .eos-about-proof-card,
.eos-css.eos-about .eos-about-proof-card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--eos-line);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-soft);
  color: #4d4d4d;
  font-size: 14px;
  line-height: 1.6;
}

.eos-css.eos-about-v2 .eos-about-proof-card strong,
.eos-css.eos-about .eos-about-proof-card strong {
  display: block;
  margin: 6px 0 8px;
  color: var(--eos-blue);
  font-size: 27px;
  line-height: 1.1;
  font-weight: 900;
}


/* ----------------------------------------
   12.05 EOS Difference / Transform Cards
---------------------------------------- */

.eos-css.eos-about-v2 .eos-about-transform-grid,
.eos-css.eos-about .eos-about-transform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 34px;
}

.eos-css.eos-about-v2 .eos-about-transform-card,
.eos-css.eos-about .eos-about-transform-card {
  padding: 30px;
  border-radius: var(--eos-radius-lg);
  box-shadow: var(--eos-shadow-strong);
}

.eos-css.eos-about-v2 .eos-about-transform-card h3,
.eos-css.eos-about .eos-about-transform-card h3 {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
}

.eos-css.eos-about-v2 .eos-about-transform-card ul,
.eos-css.eos-about .eos-about-transform-card ul {
  margin: 0;
  padding-left: 22px;
}

.eos-css.eos-about-v2 .eos-about-transform-card li,
.eos-css.eos-about .eos-about-transform-card li {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.eos-css.eos-about-v2 .eos-about-transform-card-muted,
.eos-css.eos-about .eos-about-transform-card-muted {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.eos-css.eos-about-v2 .eos-about-transform-card-strong,
.eos-css.eos-about .eos-about-transform-card-strong {
  background: linear-gradient(135deg, var(--eos-blue), #004f8f);
  border: 1px solid rgba(255, 255, 255, 0.16);
}


/* ----------------------------------------
   12.06 Operational Tour Cards
---------------------------------------- */

.eos-css.eos-about-v2 .eos-about-card-grid,
.eos-css.eos-about .eos-about-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.eos-css.eos-about-v2 .eos-about-info-card,
.eos-css.eos-about .eos-about-info-card {
  overflow: hidden;
  padding: 0 24px 24px;
  background: #ffffff;
  border: 1px solid var(--eos-line);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-soft);
  color: #4d4d4d;
  font-size: 15px;
  line-height: 1.65;
}

.eos-css.eos-about-v2 .eos-about-card-accent,
.eos-css.eos-about .eos-about-card-accent {
  height: 4px;
  margin: 0 -24px 20px;
  background: var(--eos-orange);
}

.eos-css.eos-about-v2 .eos-about-info-card h3,
.eos-css.eos-about .eos-about-info-card h3 {
  margin: 0 0 10px;
  color: var(--eos-text-dark);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
}


/* ----------------------------------------
   12.07 About Support Boxes
---------------------------------------- */

.eos-css.eos-about-v2 .eos-about-support-box,
.eos-css.eos-about .eos-about-support-box {
  margin-top: 34px;
  padding: 30px;
  background: #ffffff;
  border: 1px solid var(--eos-line);
  border-radius: var(--eos-radius-lg);
  box-shadow: var(--eos-shadow-soft);
  color: #4d4d4d;
  font-size: 16px;
  line-height: 1.7;
}

.eos-css.eos-about-v2 .eos-about-support-box h3,
.eos-css.eos-about .eos-about-support-box h3 {
  margin: 0 0 18px;
  color: var(--eos-text-dark);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 900;
}

.eos-css.eos-about-v2 .eos-about-support-box-dark,
.eos-css.eos-about .eos-about-support-box-dark {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #d1d5db;
  box-shadow: var(--eos-shadow-strong);
}

.eos-css.eos-about-v2 .eos-about-check-list,
.eos-css.eos-about .eos-about-check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin: 0;
  padding-left: 22px;
}

.eos-css.eos-about-v2 .eos-about-check-list li,
.eos-css.eos-about .eos-about-check-list li {
  color: #4d4d4d;
  line-height: 1.6;
}


/* ----------------------------------------
   12.08 About Location Network Cards
---------------------------------------- */

.eos-css.eos-about-v2 .eos-locations-section,
.eos-css.eos-about .eos-locations-section {
  position: relative;
}

.eos-css.eos-about-v2 .eos-locations-header,
.eos-css.eos-about .eos-locations-header,
.eos-css.eos-about-v2 .eos-fulfillment-photo-header,
.eos-css.eos-about .eos-fulfillment-photo-header {
  max-width: 980px;
  margin-bottom: 34px;
}

.eos-css.eos-about-v2 .eos-locations-grid,
.eos-css.eos-about .eos-locations-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.eos-css.eos-about-v2 .eos-location-card,
.eos-css.eos-about .eos-location-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100%;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-strong);
}

.eos-css.eos-about-v2 .eos-location-image-wrap,
.eos-css.eos-about .eos-location-image-wrap {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #eaf3fb;
}

.eos-css.eos-about-v2 .eos-location-image,
.eos-css.eos-about .eos-location-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.eos-css.eos-about-v2 .eos-location-card:hover .eos-location-image,
.eos-css.eos-about .eos-location-card:hover .eos-location-image {
  transform: scale(1.03);
}

.eos-css.eos-about-v2 .eos-location-card-body,
.eos-css.eos-about .eos-location-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px;
  color: #4d4d4d;
}

.eos-css.eos-about-v2 .eos-location-region,
.eos-css.eos-about .eos-location-region {
  margin-bottom: 8px;
  color: var(--eos-orange);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.eos-css.eos-about-v2 .eos-location-name,
.eos-css.eos-about .eos-location-name {
  margin: 0 0 12px;
  color: var(--eos-text-dark);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
}

.eos-css.eos-about-v2 .eos-location-list,
.eos-css.eos-about .eos-location-list {
  margin: 0 0 16px;
  padding-left: 18px;
}

.eos-css.eos-about-v2 .eos-location-list li,
.eos-css.eos-about .eos-location-list li {
  margin-bottom: 8px;
  color: #4d4d4d;
  font-size: 13px;
  line-height: 1.45;
}

.eos-css.eos-about-v2 .eos-location-future-link,
.eos-css.eos-about .eos-location-future-link {
  margin-top: auto;
  color: var(--eos-blue);
  font-size: 13px;
  font-weight: 900;
}

.eos-css.eos-about-v2 .eos-location-future-link:hover,
.eos-css.eos-about .eos-location-future-link:hover {
  color: var(--eos-orange);
}


/* ----------------------------------------
   12.09 Fulfillment Photo Band
---------------------------------------- */

.eos-css.eos-about-v2 .eos-fulfillment-photo-band,
.eos-css.eos-about .eos-fulfillment-photo-band {
  background: var(--eos-charcoal);
}

.eos-css.eos-about-v2 .eos-fulfillment-photo-grid,
.eos-css.eos-about .eos-fulfillment-photo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.eos-css.eos-about-v2 .eos-fulfillment-photo-card,
.eos-css.eos-about .eos-fulfillment-photo-card {
  margin: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--eos-radius);
  box-shadow: var(--eos-shadow-strong);
}

.eos-css.eos-about-v2 .eos-fulfillment-photo-card img,
.eos-css.eos-about .eos-fulfillment-photo-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.eos-css.eos-about-v2 .eos-fulfillment-photo-card figcaption,
.eos-css.eos-about .eos-fulfillment-photo-card figcaption {
  padding: 14px 16px;
  color: #4d4d4d;
  font-size: 13px;
  line-height: 1.45;
}

.eos-css.eos-about-v2 .eos-fulfillment-photo-card figcaption strong,
.eos-css.eos-about .eos-fulfillment-photo-card figcaption strong {
  display: block;
  margin-bottom: 4px;
  color: var(--eos-text-dark);
}

.eos-css.eos-about-v2 .eos-about-highlight-line,
.eos-css.eos-about .eos-about-highlight-line {
  max-width: 980px;
  margin: 34px auto 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 19px;
  line-height: 1.7;
  text-align: center;
}


/* ----------------------------------------
   12.10 About Related Knowledge CTA
---------------------------------------- */

.eos-css.eos-about-v2 .eos-about-button-row,
.eos-css.eos-about .eos-about-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.eos-css.eos-about-v2 .eos-about-btn,
.eos-css.eos-about .eos-about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.eos-css.eos-about-v2 .eos-about-btn-primary,
.eos-css.eos-about .eos-about-btn-primary {
  background: var(--eos-orange);
  color: #ffffff;
}

.eos-css.eos-about-v2 .eos-about-btn-primary:hover,
.eos-css.eos-about .eos-about-btn-primary:hover {
  background: var(--eos-orange-dark);
  color: #ffffff;
  transform: translateY(-1px);
}


/* ----------------------------------------
   12.11 About Workflow Embed
   Shared workflow styles live in Section 07.
---------------------------------------- */

.eos-css.eos-about-v2 .eos-about-workflow-embed,
.eos-css.eos-about .eos-about-workflow-embed {
  margin: 0;
}


/* ----------------------------------------
   12.12 About Responsive Rules
---------------------------------------- */

@media (max-width: 1200px) {
  .eos-css.eos-about-v2 .eos-locations-grid,
  .eos-css.eos-about .eos-locations-grid,
  .eos-css.eos-about-v2 .eos-fulfillment-photo-grid,
  .eos-css.eos-about .eos-fulfillment-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .eos-css.eos-about-v2 .eos-about-story-grid,
  .eos-css.eos-about .eos-about-story-grid,
  .eos-css.eos-about-v2 .eos-about-transform-grid,
  .eos-css.eos-about .eos-about-transform-grid,
  .eos-css.eos-about-v2 .eos-about-card-grid,
  .eos-css.eos-about .eos-about-card-grid {
    grid-template-columns: 1fr;
  }

  .eos-css.eos-about-v2 .eos-about-check-list,
  .eos-css.eos-about .eos-about-check-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .eos-css.eos-about-v2 .eos-about-hero-inner,
  .eos-css.eos-about .eos-about-hero-inner {
    padding-top: 66px;
    padding-bottom: 66px;
  }

  .eos-css.eos-about-v2 .eos-about-section,
  .eos-css.eos-about .eos-about-section {
    padding: 56px 0;
  }

  .eos-css.eos-about-v2 .eos-locations-grid,
  .eos-css.eos-about .eos-locations-grid,
  .eos-css.eos-about-v2 .eos-fulfillment-photo-grid,
  .eos-css.eos-about .eos-fulfillment-photo-grid {
    grid-template-columns: 1fr;
  }

  .eos-css.eos-about-v2 .eos-about-transform-card,
  .eos-css.eos-about .eos-about-transform-card,
  .eos-css.eos-about-v2 .eos-about-support-box,
  .eos-css.eos-about .eos-about-support-box {
    padding: 24px 20px;
  }

  .eos-css.eos-about-v2 .eos-about-button-row,
  .eos-css.eos-about .eos-about-button-row {
    flex-direction: column;
    align-items: stretch;
  }

  .eos-css.eos-about-v2 .eos-about-btn,
  .eos-css.eos-about .eos-about-btn {
    width: 100%;
  }
}


/* ========================================
   13. Homepage Module
   Supports:
   - EOS future homepage / Main page
   - Homepage hero
   - Hero action buttons
   - Proof band
   - Logistics Guides preview cards
   - RSS / Industry updates area

   Notes:
   - Service flip cards live in Section 14.
   - Shared buttons, cards, panels, and wrappers live above.
   - This module is based on the v5.4 homepage section, cleaned and scoped.
======================================== */


/* ----------------------------------------
   13.01 Homepage Wrapper
---------------------------------------- */

.eos-css.eos-homepage {
  background: var(--eos-bg);
  color: var(--eos-text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.65;
}

.eos-css.eos-homepage {
  padding: 0;
}


/* ----------------------------------------
   13.02 Homepage Hero
---------------------------------------- */

.eos-css.eos-homepage .eos-home-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
  border-radius: 0;
}

.eos-css.eos-homepage .eos-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(7, 35, 64, 0.86),
    rgba(7, 35, 64, 0.68),
    rgba(7, 35, 64, 0.32)
  );
  pointer-events: none;
}

.eos-css.eos-homepage .eos-home-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--eos-content-width);
  margin: 0 auto;
  padding: 92px 32px;
}

.eos-css.eos-homepage .eos-home-hero-kicker {
  display: inline-block;
  margin: 0 0 14px;
  color: #d8e8f6;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-homepage .eos-home-hero-title {
  max-width: 980px;
  margin: 0 0 18px;
  color: #ffffff;
  font-size: clamp(42px, 5.2vw, 70px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.eos-css.eos-homepage .eos-home-hero-statement {
  margin: 0 0 20px;
  color: var(--eos-orange);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.15;
  font-weight: 900;
}

.eos-css.eos-homepage .eos-home-hero-text {
  max-width: 900px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 19px;
  line-height: 1.7;
}

.eos-css.eos-homepage .eos-home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.eos-css.eos-homepage .eos-home-hero-actions .eos-btn {
  min-width: 180px;
}

.eos-css.eos-homepage .eos-home-hero-actions .eos-btn-secondary {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.26);
}

.eos-css.eos-homepage .eos-home-hero-actions .eos-btn-secondary:hover {
  border-color: var(--eos-orange);
  color: var(--eos-orange);
}


/* ----------------------------------------
   13.03 Homepage Section Helpers
---------------------------------------- */

.eos-css.eos-homepage .eos-home-section-head {
  margin-bottom: 22px;
}

.eos-css.eos-homepage .eos-home-section-head .eos-eyebrow,
.eos-css.eos-homepage .eos-home-guides-head .eos-eyebrow,
.eos-css.eos-homepage .eos-service-map-head .eos-eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  color: var(--eos-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-homepage .eos-home-section-divider {
  height: 1px;
  margin: 0 0 34px;
  border: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 99, 178, 0) 0%,
    rgba(0, 99, 178, 0.18) 50%,
    rgba(0, 99, 178, 0) 100%
  );
}


/* ----------------------------------------
   13.04 Homepage Proof Band
---------------------------------------- */

.eos-css.eos-homepage .eos-home-proof {
  margin: 0 0 40px;
}

.eos-css.eos-homepage .eos-home-proof-band {
  padding: 34px 30px 30px;
  background: linear-gradient(135deg, #072340 0%, #0b325c 100%);
  color: #ffffff;
  border-radius: var(--eos-radius-lg);
  box-shadow: var(--eos-shadow-strong);
}

.eos-css.eos-homepage .eos-home-proof-band .eos-eyebrow {
  color: #bfddf4;
}

.eos-css.eos-homepage .eos-home-proof-band h2 {
  color: #ffffff;
}

.eos-css.eos-homepage .eos-home-proof-band .eos-section-intro {
  color: rgba(255, 255, 255, 0.9);
}

.eos-css.eos-homepage .eos-home-proof-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.eos-css.eos-homepage .eos-home-proof-item {
  padding: 18px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.55;
}

.eos-css.eos-homepage .eos-home-proof-item strong {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 900;
}


/* ----------------------------------------
   13.05 Homepage Logistics Guides Preview
---------------------------------------- */

.eos-css.eos-homepage .eos-home-guides {
  margin: 0 0 40px;
}

.eos-css.eos-homepage .eos-home-guides-head {
  margin-bottom: 22px;
}

.eos-css.eos-homepage .eos-home-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 24px;
}

.eos-css.eos-homepage .eos-home-guide-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #d9e6f2;
  border-radius: 18px;
  box-shadow: var(--eos-shadow-soft);
}

.eos-css.eos-homepage .eos-home-guide-card-top {
  height: 6px;
  background: linear-gradient(90deg, var(--eos-blue) 0%, var(--eos-orange) 100%);
}

.eos-css.eos-homepage .eos-home-guide-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 24px 22px 22px;
}

.eos-css.eos-homepage .eos-home-guide-audience {
  margin: 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eos-css.eos-homepage .eos-home-guide-title {
  margin: 0;
  color: #1f2937;
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 900;
}

.eos-css.eos-homepage .eos-home-guide-text {
  margin: 0;
  flex: 1;
  color: #4b5563;
  line-height: 1.75;
}

.eos-css.eos-homepage .eos-home-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}


/* ----------------------------------------
   13.06 Homepage RSS / Industry Updates
---------------------------------------- */

.eos-css.eos-homepage .eos-home-rss {
  margin: 0 0 40px;
  padding-top: 32px;
}

.eos-css.eos-homepage .eos-home-rss-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}

.eos-css.eos-homepage .eos-home-rss-box {
  padding: 24px 22px;
  background: #f7fafc;
  border: 1px solid #d9e6f2;
  border-radius: 18px;
  box-shadow: var(--eos-shadow-soft);
}

.eos-css.eos-homepage .eos-home-rss-box h3 {
  margin: 0 0 10px;
  color: var(--eos-blue);
}

.eos-css.eos-homepage .eos-home-rss-box p {
  margin: 0 0 14px;
  color: #4b5563;
}

.eos-css.eos-homepage .eos-home-rss-placeholder {
  margin-top: 12px;
  padding: 18px 16px;
  background: #ffffff;
  border: 1px dashed #b8c8d8;
  border-radius: 14px;
  color: #546372;
  font-size: 14px;
  line-height: 1.7;
}

.eos-css.eos-homepage .eos-home-rss-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.eos-css.eos-homepage .eos-btn-secondary-dark {
  background: #ffffff;
  color: var(--eos-blue);
  border: 1px solid rgba(0, 99, 178, 0.22);
}

.eos-css.eos-homepage .eos-btn-secondary-dark:hover {
  background: #f5fafe;
  color: var(--eos-orange);
  border-color: var(--eos-orange);
}


/* ----------------------------------------
   13.07 Homepage Responsive Rules
---------------------------------------- */

@media (max-width: 1199px) {
  .eos-css.eos-homepage .eos-home-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .eos-css.eos-homepage .eos-home-guides-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .eos-css.eos-homepage .eos-home-hero {
    min-height: auto;
  }

  .eos-css.eos-homepage .eos-home-hero::before {
    background: linear-gradient(
      rgba(7, 35, 64, 0.86),
      rgba(7, 35, 64, 0.72)
    );
  }

  .eos-css.eos-homepage .eos-home-hero-inner {
    padding: 54px 22px;
  }

  .eos-css.eos-homepage .eos-home-hero-text {
    font-size: 16px;
  }

  .eos-css.eos-homepage .eos-home-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .eos-css.eos-homepage .eos-home-hero-actions .eos-btn {
    width: 100%;
  }

  .eos-css.eos-homepage .eos-home-guides-grid,
  .eos-css.eos-homepage .eos-home-proof-grid {
    grid-template-columns: 1fr;
  }

  .eos-css.eos-homepage .eos-home-proof-band {
    padding: 28px 22px 24px;
  }

  .eos-css.eos-homepage .eos-home-guide-actions,
  .eos-css.eos-homepage .eos-home-rss-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .eos-css.eos-homepage .eos-home-guide-actions .eos-btn,
  .eos-css.eos-homepage .eos-home-rss-actions .eos-btn {
    width: 100%;
  }
}


/* ========================================
   14. Service Cards Module
   Supports:
   - Homepage service map
   - Service keyword card grid
   - Flip card behavior
   - Front icon / service term
   - Back service description
   - CTA label

   Notes:
   - Keep this separate from generic .eos-card rules.
   - Service cards are homepage-specific interactive components.
   - Card content should remain server-side accessible in the HTML.
======================================== */


/* ----------------------------------------
   14.01 Service Map Section
---------------------------------------- */

.eos-css.eos-homepage .eos-service-map {
  margin: 0 0 44px;
  padding: 44px 0 10px;
}

.eos-css.eos-homepage .eos-service-map-head {
  max-width: 980px;
  margin-bottom: 26px;
}

.eos-css.eos-homepage .eos-service-map-head h2 {
  margin: 0 0 14px;
  color: var(--eos-text);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.eos-css.eos-homepage .eos-service-map-head p {
  max-width: 860px;
  margin: 0;
  color: var(--eos-muted);
  font-size: 17px;
  line-height: 1.7;
}


/* ----------------------------------------
   14.02 Service Card Grid
---------------------------------------- */

.eos-css.eos-homepage .eos-service-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.eos-css.eos-homepage .eos-service-card {
  position: relative;
  min-height: 220px;
  perspective: 1100px;
}

.eos-css.eos-homepage .eos-service-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  transform-style: preserve-3d;
  transition: transform 0.55s ease;
}

.eos-css.eos-homepage .eos-service-card:hover .eos-service-card-inner,
.eos-css.eos-homepage .eos-service-card:focus-within .eos-service-card-inner,
.eos-css.eos-homepage .eos-service-card.is-flipped .eos-service-card-inner {
  transform: rotateY(180deg);
}

.eos-css.eos-homepage .eos-service-card-front,
.eos-css.eos-homepage .eos-service-card-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 20px;
  border-radius: 18px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--eos-shadow-soft);
}

.eos-css.eos-homepage .eos-service-card-front {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  border: 1px solid #d9e6f2;
  color: var(--eos-text);
}

.eos-css.eos-homepage .eos-service-card-back {
  justify-content: space-between;
  background: linear-gradient(135deg, #072340 0%, #0b325c 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transform: rotateY(180deg);
}


/* ----------------------------------------
   14.03 Front Face Content
---------------------------------------- */

.eos-css.eos-homepage .eos-service-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  margin: 0 auto 16px;
  border-radius: 24px;
  background: #f4f8fc;
  border: 1px solid #d9e6f2;
}

.eos-css.eos-homepage .eos-service-icon-wrap img,
.eos-css.eos-homepage .eos-service-icon {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.eos-css.eos-homepage .eos-service-term {
  margin: 0;
  color: var(--eos-text);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
}

.eos-css.eos-homepage .eos-service-card-front .eos-service-kicker {
  margin: 0 0 8px;
  color: var(--eos-orange);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
  line-height: 1.4;
  text-transform: uppercase;
}


/* ----------------------------------------
   14.04 Back Face Content
---------------------------------------- */

.eos-css.eos-homepage .eos-service-card-back .eos-service-kicker {
  margin: 0 0 10px;
  color: #bfddf4;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-homepage .eos-service-card-back h3 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
}

.eos-css.eos-homepage .eos-service-card-back p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.55;
}

.eos-css.eos-homepage .eos-service-card-back .eos-service-cta,
.eos-css.eos-homepage .eos-service-card-back .eos-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 18px;
  padding: 9px 14px;
  background: #ffffff;
  border-radius: 999px;
  color: var(--eos-blue);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.eos-css.eos-homepage .eos-service-card-back .eos-service-cta:hover,
.eos-css.eos-homepage .eos-service-card-back .eos-card-link:hover {
  color: var(--eos-orange);
}


/* ----------------------------------------
   14.05 Non-Flip / Static Service Cards
   Fallback for cards that do not use inner/front/back markup.
---------------------------------------- */

.eos-css.eos-homepage .eos-service-card-static {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid #d9e6f2;
  border-radius: 18px;
  box-shadow: var(--eos-shadow-soft);
}

.eos-css.eos-homepage .eos-service-card-static h3 {
  margin: 0 0 10px;
  color: var(--eos-text);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
}

.eos-css.eos-homepage .eos-service-card-static p {
  margin: 0;
  color: var(--eos-muted);
  font-size: 14px;
  line-height: 1.65;
}


/* ----------------------------------------
   14.06 Accessibility / Reduced Motion
---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .eos-css.eos-homepage .eos-service-card-inner {
    transition: none;
  }

  .eos-css.eos-homepage .eos-service-card:hover .eos-service-card-inner,
  .eos-css.eos-homepage .eos-service-card:focus-within .eos-service-card-inner,
  .eos-css.eos-homepage .eos-service-card.is-flipped .eos-service-card-inner {
    transform: none;
  }

  .eos-css.eos-homepage .eos-service-card-front,
  .eos-css.eos-homepage .eos-service-card-back {
    position: relative;
    transform: none;
    backface-visibility: visible;
  }

  .eos-css.eos-homepage .eos-service-card-back {
    margin-top: 12px;
  }
}


/* ----------------------------------------
   14.07 Service Card Responsive Rules
---------------------------------------- */

@media (max-width: 1199px) {
  .eos-css.eos-homepage .eos-service-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .eos-css.eos-homepage .eos-service-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .eos-css.eos-homepage .eos-service-card-grid {
    grid-template-columns: 1fr;
  }

  .eos-css.eos-homepage .eos-service-card,
  .eos-css.eos-homepage .eos-service-card-inner,
  .eos-css.eos-homepage .eos-service-card-front,
  .eos-css.eos-homepage .eos-service-card-back,
  .eos-css.eos-homepage .eos-service-card-static {
    min-height: 210px;
  }

  .eos-css.eos-homepage .eos-service-icon-wrap {
    width: 104px;
    height: 104px;
  }

  .eos-css.eos-homepage .eos-service-icon-wrap img,
  .eos-css.eos-homepage .eos-service-icon {
    width: 82px;
    height: 82px;
  }
}


/* ========================================
   15. Utilities
   Purpose:
   - Keep small reusable layout helpers here.
   - Do not use this section as a dumping ground for page-specific fixes.
   - Prefer page-family modules when styles are tied to a specific page type.
======================================== */


/* ----------------------------------------
   15.01 Width / Bleed Helpers
---------------------------------------- */

.eos-css.eos-full-bleed,
.eos-css .eos-full-bleed {
  width: 100%;
  max-width: 100%;
}

.eos-css .eos-full-width {
  width: 100%;
  max-width: 100%;
}

.eos-css .eos-centered {
  margin-left: auto;
  margin-right: auto;
}

.eos-css .eos-narrow {
  max-width: 840px;
}

.eos-css .eos-wide {
  max-width: var(--eos-content-width);
}


/* ----------------------------------------
   15.02 Text Helpers
---------------------------------------- */

.eos-css .eos-text-center {
  text-align: center;
}

.eos-css .eos-text-left {
  text-align: left;
}

.eos-css .eos-text-muted {
  color: var(--eos-muted);
}

.eos-css .eos-text-light {
  color: rgba(255, 255, 255, 0.92);
}

.eos-css .eos-text-orange {
  color: var(--eos-orange);
}

.eos-css .eos-text-blue {
  color: var(--eos-blue);
}


/* ----------------------------------------
   15.03 Spacing Helpers
---------------------------------------- */

.eos-css .eos-mt-0 {
  margin-top: 0;
}

.eos-css .eos-mt-sm {
  margin-top: 12px;
}

.eos-css .eos-mt-md {
  margin-top: 22px;
}

.eos-css .eos-mt-lg {
  margin-top: 34px;
}

.eos-css .eos-mb-0 {
  margin-bottom: 0;
}

.eos-css .eos-mb-sm {
  margin-bottom: 12px;
}

.eos-css .eos-mb-md {
  margin-bottom: 22px;
}

.eos-css .eos-mb-lg {
  margin-bottom: 34px;
}


/* ----------------------------------------
   15.04 Media Helpers
---------------------------------------- */

.eos-css .eos-img-rounded {
  border-radius: var(--eos-radius);
}

.eos-css .eos-img-shadow {
  box-shadow: var(--eos-shadow-soft);
}

.eos-css .eos-aspect-square {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.eos-css .eos-aspect-video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


/* ----------------------------------------
   15.05 Visibility Helpers
---------------------------------------- */

.eos-css .eos-hidden {
  display: none;
}

@media (max-width: 767px) {
  .eos-css .eos-hide-mobile {
    display: none;
  }
}

@media (min-width: 768px) {
  .eos-css .eos-show-mobile {
    display: none;
  }
}


/* ========================================
   16. Legacy Elementor / Envato Support
   Purpose:
   - Preserve compatibility with the active WordPress / Elementor / Logio setup.
   - Keep theme/plugin support isolated from the EOS design system.
   - Remove only after page-by-page testing confirms it is safe.

   Notes:
   - This section should stay at the bottom of EOS-CSS v6.
   - Do not add new design-system styles here.
   - Avoid !important unless overriding theme/Elementor behavior is unavoidable.
======================================== */


/* ----------------------------------------
   16.01 Elementor / Theme Container Guardrails
   Helps EOS content maintain intended width inside
   Elementor, Logio, and WordPress page wrappers.
---------------------------------------- */

.elementor-widget-container > .eos-css,
.entry-content > .eos-css,
.site-main .eos-css,
.page-content .eos-css {
  width: 100%;
  max-width: 100%;
}

.elementor-widget-container > .eos-css.eos-full-bleed,
.entry-content > .eos-css.eos-full-bleed,
.page-content > .eos-css.eos-full-bleed {
  width: 100%;
  max-width: 100%;
}


/* ----------------------------------------
   16.02 Elementor Text / Widget Safety
   Prevents Elementor defaults from creating
   inconsistent text spacing inside EOS blocks.
---------------------------------------- */

.eos-css .elementor-widget-container p:last-child,
.eos-css p:last-child {
  margin-bottom: 0;
}

.eos-css .elementor-widget-container a {
  color: inherit;
}


/* ----------------------------------------
   16.03 WordPress Image Block Compatibility
   Shared safety for WordPress image blocks used
   inside EOS article, location, and content pages.
---------------------------------------- */

.eos-css figure {
  max-width: 100%;
}

.eos-css figure img {
  max-width: 100%;
  height: auto;
}

.eos-css figcaption {
  box-sizing: border-box;
}


/* ----------------------------------------
   16.04 Form Handoff Safety
   Used where EOS-CSS content hands off to a separate
   Elementor, shortcode, or plugin-rendered form.
---------------------------------------- */

.eos-css + .elementor,
.eos-css + .elementor-section,
.eos-css + .elementor-location-single,
.eos-css + .wp-block-group {
  position: relative;
  z-index: 1;
}


/* ----------------------------------------
   16.05 Legacy Full-Width Compatibility
   Keep minimal. This supports older pages that rely on
   full-width EOS content inside theme containers.
---------------------------------------- */

body .eos-css.eos-full-bleed {
  width: 100%;
  max-width: 100%;
}

body .eos-css .eos-full-width {
  width: 100%;
  max-width: 100%;
}


/* ----------------------------------------
   16.06 Safe Print Fallback
---------------------------------------- */

@media print {
  .eos-css {
    background: #ffffff;
    color: #000000;
  }

  .eos-css a {
    color: #000000;
    text-decoration: underline;
  }

  .eos-css .eos-home-hero,
  .eos-css .eos-hero,
  .eos-css .eos-location-hero,
  .eos-css .eos-about-hero {
    min-height: auto;
    background: #ffffff;
    color: #000000;
  }
}

/* ========================================
   v6.0 Patch 01
   Purpose:
   - Restore full-width EOS page breakout
   - Remove closed FAQ white-space regression
   ======================================== */


/* ----------------------------------------
   Restore Full-Bleed Layout
   Used by Solutions, About EOS, Homepage,
   and Location pages inside boxed theme/
   Elementor containers.
---------------------------------------- */

body .eos-css.eos-full-bleed,
.eos-css.eos-full-bleed{
  position:relative;
  left:50%;
  right:50%;
  width:100vw;
  max-width:100vw;
  margin-left:-50vw;
  margin-right:-50vw;
  overflow:hidden;
}

/* Keep mobile stable and prevent horizontal scroll issues */
@media (max-width:767px){
  body .eos-css.eos-full-bleed,
  .eos-css.eos-full-bleed{
    left:auto;
    right:auto;
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
  }
}


/* ----------------------------------------
   Fix FAQ Closed-State White Space
   Closed FAQ cards should show only the
   orange question bar. Answer padding should
   appear only when the detail is open.
---------------------------------------- */

.eos-css .eos-faq details,
.eos-css details.eos-faq-item{
  padding:0;
}

.eos-css .eos-faq summary,
.eos-css details.eos-faq-item summary{
  margin:0;
  padding:16px 18px;
}

.eos-css .eos-faq details[open],
.eos-css details.eos-faq-item[open]{
  padding:0 18px 16px;
}

.eos-css .eos-faq details[open] summary,
.eos-css details.eos-faq-item[open] summary{
  margin:0 -18px 16px;
}

/* ========================================
   v6.0 Patch 02
   Purpose:
   - Restore homepage service card grid using current live HTML
   - Restore About EOS hero background image
   - Preserve full-width page behavior
   ======================================== */


/* ----------------------------------------
   Homepage Service Cards
   Current live HTML uses:
   .eos-service-card-wrap
   .eos-service-card
   .eos-service-card-face
   NOT .eos-service-card-inner
---------------------------------------- */

.eos-css.eos-homepage .eos-service-map-section .eos-panel{
  overflow:hidden;
}

.eos-css.eos-homepage .eos-service-map-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
  margin-top:24px;
}

.eos-css.eos-homepage .eos-service-card-wrap{
  position:relative;
  min-height:320px;
  perspective:1200px;
  cursor:pointer;
  outline:none;
}

.eos-css.eos-homepage .eos-service-card-wrap.is-rotating{
  display:none;
}

.eos-css.eos-homepage .eos-service-card-wrap.is-rotating.is-active{
  display:block;
}

.eos-css.eos-homepage .eos-service-card{
  position:relative;
  width:100%;
  min-height:320px;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .55s ease;
}

.eos-css.eos-homepage .eos-service-card-wrap.is-revealed .eos-service-card{
  transform:rotateY(180deg);
}

.eos-css.eos-homepage .eos-service-card-face{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  background:#ffffff;
  border:1px solid var(--eos-line);
  border-radius:var(--eos-radius);
  overflow:hidden;
  box-shadow:var(--eos-shadow-soft);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.eos-css.eos-homepage .eos-service-card-front{
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:22px 18px 18px;
  text-align:center;
}

.eos-css.eos-homepage .eos-service-card-front::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  display:block;
  height:5px;
  background:linear-gradient(90deg, var(--eos-blue) 0%, var(--eos-orange) 100%);
}

.eos-css.eos-homepage .eos-service-card-back{
  justify-content:space-between;
  padding:16px 16px 14px;
  background:linear-gradient(135deg, #072340 0%, #0b325c 100%);
  color:#ffffff;
  transform:rotateY(180deg);
}

.eos-css.eos-homepage .eos-service-core-badge,
.eos-css.eos-homepage .eos-service-rotating-badge{
  display:none !important;
}

.eos-css.eos-homepage .eos-service-front-title{
  order:1;
  display:block !important;
  margin:0;
  color:var(--eos-text-dark);
  font-size:1.45rem;
  line-height:1.15;
  font-weight:800;
  text-align:center;
}

.eos-css.eos-homepage .eos-service-icon{
  order:2;
  width:80% !important;
  max-width:80% !important;
  height:auto !important;
  max-height:165px !important;
  object-fit:contain;
  margin:0 auto;
  display:block;
}

.eos-css.eos-homepage .eos-service-front-hint{
  order:3;
  margin-top:auto;
  color:var(--eos-muted);
  font-size:14px;
}

.eos-css.eos-homepage .eos-service-back-label{
  margin:0 0 10px;
  color:#bfddf4;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.2px;
  line-height:1.4;
  text-transform:uppercase;
}

.eos-css.eos-homepage .eos-service-back-title{
  margin:0 0 10px;
  color:#ffffff;
  font-size:18px;
  line-height:1.25;
  font-weight:900;
}

.eos-css.eos-homepage .eos-service-back-text{
  margin:0;
  color:#eaf4fb;
  font-size:13px;
  line-height:1.55;
}

.eos-css.eos-homepage .eos-service-card-actions{
  margin-top:14px;
}

.eos-css.eos-homepage .eos-service-cta{
  width:100%;
  min-height:42px;
  padding:10px 16px;
  font-size:13px;
}


/* ----------------------------------------
   Homepage Service Card Responsive
---------------------------------------- */

@media (max-width:1199px){
  .eos-css.eos-homepage .eos-service-map-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:991px){
  .eos-css.eos-homepage .eos-service-map-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .eos-css.eos-homepage .eos-service-card-wrap,
  .eos-css.eos-homepage .eos-service-card{
    min-height:290px;
  }

  .eos-css.eos-homepage .eos-service-front-title{
    font-size:1.15rem;
  }
}

@media (max-width:767px){
  .eos-css.eos-homepage .eos-service-map-grid{
    grid-template-columns:1fr;
  }

  .eos-css.eos-homepage .eos-service-card-wrap,
  .eos-css.eos-homepage .eos-service-card{
    min-height:270px;
  }

  .eos-css.eos-homepage .eos-service-card-front,
  .eos-css.eos-homepage .eos-service-card-back{
    padding:18px 16px 16px;
  }

  .eos-css.eos-homepage .eos-service-front-title{
    font-size:1.05rem;
  }

  .eos-css.eos-homepage .eos-service-back-text{
    font-size:12.25px;
    line-height:1.46;
  }
}


/* ----------------------------------------
   Restore About EOS Hero Image
   About page uses CSS-driven hero background.
---------------------------------------- */

.eos-css.eos-about-v2 .eos-about-hero{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    linear-gradient(
      rgba(7,35,64,0.66),
      rgba(7,35,64,0.66)
    ),
    url("https://enterpriseordersolutions.com/wp-content/uploads/2026/04/eos-ontario-ca-corporate-office-warehouse.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:#ffffff;
}

.eos-css.eos-about-v2 .eos-about-hero-inner{
  position:relative;
  z-index:2;
  padding:92px 32px;
}

.eos-css.eos-about-v2 .eos-about-hero-title,
.eos-css.eos-about-v2 .eos-about-hero-subtitle{
  color:#ffffff;
}

/* ========================================
   v6.0 Patch 03
   Purpose:
   - Restore homepage hero banner image
   ======================================== */

.eos-css.eos-homepage .eos-home-hero{
  background-image:
    url("https://enterpriseordersolutions.com/wp-content/uploads/2026/04/EOS-Hero-Banner-web-4b.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

/* ========================================
   v6.0 Patch 04
   Purpose:
   - Improve mobile scroll stability on select Solutions and Location pages
   - Reduce black-screen / shaking behavior during mobile scroll
   - Restore mobile images for EOS Nationwide Warehouse Network cards
   ======================================== */


/* ----------------------------------------
   Mobile Rendering Stability
   Helps prevent mobile browser repaint issues
   caused by full-bleed sections, overlays,
   transforms, filters, and Elementor form handoffs.
---------------------------------------- */

@media (max-width: 767px){

  .eos-css.eos-solutions,
  .eos-css.eos-location-page,
  .eos-css.eos-about-v2{
    position: relative;
    overflow-x: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .eos-css.eos-solutions .eos-hero,
  .eos-css.eos-location-page .eos-location-hero,
  .eos-css.eos-about-v2 .eos-about-hero{
    transform: none;
    -webkit-transform: none;
    background-attachment: scroll;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .eos-css.eos-solutions .eos-hero::before,
  .eos-css.eos-location-page .eos-location-hero-overlay{
    transform: none;
    -webkit-transform: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .eos-css.eos-solutions .eos-hero-panel{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .eos-css.eos-solutions .eos-process-step,
  .eos-css.eos-solutions .eos-card,
  .eos-css.eos-solutions .eos-stat,
  .eos-css.eos-solutions .eos-workflow-card,
  .eos-css.eos-location-page .eos-location-snapshot-card,
  .eos-css.eos-location-page .eos-location-access-card,
  .eos-css.eos-location-page .eos-location-capability-card,
  .eos-css.eos-location-page .eos-location-visibility-card,
  .eos-css.eos-location-page .eos-location-metric-card{
    transform: none;
    -webkit-transform: none;
    transition: none;
  }

  .eos-css.eos-solutions .eos-process-step:hover,
  .eos-css.eos-solutions .eos-card:hover,
  .eos-css.eos-solutions .eos-workflow-card:hover,
  .eos-css.eos-location-page .eos-location-image-card:hover{
    transform: none;
    -webkit-transform: none;
  }
}


/* ----------------------------------------
   Transportation Page Mobile Stability
   Restores the v5.4 protection for the
   transportation/contact handoff area.
---------------------------------------- */

.eos-transportation-page .eos-contact-transition{
  position: relative;
  z-index: 2;
  background: #f15a24;
  overflow: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.eos-transportation-page .eos-contact-box{
  position: relative;
  z-index: 3;
}

.eos-transportation-page .eos-contact-eyebrow{
  color: #ffffff;
}

@media (max-width: 767px){

  .eos-transportation-page .eos-contact-transition{
    min-height: 260px;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .eos-transportation-page + .elementor,
  .eos-transportation-page ~ .elementor,
  .eos-transportation-page ~ section,
  .eos-transportation-page ~ div{
    background: #ffffff;
  }

  .elementor-widget-form,
  .elementor-form{
    transition: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .elementor-field-group,
  .elementor-field,
  .elementor-button{
    transition: none;
  }
}


/* ----------------------------------------
   Mobile Location Network Images
   Ensures EOS Nationwide Warehouse Network
   cards keep their images visible on mobile.
---------------------------------------- */

@media (max-width: 767px){

  .eos-css.eos-about-v2 .eos-locations-grid,
  .eos-css.eos-location-page .eos-locations-grid{
    grid-template-columns: 1fr;
  }

  .eos-css.eos-about-v2 .eos-location-image-wrap,
  .eos-css.eos-location-page .eos-location-image-wrap{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eaf3fb;
  }

  .eos-css.eos-about-v2 .eos-location-image,
  .eos-css.eos-location-page .eos-location-image{
    display: block;
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
  }

  .eos-css.eos-about-v2 .eos-location-card,
  .eos-css.eos-location-page .eos-location-card{
    overflow: hidden;
  }
}

/* ============================
   Solution proof strip
   Thin 5-card proof row
   ============================ */

.eos-css.eos-solutions .eos-solution-proof-strip{
  padding-top:26px;
  padding-bottom:30px;
  background:#0B325C;
}

.eos-css.eos-solutions .eos-solution-proof-strip .eos-wrap{
  max-width:1680px;
  width:96%;
}

.eos-css.eos-solutions .eos-solution-proof-strip .eos-eyebrow{
  color:#E35205;
  margin-bottom:8px;
}

.eos-css.eos-solutions .eos-solution-proof-strip .eos-heading{
  max-width:1180px;
  margin-bottom:18px;
  color:#FFFFFF;
  font-size:clamp(26px, 2.2vw, 38px);
  line-height:1.12;
}

.eos-css.eos-solutions .eos-proof-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:16px;
  width:100%;
}

.eos-css.eos-solutions .eos-proof-card{
  min-height:108px;
  padding:15px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  color:#FFFFFF;
}

.eos-css.eos-solutions .eos-proof-card strong{
  display:block;
  margin-bottom:6px;
  color:#FFFFFF;
  font-size:16px;
  line-height:1.22;
}

.eos-css.eos-solutions .eos-proof-card p{
  margin:0;
  color:rgba(255,255,255,.92);
  font-size:14px;
  line-height:1.45;
}

@media (max-width:1200px){
  .eos-css.eos-solutions .eos-proof-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media (max-width:900px){
  .eos-css.eos-solutions .eos-proof-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:767px){
  .eos-css.eos-solutions .eos-solution-proof-strip{
    padding-top:24px;
    padding-bottom:26px;
  }

  .eos-css.eos-solutions .eos-proof-grid{
    grid-template-columns:1fr;
  }

  .eos-css.eos-solutions .eos-proof-card{
    min-height:auto;
  }
}

/* Mobile article containment fix:
   Keeps EOS article shells and cards inside the visible viewport on phones.
   This prevents jump menus, intro cards, section cards, and return cards from
   extending past the right edge when WordPress, Elementor, or LiteSpeed UCSS
   wraps the article content in a wider mobile container. */

@media (max-width: 767px) {
  .eos-css.eos-article {
    max-width: 100%;
    overflow-x: hidden;
  }

  .eos-css.eos-article .eos-article-shell {
    width: min(94vw, 980px);
    max-width: calc(100vw - 24px);
    margin-left: auto;
    margin-right: auto;
  }

  .eos-css.eos-article .eos-intro-card,
  .eos-css.eos-article .eos-jump-menu,
  .eos-css.eos-article .eos-section-card,
  .eos-css.eos-article .eos-return-card {
    max-width: 100%;
    box-sizing: border-box;
  }
}