/* Services page only.
   1. Each service gets its own muted accent colour, used for the card frame
      and (softly) for the matching section further down the page.
   2. Proper mobile layout for the banner, the card strip and the sections.
   The site sets html { font-size: 10px }, so sizes here are in px. */

/* ---- accent palette: distinct, muted, professional ---- */
.content-container .content-box:nth-child(1), #EDC  { --acc: #2f5fb3; }  /* ETCD          blue   */
.content-container .content-box:nth-child(2), #Aaas { --acc: #148f8a; }  /* Aggregation   teal   */
.content-container .content-box:nth-child(3), #SAS  { --acc: #6b5fc0; }  /* Advisory      indigo */
.content-container .content-box:nth-child(4), #PD   { --acc: #b98a1f; }  /* Policy        ochre  */
.content-container .content-box:nth-child(5), #PSC  { --acc: #2f8a5a; }  /* HR            green  */
.content-container .content-box:nth-child(6), #HRA  { --acc: #c0603a; }  /* Payroll       clay   */
.content-container .content-box:nth-child(7), #SMA  { --acc: #b03f72; }  /* Media         rose   */

html { --svc-mat: #ffffff; }
html[data-theme="dark"] { --svc-mat: rgba(20, 30, 64, .92); }

/* ---- the card strip: a framed "mat" with an accent border ---- */
.content-box {
  padding: 4px;
  background: var(--svc-mat);
  border: 2px solid var(--acc, #2f5fb3);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 30, 70, .12);
}
.content-box .image-box { border-radius: 8px; }
.content-box .text-box {
  left: 4px;
  width: auto;
  right: 4px;
  border-radius: 0 0 8px 8px;
  border-top: 3px solid var(--acc, #2f5fb3);
}
.content-box.active .text-box { bottom: 4px; }
.content-box .text-box h3 { color: #ffffff; }
.content-box:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }

/* ---- sections below: same accent, kept light ---- */
.servicescontent-box.left  { border-right-color: var(--acc, #103E92); }
.servicescontent-box.right { border-left-color: var(--acc, #103E92); }
.servicesborder-line  { background: repeating-linear-gradient(to right, var(--acc, #103E92), var(--acc, #103E92) 10px, transparent 10px, transparent 20px); }
.servicesborder-line1 { background: repeating-linear-gradient(to left,  var(--acc, #103E92), var(--acc, #103E92) 10px, transparent 10px, transparent 20px); }
.servicesimage-box img {
  border: 2px solid var(--acc, #103E92);
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 30, 70, .12);
}
.servicescontent-section[id] .read-more-button,
.servicescontent2-section[id] .read-more-button,
.servicescontent-container:hover .read-more-button {
  border-color: var(--acc, #103E92);
  border-width: 2px;
}

/* banner title that replaces the video strip on phones */
.services-mobile-title { display: none; }

/* ================= phones and small tablets ================= */
@media (max-width: 768px) {
  /* banner: a readable title instead of a squashed 70px video */
  .services-section {
    height: auto;
    min-height: 92px;
    background: linear-gradient(135deg, #04125e 0%, #0623b1 62%, #0a2cd9 100%);
  }
  .services-section .services-background { display: none; }
  .services-mobile-title {
    display: block;
    margin: 0;
    padding: 30px 20px 28px;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
  }

  /* card strip: one column, every card shows its title */
  .content-section { padding: 8px 16px 0; margin: 0; }
  .content-container { gap: 16px; padding: 16px 0 28px; }
  .content-container:hover .content-box:not(.active),
  .content-container:hover .content-box:not(:hover),
  .content-box.active { flex: 1; opacity: 1; }
  .content-box .image-box { height: 240px; }
  .content-box.active .image-box img,
  .content-box:hover .image-box img { transform: none; }
  .content-box .text-box,
  .content-box.active .text-box {
    bottom: 4px;
    padding: 34px 14px 12px;
    border-top: 0;
    background: linear-gradient(to top, rgba(6, 14, 40, .94) 0%, rgba(6, 14, 40, .72) 62%, rgba(6, 14, 40, 0) 100%);
  }
  .content-box .text-box::before {          /* accent tick above the title */
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin: 0 0 8px;
    border-radius: 2px;
    background: var(--acc);
  }
  .content-box .text-box h3 { font-size: 14px; line-height: 1.35; }
  .content-box .text-box p { font-size: 12px; line-height: 1.5; opacity: .92; }
  .content-box .text-box p strong { display: inline-block; margin-top: 4px; font-weight: 600; letter-spacing: .3px; }

  /* sections: image first, text left-aligned, no giant gaps */
  .servicescontent-section,
  .servicescontent2-section { padding: 26px 16px; margin: 0; border-radius: 0; box-shadow: none; }
  .servicescontent-container { flex-direction: column; align-items: stretch; gap: 18px; }
  .servicesimage-box { order: -1; height: auto; display: block; width: 100%; }
  .servicesimage-box img,
  .servicesimage-box img:hover {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    transform: none;
  }
  .servicescontent-box,
  .servicescontent-box.left,
  .servicescontent-box.right {
    width: 100%;
    padding: 2px 0 2px 16px;
    text-align: left;
    border: 0;
    border-left: 4px solid var(--acc, #103E92);
  }
  .servicescontent-box h2 { font-size: 19px; line-height: 1.3; margin-bottom: 10px; text-align: left; }
  .servicescontent-box p { font-size: 15px; line-height: 1.7; text-align: left; }
  .read-more-container { margin-top: 16px; }
  .servicescontent-section[id] .read-more-button,
  .servicescontent2-section[id] .read-more-button { padding: 10px 18px; font-size: 13px; }
  .servicesborder-line, .servicesborder-line1 { display: none; }
}

@media (max-width: 400px) {
  .content-box .image-box { height: 220px; }
  .services-mobile-title { font-size: 23px; }
}