@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap");
:root {
  --ink: #10233b;
  --deep: #0c2037;
  --paper: #f6f7f8;
  --sand: #e9edf0;
  --lime: #2f9267;
  --rust: #d9a743;
  --muted: #637185;
  --line: rgba(16, 35, 59, 0.12);
  --display: "Inter", Arial, sans-serif;
  --body: "Inter", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
/* Lenis drives scrolling itself; native smooth scrolling would fight it. */
html.lenis-smooth {
  scroll-behavior: auto;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.55;
}
/* `clip` contains stray horizontal overflow without turning the page into a
   scroll container, which would break position: sticky on the header. */
html,
body {
  overflow-x: clip;
}
img,
svg,
video,
iframe {
  max-width: 100%;
}
img {
  height: auto;
}
/* The mobile menu locks the page behind it. */
html.nav-open,
html.nav-open body {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: var(--display);
  letter-spacing: 0;
  font-weight: 500;
}
h1 {
  font-size: clamp(2.3rem, 7.1vw, 7.2rem);
  line-height: 0.95;
  overflow-wrap: break-word;
}
h1 em {
  font-weight: 400;
}
h2 {
  font-size: clamp(1.85rem, 4.8vw, 4.8rem);
  line-height: 0.98;
  overflow-wrap: break-word;
}
h3 {
  font-size: 1.25rem;
}
/* One fluid gutter instead of a gutter value per breakpoint: 20px on a small
   phone, easing up to 32px by tablet width. */
.shell {
  width: min(1240px, 100% - clamp(40px, 5vw, 64px));
  margin: auto;
}
.notice-bar {
  background: var(--lime);
  font: 500 0.7rem var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.notice-bar .shell {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.notice-bar a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  z-index: 5;
  top: 0;
}
.nav-wrap {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  font: 700 0.88rem/1 var(--display);
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-symbol {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background: var(--deep);
  font: 0.65rem var(--mono);
}
.primary-nav {
  display: flex;
  gap: 28px;
  font-size: 0.85rem;
}
.primary-nav a {
  position: relative;
  padding: 7px 0;
}
.primary-nav a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--lime);
  transition: width 0.2s;
}
.primary-nav a:hover:after,
.primary-nav .is-active:after {
  width: 100%;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 14px 18px;
  font: 600 0.78rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition:
    transform 0.18s,
    background 0.18s;
}
.button:hover {
  transform: translateY(-2px);
}
.button-dark {
  background: var(--deep);
  color: #fff;
}
.button-accent {
  background: var(--lime);
  color: #fff;
}
.menu-toggle {
  display: none;
  border: 0;
  background: none;
  width: 42px;
  height: 42px;
  padding: 10px;
}
.menu-toggle span {
  display: block;
  background: var(--ink);
  height: 2px;
  margin: 5px 0;
}
.hero {
  min-height: 680px;
  position: relative;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: flex-end;
}
.hero-media {
  position: absolute;
  inset: 0;
  background-image: url("https://buildeey.com/uploads/gallery/international-building-systems-factory-ibsf%2FAnyConv.com__pow1.webp");
  background-size: cover;
  background-position: center;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(11, 21, 20, 0.9),
      rgba(11, 21, 20, 0.48) 57%,
      rgba(11, 21, 20, 0.18)
    ),
    linear-gradient(0deg, rgba(11, 21, 20, 0.7), transparent 60%);
}
.hero-content {
  position: relative;
  padding: 120px 0 100px;
}
.eyebrow {
  font: 500 0.72rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lime);
  margin-bottom: 22px;
}
.eyebrow-light {
  color: #77d8a6;
}
.hero-copy {
  max-width: 48ch;
  margin-top: 26px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.84);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 38px;
}
.text-action {
  font: 600 0.77rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 6px;
}
.text-action-light {
  color: #fff;
}
.hero-index {
  width: min(1240px, 100% - 64px);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 20px 0;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.78rem;
}
.hero-index > div {
  display: flex;
  gap: 20px;
}
.hero-index p {
  margin-left: auto;
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.75);
}
.index-number {
  color: #77d8a6;
  font: 500 0.9rem var(--mono);
}
.section {
  padding: 130px 0;
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 56px;
}
.intro-grid h2 {
  max-width: 13ch;
}
.large-copy {
  font-size: 1.3rem;
  line-height: 1.45;
  margin: 30px 0;
}
.services-section {
  background: #e9edf0;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
}
.section-heading > p {
  width: 30ch;
  color: var(--muted);
  font-size: 0.9rem;
}
.service-list {
  border-top: 1px solid var(--line);
}
.service-row {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 100px;
  gap: 24px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  transition: padding 0.2s;
}
.service-row:hover {
  padding-left: 12px;
}
.service-row span {
  font: 500 0.72rem var(--mono);
  color: var(--lime);
}
.service-row h3 {
  font-size: 1.45rem;
}
.service-row p {
  font-size: 0.87rem;
  color: var(--muted);
}
.service-arrow {
  text-align: right;
  font-size: 1.4rem !important;
  color: var(--ink) !important;
}
.process {
  padding: 120px 0;
  background: var(--deep);
  color: #fff;
}
.process-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 64px;
}
.process-list {
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.process-list li {
  padding: 28px 30px 0 0;
  display: flex;
  gap: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  margin-right: 24px;
}
.process-list li:last-child {
  border: 0;
}
.process-list span {
  font: 0.72rem var(--mono);
  color: #77d8a6;
}
.process-list p {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.85rem;
  margin-top: 12px;
}
.cta-band {
  background: var(--lime);
  padding: 105px 0;
}
.cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
}
.cta-inner .eyebrow {
  margin: 0;
  color: var(--ink);
}
.cta-inner h2 {
  font-size: clamp(2.1rem, 4vw, 4rem);
}
.site-footer {
  background: #0c2037;
  color: #f4f1e8;
  padding: 54px 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.7fr 1fr 1fr;
  gap: 32px;
  align-items: start;
  font-size: 0.8rem;
}
.brand-footer .brand-symbol {
  background: var(--lime);
}
.footer-grid div:not(.brand) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-grid a:hover {
  text-decoration: underline;
}
.footer-note {
  color: #a8b0aa;
}
.page-hero {
  padding: 140px 0 120px;
  background: #e9edf0;
}
.page-hero h1 {
  margin-bottom: 30px;
}
.page-hero p:last-child {
  max-width: 60ch;
}
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.split-layout h2 {
  max-width: 12ch;
}
.split-layout > div:last-child p:not(.large-copy) {
  color: var(--muted);
}
.values {
  background: var(--deep);
  color: #fff;
  padding: 85px 0;
}
.values h2 {
  max-width: 18ch;
}
.values .shell > .values-grid {
  margin-top: clamp(40px, 4.5vw, 64px);
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
.values-grid article {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding-top: 20px;
}
.values-grid span {
  font: 0.72rem var(--mono);
  color: #77d8a6;
}
.values-grid h3 {
  font-size: 1.65rem;
  margin-top: 25px;
}
.values-grid p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 12px;
}
.contact-page {
  padding: 110px 0 130px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 90px;
}
.contact-grid h1 {
  font-size: clamp(2.9rem, 5.6vw, 5.6rem);
}
.contact-placeholder {
  font: 0.78rem var(--mono);
  color: var(--muted);
  border-left: 2px solid var(--lime);
  padding-left: 12px;
  max-width: 48ch;
}
.enquiry-form {
  display: grid;
  gap: 22px;
  padding: 32px;
  background: #e9edf0;
}
.enquiry-form label {
  font: 0.72rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.enquiry-form input,
.enquiry-form textarea,
.enquiry-form select {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  padding: 10px 0;
  font: 400 1rem var(--body);
  outline: none;
}
.enquiry-form textarea {
  resize: vertical;
}
.form-status {
  font-size: 0.84rem;
  color: #176b41;
  min-height: 1.2em;
}
.service-hero {
  padding: 110px 0 80px;
  background: var(--deep);
  color: #fff;
}
.service-crumb {
  font: 0.72rem var(--mono);
  color: #77d8a6;
  text-transform: uppercase;
}
.service-hero h1 {
  margin: 26px 0;
}
.service-hero p {
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
}
.service-detail {
  padding: 100px 0;
}
.service-detail-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 90px;
}
.service-detail-grid h2 {
  font-size: clamp(2rem, 3.5vw, 3.5rem);
}
.capability-list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.capability-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}
.capability-list li:before {
  content: "+";
  color: var(--lime);
  font: 500 1rem var(--mono);
  margin-right: 12px;
}
.service-next {
  margin-top: 36px;
  font: 0.72rem var(--mono);
  text-transform: uppercase;
  color: var(--muted);
}
.service-next a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}
.service-cta {
  background: #e9edf0;
  padding: 80px 0;
}
.service-cta .shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.service-cta h2 {
  font-size: clamp(2rem, 3.8vw, 3.8rem);
}
@media (max-width: 760px) {
  .nav-wrap {
    height: 68px;
  }
  .nav-cta {
    display: none;
  }
  .menu-toggle {
    display: block;
    margin-left: auto;
  }
  .primary-nav {
    position: absolute;
    top: 68px;
    left: 0;
    width: 100%;
    padding: 12px 20px 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
  }
  .hero {
    min-height: 640px;
  }
  .hero-content {
    padding: 100px 0;
  }
  .hero-index {
    grid-template-columns: 1fr;
    width: calc(100% - 40px);
  }
  .hero-index p {
    display: none;
  }
  .intro-grid,
  .split-layout,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .section {
    padding: 80px 0;
  }
  .section-heading,
  .process-heading {
    display: block;
  }
  .section-heading > p {
    margin-top: 24px;
  }
  .service-row {
    grid-template-columns: 42px 1fr 24px;
    gap: 12px;
  }
  .service-row p {
    grid-column: 2/4;
  }
  .service-arrow {
    grid-column: 3;
    grid-row: 1;
  }
  .process {
    padding: 80px 0;
  }
  .process-list {
    grid-template-columns: 1fr;
  }
  .process-list li {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0;
    padding: 24px 0;
  }
  .cta-band {
    padding: 75px 0;
  }
  .cta-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
  .footer-grid,
  .values-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .footer-grid > p:nth-child(2) {
    grid-column: span 2;
  }
  .page-hero {
    padding: 90px 0 80px;
  }
  .contact-page {
    padding: 75px 0;
  }
  .service-hero {
    padding: 80px 0 60px;
  }
  .service-detail {
    padding: 70px 0;
  }
  .service-detail-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .service-cta .shell {
    display: block;
  }
  .service-cta .button {
    margin-top: 28px;
  }
}

/* Brand lockup
   Both images are the supplied logo with only its white background removed,
   generated by hec-logo-he/build.py:
   - hec-logo-horizontal.webp (1246 / 300): the HE emblem on the left and the
     original text on the right, for the white headers.
   - hec-logo.webp (491 / 300): the logo as supplied (stacked), for the
     tablet header.
   The navy footers show the horizontal logo on a white card so the client's
   original navy and gold stay visible; the colours must not be altered.
   The markup text stays in the DOM for screen readers and is hidden visually.
   The breakpoint rules below only change the size. */
.unified-brand,
.brand-footer,
.home-brand {
  display: inline-block;
  line-height: 0;
}
.unified-brand::before,
.brand-footer::before,
.home-brand::before {
  content: "";
  display: block;
  aspect-ratio: 1246 / 300;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}
.unified-brand span,
.unified-brand .brand-symbol,
.brand-footer span,
.brand-footer .brand-symbol,
.home-brand span,
.home-brand .brand-symbol,
.home-brand br,
.brand-footer br {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.unified-brand::before {
  height: 58px;
  background-image: url("../img/brand/hec-logo-horizontal.webp");
}
.brand-footer::before {
  box-sizing: content-box;
  height: 56px;
  aspect-ratio: 1246 / 300;
  padding: 12px 16px;
  border-radius: 6px;
  background-color: #fff;
  background-origin: content-box;
  background-image: url("../img/brand/hec-logo-horizontal.webp");
}
@media (max-width: 760px) {
  .unified-brand::before { height: 46px; }
  .brand-footer::before { height: 44px; padding: 10px 12px; }
}
/* Below the nav breakpoint the logo shrinks to fit the compact header. */
@media (max-width: 520px) {
  .unified-brand::before {
    height: 40px;
    background-image: url("../img/brand/hec-logo-horizontal.webp");
  }
}
@media (max-width: 460px) {
  .footer-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid > p:nth-child(2) {
    grid-column: auto;
  }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }
  .hero h1 {
    font-size: 3.25rem;
  }
  .service-row h3 {
    font-size: 1.2rem;
  }
}

/* Service-page composition */
.service-page .notice-bar {
  background: #0a1829;
  color: #c3ced8;
}
.service-page .notice-bar a {
  color: #fff;
}
.service-page .site-header {
  position: absolute;
  top: 34px;
  width: 100%;
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
}
.service-page .brand-symbol {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
}
.service-page .primary-nav a:after {
  background: #77d8a6;
}
.service-page .button-dark {
  background: #2f9267;
}
.service-hero-v2 {
  min-height: 460px;
  position: relative;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background-color: #0c2037;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.service-hero-v2::before {
  display: none;
}
.service-hero-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(9, 25, 43, 0.93) 0%,
      rgba(9, 25, 43, 0.7) 47%,
      rgba(9, 25, 43, 0.28)
    ),
    linear-gradient(0deg, rgba(9, 25, 43, 0.75), transparent 55%);
}
.service-hero-v2 .shell {
  position: relative;
  z-index: 1;
  padding-bottom: 56px;
}
.service-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 38px;
  color: #d5e0e7;
  font: 500 0.68rem var(--mono);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.service-breadcrumb a:hover { color: #9be6bc; }
.service-breadcrumb b { color: #fff; font-weight: 500; }
.back-link,
.service-overline,
.section-label {
  font: 500 0.65rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.back-link {
  display: inline-block;
  margin-bottom: 54px;
  color: #dbe5ed;
}
.service-overline {
  color: #9be6bc;
  margin-bottom: 18px;
}
.service-hero-v2 h1 {
  font-size: clamp(3.1rem, 6.4vw, 6.3rem);
  margin-bottom: 16px;
}
.service-hero-v2 .hero-summary {
  max-width: 46ch;
  color: #e5edf3;
  font-size: 0.94rem;
}
.service-stamp {
  position: absolute;
  z-index: 1;
  right: 32px;
  bottom: 22px;
  color: #b8c8d7;
  font: 500 0.6rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.service-stamp span {
  margin: 0 12px;
}
.service-intro {
  padding: 118px 0 100px;
  background: #f8f9fa;
}
.service-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(42px, 7vw, 118px);
  align-items: center;
}
.vertical-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 500 0.62rem var(--mono);
  letter-spacing: 0.08em;
  color: #778897;
  text-transform: uppercase;
}
.intro-statement h2,
.capability-heading h2,
.workflow-heading h2,
.outcome-heading h2,
.related-heading h2 {
  font-size: clamp(2.35rem, 4.4vw, 4.7rem);
  line-height: 0.96;
  max-width: 11ch;
}
.intro-statement h2 span,
.capability-heading h2 span,
.workflow-heading h2 span,
.outcome-heading h2 span,
.related-heading h2 span {
  display: block;
  color: #2f9267;
}
.intro-statement p {
  font-size: 0.92rem;
  line-height: 1.8;
  color: #586a7a;
  max-width: 44ch;
  margin-top: 28px;
}
.intro-statement .text-action {
  color: #2f9267;
  margin-top: 22px;
}
.service-intro-image {
  margin: 0;
  overflow: hidden;
  min-height: 385px;
  background: #dbe2e6;
}
.service-intro-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 385px;
  object-fit: cover;
  filter: saturate(.86);
  transition: transform .6s ease;
}
.service-intro-image:hover img { transform: scale(1.035); }
.intro-aside {
  font: 0.62rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #708090;
  padding-top: 10px;
}
.intro-aside strong {
  display: block;
  color: #d7a345;
  font: 500 1.4rem/1 var(--display);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 26px;
  max-width: 9ch;
}
.capability-block {
  background: #0c2037;
  color: #fff;
  padding: 95px 0;
}
.capability-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 78px;
}
.section-label {
  color: #82d8a6;
  margin-bottom: 20px;
}
.capability-heading h2 span {
  color: #2f9267;
}
.capability-side {
  padding-top: 60px;
}
.capability-side p {
  color: #b8c6d2;
  font-size: 0.78rem;
  line-height: 1.7;
  max-width: 42ch;
  margin-bottom: 28px;
}
.capability-list-v2 {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.capability-list-v2 li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: #e3ecf2;
  font-size: 0.8rem;
}
.capability-list-v2 small {
  font: 500 0.58rem var(--mono);
  color: #79d3a1;
}
.capability-list-v2 b {
  color: #77d8a6;
  font-size: 1rem;
  font-weight: 400;
}
.capability-image {
  width: 100%;
  aspect-ratio: 1.3;
  object-fit: cover;
  display: block;
  margin-top: 28px;
  filter: brightness(0.76) saturate(0.85);
}
.service-details {
  padding: 124px 0;
  background: #0c2037;
  color: #fff;
}
.service-details-heading {
  display: grid;
  grid-template-columns: minmax(170px, .65fr) minmax(320px, 1.35fr) minmax(220px, .72fr);
  align-items: end;
  gap: clamp(28px, 4vw, 68px);
  padding-bottom: 64px;
}
.service-details-heading .section-label { margin-bottom: 14px; }
.service-details-heading .section-label { color: #8cdfae; }
.service-details-index {
  margin: 0;
  color: #91a4b5;
  font: 500 .62rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.service-details-heading h2 {
  margin: 0;
  font-size: clamp(3rem, 5.1vw, 5.5rem);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.045em;
}
.service-details-heading h2 span { color: #72c995; }
.service-details-heading > p:last-child {
  max-width: 35ch;
  margin: 0 0 4px;
  color: #b8c7d3;
  font-size: .88rem;
  line-height: 1.75;
}
.service-details-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.service-detail-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  min-height: 260px;
  padding: 34px 36px 38px;
  background: #132d47;
  border: 1px solid rgba(190, 210, 224, .15);
  border-top: 2px solid rgba(124, 214, 161, .35);
  box-shadow: none;
  transition: transform .28s ease, background .28s ease, border-color .28s ease;
}
.service-detail-card:hover {
  transform: translateY(-4px);
  background: #173752;
  border-color: rgba(124, 214, 161, .5);
}
.service-detail-card-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.service-detail-card-head small {
  color: #d8ae58;
  font: 600 .66rem var(--mono);
  letter-spacing: .08em;
}
.service-detail-card-line { width: 28px; height: 1px; background: #70c793; flex: 0 0 auto; }
.service-detail-card h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 400;
  line-height: 1.12;
  color: #fff;
}
.service-detail-card-body p {
  max-width: 70ch;
  margin: 0 0 14px;
  color: #bfd0dc;
  font-size: .87rem;
  line-height: 1.78;
}
.service-detail-card-body p:last-of-type { margin-bottom: 0; }
.service-detail-card-body ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 26px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid rgba(213, 228, 236, .16);
}
.service-detail-card-body li {
  padding: 12px 0 12px 20px;
  border-bottom: 1px solid rgba(213, 228, 236, .16);
  color: #e4edf2;
  font-size: .8rem;
  line-height: 1.45;
  position: relative;
}
.service-detail-card-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 6px;
  height: 6px;
  border: 1px solid #70c793;
  border-radius: 50%;
}
.workflow-block {
  padding: 110px 0;
  background: #f8f9fa;
}
.workflow-top {
  display: grid;
  grid-template-columns: 100px 1.3fr 0.9fr;
  gap: 50px;
  align-items: end;
}
.workflow-copy {
  font-size: 0.78rem;
  line-height: 1.8;
  color: #617180;
  max-width: 41ch;
  padding-bottom: 5px;
}
.workflow-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 62px;
  border-top: 1px solid var(--line);
}
.workflow-cards article {
  padding: 25px 24px 30px 0;
  min-height: 158px;
  border-right: 1px solid var(--line);
}
.workflow-cards article + article {
  padding-left: 24px;
}
.workflow-cards article:last-child {
  border: 0;
}
.workflow-cards small {
  font: 500 0.6rem var(--mono);
  color: #d4a042;
}
.workflow-cards h3 {
  font-size: 1.1rem;
  margin: 42px 0 9px;
}
.workflow-cards p {
  font-size: 0.7rem;
  line-height: 1.7;
  color: #697886;
  max-width: 25ch;
}
.outcome-block {
  background: #0c2037;
  color: #fff;
  padding: 82px 0;
}
.outcome-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 90px;
  align-items: end;
}
.outcome-heading h2 span {
  color: #2f9267;
}
.outcomes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.outcomes p {
  padding: 17px 0;
  color: #cbd7e0;
  font-size: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.outcomes p::before {
  content: "✓";
  color: #77d8a6;
  margin-right: 10px;
}
.related-block {
  padding: 100px 0;
  background: #f8f9fa;
}
.related-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}
.related-top .text-action {
  color: #2f9267;
}
.related-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 50px;
  border: 1px solid var(--line);
}
.related-cards a {
  min-height: 170px;
  padding: 20px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.related-cards a:last-child {
  border: 0;
}
.related-cards small {
  font: 500 0.58rem var(--mono);
  color: #2f9267;
  text-transform: uppercase;
}
.related-cards h3 {
  font-size: 1rem;
  max-width: 17ch;
}
.related-cards span {
  align-self: flex-end;
  color: #d4a042;
}
.service-page .service-cta {
  background: #0c2037;
  color: #fff;
  padding: 85px 0;
}
.service-page .service-cta .eyebrow {
  color: #77d8a6;
}
.service-page .service-cta h2 {
  font-size: clamp(2.2rem, 4.4vw, 4.7rem);
  line-height: 0.95;
}
.service-page .service-cta h2 span {
  color: #2f9267;
}
.service-page .site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 44px;
}
.service-page .brand-footer .brand-symbol {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.38);
}
.service-page .site-header .shell {
  width: min(1472px, 100% - clamp(40px, 5vw, 120px));
}
.service-page .nav-wrap {
  height: 105px;
}
.service-page .primary-nav {
  margin-left: auto;
  align-items: center;
  gap: 34px;
  font-size: 14px;
}
.service-page .primary-nav > a,
.service-page .nav-dropdown-toggle {
  color: #fff;
  font: inherit;
  background: none;
  border: 0;
  padding: 14px 0;
  cursor: pointer;
  white-space: nowrap;
}
.service-page .nav-dropdown {
  position: relative;
}
.service-page .nav-dropdown-toggle span {
  font-size: 17px;
  margin-left: 4px;
}
.service-page .nav-dropdown-panel {
  display: none;
  position: absolute;
  z-index: 10;
  top: 44px;
  left: -18px;
  width: 274px;
  background: #fff;
  color: #10233b;
  padding: 10px 12px;
  border-top: 3px solid #2f9267;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.28);
}
.service-page .nav-dropdown.is-open .nav-dropdown-panel {
  display: block;
}
.service-page .nav-dropdown-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 9px;
  border-bottom: 1px solid rgba(16, 35, 59, 0.11);
  font-size: 13px;
  color: #10233b;
}
.service-page .nav-dropdown-panel a:last-child {
  border-bottom: 0;
}
.service-page .nav-dropdown-panel a:hover {
  color: #2f9267;
  background: #f3f7f5;
}
.service-page .service-hero-v2::after {
  background:
    linear-gradient(
      90deg,
      rgba(5, 21, 37, 0.98) 0%,
      rgba(5, 21, 37, 0.98) 32%,
      rgba(5, 21, 37, 0.62) 48%,
      rgba(5, 21, 37, 0.18) 78%
    ),
    linear-gradient(0deg, rgba(5, 21, 37, 0.72), transparent 58%);
}
.service-page .service-hero-v2 .shell {
  width: min(1472px, 100% - clamp(40px, 5vw, 120px));
  padding-bottom: 86px;
}
.service-page .back-link {
  font-size: 0.72rem;
  margin-bottom: 68px;
}
.service-page .service-overline {
  font-size: 0.72rem;
}
.service-page .service-hero-v2 h1 {
  font-size: clamp(3.3rem, 6vw, 6.4rem);
}
@media (max-width: 760px) {
  .service-page .site-header {
    top: 34px;
  }
  .service-page .primary-nav {
    background: #0c2037;
  }
  .service-hero-v2 {
    min-height: 420px;
  }
  .service-hero-v2 .shell {
    padding-bottom: 46px;
  }
  .back-link {
    margin-bottom: 35px;
  }
  .service-stamp {
    right: 20px;
  }
  .service-intro,
  .workflow-block,
  .related-block {
    padding: 72px 0;
  }
  .service-intro-grid,
  .workflow-top,
  .capability-grid,
  .outcome-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .service-details { padding: 72px 0; }
  .service-details-heading { grid-template-columns: 1fr; gap: 18px; padding-bottom: 36px; }
  .service-details-list { grid-template-columns: 1fr; gap: 14px; }
  .service-detail-card { gap: 20px; min-height: auto; padding: 24px; }
  .service-detail-card-body ul { grid-template-columns: 1fr; }
  .service-intro-image,
  .service-intro-image img { min-height: 260px; }
  .vertical-label {
    writing-mode: initial;
    transform: none;
  }
  .capability-block {
    padding: 70px 0;
  }
  .capability-side {
    padding-top: 0;
  }
  .workflow-cards,
  .related-cards,
  .outcomes {
    grid-template-columns: 1fr;
  }
  .workflow-cards article,
  .workflow-cards article + article,
  .related-cards a {
    padding: 22px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-height: auto;
  }
  .workflow-cards h3 {
    margin-top: 24px;
  }
  .related-cards a {
    padding: 20px;
  }
  .outcome-block {
    padding: 65px 0;
  }
  .service-page .service-cta {
    padding: 70px 0;
  }
  .service-page .service-cta .shell {
    display: block;
  }
  .service-page .service-cta .button {
    margin-top: 28px;
  }
}

/* Shared inner-page navigation and contact experience */
.unified-topbar {
  background: var(--deep);
  color: #c6d1da;
  font: 500 0.64rem var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.unified-topbar .shell {
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.unified-topbar .shell > div { display: flex; align-items: center; gap: 22px; }
.unified-topbar a { color: #fff; transition: color .18s ease; }
.unified-topbar a:hover { color: #86d8a9; }
.unified-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 247, 248, .97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.unified-nav-wrap { min-height: 82px; display: flex; align-items: center; gap: 34px; }
.unified-nav { margin-left: auto; align-items: center; gap: 30px; }
.unified-nav > a,
.unified-nav .nav-dropdown-toggle {
  color: var(--ink);
  font: 600 .76rem var(--body);
  letter-spacing: .01em;
}
.unified-nav .nav-dropdown-toggle {
  padding: 7px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.unified-nav .nav-dropdown-toggle span { margin-left: 3px; color: var(--lime); }
.unified-nav .nav-dropdown { position: relative; }
.unified-nav .nav-dropdown-panel {
  display: none;
  position: absolute;
  top: 39px;
  left: -18px;
  width: 275px;
  padding: 8px 12px;
  background: #fff;
  border-top: 3px solid var(--lime);
  box-shadow: 0 16px 35px rgba(12, 32, 55, .16);
}
.unified-nav .nav-dropdown.is-open .nav-dropdown-panel { display: block; }
.unified-nav .nav-dropdown-panel a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 8px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: .76rem;
}
.unified-nav .nav-dropdown-panel a:last-child { border-bottom: 0; }
.unified-nav .nav-dropdown-panel a:hover { color: var(--lime); background: #f3f8f5; }
.unified-quote {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--deep);
  color: #fff;
  font: 600 .68rem var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease;
}
.unified-quote:hover { background: var(--lime); transform: translateY(-2px); }
.unified-header .menu-toggle span { background: var(--deep); }

.contact-page { padding: clamp(78px, 10vw, 132px) 0; background: #f8f9fa; }
.contact-grid { align-items: start; }
.contact-intro .large-copy { max-width: 38ch; }
/* Contact cards: email, phone and address, used on the contact page (light)
   and the homepage contact band (.contact-cards-dark). */
.contact-cards {
  display: grid;
  gap: 12px;
  max-width: 440px;
  margin-top: 38px;
}
.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  color: var(--deep);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
a.contact-card:hover { border-color: var(--lime); transform: translateY(-2px); }
.contact-card-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--lime);
  background: rgba(47, 146, 103, .12);
}
.contact-card-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-card-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.contact-card-text small {
  color: var(--muted);
  font: 500 11px var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.contact-card-text strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.contact-cards-dark .contact-card {
  color: #fff;
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
}
.contact-cards-dark a.contact-card:hover { border-color: #83d7a5; background: rgba(255, 255, 255, .08); }
.contact-cards-dark .contact-card-icon { color: #83d7a5; background: rgba(131, 215, 165, .14); }
.contact-cards-dark .contact-card-text small { color: #9fb2c2; }
.enquiry-form {
  gap: 25px;
  padding: clamp(28px, 4vw, 46px);
  background: var(--deep);
  color: #fff;
  border-top: 3px solid var(--lime);
  box-shadow: 0 18px 45px rgba(12, 32, 55, .12);
}
.enquiry-form label { color: #c7d4dd; }
.enquiry-form input,
.enquiry-form textarea,
.enquiry-form select {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .38);
}
.enquiry-form input:focus,
.enquiry-form textarea:focus,
.enquiry-form select:focus { border-bottom-color: #78d39d; }
.enquiry-form select option { color: var(--ink); }
.enquiry-form .button { justify-content: center; width: fit-content; padding: 15px 20px; }
.enquiry-form .form-status { color: #9be6bc; }

.service-page .unified-header { position: sticky; top: 0; width: auto; background: rgba(246, 247, 248, .97); color: var(--ink); border-color: var(--line); }
.service-page .unified-header .shell { width: min(1240px, 100% - 64px); }
.service-page .unified-nav { margin-left: auto; gap: 30px; font-size: inherit; }
.service-page .unified-nav > a,
.service-page .unified-nav .nav-dropdown-toggle { color: var(--ink); font: 600 .76rem var(--body); }
.service-page .unified-nav .nav-dropdown-panel { color: var(--ink); }
.service-page .unified-header .menu-toggle span { background: var(--deep); }

@media (max-width: 760px) {
  .unified-topbar .shell > span,
  .unified-topbar .shell > div a:first-child { display: none; }
  .unified-topbar .shell { justify-content: flex-end; }
  .unified-topbar .shell > div { gap: 14px; }
  .unified-nav-wrap { min-height: 68px; gap: 18px; }
  .unified-quote { display: none; }
  .unified-header .primary-nav {
    top: 68px;
    background: #f8f9fa;
    gap: 8px;
    box-shadow: 0 12px 22px rgba(12, 32, 55, .09);
  }
  .unified-header .primary-nav > a,
  .unified-header .primary-nav .nav-dropdown-toggle { padding: 11px 0; }
  .unified-nav .nav-dropdown-panel { position: static; width: 100%; margin: 6px 0; box-shadow: none; border: 1px solid var(--line); border-top: 2px solid var(--lime); }
  .enquiry-form .button { width: 100%; }
}

/* One shared header treatment for all inner pages. */
.unified-topbar { min-height: 51px; background: #0f1d2c; font-size: 12px; }
.unified-topbar .shell,
.unified-header .shell { width: min(1472px, 100% - clamp(40px, 5vw, 80px)); }
.unified-header {
  background: #fff;
  border-bottom-color: rgba(16, 35, 59, .12);
  backdrop-filter: none;
}
.unified-nav-wrap { min-height: 105px; }
.unified-brand::before {
  height: 64px;
  background-image: url("../img/brand/hec-logo-horizontal.webp");
}
@media (max-width: 760px) {
  .unified-brand::before { height: 46px; }
}
@media (max-width: 520px) {
  .unified-brand::before {
    height: 40px;
    background-image: url("../img/brand/hec-logo-horizontal.webp");
  }
}
.unified-nav > a,
.unified-nav .nav-dropdown-toggle { color: #10233b; font-size: 13px; }
.unified-nav .nav-dropdown-toggle span { color: #2f9267; }
.unified-quote { background: #3b9b70; padding: 24px 25px; font-size: 12px; }
.unified-quote:hover { background: #2f9267; }
.unified-header .menu-toggle span { background: #10233b; }
.service-page .unified-header { background: #fff; color: #10233b; border-color: rgba(16, 35, 59, .12); }
.service-page .unified-header .shell { width: min(1472px, 100% - clamp(40px, 5vw, 80px)); }
.service-page .unified-nav > a,
.service-page .unified-nav .nav-dropdown-toggle { color: #10233b; }
@media (max-width: 760px) {
  .unified-topbar { min-height: 35px; font-size: .64rem; }
  .unified-nav-wrap { min-height: 68px; }
  .unified-brand::before { height: 44px; }
  .unified-header .primary-nav { background: #fff; }
  .unified-header .primary-nav > a,
  .unified-header .primary-nav .nav-dropdown-toggle { color: #10233b; }
}

/* Between the desktop and mobile breakpoints the inner-page nav is tight, so the
   logo shrinks rather than squeezing the menu. */
@media (max-width: 1120px) and (min-width: 761px) {
  .unified-brand::before {
    height: 50px;
    background-image: url("../img/brand/hec-logo-horizontal.webp");
  }
}

/* ==========================================================================
   Responsive hardening
   The layouts below were written for desktop first and for a single 760px
   breakpoint. These rules cover the tablet band that fell between the two and
   raise touch targets on small screens. Ranges are bounded so they never
   reach past the existing mobile rules.
   ========================================================================== */

/* Tablet: multi-column grids whose minimum track widths no longer fit. */
@media (min-width: 761px) and (max-width: 900px) {
  .split-layout,
  .contact-grid,
  .service-intro-grid,
  .service-detail-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .values-grid,
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 34px;
  }
  .footer-grid > p:nth-child(2) {
    grid-column: span 2;
  }
  .service-details-heading {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
    gap: 28px 40px;
    padding-bottom: 44px;
  }
  .service-details-heading > div {
    grid-column: 1 / -1;
  }
  .service-details-list {
    grid-template-columns: 1fr;
  }
  .related-cards,
  .workflow-cards {
    grid-template-columns: 1fr 1fr;
  }
  .related-cards a:nth-child(2n),
  .workflow-cards article:nth-child(2n) {
    border-right: 0;
  }
  .section {
    padding: 96px 0;
  }
  .service-intro,
  .related-block,
  .workflow-block {
    padding: 80px 0;
  }
  .service-details {
    padding: 84px 0;
  }
  .outcome-block,
  .service-page .service-cta {
    padding: 72px 0;
  }
  .values,
  .cta-band {
    padding: 80px 0;
  }
}

/* Touch targets and form ergonomics on phones. */
@media (max-width: 760px) {
  .menu-toggle {
    width: 44px;
    height: 44px;
  }
  .primary-nav > a,
  .primary-nav .nav-dropdown-toggle,
  .nav-dropdown-panel a,
  .unified-topbar a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .nav-dropdown-panel a {
    justify-content: space-between;
  }
  .button,
  .unified-quote,
  .text-action {
    min-height: 44px;
  }
  .enquiry-form input,
  .enquiry-form textarea,
  .enquiry-form select {
    /* 16px keeps iOS Safari from zooming the viewport on focus. */
    font-size: 16px;
  }
  .page-hero {
    padding: 72px 0 56px;
  }
}

/* ==========================================================================
   Mobile navigation panel
   The panel stays in flow as a flex column and is hidden with
   visibility/opacity so GSAP can animate it. The transition below is the
   no-GSAP fallback; `has-gsap` hands motion over to the timeline.
   ========================================================================== */
@media (max-width: 760px) {
  .primary-nav {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    max-height: calc(100svh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition:
      opacity 0.26s ease,
      transform 0.26s ease,
      visibility 0.26s;
  }
  .primary-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  /* .unified-nav centres its items for the desktop row; stacked in a panel
     that reads as an accidental centre-alignment. */
  .primary-nav {
    align-items: flex-start;
  }
  .unified-nav .nav-dropdown {
    width: 100%;
  }
}
.has-gsap .primary-nav,
.has-gsap .home-nav {
  transition: none;
}
.menu-toggle span,
.home-menu-toggle span {
  transform-origin: center;
}

/* ==========================================================================
   Reduced motion
   Scroll reveals are GSAP-driven and are simply never started when the user
   asks for reduced motion, so nothing here needs to restore hidden content.
   What remains are the CSS-only effects.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   About page
   Two listing components, both on auto-fit tracks so they reflow by available
   width rather than by breakpoint.
   ========================================================================== */
.section-sand {
  background: var(--sand);
}
.about-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(34px, 4vw, 54px);
}
.about-lead p {
  max-width: 56ch;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.8;
}
/* The three live services, rendered from the same data the rest of the site
   uses so this block cannot drift out of sync. */
.about-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
.about-services a {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--lime);
  color: var(--ink);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}
.about-services a:hover {
  transform: translateY(-3px);
  border-color: rgba(47, 146, 103, 0.55);
}
.about-services small {
  font: 600 0.6rem var(--mono);
  letter-spacing: 0.08em;
  color: var(--rust);
}
.about-services h3 {
  font-size: 1.15rem;
  margin: 30px 0 10px;
}
.about-services p {
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--muted);
}
.about-services b {
  margin-top: auto;
  padding-top: 22px;
  color: var(--lime);
  font-size: 1.05rem;
  font-weight: 400;
}
@media (max-width: 760px) {
  .about-lead {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* Inquiry form: honeypot + submit states */
.form-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}
.form-status[data-state="error"] { color: #ff9a8b; }
.form-status[data-state="pending"] { opacity: .75; }
.enquiry-form button[disabled],
.home-form button[disabled] {
  opacity: .6;
  cursor: progress;
}

/* Tablet band: the side-by-side logo plus the full menu don't fit, so the header
   switches to the logo as supplied (stacked), which is far narrower. */
@media (max-width: 960px) and (min-width: 761px) {
  .unified-brand::before {
    height: 54px;
    aspect-ratio: 491 / 300;
    background-image: url("../img/brand/hec-logo.webp");
  }
  .unified-nav > a,
  .unified-nav .nav-dropdown-toggle { white-space: nowrap; }
  .unified-nav-wrap { gap: 18px; }
  .unified-nav { gap: 22px; }
  .unified-quote { padding: 18px 16px; white-space: nowrap; }
}