@import url('/assets/css/internal-pages-v050-editorial-base.css');

/* PR #9 focused correction pass: shared header, hero and Services consistency. */

html {
  scrollbar-gutter: stable;
}

/* Ensure the internal-page canvas remains continuously Valence navy. */
.services-page .services-introduction,
.services-page .service-area,
.services-page .service-area:nth-of-type(odd),
.services-page .service-area:nth-of-type(even),
.services-page .implementation-support,
.services-page .contact-compact,
.about-page .about-profile,
.about-page .about-expectations,
.about-page .contact-compact,
.contact-page .contact-details-section {
  background: var(--v05-canvas-navy) !important;
}

/* Match the approved homepage desktop hero framework exactly. */
:is(.services-page,.about-page,.contact-page) .site-hero {
  height: 620px !important;
  min-height: 620px !important;
  padding: calc(var(--header-height) + 72px) 0 76px !important;
}

:is(.services-page,.about-page,.contact-page) .site-hero .site-hero-layout {
  min-height: 394px;
  height: 394px;
  grid-template-columns: minmax(0,1.1fr) minmax(300px,.9fr);
  gap: clamp(52px,8vw,104px);
  align-items: start;
}

:is(.services-page,.about-page,.contact-page) .site-hero-copy,
:is(.services-page,.about-page,.contact-page) .site-hero h1 {
  max-width: 780px;
}

:is(.services-page,.about-page,.contact-page) .site-hero h1 {
  font-size: clamp(48px,5vw,64px);
  font-weight: 680;
  letter-spacing: -.048em;
  line-height: 1.02;
}

:is(.services-page,.about-page,.contact-page) .site-hero-symbol {
  top: 50%;
  right: 34px;
  width: min(340px,30vw);
  opacity: .82;
  transform: translateY(-48%);
}

/* Lock the hero-to-panel transition to the approved homepage rhythm. */
.services-page .services-introduction,
.about-page .about-profile,
.contact-page .contact-details-section {
  padding-top: 8px !important;
}

/* Keep all detailed service headings equally strong and the long heading on one desktop line. */
.services-page .service-area-heading {
  max-width: none;
}

.services-page .service-area-heading h2 {
  max-width: none;
  font-size: clamp(34px,2.8vw,40px);
  letter-spacing: -.036em;
  overflow-wrap: normal;
}

@media (min-width: 1200px) {
  .services-page #asset-health-risk-and-investment-modelling .service-area-heading h2 {
    white-space: nowrap;
  }
}

/* Match Implementation and Change Support to the main service panel width. */
.services-page .implementation-support > .site-shell {
  width: min(calc(100% - 72px),var(--max-width));
  margin-inline: auto;
  border: 1px solid var(--v05-panel-border);
  border-radius: var(--v05-panel-radius);
}

/* Use one restrained service-card colour system. */
.services-page .service-information-card,
.services-page .service-outcome {
  background: #FBFDFE !important;
}

.services-page .services-overview-icon,
.services-page .service-area-icon {
  background: #F2F8FA !important;
}

@media (max-width: 1080px) {
  :is(.services-page,.about-page,.contact-page) .site-hero .site-hero-layout {
    grid-template-columns: minmax(0,1fr) 230px;
  }

  :is(.services-page,.about-page,.contact-page) .site-hero-symbol {
    right: 0;
    width: 230px;
  }
}

@media (max-width: 760px) {
  :is(.services-page,.about-page,.contact-page) .site-hero {
    height: auto !important;
    min-height: 0 !important;
    padding: calc(var(--header-height) + 34px) 0 44px !important;
  }

  :is(.services-page,.about-page,.contact-page) .site-hero .site-hero-layout {
    display: block;
    min-height: 0;
    height: auto;
  }

  :is(.services-page,.about-page,.contact-page) .site-hero .eyebrow {
    margin-bottom: 14px !important;
    font-size: 10.5px;
    letter-spacing: .13em;
    line-height: 1.45;
  }

  :is(.services-page,.about-page,.contact-page) .site-hero h1 {
    max-width: 100%;
    font-size: clamp(38px,10.6vw,44px);
    line-height: 1.02;
    letter-spacing: -.045em;
  }

  .about-page .site-hero h1 {
    font-size: clamp(35px,9.6vw,40px);
  }

  :is(.services-page,.about-page,.contact-page) .site-hero .site-hero-intro {
    max-width: 100%;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.52;
  }

  :is(.services-page,.about-page,.contact-page) .site-hero-symbol {
    display: none !important;
  }

  .services-page .services-introduction,
  .about-page .about-profile,
  .contact-page .contact-details-section {
    padding-top: 16px !important;
  }

  .services-page .services-introduction > .site-shell,
  .services-page .service-area > .site-shell,
  .services-page .implementation-support > .site-shell,
  .about-page .about-profile > .site-shell,
  .about-page .about-expectations > .site-shell,
  .contact-page .contact-details-section > .site-shell,
  .services-page .contact-compact > .site-shell,
  .about-page .contact-compact > .site-shell {
    width: min(calc(100% - 32px),var(--max-width));
  }

  .services-page .services-introduction > .site-shell,
  .services-page .service-area > .site-shell,
  .about-page .about-expectations > .site-shell,
  .contact-page .contact-details-section > .site-shell {
    padding: 34px 22px 36px;
  }

  .services-page .services-intro-copy h2 {
    font-size: clamp(29px,8vw,34px);
    line-height: 1.08;
  }

  .services-page .service-area-heading h2 {
    font-size: clamp(28px,7.8vw,34px);
    line-height: 1.08;
  }

  .services-page .implementation-support > .site-shell {
    padding: 34px 22px 36px;
  }

  .services-page .implementation-support h2 {
    font-size: clamp(28px,7.8vw,34px);
  }

  .about-page .about-profile-photo,
  .about-page .about-profile-photo img {
    min-height: 320px;
    height: 320px;
  }

  .about-page .about-profile-copy {
    padding: 34px 22px 38px;
  }

  .about-page .about-profile-copy h2 {
    font-size: clamp(32px,8.8vw,38px);
  }

  .contact-page .contact-primary-grid {
    gap: 26px;
    padding: 34px 22px 36px;
  }

  .contact-page .contact-introduction h2 {
    font-size: clamp(34px,9vw,40px);
    line-height: 1.06;
  }

  .contact-page .contact-role {
    font-size: 18px;
    line-height: 1.35;
  }
}