/* ============================================================
   SYMBIOSYS TECHNOLOGIES — Engineering Services page
   Extends assets/css/style.css (tokens, glass, buttons, section
   rhythm, light theme). Nothing here is used by index.html.
   ============================================================ */

/* ============================================================
   HERO — industrial blueprint instead of the home glass tunnel
   ============================================================ */
.eshero {
  background: #060A10;
  /* The header is fixed and ~100px tall over an untouched hero. Centring the
     content in the full viewport pushes it under the logo on shorter screens,
     so the top padding reserves the header and auto margins do the centring:
     they absorb spare space when there is some, and collapse to zero when
     there is not — the content can never ride up past the padding. */
  align-items: flex-start;
  padding: clamp(144px, 17vh, 200px) 0 clamp(48px, 7vh, 90px);
}
.eshero .hero__content { margin-top: auto; margin-bottom: auto; }
.eshero::before {
  background: radial-gradient(120% 96% at 50% 44%, transparent 46%, rgba(4, 8, 13, .72) 80%, rgba(3, 6, 10, .95) 100%);
}
.eshero__blueprint {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(88% 62% at 50% 8%, rgba(0, 200, 255, .12), transparent 68%),
    radial-gradient(70% 60% at 82% 96%, rgba(123, 97, 255, .13), transparent 70%),
    linear-gradient(180deg, #070C13 0%, #060A10 58%, #04070B 100%);
}
.eshero__iso {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mask-image: radial-gradient(ellipse 82% 86% at 50% 56%, black 46%, transparent 97%);
  -webkit-mask-image: radial-gradient(ellipse 82% 86% at 50% 56%, black 46%, transparent 97%);
}
.eshero__iso svg { width: 100%; height: 100%; }
/* the elevation is roughly 2:1, so any portrait viewport letterboxes it
   down to a thin strip — zoom in there so it still reads as a plant
   (the phone breakpoint later in this sheet zooms further still) */
@media (max-aspect-ratio: 6/5) {
  .eshero__iso { transform: scale(1.7); transform-origin: 50% 66%; }
}
/* the drawing carries ~40 strokes, so it settles in as one calm fade
   rather than forty lines racing each other */
.iso-scene { opacity: 0; animation: isofade 1.7s var(--ease-out) .45s forwards; }
@keyframes isofade { to { opacity: 1; } }
.iso-nodes circle { opacity: 0; animation: isonode 1.2s ease-out 1.5s forwards; }
@keyframes isonode {
  0% { opacity: 0; }
  100% { opacity: .9; }
}

.eshero__content { max-width: 1080px; }
.eshero__title { font-size: clamp(34px, 5.4vw, 84px); }
.eshero .hero__sub { max-width: 62ch; margin-left: auto; margin-right: auto; }

/* lifecycle chain under the hero CTAs */
.eshero__chain {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 0;
  margin-top: clamp(34px, 5vh, 58px);
}
.eshero__chain li {
  position: relative;
  padding: 0 clamp(9px, 1.1vw, 16px);
  font-family: var(--font-display);
  font-size: clamp(9px, .78vw, 11px);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(214, 226, 240, .68);
  white-space: nowrap;
}
.eshero__chain li + li::before {
  content: "→";
  position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  color: rgba(0, 200, 255, .55);
  font-size: 10px;
}
.eshero__chain li:last-child { color: var(--cyan); }

/* ============================================================
   SHARED PAGE PIECES
   ============================================================ */
.page-eng .section { scroll-margin-top: 110px; }

/* Section labels: no numbering, set at display size in the brand indigo.
   The base .label tracking is .38em, which reads as spaced-out noise once
   the type doubles — eased back so the line stays legible and does not run
   away from its column. */
.page-eng .label {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.3;
}
@media (max-width: 760px) {
  .page-eng .label { font-size: 18px; letter-spacing: .14em; }
}

.es-h3 {
  margin: clamp(38px, 5vh, 62px) 0 20px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--grey);
}
.es-h3:first-child { margin-top: 0; }

/* two-column section: sticky headline + scrolling body */
.es-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.es-split__head { position: sticky; top: 128px; }
.es-split__head .section__title { font-size: clamp(32px, 4vw, 60px); }
.es-split__btn { margin-top: 32px; }

/* scope lists */
.es-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.es-cols--gap { margin-top: clamp(46px, 6vh, 74px); }
.es-col h4 {
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: #7DFFB2;
}
.es-list { display: flex; flex-direction: column; gap: 9px; }
.es-list li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--grey);
}
.es-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 9px; height: 1px;
  background: var(--blue);
}

/* horizontal process track */
.es-track {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 10px;
}
.es-track li {
  position: relative;
  display: flex; align-items: center;
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: rgba(18, 18, 18, .4);
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--white);
  transition: border-color .35s, box-shadow .35s, color .35s;
}
.es-track li:hover { border-color: rgba(42, 245, 255, .4); box-shadow: 0 0 24px rgba(0, 200, 255, .14); }
.es-track li + li::before {
  content: "";
  position: absolute; left: -10px; top: 50%;
  width: 10px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 200, 255, .6));
}
.es-track li:last-child {
  border-color: rgba(42, 245, 255, .35);
  color: var(--cyan);
}
.es-track--wide li { padding: 14px 26px; font-size: 12px; }
.es-track--wide { margin-bottom: clamp(40px, 6vh, 68px); }

/* ------------------------------------------------------------------
   PROJECT PHASE BAND — where Symbiosys carries work inside a lifecycle
   that otherwise belongs to the client's engineering organisation
   ------------------------------------------------------------------ */
.es-phases {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.es-phases::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--border);
}
.es-phases li {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 86px;
  padding: 13px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(18, 18, 18, .5);
  font-family: var(--font-display);
  font-size: 11px; line-height: 1.35; letter-spacing: .05em;
  color: var(--grey);
  transition: border-color .4s, color .4s, box-shadow .4s;
}
.es-phases li span {
  margin-top: auto;
  font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
  overflow-wrap: anywhere;
  color: rgba(184, 184, 184, .6);
}
.es-phases .is-primary {
  border-color: rgba(42, 245, 255, .5);
  color: var(--white);
  font-weight: 600;
  box-shadow: 0 0 26px rgba(0, 200, 255, .12);
}
.es-phases .is-primary span { color: var(--cyan); }
.es-phases .is-support { border-color: rgba(42, 245, 255, .24); color: var(--white); }
.es-phases__note {
  margin-top: 14px;
  font-size: 13px; line-height: 1.6;
  color: var(--grey);
}

/* ------------------------------------------------------------------
   DISCIPLINE CARDS — scope stated the way an engineering manager
   scans it: by discipline, each with its own deliverables
   ------------------------------------------------------------------ */
.es-disc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}
.es-disc__card {
  padding: 28px 26px;
  border-radius: 18px;
  transition: transform .45s var(--ease-out), border-color .45s, box-shadow .45s;
}
.es-disc__card:hover {
  transform: translateY(-4px);
  border-color: rgba(42, 245, 255, .32);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .4);
}
.es-disc__card h4 {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600; letter-spacing: .04em;
  color: #7DFFB2;
}
.es-disc__card > p {
  margin-bottom: 18px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.65;
  color: var(--grey);
}
.es-disc__card .es-list li { font-size: 13.5px; }
/* an odd fifth card would sit alone in a half-width column, so it runs
   the full row with its list set in two columns instead */
.es-disc__card--wide { grid-column: 1 / -1; }
.es-disc__card--wide .es-list {
  display: block;
  columns: 2; column-gap: clamp(24px, 4vw, 56px);
}
.es-disc__card--wide .es-list li { break-inside: avoid; margin-bottom: 9px; }

/* deliverable chips */
.es-deliver {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 12px;
}
.es-deliver li {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(18, 18, 18, .45);
  font-family: var(--font-display);
  font-size: 12.5px; letter-spacing: .06em;
  color: var(--white);
  transition: border-color .4s, transform .4s var(--ease-out), box-shadow .4s;
}
.es-deliver li:hover {
  transform: translateY(-3px);
  border-color: rgba(42, 245, 255, .38);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}
.es-deliver__ico {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 1px solid rgba(0, 200, 255, .5);
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 45%, rgba(0, 200, 255, .7) 45%, rgba(0, 200, 255, .7) 55%, transparent 55%),
    linear-gradient(0deg, transparent 45%, rgba(0, 200, 255, .35) 45%, rgba(0, 200, 255, .35) 55%, transparent 55%);
}

/* generic card grid */
.es-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(276px, 100%), 1fr));
  gap: 18px;
}
.es-cards--tight { grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr)); }
.es-card {
  position: relative;
  padding: 32px 28px;
  border-radius: 18px;
  transition: transform .45s var(--ease-out), border-color .45s, box-shadow .45s;
}
.es-card:hover {
  transform: translateY(-6px);
  border-color: rgba(42, 245, 255, .35);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 0 30px rgba(0, 200, 255, .08);
}
.es-card h3 {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  letter-spacing: .05em;
  color: #7DFFB2;
}
.es-card p { font-size: 14px; line-height: 1.7; color: var(--grey); }
.es-card__num {
  display: block; margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .3em;
  color: var(--blue);
}

/* qualifier note */
.es-note {
  display: flex; align-items: flex-start; gap: 14px;
  max-width: 78ch;
  margin-top: clamp(30px, 4vh, 46px);
  padding: 22px 26px;
  border: 1px solid var(--border);
  border-left: 2px solid rgba(0, 200, 255, .55);
  border-radius: 4px 16px 16px 4px;
  background: rgba(18, 18, 18, .38);
  font-size: 14px; line-height: 1.75; color: var(--grey);
}
.es-note .pulse-dot { margin-top: 9px; flex-shrink: 0; }

/* ============================================================
   01 — SERVICES AT A GLANCE
   ============================================================ */
.es-caps { background: var(--bg-2); }
.es-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 18px;
}
.es-grp {
  position: relative;
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 34px 30px 30px;
  border-radius: 22px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out), border-color .5s, box-shadow .5s;
}
.es-grp::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(50% 60% at 50% 0%, rgba(0, 200, 255, .13), transparent 70%);
  transition: opacity .5s;
  pointer-events: none;
}
.es-grp:hover, .es-grp:focus-visible {
  border-color: rgba(42, 245, 255, .35);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .45), 0 0 34px rgba(0, 200, 255, .08);
}
.es-grp:hover::before { opacity: 1; }
.es-grp__letter {
  position: absolute; top: 22px; right: 26px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600; letter-spacing: .3em;
  color: rgba(0, 200, 255, .55);
}
.es-grp__icon { width: 46px; height: 46px; }
.es-grp__icon svg { width: 100%; height: 100%; overflow: visible; }
.es-grp h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.6vw, 23px); font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.es-grp > p { font-size: 14.5px; line-height: 1.65; color: var(--grey); }
.es-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.es-chips li { display: flex; }
.es-chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: rgba(255, 255, 255, .02);
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  text-align: left;
  color: rgba(214, 226, 240, .78);
  cursor: pointer;
  transition: color .3s, border-color .3s, background .3s, transform .3s var(--ease-out);
}
.es-chip:hover {
  color: var(--white);
  border-color: rgba(42, 245, 255, .55);
  background: rgba(42, 245, 255, .07);
  transform: translateY(-1px);
}
.es-grp:hover .es-chip { border-color: rgba(42, 245, 255, .22); }
/* the home-page .panel__cta is hover-only; these cards are the page's
   own table of contents, so the label stays readable without a pointer */
.es-grp .panel__cta {
  margin-top: auto; padding-top: 14px;
  opacity: .75; transform: none;
}
.es-grp:hover .panel__cta,
.es-grp:focus-visible .panel__cta { opacity: 1; color: var(--cyan); }
.es-grp:hover .panel__cta i { transform: translateX(6px); }

/* visible keyboard focus — the base sheet leaves this to the browser */
.page-eng a:focus-visible,
.page-eng button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
.page-eng .es-grp:focus-visible { border-radius: 22px; }

/* ============================================================
   02 — ENGINEERING LIFECYCLE
   ============================================================ */
.es-life__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 18px;
}
/* the connecting spine across the node row */
.es-life__rail::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 7px;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 200, 255, .5), rgba(123, 97, 255, .45));
  opacity: .5;
}
.es-life__stage {
  position: relative;
  padding-top: 34px;
  opacity: .45;
  transform: translateY(10px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.es-life__stage.is-on { opacity: 1; transform: none; }
.es-life__node {
  position: absolute; top: 0; left: 0;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid rgba(0, 200, 255, .5);
  background: var(--bg);
  transition: background .5s, box-shadow .5s, border-color .5s;
}
.es-life__stage.is-on .es-life__node {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 20px rgba(42, 245, 255, .55);
}
.es-life__num {
  display: block; margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .3em;
  color: var(--blue);
}
.es-life__stage h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px); font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.es-life__stage > p {
  font-size: 12px; letter-spacing: .04em;
  color: var(--grey);
  margin-bottom: 14px;
}
.es-life__stage ul { display: flex; flex-direction: column; gap: 5px; }
.es-life__stage ul li {
  font-size: 12.5px; line-height: 1.5;
  color: var(--grey);
}
.es-life__stage ul li::before { content: "· "; color: var(--blue); }

/* ============================================================
   05/06 — FIELD-TO-DIGITAL FLOW
   ============================================================ */
/* seven steps on a four-column grid: the final step spans the spare
   column so the sequence closes on its outcome instead of trailing off */
.es-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.es-flow li:last-child {
  grid-column: span 2;
  border-color: rgba(42, 245, 255, .28);
  background:
    linear-gradient(120deg, rgba(0, 200, 255, .07), transparent 60%),
    rgba(18, 18, 18, .42);
}
.es-flow li:last-child h3 { color: var(--cyan); }
.es-flow li {
  position: relative;
  padding: 26px 22px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(18, 18, 18, .42);
  opacity: .5;
  transition: opacity .6s var(--ease-out), border-color .5s, transform .5s var(--ease-out), box-shadow .5s;
}
.es-flow li.is-on {
  opacity: 1;
  border-color: rgba(42, 245, 255, .3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .34);
}
.es-flow__i {
  display: block; margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: .3em;
  color: var(--blue);
}
.es-flow li h3 {
  font-family: var(--font-display);
  font-size: 15.5px; font-weight: 600; letter-spacing: .02em;
  margin-bottom: 8px;
}
.es-flow li p { font-size: 13.5px; line-height: 1.6; color: var(--grey); }

/* ============================================================
   SECTION BACKGROUNDS — alternating rhythm, matching the home page
   ============================================================ */
.es-life { background: var(--bg); }
.es-detail { background: var(--bg-2); }
.es-plant { background: var(--bg); }
.es-pid { background: var(--bg-2); }
.es-survey { background: var(--bg); }
.es-asbuilt { background: var(--bg-2); }
.es-scan { background: var(--bg); }
.es-struct { background: var(--bg-2); }
.es-ind { background: var(--bg); }
.es-deliverymodel { background: var(--bg-2); }

/* ============================================================
   10 — INDUSTRIES
   ============================================================ */
.es-inds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}
.es-inds li {
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(18, 18, 18, .4);
  font-family: var(--font-display);
  font-size: 15px; font-weight: 500; letter-spacing: .02em;
  transition: border-color .4s, transform .4s var(--ease-out), color .4s;
}
.es-inds li:hover {
  transform: translateY(-4px);
  border-color: rgba(42, 245, 255, .35);
  color: var(--cyan);
}

/* ============================================================
   12 — CONTACT
   ============================================================ */
.es-contact__cta { justify-content: flex-start; margin-top: 34px; }
.es-form__title {
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--grey);
}
.es-contact .contact__meta p span { display: block; }

/* ============================================================
   NAV — seven items need a tighter rhythm on mid-size screens
   ============================================================ */
.page-eng .nav__link.is-current { color: var(--white); }
.page-eng .nav__link.is-current::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 1180px) {
  .page-eng .nav__links { gap: 18px; }
  .page-eng .nav__link { font-size: 11px; letter-spacing: .16em; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .es-life__rail { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 40px; }
  .es-life__rail::before { display: none; }
}
@media (max-width: 1024px) {
  .es-split { grid-template-columns: 1fr; }
  .es-split__head { position: static; }
  .es-life__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .es-phases::before { display: none; }
}
@media (max-width: 760px) {
  /* the headline is five words longer than the home hero: let it wrap
     as prose instead of one word per line, and let the section grow
     with its content so nothing sits under the fixed header */
  .eshero { min-height: auto; padding: 140px 0 76px; }
  /* the elevation is 2:1, so on a portrait screen it letterboxes down to a
     thin strip — zoom into the rack and column so the drawing still reads */
  .eshero__iso { transform: scale(2.4); transform-origin: 50% 74%; }
  /* the desktop scrim would blanket a phone hero end to end — pull it
     back to just the headline so the drawing stays visible below it */
  html[data-theme="light"] .page-eng .eshero .hero__content::before {
    width: min(118vw, 560px);
    height: min(52vh, 400px);
    top: 38%;
  }
  .eshero .hero__line > span { display: inline-block; }
  .eshero__title { font-size: clamp(28px, 7.4vw, 44px); }
  .eshero__chain { gap: 8px 0; }
  .eshero__chain li { font-size: 9px; padding: 0 10px; }
  .es-groups { grid-template-columns: 1fr; }
  .es-grp { padding: 28px 22px 24px; }

  /* lifecycle becomes a vertical timeline with a continuous rail */
  .es-life__rail {
    display: flex; flex-direction: column;
    gap: 0;
    padding-left: 26px;
  }
  .es-life__rail::before {
    display: block;
    left: 7px; right: auto; top: 8px; bottom: 8px;
    width: 1px; height: auto;
    background: linear-gradient(180deg, rgba(0, 200, 255, .5), rgba(123, 97, 255, .45));
  }
  .es-life__stage { padding: 0 0 34px; }
  .es-life__node { left: -26px; top: 4px; }

  .es-flow { grid-template-columns: 1fr; }
  .es-flow li:last-child { grid-column: span 1; }
  /* stacked one per row, the tall cells read as empty boxes — collapse
     each phase to a single compact line */
  .es-phases { grid-template-columns: 1fr; gap: 6px; }
  .es-phases li {
    min-height: 0;
    flex-direction: row; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 11px 14px;
  }
  .es-phases li span { margin-top: 0; white-space: nowrap; }
  .es-disc { grid-template-columns: 1fr; }
  .es-disc__card--wide .es-list { columns: 1; }
  .es-track li { padding: 10px 16px; font-size: 10px; }
  .es-track--wide li { padding: 11px 18px; font-size: 11px; }
  .es-note { padding: 20px; }
}

/* ============================================================
   REDUCED MOTION — nothing is hidden behind an animation
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .iso-scene { opacity: 1; animation: none; }
  .iso-nodes circle { opacity: .9; animation: none; }
  .es-life__stage, .es-flow li { opacity: 1; transform: none; }
}
html.reduced-motion .es-life__stage,
html.reduced-motion .es-flow li { opacity: 1 !important; transform: none !important; }

/* ============================================================
   LIGHT THEME
   ============================================================ */
html[data-theme="light"] .es-track li { background: rgba(255, 255, 255, .7); }
html[data-theme="light"] .es-track li:last-child { color: #0B7C99; }
html[data-theme="light"] .es-deliver li { background: rgba(255, 255, 255, .7); }
html[data-theme="light"] .es-chips li { background: rgba(255, 255, 255, .6); color: #333E48; }
html[data-theme="light"] .es-grp__letter { color: #0B7C99; }
html[data-theme="light"] .es-flow li { background: rgba(255, 255, 255, .7); }
html[data-theme="light"] .es-phases li { background: rgba(255, 255, 255, .7); }
html[data-theme="light"] .es-phases li span { color: rgba(51, 62, 72, .68); }
html[data-theme="light"] .es-phases .is-primary { border-color: rgba(11, 124, 153, .55); box-shadow: 0 0 22px rgba(11, 124, 153, .12); }
html[data-theme="light"] .es-phases .is-primary span { color: #0B7C99; }
html[data-theme="light"] .es-phases .is-support { border-color: rgba(11, 124, 153, .3); }
html[data-theme="light"] .es-inds li { background: rgba(255, 255, 255, .7); }
html[data-theme="light"] .es-inds li:hover { color: #0B7C99; }
html[data-theme="light"] .es-note { background: rgba(255, 255, 255, .65); border-left-color: rgba(11, 124, 153, .6); }
html[data-theme="light"] .es-life__node { background: var(--surface); border-color: rgba(11, 124, 153, .6); }
html[data-theme="light"] .es-life__stage.is-on .es-life__node { background: #0B7C99; border-color: #0B7C99; box-shadow: 0 0 16px rgba(11, 124, 153, .35); }
html[data-theme="light"] .es-life__num,
html[data-theme="light"] .es-flow__i,
html[data-theme="light"] .es-card__num { color: #0B7C99; }
html[data-theme="light"] .es-list li::before { background: #0B7C99; }
html[data-theme="light"] .es-life__stage ul li::before { color: #0B7C99; }
html[data-theme="light"] .es-deliver__ico { border-color: rgba(11, 124, 153, .55); }

/* ------------------------------------------------------------------
   LIGHT-THEME HERO — white
   The home hero is pinned dark in both themes (it sits over the WebGL
   glass tunnel). This hero is a drawing, so in light mode it inverts
   into a white blueprint field: the base sheet's dark pinning for
   .hero, and the white-on-dark nav that goes with it, are undone here.
   ------------------------------------------------------------------ */
html[data-theme="light"] .page-eng .eshero {
  --white: #0C1116;
  --grey: #333E48;
  --border: rgba(10, 20, 30, .26);
  color: #0C1116;
  background: #FFFFFF;
}
html[data-theme="light"] .page-eng .eshero::before {
  background: radial-gradient(118% 94% at 50% 44%, transparent 54%, rgba(226, 233, 241, .5) 84%, rgba(216, 225, 235, .8) 100%);
}
html[data-theme="light"] .page-eng .eshero__blueprint {
  background:
    radial-gradient(88% 62% at 50% 6%, rgba(0, 168, 204, .12), transparent 66%),
    radial-gradient(70% 60% at 84% 98%, rgba(123, 97, 255, .10), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFCFD 60%, #F4F7FA 100%);
}
/* the shared grid draws in white — ink it dark on the white sheet */
html[data-theme="light"] .page-eng .eshero .hero__grid {
  background-image:
    linear-gradient(rgba(10, 20, 30, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 20, 30, .05) 1px, transparent 1px);
}
/* the headline glow pools darkness for contrast on the dark hero;
   on white it becomes a soft white scrim over the drawing */
html[data-theme="light"] .page-eng .eshero .hero__content::before {
  width: min(126vw, 1180px);
  height: min(82vh, 720px);
  top: 50%;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(0, 168, 204, .06), transparent 72%),
    radial-gradient(64% 60% at 50% 50%, rgba(255, 255, 255, .94), rgba(255, 255, 255, .72) 62%, transparent 84%);
}

/* line-art re-inked for white */
html[data-theme="light"] .page-eng .iso-steel { stroke: rgba(28, 20, 84, .30); }
html[data-theme="light"] .page-eng .iso-vessel { stroke: rgba(28, 20, 84, .34); }
html[data-theme="light"] .page-eng .iso-pipe { stroke: rgba(11, 124, 153, .42); }
html[data-theme="light"] .page-eng .iso-main { stroke: rgba(11, 124, 153, .72); }
html[data-theme="light"] .page-eng .iso-mark { stroke: rgba(28, 20, 84, .55); }
html[data-theme="light"] .page-eng .iso-faint { stroke: rgba(28, 20, 84, .15); }
html[data-theme="light"] .page-eng .iso-nodes circle { fill: #0B7C99; }
html[data-theme="light"] .page-eng .iso-node--alt { fill: #6A3FD8; }

/* headline: cyan is unreadable on white, so the accent and the outline
   both step down to the light palette's deeper inks */
html[data-theme="light"] .page-eng .eshero .hero__line--accent,
html[data-theme="light"] .page-eng .eshero .hero__line--accent .char {
  background: linear-gradient(92deg, #0B7C99 0%, #0EA5C9 52%, #6A3FD8 105%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html[data-theme="light"] .page-eng .eshero .hero__line--outline {
  -webkit-text-stroke: 1.5px rgba(12, 17, 22, .62);
}
html[data-theme="light"] .page-eng .eshero .pulse-dot {
  background: #0B7C99;
  animation-name: dotpulse-light;
}
@keyframes dotpulse-light {
  0% { box-shadow: 0 0 0 0 rgba(11, 124, 153, .45); }
  70% { box-shadow: 0 0 0 12px rgba(11, 124, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(11, 124, 153, 0); }
}
html[data-theme="light"] .page-eng .eshero .btn--ghost {
  color: #0C1116;
  border-color: rgba(15, 25, 35, .28);
  background: rgba(255, 255, 255, .45);
}
html[data-theme="light"] .page-eng .eshero .btn--ghost:hover {
  border-color: rgba(11, 124, 153, .6);
  box-shadow: 0 0 26px rgba(11, 124, 153, .16);
}
html[data-theme="light"] .page-eng .eshero__chain li { color: rgba(51, 62, 72, .82); }
html[data-theme="light"] .page-eng .eshero__chain li + li::before { color: rgba(11, 124, 153, .7); }
html[data-theme="light"] .page-eng .eshero__chain li:last-child { color: #0B7C99; }

/* the transparent nav over a white hero needs the dark wordmark and
   dark links, not the white-on-dark set the base sheet pins there */
html[data-theme="light"] .page-eng .nav:not(.is-scrolled) {
  --white: #0C1116;
  --grey: #333E48;
  --border: rgba(10, 20, 30, .26);
  color: #0C1116;
}
html[data-theme="light"] .page-eng .nav:not(.is-scrolled) .logo-on-dark { display: none; }
html[data-theme="light"] .page-eng .nav:not(.is-scrolled) .logo-on-light { display: block; }
/* the menu button is the only navigation on phones — it is a dark disc
   built for a dark hero, so it turns to light glass over the white one */
html[data-theme="light"] .page-eng .nav:not(.is-scrolled) .nav__burger {
  background: rgba(255, 255, 255, .72);
}
html[data-theme="light"] .page-eng .nav:not(.is-scrolled) .nav__burger-dots i {
  background: #0B7C99;
  box-shadow: 0 0 7px rgba(11, 124, 153, .35);
}
html[data-theme="light"] .page-eng .nav:not(.is-scrolled) .nav__burger-dots i:nth-child(2),
html[data-theme="light"] .page-eng .nav:not(.is-scrolled) .nav__burger-dots i:nth-child(3) {
  background: #0C1116;
  box-shadow: 0 0 7px rgba(12, 17, 22, .22);
}

/* ------------------------------------------------------------------
   HEADINGS — brand indigo #1C1454
   Light theme only: on the near-black dark ground this navy would sit
   at roughly 1.5:1 against the background, so dark mode keeps its own
   heading palette.
   ------------------------------------------------------------------ */
html[data-theme="light"] .page-eng .label,
html[data-theme="light"] .page-eng h1,
html[data-theme="light"] .page-eng h2,
html[data-theme="light"] .page-eng h3,
html[data-theme="light"] .page-eng h4,
html[data-theme="light"] .page-eng .section__title em,
html[data-theme="light"] .page-eng .es-h3,
html[data-theme="light"] .page-eng .es-card h3,
html[data-theme="light"] .page-eng .es-disc__card h4,
html[data-theme="light"] .page-eng .es-col h4,
html[data-theme="light"] .page-eng .es-flow li:last-child h3 {
  color: #1C1454;
}
/* the hero headline is one h1 in three treatments — solid, gradient and
   outlined; all three carry the same ink now */
html[data-theme="light"] .page-eng .eshero .hero__line--accent,
html[data-theme="light"] .page-eng .eshero .hero__line--accent .char {
  background: none;
  color: #1C1454;
  -webkit-text-fill-color: #1C1454;
}
html[data-theme="light"] .page-eng .eshero .hero__line--outline {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px rgba(28, 20, 84, .62);
}

/* the hero keeps its night palette in dark mode */
html[data-theme="dark"] .page-eng .eshero__chain li { color: rgba(214, 226, 240, .68); }
html[data-theme="dark"] .page-eng .eshero__chain li:last-child { color: var(--cyan); }

/* ============================================================
   TOPIC POPUP — a small card carrying an original line drawing
   and a short brief for one capability
   ============================================================ */
.es-modal {
  position: fixed; inset: 0; z-index: 960;
  display: grid; place-items: center; padding: 20px;
  visibility: hidden; pointer-events: none;
}
.es-modal.is-open { visibility: visible; pointer-events: auto; }
.es-modal__veil {
  position: absolute; inset: 0;
  background: rgba(6, 10, 16, .55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .4s var(--ease-out);
}
.es-modal.is-open .es-modal__veil { opacity: 1; }
.es-modal__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-radius: 26px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(22px) scale(.97);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.es-modal.is-open .es-modal__panel { opacity: 1; transform: none; }
/* cursor-tracked sheen, matching the service panels elsewhere on the site */
.es-modal__sweep {
  position: absolute; inset: 0; border-radius: 26px; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 200, 255, .10), transparent 68%);
}
.es-modal__close {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--white);
  background: rgba(255, 255, 255, .04);
  transition: border-color .3s, color .3s, transform .3s var(--ease-out);
}
.es-modal__close:hover { border-color: rgba(42, 245, 255, .6); color: var(--cyan); transform: rotate(90deg); }
.es-modal__fig { position: relative; padding: 30px 30px 0; }
.es-modal__fig svg {
  width: 100%; height: auto;
  max-height: 200px;
  border-radius: 16px;
  padding: 18px;
  background:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(140deg, rgba(0, 200, 255, .07), transparent 62%);
  background-size: 26px 26px, 26px 26px, 100% 100%;
}
.es-modal__fig .il-a { stroke: rgba(42, 245, 255, .85); stroke-width: 1.8; }
.es-modal__fig .il-b { stroke: rgba(255, 255, 255, .3); stroke-width: 1.3; }
.es-modal__text { position: relative; padding: 26px 34px 34px; }
.es-modal__kicker {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: .38em; text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 12px;
}
.es-modal__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -.01em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.es-modal__body { font-size: 15px; line-height: 1.75; color: var(--grey); }
@media (max-width: 560px) {
  .es-modal { padding: 12px; }
  .es-modal__panel { border-radius: 20px; }
  .es-modal__fig { padding: 22px 22px 0; }
  .es-modal__text { padding: 22px 24px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .es-modal__panel, .es-modal__veil { transition: none; }
}

/* light theme: the popup follows the page, not the night palette */
html[data-theme="light"] .es-modal__veil { background: rgba(226, 233, 241, .6); }
html[data-theme="light"] .es-modal__panel { background: #FFFFFF; box-shadow: 0 40px 90px rgba(16, 24, 40, .18); }
html[data-theme="light"] .es-modal__sweep { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 168, 204, .10), transparent 68%); }
html[data-theme="light"] .es-modal__close { background: rgba(16, 24, 40, .03); color: #1C1454; }
html[data-theme="light"] .es-modal__close:hover { border-color: rgba(11, 124, 153, .6); color: #0B7C99; }
html[data-theme="light"] .es-modal__title { color: #1C1454; }
html[data-theme="light"] .es-modal__fig svg {
  background:
    linear-gradient(rgba(10, 20, 30, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 20, 30, .05) 1px, transparent 1px),
    linear-gradient(140deg, rgba(0, 168, 204, .09), transparent 62%);
  background-size: 26px 26px, 26px 26px, 100% 100%;
}
html[data-theme="light"] .es-modal__fig .il-a { stroke: rgba(11, 124, 153, .95); }
html[data-theme="light"] .es-modal__fig .il-b { stroke: rgba(28, 20, 84, .3); }
html[data-theme="light"] .es-chip { background: rgba(255, 255, 255, .6); color: #333E48; }
html[data-theme="light"] .es-chip:hover { color: #1C1454; border-color: rgba(11, 124, 153, .55); background: rgba(11, 124, 153, .07); }
html[data-theme="light"] .es-disc__more:hover { color: #0B7C99; }

/* discipline-card popup trigger */
.es-disc__card { display: flex; flex-direction: column; }
.es-disc__more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding: 18px 0 0;
  font-family: var(--font-display);
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--grey);
  cursor: pointer;
  transition: color .35s;
}
.es-disc__more i { font-style: normal; transition: transform .4s var(--ease-out); }
.es-disc__more:hover { color: var(--cyan); }
.es-disc__more:hover i { transform: translateX(5px); }