@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: 70px 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-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
   The mark is an SVG badge; the wordmark is live Inter text so it stays crisp,
   selectable and recolourable per background. Two mark files exist: the default
   navy badge for light surfaces and hec-mark-light.svg for dark ones. */
.unified-brand {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  grid-template-areas:
    "mark name-a name-b"
    "mark tag    tag";
  align-items: center;
  row-gap: 4px;
  color: var(--deep);
  white-space: nowrap;
}
.unified-brand::before {
  grid-area: mark;
  content: "";
  width: 38px;
  height: 37px;
  margin-right: 12px;
  background: url("../img/brand/hec-mark.svg") center / contain no-repeat;
}
.unified-brand span {
  grid-area: name-a;
  font: 800 0.95rem/1 var(--display);
  letter-spacing: 0.055em;
}
.unified-brand span + span {
  grid-area: name-b;
  margin-left: 0.32em;
}
.unified-brand::after {
  grid-area: tag;
  content: "Contracting Company";
  font: 600 0.5rem/1 var(--display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lime);
}
/* Footer lockup sits on the deep navy panel, so it uses the light mark. */
.brand-footer {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "mark name"
    "mark tag";
  align-items: center;
  row-gap: 5px;
  color: #fff;
}
.brand-footer::before {
  grid-area: mark;
  content: "";
  width: 46px;
  height: 45px;
  margin-right: 14px;
  background: url("../img/brand/hec-mark-light.svg") center / contain no-repeat;
}
.brand-footer .brand-symbol { display: none; }
.brand-footer span + span {
  grid-area: name;
  display: block;
  font: 800 0.95rem/1.15 var(--display);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.brand-footer::after {
  grid-area: tag;
  content: "Contracting Company";
  font: 600 0.5rem/1 var(--display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #77d8a6;
}
@media (max-width: 760px) {
  .unified-brand::before { width: 32px; height: 31px; margin-right: 10px; }
  .unified-brand span { font-size: 0.82rem; }
  .unified-brand::after { font-size: 0.44rem; letter-spacing: 0.18em; }
}
/* Below the nav breakpoint the wordmark is dropped and the badge stands alone. */
@media (max-width: 520px) {
  .unified-brand { grid-template-columns: auto; grid-template-areas: "mark"; }
  .unified-brand span,
  .unified-brand::after { display: none; }
  .unified-brand::before { width: 38px; height: 37px; margin-right: 0; }
}
@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-details { display: grid; gap: 8px; margin-top: 38px; }
.contact-details a {
  width: fit-content;
  color: var(--deep);
  font: 600 .8rem var(--mono);
  border-bottom: 1px solid rgba(16, 35, 59, .35);
  padding-bottom: 5px;
}
.contact-details a span { color: var(--lime); margin-left: 8px; }
.contact-details p { color: var(--muted); font-size: .84rem; margin-top: 4px; }
.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: #172839;
  border-bottom-color: rgba(255, 255, 255, .16);
  backdrop-filter: none;
}
.unified-nav-wrap { min-height: 105px; }
/* The shared inner-page header is dark, so the lockup switches to the light mark. */
.unified-brand { color: #fff; }
.unified-brand::before {
  width: 44px;
  height: 43px;
  background-image: url("../img/brand/hec-mark-light.svg");
}
.unified-brand span { font-size: 1.05rem; }
.unified-brand::after { font-size: 0.54rem; color: #77d8a6; }
.unified-nav > a,
.unified-nav .nav-dropdown-toggle { color: #fff; font-size: 13px; }
.unified-nav .nav-dropdown-toggle span { color: #9be6bc; }
.unified-quote { background: #3b9b70; padding: 24px 25px; font-size: 12px; }
.unified-quote:hover { background: #2f9267; }
.unified-header .menu-toggle span { background: #fff; }
.service-page .unified-header { background: #172839; color: #fff; border-color: rgba(255, 255, 255, .16); }
.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: #fff; }
@media (max-width: 760px) {
  .unified-topbar { min-height: 35px; font-size: .64rem; }
  .unified-nav-wrap { min-height: 68px; }
  .unified-brand::before { width: 34px; height: 33px; margin-right: 10px; }
  .unified-brand span { font-size: 0.82rem; }
  .unified-brand::after { font-size: 0.44rem; letter-spacing: 0.18em; }
  .unified-header .primary-nav { background: #172839; }
  .unified-header .primary-nav > a,
  .unified-header .primary-nav .nav-dropdown-toggle { color: #fff; }
}

/* Between the desktop and mobile breakpoints the inner-page nav is tight, so the
   lockup drops to the badge alone rather than squeezing the menu. */
@media (max-width: 1120px) and (min-width: 761px) {
  .unified-brand { grid-template-columns: auto; grid-template-areas: "mark"; }
  .unified-brand span,
  .unified-brand::after { display: none; }
  .unified-brand::before { width: 44px; height: 43px; margin-right: 0; }
}

/* ==========================================================================
   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;
}
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.sector-grid li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.sector-grid li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border: 1px solid var(--lime);
  border-radius: 50%;
}
.systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}
.systems-grid article {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--lime);
}
.systems-grid small {
  font: 600 0.6rem var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
}
.systems-grid h3 {
  font-size: 1.05rem;
  margin: 34px 0 10px;
}
.systems-grid p {
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--muted);
}
.values-lead {
  max-width: 62ch;
  margin-bottom: clamp(34px, 4vw, 52px);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.8;
}
@media (max-width: 760px) {
  .about-lead {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}