/* =============================================================
   THEME FLOW — color rhythm overlay (loaded AFTER home.css)
   Replaces "solid white throughout" with a clear alternation of
   GRAY, warm ORANGE-TINT, and WHITE sections + bold EOH-orange
   accent bands and orange break-lines. Applied to ALL pages.
   Non-destructive: only this file + the <link> on each page.
   ============================================================= */

:root {
  --paper-2: #d8dde4;   /* clearly visible cool gray (was near-white) */
  --paper-3: #c9d0d9;   /* deeper surface */
  --warm:    #fdeadd;   /* soft EOH-orange tint for body bands */
  --warm-line: #ff5600; /* orange break line */
}

/* orange break-line marking each non-white section start */
.section.services,
.section.leaders,
.section.gallery,
.section.howwe,
.section.apply,
.section.standard,
.section.testimonials,
.section.leadership {
  border-top: 3px solid var(--warm-line);
}

/* ---------- HOME rhythm ---------- */
.section.standard      { background: var(--warm); }      /* orange tint */
.section.services      { background: var(--paper-2); }   /* gray */
.section.capabilities  { background: #ffffff; }          /* white breather */
.section.leaders       { background: var(--paper-2); }   /* gray */
.section.testimonials  { background: var(--warm); }      /* orange tint */
/* .hero, .process, footer remain dark for depth */

/* ---------- ABOUT rhythm ---------- */
.section.vm         { background: #ffffff; }
.section.gallery    { background: var(--paper-2); }      /* gray */
.section.leadership { background: var(--warm); }         /* orange tint */

/* ---------- SERVICES rhythm ---------- */
.section.svc-rows { background: #ffffff; }
.section.howwe    { background: var(--paper-2); }        /* gray */

/* ---------- CONTACT rhythm ---------- */
.section.apply { background: var(--paper-2); }           /* gray */

/* cards/photos stay light so they "lift" off the gray/tint bands */
.vm__card,
.quote,
.testi,
.card {
  background: #ffffff;
}

/* ---------- orange accents on headings (more orange presence) ---------- */
.section .section-head .eyebrow,
.section .eyebrow { color: #ff5600; }

/* short orange underline under section titles */
.section .section-head h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  margin-top: 14px;
  background: #ff5600;
  border-radius: 2px;
}
.section.cta .section-head h2::after,
.section.careers h2::after { background: #14161a; }

/* =============================================================
   Bold EOH-orange accent bands (the strong "color break")
   ============================================================= */
.section.cta,
.section.careers {
  background: var(--ember);
  border-top: none;
}
.section.cta .section-head h2,
.section.cta h2,
.section.cta p,
.section.cta .eyebrow,
.section.cta a,
.section.careers h2,
.section.careers p,
.section.careers .eyebrow,
.section.careers a {
  color: #14161a;
}
.section.cta .btn,
.section.careers .btn {
  background: #14161a;
  color: #ffffff;
  border-color: #14161a;
}
.section.cta .btn:hover,
.section.careers .btn:hover {
  background: #000000;
}

/* =============================================================
   Flyover feature — portrait video beside text on a dark band
   ============================================================= */
.flyover-feature {
  background: #14161a;
  border-top: 3px solid var(--warm-line);
}
.flyover-feature .container {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
}
.flyover-feature .eyebrow { color: #ff8a4d; }
.flyover-feature h2 { color: #ffffff; }
.flyover-feature h2::after { background: #ff5600; }
.flyover-feature p { color: #b9c0ca; }
.flyover-vid {
  justify-self: center;
  width: 100%;
  max-width: 340px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.flyover-vid video { width: 100%; display: block; }
@media (max-width: 760px) {
  .flyover-feature .container { grid-template-columns: 1fr; }
  .flyover-vid { max-width: 300px; order: -1; }
}

/* show the full rig in tall/portrait photos (no center-crop) */
.svc-row__media img.show-full,
.gallery__grid img.show-full {
  object-fit: contain;
  background: #0f1114;
}
.svc-row:has(img.show-full) .svc-row__media { aspect-ratio: 4 / 5; }

/* =============================================================
   Services banner — cinematic ops video behind the text
   ============================================================= */
.page-banner--video {
  position: relative;
  overflow: hidden;
  background: #0f1114;
  border-bottom: none;
}
.page-banner--video > .container { position: relative; z-index: 2; }
.page-banner--video .pb-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.page-banner--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 17, 20, 0.55), rgba(15, 17, 20, 0.8));
  z-index: 1;
}
.page-banner--video .crumbs,
.page-banner--video .crumbs a,
.page-banner--video h1,
.page-banner--video > .container > p { color: #ffffff; }
.page-banner--video .eyebrow { color: #ff8a4d; }

/* =============================================================
   Mobile safety: stop the footer offices (esp. the UT address)
   from overflowing/clipping on narrow screens.
   ============================================================= */
.eo-footer__top,
.eo-footer__brand,
.eo-footer__nav,
.eo-footer__contact { min-width: 0; }
.eo-footer .contact-row { flex-wrap: wrap; }
.eo-footer .contact-row span,
.eo-footer .office__name,
.eo-footer__brand p { overflow-wrap: anywhere; }