.services-page {
  min-height: 0;
  padding: 0 0 66px;
  background: var(--navy-850);
}
.content-wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
/* v21: the intro is deliberately quieter so the six cards carry the page. */
.services-intro {
  position: relative;
  margin: 36px 0 28px;
  padding: clamp(25px, 2.4vw, 36px) clamp(28px, 3vw, 44px) clamp(27px, 2.6vw, 40px);
  overflow: hidden;
  border: 1px solid rgba(135,170,196,.19);
  border-radius: 13px;
  background: #041b33;
}
.services-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--cyan-bright);
}
.services-intro::after { content: none; display: none; }
.services-intro h1 {
  margin: 0 0 7px;
  font-family: Arial, sans-serif;
  font-size: clamp(20px, 1.35vw, 23px);
  line-height: 1.1;
  color: var(--cyan-bright);
  font-weight: 600;
}
.services-intro h2 {
  max-width: none;
  margin: 0 0 14px;
  font-family: Arial, sans-serif;
  font-size: clamp(34px, 2.6vw, 43px);
  line-height: 1.06;
  font-weight: 600;
}
.services-lead,
.services-note {
  max-width: 1180px;
  margin: 0;
  color: #dbe2e8;
  font-size: clamp(15.5px, 1.05vw, 17px);
  line-height: 1.5;
}
.services-lead { margin-bottom: 9px; }
.services-lead strong,
.services-note strong { color: #fff; font-weight: 600; }

/* Six modules: 3 x 2 on desktop, 2 x 3 on tablets, 1 x 6 on mobile. */
.service-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.service-card {
  display: flex;
  min-width: 0;
  min-height: 545px;
  height: 100%;
  flex-direction: column;
  border: 1px solid rgba(135,170,196,.29);
  border-radius: 12px;
  background: #08233d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.022);
  overflow: hidden;
}
.service-icon {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 25px 26px 8px;
}
.service-icon svg {
  width: 74px;
  height: 74px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service-icon .hex { stroke-width: 2.9; }
.service-cyan .service-icon { color: var(--cyan-bright); }
.service-orange .service-icon { color: var(--orange); }
.service-lime .service-icon { color: var(--lime); }

.service-copy {
  min-width: 0;
  padding: 7px 26px 22px;
  flex: 1 1 auto;
}
.service-copy h2 {
  margin: 0 0 11px;
  font-family: Arial, sans-serif;
  font-size: clamp(21px, 1.45vw, 25px);
  line-height: 1.14;
}
.service-situation {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(15.3px, 1vw, 16.5px);
  line-height: 1.42;
  font-weight: 600;
}
.service-description {
  margin: 0;
  color: #d4dce3;
  font-size: clamp(14.5px, .93vw, 15.7px);
  line-height: 1.5;
}

.service-result {
  position: relative;
  isolation: isolate;
  min-height: 156px;
  padding: 22px 26px 24px;
  overflow: hidden;
  border-top: 1px solid rgba(135,170,196,.20);
  background: rgba(2,20,38,.24);
  color: var(--cyan-bright);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
.service-result p {
  position: relative;
  z-index: 2;
  max-width: 78%;
  margin: 0;
  color: #e1e6ea;
  font-size: clamp(14.5px, .93vw, 15.7px);
  line-height: 1.5;
}
.service-result strong { color: #fff; font-weight: 600; }
.outcome-symbol {
  position: absolute;
  z-index: 1;
  right: 10px;
  bottom: 6px;
  width: 145px;
  height: 96px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .095;
  pointer-events: none;
}
.service-orange .service-result { color: var(--orange); }
.service-lime .service-result { color: var(--lime); }

/* Sixth module: invitation, deliberately related but not presented as a sixth discipline. */
.service-contact {
  background: linear-gradient(180deg, rgba(8,36,62,.96), rgba(5,29,52,.96));
}
.service-contact .service-copy h2 { color: #fff; }
.contact-action { min-height: 156px; }
.service-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 21px;
  border: 1px solid rgba(89,201,250,.55);
  border-radius: 5px;
  background: linear-gradient(180deg, #0fb8f7 0%, #079ddf 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.service-cta:hover,
.service-cta:focus-visible {
  border-color: rgba(255,255,255,.78);
  outline: none;
  filter: brightness(1.05);
}

@media (min-width: 1450px) {
  .services-page { padding-bottom: 76px; }
  .services-intro { margin-bottom: 30px; }
  .service-list { gap: 20px; }
  .service-card { min-height: 565px; }
  .service-icon { padding: 28px 30px 9px; }
  .service-icon svg { width: 80px; height: 80px; }
  .service-copy { padding: 8px 30px 24px; }
  .service-result { min-height: 164px; padding: 23px 30px 26px; }
  .outcome-symbol { width: 154px; height: 102px; right: 12px; bottom: 7px; }
}

/* Tablet landscape / Surface / iPad landscape */
@media (min-width: 901px) and (max-width: 1050px) {
  .services-page { padding-bottom: 48px; }
  .content-wrap { max-width: none; padding: 0 32px; }
  .services-intro { margin: 28px 0 24px; padding: 25px 28px 27px; }
  .services-intro h1 { font-size: 19px; }
  .services-intro h2 { margin-bottom: 13px; font-size: 35px; white-space: normal; }
  .services-lead, .services-note { font-size: 15.5px; line-height: 1.48; }

  .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .service-card { min-height: 525px; }
  .service-icon { padding: 23px 23px 7px; }
  .service-icon svg { width: 66px; height: 66px; }
  .service-copy { padding: 7px 23px 20px; }
  .service-copy h2 { font-size: 21px; }
  .service-situation { font-size: 14.7px; margin-bottom: 9px; }
  .service-description { font-size: 13.9px; line-height: 1.47; }
  .service-result { min-height: 145px; padding: 19px 23px 21px; }
  .service-result p { max-width: 78%; font-size: 13.9px; line-height: 1.47; }
  .outcome-symbol { width: 122px; height: 82px; right: 7px; bottom: 4px; opacity: .085; }
  .service-cta { min-height: 42px; padding: 0 18px; font-size: 14px; }
}

/* Tablet portrait / Surface / iPad portrait */
@media (max-width: 900px) and (min-width: 601px) {
  .services-page { padding-bottom: 48px; }
  .content-wrap { max-width: none; padding: 0 32px; }
  .services-intro { margin: 26px 0 24px; padding: 25px 27px 27px; }
  .services-intro h1 { font-size: 18.5px; }
  .services-intro h2 { margin-bottom: 13px; font-size: 34px; white-space: normal; }
  .services-lead, .services-note { font-size: 15.2px; line-height: 1.48; }

  .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .service-card { min-height: 560px; }
  .service-icon { padding: 21px 20px 7px; }
  .service-icon svg { width: 60px; height: 60px; }
  .service-copy { padding: 6px 20px 18px; }
  .service-copy h2 { font-size: 20px; }
  .service-situation { font-size: 14.2px; margin-bottom: 9px; }
  .service-description { font-size: 13.4px; line-height: 1.46; }
  .service-result { min-height: 150px; padding: 18px 20px 20px; }
  .service-result p { max-width: 80%; font-size: 13.4px; line-height: 1.46; }
  .outcome-symbol { width: 112px; height: 76px; right: 6px; bottom: 3px; opacity: .078; }
  .service-cta { min-height: 42px; padding: 0 17px; font-size: 13.8px; }
}

/* Smartphone / mobile */
@media (max-width: 600px) {
  .services-page { padding-bottom: 30px; }
  .content-wrap { max-width: none; padding: 0 15px; }
  .services-intro { margin: 17px 0 19px; padding: 22px 18px 23px 21px; border-radius: 10px; }
  .services-intro::before { width: 4px; }
  .services-intro h1 { margin-bottom: 5px; font-size: 17px; }
  .services-intro h2 { margin-bottom: 11px; font-size: 28px; line-height: 1.08; }
  .services-lead, .services-note { font-size: 13.9px; line-height: 1.46; }
  .services-lead { margin-bottom: 8px; }

  .service-list { grid-template-columns: 1fr; gap: 12px; }
  .service-card { min-height: 0; border-radius: 10px; }
  .service-icon { padding: 19px 17px 6px; }
  .service-icon svg { width: 54px; height: 54px; }
  .service-copy { padding: 5px 17px 16px; }
  .service-copy h2 { margin: 0 0 8px; font-size: 19px; line-height: 1.15; }
  .service-situation { margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
  .service-description { font-size: 13.3px; line-height: 1.45; }
  .service-result { min-height: 112px; padding: 15px 17px 17px; }
  .service-result p { max-width: 82%; font-size: 13.3px; line-height: 1.45; }
  .outcome-symbol { width: 96px; height: 66px; right: 5px; bottom: 1px; opacity: .07; }
  .service-cta { min-height: 42px; padding: 0 17px; font-size: 13.8px; }
}