/* Version 18: high-contrast solid-blue redesign and unified image boundaries */
:root {
  --ink: #12324a;
  --navy: #096fa8;
  --navy-deep: #075d8e;
  --cta-blue: #087db7;
  --blue: #159ada;
  --blue-pale: #e8f6fc;
  --paper: #f7fafc;
  --muted: #536f80;
  --line: #d4e1e8;
}

.emergency-bar { background: #075d8e; color: #e2f4fb; }
.header-cta { background: #087db7; }
.header-cta:hover { background: #066b9e; }
.button-dark { background: #087db7; }
.button-dark:hover { background: #066b9e; }

/* One red navigation marker follows the hovered title, then returns to the
   current page or visible homepage section. */
.desktop-nav { position: relative; }
.desktop-nav a::after { display: none; }
.desktop-nav a[aria-current] { color: #0b6f9f; }
.nav-indicator {
  position: absolute;
  z-index: 2;
  bottom: -13px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--red);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform .34s cubic-bezier(.2,.8,.2,1), width .28s ease, opacity .18s ease;
}

.hero { height: 730px; min-height: 730px; max-height: none; background: #096fa8; color: white; }
.hero::after { position: absolute; z-index: 1; top: 0; bottom: 0; left: 56%; width: 6px; background: var(--red); content: ""; }
.hero-media { right: 0; left: auto; width: 44%; }
.hero-media img { filter: none; transform: none; }
.hero-overlay { display: none; }
.hero-inner { grid-template-columns: minmax(0, 1fr) 44%; gap: 70px; }
.hero-copy { max-width: 650px; padding-top: 10px; }
.hero h1 { max-width: 650px; font-size: clamp(56px, 5.25vw, 78px); }
.hero h1 em { color: #8ee3ff; }
.kicker { color: #d8f1fb; }
.hero-lead { color: #edf8fc; }
.button-glass { border-color: #ffffffa0; background: transparent; color: white; }
.response-card { display: none; }
.hero-scroll { color: #d5ecf5; border-top-color: #ffffff57; }

.homepage-field-work { background: #eef7fb; border-bottom-color: #c8dce6; }
.field-work-copy { background: #fff; }
.industries, .systems-section { background: #096fa8; }
.process { background: #075d8e; }

.page-hero { min-height: 610px; align-items: center; background: #096fa8; }
.page-hero::after { position: absolute; z-index: 1; top: 0; bottom: 0; left: 56%; width: 6px; background: var(--red); content: ""; }
.page-hero-media { right: 0; left: auto; width: 44%; }
.page-hero-media img { filter: none; }
.page-hero-overlay { display: none; }
.page-hero-content { padding-top: 80px; padding-bottom: 80px; }
.page-hero h1 { max-width: 610px; font-size: clamp(52px, 5.5vw, 76px); }
.page-hero-content > p:not(.kicker) { max-width: 620px; color: #edf8fc; }
.breadcrumbs { color: #cfeaf5; }

.service-card-grid > a { background: #075d8e; }
.service-card-grid img { opacity: .46; }
.service-card-grid a > div { background: linear-gradient(transparent, rgba(7,93,142,.98)); }
.plain-hero { background: #096fa8; }

.final-cta { min-height: 620px; background: #096fa8; }
.final-cta::after { position: absolute; z-index: 1; top: 0; bottom: 0; left: 56%; width: 6px; background: var(--red); content: ""; }
.final-cta > img { right: 0; left: auto; width: 44%; filter: none; }
.final-overlay { display: none; }
.final-content { padding-top: 90px; padding-bottom: 90px; }
.final-content h2, .final-content > p:not(.section-label), .final-content > a { max-width: 620px; }
.final-content > p:not(.section-label) { color: #edf8fc; }
.final-content h2 em, .final-content > a .call-icon { color: #8ee3ff; }
.final-content > a { border-bottom-color: #8ee3ff; }
footer { background: #084a70; }

/* Keep every large left/right image composition inside the same desktop
   boundary as the header, service rows, case studies and project grids. */
@media (min-width: 901px) {
  .hero,
  .page-hero,
  .why-section,
  .final-cta {
    width: min(var(--shell), calc(100% - 64px));
    margin-inline: auto;
  }
  .hero-inner,
  .hero-scroll,
  .page-hero-content,
  .final-content { width: 100%; }
  .why-content { padding: 96px 48px 96px 70px; }

  /* Alternating service photographs now touch the matching outer content
     edge; the item number sits on the photograph instead of creating an
     extra offset column. */
  .service-row { grid-template-columns: 1.05fr .95fr; gap: 50px; }
  .service-media { grid-column: 1; grid-row: 1; }
  .service-content { grid-column: 2; grid-row: 1; }
  .service-number {
    z-index: 3;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    margin: 18px;
    padding: 8px 10px;
    background: rgba(255,255,255,.94);
    color: #075d8e;
    box-shadow: 0 6px 18px rgba(7,55,82,.12);
  }
  .service-row:nth-child(even) .service-media,
  .service-row:nth-child(even) .service-number { grid-column: 2; }
  .service-row:nth-child(even) .service-content { grid-column: 1; grid-row: 1; }
}

@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .hero { height: auto; min-height: 950px; padding-top: 260px; }
  .hero::after { top: 254px; bottom: auto; left: 0; width: 100%; height: 6px; }
  .hero-media { top: 0; right: 0; bottom: auto; left: 0; width: 100%; height: 260px; }
  .hero-inner { min-height: 690px; padding: 54px 0 92px; display: block; }
  .hero-copy { width: 100%; max-width: 680px; min-width: 0; padding-top: 0; }
  .hero h1 { width: 100%; max-width: 100%; min-width: 0; font-size: clamp(43px, 11.2vw, 58px); white-space: normal; text-wrap: wrap; overflow-wrap: normal; }
  .hero-lead { width: 100%; max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: break-word; }

  .page-hero { min-height: 830px; padding-top: 260px; align-items: stretch; }
  .page-hero::after { top: 254px; bottom: auto; left: 0; width: 100%; height: 6px; }
  .page-hero-media { top: 0; right: 0; bottom: auto; left: 0; width: 100%; height: 260px; }
  .page-hero-content { min-width: 0; padding-top: 58px; padding-bottom: 68px; }
  .page-hero h1 { width: 100%; max-width: 680px; min-width: 0; font-size: clamp(43px, 11vw, 60px); white-space: normal; text-wrap: wrap; overflow-wrap: normal; }
  .page-hero-content > p:not(.kicker) { width: 100%; max-width: 650px; min-width: 0; white-space: normal; overflow-wrap: break-word; }

  .final-cta { min-height: 800px; padding-top: 240px; align-items: stretch; }
  .final-cta::after { top: 234px; bottom: auto; left: 0; width: 100%; height: 6px; }
  .final-cta > img { top: 0; right: 0; bottom: auto; left: 0; width: 100%; height: 240px; }
  .final-content { padding-top: 70px; padding-bottom: 96px; }
  .final-content h2 { font-size: clamp(46px, 11.8vw, 64px); }
}

@media (max-width: 620px) {
  .hero { min-height: 920px; padding-top: 235px; }
  .hero-media { height: 235px; }
  .hero::after { top: 229px; }
  .hero-inner { min-height: 685px; padding-top: 48px; }
  .hero h1 { font-size: clamp(38px, 10.2vw, 46px); line-height: 1; }
  .hero-lead { font-size: 14px; line-height: 1.58; }
  .page-hero { min-height: 790px; padding-top: 235px; }
  .page-hero-media { height: 235px; }
  .page-hero::after { top: 229px; }
  .page-hero-content { padding-top: 50px; padding-bottom: 62px; }
  .page-hero h1 { font-size: clamp(38px, 10.2vw, 46px); line-height: 1; }
}