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

   COMPONENT REUSE:
   - .visual-frame — dark rounded frame used for Sections 2, 3,
     4, 6 (same pattern as Carriers and Private Fleets).
   - .feature — shared feature block system with --warm,
     --reverse, --stacked variants.
   - .cta-banner — standard closing CTA.
   - .image-placeholder — hero image slot.

   NEW COMPONENT INTRODUCED HERE:
   - .scorecard-vis — light-mode carrier scorecard visual for
     Section 5. Unlike the other block visuals on this page,
     this one has no dark frame — sits directly on the warm
     section background. Differentiates the section visually
     from the four dark-visual blocks around it.

   PAGE STRUCTURE:
   1. Hero (dark, image right)
   2. Automation (white, content L / dark visual R)
   3. Cover every load (warm, STACKED — paragraph + wide dark visual)
   4. Carrier sourcing + compliance (white, content L / dark visual R)
   5. Carrier management (warm, alt — LIGHT visual L / content R)
   6. Margin protection (white, content L / dark visual R)
   7. Logo wall (warm bg, 15-logo grid)
   8. CTA banner (dark)
============================================================ */

/* ============================================================
   IMAGE PLACEHOLDER (hero only on this page)
============================================================ */
.image-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;
  padding: 1rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.image-placeholder--dark {
  background:
    radial-gradient(circle at 50% 50%, rgba(252, 147, 101, 0.14), transparent 65%),
    linear-gradient(135deg, #1a1a1a, #2a2320);
  border-color: rgba(252, 147, 101, 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

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

.image-placeholder--dark .image-placeholder__label {
  color: rgba(255, 255, 255, 0.75);
}

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

.image-placeholder--dark .image-placeholder__note {
  color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   SECTION 1 — HERO
   Dark. Two-column with image right.
============================================================ */
.brk-hero .eyebrow {
  color: var(--color-copper-dark);
}

.brk-hero {
  position: relative;
  background-color: #0a0a0a;
  overflow: hidden;
  padding-top: 7rem;
  padding-bottom: 7rem;
  min-height: 560px;
  display: flex;
  align-items: center;
}

.brk-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

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

.brk-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

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

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

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

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

.brk-hero__media {
  display: none;
  position: relative;
  width: 100%;
}

.brk-hero__image {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   SECTIONS 2–6 — FEATURE BLOCKS
   Standard system used across Who We Serve pages.
============================================================ */
.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;
}

/* Single-column stacked variant (Section 3) */
.feature--stacked .feature__inner {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin: 0 auto;
  gap: 2.5rem;
}

.feature--stacked .feature__content {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.feature--stacked .feature__media {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.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-copper-dark);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: color var(--transition-fast);
}

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

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

/* ============================================================
   VISUAL FRAME — dark rounded frame for Sections 2, 3, 4, 6
============================================================ */
.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;
}

.visual-frame--wide {
  aspect-ratio: 16 / 9;
  padding: 1.75rem;
}

/* ============================================================
   SECTION-SPECIFIC VISUAL WRAPPERS
============================================================ */

/* Section 2 — Automation lifecycle */
.automate-lifecycle {
  position: relative;
  width: 100%;
}

.automate-lifecycle svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Section 3 — Animated freight-sources card. Three source chips
   feed dashed tracks and staggered packets into the pulsing
   MasterMind hub; same animation language as the platform page
   integration hub. Carries its own dark card treatment, so it is
   not wrapped in .visual-frame. */
.freight-card {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 600 / 340;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 75%, rgba(178, 93, 66, 0.35) 0%, rgba(135, 62, 43, 0.15) 45%, rgba(0, 0, 0, 0) 75%),
    #17100c;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.freight-card::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: 36px 36px;
  pointer-events: none;
}

.freight-card__glow {
  position: absolute;
  left: 50%;
  top: 68%;
  width: 55%;
  height: 55%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(252, 147, 101, 0.22) 0%, rgba(178, 93, 66, 0.10) 40%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  animation: freightBreathe 5s ease-in-out infinite;
}

@keyframes freightBreathe {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

.freight-card__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.freight-card__track {
  fill: none;
  stroke: rgba(178, 93, 66, 0.45);
  stroke-width: 1.5;
  stroke-dasharray: 4 7;
  animation: freightFlow 3.5s linear infinite;
}

@keyframes freightFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -44; }
}

.freight-card__packet {
  fill: var(--color-copper);
  filter: drop-shadow(0 0 4px rgba(252, 147, 101, 0.9));
}

.freight-card__chip {
  position: absolute;
  transform: translate(-50%, -50%);
  background: rgba(28, 19, 14, 0.9);
  border: 1px solid rgba(252, 147, 101, 0.35);
  border-radius: 10px;
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  padding: 12px 20px;
  white-space: nowrap;
  z-index: 2;
}

.freight-card__chip--c1 { left: 26%; top: 34%; }
.freight-card__chip--c2 { left: 50%; top: 34%; }
.freight-card__chip--c3 { left: 74%; top: 34%; }

.freight-card__hub {
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
  width: 27%;
  aspect-ratio: 160 / 62;
  border-radius: 12px;
  background: var(--gradient-copper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  animation: freightPulse 5s ease-in-out infinite;
  z-index: 2;
}

@keyframes freightPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(252, 147, 101, 0.35), 0 0 0 0 rgba(252, 147, 101, 0); }
  50%      { box-shadow: 0 0 34px rgba(252, 147, 101, 0.55), 0 0 0 10px rgba(252, 147, 101, 0.06); }
}

.freight-card__hub-name {
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
  color: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .freight-card__track,
  .freight-card__hub,
  .freight-card__glow {
    animation: none;
  }

  .freight-card__packet {
    display: none;
  }
}

/* Section 4 — Compliance card */
.compliance-vis {
  position: relative;
  width: 100%;
}

.compliance-vis svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Section 5 — Scorecard visual (LIGHT MODE, no dark frame)
   Sits directly on the warm section background. */
.scorecard-vis {
  position: relative;
  width: 100%;
  max-width: 440px;
}

.scorecard-vis svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Section 6 — Margin card */
.margin-vis {
  position: relative;
  width: 100%;
}

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

/* ============================================================
   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 */
  .brk-hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
    /* The copy is dark because it sits on the light header photo. That photo
       moves into the flow here, so the band behind the copy goes white or the
       section fallback would swallow the headline. */
    background-color: var(--color-white);
  }

  /* Hero matches the shippers hero on mobile: copy, then the image, then
     the CTA. The actions sit inside the copy wrapper, so display: contents
     lifts the copy children into the hero column and all four can be
     ordered together. The full-bleed background cannot sit between copy and
     CTA, so it gives way to the in-flow image here. */
  .brk-hero {
    min-height: 0;
  }

  .brk-hero__bg {
    display: none;
  }

  .brk-hero__glow {
    display: none;
  }

  .brk-hero__inner {
    display: flex;
    flex-direction: column;
  }

  .brk-hero__content {
    display: contents;
  }

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

  .brk-hero__headline {
    order: 2;
  }

  .brk-hero__sub {
    order: 3;
  }

  .brk-hero__media {
    display: block;
    order: 4;
    margin-top: 0.5rem;
  }

  .brk-hero__content {
    max-width: 100%;
  }

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

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

  /* The stacked variant centres its copy; keep that now the column box is gone. */
  .feature--stacked .feature__heading,
  .feature--stacked .feature__paragraph {
    text-align: center;
  }

  .feature--stacked .feature__link {
    align-self: center;
  }

  /* Stacked variant — already single column, but tighter gap */
  /* The stack spaces itself with element margins now, so a gap here would
     double up between the copy, the visual and the CTA. */
  .feature--stacked .feature__inner {
    gap: 0;
  }

  .feature--stacked .feature__media {
    margin: 2rem auto 0.5rem;
  }

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

  /* Freight-sources card — smaller chips and hub label */
  .freight-card__chip {
    font-size: 0.5625rem;
    padding: 9px 12px;
  }

  .freight-card__hub-name {
    font-size: 0.8125rem;
  }

}