/* ============================================================
   carriers.css — Mastery Logistics Systems
   Carriers (Who We Serve) page-specific styles.
   Global styles live in style.css.
   Desktop styles first. Mobile overrides at the bottom.

   COMPONENT REUSE:
   - .video-placeholder — distinct from image placeholder;
     copper play button overlay. Used for hero and Prime video.
   - .cta-banner — standard closing CTA.
   - .feature — shared with capability pages, extended here.

   NEW COMPONENTS INTRODUCED HERE:
   - .carrier-hero — hero with video on the right.
   - .feature--warm — light warm background variant for
     alternating feature blocks.
   - .feature--reverse — visual-left, content-right layout.
   - .feature__paragraph — paragraph copy variant (used only in
     Section 4 to break the bullets pattern).
   - .feature__link — text-only capability CTA link.
   - .visual-frame — dark rounded frame that hosts the block
     visuals (driver card, route map, consolidation).
   - .driver-card — driver profile card visual (Section 2).
   - .route-vis — multi-stop route map visual (Section 3).
   - .consolidation-vis — old TMSes → MasterMind visual (Section 4).
   - .photo-placeholder — new component; distinct from image and
     video placeholders. Used to reserve space for real customer
     photos (Section 5). Warm neutral background with small glyph
     accent — signals "real photo goes here" not "screenshot."
   - .customer-story — Prime video block with logo strip.

   PAGE STRUCTURE:
   1. Hero (dark, video right)
   2. For Drivers (white, content L / driver card R)
   3. Route Efficiency (warm, alt — visual L / content R)
   4. One Platform (white, content L / consolidation R)
      — PARAGRAPH instead of bullets, breaks the pattern
   5. Take Care of Customers (warm, alt — PHOTO L / content R)
   6. Werner quote (warm, glyph backdrop)
   7. Prime video + logo strip (white)
   8. CTA banner (dark)
============================================================ */

/* ============================================================
   SHARED — VIDEO PLACEHOLDER COMPONENT
   (Same component pattern used on AI & Intelligence page.
   Kept here so this page is self-contained; if refactored to
   a global component later, remove this block.)
============================================================ */
.video-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 30%, rgba(252, 147, 101, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, #1a1a1a, #2a2320);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
}

.video-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(252, 147, 101, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 147, 101, 0.05) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}

.video-placeholder__play {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fc9365, #b25d42);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(178, 93, 66, 0.4);
}

.video-placeholder__play svg {
  color: var(--color-white);
  margin-left: 0.25rem;
}

.video-placeholder__label {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: rgba(252, 147, 101, 0.95);
  letter-spacing: 0.02em;
}

.video-placeholder__note {
  position: relative;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   SECTION 1 — HERO
   Dark. Two-column with video right.
============================================================ */
.carrier-hero {
  position: relative;
  background-color: #0a0a0a;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.carrier-hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(178, 93, 66, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.carrier-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 4rem;
  align-items: center;
}

.carrier-hero__content {
  max-width: 480px;
}

.carrier-hero .eyebrow {
  color: var(--color-copper-light);
}

.carrier-hero__headline {
  font-size: var(--font-size-h1);
  font-weight: var(--weight-semibold);
  color: var(--color-white);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

.carrier-hero__sub {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2rem;
  max-width: 460px;
}

.carrier-hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.carrier-hero__media {
  position: relative;
  width: 100%;
}

.carrier-hero__video {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   SECTIONS 2–5 — FEATURE BLOCKS
   Standard two-column feature with variants:
   .feature (white) / .feature--warm (light warm)
   .feature--reverse (visual left, content right)
   .feature__list (bullets) / .feature__paragraph (paragraph)
============================================================ */
.feature {
  background: var(--color-white);
}

.feature--warm {
  background: #faf6f3;
}

.feature__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.25rem;
  align-items: center;
}

.feature--reverse .feature__content {
  order: 2;
}

.feature--reverse .feature__media {
  order: 1;
}

.feature__heading {
  font-size: var(--font-size-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 1.25rem;
}

.feature__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.feature__list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

.feature__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(178, 93, 66, 0.12);
  color: var(--color-copper);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.feature__paragraph {
  color: var(--color-text-primary);
  font-size: var(--text-base);
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

.feature__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-sm);
  color: var(--color-text-accent);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: color var(--transition-fast);
}

.feature__link:hover {
  color: var(--color-copper-dark);
}

.feature__link-arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.feature__link:hover .feature__link-arrow {
  transform: translateX(3px);
}

.feature__media {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature__photo {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

/* Product artwork whose rounded card sits inside a wider transparent
 * canvas: a drop shadow follows the card, where a box shadow would
 * outline the empty margin. */
.feature__image {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.16));
}

/* ----- VISUAL FRAME — dark rounded frame for section visuals ----- */
.visual-frame {
  position: relative;
  aspect-ratio: 16 / 11;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(252, 147, 101, 0.14), transparent 65%),
    linear-gradient(135deg, #1a1a1a, #2a2320);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.visual-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(252, 147, 101, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 147, 101, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* ----- SECTION 2 — DRIVER PROFILE CARD ----- */
.driver-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.driver-card__header {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.875rem 1rem;
  background: #1a1a1a;
  border-bottom: 0.5px solid rgba(252, 147, 101, 0.2);
}

.driver-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fc9365, #b25d42);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.driver-card__name {
  font-size: 0.8125rem;
  color: var(--color-white);
  font-weight: var(--weight-bold);
}

.driver-card__status {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(252, 147, 101, 0.9);
  font-weight: var(--weight-bold);
  margin-top: 1px;
}

.driver-card__body {
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

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

.driver-card__label {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-weight: var(--weight-semibold);
}

.driver-card__val {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-weight: var(--weight-bold);
}

.driver-card__hos-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  margin-top: 4px;
  position: relative;
}

/* HOS bar fill: represents hours USED, not remaining.
   Driver has 8h remaining of ~11h available → 3h used → ~27% */
.driver-card__hos-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 27%;
  background: linear-gradient(90deg, #fc9365, #b25d42);
  border-radius: 2px;
}

/* ----- SECTION 3 — ROUTE VISUAL ----- */
.route-vis {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 5 / 3;
}

/* Route draw-on. The legs and stops are fully drawn in the markup; the
   .is-primed class — applied by carriers.js, never by this file — hides
   them, so a blocked script leaves the finished route on screen.

   pathLength="1" lets one dash rule drive every leg regardless of its
   real length, which also keeps each leg drawing for the same duration
   rather than the long ones taking longer. */
.route-vis.is-primed .route-leg {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.route-vis.is-primed .route-return,
.route-vis.is-primed .route-stop {
  opacity: 0;
}

.route-vis.is-primed.is-revealed .route-leg {
  animation: route-draw 0.55s ease-in-out forwards;
}

.route-vis.is-primed.is-revealed .route-return {
  /* dashed, so it fades rather than draws */
  animation: route-fade-return 0.55s ease-in-out forwards;
}

.route-vis.is-primed.is-revealed .route-stop {
  animation: route-stop-in 0.3s ease-out forwards;
}

@keyframes route-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes route-fade-return {
  to {
    opacity: 0.4;
  }
}

@keyframes route-stop-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Out from the depot, one leg at a time, each stop landing as the leg
   that reaches it finishes. */
.route-vis.is-primed.is-revealed .route-leg--1 { animation-delay: 0s; }
.route-vis.is-primed.is-revealed .route-leg--2 { animation-delay: 0.55s; }
.route-vis.is-primed.is-revealed .route-leg--3 { animation-delay: 1.1s; }
.route-vis.is-primed.is-revealed .route-leg--4 { animation-delay: 1.65s; }
.route-vis.is-primed.is-revealed .route-leg--5 { animation-delay: 2.2s; }
.route-vis.is-primed.is-revealed .route-return { animation-delay: 2.75s; }

.route-vis.is-primed.is-revealed .route-stop--1 { animation-delay: 0.5s; }
.route-vis.is-primed.is-revealed .route-stop--2 { animation-delay: 1.05s; }
.route-vis.is-primed.is-revealed .route-stop--3 { animation-delay: 1.6s; }
.route-vis.is-primed.is-revealed .route-stop--4 { animation-delay: 2.15s; }
.route-vis.is-primed.is-revealed .route-stop--5 { animation-delay: 2.7s; }

/* Each stop scales about its own centre rather than the SVG origin. */
.route-stop {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  /* Neutralise the primed state so the finished route simply appears. */
  .route-vis.is-primed .route-leg,
  .route-vis.is-primed .route-return,
  .route-vis.is-primed .route-stop {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: unset;
    animation: none;
  }

  .route-vis.is-primed .route-return {
    opacity: 0.4;
  }
}

.route-vis svg {
  width: 100%;
  height: 100%;
}

/* ----- SECTION 4 — CONSOLIDATION VISUAL ----- */
/* ============================================================
   SECTION 4 — DIVISIONS HIERARCHY TREE
   Single-column. Centered header, then dark tree container.
============================================================ */
.divisions__header {
  max-width: 660px;
  margin: 0 auto 3rem;
}

.divisions__heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.divisions__para {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: 1.5rem;
}

.divisions__tree {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Mode chips. The border is a light-copper outline; a brighter segment
   travels around each one so the set reads as live rather than static.

   pathLength="100" on the tracing rect normalises every perimeter to 100
   units, so one dash rule fits all six chips regardless of their geometry
   — no per-chip perimeter maths, and it survives a chip being resized. */
.division-chip {
  fill: #111318;
  stroke: rgba(252, 147, 101, 0.45);
  stroke-width: 0.75;
}

.division-chip__trace {
  fill: none;
  stroke: var(--color-copper-light);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 16 84;
  animation: division-chip-trace 3.4s linear infinite;
}

@keyframes division-chip-trace {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -100;
  }
}

/* Offset so the six lights are spread around their loops rather than
   moving in lockstep. */
.division-chip__trace--1 { animation-delay: 0s; }
.division-chip__trace--2 { animation-delay: -0.57s; }
.division-chip__trace--3 { animation-delay: -1.13s; }
.division-chip__trace--4 { animation-delay: -1.7s; }
.division-chip__trace--5 { animation-delay: -2.27s; }
.division-chip__trace--6 { animation-delay: -2.83s; }

@media (prefers-reduced-motion: reduce) {
  .division-chip__trace {
    animation: none;
    stroke-dasharray: none;
    stroke: rgba(252, 147, 101, 0.55);
    stroke-width: 1;
  }
}

.divisions__mm-wrap {
  display: flex;
  justify-content: center;
}

.divisions__mm-node {
  background: #0a0a0a;
  border: 0.5px solid rgba(178, 93, 66, 0.45);
  border-radius: 12px;
  padding: 1.125rem 2.5rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.divisions__mm-name {
  display: block;
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
  color: var(--color-white);
  letter-spacing: -0.02em;
}

.divisions__mm-name sup {
  font-size: 0.55em;
  vertical-align: super;
}

.divisions__mm-sub {
  font-size: 0.6875rem;
  color: var(--color-copper-light);
  margin: 0.2rem 0 0;
  letter-spacing: 0.01em;
}

.divisions__connector {
  width: 100%;
}

.divisions__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem;
  width: 100%;
}

.divisions__node {
  padding: 0.875rem 0.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  text-align: center;
  font-weight: var(--weight-semibold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   SECTION 5 — PHOTO PLACEHOLDER
   Distinct from image and video placeholders. Warm neutral tone
   with a small copper glyph accent — signals "real photo goes
   here" rather than a screenshot or generated image.
============================================================ */
.photo-placeholder {
  position: relative;
  aspect-ratio: 16 / 11;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8ddd4, #d4c8bf);
  border: 0.5px solid rgba(178, 93, 66, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.photo-placeholder__glyph {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  opacity: 0.4;
}

.photo-placeholder__glyph svg {
  width: 100%;
  height: 100%;
}

.photo-placeholder__label {
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.02em;
}

.photo-placeholder__note {
  position: relative;
  font-size: var(--text-xs);
  color: rgba(0, 0, 0, 0.35);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================
   SECTION 7 — PRIME CUSTOMER STORY + LOGO STRIP
   White. Video centered, "Trusted by" strip beneath.
============================================================ */
.customer-story {
  background: var(--color-white);
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  border-top: 0.5px solid rgba(0, 0, 0, 0.05);
}

.customer-story__head {
  max-width: 680px;
  margin: 0 auto 2rem;
}

.customer-story__head .eyebrow {
  color: var(--color-copper-dark);
}

.customer-story__heading {
  color: var(--color-text-primary);
  font-size: var(--font-size-h2);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0.5rem;
}

.customer-story__video-wrap {
  max-width: 900px;
  margin: 0 auto 2.25rem;
}

.customer-story__video-ph {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(252, 147, 101, 0.16), transparent 60%),
    linear-gradient(135deg, #1a1a1a, #2a2320);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.875rem;
}

.customer-story__video-ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(252, 147, 101, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 147, 101, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}

.customer-story__video {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   SECTION 8 — CTA BANNER
   Dark. Standard closing.
============================================================ */
.cta-banner {
  background: #0a0a0a;
  border-top: 0.5px solid #1f1f1f;
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(178, 93, 66, 0.12) 0%, transparent 65%);
  pointer-events: none;
}

.cta-banner__heading {
  font-size: var(--font-size-h2);
  font-weight: var(--weight-semibold);
  color: #ffffff;
  margin-bottom: 1rem;
}

/* ============================================================
   RESPONSIVE — MOBILE OVERRIDES
============================================================ */
@media (max-width: 768px) {

  /* Hero — single column */
  .carrier-hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Single column, with the CTA below the visual rather than above
     it. .carrier-hero__actions is nested inside .carrier-hero__content, so it
     cannot be ordered past .carrier-hero__media on its own; display:
     contents lifts the copy's children into the hero grid so all five
     can be ordered together. The wrapper is a plain div, so nothing
     is lost from the accessibility tree.

     Row gap drops to 0 because it would otherwise apply between every
     line of copy, not just between the blocks. Each element's own
     margins space them, exactly as they do on desktop. */
  .carrier-hero__inner {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .carrier-hero__content {
    display: contents;
  }

  .carrier-hero .eyebrow {
    order: 1;
  }

  .carrier-hero__headline {
    order: 2;
  }

  .carrier-hero__sub {
    order: 3;
  }

  .carrier-hero__media {
    order: 4;
  }

  .carrier-hero__actions {
    order: 5;
    margin-top: 2rem;
    flex-direction: column;
    align-items: stretch;
  }

  .carrier-hero__actions > a {
    text-align: center;
    justify-content: center;
  }

  /* Feature blocks - single column: copy, then the visual, then the CTA.
     The text column stops being its own box so its children lay out in the
     stack, which puts the CTA below the visual. The reversed variant is
     named explicitly because its desktop order uses two classes and would
     otherwise win on specificity. */
  .feature__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .feature__content {
    display: contents;
  }

  .feature__media,
  .feature--reverse .feature__media {
    order: 1;
    margin: 0.5rem 0;
  }

  .feature__link,
  .feature--reverse .feature__link {
    order: 2;
    align-self: flex-start;
    margin-top: 1.5rem;
  }

  /* Divisions - the CTA follows the tree diagram, matching the feature
     blocks. The header stops being its own box so its children can reorder,
     so its centring is re-applied to them. */
  .divisions .container {
    display: flex;
    flex-direction: column;
  }

  .divisions__header {
    display: contents;
  }

  .divisions__heading,
  .divisions__para {
    text-align: center;
  }

  .divisions__tree {
    order: 1;
  }

  .divisions__header .feature__link {
    order: 2;
    align-self: center;
    margin-top: 2rem;
  }

  /* Divisions tree — hide SVG, stack nodes 2-col */
  .divisions__connector {
    display: none;
  }

  .divisions__row {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1.5rem;
  }

  /* Prime video block */
  .customer-story__heading {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  /* CTA */
  .cta-banner__heading {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

}