/* ==============================
   EOS-CSS v6.22 Implementation
   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 FAQ Section */
/* 12.13 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 */

/* 17. Logistics Guides Hub Phase 2 */
/* 17.01 Logistics Resource Module */
/* 17.02 Multi-Series Pillar Parent Pages */
/* 17.03 Category Series Pages */
/* 17.04 Hybrid Hub Variant */
/* 17.05 Consolidated Phase 2 Hub Refinement */
/* 17.06 Mini-Hero Card Refinement */

/* ==============================
   EOS-CSS v6.22 Implementation Release
   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 #why-eos .eos-lead {
  max-width: 900px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 20px;
  line-height: 1.65;
}

.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);
}

.eos-css.eos-solutions #solution-solves,
.eos-css.eos-solutions #challenge {
  padding-top: 68px;
  padding-bottom: 68px;
}

.eos-css.eos-solutions #solution-solves .eos-divider,
.eos-css.eos-solutions #challenge .eos-divider {
  margin-bottom: 18px;
}


/* ------------------------------
   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: "\2192";
  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);
}

/* ==============================
   Solution audio feature
   Compact podcast preview
============================== */

.eos-css.eos-solutions .eos-audio-feature {
  display: grid;
  justify-items: start;
  gap: 10px;
  max-width: 760px;
  margin: 26px 0 22px;
  color: var(--eos-text-dark);
  font-size: 16px;
  line-height: 1.5;
}

.eos-css.eos-solutions .eos-audio-feature p,
.eos-css.eos-solutions .eos-audio-feature span {
  margin: 0;
}

.eos-css.eos-solutions .eos-audio-feature strong {
  color: var(--eos-text-dark);
  font-weight: 900;
}

.eos-css.eos-solutions .eos-audio-feature audio {
  display: block;
  width: min(360px, 100%);
  max-width: 100%;
  height: 40px;
}

.eos-css.eos-solutions .eos-challenge-layout {
  align-items: start;
  gap: 64px;
}

.eos-css.eos-solutions .eos-challenge-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eos-css.eos-solutions .eos-challenge-item {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 22px 18px 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 4px solid var(--eos-orange);
  border-radius: 12px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

.eos-css.eos-solutions .eos-challenge-item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(227, 82, 5, 0.12),
    transparent 42%);
}

.eos-css.eos-solutions .eos-challenge-marker {
  position: relative;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 8px;
  background: var(--eos-orange);
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(227, 82, 5, 0.16);
}

.eos-css.eos-solutions .eos-challenge-copy {
  position: relative;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 18px;
  line-height: 1.5;
}

.eos-css.eos-solutions .eos-challenge-copy strong {
  color: #ffffff;
  font-size: 19px;
  font-weight: 900;
}

.eos-css.eos-solutions .eos-section-light .eos-challenge-item {
  background: #ffffff;
  border-color: rgba(0, 99, 178, 0.16);
  box-shadow: var(--eos-shadow-soft);
}

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

.eos-css.eos-solutions .eos-section-light .eos-challenge-copy 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: 24px;
  margin-top: 34px;
}

.eos-css.eos-solutions .eos-process-step {
  position: relative;
  overflow: visible;
  min-height: 242px;
  padding: 30px 26px 30px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid rgba(0, 99, 178, 0.18);
  border-radius: 18px;
  box-shadow: var(--eos-shadow-soft);
  color: var(--eos-text-dark);
  font-size: 17px;
  line-height: 1.7;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.eos-css.eos-solutions .eos-process-step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--eos-blue), var(--eos-orange));
  border-radius: 18px 18px 0 0;
}

.eos-css.eos-solutions .eos-process-step:hover {
  border-color: rgba(0, 99, 178, 0.28);
  box-shadow: 0 18px 42px rgba(15, 36, 56, 0.14);
  transform: translateY(-2px);
}

.eos-css.eos-solutions .eos-process-step-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  margin-bottom: 8px;
}

.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;
  color: inherit;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 900;
  text-align: center;
}

.eos-css.eos-solutions .eos-process-step p {
  max-width: 440px;
  margin: 0 auto;
  color: #4d4d4d;
  font-size: 18px;
  line-height: 1.58;
  text-align: left;
}

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

.eos-css.eos-solutions .eos-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  width: 76px;
  height: 76px;
  margin: 0 auto;
  background: var(--eos-blue);
  border-radius: 999px;
  color: #ffffff;
  font-size: 36px;
  font-weight: 500;
  box-shadow: 0 0 0 14px #d7e9f8;
}

.eos-css.eos-solutions .eos-process-step > .eos-step-number {
  margin-bottom: 28px;
}

.eos-css.eos-solutions .eos-process-step-head .eos-step-number {
  margin-bottom: 0;
}


/* ------------------------------
   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-dark .eos-card h3 {
  font-size: 22px;
  line-height: 1.24;
}

.eos-css.eos-solutions .eos-section-dark .eos-card-body {
  color: #d1d5db;
  font-size: 17px;
  line-height: 1.7;
}

.eos-css.eos-solutions .eos-section-dark .eos-card p {
  font-size: 17px;
  line-height: 1.7;
}

.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;
  font-size: 17px;
  line-height: 1.7;
}

.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 {
  margin: 0;
}

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


/* ------------------------------
   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-cta-box {
    grid-template-columns: 1fr 1fr;
  }

  .eos-css.eos-solutions .eos-process-grid,
  .eos-css.eos-solutions .eos-card-grid,
  .eos-css.eos-solutions .eos-stat-row {
    grid-template-columns: 1fr;
  }

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

  .eos-css.eos-solutions .eos-process-step h3 {
    margin-left: 0;
    margin-right: 0;
  }

  .eos-css.eos-solutions .eos-process-step p {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

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

  .eos-css.eos-solutions #solution-solves,
  .eos-css.eos-solutions #challenge {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .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-process-step {
    min-height: auto;
    padding-top: 28px;
    padding-bottom: 28px;
    font-size: 18px;
    line-height: 1.7;
  }

  .eos-css.eos-solutions #why-eos .eos-lead {
    font-size: 18px;
    line-height: 1.65;
  }

  .eos-css.eos-solutions .eos-challenge-layout {
    gap: 28px;
  }

  .eos-css.eos-solutions .eos-challenge-list {
    gap: 12px;
  }

  .eos-css.eos-solutions .eos-challenge-item {
    gap: 14px;
    padding: 17px 18px 17px 16px;
    border-radius: 10px;
  }

  .eos-css.eos-solutions .eos-challenge-marker {
    width: 9px;
    height: 9px;
    margin-top: 8px;
  }

  .eos-css.eos-solutions .eos-challenge-copy {
    font-size: 17px;
    line-height: 1.58;
  }

  .eos-css.eos-solutions .eos-challenge-copy strong {
    display: block;
    margin-bottom: 3px;
    font-size: 18px;
    line-height: 1.25;
  }

  .eos-css.eos-solutions .eos-process-step-head {
    align-items: stretch;
    gap: 20px;
  }

  .eos-css.eos-solutions .eos-process-step h3 {
    margin-left: 0;
    margin-right: 0;
    font-size: 24px;
    line-height: 1.18;
  }

  .eos-css.eos-solutions .eos-process-step p {
    max-width: 100%;
    margin-left: 8px;
    margin-right: 8px;
    color: #2f3a45;
    font-size: 18px;
    line-height: 1.66;
  }

  .eos-css.eos-solutions .eos-section-dark .eos-process-step p {
    color: rgba(255, 255, 255, 0.84);
  }

  .eos-css.eos-solutions .eos-step-number {
    width: 64px;
    height: 64px;
    font-size: 30px;
    box-shadow: 0 0 0 10px #eaf3fb;
  }

  .eos-css.eos-solutions .eos-process-step > .eos-step-number {
    margin-bottom: 22px;
  }

  .eos-css.eos-solutions .eos-section-dark .eos-card h3 {
    font-size: 23px;
    line-height: 1.25;
  }

  .eos-css.eos-solutions .eos-section-dark .eos-card-body {
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.7;
  }

  .eos-css.eos-solutions .eos-section-dark .eos-card p {
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.7;
  }

  .eos-css.eos-solutions .eos-stat {
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.7;
  }

  .eos-css.eos-solutions .eos-stat p,
  .eos-css.eos-solutions .eos-stat span {
    color: rgba(255, 255, 255, 0.86);
    font-size: 18px;
    line-height: 1.7;
  }

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

  .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 {
  --eos-article-body-size: 16px;
  --eos-article-body-line: 1.72;
  background: var(--eos-bg);
  color: var(--eos-text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--eos-article-body-size);
  line-height: var(--eos-article-body-line);
}

.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: 0;
  list-style: none;
}

.eos-css.eos-article .eos-jump-menu li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 26px;
  color: var(--eos-muted);
  font-size: var(--eos-article-body-size);
  line-height: 1.52;
}

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

.eos-css.eos-article .eos-jump-menu li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.76em;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--eos-orange);
  transform: translateY(-50%);
}

.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);
  font-size: var(--eos-article-body-size);
  line-height: var(--eos-article-body-line);
}

.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(28px, 2.6vw, 34px);
  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);
  font-size: var(--eos-article-body-size);
  line-height: var(--eos-article-body-line);
}

.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 24px 18px;
  padding: 0;
  list-style: none;
}

.eos-css.eos-article .eos-list li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 20px;
  color: var(--eos-muted);
  font-size: var(--eos-article-body-size);
  line-height: var(--eos-article-body-line);
}

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

.eos-css.eos-article .eos-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(var(--eos-article-body-line) * 0.5em);
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 1px;
  transform: translateY(-50%);
}


/* ------------------------------
   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(28px, 2.6vw, 34px);
  line-height: 1.16;
  font-weight: 900;
}

.eos-css.eos-article .eos-faq details {
  font-size: var(--eos-article-body-size);
  line-height: var(--eos-article-body-line);
}

.eos-css.eos-article .eos-faq summary {
  font-size: var(--eos-article-body-size);
  line-height: 1.45;
}

.eos-css.eos-article .eos-faq details p {
  margin: 0;
  color: inherit;
  font-size: var(--eos-article-body-size);
  line-height: var(--eos-article-body-line);
}


/* ------------------------------
   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 .eos-list {
    margin-left: 10px;
  }

  .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: 0;
  list-style: none;
}

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

.eos-css.eos-about-v2 .eos-about-transform-card li::before,
.eos-css.eos-about .eos-about-transform-card li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
}

.eos-css.eos-about-v2 .eos-about-transform-card-muted li::before,
.eos-css.eos-about .eos-about-transform-card-muted li::before {
  content: "\2022";
  color: var(--eos-orange);
}

.eos-css.eos-about-v2 .eos-about-transform-card-strong li::before,
.eos-css.eos-about .eos-about-transform-card-strong li::before {
  content: "\25B6";
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.72em;
  transform: translateY(0.32em);
}

.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-fulfillment-photo-header,
.eos-css.eos-about .eos-fulfillment-photo-header {
  margin-top: 64px;
}

.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-audio-feature,
.eos-css.eos-about .eos-about-audio-feature {
  display: grid;
  justify-items: start;
  gap: 10px;
  max-width: 760px;
  margin: 26px 0 22px;
  color: var(--eos-text-dark);
  font-size: 16px;
  line-height: 1.5;
}

.eos-css.eos-about-v2 .eos-about-audio-feature p,
.eos-css.eos-about .eos-about-audio-feature p {
  margin: 0;
}

.eos-css.eos-about-v2 .eos-about-audio-feature strong,
.eos-css.eos-about .eos-about-audio-feature strong {
  color: var(--eos-text-dark);
  font-weight: 900;
}

.eos-css.eos-about-v2 .eos-about-audio-feature audio,
.eos-css.eos-about .eos-about-audio-feature audio {
  display: block;
  width: min(360px, 100%);
  max-width: 100%;
  height: 40px;
}

.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 FAQ Section
------------------------------ */

.eos-css.eos-about-v2 .eos-faq-section {
  padding: 88px 0 80px;
  background: #f8fafc;
}

.eos-css.eos-about-v2 .eos-faq-section h2 {
  margin: 0 0 24px;
}


/* ------------------------------
   12.13 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-faq-section {
    padding: 68px 0 64px;
  }

  .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-fulfillment-photo-header,
  .eos-css.eos-about .eos-fulfillment-photo-header {
    margin-top: 44px;
  }

  .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-solution-proof-strip .eos-section-intro,
.eos-css.eos-solutions .eos-solution-proof-strip p.eos-section-intro{
  max-width:1180px;
  margin:0 0 24px;
  color:rgba(255,255,255,.92) !important;
  font-size:18px;
  line-height:1.65;
  font-weight:500;
}

.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;
  }
}

/* ==============================
   17.01 Logistics Resource Module
   Phase 2 addition for Logistics Guides hub and multi-series pillars

   Intended placement:
   - Included in the active EOS-CSS v6.22 library, or
   - Load as a page-level CSS module for Logistics Guides Phase 2.

   Scope:
   - .eos-css.eos-logistics-resource
   - .eos-css.eos-pillar .eos-pillar-series
============================== */

/* ------------------------------
   Logistics Guides Hub Resource Index
------------------------------ */

.eos-css.eos-logistics-resource {
  background: #ffffff;
  color: var(--eos-text);
}

.eos-css.eos-logistics-resource .eos-lr-header {
  padding: 42px 0 26px;
  background: #ffffff;
  border-bottom: 1px solid var(--eos-line);
}

.eos-css.eos-logistics-resource .eos-lr-eyebrow {
  margin: 0 0 10px;
  color: var(--eos-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.6px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-logistics-resource h1 {
  margin: 0 0 12px;
  color: var(--eos-text);
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.05;
  letter-spacing: 0;
}

.eos-css.eos-logistics-resource .eos-lr-deck {
  max-width: 980px;
  margin: 0;
  color: var(--eos-muted);
  font-size: 18px;
  line-height: 1.75;
}

.eos-css.eos-logistics-resource .eos-lr-shell {
  padding: 30px 0 64px;
}

.eos-css.eos-logistics-resource .eos-lr-layout {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.eos-css.eos-logistics-resource .eos-lr-toc {
  position: sticky;
  top: 24px;
  padding: 20px 18px;
  background: #f8fafc;
  border: 1px solid var(--eos-line);
  border-radius: 10px;
}

.eos-css.eos-logistics-resource .eos-lr-toc h2 {
  margin: 0 0 12px;
  color: var(--eos-text);
  font-size: 18px;
  line-height: 1.25;
}

.eos-css.eos-logistics-resource .eos-lr-toc ol {
  margin: 0;
  padding-left: 20px;
}

.eos-css.eos-logistics-resource .eos-lr-toc li {
  margin: 0 0 9px;
  color: var(--eos-muted);
  font-size: 14px;
  line-height: 1.45;
}

.eos-css.eos-logistics-resource .eos-lr-toc a {
  color: var(--eos-blue);
  text-decoration: none;
}

.eos-css.eos-logistics-resource .eos-lr-toc a:hover {
  color: var(--eos-orange);
  text-decoration: underline;
}

.eos-css.eos-logistics-resource .eos-lr-main {
  min-width: 0;
}

.eos-css.eos-logistics-resource .eos-lr-intro,
.eos-css.eos-logistics-resource .eos-lr-workflow,
.eos-css.eos-logistics-resource .eos-lr-index,
.eos-css.eos-logistics-resource .eos-lr-note,
.eos-css.eos-logistics-resource .eos-lr-updates {
  margin: 0 0 30px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--eos-line);
}

.eos-css.eos-logistics-resource .eos-lr-updates {
  border-bottom: 0;
}

.eos-css.eos-logistics-resource h2 {
  margin: 0 0 14px;
  color: var(--eos-text);
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: 0;
}

.eos-css.eos-logistics-resource h3 {
  margin: 0 0 8px;
  color: var(--eos-text);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}

.eos-css.eos-logistics-resource p {
  color: #374151;
  font-size: 16px;
  line-height: 1.75;
}

.eos-css.eos-logistics-resource a {
  color: var(--eos-blue);
  font-weight: 700;
}

.eos-css.eos-logistics-resource a:hover {
  color: var(--eos-orange);
  text-decoration: underline;
}

.eos-css.eos-logistics-resource .eos-lr-flow-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eos-css.eos-logistics-resource .eos-lr-flow-list li {
  margin: 0;
  padding: 8px 11px;
  background: #f8fafc;
  border: 1px solid var(--eos-line);
  border-radius: 8px;
  color: #1f2937;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.eos-css.eos-logistics-resource .eos-lr-entry {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--eos-line-soft);
}

.eos-css.eos-logistics-resource .eos-lr-entry:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.eos-css.eos-logistics-resource .eos-lr-entry-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: 2px;
  background: #eaf3fb;
  border: 1px solid #d9e6f2;
  border-radius: 999px;
  color: var(--eos-blue);
  font-size: 14px;
  font-weight: 900;
}

.eos-css.eos-logistics-resource .eos-lr-meta {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
}

.eos-css.eos-logistics-resource .eos-lr-meta div {
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid #edf2f7;
}

.eos-css.eos-logistics-resource .eos-lr-meta dt {
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
}

.eos-css.eos-logistics-resource .eos-lr-meta dd {
  margin: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.6;
}

.eos-css.eos-logistics-resource .eos-lr-status {
  color: var(--eos-orange);
  font-weight: 800;
}

.eos-css.eos-logistics-resource .eos-lr-note {
  padding: 22px 24px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
}

.eos-css.eos-logistics-resource .eos-lr-note h2 {
  font-size: 22px;
}

.eos-css.eos-logistics-resource .eos-lr-feed {
  margin-top: 16px;
  padding: 18px;
  background: #f8fafc;
  border: 1px dashed #b8c8d8;
  border-radius: 10px;
  overflow: hidden;
}

/* ------------------------------
   17.02 Multi-Series Pillar Parent Pages
------------------------------ */

.eos-css.eos-pillar .eos-pillar-series {
  display: grid;
  gap: 28px;
}

.eos-css.eos-pillar .eos-series-block {
  padding-top: 28px;
  border-top: 1px solid var(--eos-line-soft);
}

.eos-css.eos-pillar .eos-series-block:first-child {
  padding-top: 0;
  border-top: 0;
}

.eos-css.eos-pillar .eos-series-kicker {
  display: inline-block;
  margin: 0 0 10px;
  color: var(--eos-orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-pillar .eos-series-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
  margin-bottom: 22px;
}

.eos-css.eos-pillar .eos-series-head h2 {
  margin-bottom: 8px;
}

.eos-css.eos-pillar .eos-series-head p {
  max-width: 880px;
}

.eos-css.eos-pillar .eos-series-link {
  align-self: center;
}

.eos-css.eos-pillar .eos-pillar-audio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.eos-css.eos-pillar .eos-pillar-audio {
  min-width: 0;
  padding: 18px 18px 17px;
  background: #f8fafc;
  border: 1px solid #d9e6f2;
  border-radius: 10px;
}

.eos-css.eos-pillar .eos-pillar-audio p {
  margin: 0 0 10px;
  color: #374151;
  font-size: 14px;
  line-height: 1.55;
}

.eos-css.eos-pillar .eos-pillar-audio p strong {
  color: #111827;
}

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

.eos-css.eos-pillar .eos-article-card.is-coming-soon {
  opacity: 0.82;
}

.eos-css.eos-pillar .eos-article-card.is-coming-soon .eos-article-link,
.eos-css.eos-pillar .eos-card-status {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin-top: auto;
  color: var(--eos-orange);
  font-size: 14px;
  font-weight: 900;
}

/* ------------------------------
   17.03 Category Series Pages
   Middle layer between Logistics Guides hub and article series pages.
------------------------------ */

.eos-css.eos-category-series {
  background: #ffffff;
  color: var(--eos-text);
}

.eos-css.eos-category-series .eos-cs-hero {
  width: min(1240px, calc(100% - 32px));
  margin: 24px auto 0;
  padding: 58px 34px 54px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--eos-blue) 0%, #0A4F8A 100%);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(0, 99, 178, 0.18);
}

.eos-css.eos-category-series .eos-cs-eyebrow {
  margin: 0 0 10px;
  color: #bfddf4;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-category-series .eos-cs-hero h1 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0;
}

.eos-css.eos-category-series .eos-cs-hero p:last-child {
  max-width: 980px;
  margin: 0;
  color: #eaf4fb;
  font-size: 18px;
  line-height: 1.75;
}

.eos-css.eos-category-series .eos-cs-shell {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
  padding: 38px 0 64px;
}

.eos-css.eos-category-series .eos-cs-section {
  margin: 0 0 28px;
}

.eos-css.eos-category-series .eos-cs-panel {
  padding: 28px 28px 26px;
  background: #ffffff;
  border: 1px solid var(--eos-line);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.eos-css.eos-category-series .eos-cs-panel h2,
.eos-css.eos-category-series .eos-cs-section-head h2 {
  margin: 0 0 12px;
  color: var(--eos-text);
  font-size: 28px;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: 0;
}

.eos-css.eos-category-series .eos-cs-panel p,
.eos-css.eos-category-series .eos-cs-section-head p {
  max-width: 920px;
  margin: 0 0 14px;
  color: #374151;
  font-size: 16px;
  line-height: 1.75;
}

.eos-css.eos-category-series .eos-cs-panel p:last-child,
.eos-css.eos-category-series .eos-cs-section-head p:last-child {
  margin-bottom: 0;
}

.eos-css.eos-category-series .eos-cs-section-head {
  margin-bottom: 18px;
}

.eos-css.eos-category-series .eos-cs-section-kicker {
  margin: 0 0 8px;
  color: var(--eos-blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-category-series .eos-cs-series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 22px;
}

.eos-css.eos-category-series .eos-cs-series-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--eos-line);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.eos-css.eos-category-series .eos-cs-series-card::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--eos-blue), var(--eos-orange));
}

.eos-css.eos-category-series .eos-cs-series-image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f1f5f9;
  border-bottom: 1px solid var(--eos-line-soft);
  text-decoration: none;
}

.eos-css.eos-category-series .eos-cs-series-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.eos-css.eos-category-series .eos-cs-series-image:hover img {
  opacity: 0.9;
  transform: scale(1.02);
}

.eos-css.eos-category-series .eos-cs-series-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 22px 22px;
}

.eos-css.eos-category-series .eos-cs-badge {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 10px;
  padding: 5px 9px;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .8px;
  line-height: 1.35;
  text-transform: uppercase;
}

.eos-css.eos-category-series .eos-cs-series-card h3 {
  margin: 0 0 10px;
  color: var(--eos-text);
  font-size: 23px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
}

.eos-css.eos-category-series .eos-cs-series-card p {
  margin: 0 0 16px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.7;
}

.eos-css.eos-category-series .eos-cs-audience {
  margin: 0 0 16px;
  padding: 12px 13px;
  color: #374151;
  background: #f8fafc;
  border: 1px solid var(--eos-line-soft);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.eos-css.eos-category-series .eos-cs-audience strong {
  color: #111827;
}

.eos-css.eos-category-series .eos-cs-topics {
  margin: 0 0 28px;
  padding: 12px 13px;
  color: #374151;
  background: #ffffff;
  border: 1px solid var(--eos-line-soft);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.eos-css.eos-category-series .eos-cs-topics strong {
  color: #111827;
}

.eos-css.eos-category-series .eos-cs-meta {
  display: grid;
  gap: 9px;
  margin: 0 0 18px;
  padding: 14px 0 0;
  border-top: 1px solid var(--eos-line-soft);
}

.eos-css.eos-category-series .eos-cs-meta div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
}

.eos-css.eos-category-series .eos-cs-meta dt {
  color: #111827;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
  text-transform: uppercase;
}

.eos-css.eos-category-series .eos-cs-meta dd {
  margin: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.55;
}

.eos-css.eos-category-series .eos-cs-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

.eos-css.eos-category-series .eos-cs-primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 16px;
  color: #ffffff;
  background: var(--eos-blue);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
}

.eos-css.eos-category-series .eos-cs-primary-link:hover {
  color: #ffffff;
  background: #00579A;
  text-decoration: none;
}

.eos-css.eos-category-series .eos-cs-workflow-panel {
  padding: 26px 26px 24px;
  background: #f8fafc;
  border: 1px solid var(--eos-line);
  border-radius: 14px;
}

.eos-css.eos-category-series .eos-cs-workflow-panel h2 {
  margin: 0 0 10px;
  color: var(--eos-text);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
}

.eos-css.eos-category-series .eos-cs-workflow-panel p {
  max-width: 860px;
  margin: 0 0 18px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.7;
}

.eos-css.eos-category-series .eos-cs-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eos-css.eos-category-series .eos-cs-flow li {
  display: contents;
}

.eos-css.eos-category-series .eos-cs-flow a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  color: #1f2937;
  background: #ffffff;
  border: 1px solid var(--eos-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-decoration: none;
}

.eos-css.eos-category-series .eos-cs-flow a.is-current {
  color: #ffffff;
  background: var(--eos-orange);
  border-color: var(--eos-orange);
}

.eos-css.eos-category-series .eos-cs-flow a.eos-cs-flow-muted {
  color: #64748b;
  background: #f1f5f9;
  border-color: #e2e8f0;
  cursor: default;
  pointer-events: none;
}

.eos-css.eos-category-series .eos-cs-flow a:hover {
  color: #ffffff;
  background: var(--eos-blue);
  border-color: var(--eos-blue);
  text-decoration: none;
}

.eos-css.eos-category-series .eos-cs-flow-arrow {
  align-self: center;
  color: var(--eos-orange);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.eos-css.eos-category-series .eos-cs-flow.eos-cs-supporting-flow {
  margin-top: 34px;
}

.eos-css.eos-category-series .eos-cs-footer {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto 56px;
  padding: 42px 30px;
  color: #ffffff;
  background: var(--eos-teal);
  border-radius: 16px;
  text-align: center;
}

.eos-css.eos-category-series .eos-cs-footer h2 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: 0;
}

.eos-css.eos-category-series .eos-cs-footer p {
  max-width: 820px;
  margin: 0 auto 24px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 16px;
  line-height: 1.7;
}

.eos-css.eos-category-series .eos-cs-footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  color: var(--eos-teal);
  background: #ffffff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
}

.eos-css.eos-category-series .eos-cs-footer-link:hover {
  color: #ffffff;
  background: var(--eos-orange);
  text-decoration: none;
}

@media (max-width: 1024px) {
  .eos-css.eos-logistics-resource .eos-lr-layout {
    grid-template-columns: 1fr;
  }

  .eos-css.eos-logistics-resource .eos-lr-toc {
    position: static;
  }

  .eos-css.eos-pillar .eos-series-head {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 767px) {
  .eos-css.eos-category-series .eos-cs-hero {
    width: min(100% - 20px, 1240px);
    margin-top: 12px;
    padding: 42px 22px 36px;
    border-radius: 14px;
  }

  .eos-css.eos-category-series .eos-cs-shell {
    width: min(100% - 20px, 1240px);
    padding-top: 28px;
  }

  .eos-css.eos-category-series .eos-cs-panel,
  .eos-css.eos-category-series .eos-cs-workflow-panel {
    padding: 22px 18px 20px;
  }

  .eos-css.eos-category-series .eos-cs-meta div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .eos-css.eos-category-series .eos-cs-flow {
    display: grid;
    grid-template-columns: 1fr;
  }

  .eos-css.eos-category-series .eos-cs-flow li {
    display: grid;
    gap: 6px;
  }

  .eos-css.eos-category-series .eos-cs-flow a {
    justify-content: center;
    width: 100%;
  }

  .eos-css.eos-category-series .eos-cs-flow-arrow {
    justify-self: center;
    font-size: 0;
  }

  .eos-css.eos-category-series .eos-cs-flow-arrow::after {
    content: "\2193";
    font-size: 18px;
  }

  .eos-css.eos-category-series .eos-cs-footer {
    width: min(100% - 20px, 1240px);
    padding: 34px 22px;
  }

  .eos-css.eos-category-series .eos-cs-footer-link,
  .eos-css.eos-category-series .eos-cs-primary-link {
    width: 100%;
  }

  .eos-css.eos-logistics-resource .eos-lr-header {
    padding: 34px 0 22px;
  }

  .eos-css.eos-logistics-resource .eos-lr-shell {
    padding-top: 22px;
  }

  .eos-css.eos-logistics-resource .eos-lr-entry {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .eos-css.eos-logistics-resource .eos-lr-meta div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .eos-css.eos-logistics-resource .eos-lr-toc {
    padding: 18px 16px;
  }
}

/* ==============================
   17.05 Consolidated Phase 2 Hub Refinement
   v6.22 consolidated logistics resource module

   Notes:
   - Replaces the deprecated Hybrid Compact-Card Hub Variant.
   - Supports the Logistics Guides hub, icon/card headers, workflow pills,
     podcast cards, article-series links, RSS/news section, and teal navigation band.
============================== */

.eos-css.eos-logistics-resource,
.eos-css.eos-logistics-resource * {
  box-sizing: border-box;
}

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

.eos-css.eos-logistics-resource .eos-wrap {
  width: 100%;
  max-width: min(1720px, 96vw);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.eos-css.eos-logistics-resource .eos-lr-hybrid-hero {
  width: auto;
  margin: 0;
  padding: 84px 0 72px;
  color: #ffffff;
  background: linear-gradient(135deg, #0F2438 0%, #173B5F 58%, #0063B2 100%);
  border-radius: 0;
}

.eos-css.eos-logistics-resource .eos-lr-eyebrow {
  margin: 0 0 12px;
  color: #E35205;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.8px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-logistics-resource .eos-lr-hybrid-hero h1 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.02;
  font-weight: 900;
}

.eos-css.eos-logistics-resource .eos-lr-deck {
  max-width: 940px;
  margin: 0;
  color: #E6EEF6;
  font-size: 18px;
  line-height: 1.75;
}

.eos-css.eos-logistics-resource .eos-lr-orientation,
.eos-css.eos-logistics-resource .eos-lr-hub-grid,
.eos-css.eos-logistics-resource .eos-home-rss {
  margin-top: 42px;
}

.eos-css.eos-logistics-resource .eos-lr-workflow,
.eos-css.eos-logistics-resource .eos-panel {
  margin-bottom: 0;
  padding: 34px;
  background: #ffffff;
  border: 1px solid #D9E2EC;
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}

.eos-css.eos-logistics-resource .eos-lr-workflow h2,
.eos-css.eos-logistics-resource .eos-lr-section-title,
.eos-css.eos-logistics-resource .eos-home-section-head h2 {
  margin: 0 0 14px;
  color: #111827;
  line-height: 1.15;
}

.eos-css.eos-logistics-resource .eos-lr-workflow-copy,
.eos-css.eos-logistics-resource .eos-section-intro,
.eos-css.eos-logistics-resource .eos-lr-card-description,
.eos-css.eos-logistics-resource .eos-home-rss-box p,
.eos-css.eos-logistics-resource .eos-lr-away-nav p {
  color: #4B5563;
  line-height: 1.75;
}

.eos-css.eos-logistics-resource .eos-lr-flow-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.eos-css.eos-logistics-resource .eos-lr-flow-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.eos-css.eos-logistics-resource .eos-lr-flow-list a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 16px;
  color: #0063B2;
  background: #EAF3FB;
  border: 1px solid rgba(0, 99, 178, .16);
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
}

.eos-css.eos-logistics-resource .eos-lr-flow-list a:hover {
  color: #ffffff;
  background: #E35205;
  border-color: #E35205;
  text-decoration: none;
}

.eos-css.eos-logistics-resource .eos-lr-flow-list a.is-current {
  color: #ffffff;
  background: #0F2438;
  border-color: #0F2438;
}

.eos-css.eos-logistics-resource .eos-lr-flow-list a.is-current:hover {
  color: #ffffff;
  background: #0F2438;
  border-color: #0F2438;
}

.eos-css.eos-logistics-resource .eos-lr-flow-muted {
  color: #6B7280 !important;
  background: #F3F4F6 !important;
  border-color: #E5E7EB !important;
  cursor: default;
  pointer-events: none;
}

.eos-css.eos-logistics-resource .eos-lr-flow-arrow {
  color: #E35205;
  font-weight: 900;
}

.eos-css.eos-logistics-resource .eos-lr-section-title {
  margin-bottom: 24px;
}

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

.eos-css.eos-logistics-resource .eos-lr-hub-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #D9E2EC;
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
  scroll-margin-top: 28px;
}

.eos-css.eos-logistics-resource .eos-lr-hub-card:hover {
  border-color: rgba(0, 99, 178, .24);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .10);
}

.eos-css.eos-logistics-resource .eos-lr-hub-card.is-coming-soon {
  background: linear-gradient(180deg, #ffffff 0%, #F8FAFC 100%);
  border-style: dashed;
}

.eos-css.eos-logistics-resource .eos-lr-card-media {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 172px;
  padding: 64px 24px 24px;
  overflow: hidden;
  color: #ffffff;
  background: linear-gradient(135deg, #0F2438 0%, #173B5F 58%, #0063B2 100%);
  border-bottom: 1px solid #D9E2EC;
  text-decoration: none;
}

.eos-css.eos-logistics-resource a.eos-lr-card-media:hover {
  color: #ffffff;
  text-decoration: none;
}

.eos-css.eos-logistics-resource .eos-lr-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 36, 56, .94) 0%, rgba(15, 36, 56, .70) 52%, rgba(15, 36, 56, .36) 100%),
    radial-gradient(circle at 50% 45%, rgba(227, 82, 5, .20), transparent 38%);
  pointer-events: none;
}

.eos-css.eos-logistics-resource .eos-lr-card-media img {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: block;
  width: 150px;
  height: 150px;
  object-fit: contain;
  opacity: .34;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease, transform .2s ease;
}

.eos-css.eos-logistics-resource a.eos-lr-card-media:hover img {
  opacity: .44;
  transform: translate(-50%, -50%) scale(1.04);
}

.eos-css.eos-logistics-resource .eos-lr-media-copy {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 100%;
}

.eos-css.eos-logistics-resource .eos-lr-card-media .eos-lr-stage {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 6px 12px;
  color: #E35205;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(227, 82, 5, .20);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-logistics-resource .eos-lr-card-media .eos-lr-card-title {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 100%;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.18;
  font-weight: 900;
}

.eos-css.eos-logistics-resource .eos-lr-hub-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  padding: 24px;
}

.eos-css.eos-logistics-resource .eos-lr-card-description {
  margin-bottom: 18px;
}

.eos-css.eos-logistics-resource .eos-lr-stage {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 10px;
  color: #E35205;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-logistics-resource .eos-lr-hub-card h3 {
  margin: 0 0 12px;
  color: #111827;
  font-size: 22px;
  line-height: 1.18;
}

.eos-css.eos-logistics-resource .eos-lr-audio {
  margin-top: 12px;
  padding: 12px 14px;
  background: #F8FBFE;
  border: 1px solid #D9E6F2;
  border-left: 4px solid #E35205;
  border-radius: 14px;
}

.eos-css.eos-logistics-resource .eos-lr-audio p {
  margin: 0 0 8px;
  color: #1F2937;
  font-size: 13px;
  line-height: 1.45;
}

.eos-css.eos-logistics-resource .eos-lr-audio-label {
  display: inline-block;
  margin-right: 8px;
  padding: 3px 8px;
  color: #0063B2;
  background: #EAF3FB;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.eos-css.eos-logistics-resource .eos-lr-audio audio {
  display: block;
  width: 100%;
  max-width: 520px;
  height: 34px;
  margin-top: 6px;
}

.eos-css.eos-logistics-resource .eos-lr-card-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #EDF2F7;
}

.eos-css.eos-logistics-resource .eos-lr-card-subhead {
  color: #111827;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.eos-css.eos-logistics-resource .eos-lr-card-links a {
  color: #0063B2;
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
}

.eos-css.eos-logistics-resource .eos-lr-card-links a:hover {
  color: #E35205;
  text-decoration: none;
}

.eos-css.eos-logistics-resource .eos-lr-primary-link,
.eos-css.eos-logistics-resource .eos-lr-coming-soon-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
}

.eos-css.eos-logistics-resource .eos-lr-primary-link {
  color: #ffffff !important;
  background: #0063B2;
}

.eos-css.eos-logistics-resource .eos-lr-primary-link:hover {
  color: #ffffff !important;
  background: #00579A;
}

.eos-css.eos-logistics-resource .eos-lr-coming-soon-label {
  color: #6B7280;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
}

.eos-css.eos-logistics-resource .eos-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: #E35205;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.8px;
  line-height: 1.4;
  text-transform: uppercase;
}

.eos-css.eos-logistics-resource .eos-home-rss-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 24px;
}

.eos-css.eos-logistics-resource .eos-home-rss-box,
.eos-css.eos-logistics-resource .eos-lr-away-nav {
  padding: 24px;
  background: #F8FAFC;
  border: 1px solid #E5E7EB;
  border-radius: 18px;
}

.eos-css.eos-logistics-resource .eos-lr-away-nav {
  margin-top: 24px;
  color: #ffffff;
  background: #2FA4A8;
  border-color: #2FA4A8;
}

.eos-css.eos-logistics-resource .eos-home-rss-box h3,
.eos-css.eos-logistics-resource .eos-lr-away-nav h3 {
  margin: 0 0 10px;
  color: #111827;
}

.eos-css.eos-logistics-resource .eos-lr-away-nav h3,
.eos-css.eos-logistics-resource .eos-lr-away-nav p {
  color: #ffffff;
}

.eos-css.eos-logistics-resource .eos-home-rss-placeholder {
  margin-top: 18px;
}

.eos-css.eos-logistics-resource .eos-home-rss-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.eos-css.eos-logistics-resource .eos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
}

.eos-css.eos-logistics-resource .eos-btn-primary {
  color: #ffffff !important;
  background: #0063B2;
}

.eos-css.eos-logistics-resource .eos-btn-primary:hover {
  color: #ffffff !important;
  background: #00579A;
}

.eos-css.eos-logistics-resource .eos-btn-secondary-dark {
  color: #0063B2 !important;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, .7);
}

.eos-css.eos-logistics-resource .eos-btn-secondary-dark:hover {
  color: #E35205 !important;
  border-color: #E35205;
}

.eos-css.eos-logistics-resource .eos-lr-away-nav .eos-btn-primary {
  color: #0063B2 !important;
  background: #ffffff;
  border: 1px solid #ffffff;
}

.eos-css.eos-logistics-resource .eos-lr-away-nav .eos-btn-primary:hover {
  color: #ffffff !important;
  background: #E35205;
  border-color: #E35205;
}

.eos-css.eos-logistics-resource .eos-lr-away-nav .eos-btn-secondary-dark {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .75);
}

.eos-css.eos-logistics-resource .eos-lr-away-nav .eos-btn-secondary-dark:hover {
  color: #0063B2 !important;
  background: #ffffff;
  border-color: #ffffff;
}

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

@media (max-width: 767px) {
  .eos-css.eos-logistics-resource .eos-wrap {
    padding-left: 18px;
    padding-right: 18px;
  }

  .eos-css.eos-logistics-resource .eos-lr-hybrid-hero {
    padding: 64px 0 54px;
  }

  .eos-css.eos-logistics-resource .eos-lr-workflow,
  .eos-css.eos-logistics-resource .eos-panel,
  .eos-css.eos-logistics-resource .eos-lr-hub-card-body {
    padding: 24px;
  }

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

  .eos-css.eos-logistics-resource .eos-lr-card-media {
    min-height: 164px;
    padding: 64px 20px 22px;
  }

  .eos-css.eos-logistics-resource .eos-lr-card-media img {
    width: 132px;
    height: 132px;
  }

  .eos-css.eos-logistics-resource .eos-lr-card-media .eos-lr-stage {
    top: 16px;
    right: 16px;
  }

  .eos-css.eos-logistics-resource .eos-lr-flow-list,
  .eos-css.eos-logistics-resource .eos-home-rss-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .eos-css.eos-logistics-resource .eos-lr-flow-list li {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .eos-css.eos-logistics-resource .eos-lr-flow-list a,
  .eos-css.eos-logistics-resource .eos-btn {
    justify-content: center;
    width: 100%;
  }

  .eos-css.eos-logistics-resource .eos-lr-flow-arrow {
    display: none;
  }
}

/* 17.06 Mini-Hero Card Refinement */
.eos-css.eos-logistics-resource .eos-lr-card-media,
.eos-css.eos-logistics-resource a.eos-lr-card-media {
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  min-height: 210px !important;
  padding: 82px 24px 28px !important;
  overflow: hidden !important;
  color: #ffffff !important;
  background: #0F2438 !important;
  border-bottom: 1px solid #D9E2EC !important;
  text-decoration: none !important;
}

.eos-css.eos-logistics-resource .eos-lr-card-media::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(15, 36, 56, .88) 0%, rgba(15, 36, 56, .54) 54%, rgba(15, 36, 56, .28) 100%),
    linear-gradient(180deg, rgba(15, 36, 56, .10) 0%, rgba(15, 36, 56, .68) 100%) !important;
  pointer-events: none !important;
}

.eos-css.eos-logistics-resource .eos-lr-card-media img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: .92 !important;
  filter: saturate(1.14) contrast(1.05) brightness(.98) !important;
  mix-blend-mode: normal !important;
  transform: scale(1.06) !important;
  transition: opacity .2s ease, transform .2s ease, filter .2s ease !important;
}

.eos-css.eos-logistics-resource a.eos-lr-card-media:hover img {
  opacity: .98 !important;
  filter: saturate(1.2) contrast(1.08) brightness(1.02) !important;
  transform: scale(1.12) !important;
}

.eos-css.eos-logistics-resource .eos-lr-media-copy {
  position: static !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

.eos-css.eos-logistics-resource .eos-lr-card-media .eos-lr-stage {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: calc(100% - 32px) !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  color: #0F2438 !important;
  background: rgba(255, 255, 255, .98) !important;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .26) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1.2px !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.eos-css.eos-logistics-resource .eos-lr-card-media .eos-lr-card-title,
.eos-css.eos-logistics-resource a.eos-lr-card-media .eos-lr-card-title,
.eos-css.eos-logistics-resource a.eos-lr-card-media:hover .eos-lr-card-title {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  max-width: min(100%, 330px) !important;
  padding: 8px 10px 9px 0 !important;
  color: #ffffff !important;
  font-size: 24px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .72), 0 1px 2px rgba(0, 0, 0, .88) !important;
}

@media (max-width: 767px) {
  .eos-css.eos-logistics-resource .eos-lr-card-media,
  .eos-css.eos-logistics-resource a.eos-lr-card-media {
    min-height: 188px !important;
    padding: 72px 20px 24px !important;
  }

  .eos-css.eos-logistics-resource .eos-lr-card-media img {
    width: 100% !important;
    height: 100% !important;
    opacity: .88 !important;
    transform: scale(1.08) !important;
  }

  .eos-css.eos-logistics-resource .eos-lr-media-copy {
    max-width: 100% !important;
  }

  .eos-css.eos-logistics-resource .eos-lr-card-media .eos-lr-stage {
    top: 14px !important;
    right: 14px !important;
    max-width: calc(100% - 28px) !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }
}
.eos-css.eos-category-series .eos-cs-footer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}