/* =========================================================================
   SERVICES — "Manpower for every field."
   Signature set piece: a pinned onshore-to-offshore scene. A night desert
   oil field (dune contour lines, heat shimmer, pumpjacks, pipe racks) pans
   across the coast to the open sea and its platforms as you scroll.
   Light mode shows the same field by day (palettes in services.js).
   ========================================================================= */

/* ---------- Hero ---------- */
.svc-hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(36px, 6vh, 64px));
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(70% 55% at 50% 118%, rgba(0, 161, 155, .26), transparent 70%),
    radial-gradient(60% 50% at 82% 12%, rgba(0, 161, 155, .12), transparent 70%),
    radial-gradient(110% 80% at 80% 0%, var(--hero-1) 0%, var(--hero-2) 35%, var(--hero-3) 85%);
}
.svc-hero::after { height: 22%; }
.sh-stars, .sh-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sh-stars {
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(234, 241, 243, .7), transparent 60%),
    radial-gradient(1px 1px at 27% 42%, rgba(234, 241, 243, .45), transparent 60%),
    radial-gradient(1.4px 1.4px at 38% 12%, rgba(191, 237, 232, .8), transparent 60%),
    radial-gradient(1px 1px at 55% 30%, rgba(234, 241, 243, .5), transparent 60%),
    radial-gradient(1px 1px at 63% 9%, rgba(234, 241, 243, .6), transparent 60%),
    radial-gradient(1.2px 1.2px at 71% 36%, rgba(191, 237, 232, .55), transparent 60%),
    radial-gradient(1px 1px at 84% 22%, rgba(234, 241, 243, .5), transparent 60%),
    radial-gradient(1px 1px at 92% 46%, rgba(234, 241, 243, .4), transparent 60%),
    radial-gradient(1px 1px at 6% 52%, rgba(234, 241, 243, .35), transparent 60%),
    radial-gradient(1.3px 1.3px at 47% 58%, rgba(191, 237, 232, .35), transparent 60%);
  opacity: .9; animation: shTwinkle 6s ease-in-out infinite alternate;
}
@keyframes shTwinkle { from { opacity: .55; } to { opacity: 1; } }
.sh-glow {
  top: auto; height: 46%;
  background: radial-gradient(48% 70% at 50% 100%, rgba(var(--accent-rgb), .2), transparent 70%);
}

.sh-wrap { position: relative; }
.svc-hero h1 { margin-left: -.04em; max-width: 11.5ch; font-size: min(var(--t-mega), 15.5vh); }
.svc-hero h1 .outline { -webkit-text-stroke: 2px var(--accent-display); }
.sh-foot {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(28px, 4vw, 52px);
}
.svc-hero .sh-lead { margin-top: 0; color: rgba(var(--fg-rgb), .84); }
.sh-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.sh-jump a {
  display: inline-flex; align-items: center; padding: .62em 1.05em; border-radius: 999px;
  font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-muted); box-shadow: inset 0 0 0 1px var(--line-dark);
  transition: color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.sh-jump a:hover { color: var(--navy-990); background: var(--teal-300); box-shadow: inset 0 0 0 1px var(--teal-300); }
.sh-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; }
.sh-meta > div { border-top: 1px solid rgba(var(--fg-rgb), .18); padding-top: 14px; min-width: 0; }
.sh-meta dt { color: var(--accent); margin-bottom: 8px; }
.sh-meta dd { margin: 0; font-size: var(--t-sm); line-height: 1.45; color: var(--fg); }

/* the horizon ornament: desert line, coast marker, moving sea line */
.sh-horizon {
  position: relative; display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px);
  margin-top: clamp(36px, 5vh, 64px); color: var(--accent);
}
.sh-h-end { flex: none; color: var(--fg-muted); font-size: .66rem; }
.sh-land, .sh-sea { flex: 1; min-width: 0; height: 28px; }
.sh-land path { fill: none; stroke: rgba(191, 237, 232, .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sh-sea { position: relative; overflow: hidden; }
.sh-sea svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; max-width: none; animation: shWave 7s linear infinite; }
.sh-sea path { fill: none; stroke: var(--teal-400); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
@keyframes shWave { to { transform: translateX(-50%); } }
.sh-coast { position: relative; flex: none; width: 10px; height: 10px; }
.sh-coast i {
  position: absolute; inset: 0; border-radius: 50%; background: var(--accent-fill);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .16), 0 0 18px var(--accent-fill);
}
.sh-coast::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 22px; margin-bottom: 6px;
  background: linear-gradient(transparent, var(--accent-fill));
}
/* light mode: a daylight sky (no stars), the dune line in navy and the sea line in brand teal */
:root[data-theme="light"] .sh-stars { display: none; }
:root[data-theme="light"] .sh-land path { stroke: rgba(11, 37, 69, .5); }
:root[data-theme="light"] .sh-sea path { stroke: var(--teal); }

@media (max-width: 960px) {
  .sh-foot { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .svc-hero { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 16px); padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .sh-horizon { margin-top: 26px; }
  .svc-hero h1 { font-size: min(13.2vw, 4.4rem); }
  .sh-meta { grid-template-columns: 1fr 1fr; gap: 16px; }
  .sh-meta > div:nth-child(2) { grid-column: 1 / -1; order: 3; }
  .sh-jump a { font-size: .62rem; padding: .6em .9em; }
}

/* ---------- Signature: onshore to offshore ---------- */
.field { position: relative; background: var(--bg); color: var(--fg); }
.field-stage {
  position: relative; overflow: hidden; isolation: isolate;
  height: 100vh; height: 100svh; min-height: 560px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: calc(var(--nav-h) + 14px) 0 calc(84px + env(safe-area-inset-bottom, 0px));
}
.field-canvas { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; max-width: none; background: var(--bg); will-change: transform; }
.field-shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--bg-rgb), .55) 0%, rgba(var(--bg-rgb), 0) 22%),
    linear-gradient(0deg, rgba(var(--deep-rgb), .9) 0%, rgba(var(--deep-rgb), .55) 24%, rgba(var(--deep-rgb), 0) 46%),
    radial-gradient(130% 95% at 50% 46%, transparent 58%, rgba(var(--deep-rgb), .55));
}
/* light mode: the daylight sky fades up into the page, and the white scrim behind the captions is softer at the sides */
:root[data-theme="light"] .field-shade {
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(var(--bg-rgb), .5) 13%, rgba(var(--bg-rgb), 0) 26%),
    linear-gradient(0deg, rgba(var(--deep-rgb), .92) 0%, rgba(var(--deep-rgb), .66) 26%, rgba(var(--deep-rgb), .3) 40%, rgba(var(--deep-rgb), 0) 52%),
    radial-gradient(130% 95% at 50% 46%, transparent 62%, rgba(var(--deep-rgb), .4));
}
.field-frame { position: absolute; inset: calc(var(--nav-h) + 4px) clamp(10px, 2vw, 26px) clamp(10px, 2vw, 26px); z-index: -1; pointer-events: none; }
.field-frame i { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(var(--accent-rgb), .5); }
.field-frame i:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.field-frame i:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.field-frame i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.field-frame i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }

.field-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.field-titles { display: grid; gap: 12px; min-width: 0; }
.field-title { font-size: var(--t-xl); font-weight: 800; font-stretch: 112%; line-height: 1.05; }
.field-hint { display: none; align-items: center; gap: 10px; color: var(--fg-muted); padding-top: 4px; transition: opacity .6s var(--ease); }
.field-hint svg { animation: fhBob 1.8s var(--ease) infinite; }
@keyframes fhBob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

.field-foot { grid-row: 3; display: grid; gap: clamp(18px, 3vh, 30px); }
.field-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(28px, 5vw, 80px); align-items: end; }
.fcap { display: grid; gap: 12px; align-content: end; min-width: 0; }
.fcap-label { color: var(--accent); }
.fcap-label::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; margin-right: 10px; vertical-align: 1px; }
.fcap-title {
  font-size: clamp(1.9rem, .9rem + 3.1vw, 4.3rem); font-weight: 900; font-stretch: 118%;
  line-height: .95; letter-spacing: -.028em; max-width: 13ch;
}
.fcap-text { color: rgba(var(--fg-rgb), .8); max-width: 44ch; }

.field-track { display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); }
.ft-end { flex: none; color: var(--fg-faint); font-size: .68rem; transition: color .5s var(--ease); }
.ft-end.is-on { color: var(--fg); }
.ft-bar { position: relative; flex: 1; height: 1px; background: rgba(var(--fg-rgb), .18); }
.ft-fill {
  position: absolute; left: 0; top: -.5px; width: 100%; height: 2px; transform-origin: left;
  background: linear-gradient(90deg, var(--teal-100), var(--teal-300) 50%, var(--teal));
  transform: scaleX(var(--p, .5)); box-shadow: 0 0 12px var(--glow);
}
:root[data-theme="light"] .ft-fill { background: linear-gradient(90deg, var(--teal-300), var(--teal) 50%, var(--teal-ink)); }
.ft-coast { position: absolute; left: 50%; top: -6px; width: 1px; height: 13px; background: rgba(var(--fg-rgb), .45); }
.ft-dot {
  position: absolute; top: 0; left: calc(var(--p, .5) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--accent-fill); box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .16), 0 0 18px var(--accent-fill);
}

/* Live (pinned) */
.field.is-live .field-hint { display: inline-flex; }
.field.is-live .field-caps { grid-template-columns: minmax(0, 1fr); }
.field.is-live .fcap { grid-area: 1 / 1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px clamp(28px, 5vw, 80px); align-items: end; opacity: 0; }
.field.is-live .fcap.is-on { opacity: 1; }
.field.is-live .fcap-label { grid-column: 1 / -1; }
.field.is-live .fcap-text { padding-bottom: .4em; }
.field.is-live .fcap[data-side="off"] .fcap-label { color: var(--teal-400); }
:root[data-theme="light"] .field.is-live .fcap[data-side="off"] .fcap-label { color: var(--accent); }

@media (max-width: 860px) {
  .field-stage { padding-top: calc(var(--nav-h) + 4px); }
  .field-caps { grid-template-columns: 1fr; gap: 20px; }
  .field.is-live .fcap { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .field-hint { font-size: .62rem; }
  .field-title { font-size: 1.35rem; }
}
@media (max-width: 560px) {
  .field-hint span, .field-hint { letter-spacing: .1em; }
  .field.is-live .field-hint { display: none; }
  .fcap-title { font-size: clamp(1.8rem, 8.4vw, 2.3rem); }
  .fcap-text { font-size: .95rem; }
  .field:not(.is-live) .fcap-title { font-size: 1.6rem; }
  .field:not(.is-live) .fcap-text { font-size: .9rem; }
  .field:not(.is-live) .field-caps { gap: 16px; }
}

/* Software-rendered browsers only (no GPU): no backdrop blur over the live scene */
.svc-lite .site-header.scrolled, .svc-lite .chat-fab { -webkit-backdrop-filter: none; backdrop-filter: none; }
.svc-lite .site-header.scrolled { background: rgba(var(--bg-rgb), .92); }
.svc-lite .chat-fab { background: rgba(7, 26, 51, .95); }
:root[data-theme="light"].svc-lite .chat-fab { background: rgba(255, 255, 255, .96); }

/* ---------- Five sectors (accordion) ---------- */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sec-head, .serve-head { display: grid; gap: 22px; }
.acc { border-top: 1px solid var(--line); }
.acc-item { position: relative; border-bottom: 1px solid var(--line); }
.acc-h { margin: 0; font: inherit; letter-spacing: normal; }
.acc-btn {
  position: relative; isolation: isolate; width: 100%; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 54px; align-items: center; gap: 12px clamp(16px, 3vw, 40px);
  padding: clamp(22px, 3vw, 38px) 0; background: none; border: 0; color: var(--ink);
}
.acc-btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--teal);
  transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease);
}
.acc-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.acc-ico {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--teal-ink); background: var(--paper);
  transition: color .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease), rotate .6s var(--ease);
}
.acc-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acc-name {
  font-family: var(--f-display); font-weight: 900; font-stretch: 116%;
  font-size: clamp(1.45rem, .75rem + 2.85vw, 3.6rem); line-height: 1; letter-spacing: -.022em;
  min-width: 0; overflow-wrap: break-word; transition: translate .6s var(--ease), color .4s var(--ease);
}
.acc-tag { color: var(--teal-ink); white-space: nowrap; padding: .55em .95em; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(7, 128, 121, .35); font-size: .66rem; }
.acc-tog {
  position: relative; justify-self: end; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink); background: var(--paper);
  transition: background .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), rotate .6s var(--ease);
}
.acc-tog::before, .acc-tog::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.8px; border-radius: 2px;
  background: currentColor; translate: -50% -50%; transition: rotate .55s var(--ease);
}
.acc-tog::after { rotate: 90deg; }
.acc-item.is-open .acc-tog { background: var(--navy); border-color: var(--navy); color: var(--on-dark); rotate: 180deg; }
.acc-item.is-open .acc-tog::after { rotate: 0deg; }
.acc-item.is-open .acc-ico { background: var(--teal); border-color: var(--teal); color: var(--navy-990); }
@media (hover: hover) and (pointer: fine) {
  .acc-btn:hover::after { transform: scaleX(1); transform-origin: left; }
  .acc-btn:hover .acc-name { translate: 10px 0; color: #065F5A; }
  .acc-btn:hover .acc-ico { rotate: -10deg; border-color: var(--teal); }
  .acc-btn:hover .acc-tog { border-color: var(--navy); }
}

.acc-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .8s var(--ease-io); }
.js .acc-item:not(.is-open) .acc-panel { grid-template-rows: 0fr; }
.acc-inner { overflow: hidden; min-height: 0; }
.acc-content {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start;
  padding: 6px 0 clamp(40px, 5vw, 70px) calc(64px + clamp(16px, 3vw, 40px));
  transition: opacity .6s var(--ease) .12s, translate .9s var(--ease) .08s;
}
.js .acc-item:not(.is-open) .acc-content { opacity: 0; translate: 0 -18px; transition: opacity .35s var(--ease), translate .5s var(--ease); }
.acc-body { min-width: 0; }
.acc-lead { font-size: var(--t-lg); line-height: 1.5; color: var(--ink); max-width: 44ch; }
.acc-facts { list-style: none; margin: 26px 0 0; padding: 0; }
.acc-facts li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 6px 18px; padding: 14px 0; border-top: 1px solid var(--line); font-size: var(--t-base); }
.acc-facts li:last-child { border-bottom: 1px solid var(--line); }
.acc-facts .mono { color: var(--teal-ink); padding-top: .3em; }
.acc-facts .placeholder { line-height: 1.6; }
.acc-cta { margin-top: 28px; }

.acc-art {
  position: relative; margin: 0; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); aspect-ratio: 4 / 3;
  display: grid; place-items: center; color: var(--teal-300);
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(0, 161, 155, .22), transparent 70%),
    linear-gradient(160deg, var(--navy-700), var(--navy-900) 55%, var(--navy-990));
  box-shadow: 0 40px 80px -46px rgba(11, 37, 69, .8);
}
.acc-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6;
  background-image: linear-gradient(rgba(234, 241, 243, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(234, 241, 243, .05) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, #000, transparent); mask-image: radial-gradient(75% 70% at 50% 45%, #000, transparent);
}
.acc-art svg { width: 88%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.acc-art .fig { fill: #0B2442; }
.acc-art .dim { opacity: .45; }
.acc-art .dot { fill: currentColor; stroke: none; }
.acc-art .arc { stroke: var(--teal-100); stroke-width: 2.2; }
.aa-corners i { position: absolute; width: 16px; height: 16px; border: 0 solid rgba(94, 214, 204, .55); }
.aa-corners i:nth-child(1) { left: 16px; top: 16px; border-left-width: 1px; border-top-width: 1px; }
.aa-corners i:nth-child(2) { right: 16px; top: 16px; border-right-width: 1px; border-top-width: 1px; }
.aa-corners i:nth-child(3) { left: 16px; bottom: 16px; border-left-width: 1px; border-bottom-width: 1px; }
.aa-corners i:nth-child(4) { right: 16px; bottom: 16px; border-right-width: 1px; border-bottom-width: 1px; }
.aa-cap { position: absolute; left: 42px; bottom: 18px; color: var(--fg-muted); font-size: .6rem; }
/* light mode: the art cards become daylight drawings, navy line work on white with teal accents */
:root[data-theme="light"] .acc-art {
  color: var(--navy);
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(0, 161, 155, .12), transparent 70%),
    linear-gradient(160deg, #FFFFFF, #F1F6F8 55%, #E4EDF1);
  box-shadow: 0 40px 80px -46px rgba(11, 37, 69, .4), inset 0 0 0 1px rgba(11, 37, 69, .08);
}
:root[data-theme="light"] .acc-art::before { background-image: linear-gradient(rgba(11, 37, 69, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 37, 69, .07) 1px, transparent 1px); }
:root[data-theme="light"] .acc-art .fig, :root[data-theme="light"] #svWorker [fill] { fill: #FFFFFF; }
:root[data-theme="light"] .acc-art .dot { fill: var(--teal); }
:root[data-theme="light"] .acc-art .arc { stroke: var(--teal); }
:root[data-theme="light"] .aa-corners i { border-color: rgba(0, 161, 155, .6); }

@media (max-width: 960px) {
  .acc-content { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .acc-art { order: -1; aspect-ratio: 16 / 10; max-width: 560px; }
  .acc-art svg { width: 70%; }
}
@media (max-width: 640px) {
  .acc-btn { grid-template-columns: 46px minmax(0, 1fr) 44px; gap: 10px 14px; padding-block: 22px; }
  .acc-ico { width: 46px; height: 46px; }
  .acc-ico svg { width: 22px; height: 22px; }
  .acc-tag { display: none; }
  .acc-tog { width: 42px; height: 42px; }
  .acc-name { font-size: clamp(1.25rem, 5.6vw, 1.7rem); font-stretch: 110%; }
  .acc-facts li { grid-template-columns: 1fr; }
  .acc-facts .mono { padding-top: 0; }
  .acc-lead { font-size: 1.08rem; }
  .acc-art svg { width: 82%; }
  .acc-cta .btn { white-space: normal; text-align: left; }
}

/* ---------- How we deliver ---------- */
.deliver { --dl-bg: var(--bg-deep); background: var(--dl-bg); overflow: clip; }
/* light mode: one step lighter than the sectors above, so the two bands stay apart */
:root[data-theme="light"] .deliver { --dl-bg: var(--bg); }
.deliver-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 40% at 10% 20%, rgba(0, 161, 155, .14), transparent 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(22, 58, 99, .55), transparent 70%);
}
/* daylight: the aqua light sits above the bottom edge and the band ends on plain --bg, so the white
   Who we serve band meets it on one even line */
:root[data-theme="light"] .deliver-bg {
  background:
    linear-gradient(180deg, transparent 86%, var(--bg)),
    radial-gradient(50% 40% at 10% 20%, rgba(0, 161, 155, .1), transparent 70%),
    radial-gradient(60% 50% at 100% 64%, rgba(207, 233, 234, .9), transparent 70%);
}
.deliver-grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 48px clamp(40px, 7vw, 120px); align-items: start; }
.deliver-head { position: sticky; top: calc(var(--nav-h) + 40px); display: grid; gap: 22px; justify-items: start; }
.rail-key { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 12px; color: var(--fg-muted); font-size: .66rem; }
.rail-key li { display: flex; align-items: center; gap: 12px; }
.rail-key i { flex: none; width: 34px; height: 2px; }
.k-solid { background: var(--accent-fill); box-shadow: 0 0 10px var(--glow); }
.k-dash { background: repeating-linear-gradient(90deg, var(--teal-100) 0 5px, transparent 5px 10px); opacity: .75; }
:root[data-theme="light"] .k-dash { background: repeating-linear-gradient(90deg, var(--teal) 0 5px, transparent 5px 10px); }

.steps-wrap { position: relative; min-width: 0; --p: 1; }
.steps-body { position: relative; }
.rails { position: absolute; left: 0; top: 0; bottom: 0; width: 56px; pointer-events: none; }
.rail-track { position: absolute; left: 33px; top: 14px; bottom: 0; width: 1px; background: rgba(var(--fg-rgb), .14); }
.rail-fill {
  position: absolute; left: 32px; top: 14px; bottom: 0; width: 3px; border-radius: 3px; transform-origin: top;
  background: linear-gradient(180deg, var(--teal-100), var(--teal-300) 40%, var(--teal));
  transform: scaleY(var(--p)); box-shadow: 0 0 14px var(--glow);
}
:root[data-theme="light"] .rail-fill { background: linear-gradient(180deg, var(--teal-300), var(--teal) 40%, var(--teal-ink)); }
.rail-liaison {
  position: absolute; left: 10px; top: 14px; bottom: -22px; width: 2px; opacity: .7;
  background: repeating-linear-gradient(180deg, var(--teal-100) 0 6px, transparent 6px 14px);
  animation: railFlow 1.4s linear infinite;
}
:root[data-theme="light"] .rail-liaison { background-image: repeating-linear-gradient(180deg, var(--teal) 0 6px, transparent 6px 14px); }
@keyframes railFlow { to { background-position: 0 14px; } }
.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; padding: 0 0 clamp(52px, 7vw, 100px) 88px; display: grid; gap: 14px; }
.step-node {
  position: absolute; left: 24px; top: 10px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(var(--fg-rgb), .3); background: var(--dl-bg);
  transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.step-node::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--accent-fill); opacity: 0; scale: .6; transition: opacity .6s var(--ease), scale .8s var(--ease); }
.step-num {
  font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: clamp(3rem, 1.8rem + 4vw, 6.4rem);
  line-height: .82; letter-spacing: -.04em; font-variant-numeric: tabular-nums; justify-self: start;
  color: transparent; -webkit-text-stroke: 1.5px rgba(var(--accent-rgb), .4);
  background: linear-gradient(180deg, #F2FFFD 10%, var(--teal-300) 55%, var(--teal)); -webkit-background-clip: text; background-clip: text;
  background-size: 100% 0%; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 1s var(--ease), -webkit-text-stroke-color .6s var(--ease);
}
:root[data-theme="light"] .step-num { background-image: linear-gradient(180deg, var(--teal) 10%, var(--teal-display) 55%, var(--teal-ink)); }
.step-title { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); font-weight: 800; font-stretch: 112%; line-height: 1.04; letter-spacing: -.02em; color: var(--fg-muted); transition: color .6s var(--ease); }
.step-text { color: var(--fg-faint); max-width: 48ch; transition: color .6s var(--ease); }
.step.is-on .step-node { background: var(--accent-fill); border-color: var(--accent-fill); box-shadow: 0 0 18px var(--accent-fill); }
.step.is-on .step-node::after { opacity: .5; scale: 1; }
/* daylight: steps not yet reached keep a teal-ink outline (a pale mint one would vanish on the light band) */
:root[data-theme="light"] .steps-wrap.is-live .step:not(.is-on) .step-num { -webkit-text-stroke-color: rgba(4, 110, 104, .66); }
.step.is-on .step-num { background-size: 100% 100%; -webkit-text-stroke-color: transparent; }
.step.is-on .step-title { color: var(--fg); }
.step.is-on .step-text { color: var(--fg-muted); }
/* without the scroll driver (no JS / reduced motion) every step is shown as reached */
.steps-wrap:not(.is-live) .step-node { background: var(--accent-fill); border-color: var(--accent-fill); }
.steps-wrap:not(.is-live) .step-num { background-size: 100% 100%; -webkit-text-stroke-color: transparent; }
.steps-wrap:not(.is-live) .step-title { color: var(--fg); }
.steps-wrap:not(.is-live) .step-text { color: var(--fg-muted); }

.liaison { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 32px; align-items: start; }
.liaison-ico {
  position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -11px;
  border-radius: 50%; background: var(--dl-bg); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .6), 0 0 24px rgba(0, 161, 155, .35); color: var(--accent);
}
.liaison-ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.liaison-ico::after { content: ""; position: absolute; left: 100%; top: 50%; width: 46px; height: 1px; background: repeating-linear-gradient(90deg, var(--teal-100) 0 5px, transparent 5px 10px); opacity: .6; }
:root[data-theme="light"] .liaison-ico::after { background: repeating-linear-gradient(90deg, var(--teal) 0 5px, transparent 5px 10px); }
.liaison-body {
  display: grid; gap: 10px; min-width: 0; padding: clamp(22px, 3vw, 36px);
  border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(0, 161, 155, .16), rgba(0, 161, 155, .03));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .28);
}
.liaison-label { color: var(--accent); }
.liaison-title { font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); font-weight: 800; font-stretch: 112%; line-height: 1.08; letter-spacing: -.015em; }
.liaison p { color: var(--fg-muted); max-width: 52ch; }

@media (max-width: 960px) {
  .deliver-grid { grid-template-columns: minmax(0, 1fr); }
  .deliver-head { position: relative; top: auto; }
}
@media (max-width: 560px) {
  .rail-track { left: 25px; } .rail-fill { left: 24px; } .rail-liaison { left: 4px; bottom: -19px; }
  .step-node { left: 16px; width: 18px; height: 18px; }
  .step { padding-left: 58px; gap: 10px; }
  .step-num { font-size: 2.9rem; }
  .step-title { font-size: 1.4rem; }
  .liaison { grid-template-columns: 40px minmax(0, 1fr); gap: 0 18px; }
  .liaison-ico { width: 38px; height: 38px; margin-left: -14px; }
  .liaison-ico svg { width: 26px; height: 26px; }
  .liaison-ico::after { width: 24px; }
  .liaison-body { padding: 22px 20px; }
}

/* ---------- Who we serve ---------- */
.serve { overflow: clip; }
.serve-band { display: grid; gap: 4px; margin: clamp(8px, 2vw, 24px) 0 clamp(48px, 6vw, 88px); user-select: none; }
.sb-line {
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); width: max-content; white-space: nowrap;
  font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: clamp(2.6rem, 1rem + 6vw, 8.4rem);
  line-height: 1.02; letter-spacing: -.035em; color: var(--navy); will-change: transform;
}
.sb-line i { font-style: normal; color: var(--teal); font-weight: 800; }
.sb-line .o { color: transparent; -webkit-text-stroke: 1.5px var(--navy); }
.sb-line .t { color: var(--teal); }
.sb-b { margin-left: -18vw; }

.serve-cells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.sv-cell { position: relative; display: grid; align-content: start; gap: 16px; padding: clamp(26px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(10px, 2vw, 20px); min-width: 0; }
.sv-cell:first-child { padding-left: 0; }
.sv-cell + .sv-cell { border-left: 1px solid var(--line); }
.sv-cell .mono { color: var(--teal-ink); }
.sv-big {
  font-family: var(--f-display); font-weight: 900; font-stretch: 118%; font-size: clamp(2.2rem, 1rem + 3.4vw, 4.6rem);
  line-height: .92; letter-spacing: -.03em; color: var(--navy);
}
.sv-big sup { font-size: .45em; vertical-align: .9em; color: var(--teal); margin-left: .04em; }
.sv-plus { color: var(--teal); }
/* three sectors (SA, 19 Oct 2026): one per line, sized to fit the cell */
.sv-sectors { display: grid; gap: .1em; font-size: clamp(1.05rem, 1.85vw, 1.95rem); line-height: 1; }
@media (max-width: 860px) { .sv-sectors { font-size: clamp(1.5rem, 6.8vw, 2.6rem); } }
.sv-cell p { color: var(--ink-muted); max-width: 34ch; }

/* client logo grid: drawn by assets/js/clients.js (styles in assets/css/clients.css); hidden while the list is empty */
.serve-logos { margin-top: clamp(64px, 8vw, 120px); display: grid; gap: clamp(28px, 3.4vw, 48px); }
.sl-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; }
.sl-title { color: var(--navy); }
.sl-intro { color: var(--ink-muted); max-width: 52ch; }
@media (max-width: 860px) { .sl-head { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 860px) {
  .serve-cells { grid-template-columns: minmax(0, 1fr); }
  .sv-cell { padding-left: 0; padding-right: 0; }
  .sv-cell + .sv-cell { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sh-stars, .sh-sea svg, .field-hint svg, .rail-liaison { animation: none; }
  .acc-panel, .acc-content { transition: none; }
}

/* ---------- Launch fixes: hero call to action, contrast, small text ---------- */
.sh-cta { margin-top: clamp(22px, 2.6vw, 32px); }
.sv-big sup { color: var(--teal-display); }
.acc-tag { font-size: var(--t-xs); }
nav.sh-jump a { padding-block: calc(.62em + 2px); }
@media (max-width: 560px) { nav.sh-jump a { font-size: var(--t-xs); padding: calc(.6em + 2px) .9em; letter-spacing: .08em; } }
/* split headline: same line breaks before and after the split (was CLS 0.31 on desktop) */
.svc-hero h1 { font-kerning: none; font-variant-ligatures: none; }
/* same paper as the section; lets contrast tools read the band's real background */
.serve-band, .sb-line { background: var(--paper); }
/* 12px floor for ornament labels, captions and the legend (launch check) */
.sh-h-end, .ft-end, .aa-cap, .rail-key, .field-hint { font-size: var(--t-xs); }
@media (max-width: 560px) { .sh-h-end, .ft-end, .aa-cap { letter-spacing: .08em; } }