/* Services, zones and blog index refinement - 2026-08-23 */

/* Keep the three index heroes on the same brand navy. */
.zones-hero.zones-hero {
  background: #1a2558 !important;
}

/* Service and department indexes: keep the useful ledger structure, sharpen interaction. */
.section-services-list .service-row,
.section-departments .department-row {
  position: relative;
  isolation: isolate;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.section-services-list .service-row::before,
.section-departments .department-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(239, 91, 73, .07), rgba(246, 248, 251, .72) 48%, transparent 88%);
  opacity: 0;
  transition: opacity .2s ease;
}

.section-services-list .service-row:hover::before,
.section-services-list .service-row:focus-visible::before,
.section-departments .department-row:hover::before,
.section-departments .department-row:focus-visible::before {
  opacity: 1;
}

.section-services-list .service-row:hover,
.section-services-list .service-row:focus-visible,
.section-departments .department-row:hover,
.section-departments .department-row:focus-visible {
  box-shadow: inset 3px 0 0 #ef5b49;
  outline: 0;
}

.section-services-list .service-row:hover .service-number,
.section-services-list .service-row:focus-visible .service-number,
.section-departments .department-row:hover .department-number,
.section-departments .department-row:focus-visible .department-number {
  color: #ef5b49 !important;
  opacity: 1 !important;
}

.section-services-list .service-arrow,
.section-departments .department-arrow {
  transition: color .2s ease, transform .2s ease;
}

.section-services-list .service-row:hover .service-arrow,
.section-services-list .service-row:focus-visible .service-arrow,
.section-departments .department-row:hover .department-arrow,
.section-departments .department-row:focus-visible .department-arrow {
  color: #ef5b49 !important;
  transform: translateX(5px);
}

/* Blog archive: technical register instead of a generic card wall. */
.blog-grid {
  counter-reset: article-index;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.blog-grid .blog-card {
  counter-increment: article-index;
  position: relative;
  min-width: 0;
  overflow: hidden;
  min-height: 318px;
  border: 1px solid #d8e0eb !important;
  border-top: 3px solid #182a62 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #101c3d;
  transition: background-color .2s ease, box-shadow .2s ease;
}

.blog-grid .blog-card::before {
  content: "DOSSIER " counter(article-index, decimal-leading-zero);
  position: absolute;
  top: 27px;
  right: 24px;
  z-index: 2;
  color: #93a2b8;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.blog-grid .blog-card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 28px !important;
}

.blog-grid .blog-card-tag { margin-right: 104px; }

.blog-grid .blog-card-title {
  max-width: none;
  margin-top: 15px !important;
  font-size: clamp(1.35rem, 1.7vw, 1.68rem) !important;
  line-height: 1.16 !important;
}

.blog-grid .blog-card-excerpt {
  max-width: none;
  line-height: 1.72 !important;
}

.blog-grid .blog-card-meta {
  margin-top: auto !important;
  padding-top: 19px !important;
  border-top: 1px solid #e3e8f0 !important;
}

.blog-grid .blog-card-link {
  color: #c83b32 !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s ease;
}

.blog-grid .blog-card:hover,
.blog-grid .blog-card:focus-visible {
  background: #f6f8fb !important;
  border-top-color: #ef5b49 !important;
  box-shadow: inset 0 -3px 0 rgba(239, 91, 73, .18) !important;
  outline: 0;
}

.blog-grid .blog-card:hover .blog-card-link,
.blog-grid .blog-card:focus-visible .blog-card-link {
  text-decoration-color: currentColor;
}

.blog-grid .blog-card:first-child {
  grid-column: 1 / -1;
  min-height: 0;
  margin-bottom: 18px;
  border-top: 3px solid #ef5b49 !important;
  background:
    linear-gradient(110deg, rgba(255,255,255,.94), rgba(244,247,251,.95)),
    #f4f7fb !important;
}

.blog-grid .blog-card:first-child::before {
  top: 42px;
  right: 46px;
  color: #ef5b49;
}

.blog-grid .blog-card:first-child .blog-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr);
  grid-template-areas:
    "tag excerpt"
    "title excerpt"
    "meta excerpt";
  column-gap: clamp(50px, 7vw, 110px);
  padding: 42px 46px 42px !important;
}

.blog-grid .blog-card:first-child .blog-card-tag { grid-area: tag; justify-self: start; }
.blog-grid .blog-card:first-child .blog-card-title {
  grid-area: title;
  max-width: 720px;
  margin: 22px 0 28px !important;
  padding-right: 90px;
  font-size: clamp(2rem, 3.2vw, 3.25rem) !important;
  line-height: 1.04 !important;
}

.blog-grid .blog-card:first-child .blog-card-excerpt {
  grid-area: excerpt;
  align-self: center;
  margin: 0 !important;
  padding-left: clamp(28px, 4vw, 58px);
  border-left: 1px solid #cfd8e6;
  font-size: 1.04rem;
}

.blog-grid .blog-card:first-child .blog-card-meta {
  grid-area: meta;
  margin: 0 !important;
}

@media (max-width: 1180px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .section-services-list .service-row,
  .section-departments .department-row {
    box-shadow: none !important;
  }

  .section-services-list .service-row:active,
  .section-departments .department-row:active {
    background: #f6f8fb;
    box-shadow: inset 3px 0 0 #ef5b49 !important;
  }

  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .blog-grid .blog-card,
  .blog-grid .blog-card:first-child {
    grid-column: auto;
    margin: 0;
    min-height: 0;
  }

  .blog-grid .blog-card::before,
  .blog-grid .blog-card:first-child::before {
    top: 25px;
    right: 20px;
  }

  .blog-grid .blog-card-body,
  .blog-grid .blog-card:first-child .blog-card-body {
    display: flex;
    flex-direction: column;
    padding: 24px 20px 26px !important;
  }

  .blog-grid .blog-card:first-child {
    margin-bottom: 6px;
    padding-inline: 0;
  }

  .blog-grid .blog-card:first-child .blog-card-title {
    margin: 18px 0 20px !important;
    padding-right: 0;
    font-size: 1.85rem !important;
    line-height: 1.08 !important;
  }

  .blog-grid .blog-card:first-child .blog-card-excerpt {
    margin: 0 0 24px !important;
    padding: 0 !important;
    border-left: 0;
    font-size: 1rem;
  }

  .blog-grid .blog-card-title {
    padding-right: 70px;
    font-size: 1.36rem !important;
  }

  .blog-grid .blog-card-excerpt { line-height: 1.62 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .section-services-list .service-row,
  .section-departments .department-row,
  .blog-grid .blog-card,
  .section-services-list .service-arrow,
  .section-departments .department-arrow {
    transition: none !important;
  }
}