@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --spec-ink: #161f33;
  --spec-steel: #55688a;
  --spec-concrete: #ece6d8;
  --spec-paper: #f8f5ee;
  --spec-line: #d8d0bc;
  --spec-amber: #db9a34;
  --spec-amber-dark: #b87b22;
  --spec-white: #fff;
}

body.services-page {
  overflow-x: hidden;
  background: var(--spec-paper);
  color: var(--spec-ink);
  font-family: Inter, Arial, sans-serif;
}

/* Keep the existing site header, hero and footer; use the original source sections for content. */
.services-page #services-main { display: none !important; }
.services-page #main-content > section,
.services-page > section { display: block !important; }

.services-page section:not(.header-overlay) h2,
.services-page section:not(.header-overlay) h3 {
  color: var(--spec-ink) !important;
  font-family: "Space Grotesk", Arial, sans-serif;
}

/* Content entry: retained hero sits above this section. */
.services-page #main-content > section.py-16:not(.bg-gray-50) {
  padding: 74px 0 70px !important;
  background: var(--spec-paper);
}

.services-page #main-content > section.py-16:not(.bg-gray-50) > .container,
.services-page #main-content > section.py-16.bg-gray-50 > .container,
.services-page #main-content > section.py-2.bg-gray-50 > .max-w-5xl,
.services-page > section.py-16 > .container {
  width: min(calc(100% - 48px), 1240px);
  max-width: none;
  padding-inline: 0 !important;
}

.services-page .text-gray-600,
.services-page .text-gray-700 { color: var(--spec-steel) !important; }

.services-page .text-center > h2,
.services-page .text-center > h3 {
  margin: 0 !important;
  font-size: clamp(1.9rem, 3vw, 2.7rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.services-page .text-center > h2::before {
  display: block;
  margin-bottom: 14px;
  color: var(--spec-amber-dark);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .text-center > h2::before { content: "Our expertise"; }
.services-page #main-content > section.py-16.bg-gray-50 .text-center > h2::before { content: "Our methodology"; }
.services-page > section.py-16 .text-center > h2::before { content: "The Haskoch advantage"; }

/* Test.html's split intro composition. */
.services-page #main-content > section.py-16:not(.bg-gray-50) .text-center {
  display: grid;
  max-width: none;
  padding-bottom: 45px;
  margin: 0 !important;
  text-align: left !important;
  grid-template-columns: .85fr 1.15fr;
  gap: 58px;
  align-items: start;
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .text-center > p {
  max-width: 650px;
  margin: 0 !important;
  font-size: 1.02rem;
  line-height: 1.75;
}

/* One featured service, then four indexed service panels. */
.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .grid {
  gap: 14px !important;
  margin: 0 !important;
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .text-center + .grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .text-center + .grid > div:first-child {
  display: grid;
  min-height: 370px;
  padding: 42px 42px 38px 55% !important;
  border: 1px solid var(--spec-line);
  background: #fff !important;
  grid-column: 1 / -1;
  align-content: center;
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .text-center + .grid > div:first-child::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 49%;
  background: linear-gradient(0deg, rgba(22,31,51,.24), rgba(22,31,51,.05)), url('../images/commercial.jpg') center/cover no-repeat;
  content: "";
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .text-center + .grid > div:not(:first-child) {
  min-height: 330px;
  grid-column: span 2;
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .grid + .grid {
  display: grid !important;
  max-width: none !important;
  margin-top: 14px !important;
  grid-template-columns: repeat(2, 1fr);
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .grid + .grid > div { min-height: 330px; }

.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .grid > div {
  position: relative;
  display: flex;
  padding: 28px !important;
  border: 1px solid var(--spec-line);
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  flex-direction: column;
  transition: background .28s ease, transform .28s ease;
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .grid > div:hover {
  background: var(--spec-concrete) !important;
  box-shadow: none !important;
  transform: translateY(-3px);
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .grid > div > div:first-child {
  position: relative;
  z-index: 1;
  display: grid;
  width: 39px;
  height: 39px;
  margin-bottom: 18px !important;
  border: 1px solid var(--spec-amber);
  color: var(--spec-amber-dark) !important;
  place-items: center;
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .grid h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 10px !important;
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
  line-height: 1.28;
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .grid p {
  position: relative;
  z-index: 1;
  margin-bottom: 15px !important;
  color: var(--spec-steel) !important;
  font-size: .86rem !important;
  line-height: 1.62 !important;
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .grid ul {
  position: relative;
  z-index: 1;
  display: grid;
  padding-top: 11px;
  margin: auto 0 0 !important;
  border-top: 1px solid var(--spec-line);
  gap: 4px !important;
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .grid li {
  color: var(--spec-steel) !important;
  font-size: .75rem;
  line-height: 1.38;
}

.services-page #main-content > section.py-16:not(.bg-gray-50) .container > .grid li svg {
  width: 12px !important;
  height: 12px !important;
  margin-right: 6px !important;
  color: var(--spec-amber-dark) !important;
}

/* Test.html's vertical delivery rail, using all existing phase content. */
.services-page #main-content > section.py-16.bg-gray-50,
.services-page #main-content > section.py-2.bg-gray-50 { background: var(--spec-concrete) !important; }
.services-page #main-content > section.py-16.bg-gray-50 { padding: 74px 0 0 !important; }
.services-page #main-content > section.py-2.bg-gray-50 { padding: 0 0 74px !important; }

.services-page #main-content > section.py-16.bg-gray-50 .text-center {
  max-width: 720px;
  padding-bottom: 38px;
  margin: 0 !important;
  text-align: left !important;
}

.services-page #main-content > section.py-16.bg-gray-50 .text-center > p {
  margin: 14px 0 0 !important;
  color: rgba(22,31,51,.72) !important;
  font-size: .96rem;
  line-height: 1.7;
}

.services-page #main-content > section.py-16.bg-gray-50 .grid,
.services-page #main-content > section.py-2.bg-gray-50 .grid {
  position: relative;
  display: grid !important;
  max-width: 790px;
  padding-left: 42px;
  margin: 0 auto !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.services-page #main-content > section.py-16.bg-gray-50 .grid::before,
.services-page #main-content > section.py-2.bg-gray-50 .grid::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 6px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--spec-steel) 0 6px, transparent 6px 12px);
  content: "";
  opacity: .58;
}

.services-page #main-content > section.py-16.bg-gray-50 .grid > div,
.services-page #main-content > section.py-2.bg-gray-50 .grid > div {
  position: relative;
  padding: 0 0 29px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.services-page #main-content > section.py-16.bg-gray-50 .grid > div:last-child,
.services-page #main-content > section.py-2.bg-gray-50 .grid > div:last-child { padding-bottom: 0 !important; }

.services-page #main-content > section.py-16.bg-gray-50 .grid .absolute,
.services-page #main-content > section.py-2.bg-gray-50 .grid .absolute {
  top: 4px !important;
  left: -42px !important;
  display: grid;
  width: 13px !important;
  height: 13px !important;
  border: 2px solid var(--spec-amber-dark);
  border-radius: 50% !important;
  background: var(--spec-paper) !important;
  color: transparent !important;
  place-items: center;
}

.services-page #main-content > section.py-16.bg-gray-50 .grid h3,
.services-page #main-content > section.py-2.bg-gray-50 .grid h3 {
  margin-bottom: 8px !important;
  font-size: 1.22rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.services-page #main-content > section.py-16.bg-gray-50 .grid h3::before,
.services-page #main-content > section.py-2.bg-gray-50 .grid h3::before {
  display: inline-block;
  margin-right: 13px;
  color: var(--spec-amber-dark);
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
}
.services-page #main-content > section.py-16.bg-gray-50 .grid > div:nth-child(1) h3::before { content: "PH.01"; }
.services-page #main-content > section.py-16.bg-gray-50 .grid > div:nth-child(2) h3::before { content: "PH.02"; }
.services-page #main-content > section.py-16.bg-gray-50 .grid > div:nth-child(3) h3::before { content: "PH.03"; }
.services-page #main-content > section.py-16.bg-gray-50 .grid > div:nth-child(4) h3::before { content: "PH.04"; }
.services-page #main-content > section.py-2.bg-gray-50 .grid > div:nth-child(1) h3::before { content: "PH.05"; }
.services-page #main-content > section.py-2.bg-gray-50 .grid > div:nth-child(2) h3::before { content: "PH.06"; }
.services-page #main-content > section.py-2.bg-gray-50 .grid > div:nth-child(3) h3::before { content: "PH.07"; }

.services-page #main-content > section.py-16.bg-gray-50 .grid p,
.services-page #main-content > section.py-2.bg-gray-50 .grid p {
  max-width: 640px;
  margin-bottom: 11px !important;
  color: var(--spec-steel) !important;
  font-size: .87rem !important;
  line-height: 1.62 !important;
}

.services-page #main-content > section.py-16.bg-gray-50 .grid ul,
.services-page #main-content > section.py-2.bg-gray-50 .grid ul { display: grid; gap: 4px !important; }
.services-page #main-content > section.py-16.bg-gray-50 .grid li,
.services-page #main-content > section.py-2.bg-gray-50 .grid li { color: var(--spec-steel) !important; font-size: .75rem; line-height: 1.4; }
.services-page #main-content > section.py-16.bg-gray-50 .grid li svg,
.services-page #main-content > section.py-2.bg-gray-50 .grid li svg { width: 12px !important; height: 12px !important; margin-right: 6px !important; color: var(--spec-amber-dark) !important; }

.services-page #main-content > section.py-2.bg-gray-50 .text-center {
  max-width: 780px;
  padding: 31px 34px;
  margin: 39px auto 0 !important;
  border-left: 3px solid var(--spec-amber);
  background: #fff;
  text-align: left !important;
}
.services-page #main-content > section.py-2.bg-gray-50 .text-center h3 { margin-bottom: 10px !important; font-size: 1.3rem !important; }

/* Test.html's refined benefit cards and dark call-to-action band. */
.services-page > section.py-16 { padding: 76px 0 !important; background: var(--spec-paper) !important; }
.services-page > section.py-16 .text-center { max-width: 720px; padding-bottom: 26px; margin: 0 !important; text-align: left !important; }
.services-page > section.py-16 .text-center > p { margin: 14px 0 0 !important; color: var(--spec-steel) !important; font-size: .96rem; line-height: 1.7; }

.services-page > section.py-16 .container > .grid { gap: 17px !important; }
.services-page > section.py-16 .container > .grid > div { position: relative; padding: 25px 22px !important; border: 1px solid var(--spec-line); border-radius: 0 !important; background: #fff !important; box-shadow: none !important; transition: transform .25s ease, box-shadow .25s ease; }
.services-page > section.py-16 .container > .grid > div::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--spec-amber); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.services-page > section.py-16 .container > .grid > div:hover { border-color: transparent; box-shadow: 0 14px 28px rgba(22,31,51,.08) !important; transform: translateY(-4px); }
.services-page > section.py-16 .container > .grid > div:hover::before { transform: scaleX(1); }
.services-page > section.py-16 .container > .grid .absolute { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: transparent !important; color: var(--spec-amber-dark) !important; font-family: "IBM Plex Mono", monospace; font-size: .68rem !important; }
.services-page > section.py-16 .container > .grid svg { color: var(--spec-amber-dark) !important; }
.services-page > section.py-16 .container > .grid h3 { margin-bottom: 9px !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: -.02em; line-height: 1.25; }
.services-page > section.py-16 .container > .grid p { color: var(--spec-steel) !important; font-size: .78rem !important; line-height: 1.56 !important; }

.services-page > section.py-16 .container > .text-center:last-child {
  max-width: none;
  padding: 62px 24px;
  margin: 52px 0 0 !important;
  background: var(--spec-ink);
  text-align: center !important;
}
.services-page > section.py-16 .container > .text-center:last-child h3 { max-width: 680px; margin: 0 auto !important; color: #fff !important; font-size: clamp(2rem, 4vw, 3rem) !important; }
.services-page > section.py-16 .container > .text-center:last-child p { max-width: 650px; margin: 18px auto 26px !important; color: rgba(255,255,255,.72) !important; }
.services-page > section.py-16 a.bg-blue-700 { padding: 14px 23px !important; border-radius: 0 !important; background: var(--spec-amber) !important; color: var(--spec-ink) !important; font-family: "Space Grotesk", Arial, sans-serif; font-size: .82rem; font-weight: 700; }

@media (max-width: 800px) {
  .services-page #main-content > section.py-16:not(.bg-gray-50) > .container,
  .services-page #main-content > section.py-16.bg-gray-50 > .container,
  .services-page #main-content > section.py-2.bg-gray-50 > .max-w-5xl,
  .services-page > section.py-16 > .container { width: calc(100% - 32px); }
  .services-page #main-content > section.py-16:not(.bg-gray-50),
  .services-page #main-content > section.py-16.bg-gray-50,
  .services-page > section.py-16 { padding-block: 52px !important; }
  .services-page #main-content > section.py-2.bg-gray-50 { padding-bottom: 52px !important; }
  .services-page #main-content > section.py-16:not(.bg-gray-50) .text-center { grid-template-columns: 1fr; gap: 16px; }
  .services-page #main-content > section.py-16:not(.bg-gray-50) .container > .text-center + .grid,
  .services-page #main-content > section.py-16:not(.bg-gray-50) .container > .grid + .grid { grid-template-columns: 1fr; }
  .services-page #main-content > section.py-16:not(.bg-gray-50) .container > .text-center + .grid > div:first-child { min-height: 0; padding: 230px 24px 26px !important; grid-column: auto; }
  .services-page #main-content > section.py-16:not(.bg-gray-50) .container > .text-center + .grid > div:first-child::before { width: 100%; height: 205px; bottom: auto; }
  .services-page #main-content > section.py-16:not(.bg-gray-50) .container > .text-center + .grid > div:not(:first-child) { min-height: 0; grid-column: auto; }
  .services-page #main-content > section.py-16.bg-gray-50 .grid,
  .services-page #main-content > section.py-2.bg-gray-50 .grid { padding-left: 31px; }
  .services-page #main-content > section.py-16.bg-gray-50 .grid .absolute,
  .services-page #main-content > section.py-2.bg-gray-50 .grid .absolute { left: -31px !important; }
}

/* Compact pipe route for the delivery phases: across, down, then across. */
@media (min-width: 801px) {
  .services-page #main-content > section.py-16.bg-gray-50 { padding-bottom: 0 !important; }
  .services-page #main-content > section.py-2.bg-gray-50 { position: relative; padding-top: 40px !important; }

  .services-page #main-content > section.py-16.bg-gray-50 .grid,
  .services-page #main-content > section.py-2.bg-gray-50 .grid {
    display: grid !important;
    max-width: none;
    padding-left: 0;
    margin: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .services-page #main-content > section.py-2.bg-gray-50 .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .services-page #main-content > section.py-16.bg-gray-50 .grid::before,
  .services-page #main-content > section.py-2.bg-gray-50 .grid::before {
    top: -18px;
    right: 8%;
    bottom: auto;
    left: 8%;
    width: auto;
    height: 2px;
    background: var(--spec-amber);
    opacity: 1;
  }

  .services-page #main-content > section.py-2.bg-gray-50::before {
    position: absolute;
    top: -18px;
    left: calc(50% - 1px);
    width: 2px;
    height: 58px;
    background: var(--spec-amber);
    content: "";
  }

  .services-page #main-content > section.py-16.bg-gray-50 .grid > div,
  .services-page #main-content > section.py-2.bg-gray-50 .grid > div {
    min-height: 260px;
    padding: 34px 18px 18px !important;
    border: 1px solid var(--spec-line) !important;
    background: rgba(255,255,255,.9) !important;
  }

  .services-page #main-content > section.py-16.bg-gray-50 .grid .absolute,
  .services-page #main-content > section.py-2.bg-gray-50 .grid .absolute {
    top: -29px !important;
    left: 50% !important;
    width: 32px !important;
    height: 32px !important;
    border: 0;
    border-radius: 50% !important;
    background: var(--spec-amber-dark) !important;
    color: #fff !important;
    font-family: "IBM Plex Mono", monospace;
    font-size: .7rem !important;
    transform: translateX(-50%);
  }

  .services-page #main-content > section.py-16.bg-gray-50 .grid h3,
  .services-page #main-content > section.py-2.bg-gray-50 .grid h3 {
    font-size: 1.03rem !important;
  }

  .services-page #main-content > section.py-16.bg-gray-50 .grid h3::before,
  .services-page #main-content > section.py-2.bg-gray-50 .grid h3::before { display: none; }

  .services-page #main-content > section.py-16.bg-gray-50 .grid p,
  .services-page #main-content > section.py-2.bg-gray-50 .grid p { font-size: .76rem !important; }
  .services-page #main-content > section.py-16.bg-gray-50 .grid li,
  .services-page #main-content > section.py-2.bg-gray-50 .grid li { font-size: .69rem; }
}

/* 2026 company-profile edition: the visible Services page uses the PDF's core
   capability and delivery wording, organised as a compact field guide. */
.services-page #services-main {
  display: block !important;
  background: var(--spec-paper);
}

.services-page > section { display: none !important; }
/* The original page source follows the rebuilt main element; retain it in the
   file for reference but prevent duplicate Services content from rendering. */
.services-page #services-main ~ section { display: none !important; }

.services-page .build-shell {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
}

.services-page .build-hero {
  position: relative;
  display: grid;
  min-height: 390px;
  overflow: hidden;
  background: var(--spec-ink);
  place-items: end start;
}

.services-page .build-hero__image {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 25, 45, .92) 0%, rgba(14, 25, 45, .61) 49%, rgba(14, 25, 45, .25)), url('../images/services.jpg') center/cover;
}

.services-page .build-hero__content {
  position: relative;
  padding: 72px 0 58px;
  color: #fff;
}

.services-page .build-kicker {
  display: block;
  margin-bottom: 13px;
  color: var(--spec-amber);
  font: 600 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.services-page .build-kicker { color: var(--spec-amber-dark); }
.services-page .build-kicker--dark { margin-bottom: 14px; }

.services-page .build-hero h1,
.services-page .build-intro h2,
.services-page .build-process h2,
.services-page .build-proof h2,
.services-page .build-cta h2 {
  margin: 0;
  color: currentColor;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .98;
}

.services-page .build-hero h1 { max-width: 720px; font-size: clamp(3rem, 6.4vw, 6rem); }
.services-page .build-hero p { max-width: 490px; margin: 22px 0 0; color: rgba(255,255,255,.82); font-size: 1.06rem; line-height: 1.6; }

.services-page .build-intro { padding: 62px 0 45px; border-bottom: 1px solid var(--spec-line); }
.services-page .build-intro__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 60px; }
.services-page .build-intro h2 { font-size: clamp(2.3rem, 4.4vw, 4.2rem); }
.services-page .build-intro__copy > p { max-width: 690px; margin: 0; color: var(--spec-steel); font-size: 1.05rem; line-height: 1.72; }

.services-page .build-statline { display: flex; margin-top: 29px; border-top: 1px solid var(--spec-line); }
.services-page .build-statline span { flex: 1; padding: 16px 14px 0 0; color: var(--spec-steel); font: 500 10px/1.45 "IBM Plex Mono", monospace; letter-spacing: .035em; text-transform: uppercase; }
.services-page .build-statline strong { display: block; margin-bottom: 4px; color: var(--spec-ink); font: 700 25px/1 "Space Grotesk", sans-serif; }

.services-page .build-capabilities { padding: 20px 0 68px; }
.services-page .build-capabilities .build-shell { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.services-page .build-service { position: relative; display: grid; min-height: 320px; overflow: hidden; border: 1px solid var(--spec-line); background: #fff; grid-template-rows: 178px 1fr; }
.services-page .build-service-grid { display: contents; }
.services-page .build-service-grid > .build-service { grid-column: span 4; }
/* Two equal lead panels establish a clear first row; all remaining services
   then lock into two clean, three-column rows. */
.services-page .build-service--feature,
.services-page .build-service-grid > .build-service:first-child {
  height: 320px;
  min-height: 320px;
  grid-column: span 6;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr;
}
.services-page .build-service__media { min-width: 0; overflow: hidden; background: var(--spec-concrete); }
.services-page .build-service__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.74) contrast(1.04); transition: transform .55s ease, filter .35s ease; }
.services-page .build-service__number { position: absolute; z-index: 2; top: 0; left: 0; display: grid; width: 42px; height: 38px; background: var(--spec-amber); color: var(--spec-ink); font: 700 11px/1 "IBM Plex Mono", monospace; place-items: center; }
.services-page .build-service__body { display: flex; min-width: 0; padding: 20px; flex-direction: column; }
.services-page .build-service h3 { margin: 0 0 10px; color: var(--spec-ink); font: 700 20px/1.07 "Space Grotesk", sans-serif; letter-spacing: -.045em; }
.services-page .build-service p { margin: 0; color: var(--spec-steel); font-size: 13px; line-height: 1.58; }
.services-page .build-service--feature .build-service__body { padding: 32px; justify-content: center; }
.services-page .build-service--feature h3 { font-size: clamp(2rem, 2.6vw, 2.7rem); }
.services-page .build-service--feature p { max-width: 490px; font-size: .95rem; }
.services-page .build-service-grid > .build-service:first-child .build-service__body { padding: 35px; justify-content: center; }
.services-page .build-service-grid > .build-service:first-child h3 { font-size: clamp(1.65rem, 2.4vw, 2.45rem); }
.services-page .build-service-grid > .build-service:first-child p { max-width: 430px; font-size: .9rem; }
.services-page .build-service:hover .build-service__media img { filter: saturate(1); transform: scale(1.055); }
.services-page .build-service:hover { border-color: var(--spec-amber); }

/* Keep the final service row aligned to the same three-column rhythm. */
.services-page .build-service-grid > .build-service:nth-child(5) { grid-column: span 4; }
.services-page .build-service-grid > .build-service:nth-child(6),
.services-page .build-service-grid > .build-service:nth-child(7) { grid-column: span 4; }

.services-page .build-process { padding: 68px 0; background: var(--spec-concrete); }
.services-page .build-process__head { display: grid; max-width: 970px; margin-bottom: 36px; grid-template-columns: .9fr 1.1fr; gap: 55px; }
.services-page .build-process h2 { font-size: clamp(2.3rem, 4.4vw, 4rem); }
.services-page .build-process__head > p { margin: 0; color: var(--spec-steel); font-size: .96rem; line-height: 1.7; }
.services-page .build-steps { display: grid; padding: 0; margin: 0; list-style: none; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.services-page .build-steps li { position: relative; min-height: 230px; padding: 55px 19px 19px; border: 1px solid var(--spec-line); background: rgba(255,255,255,.92); grid-column: span 3; }
/* Four phases across, followed by three equal-width phases across the full row. */
.services-page .build-steps li:nth-child(n+5) { grid-column: span 4; }
.services-page .build-steps li:last-child { min-height: 230px; }
.services-page .build-steps li > span { position: absolute; top: 17px; left: 19px; color: var(--spec-amber-dark); font: 700 10px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; }
.services-page .build-steps strong { display: block; margin-bottom: 10px; color: var(--spec-ink); font: 700 18px/1.1 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.services-page .build-steps p { margin: 0; color: var(--spec-steel); font-size: .78rem; line-height: 1.58; }
.services-page .build-process__result { max-width: 860px; padding: 24px 0 0; margin: 25px auto 0; border-top: 2px solid var(--spec-amber); }
.services-page .build-process__result h3 { margin: 0 0 9px; font: 700 22px/1.1 "Space Grotesk", sans-serif; letter-spacing: -.035em; }
.services-page .build-process__result p { margin: 0; color: var(--spec-steel); font-size: .9rem; line-height: 1.65; }
.services-page .build-process__result strong { display: block; margin-top: 15px; color: var(--spec-amber-dark); font: 600 10px/1.35 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }

.services-page .build-proof { position: relative; min-height: 530px; padding: 150px 0 75px; overflow: hidden; border-top: 1px solid #30405f; border-bottom: 1px solid #30405f; background: var(--spec-ink); color: #fff; }
.services-page .build-proof__media { position: absolute; inset: 0 0 0 58%; background: linear-gradient(90deg, var(--spec-ink) 0%, rgba(22,31,51,.85) 20%, rgba(22,31,51,.08) 100%), url('../images/highways.jpg') center/cover; opacity: .95; }
.services-page .build-proof__content { position: relative; width: 62%; margin-left: clamp(32px, 4vw, 80px); }
.services-page .build-proof h2 { max-width: 580px; color: #fff !important; font-size: clamp(2.5rem, 5vw, 4.6rem); }
.services-page .build-proof__intro { max-width: 630px; margin: 22px 0 15px; color: rgba(255,255,255,.8); font-size: .95rem; line-height: 1.7; }
.services-page .build-proof__pill { margin: 0 0 28px; color: var(--spec-amber); font: 600 10px/1 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.services-page .build-proof__grid { display: grid; max-width: none; border: 1px solid rgba(255,255,255,.22); grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.22); }
.services-page .build-proof__grid > div { min-height: 134px; padding: 19px; background: #202c45; }
.services-page .build-proof__grid span { color: var(--spec-amber); font: 700 10px/1 "IBM Plex Mono", monospace; }
.services-page .build-proof__grid h3 { margin: 9px 0 6px; color: #fff !important; font: 700 16px/1.1 "Space Grotesk", sans-serif; letter-spacing: -.025em; }
.services-page .build-proof__grid p { margin: 0; color: rgba(255,255,255,.76); font-size: .76rem; line-height: 1.48; }
/* Override the page-wide heading colour applied by the legacy stylesheet. */
body.services-page #services-main .build-proof h2,
body.services-page #services-main .build-proof .build-proof__grid h3 { color: #fff !important; }

.services-page .build-cta { padding: 68px 0; background: var(--spec-paper); }
.services-page .build-cta__inner { display: grid; padding: 45px; border: 1px solid var(--spec-line); grid-template-columns: 1fr 1.1fr; gap: 22px 70px; }
.services-page .build-cta h2 { color: var(--spec-ink); font-size: clamp(2.2rem, 4vw, 3.7rem); }
.services-page .build-cta__inner > p:not(.build-kicker) { margin: 0; color: var(--spec-steel); line-height: 1.7; }
.services-page .build-cta a { align-self: end; justify-self: start; padding: 13px 18px; background: var(--spec-amber); color: var(--spec-ink); font: 700 11px/1 "IBM Plex Mono", monospace; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }

@media (max-width: 900px) {
  .services-page .build-service-grid > .build-service { grid-column: span 6; }
  .services-page .build-service-grid > .build-service:nth-child(5) { grid-column: span 6; }
  .services-page .build-steps { grid-template-columns: repeat(2, 1fr); }
  .services-page .build-steps li,
  .services-page .build-steps li:nth-child(n+5),
  .services-page .build-steps li:last-child { grid-column: auto; min-height: 230px; }
}

@media (max-width: 680px) {
  body.services-page { overflow-x: hidden; }
  .services-page #services-main { overflow: hidden; }
  .services-page .build-shell { width: calc(100% - 32px); }
  .services-page .build-hero { min-height: 330px; }
  .services-page .build-hero__content { padding-bottom: 37px; }
  .services-page .build-hero h1 { font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .services-page .build-intro { padding: 45px 0 34px; }
  .services-page .build-intro__grid, .services-page .build-process__head, .services-page .build-cta__inner { grid-template-columns: 1fr; gap: 20px; }
  .services-page .build-statline { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 23px; }
  .services-page .build-statline span { min-width: 0; padding-right: 8px; font-size: 8px; overflow-wrap: anywhere; }
  .services-page .build-statline strong { font-size: 20px; }
  .services-page .build-capabilities { padding-bottom: 47px; }
  .services-page .build-capabilities .build-shell { display: block; }
  .services-page .build-service-grid { display: block; }
  .services-page .build-service,
  .services-page .build-service--feature,
  .services-page .build-service-grid > .build-service,
  .services-page .build-service-grid > .build-service:first-child,
  .services-page .build-service-grid > .build-service:nth-child(5),
  .services-page .build-service-grid > .build-service:nth-child(6),
  .services-page .build-service-grid > .build-service:nth-child(7) { display: grid; width: 100%; height: auto; min-height: 0; margin: 0 0 14px; grid-template-columns: 1fr; grid-template-rows: 190px auto; }
  .services-page .build-service__media { min-height: 190px; }
  .services-page .build-service__body,
  .services-page .build-service--feature .build-service__body,
  .services-page .build-service-grid > .build-service:first-child .build-service__body { padding: 22px 20px 24px; }
  .services-page .build-service h3,
  .services-page .build-service--feature h3,
  .services-page .build-service-grid > .build-service:first-child h3 { font-size: 1.55rem; line-height: 1.08; }
  .services-page .build-service p,
  .services-page .build-service--feature p,
  .services-page .build-service-grid > .build-service:first-child p { max-width: none; font-size: .9rem; }
  .services-page .build-process { padding: 48px 0; }
  .services-page .build-steps, .services-page .build-proof__grid { grid-template-columns: 1fr; }
  .services-page .build-steps li, .services-page .build-steps li:last-child { min-height: 0; padding-bottom: 23px; }
  .services-page .build-proof { padding: 96px 0 50px; }
  .services-page .build-proof__content { width: auto; margin-left: 0; }
  .services-page .build-proof__media { left: 0; opacity: .18; }
  .services-page .build-cta { padding: 47px 0; }
  .services-page .build-cta__inner { padding: 27px 22px; }
  .services-page .build-cta a { width: 100%; text-align: center; }
}