/* ==========================================================================
   ETR Engineering
   Fuller-style structure in ETR brand purple #8E25B8, near-black and white.
   Radius rule: controls 4px, media and cards 8px, hero frame 16px.
   ========================================================================== */

@font-face { font-family: "Saira Condensed"; src: url("../fonts/saira-condensed-600.woff2?v=2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Saira Condensed"; src: url("../fonts/saira-condensed-700.woff2?v=2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Saira Condensed"; src: url("../fonts/saira-condensed-800.woff2?v=2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-400.woff2?v=2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-500.woff2?v=2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-600.woff2?v=2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-700.woff2?v=2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-800.woff2?v=2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  /* ETR brand: #8E25B8 with its shades, near-black and white */
  --purple: #8E25B8;          /* brand: highlight bars, accents */
  --purple-btn: #8E25B8;      /* buttons: 6.9:1 with white */
  --purple-hover: #6D1A8E;
  --purple-lift: #A63FD0;
  --purple-deep: #6D1A8E;
  --purple-soft: #D9A6EE;     /* accent text on black */
  --purple-wash: #F7EDFB;
  --purple-line: #E4CDEE;
  --void: #0B0A0E;
  --carbon: #141118;
  --carbon-2: #1C1822;
  --ink: #16131A;
  --body: #3F3946;
  --muted: #625B69;
  --line: #E6E2EA;
  --line-dark: rgba(255,255,255,.13);
  --paper: #FFFFFF;
  --mist: #F5F3F6;
  --on-dark: #F8F6FA;
  --on-dark-muted: #B4ADBB;

  --f-display: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body: "Manrope", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --sec: clamp(64px, 7.5vw, 112px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--body);
  font: 400 16.5px/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--f-display); font-weight: 800; line-height: .94; letter-spacing: -.005em; text-transform: uppercase; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 2px; }
.ic { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--purple-btn); color: #fff; padding: 10px 16px; border-radius: 4px; font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.sec { padding: var(--sec) 0; }
.sec--mist { background: var(--mist); }
.sec--dark { background: var(--carbon); color: var(--on-dark); }
.sec--dark h2, .sec--dark h3 { color: #fff; }

/* ---------- Type ---------- */
.h-display { font-size: clamp(2.9rem, 6.6vw, 6.4rem); }
.h-sec { font-size: clamp(2.4rem, 4.9vw, 4.6rem); max-width: 21ch; text-wrap: balance; }
.h-card { font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1; }
.lede { font-size: clamp(1.08rem, 1.3vw, 1.24rem); line-height: 1.55; max-width: 60ch; }
.copy { max-width: 62ch; }
.copy + .copy { margin-top: 1.1em; }

/* Highlight bars: purple block grows behind the key words of a heading. */
/* Background-based so a phrase that wraps gets one bar per line (box-decoration-break: clone). */
.hl {
  display: inline; padding: 0 .1em; color: var(--ink);
  background-image: linear-gradient(var(--purple), var(--purple)); background-repeat: no-repeat;
  background-size: 0% .86em; background-position: 0 56%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1s var(--ease) .15s, color .5s ease .35s;
}
.is-in .hl, .hl.is-in { background-size: 100% .86em; color: #fff; }
.sec--dark .hl, .hero .hl, .cta .hl, .hpath .hl { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--purple-btn); --fg: #fff; --bd: var(--purple-btn);
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  min-height: 52px; padding: 0 26px; border: 1.5px solid var(--bd); border-radius: 4px;
  background: var(--bg); color: var(--fg);
  font: 700 1.02rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .15s ease;
}
.btn .ic { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover { --bg: var(--purple-hover); --bd: var(--purple-hover); }
.btn:hover .ic { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--ghost { --bg: transparent; --fg: var(--carbon); --bd: var(--carbon); }
.btn--ghost:hover { --bg: var(--carbon); --fg: #fff; --bd: var(--carbon); }
.btn--light { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.7); }
.btn--light:hover { --bg: #fff; --fg: var(--carbon); --bd: #fff; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 .98rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--purple-deep);
}
.link-arrow .ic { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.link-arrow:hover .ic { transform: translateX(5px); }

/* Client's hand-drawn arrow (assets/img/arrow.webp) used as a mask so it takes brand colour; wipes in tail to head. */
.doodle {
  position: absolute; width: clamp(76px, 7vw, 104px); aspect-ratio: 984 / 846; pointer-events: none;
  background: var(--purple);
  -webkit-mask: url("../img/arrow.webp?v=2") center / contain no-repeat; mask: url("../img/arrow.webp?v=2") center / contain no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-io) .25s;
}
.doodle.is-in { clip-path: inset(0 0 0 0); }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); transition: box-shadow .3s ease; }
.header.is-stuck { box-shadow: 0 10px 30px rgba(22, 19, 26, .1); }
.header .wrap { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 46px; width: auto; }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 4px;
  font: 600 1.04rem/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink);
  transition: background-color .2s ease, color .2s ease;
}
.nav__link .ic { width: 13px; height: 13px; opacity: .7; transition: transform .3s var(--ease); }
.nav__link:hover, .nav__item:focus-within > .nav__link, .nav__item.is-open > .nav__link { background: var(--purple-btn); color: #fff; }
.nav__link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--purple); border-radius: 0; }
.nav__item:hover > .nav__link .ic, .nav__item.is-open > .nav__link .ic { transform: rotate(180deg); }
.mega {
  position: absolute; top: calc(100% + 14px); left: -12px; min-width: 300px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 10px;
  box-shadow: 0 24px 60px rgba(22, 19, 26, .16);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .3s var(--ease), visibility 0s .3s;
}
.mega::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.nav__item:hover .mega, .nav__item:focus-within .mega, .nav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__title { padding: 12px 14px 8px; font: 700 .82rem/1 var(--f-display); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.mega a {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 11px 14px; border-radius: 4px; color: var(--body); font-weight: 500; white-space: nowrap;
}
.mega a .ic { width: 14px; height: 14px; opacity: 0; transform: translateX(-6px); transition: all .3s var(--ease); }
.mega a:hover { background: var(--purple-btn); color: #fff; }
.mega a:hover .ic { opacity: 1; transform: none; }
.header__cta { flex-shrink: 0; }
.burger { display: none; width: 46px; height: 46px; border-radius: 4px; align-items: center; justify-content: center; margin-left: auto; }
.burger .ic { width: 28px; height: 28px; }

.drawer {
  position: fixed; inset: 0; z-index: 90; background: var(--carbon); color: #fff; overflow-y: auto;
  transform: translateX(100%); transition: transform .5s var(--ease); padding: 20px var(--gutter) 40px;
}
.drawer.is-open { transform: none; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; height: 56px; margin-bottom: 20px; }
.drawer__top img { height: 40px; width: auto; }
.drawer__close .ic { width: 30px; height: 30px; }
.drawer nav a { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line-dark); font: 700 1.5rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.drawer nav a .ic { color: var(--purple-soft); }
.drawer .btn { margin-top: 28px; width: 100%; justify-content: center; }

/* ---------- Hero ---------- */
.hero { padding: 12px 12px 0; background: var(--paper); }
.hero__frame {
  position: relative; overflow: hidden; border-radius: 16px; isolation: isolate;
  min-height: max(620px, min(calc(100dvh - var(--header-h) - 12px), 900px));
  display: flex; align-items: flex-end; color: #fff; background: var(--void);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
/* Poster image sits underneath as the fallback; the video is stacked above it and
   fades in once it is actually playing. (Previously the absolutely positioned poster
   painted over the static video, hiding it after the first second.) */
.hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.hero__media img { z-index: 0; }
.hero__media video { z-index: 1; opacity: 0; transition: opacity 1s ease; }
.hero__media video.is-playing { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 10, 14, .86) 0%, rgba(11, 10, 14, .62) 38%, rgba(11, 10, 14, .08) 72%),
    linear-gradient(0deg, rgba(11, 10, 14, .7) 0%, rgba(11, 10, 14, 0) 45%);
}
.hero__inner { width: 100%; padding: clamp(28px, 5vw, 72px); padding-bottom: clamp(36px, 6vw, 84px); }
.hero h1 { color: #fff; font-size: clamp(2.6rem, 5.4vw, 5.6rem); }
.hero h1 .hl { white-space: nowrap; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero h1 .line > span:not(.hl) { display: inline-block; }
.hero .lede { margin-top: clamp(20px, 2.4vw, 30px); color: #E6E0EB; max-width: 56ch; font-size: 16px; line-height: 1.6; }
.hero .btn-row { margin-top: clamp(26px, 3vw, 38px); }
.hero__sound {
  position: absolute; right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px);
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55);
  display: grid; place-items: center; color: #fff; backdrop-filter: blur(6px); background: rgba(8,22,36,.25);
  transition: background-color .2s ease;
}
.hero__sound:hover { background: rgba(255,255,255,.18); }
.hero__sound .ic { width: 18px; height: 18px; }

/* hero entrance */
.js .hero h1 .line > span { transform: translateY(105%); transition: transform 1s var(--ease); }
.js .hero .lede, .js .hero .btn-row { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s var(--ease); }
.hero.is-in h1 .line > span { transform: none; }
.hero.is-in h1 .line:nth-child(2) > span { transition-delay: .08s; }
.hero.is-in h1 .line:nth-child(3) > span { transition-delay: .16s; }
.hero.is-in .lede { opacity: 1; transform: none; transition-delay: .45s; }
.hero.is-in .btn-row { opacity: 1; transform: none; transition-delay: .6s; }
.hero .hl { transition-delay: .7s; }
.hero .line:nth-child(3) .hl { transition-delay: .92s; }
.hero.is-in .hl { background-size: 100% .86em; }

/* ---------- Needs strip (Fuller search analogue) ---------- */
.needs { padding: 12px 12px 0; }
.needs__bar {
  border-radius: 12px; background: var(--purple); color: #fff;
  padding: clamp(22px, 2.6vw, 30px) clamp(24px, 4vw, 60px);
  display: grid; grid-template-columns: auto 1fr; gap: 18px 36px; align-items: center;
}
.needs__label { font: 700 clamp(1.4rem, 2vw, 1.8rem)/1 var(--f-display); text-transform: uppercase; display: flex; gap: 12px; align-items: center; }
.needs__label .ic { width: 26px; height: 26px; color: var(--purple-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.35); color: #fff; font-weight: 500; font-size: .97rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.chip .ic { width: 15px; height: 15px; }
.chip:hover { background: #fff; color: var(--purple-deep); border-color: #fff; }

/* ---------- Trust strip ---------- */
.trust { padding: clamp(48px, 6vw, 76px) 0 0; }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.trust__item { padding: 28px 28px 8px 0; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.trust__item + .trust__item { padding-left: 28px; border-left: 1px solid var(--line); }
.trust__icon { width: 44px; height: 44px; border-radius: 8px; background: var(--mist); color: var(--purple-deep); display: grid; place-items: center; }
.trust__icon .ic { width: 24px; height: 24px; }
.trust__item strong { display: block; color: var(--ink); font: 700 1.28rem/1.05 var(--f-display); text-transform: uppercase; margin-bottom: 6px; }
.trust__item p { font-size: .96rem; line-height: 1.5; color: var(--muted); }

/* ---------- Intro ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.intro__text .h-sec { max-width: 14ch; margin-bottom: clamp(26px, 3vw, 40px); }
.intro__cta { position: relative; margin-top: 36px; display: inline-block; }
.intro__cta .doodle { left: calc(100% + 14px); top: -2px; transform: scaleX(-1) rotate(16deg); }
.intro__media { position: relative; padding: 0 0 clamp(40px, 4.5vw, 64px) 0; }
.intro__main { border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 5; }
.intro__main img { width: 100%; height: 100%; object-fit: cover; }
.intro__inset {
  position: absolute; left: clamp(-56px, -3.5vw, 0px); bottom: 0; width: 44%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  border: 8px solid var(--paper); box-shadow: 0 20px 50px rgba(22, 19, 26, .18);
}
.intro__inset img { width: 100%; height: 100%; object-fit: cover; }
.intro__badge {
  position: absolute; right: -14px; top: 36px; background: var(--carbon); color: #fff; border-radius: 8px;
  padding: 18px 22px; box-shadow: 0 20px 50px rgba(22, 19, 26, .25);
}
.intro__badge b { display: block; font: 800 2.6rem/1 var(--f-display); color: var(--purple-soft); }
.intro__badge span { font: 600 .9rem/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark); }

/* ---------- Why table ---------- */
.why__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: clamp(28px, 3vw, 44px); }
.why__head .h-sec { max-width: 16ch; }
.table-wrap { border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--line); overflow-x: auto; }
.why-table { min-width: 680px; }
.why-table thead th {
  background: var(--carbon); color: #fff; text-align: left; padding: 18px 28px;
  font: 700 .92rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase;
}
.why-table tbody tr { position: relative; transition: background-color .25s ease; }
.why-table tbody tr + tr td { border-top: 1px solid var(--line); }
.why-table tbody tr:hover { background: #FBF7FD; }
.why-table td { padding: 24px 28px; vertical-align: middle; }
.why-table td:first-child { width: 42%; }
.why-strength { display: flex; align-items: center; gap: 18px; }
.why-strength .trust__icon { background: var(--purple-wash); transition: background-color .3s ease, color .3s ease; }
.why-table tbody tr:hover .trust__icon { background: var(--purple-btn); color: #fff; }
.why-strength strong { font: 700 1.42rem/1.05 var(--f-display); color: var(--ink); text-transform: uppercase; }
.why-table td:last-child { color: var(--body); font-size: 1.02rem; }
.js .why-table tbody tr { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s var(--ease), background-color .25s ease; }
.why-table.is-in tbody tr { opacity: 1; transform: none; }
.why-table.is-in tbody tr:nth-child(2) { transition-delay: .07s; }
.why-table.is-in tbody tr:nth-child(3) { transition-delay: .14s; }
.why-table.is-in tbody tr:nth-child(4) { transition-delay: .21s; }
.why-table.is-in tbody tr:nth-child(5) { transition-delay: .28s; }
.why-table.is-in tbody tr:nth-child(6) { transition-delay: .35s; }

/* ---------- Capability cards (Fuller "solutions" row) ---------- */
.caps__head { margin-bottom: clamp(36px, 4vw, 56px); display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.caps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cap {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 8px;
  aspect-ratio: 3 / 4.3; color: #fff; isolation: isolate; background: var(--carbon);
}
.cap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.cap::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 10, 14, .94) 12%, rgba(11, 10, 14, .35) 55%, rgba(11, 10, 14, .05) 100%); transition: background-color .4s ease; }
.cap__body { padding: 26px 24px 24px; }
.cap h3 { color: #fff; font-size: clamp(1.6rem, 2.1vw, 2rem); line-height: .98; }
.cap__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--ease), opacity .4s ease; }
.cap__more > p { overflow: hidden; margin-top: 12px; color: #D3CCDA; font-size: .96rem; line-height: 1.5; }
.cap__go { margin-top: 18px; width: 44px; height: 44px; border-radius: 50%; background: var(--purple-btn); display: grid; place-items: center; transition: transform .4s var(--ease); }
.cap__go .ic { width: 18px; height: 18px; }
.cap:hover img, .cap:focus-visible img { transform: scale(1.06); }
.cap:hover .cap__more, .cap:focus-visible .cap__more { grid-template-rows: 1fr; opacity: 1; }
.cap:hover .cap__go { transform: rotate(-45deg); background: var(--purple-lift); }
@media (hover: none) { .cap__more { grid-template-rows: 1fr; opacity: 1; } }

/* ---------- Pyro line (Fuller flowsheet analogue) ----------
   Scroll-driven stepper: .flow is the scroll track and .flow__stage sticks below the header while it
   scrolls past. JS adds .flow--pin, sizes the track, sets the stage top and --flow-p (0 to 1) for the rail fill. */
.pyro { position: relative; overflow: clip; } /* clip, not hidden: overflow hidden would stop the stage sticking */
.pyro { background: radial-gradient(ellipse 60% 50% at 85% 0%, rgba(142, 37, 184, .3), transparent 70%), var(--carbon); }
.pyro .wrap { position: relative; }
.pyro__intro { margin-top: 22px; color: var(--on-dark-muted); font-size: 1.1rem; max-width: 56ch; }
.flow { --flow-p: 0; margin-top: clamp(40px, 5vw, 64px); }
.flow--pin .flow__stage { position: sticky; }
.flow__rail { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.flow__track { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 27px; height: 2px; background: rgba(255,255,255,.14); }
.flow__track::before {
  content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--purple) 0 10px, transparent 10px 28px);
  background-size: 28px 2px; animation: flow 1.4s linear infinite; opacity: .9;
}
.flow__track::after {
  content: ""; position: absolute; inset: -1px 0; border-radius: 2px; background: linear-gradient(90deg, var(--purple), var(--purple-soft));
  transform: scaleX(var(--flow-p)); transform-origin: left center;
}
@keyframes flow { to { background-position: 28px 0; } }
.flow__node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 6px; text-align: center; color: var(--on-dark-muted); }
.flow__dot {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--carbon);
  border: 2px solid rgba(255,255,255,.22); color: #fff; transition: all .35s var(--ease);
}
.flow__dot .ic { width: 24px; height: 24px; }
.flow__name { font: 700 1.08rem/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; transition: color .3s ease; max-width: 13ch; }
.flow__node:hover .flow__dot { border-color: #fff; }
.flow__node.is-done .flow__dot { border-color: var(--purple-lift); color: var(--purple-soft); }
.flow__node.is-done .flow__name { color: #D3CCDA; }
.flow__node[aria-selected="true"] .flow__dot { background: var(--purple-btn); border-color: var(--purple-btn); color: #fff; box-shadow: 0 0 0 8px rgba(142, 37, 184, .3); transform: scale(1.06); }
.flow__node[aria-selected="true"] .flow__name, .flow__node:hover .flow__name { color: #fff; }
.flow__panel {
  margin-top: clamp(28px, 3.4vw, 44px); display: grid; grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); gap: clamp(20px, 2.8vw, 40px);
  padding: clamp(12px, 1.2vw, 16px); border-radius: 8px; background: var(--carbon-2); border: 1px solid var(--line-dark);
}
.flow__img { position: relative; align-self: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--void); }
.flow__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform 1.2s var(--ease); }
.flow__img img.is-active { opacity: 1; transform: none; }
/* All six panels share one grid cell, so the panel keeps the height of the tallest and never jumps between stages. */
.flow__copy { display: grid; align-items: center; padding: clamp(8px, 1vw, 16px) clamp(8px, 1.6vw, 24px) clamp(8px, 1vw, 16px) 0; }
.flow__copy > [role="tabpanel"] { grid-area: 1 / 1; transition: opacity .45s ease, transform .6s var(--ease); }
.flow__copy > [role="tabpanel"][hidden] { display: block; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .6s var(--ease), visibility 0s .2s; }
.flow__copy h3 { color: #fff; font-size: clamp(1.9rem, 2.6vw, 2.5rem); }
.flow__lead { margin-top: 12px; font-size: 1.04rem; line-height: 1.55; color: #D3CCDA; max-width: 62ch; }
.flow__list { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.flow__list li { display: flex; gap: 10px; align-items: flex-start; color: var(--on-dark); font-size: .98rem; line-height: 1.4; }
.flow__list .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--purple-soft); }
.flow__foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 28px; }
.flow__ref { font-size: .95rem; line-height: 1.45; color: var(--on-dark-muted); max-width: 58ch; }
.flow__ref b { display: block; margin-bottom: 5px; font: 700 .8rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--purple-soft); }
.link-arrow--light { color: var(--purple-soft); }

.proof {
  margin-top: 16px; display: grid; grid-template-columns: 1fr 1.2fr auto; gap: clamp(24px, 4vw, 56px); align-items: center;
  border-radius: 8px; background: linear-gradient(120deg, var(--purple-deep) 0%, #8E25B8 100%); padding: clamp(24px, 3vw, 40px) clamp(24px, 3.4vw, 52px);
  position: relative; overflow: hidden;
}
.proof__fig { display: flex; align-items: center; gap: 14px; font: 800 clamp(3.4rem, 7vw, 6.4rem)/.9 var(--f-display); color: #fff; }
.proof__fig .from { color: rgba(255,255,255,.45); }
.proof__fig .ic { width: .5em; height: .5em; color: var(--purple-soft); }
.proof__text { color: #EEE9F2; font-size: 1.08rem; }
.proof__text b { color: #fff; }
.proof__cfd { width: clamp(120px, 12vw, 170px); aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); }
.proof__cfd img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Scroll expand (framed image opens to full bleed as you scroll) ----------
   Default (no JS / reduced motion) is the finished, expanded state. JS adds .sx--live. */
.sx { position: relative; background: var(--void); color: #fff; }
.sx__stage { position: relative; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); min-height: 560px; overflow: hidden; }
.sx--live .sx__stage { position: sticky; top: var(--header-h); }
.sx__frame { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.sx__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.sx__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 10, 14, .92) 0%, rgba(11, 10, 14, .7) 50%, rgba(11, 10, 14, .3) 100%); }
.sx__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}
.sx__overlay h2 { color: #fff; font-size: clamp(2.4rem, 4.9vw, 4.6rem); max-width: 15ch; text-wrap: balance; }
.sx .hl { background-size: 100% .86em; color: #fff; }
.sx__overlay p { margin-top: 20px; color: #E6E0EB; max-width: 54ch; font-size: 1.06rem; }
.sx__steps { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 780px; counter-reset: sx; }
.sx__steps li {
  counter-increment: sx; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px 0 10px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 4px; background: rgba(11, 10, 14, .35);
  font: 600 .98rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.sx__steps li::before {
  content: counter(sx); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--purple); font: 700 .8rem/1 var(--f-display);
}
.sx__overlay .btn { margin-top: 30px; }
.sx__title { display: none; }
.sx--live .sx__title {
  display: block; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none;
  text-align: center; font: 800 clamp(2.6rem, 7.4vw, 6.6rem)/.9 var(--f-display); text-transform: uppercase; color: #fff;
  text-shadow: 0 6px 40px rgba(11, 10, 14, .55);
}
.sx__title span { color: var(--purple-soft); }
@media (max-width: 640px) {
  .sx__overlay h2 { font-size: 2.1rem; }
  .sx__overlay p { font-size: .98rem; }
  .sx__steps li { min-height: 34px; font-size: .86rem; }
}

/* ---------- Manifesto (word-by-word scroll reveal) + stats ---------- */
.manifesto { padding: var(--sec) 0 clamp(56px, 6vw, 88px); }
.manifesto__text { font: 800 clamp(2.2rem, 5vw, 4.9rem)/1 var(--f-display); text-transform: uppercase; color: var(--ink); max-width: 27ch; letter-spacing: -.005em; }
.manifesto__text .w { color: #DCD6E1; transition: color .35s ease; }
.manifesto__text .w.on { color: var(--ink); }
.manifesto__text .w.on.k { color: var(--purple-btn); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin-top: clamp(48px, 6vw, 80px); }
.stat { padding: 30px 24px 0 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line); }
.stat__v { font: 800 clamp(2.8rem, 4.6vw, 4.4rem)/1 var(--f-display); color: var(--carbon); text-transform: uppercase; }
.stat__v small { font-size: .55em; }
.stat__k { margin-top: 10px; font: 700 1.05rem/1.1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--purple-deep); }
.stat__d { margin-top: 10px; font-size: .95rem; color: var(--muted); max-width: 30ch; }

/* ---------- Also delivered (Fuller "continue your journey") ---------- */
.also__grid { margin-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.tile { display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); transition: border-color .3s ease, box-shadow .4s ease; }
.tile__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.tile__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.tile__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.tile__body h3 { font-size: clamp(1.55rem, 2vw, 1.9rem); }
.tile__body p { margin-top: 12px; color: var(--muted); font-size: 1rem; flex: 1; }
.tile__body .link-arrow { margin-top: 22px; }
.tile:hover { border-color: var(--purple-line); box-shadow: 0 18px 44px rgba(22, 19, 26, .1); }
.tile:hover .tile__img img { transform: scale(1.05); }
.tile:hover .link-arrow .ic { transform: translateX(5px); }

/* ---------- Stories carousel ---------- */
.stories__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: clamp(32px, 4vw, 48px); }
.stories__nav { display: flex; gap: 10px; }
.round {
  width: 52px; height: 52px; border-radius: 4px; border: 1.5px solid var(--carbon); color: var(--carbon); display: grid; place-items: center;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.round .ic { width: 20px; height: 20px; }
.round:hover { background: var(--carbon); color: #fff; }
.round:disabled { opacity: .3; pointer-events: none; }
.track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px;
}
.track::-webkit-scrollbar { display: none; }
.story { scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.story__img { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.story__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.story__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.story__client { font: 700 .86rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--purple-btn); }
.story h3 { margin-top: 12px; font-size: clamp(1.45rem, 1.8vw, 1.75rem); line-height: 1; }
.story p { margin-top: 12px; font-size: .98rem; color: var(--muted); flex: 1; }
.story .link-arrow { margin-top: 20px; }
.story__metric { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 16px; font: 800 1.9rem/1 var(--f-display); color: var(--carbon); }
.story__metric small { font: 600 .82rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.story:hover .story__img img { transform: scale(1.05); }
.story:hover .link-arrow .ic { transform: translateX(5px); }
.clients { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: auto 1fr; gap: 30px 48px; align-items: center; padding-top: 32px; border-top: 1px solid var(--line); }
.clients__label { font: 700 1.1rem/1.1 var(--f-display); text-transform: uppercase; color: var(--ink); max-width: 14ch; }
.clients__row { display: flex; flex-wrap: wrap; gap: 10px; }
.client {
  display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 20px; border-radius: 8px; background: #fff; border: 1px solid var(--line);
  font: 700 1.12rem/1 var(--f-display); letter-spacing: .02em; color: var(--carbon); text-transform: uppercase;
}
.client small { font: 500 .85rem/1 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--muted); }

/* ---------- Quality ---------- */
.quality { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.quality__media { position: relative; }
.quality__media .frame { border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 5; }
.quality__media img { width: 100%; height: 100%; object-fit: cover; }
.quality__points { margin-top: 30px; display: grid; gap: 14px; }
.quality__points li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.quality__points .trust__icon { width: 40px; height: 40px; background: var(--purple-wash); }
.quality__points .trust__icon .ic { width: 21px; height: 21px; }
.quality__points strong { display: block; font: 700 1.2rem/1.1 var(--f-display); text-transform: uppercase; color: var(--ink); }
.quality__points span { font-size: .96rem; color: var(--muted); }
.quality .btn-row { margin-top: 34px; }

/* ---------- CTA band ---------- */
.cta { padding: 0 12px 12px; }
.cta__frame { position: relative; overflow: hidden; border-radius: 16px; isolation: isolate; color: #fff; padding: clamp(72px, 10vw, 150px) 0; }
.cta__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta__frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 10, 14, .92) 0%, rgba(11, 10, 14, .74) 48%, rgba(11, 10, 14, .35) 100%); }
.cta h2 { color: #fff; font-size: clamp(2.6rem, 5.6vw, 5.4rem); max-width: 14ch; }
.cta p { margin-top: 22px; color: #E6E0EB; max-width: 52ch; font-size: 1.14rem; }
.cta .btn-row { margin-top: 36px; position: relative; display: inline-flex; }
.cta .doodle { left: calc(100% + 14px); top: -2px; background: var(--purple-soft); transform: scaleX(-1) rotate(16deg); }

/* ---------- Footer ---------- */
.footer { background: var(--void); color: var(--on-dark-muted); padding: clamp(60px, 7vw, 96px) 0 0; font-size: .98rem; }
.footer__topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: clamp(36px, 4vw, 52px); }
.footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 40px; padding: 40px 0 56px; border-top: 1px solid var(--line-dark); }
.footer__col + .footer__col { border-left: 1px solid var(--line-dark); padding-left: 40px; }
.footer__brand img { height: 58px; width: auto; }
.footer__brand p { margin-top: 22px; max-width: 34ch; }
.footer__tag { margin-top: 22px; font: 800 1.5rem/1.05 var(--f-display); text-transform: uppercase; color: #fff; }
.footer__tag span { color: var(--purple-soft); }
.footer__social { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.footer__social a { display: grid; place-items: center; color: #fff; transition: color .25s ease; }
.footer__social .ic { width: 30px; height: 30px; transition: transform .4s var(--ease); }
.footer .footer__social a:hover { color: var(--purple-lift); }
.footer__social a:hover .ic { transform: scale(1.18) translateY(-3px); }
.footer h4 { color: #fff; font-size: 1rem; letter-spacing: .14em; margin-bottom: 20px; font-weight: 700; }
.footer li + li { margin-top: 11px; }
.footer a:hover { color: #fff; }
.footer__contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer__contact .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--purple-soft); }
.footer__offices .office + .office { margin-top: 18px; }
.footer__offices .office strong { display: block; color: #fff; font-weight: 700; margin-bottom: 6px; }
.footer__offices .office p { max-width: 30ch; }
.footer__bottom { border-top: 1px solid var(--line-dark); padding: 22px 0; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .9rem; }
.footer__bottom nav { display: flex; gap: 22px; }

/* ---------- Floating contact tab + panel ---------- */
.ctab {
  position: fixed; right: 0; bottom: 96px; z-index: 60; display: flex; align-items: center; height: 54px; width: 188px;
  background: var(--purple-btn); color: #fff; border-radius: 4px 0 0 4px; overflow: hidden; box-shadow: 0 10px 30px rgba(11, 10, 14, .3);
  transform: translateX(134px); transition: transform .45s var(--ease), background-color .2s ease;
}
.ctab .ic { width: 54px; height: 24px; flex-shrink: 0; }
.ctab span { white-space: nowrap; font: 700 1rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; padding-right: 22px; }
.ctab:hover, .ctab:focus-visible, .ctab.is-wide { transform: none; }
.ctab:hover { background: var(--purple-hover); }

.panel-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(11, 10, 14, .55); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.panel-scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(480px, 100%); background: var(--paper); overflow-y: auto;
  transform: translateX(100%); visibility: hidden; transition: transform .55s var(--ease), visibility 0s .55s, box-shadow .3s ease;
}
.panel.is-open { transform: none; visibility: visible; transition-delay: 0s; box-shadow: -30px 0 60px rgba(11, 10, 14, .25); }
.panel__head { background: var(--carbon); color: #fff; padding: 28px 30px; position: relative; }
.panel__head h2 { color: #fff; font-size: 2.2rem; }
.panel__head p { margin-top: 10px; color: #D3CCDA; font-size: .98rem; }
.panel__close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 4px; display: grid; place-items: center; }
.panel__close:hover { background: var(--purple-deep); }
.panel__close .ic { width: 22px; height: 22px; }
.panel__quick { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 22px 30px 0; }
.panel__quick a { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 14px 8px; border: 1px solid var(--line); border-radius: 4px; font-weight: 600; color: var(--carbon); font-size: .9rem; background: #fff; }
.panel__quick a:hover { border-color: var(--purple-deep); }
.panel__quick .ic { width: 20px; height: 20px; color: var(--purple-btn); }
.panel form { padding: 22px 30px 34px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.field label i { color: var(--purple-btn); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid #D6CFDD; border-radius: 4px; background: #fff; color: var(--ink);
  font: 400 1rem/1.4 var(--f-body); transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 110px; resize: vertical; }
/* Own dropdown arrow, inset from the edge (the browser's sits hard against the border) */
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 46px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238E25B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
}
.field input::placeholder, .field textarea::placeholder { color: #7A7282; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--purple-deep); box-shadow: 0 0 0 3px rgba(142, 37, 184, .16); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #B42318; }
.field__err { color: #B42318; font-size: .86rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--body); margin: 4px 0 20px; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--purple-btn); }
.check a { color: var(--purple-deep); text-decoration: underline; }
.hp { position: absolute; left: -9999px; }
.form-status { margin-top: 14px; padding: 14px 16px; border-radius: 4px; font-size: .95rem; }
.form-status--ok { background: #E7F4EC; color: #14532D; }
.form-status--err { background: #FDECEA; color: #8A1C12; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ---------- Reveal system ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* The wipe lives on the <img>, never on the observed container: IntersectionObserver
   treats a fully clip-pathed target as zero-area, so it would never report it visible. */
.js [data-reveal="img"] { opacity: 1; transform: none; }
.js [data-reveal="img"] img { clip-path: inset(0 0 100% 0); transform: scale(1.12); transition: clip-path .9s var(--ease-io), transform 1.2s var(--ease); }
.js [data-reveal="img"].is-in img { clip-path: inset(0 0 0 0); transform: none; }
.js [data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s var(--ease); }
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
.js [data-stagger].is-in > *:nth-child(2) { transition-delay: .08s; }
.js [data-stagger].is-in > *:nth-child(3) { transition-delay: .16s; }
.js [data-stagger].is-in > *:nth-child(4) { transition-delay: .24s; }
.js [data-stagger].is-in > *:nth-child(5) { transition-delay: .32s; }
.js [data-stagger].is-in > *:nth-child(6) { transition-delay: .4s; }

/* ---------- Statistics band (dark strip, PDF section 8) with mission reveal ---------- */
.statband { background: var(--carbon); color: var(--on-dark); padding: var(--sec) 0; position: relative; overflow: hidden; }
.statband::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 60% at 90% 10%, rgba(142, 37, 184, .28), transparent 70%); }
.statband .wrap { position: relative; }
.statband .manifesto__text { color: #fff; }
.statband .manifesto__text .w { color: rgba(255, 255, 255, .16); }
.statband .manifesto__text .w.on { color: #fff; }
.statband .manifesto__text .w.on.k { color: var(--purple-soft); }
.statband .stats { border-top-color: var(--line-dark); }
.statband .stat + .stat { border-left-color: var(--line-dark); }
.statband .stat__v { color: #fff; }
.statband .stat__k { color: var(--purple-soft); }

/* ---------- Track record: client logo wall ---------- */
.record__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.record__text { margin-top: 22px; }
.logos { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.logos li { height: 118px; display: grid; place-items: center; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 8px; transition: border-color .3s ease, box-shadow .3s ease; }
.logos img { max-width: 100%; max-height: 70px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .35s ease, opacity .35s ease; }
.logos li:hover { border-color: var(--purple-line); box-shadow: 0 12px 30px rgba(22, 19, 26, .08); }
.logos li:hover img { filter: none; opacity: 1; }
@media (hover: none) { .logos img { filter: none; opacity: 1; } }
.stories__title { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.record__head + .logos + .stories__head { margin-top: clamp(56px, 6vw, 80px); align-items: center; }

@media (max-width: 1100px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .record__head { flex-direction: column; align-items: flex-start; } }
@media (max-width: 640px) {
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos li { height: 96px; padding: 14px; }
  .logos img { max-height: 56px; }
}

/* ---------- Trust ticker (PDF: thin band below hero) ---------- */
.ticker { padding: 12px 12px 0; }
.ticker__band { position: relative; overflow: hidden; border-radius: 12px; background: var(--carbon); }
/* Text fades into the band's own colour at both edges (no transparency, so the page never shows through). */
.ticker__band::before, .ticker__band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 1; pointer-events: none; }
.ticker__band::before { left: 0; background: linear-gradient(90deg, var(--carbon) 20%, rgba(20, 17, 24, 0)); }
.ticker__band::after { right: 0; background: linear-gradient(270deg, var(--carbon) 20%, rgba(20, 17, 24, 0)); }
.ticker__toggle { z-index: 2; }
.ticker__track { display: flex; width: max-content; animation: ticker 70s linear infinite; }
.ticker__band:hover .ticker__track, .ticker__band:focus-within .ticker__track, .ticker.is-paused .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker__group { display: flex; align-items: center; flex-shrink: 0; }
.ticker__item { display: flex; align-items: center; gap: 14px; padding: 24px 0 24px 36px; white-space: nowrap; }
.ticker__item b { font: 700 1.28rem/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.ticker__item span { font-size: 1rem; color: var(--on-dark-muted); }
.ticker__sep { width: 26px; height: 24px; margin-left: 22px; flex-shrink: 0; background: url("../img/brand/mark.svg?v=2") center / contain no-repeat; }
.ticker__toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.1); opacity: 0; transition: opacity .2s ease, background-color .2s ease; }
.ticker__band:hover .ticker__toggle, .ticker__toggle:focus-visible { opacity: 1; }
.ticker__toggle:hover { background: var(--purple); }
.ticker__toggle .ic { width: 14px; height: 14px; }
@media (hover: none) { .ticker__toggle { opacity: .8; } }

@media (max-width: 560px) {
  .ticker__item { padding: 18px 0 18px 26px; }
  .ticker__item b { font-size: 1.1rem; }
  .ticker__item span { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__band::before, .ticker__band::after { display: none; }
  .ticker__track { animation: none; width: auto; }
  .ticker__group { flex-wrap: wrap; }
  .ticker__group[aria-hidden="true"], .ticker__toggle { display: none; }
  .ticker__item { white-space: normal; }
}

/* ==========================================================================
   Inner pages: art-directed compositions. Same tokens, type and motion as the
   homepage; each page gets the layout its content needs.
   ========================================================================== */

/* ---------- Breadcrumbs ---------- */
.crumbs { padding-top: 16px; padding-bottom: 4px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: .86rem; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; margin: 0 12px 0 10px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; }
.crumbs a { transition: color .2s ease; }
.crumbs a:hover { color: var(--purple-deep); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- SVG line drawings: paths trace themselves in on reveal ---------- */
.js [data-line] .draw { stroke-dasharray: var(--len, 0); stroke-dashoffset: var(--len, 0); transition: stroke-dashoffset 1.8s var(--ease-io) var(--d, 0s); }
.js [data-line].is-in .draw { stroke-dashoffset: 0; }

/* ---------- About: editorial photo hero ---------- */
.ahero { padding: 12px 12px 0; }
.ahero__frame {
  position: relative; overflow: hidden; border-radius: 16px; isolation: isolate; display: flex; align-items: flex-end; justify-content: center;
  min-height: min(82vh, 860px); min-height: min(82dvh, 860px); text-align: center; color: #fff; background: var(--void);
}
.ahero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.js .ahero__img { transform: scale(1.08); transition: transform 2.8s var(--ease); }
.ahero.is-in .ahero__img { transform: none; }
.ahero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 10, 14, .94) 0%, rgba(11, 10, 14, .5) 44%, rgba(11, 10, 14, .1) 74%); }
.ahero__inner { width: 100%; padding: 0 clamp(20px, 4vw, 56px) clamp(34px, 5vw, 72px); }
.ahero h1 { color: #fff; }
.ahero__big { display: block; font-size: clamp(3.4rem, 12.6vw, 12.2rem); line-height: .84; letter-spacing: -.012em; }
.ahero__sub { display: block; margin-top: clamp(14px, 1.8vw, 24px); font-size: clamp(1.5rem, 3.2vw, 3rem); line-height: 1; }
.ahero .hl { color: #fff; }
.ahero .lede { margin: clamp(16px, 2vw, 26px) auto 0; max-width: 58ch; color: #E6E0EB; }

/* ---------- Editorial split: heading left, text right, hairline above ---------- */
.edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: start; padding-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--line); }
.edit .h-sec { max-width: 15ch; }
.edit__body .copy { font-size: 1.06rem; }
.edit__body .btn-row { margin-top: 30px; }
.sec--dark .edit { border-top-color: var(--line-dark); }

/* ---------- Pull quote ---------- */
.pull { margin: 0; padding-left: clamp(20px, 3vw, 44px); border-left: 6px solid var(--purple); }
.pull blockquote { margin: 0; max-width: 26ch; font: 800 clamp(2rem, 4.4vw, 4.2rem)/1 var(--f-display); letter-spacing: -.005em; text-transform: uppercase; color: var(--ink); }
.pull figcaption { margin-top: 24px; font: 700 .9rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--purple-deep); }

/* ---------- Values: statement cards that stack as you scroll ---------- */
.stack { display: grid; gap: 22px; margin-top: clamp(32px, 4vw, 56px); }
.stack__card {
  position: sticky; top: calc(var(--header-h) + 24px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: space-between; gap: 24px 40px;
  min-height: clamp(280px, 32vw, 400px); padding: clamp(26px, 4vw, 56px); border-radius: 16px; box-shadow: 0 -24px 50px rgba(11, 10, 14, .12);
}
.stack__card:nth-child(2) { top: calc(var(--header-h) + 44px); }
.stack__card:nth-child(3) { top: calc(var(--header-h) + 64px); }
.stack__card--dark { background: var(--carbon); color: var(--on-dark); }
.stack__card--purple { background: var(--purple); color: #fff; }
.stack__card--light { background: #fff; border: 1px solid var(--line); color: var(--body); }
.stack__word { grid-column: 1 / -1; font: 800 clamp(3.2rem, 10vw, 9rem)/.86 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.stack__card--light .stack__word { color: var(--ink); }
.stack__text { align-self: end; max-width: 42ch; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.55; }
.stack__ic { align-self: end; width: clamp(40px, 5vw, 64px); height: clamp(40px, 5vw, 64px); }
.stack__card--dark .stack__ic { color: var(--purple-soft); }
.stack__card--light .stack__ic { color: var(--purple); }

/* ---------- Sticky heading beside a hairline list ---------- */
.apart { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.apart__head { position: sticky; top: calc(var(--header-h) + 40px); }
.apart__head .copy { margin-top: 24px; }
.apart__list li { position: relative; padding: clamp(22px, 2.4vw, 32px) 0 clamp(22px, 2.4vw, 32px) 30px; border-top: 1px solid var(--line); }
.apart__list li:last-child { border-bottom: 1px solid var(--line); }
.apart__list li::before {
  content: ""; position: absolute; left: 0; top: clamp(22px, 2.4vw, 32px); bottom: clamp(22px, 2.4vw, 32px); width: 4px; border-radius: 2px;
  background: var(--purple); transform: scaleY(.22); transform-origin: top; transition: transform .5s var(--ease);
}
.apart__list li:hover::before { transform: none; }
.apart__list h3 { font-size: clamp(1.6rem, 2.4vw, 2.3rem); }
.apart__list p { margin-top: 8px; max-width: 52ch; color: var(--muted); }

/* ---------- Org chart: lines grow from the lead to each discipline ---------- */
.org { margin-top: clamp(40px, 5vw, 64px); }
.org__lead { display: flex; justify-content: center; }
.org__node {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font: 700 1.12rem/1.1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink);
}
.org__node small { font: 400 .92rem/1.4 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.org__node--lead { padding: 18px 34px; border-color: var(--carbon); background: var(--carbon); color: #fff; }
.org__stem { width: 2px; height: 34px; margin: 0 auto; background: var(--purple); transform-origin: top; }
.org__row { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding-top: 34px; }
.org__row::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: var(--purple); transform-origin: center; }
.org__row > li { position: relative; }
.org__row > li::before { content: ""; position: absolute; top: -34px; left: 50%; width: 2px; height: 34px; background: var(--purple); transform-origin: top; }
.org__row .org__node { height: 100%; }
.js .org .org__stem, .js .org .org__row > li::before { transform: scaleY(0); transition: transform .5s var(--ease-io); }
.js .org .org__row::before { transform: scaleX(0); transition: transform .7s var(--ease-io) .45s; }
.js .org .org__row > li::before { transition-delay: 1.05s; }
.js .org .org__row .org__node { opacity: 0; transform: translateY(12px); transition: opacity .6s ease 1.2s, transform .7s var(--ease) 1.2s; }
.org.is-in .org__stem, .org.is-in .org__row::before, .org.is-in .org__row > li::before { transform: none; }
.org.is-in .org__row .org__node { opacity: 1; transform: none; }

/* ---------- Two-hub schematic (engineering-drawing grid, routes trace in) ---------- */
.hubs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hubmap { display: block; width: 100%; height: auto; }
.hubmap .route { fill: none; stroke: var(--purple-soft); stroke-width: 2.5; }
.hubmap .reach { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 1.5; }
.hubmap .node { fill: var(--purple); stroke: #fff; stroke-width: 2; }
.hubmap .ring { fill: none; stroke: var(--purple-soft); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: hubpulse 2.8s var(--ease) infinite; }
@keyframes hubpulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.hubmap .dot { fill: #fff; }
.hubmap text { font-family: var(--f-display); font-weight: 700; letter-spacing: .06em; fill: #fff; }
.hubmap .muted { font-weight: 600; letter-spacing: .12em; fill: var(--on-dark-muted); }
.hubs__legend { display: grid; gap: 22px; margin-top: 30px; }
.hubs__legend li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; align-items: start; }
.hubs__legend .pin { width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px rgba(142, 37, 184, .3); }
.hubs__legend strong { display: block; margin-bottom: 4px; font: 700 1.2rem/1.1 var(--f-display); text-transform: uppercase; color: #fff; }
.hubs__legend span { font-size: .98rem; color: var(--on-dark-muted); }

/* ---------- Next-step panels (close a page by pointing somewhere useful) ---------- */
.nextup { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 12px 12px; }
.nextup__panel {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(280px, 30vw, 440px); padding: clamp(24px, 3vw, 44px); border-radius: 16px; color: #fff; background: var(--void);
}
.nextup__panel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.nextup__panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 10, 14, .92) 0%, rgba(11, 10, 14, .4) 58%, rgba(11, 10, 14, .12) 100%); }
.nextup__title { font: 800 clamp(2rem, 3.6vw, 3.4rem)/.94 var(--f-display); text-transform: uppercase; max-width: 14ch; }
.nextup__text { margin-top: 12px; max-width: 40ch; color: #E6E0EB; }
.nextup__go {
  position: absolute; top: clamp(20px, 2.4vw, 34px); right: clamp(20px, 2.4vw, 34px); display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%; background: var(--purple-btn); transition: transform .45s var(--ease), background-color .3s ease;
}
.nextup__go .ic { width: 20px; height: 20px; }
.nextup__panel:hover img, .nextup__panel:focus-visible img { transform: scale(1.06); }
.nextup__panel:hover .nextup__go, .nextup__panel:focus-visible .nextup__go { transform: rotate(-45deg); background: var(--purple-lift); }

/* ---------- Services: split hero card (text beside a photograph, inside one frame) ---------- */
.shero { padding: 12px 12px 0; }
.shero__card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); min-height: clamp(460px, 46vw, 640px);
  overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff;
}
.shero__text { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 4.4vw, 64px); }
.shero h1 { font-size: clamp(2.4rem, 4.6vw, 4.5rem); max-width: 16ch; text-wrap: balance; }
.shero .lede { margin-top: clamp(16px, 2vw, 24px); color: var(--body); }
.shero .btn-row { margin-top: clamp(24px, 2.8vw, 34px); }
.shero__media { position: relative; min-height: 280px; background: var(--mist); }
.shero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Services: the execution path, pinned while it slides sideways ---------- */
.hpath { position: relative; background: radial-gradient(ellipse 50% 60% at 90% 0%, rgba(142, 37, 184, .26), transparent 70%), var(--carbon); color: var(--on-dark); }
.hpath__stage { padding: var(--sec) 0; overflow: hidden; }
.hpath__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 60px; align-items: end; margin-bottom: clamp(28px, 3.4vw, 48px); }
.hpath__head h2 { color: #fff; }
.hpath__head p { max-width: 50ch; color: var(--on-dark-muted); font-size: 1.06rem; }
.hpath__row { display: flex; gap: 16px; padding: 0 var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hpath__row::-webkit-scrollbar { display: none; }
@media (min-width: 1416px) { .hpath__row { padding-left: calc((100vw - var(--wrap)) / 2); padding-right: calc((100vw - var(--wrap)) / 2); } }
.hpath__panel {
  flex: 0 0 min(82vw, 470px); scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line-dark); border-radius: 8px; background: var(--carbon-2);
}
.hpath__body { padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; flex: 1; }
.hpath__n { font: 800 clamp(3rem, 4.4vw, 4.2rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px var(--purple-soft); }
.hpath__panel h3 { margin-top: 18px; color: #fff; font-size: clamp(1.7rem, 2.2vw, 2.1rem); }
.hpath__panel p { margin-top: 10px; color: #D3CCDA; font-size: .98rem; line-height: 1.55; }
.hpath__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 18px; }
.hpath__links a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 4px; font-size: .86rem; font-weight: 600; color: #fff; transition: background-color .2s ease, border-color .2s ease; }
.hpath__links a:hover { background: var(--purple-deep); border-color: var(--purple-deep); }
.hpath__img { height: clamp(150px, 24vh, 260px); overflow: hidden; }
.hpath__img img { width: 100%; height: 100%; object-fit: cover; }
.hpath__bar { position: relative; height: 2px; margin-top: clamp(24px, 3vw, 40px); background: rgba(255, 255, 255, .14); }
.hpath__bar span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--purple), var(--purple-soft)); transform: scaleX(0); transform-origin: left; }
.hpath__hint { display: none; margin-top: 14px; font: 600 .86rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
.hpath--live .hpath__stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding: 0; }
.hpath--live .hpath__row { overflow: visible; scroll-snap-type: none; will-change: transform; }
.hpath--live .hpath__hint { display: block; }

/* ---------- Services: accordion index with a sticky photograph ---------- */
.svc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(32px, 4vw, 56px); }
.svc__item { border-top: 1px solid var(--line); }
.svc__item:last-child { border-bottom: 1px solid var(--line); }
.svc__item h3 { font-size: inherit; line-height: inherit; }
.svc__btn { display: grid; grid-template-columns: 44px minmax(0, 1fr) 34px; align-items: center; gap: 18px; width: 100%; padding: 20px 0; text-align: left; }
.svc__name { font: 800 clamp(1.45rem, 2.2vw, 2.1rem)/1 var(--f-display); text-transform: uppercase; color: var(--ink); transition: color .25s ease; }
.svc__btn:hover .svc__name { color: var(--purple-deep); }
.svc__plus { position: relative; width: 34px; height: 34px; border: 1.5px solid var(--line); border-radius: 50%; transition: background-color .3s ease, border-color .3s ease, transform .45s var(--ease); }
.svc__plus::before, .svc__plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ink); transition: background-color .3s ease; }
.svc__plus::after { transform: rotate(90deg); }
.svc__item.is-open .svc__plus { transform: rotate(45deg); background: var(--purple); border-color: var(--purple); }
.svc__item.is-open .svc__plus::before, .svc__item.is-open .svc__plus::after { background: #fff; }
.svc__panel { display: grid; grid-template-rows: 1fr; }
.svc__inner { overflow: hidden; }
.svc__content { padding: 0 0 28px 62px; }
.svc__content > p { max-width: 60ch; color: var(--muted); }
.svc__content .btn { margin-top: 24px; }
.js .svc__panel { grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.js .svc__inner { visibility: hidden; transition: visibility 0s .55s; }
.js .svc__item.is-open .svc__panel { grid-template-rows: 1fr; }
.js .svc__item.is-open .svc__inner { visibility: visible; transition-delay: 0s; }
.svc__media { position: sticky; top: calc(var(--header-h) + 24px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: var(--carbon); }
.svc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .6s ease, transform 1.2s var(--ease); }
.svc__media img.is-active { opacity: 1; transform: none; }
html:not(.js) .svc__media img:first-child { opacity: 1; transform: none; }

/* ---------- Closing strip (purple band with two actions) ---------- */
.strip { padding: 0 12px 12px; }
.strip__band { border-radius: 16px; background: linear-gradient(120deg, var(--purple-deep) 0%, var(--purple) 100%); color: #fff; padding: clamp(40px, 5vw, 76px) 0; }
.strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.strip h2 { color: #fff; font-size: clamp(2rem, 3.8vw, 3.6rem); max-width: 18ch; }
.strip p { margin-top: 14px; max-width: 52ch; color: #EEE9F2; }
.btn--white { --bg: #fff; --fg: var(--purple-deep); --bd: #fff; }
.btn--white:hover { --bg: var(--carbon); --fg: #fff; --bd: var(--carbon); }

/* ---------- Products: interactive pyro-line schematic ---------- */
.schem { padding: 12px 12px 0; }
.schem__frame {
  position: relative; overflow: hidden; border-radius: 16px; color: var(--on-dark);
  padding: clamp(28px, 4vw, 60px) clamp(18px, 4vw, 60px) clamp(22px, 3vw, 40px);
  background: radial-gradient(ellipse 60% 70% at 85% 0%, rgba(142, 37, 184, .28), transparent 70%), var(--carbon);
}
.schem__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; }
.schem h1 { color: #fff; font-size: clamp(2.3rem, 4.4vw, 4.2rem); max-width: 16ch; }
.schem .hl { color: #fff; }
.schem__lede { max-width: 54ch; color: var(--on-dark-muted); font-size: 1.04rem; }
.schem__fig { position: relative; margin-top: clamp(22px, 3vw, 40px); }
.schem__svg { display: block; width: 100%; height: auto; }
.schem__svg .ln { fill: rgba(255, 255, 255, .025); stroke: rgba(255, 255, 255, .62); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: stroke .3s ease, fill .3s ease; }
.schem__svg path.ln { fill: none; }
.schem__svg .thin { stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.schem__svg .gas { fill: none; stroke: var(--purple-soft); stroke-width: 2; stroke-dasharray: 8 14; animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -44; } }
.js .schem__svg .gas { opacity: 0; transition: opacity .8s ease 2.2s; }
.schem__svg.is-in .gas { opacity: .9; }
.schem__svg .part.is-lit .ln { stroke: var(--purple-soft); stroke-width: 2.2; }
.schem__svg .part.is-lit rect.ln, .schem__svg .part.is-lit .closed { fill: rgba(142, 37, 184, .28); }
.schem__svg text { font-family: var(--f-display); font-size: 13px; font-weight: 600; letter-spacing: .12em; fill: var(--on-dark-muted); }
.hot { position: absolute; display: flex; align-items: center; gap: 10px; transform: translate(-11px, -50%); }
.hot--left { flex-direction: row-reverse; transform: translate(calc(-100% + 11px), -50%); }
.hot__dot { position: relative; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 5px rgba(142, 37, 184, .32); transition: transform .3s var(--ease), box-shadow .3s ease; }
.hot__dot::before, .hot__dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; margin: -1px 0 0 -5px; background: #fff; }
.hot__dot::after { transform: rotate(90deg); }
.hot__label {
  white-space: nowrap; padding: 7px 10px; border: 1px solid var(--line-dark); border-radius: 4px; background: rgba(11, 10, 14, .8);
  font: 700 .84rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: #fff; transition: background-color .25s ease, border-color .25s ease;
}
.hot:hover .hot__dot, .hot:focus-visible .hot__dot, .hot.is-lit .hot__dot { transform: scale(1.15); box-shadow: 0 0 0 9px rgba(142, 37, 184, .36); }
.hot:hover .hot__label, .hot:focus-visible .hot__label, .hot.is-lit .hot__label { background: var(--purple-deep); border-color: var(--purple-deep); }
.schem__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; margin-top: clamp(14px, 2vw, 24px); }
.schem__hint { font: 600 .86rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
.schem__legend { display: none; }
.schem__swipe { display: none; }
.schem__foot .btn-row { margin: 0; }

/* ---------- Catalogue: grouped rows with an industry filter ---------- */
.cat__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--purple-line); border-radius: 4px;
  background: #fff; color: var(--purple-deep); font-size: .95rem; font-weight: 600; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.filters button:hover { border-color: var(--purple); }
.filters button[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); color: #fff; }
.cat__count { margin-top: 12px; font-size: .92rem; color: var(--muted); }
.cat__group { margin-top: clamp(36px, 4vw, 56px); }
.cat__gh { display: flex; align-items: baseline; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); font-size: clamp(1.5rem, 2.2vw, 2rem); }
.cat__gh span { font-size: .62em; color: var(--muted); }
.cat__row { display: grid; grid-template-columns: 116px minmax(0, 1fr) 190px auto; gap: 26px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.cat__thumb { width: 116px; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--mist); }
.cat__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cat__row:hover .cat__thumb img { transform: scale(1.07); }
.cat__main h4 { font: 800 clamp(1.3rem, 1.7vw, 1.6rem)/1 var(--f-display); text-transform: uppercase; color: var(--ink); }
.cat__main p { margin-top: 8px; max-width: 72ch; font-size: .97rem; color: var(--muted); }
.cat__main .cat__apps { font-size: .92rem; color: var(--body); }
.cat__apps b { margin-right: 6px; font: 700 .8rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--purple-deep); }
.cat__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cat__tags li { padding: 5px 8px; border-radius: 4px; background: var(--purple-wash); color: var(--purple-deep); font: 700 .76rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.is-fresh { animation: rise .5s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Drawing drop-zone call to action ---------- */
.dropcta { padding: 0 12px 12px; }
.dropcta__box {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: clamp(28px, 4vw, 56px);
  border: 2px dashed var(--purple-line); border-radius: 16px; background: var(--purple-wash); transition: border-color .3s ease;
}
.dropcta__box:hover { border-color: var(--purple); }
.dropcta__icon { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #fff; color: var(--purple); box-shadow: 0 12px 30px rgba(109, 26, 142, .16); }
.dropcta__icon .ic { width: 32px; height: 32px; }
.dropcta h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); max-width: 22ch; }
.dropcta p { margin-top: 10px; max-width: 56ch; color: var(--muted); }

/* ---------- Manufacturing: hero with the supply route along its foot ---------- */
.mhero { padding: 12px 12px 0; }
.mhero__frame {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(580px, 60vw, 820px); padding: clamp(28px, 4.4vw, 64px); border-radius: 16px; color: #fff; background: var(--void);
}
.mhero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.mhero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 10, 14, .9) 0%, rgba(11, 10, 14, .62) 46%, rgba(11, 10, 14, .16) 82%), linear-gradient(0deg, rgba(11, 10, 14, .92) 0%, rgba(11, 10, 14, 0) 52%); }
.mhero h1 { color: #fff; font-size: clamp(2.4rem, 4.8vw, 4.6rem); max-width: 17ch; }
.mhero .hl { color: #fff; }
.mhero .lede { margin-top: 20px; max-width: 56ch; color: #E6E0EB; }
.mhero .btn-row { margin-top: 28px; }
.route { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 5vw, 64px); padding-top: 30px; }
.route::before, .route::after { content: ""; position: absolute; top: 7px; left: 8px; right: calc(25% - 8px); height: 2px; background: rgba(255, 255, 255, .26); }
.route::after { background: linear-gradient(90deg, var(--purple), var(--purple-soft)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease-io) .3s; }
.route li { position: relative; padding-right: 18px; font: 700 clamp(.9rem, 1.2vw, 1.05rem)/1.15 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-muted); transition: color .4s ease; }
.route__dot { position: absolute; top: -30px; left: 0; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; background: var(--carbon); transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease; }
.mhero.is-in .route::after { transform: none; }
.mhero.is-in .route li { color: #fff; }
.mhero.is-in .route li .route__dot { background: var(--purple); border-color: var(--purple-soft); box-shadow: 0 0 0 5px rgba(142, 37, 184, .3); }
.mhero.is-in .route li:nth-child(1), .mhero.is-in .route li:nth-child(1) .route__dot { transition-delay: .3s; }
.mhero.is-in .route li:nth-child(2), .mhero.is-in .route li:nth-child(2) .route__dot { transition-delay: .9s; }
.mhero.is-in .route li:nth-child(3), .mhero.is-in .route li:nth-child(3) .route__dot { transition-delay: 1.5s; }
.mhero.is-in .route li:nth-child(4), .mhero.is-in .route li:nth-child(4) .route__dot { transition-delay: 2.1s; }

/* ---------- Manufacturing: drawing-to-despatch journey, the rail fills as you scroll ---------- */
.journey { position: relative; display: grid; gap: clamp(56px, 8vw, 120px); margin-top: clamp(44px, 6vw, 88px); }
.journey__rail { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--line); transform: translateX(-50%); }
.journey__fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--purple-deep), var(--purple)); transform: scaleY(var(--p, 0)); transform-origin: top; }
.journey__step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 9vw, 150px); align-items: center; }
.journey__step::before {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: 1; width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%); transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.journey__step.is-on::before { background: var(--purple); border-color: var(--purple); box-shadow: 0 0 0 7px rgba(142, 37, 184, .18); }
.journey__media { overflow: hidden; border-radius: 8px; aspect-ratio: 4 / 3; }
.journey__media img { width: 100%; height: 100%; object-fit: cover; }
.journey__step:nth-child(odd) .journey__media { order: 2; }
.journey__n { font: 800 1.1rem/1 var(--f-display); letter-spacing: .1em; color: var(--purple); }
.journey__text h3 { margin-top: 12px; font-size: clamp(1.9rem, 3vw, 2.9rem); }
.journey__text p { margin-top: 14px; max-width: 46ch; color: var(--muted); font-size: 1.04rem; }

/* ---------- Manufacturing: catalogue index in five columns ---------- */
.index5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(28px, 3.4vw, 44px); border-top: 2px solid var(--ink); }
.index5__col { padding: 24px 22px 8px 0; }
.index5__col + .index5__col { padding-left: 22px; border-left: 1px solid var(--line); }
.index5__col h3 { display: flex; align-items: center; gap: 10px; font-size: 1.28rem; line-height: 1.05; }
.index5__col h3 .ic { width: 22px; height: 22px; color: var(--purple); }
.index5__col ul { margin-top: 16px; }
.index5__col li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .96rem; color: var(--body); }

/* ---------- Annotated photograph ---------- */
.annot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.annot__fig { position: relative; margin: 0; overflow: hidden; border-radius: 8px; }
.annot__fig img { display: block; width: 100%; height: auto; }
.annot__fig .hot { pointer-events: none; }
.js .annot__fig .hot { opacity: 0; transition: opacity .6s ease; }
.annot__fig.is-in .hot { opacity: 1; }
.annot__fig.is-in .hot:nth-of-type(1) { transition-delay: .9s; }
.annot__fig.is-in .hot:nth-of-type(2) { transition-delay: 1.3s; }
.annot__fig.is-in .hot:nth-of-type(3) { transition-delay: 1.7s; }
.annot__fig.is-in .hot .hot__dot { animation: hotpulse 1.6s var(--ease) 1.2s 2; }
@keyframes hotpulse { 50% { box-shadow: 0 0 0 14px rgba(142, 37, 184, 0); } }

/* ---------- Despatch log ---------- */
.log { margin-top: clamp(28px, 3.4vw, 44px); border-top: 1px solid var(--line-dark); }
.log__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: 16px 32px; align-items: center; padding: 22px 0; border-bottom: 1px dashed rgba(255, 255, 255, .22); }
.log__item { font: 700 clamp(1.2rem, 1.7vw, 1.5rem)/1.1 var(--f-display); text-transform: uppercase; color: #fff; }
.log__detail { color: var(--on-dark-muted); }
.log__stamp { padding: 6px 12px; border: 1.5px solid var(--purple-soft); border-radius: 4px; font: 700 .8rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--purple-soft); transform: rotate(-3deg); }

/* ---------- Capabilities: data-led hero with a live readout ---------- */
.chero { padding: 12px 12px 0; }
.chero__frame {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: end; gap: 28px 48px;
  min-height: clamp(560px, 56vw, 780px); padding: clamp(28px, 4.4vw, 64px); border-radius: 16px; color: #fff; background: var(--void);
}
.chero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.js .chero__img { transform: scale(1.06); transition: transform 2.6s var(--ease); }
.chero.is-in .chero__img { transform: none; }
.chero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 10, 14, .95) 0%, rgba(11, 10, 14, .72) 46%, rgba(11, 10, 14, .22) 100%); }
.chero h1 { color: #fff; font-size: clamp(2.4rem, 4.8vw, 4.6rem); max-width: 16ch; }
.chero .hl { color: #fff; }
.chero .lede { margin-top: 20px; max-width: 54ch; color: #E6E0EB; }
.chero .btn-row { margin-top: 28px; }
.readout { justify-self: end; width: min(100%, 380px); padding: 24px 26px; border: 1px solid var(--line-dark); border-radius: 8px; background: rgba(20, 17, 24, .94); }
.readout__k { font: 700 .82rem/1.3 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--purple-soft); }
.readout__v { display: flex; align-items: center; gap: 12px; margin-top: 14px; font: 800 clamp(2.8rem, 4.6vw, 4.2rem)/.9 var(--f-display); color: #fff; }
.readout__v .from { color: rgba(255, 255, 255, .45); }
.readout__v .ic { width: .45em; height: .45em; color: var(--purple-soft); }
.readout__s { margin-top: 12px; font-size: .92rem; color: var(--on-dark-muted); }

/* ---------- Scroll-spy index beside long-form sections ---------- */
.spy { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(28px, 5vw, 80px); align-items: start; margin-top: clamp(36px, 4vw, 60px); }
.spy__nav { position: sticky; top: calc(var(--header-h) + 32px); z-index: 5; display: grid; border-left: 2px solid var(--line); }
.spy__nav a {
  margin-left: -2px; padding: 11px 0 11px 18px; border-left: 2px solid transparent;
  font: 700 1.02rem/1.15 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); transition: color .25s ease, border-color .25s ease;
}
.spy__nav a:hover { color: var(--ink); }
.spy__nav a.is-active { border-left-color: var(--purple); color: var(--ink); }
.spy__item { padding: clamp(30px, 3.4vw, 44px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 24px); }
.spy__item:first-child { padding-top: 0; border-top: 0; }
.spy__item h3 { margin-top: 16px; font-size: clamp(1.9rem, 2.8vw, 2.7rem); }
.spy__item > p { margin-top: 12px; max-width: 64ch; font-size: 1.04rem; color: var(--muted); }
.spy__media { margin-top: 24px; overflow: hidden; border-radius: 8px; aspect-ratio: 21 / 8; }
.spy__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Dumbbell: one before/after pair on a labelled scale ---------- */
.proofx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.proofx .btn-row { margin-top: 30px; }
.dumb { margin: 0; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line-dark); border-radius: 8px; background: var(--carbon-2); }
.dumb__title { font: 700 .86rem/1.3 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-muted); }
.dumb__plot { position: relative; height: 164px; margin: 30px 14px 0; }
.dumb__tick { position: absolute; bottom: 0; transform: translateX(-50%); font-size: .82rem; color: var(--on-dark-muted); }
.dumb__tick::before { content: ""; position: absolute; bottom: 24px; left: 50%; width: 1px; height: 104px; background: rgba(255, 255, 255, .1); }
.dumb__base { position: absolute; left: 0; right: 0; top: 83px; height: 1px; background: rgba(255, 255, 255, .16); }
.dumb__link { position: absolute; top: 81px; left: 45%; width: 35%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #8E6FA3, #D9A6EE); transform-origin: left; }
.js .dumb__link { transform: scaleX(0); transition: transform 1.3s var(--ease-io) .5s; }
.dumb.is-in .dumb__link { transform: none; }
.dumb__dot { position: absolute; top: 83px; left: var(--x); width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--carbon-2); outline-offset: 4px; }
.dumb__dot::after { content: ""; position: absolute; inset: -12px; }
.dumb__dot--before { background: #8E6FA3; }
.dumb__dot--after { background: #D9A6EE; }
.js .dumb__dot--after { opacity: 0; transform: scale(.4); transition: opacity .4s ease 1.7s, transform .5s var(--ease) 1.7s; }
.dumb.is-in .dumb__dot--after { opacity: 1; transform: none; }
.dumb__tip {
  position: absolute; top: calc(100% + 14px); left: 50%; z-index: 2; padding: 8px 10px; border: 1px solid var(--line-dark); border-radius: 4px; background: var(--void);
  white-space: nowrap; font-size: .82rem; color: #fff; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.dumb__dot:hover .dumb__tip, .dumb__dot:focus-visible .dumb__tip { opacity: 1; transform: translate(-50%, 0); }
.dumb__label { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); text-align: center; font: 700 .82rem/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.dumb__label b { display: block; margin-top: 4px; font: 800 clamp(2rem, 3.2vw, 2.8rem)/1 var(--f-display); letter-spacing: 0; color: #fff; }
.dumb__note { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-dark); font-size: .95rem; color: var(--on-dark-muted); }

/* ---------- Numbered mini-sequence with a rail (scan to shop drawing) ---------- */
.seq { position: relative; display: grid; gap: 22px; margin-top: 30px; padding-left: 58px; }
.seq::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 17px; width: 2px; background: var(--purple-line); }
.seq li { position: relative; }
.seq__n { position: absolute; top: 0; left: -58px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--purple); color: #fff; font: 800 1rem/1 var(--f-display); }
.seq strong { display: block; font: 700 1.3rem/1.1 var(--f-display); text-transform: uppercase; color: var(--ink); }
.seq span:not(.seq__n) { font-size: .98rem; color: var(--muted); }
.scan { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }

/* ---------- Spec sheet (definition rows) ---------- */
.spec { margin-top: clamp(28px, 3.4vw, 44px); border-bottom: 1px solid var(--line); }
.spec > div { display: grid; grid-template-columns: minmax(160px, 3fr) minmax(0, 9fr); gap: 12px 32px; padding: 22px 0; border-top: 1px solid var(--line); }
.spec dt { font: 700 .92rem/1.4 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--purple-deep); }
.spec dd { margin: 0; font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.45; color: var(--ink); }

/* ---------- Big typographic call to action ---------- */
.bigcta { padding: var(--sec) 0; border-top: 1px solid var(--line); }
.bigcta__link { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: 100%; text-align: left; }
.bigcta__text { font: 800 clamp(2.8rem, 8.4vw, 8.2rem)/.86 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); transition: color .35s ease; }
.bigcta__go { flex-shrink: 0; display: grid; place-items: center; width: clamp(64px, 8vw, 116px); height: clamp(64px, 8vw, 116px); border-radius: 50%; background: var(--purple-btn); color: #fff; transition: transform .5s var(--ease), background-color .3s ease; }
.bigcta__go .ic { width: 40%; height: 40%; }
.bigcta__link:hover .bigcta__text, .bigcta__link:focus-visible .bigcta__text { color: var(--purple-deep); }
.bigcta__link:hover .bigcta__go, .bigcta__link:focus-visible .bigcta__go { transform: rotate(-45deg); background: var(--purple-hover); }
.bigcta__sub { margin-top: 26px; max-width: 60ch; color: var(--muted); font-size: 1.06rem; }
.bigcta__sub a { color: var(--purple-deep); text-decoration: underline; }

/* ---------- Industries: giant index, the backdrop follows the industry you point at ---------- */
.ihero { padding: 12px 12px 0; }
.ihero__frame {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  min-height: clamp(620px, 62vw, 860px); padding: clamp(28px, 4.4vw, 64px); border-radius: 16px; color: #fff; background: var(--void);
}
.ihero__media img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .8s ease, transform 1.8s var(--ease); }
.ihero__media img.is-active { opacity: 1; transform: none; }
html:not(.js) .ihero__media img:first-child { opacity: 1; }
.ihero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 10, 14, .94) 0%, rgba(11, 10, 14, .6) 55%, rgba(11, 10, 14, .38) 100%); }
.ihero h1 { color: #fff; font-size: clamp(2rem, 3.4vw, 3.2rem); max-width: 20ch; }
.ihero .hl { color: #fff; }
.ihero .lede { margin-top: 16px; max-width: 52ch; color: #E6E0EB; }
.ihero__list { display: flex; flex-wrap: wrap; gap: 6px clamp(20px, 3vw, 48px); }
.ihero__list a { display: block; }
.ihero__name { display: block; font: 800 clamp(3rem, 8.4vw, 8.2rem)/.9 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; color: rgba(255, 255, 255, .26); transition: color .35s ease; }
.ihero__note { display: block; margin-top: 8px; font: 600 .86rem/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--purple-soft); opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease; }
.ihero__list a.is-active .ihero__name, .ihero__list a:hover .ihero__name, .ihero__list a:focus-visible .ihero__name { color: #fff; }
.ihero__list a.is-active .ihero__note { opacity: 1; transform: none; }

/* ---------- Overlap: a text card laid over the edge of a large photograph ---------- */
.overlap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.overlap__media { grid-column: 1 / 9; grid-row: 1; overflow: hidden; border-radius: 8px; aspect-ratio: 16 / 11; }
.overlap__media img { width: 100%; height: 100%; object-fit: cover; }
.overlap__card { position: relative; z-index: 1; grid-column: 7 / 13; grid-row: 1; padding: clamp(26px, 3.4vw, 50px); border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 30px 60px rgba(22, 19, 26, .14); }
.overlap__card h2 { font-size: clamp(2.2rem, 3.8vw, 3.6rem); }
.overlap__card > p { margin-top: 16px; color: var(--muted); }
.overlap__card .btn-row { margin-top: 28px; }

/* ---------- Sector cards: large photographs, the detail slides up on hover or focus ---------- */
.sectors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(32px, 4vw, 52px); }
.sector {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(460px, 42vw, 620px); padding: clamp(24px, 3vw, 40px); border-radius: 8px; color: #fff; background: var(--carbon);
}
.sector > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.sector::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 10, 14, .96) 12%, rgba(11, 10, 14, .5) 58%, rgba(11, 10, 14, .14) 100%); }
.sector h3 { color: #fff; font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
.sector > p { margin-top: 10px; max-width: 48ch; color: #D3CCDA; }
.sector__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.sector__more > div { overflow: hidden; }
.sector__more .scope { margin-top: 18px; }
.sector__more .btn { margin-top: 22px; }
.sector:hover .sector__more, .sector:focus-within .sector__more { grid-template-rows: 1fr; }
.sector:hover > img { transform: scale(1.05); }
@media (hover: none) { .sector__more { grid-template-rows: 1fr; } }

/* ---------- Projects: stats-first hero ---------- */
.statx { padding: 12px 12px 0; }
.statx__frame {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(40px, 6vw, 88px);
  min-height: clamp(520px, 50vw, 700px); padding: clamp(28px, 4.4vw, 64px); border-radius: 16px; color: var(--on-dark);
  background: radial-gradient(ellipse 55% 70% at 90% 0%, rgba(142, 37, 184, .34), transparent 70%), var(--carbon);
}
.statx h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 4.8rem); max-width: 15ch; }
.statx .hl { color: #fff; }
.statx .lede { margin-top: 20px; max-width: 58ch; color: var(--on-dark-muted); }
.statx__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line-dark); }
.statx__row > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; padding: 26px 24px 0 0; }
.statx__row > div + div { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.statx__row dd { margin: 0; font: 800 clamp(3.4rem, 8vw, 7.4rem)/.86 var(--f-display); color: #fff; }
.statx__row dt { font: 700 1rem/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--purple-soft); }

/* ---------- Projects: case-study spreads, alternating sides ---------- */
.cases { display: grid; gap: clamp(56px, 8vw, 120px); margin-top: clamp(40px, 5vw, 72px); }

/* ---------- Projects: the empty next row under the reference list ---------- */
.nextrow {
  display: grid; grid-template-columns: minmax(0, 27fr) minmax(0, 30fr) minmax(0, 32fr) auto; gap: 16px 22px; align-items: center;
  margin-top: 12px; padding: 18px 22px; border: 2px dashed var(--purple-line); border-radius: 8px; transition: border-color .3s ease, background-color .3s ease;
}
.nextrow:hover { border-color: var(--purple); background: var(--purple-wash); }
.nextrow span { font-size: .97rem; color: var(--muted); }
.nextrow strong { font: 700 1.08rem/1.15 var(--f-display); text-transform: uppercase; color: var(--ink); }
.ref-filter { margin: clamp(22px, 2.6vw, 32px) 0 18px; }

/* ---------- Quality: split hero, three statements slide up line by line ---------- */
.qhero { padding: 12px 12px 0; }
.qhero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: end; padding: clamp(24px, 3vw, 44px) clamp(8px, 2.4vw, 40px) clamp(24px, 3vw, 44px); }
.qhero h1 { font-size: clamp(2.8rem, 6.4vw, 6.2rem); }
.qhero h1 .line { display: block; overflow: hidden; padding-bottom: .04em; }
.qhero h1 .line > span { display: inline-block; }
.js .qhero h1 .line > span { transform: translateY(105%); transition: transform 1s var(--ease); }
.qhero.is-in h1 .line > span { transform: none; }
.qhero.is-in h1 .line:nth-child(2) > span { transition-delay: .12s; }
.qhero.is-in h1 .line:nth-child(3) > span { transition-delay: .24s; }
.qhero h1 .hl { transition-delay: .9s; }
.qhero.is-in .hl { background-size: 100% .86em; color: #fff; }
.qhero .lede { margin-top: clamp(20px, 2.4vw, 30px); max-width: 52ch; }
.qhero .btn-row { margin-top: 30px; }
.qhero__media { overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 5; }
.qhero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Quality: inspection record, each line ticks itself ---------- */
.sheet { overflow: hidden; margin-top: clamp(32px, 4vw, 52px); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.sheet__head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; padding: 18px 26px; background: var(--carbon); color: var(--on-dark-muted); }
.sheet__head span { font-size: .9rem; }
.sheet__head b { display: block; font: 700 .78rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--purple-soft); margin-bottom: 6px; }
.sheet__row { display: grid; grid-template-columns: 44px minmax(0, 4fr) minmax(0, 7fr) 170px; gap: 16px 26px; align-items: center; padding: 24px 26px; border-top: 1px solid var(--line); }
.sheet__row:first-child { border-top: 0; }
.sheet__tick { width: 34px; height: 34px; }
.sheet__tick rect { fill: none; stroke: var(--purple-line); stroke-width: 2; }
.sheet__tick path { fill: none; stroke: var(--purple); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sheet__row h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
.sheet__row p { color: var(--muted); }
.sheet__row a { justify-self: end; font: 700 .86rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--purple-deep); white-space: nowrap; }
.sheet__row a:hover { text-decoration: underline; }

/* ---------- Quality: zero-harm statement ---------- */
.zero { position: relative; overflow: hidden; isolation: isolate; padding: var(--sec) 0; color: var(--on-dark); background: var(--carbon); }
.zero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.zero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 17, 24, .6), var(--carbon) 92%); }
.zero__big { font: 800 clamp(4.4rem, 17vw, 17rem)/.8 var(--f-display); letter-spacing: -.02em; text-transform: uppercase; color: #fff; }
.zero__big span { color: var(--purple-soft); }
.zero__sub { margin-top: clamp(14px, 2vw, 24px); font: 700 clamp(1.3rem, 2.4vw, 2.2rem)/1.1 var(--f-display); text-transform: uppercase; color: #fff; }
.zero__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin-top: clamp(40px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--line-dark); }
.zero__cols strong { display: block; font: 700 1.2rem/1.1 var(--f-display); text-transform: uppercase; color: #fff; }
.zero__cols p { margin-top: 8px; color: var(--on-dark-muted); }

/* ---------- Careers: photo mosaic hero ---------- */
.mosaic { padding: 12px 12px 0; }
.mosaic__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; min-height: clamp(540px, 52vw, 720px); }
.mosaic__text { grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 3.4vw, 48px); border-radius: 16px; background: var(--carbon); color: var(--on-dark); }
.mosaic__text h1 { color: #fff; font-size: clamp(2.4rem, 4.6vw, 4.4rem); }
.mosaic__text .hl { color: #fff; }
.mosaic__text .lede { margin-top: 20px; color: var(--on-dark-muted); }
.mosaic__text .btn-row { margin-top: 28px; }
.mosaic__img { overflow: hidden; border-radius: 16px; background: var(--mist); }
.mosaic__img img { width: 100%; height: 100%; object-fit: cover; }
.mosaic__img--tall { grid-row: 1 / 3; }

/* ---------- Careers: reasons as big editorial rows ---------- */
.reasons { margin-top: clamp(32px, 4vw, 52px); border-top: 2px solid var(--ink); }
.reasons li { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 12px 48px; align-items: baseline; padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--line); }
.reasons h3 { font-size: clamp(2rem, 3.6vw, 3.4rem); transition: color .3s ease; }
.reasons li:hover h3 { color: var(--purple-deep); }
.reasons p { font-size: 1.06rem; color: var(--muted); }

/* ---------- Careers: role board ---------- */
.roles { margin-top: clamp(28px, 3.4vw, 44px); border-top: 1px solid var(--line); }
.roles li { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) auto; gap: 12px 28px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.roles__name { font: 800 clamp(1.3rem, 1.8vw, 1.7rem)/1.1 var(--f-display); text-transform: uppercase; color: var(--ink); }
.roles__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.roles__tags span { padding: 5px 8px; border-radius: 4px; background: var(--purple-wash); color: var(--purple-deep); font: 700 .76rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.roles li:hover .roles__name { color: var(--purple-deep); }

/* ---------- Contact: split screen, details on dark beside the form ---------- */
.cscreen { padding: 12px 12px 0; }
.cscreen__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; }
.cscreen__info {
  display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 44px); padding: clamp(28px, 4vw, 56px); border-radius: 16px; color: var(--on-dark);
  background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(142, 37, 184, .32), transparent 70%), var(--carbon);
}
.cscreen__info h1 { color: #fff; font-size: clamp(2.3rem, 4vw, 3.8rem); }
.cscreen__info .hl { color: #fff; }
.cscreen__info .lede { margin-top: 18px; color: var(--on-dark-muted); }
.clinks { display: grid; gap: 18px; }
.clinks span, .chubs strong { display: block; margin-bottom: 4px; font: 700 .8rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--purple-soft); }
.clinks a { display: inline-block; font: 800 clamp(1.5rem, 2.4vw, 2.2rem)/1.1 var(--f-display); color: #fff; background: linear-gradient(var(--purple), var(--purple)) no-repeat 0 100% / 0 2px; transition: background-size .45s var(--ease); overflow-wrap: anywhere; }
.clinks a:hover, .clinks a:focus-visible { background-size: 100% 2px; }
.chubs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 26px; border-top: 1px solid var(--line-dark); }
.chubs > div > span { display: block; color: var(--on-dark-muted); font-size: .95rem; }
.chubs .link-arrow { margin-top: 12px; font-size: .86rem; }
.cscreen__form { padding: clamp(24px, 3.4vw, 48px); border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.cscreen__form h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.cscreen__form > p { margin-top: 10px; color: var(--muted); }
.cscreen__form form { margin-top: 24px; }

/* ---------- Three-step timeline (what happens next) ---------- */
.steps3 { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(32px, 4vw, 52px); }
.steps3::before { content: ""; position: absolute; top: 23px; left: 24px; right: calc(33.3% - 24px); height: 2px; background: var(--purple-line); transform-origin: left; }
.js .steps3::before { transform: scaleX(0); transition: transform 1.4s var(--ease-io) .2s; }
.steps3.is-in::before { transform: none; }
.steps3 li { position: relative; padding-right: 12px; }
.steps3__n { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--purple); color: #fff; font: 800 1.2rem/1 var(--f-display); box-shadow: 0 0 0 8px #fff; }
.steps3 strong { display: block; margin-top: 22px; font: 800 clamp(1.4rem, 2vw, 1.8rem)/1.05 var(--f-display); text-transform: uppercase; color: var(--ink); }
.steps3 p { margin-top: 10px; max-width: 36ch; color: var(--muted); }

/* ---------- Request a quote: guided three-step form ---------- */
.rfq__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 60px; align-items: end; padding: clamp(24px, 3vw, 40px) 0 clamp(28px, 3.4vw, 48px); }
.rfq__head h1 { font-size: clamp(2.6rem, 5.4vw, 5.2rem); }
.rfq__head .lede { color: var(--muted); }
.wizard { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.wizard .form-card { padding: 0; overflow: hidden; }
.wiz__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--mist); }
.wiz__steps li { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px clamp(14px, 2vw, 26px); font: 700 .95rem/1.1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wiz__steps li + li { border-left: 1px solid var(--line); }
.wiz__steps li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--purple); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.wiz__steps span { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 1.5px solid currentColor; border-radius: 50%; font-size: .9rem; }
.wiz__steps li.is-current { color: var(--ink); }
.wiz__steps li.is-current::after, .wiz__steps li.is-done::after { transform: none; }
.wiz__steps li.is-current span { border-color: var(--purple); background: var(--purple); color: #fff; }
.wiz__steps li.is-done span { border-color: var(--purple-deep); background: var(--purple-wash); color: var(--purple-deep); }
.wizard form { padding: clamp(24px, 3vw, 40px); }
.wiz__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.wiz__step + .wiz__step { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line); }
.is-wizard .wiz__step + .wiz__step { margin-top: 0; padding-top: 0; border-top: 0; }
.wiz__legend { margin-bottom: 22px; padding: 0; font: 800 clamp(1.5rem, 2.2vw, 2rem)/1 var(--f-display); text-transform: uppercase; color: var(--ink); }
.wiz__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 8px; }
.wiz__nav .btn[data-next] { margin-left: auto; }
html:not(.js) .wiz__steps, html:not(.js) [data-next], html:not(.js) [data-back] { display: none; }
.wizard__aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 12px; }
.wizard__aside .quality__points { margin-top: 0; padding: 26px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* ---------- Legal: document header + contents rail ---------- */
.dochead { padding: clamp(24px, 3vw, 40px) 0 clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.dochead h1 { font-size: clamp(2.6rem, 5.4vw, 5.2rem); }
.dochead .lede { margin-top: 18px; max-width: 60ch; color: var(--muted); }
.dochead__meta { margin-top: 14px; font-size: .92rem; color: var(--muted); }
.doc { padding-top: clamp(36px, 4vw, 60px); }
.doc .prose > section { scroll-margin-top: calc(var(--header-h) + 24px); }
.doc .prose > section + section { margin-top: clamp(34px, 3.6vw, 48px); }
.doc .prose h2 { margin-top: 0; }
.doc__end { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--line); }

/* ---------- Generic image frame (section photos on the inner pages) ---------- */
.media { overflow: hidden; border-radius: 8px; aspect-ratio: 4 / 3; background: var(--mist); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--wide { aspect-ratio: 16 / 10; }

/* ---------- Scope lists (what a service, product or industry covers) ---------- */
.scope { display: grid; gap: 10px 28px; margin-top: 20px; }
.scope--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scope li { display: flex; gap: 10px; align-items: flex-start; font-size: .99rem; line-height: 1.45; color: var(--body); }
.scope li .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--purple-deep); }
.sec--dark .scope li { color: var(--on-dark); }
.sec--dark .scope li .ic { color: var(--purple-soft); }

/* ---------- Project reference table (four columns, scrolls on small screens) ---------- */
.ref-table { min-width: 780px; }
.ref-table thead th {
  background: var(--carbon); color: #fff; text-align: left; padding: 16px 22px;
  font: 700 .9rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase;
}
.ref-table tbody tr { transition: background-color .25s ease; }
.ref-table tbody tr:hover { background: #FBF7FD; }
.ref-table tbody tr + tr td { border-top: 1px solid var(--line); }
.ref-table td { padding: 16px 22px; vertical-align: top; font-size: .97rem; color: var(--body); }
.ref-table td:first-child { width: 27%; font: 700 1rem/1.45 var(--f-body); color: var(--ink); }
.ref-table td:last-child { width: 11%; white-space: nowrap; font-weight: 600; color: var(--purple-deep); }

/* ---------- Legal prose (privacy, terms) ---------- */
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.6rem, 2.2vw, 2.1rem); margin-top: clamp(38px, 4vw, 54px); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.2rem; margin-top: 28px; }
.prose p { margin-top: 14px; color: var(--body); }
.prose ul { margin-top: 14px; display: grid; gap: 8px; }
.prose li { display: flex; gap: 12px; color: var(--body); }
.prose li::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-top: .6em; border-radius: 50%; background: var(--purple); }
.prose a { color: var(--purple-deep); text-decoration: underline; }

/* ---------- Form extras (uploads, checkbox groups, page form layout) ---------- */
.field input[type="file"] { padding: 10px 12px; background: var(--mist); font-size: .95rem; cursor: pointer; }
.field input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 14px; border: 1.5px solid var(--purple-deep); border-radius: 4px; background: #fff;
  color: var(--purple-deep); font: 700 .86rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.field input[type="file"]:hover::file-selector-button { background: var(--purple-deep); color: #fff; }
.field__hint { font-size: .86rem; color: var(--muted); }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 2px 0 18px; }
.checks .check { margin: 0; padding: 7px 0; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: clamp(24px, 2.6vw, 38px); }
.form-card h2 { font-size: clamp(1.7rem, 2.2vw, 2.2rem); }
.form-card > p { margin-top: 12px; color: var(--muted); max-width: 54ch; }
.form-card form { margin-top: 26px; }
.form-card .btn { margin-top: 6px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.split--form { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

/* ---------- Small bordered note (quote aside) ---------- */
.map { margin-top: 26px; padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.map strong { display: block; font: 700 1.05rem/1.2 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.map p { margin-top: 8px; font-size: .97rem; }
.map .link-arrow { margin-top: 16px; }

/* Current page in the header and the mobile drawer */
.nav__item.is-current > .nav__link { box-shadow: inset 0 -3px 0 var(--purple); border-radius: 0; }
.drawer nav a[aria-current="page"] { color: var(--purple-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .nav, .header__cta { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 1100px) {
  .caps__grid { grid-template-columns: repeat(2, 1fr); }
  .cap { aspect-ratio: 4 / 4.2; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__item:nth-child(3) { padding-left: 0; border-left: 0; }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { margin-top: 24px; }
  .flow__name { font-size: .98rem; }
  .track { grid-auto-columns: calc((100% - 16px) / 2); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__col:nth-child(odd) { border-left: 0; padding-left: 0; }
  .footer__col:nth-child(n+3) { border-top: 1px solid var(--line-dark); padding-top: 28px; margin-top: 4px; }
  .proof { grid-template-columns: 1fr; }
  .proof__cfd { display: none; }
}
@media (max-width: 900px) {
  .intro, .quality { grid-template-columns: 1fr; }
  .intro__media { max-width: 640px; }
  .flow__panel { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: 20px; }
  .flow__list { grid-template-columns: 1fr; gap: 8px; }
  .also__grid { grid-template-columns: 1fr; }
  .needs__bar { grid-template-columns: 1fr; }
  .why__head, .caps__head, .stories__head { flex-direction: column; align-items: flex-start; }
  .clients { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  body { font-size: 16px; }
  .brand img { height: 38px; }
  .hero, .needs, .cta { padding-left: 8px; padding-right: 8px; }
  .hero__frame { min-height: max(560px, min(calc(100dvh - 72px), 760px)); border-radius: 12px; }
  .hero h1 { font-size: clamp(2.2rem, 10.5vw, 2.9rem); }
  .hero h1 .hl { white-space: normal; }
  .hero h1 .line { overflow: visible; }
  .chips { gap: 6px; }
  .chip { min-height: 38px; padding: 0 12px; font-size: .92rem; }
  .hero__scrim { background: linear-gradient(0deg, rgba(11, 10, 14, .92) 0%, rgba(11, 10, 14, .55) 55%, rgba(11, 10, 14, .2) 100%); }
  .hero__sound { display: none; }
  /* Long button labels (for example "Enquire About Equipment & Spares") must wrap rather than overflow. */
  .btn-row .btn { flex: 1 1 100%; justify-content: center; }
  .btn { white-space: normal; text-align: center; line-height: 1.15; padding: 10px 18px; }
  .caps__grid, .trust__grid, .stats { grid-template-columns: 1fr; }
  .trust__item, .trust__item + .trust__item { padding: 22px 0 6px; border-left: 0; }
  .trust__item + .trust__item { border-top: 1px solid var(--line); }
  .stat, .stat + .stat { padding: 22px 0 0; border-left: 0; margin-top: 0; }
  .stat + .stat { border-top: 1px solid var(--line); margin-top: 22px; }
  /* Pyro stepper on phones: dots only (names stay readable to screen readers), short image strip, single-column scope */
  .flow { margin-top: 32px; }
  .flow__track { top: 19px; }
  .flow__node { padding: 0; }
  .flow__dot { width: 40px; height: 40px; }
  .flow__dot .ic { width: 18px; height: 18px; }
  .flow__node[aria-selected="true"] .flow__dot { box-shadow: 0 0 0 5px rgba(142, 37, 184, .3); }
  .flow__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .flow__panel { margin-top: 20px; padding: 10px; gap: 12px; grid-template-columns: 1fr; }
  .flow__img { aspect-ratio: 5 / 2; }
  .flow__copy { padding: 0 6px 6px; }
  .flow__copy h3 { font-size: 1.7rem; }
  .flow__lead { margin-top: 8px; font-size: .94rem; line-height: 1.5; }
  .flow__list { margin-top: 12px; grid-template-columns: 1fr; gap: 6px; }
  .flow__list li { font-size: .92rem; }
  .flow__foot { margin-top: 12px; padding-top: 12px; gap: 10px; }
  .flow__ref { font-size: .88rem; }
  .flow__ref b { display: inline; margin: 0 8px 0 0; }
  .track { grid-auto-columns: 86%; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__top .footer__col { border-left: 0; padding-left: 0; }
  .footer__col + .footer__col { border-left: 0; border-top: 1px solid var(--line-dark); padding-top: 28px; margin-top: 4px; }
  .footer__topbar { flex-wrap: wrap; align-items: flex-start; gap: 20px; }
  .field-row { grid-template-columns: 1fr; }
  .why-table { min-width: 0; }
  .why-table thead { display: none; }
  .why-table tbody, .why-table tr, .why-table td { display: block; width: 100% !important; }
  .why-table td { padding: 0 20px; }
  .why-table td:first-child { padding-top: 20px; }
  .why-table td:last-child { padding: 10px 20px 20px 82px; font-size: .97rem; }
  .why-table tbody tr + tr td { border-top: 0; }
  .why-table tbody tr + tr { border-top: 1px solid var(--line); }
  .why-strength strong { font-size: 1.25rem; }
  .intro__badge { right: 8px; }
  .doodle { display: none; }
  .ctab { bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-stagger] > *, .js .why-table tbody tr, .js .hero .lede, .js .hero .btn-row, .js .hero h1 .line > span { opacity: 1 !important; transform: none !important; }
  .js [data-reveal="img"] img { clip-path: none !important; transform: none !important; }
  .flow__track::before { animation: none; }
}

/* ---------- Responsive: shared inner-page pieces ---------- */
@media (max-width: 1100px) {
  .split, .split--form { grid-template-columns: 1fr; }
  .ref-table { min-width: 700px; }
}
@media (max-width: 640px) {
  .scope--2, .checks { grid-template-columns: 1fr; }
  .ref-table { min-width: 560px; }
  .ref-table td, .ref-table thead th { padding: 13px 16px; }
}
/* ---------- Responsive: art-directed inner pages ---------- */
@media (max-width: 1100px) {
  .org__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .org__row::before { left: 16.6%; right: 16.6%; }
  .hubs { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .edit, .apart { grid-template-columns: 1fr; }
  .apart__head { position: static; }
  .nextup { grid-template-columns: 1fr; }
  /* Org chart becomes a vertical tree */
  .org__lead { justify-content: flex-start; }
  .org__stem { margin: 0 0 0 20px; }
  .org__row { grid-template-columns: 1fr; gap: 10px; padding: 0 0 0 48px; }
  .org__row::before { top: 0; bottom: 30px; left: 20px; right: auto; width: 2px; height: auto; transform-origin: top; }
  .org__row > li::before { top: 50%; left: -28px; width: 28px; height: 2px; transform-origin: left; }
  .js .org .org__row::before { transform: scaleY(0); }
  .js .org .org__row > li::before { transform: scaleX(0); }
  .org.is-in .org__row::before, .org.is-in .org__row > li::before { transform: none; }
}
@media (max-width: 640px) {
  .ahero { padding-left: 8px; padding-right: 8px; }
  .ahero__frame { min-height: 560px; border-radius: 12px; }
  .stack__card { grid-template-columns: 1fr; min-height: 300px; border-radius: 12px; }
  .stack__ic { display: none; }
  .hubmap text { display: none; }
  .nextup { padding: 0 8px 8px; }
  .nextup__panel { border-radius: 12px; }
}
@media (max-width: 1100px) {
  .shero__card { grid-template-columns: 1fr; }
  .shero__media { min-height: 0; aspect-ratio: 16 / 9; order: -1; }
  .svc { grid-template-columns: 1fr; }
  .svc__media { display: none; }
}
@media (max-width: 900px) {
  .hpath__head { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .shero, .strip { padding-left: 8px; padding-right: 8px; }
  .shero__card, .strip__band { border-radius: 12px; }
  .svc__btn { grid-template-columns: 36px minmax(0, 1fr) 30px; gap: 12px; }
  .svc__plus { width: 30px; height: 30px; }
  .svc__btn .trust__icon { width: 36px; height: 36px; }
  .svc__content { padding-left: 0; }
}
@media (max-width: 1100px) {
  .cat__row { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .cat__thumb { width: 96px; }
  .cat__tags { grid-column: 2; }
  .cat__row .btn { grid-column: 3; grid-row: 1; }
}
@media (max-width: 900px) {
  .schem__head { grid-template-columns: 1fr; }
  .hot__label { display: none; }
  .schem__legend { display: flex; flex-wrap: wrap; gap: 6px; }
  .schem__legend a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 4px; font-size: .88rem; font-weight: 600; color: #fff; }
  .dropcta__box { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .schem, .dropcta { padding-left: 8px; padding-right: 8px; }
  .schem__frame, .dropcta__box { border-radius: 12px; }
  .hot__dot { width: 18px; height: 18px; }
  .cat__row { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .cat__thumb { width: 72px; }
  .cat__tags, .cat__row .btn { grid-column: 1 / -1; grid-row: auto; }
  .cat__row .btn { justify-self: start; }
}
@media (max-width: 1100px) {
  .index5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .index5__col:nth-child(4) { padding-left: 0; border-left: 0; }
  .annot { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .route::before, .route::after { display: none; }
  .journey__rail { left: 10px; transform: none; }
  .journey__step { grid-template-columns: 1fr; gap: 20px; padding-left: 44px; }
  .journey__step::before { top: 0; left: 11px; transform: translate(-50%, 0); }
  .journey__step:nth-child(odd) .journey__media { order: 0; }
  .log__row { grid-template-columns: 1fr auto; }
  .log__detail { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .mhero { padding-left: 8px; padding-right: 8px; }
  .mhero__frame { min-height: 620px; border-radius: 12px; }
  .index5 { grid-template-columns: 1fr; }
  .index5__col + .index5__col, .index5__col:nth-child(4) { padding-left: 0; border-left: 0; }
  .schem__pan { overflow-x: auto; margin: 0 -8px; padding: 0 8px; scrollbar-width: none; }
  .schem__pan::-webkit-scrollbar { display: none; }
  .schem__pan .schem__fig { min-width: 760px; }
  .schem__svg text { font-size: 15px; }
  .schem__swipe { display: inline; }
}
@media (max-width: 1100px) {
  .chero__frame { grid-template-columns: 1fr; }
  .readout { justify-self: start; }
  .proofx, .scan { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .spy { grid-template-columns: 1fr; }
  .spy__nav { position: sticky; top: var(--header-h); display: flex; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); border-left: 0; border-bottom: 1px solid var(--line); background: #fff; scrollbar-width: none; }
  .spy__nav::-webkit-scrollbar { display: none; }
  .spy__nav a { flex-shrink: 0; margin: 0; padding: 14px 14px 12px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; font-size: .92rem; }
  .spy__nav a.is-active { border-bottom-color: var(--purple); }
  .spy__item:first-child { padding-top: 12px; }
  .spec > div { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .chero { padding-left: 8px; padding-right: 8px; }
  .chero__frame { border-radius: 12px; }
  .spy__media { aspect-ratio: 16 / 9; }
  .dumb__plot { margin: 26px 8px 0; }
  .bigcta__go { display: none; }
}
@media (max-width: 1100px) {
  .overlap__media { grid-column: 1 / 13; }
  .overlap__card { grid-column: 2 / 12; grid-row: 2; margin-top: -80px; }
}
@media (max-width: 900px) {
  .sectors { grid-template-columns: 1fr; }
  .sector__more { grid-template-rows: 1fr; }
}
@media (max-width: 640px) {
  .ihero { padding-left: 8px; padding-right: 8px; }
  .ihero__frame { min-height: 640px; border-radius: 12px; }
  .overlap__card { grid-column: 1 / 13; margin-top: -40px; }
  .sector { min-height: 520px; }
}
@media (max-width: 900px) {
  .nextrow { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .statx { padding-left: 8px; padding-right: 8px; }
  .statx__frame { border-radius: 12px; }
  .statx__row { grid-template-columns: 1fr; }
  .statx__row > div, .statx__row > div + div { padding: 20px 0 0; border-left: 0; }
  .statx__row > div + div { margin-top: 20px; border-top: 1px solid var(--line-dark); }
}
@media (max-width: 1100px) {
  .qhero__grid { grid-template-columns: 1fr; }
  .qhero__media { aspect-ratio: 16 / 9; }
  .mosaic__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto 280px; }
  .mosaic__text { grid-column: 1 / -1; grid-row: 1; }
  .mosaic__img--tall { grid-row: 2; }
}
@media (max-width: 900px) {
  .sheet__head { grid-template-columns: 1fr; }
  .sheet__row { grid-template-columns: 40px minmax(0, 1fr); }
  .sheet__row p, .sheet__row a { grid-column: 2; }
  .zero__cols { grid-template-columns: 1fr; }
  .reasons li { grid-template-columns: 1fr; }
  .roles li { grid-template-columns: 1fr auto; }
  .roles__tags { grid-column: 1; grid-row: 2; }
}
@media (max-width: 640px) {
  .qhero, .mosaic { padding-left: 8px; padding-right: 8px; }
  .qhero__media, .mosaic__text, .mosaic__img { border-radius: 12px; }
  .mosaic__grid { grid-template-rows: auto 200px; }
}
@media (max-width: 1100px) {
  .cscreen__grid, .wizard { grid-template-columns: 1fr; }
  .wizard__aside { position: static; }
  .rfq__head { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .steps3 { grid-template-columns: 1fr; gap: 28px; padding-left: 64px; }
  .steps3::before { top: 24px; bottom: 24px; left: 23px; right: auto; width: 2px; height: auto; transform-origin: top; }
  .js .steps3::before { transform: scaleY(0); }
  .steps3.is-in::before { transform: none; }
  .steps3 li { padding-right: 0; }
  .steps3__n { position: absolute; top: 0; left: -64px; box-shadow: 0 0 0 6px #fff; }
  .steps3 strong { margin-top: 10px; }
  .chubs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cscreen { padding-left: 8px; padding-right: 8px; }
  .cscreen__info, .cscreen__form { border-radius: 12px; }
  .wiz__steps li { flex-direction: column; align-items: flex-start; gap: 6px; font-size: .78rem; padding: 12px 10px; }
}

/* ---------- Page hero: one pattern for every inner page ---------- */
.phero { padding: 12px 12px 0; }
.phero__frame {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end;
  min-height: clamp(380px, 44vw, 520px); border-radius: 16px; color: #fff; background: var(--void);
}
.phero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.phero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 10, 14, .88) 0%, rgba(11, 10, 14, .64) 42%, rgba(11, 10, 14, .12) 78%),
    linear-gradient(0deg, rgba(11, 10, 14, .72) 0%, rgba(11, 10, 14, 0) 50%);
}
.phero__inner { width: 100%; padding: clamp(28px, 5vw, 72px); padding-bottom: clamp(32px, 5vw, 64px); }
.phero h1 { color: #fff; font-size: clamp(2.3rem, 4.6vw, 4.4rem); max-width: 19ch; text-wrap: balance; }
.phero .hl { color: #fff; }
.phero .lede { margin-top: clamp(16px, 2vw, 24px); max-width: 58ch; color: #E6E0EB; font-size: 16px; line-height: 1.6; }
.phero .btn-row { margin-top: clamp(22px, 2.6vw, 32px); }
.phero__meta { margin-top: 12px; font-size: .9rem; color: var(--on-dark-muted); }

/* ---------- Icon cards: values, reasons, strengths ---------- */
.igrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: clamp(28px, 3.4vw, 44px); }
.icard { padding: clamp(22px, 2.2vw, 30px); border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.icard .trust__icon { background: var(--purple-wash); }
.icard h3 { margin-top: 18px; font-size: clamp(1.3rem, 1.6vw, 1.5rem); line-height: 1.05; }
.icard p { margin-top: 10px; color: var(--muted); font-size: .98rem; line-height: 1.55; }
.igrid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .igrid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .igrid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .igrid--5 { grid-template-columns: 1fr; } }
.sec-head { max-width: 62ch; }
.sec-head .copy { margin-top: 18px; }

/* ---------- About: mission statement ---------- */
.mission { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.mission__text { font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.5; font-weight: 500; color: var(--ink); max-width: 46ch; }

/* ---------- Offices (About, Contact) ---------- */
.offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: clamp(28px, 3.4vw, 44px); }
.office-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.office-card__map { aspect-ratio: 16 / 10; background: var(--mist); }
.office-card__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.office-card__body { padding: 22px 24px 24px; }
.office-card__label { font: 700 .8rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--purple-deep); }
.office-card h3 { margin-top: 10px; font-size: clamp(1.3rem, 1.6vw, 1.5rem); line-height: 1.05; }
.office-card p { margin-top: 10px; color: var(--muted); font-size: .98rem; }

/* ---------- Careers: role list, centred form ---------- */
.roles__desc { font-size: .98rem; line-height: 1.5; color: var(--muted); }
.formwrap { max-width: 860px; margin: 0 auto; }

/* ---------- Projects and products: simple card grid ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 3.4vw, 44px); }
.cards3 .story { scroll-margin-top: calc(var(--header-h) + 24px); }
.pcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; scroll-margin-top: calc(var(--header-h) + 24px); }
.pcard__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.pcard h4 { font: 800 clamp(1.3rem, 1.6vw, 1.5rem)/1.05 var(--f-display); text-transform: uppercase; color: var(--ink); }
.pcard__body > p { margin-top: 10px; color: var(--muted); font-size: .97rem; }
.pcard__apps { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--body); }
.pcard__apps b { display: block; margin-bottom: 4px; font: 700 .78rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--purple-deep); }
.pcard .link-arrow { margin-top: auto; padding-top: 20px; }
.cat__group .cards3 { margin-top: 20px; }
.ref-filter button { min-height: 36px; padding: 0 14px; font-size: .9rem; }
@media (min-width: 1101px) { .stats--3 { grid-template-columns: repeat(3, 1fr); } }

.cscreen__info { align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
.cscreen__info h2 { color: #fff; font-size: clamp(1.8rem, 2.6vw, 2.4rem); }

/* ---------- Request a quote: aside heading, scope label ---------- */
.wizard__aside .h-card { margin-bottom: 4px; }
.field__label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.field__label i { color: var(--purple-btn); font-style: normal; }
.field .check { align-items: center; }
.field .check input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; flex-shrink: 0; }

@media (max-width: 1100px) {
  .cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mission { grid-template-columns: 1fr; }
  .roles__desc { grid-column: 1; grid-row: 2; }
}
@media (max-width: 640px) {
  .phero { padding-left: 8px; padding-right: 8px; }
  .phero__frame { min-height: 360px; border-radius: 12px; }
  .phero__scrim { background: linear-gradient(0deg, rgba(11, 10, 14, .92) 0%, rgba(11, 10, 14, .6) 55%, rgba(11, 10, 14, .25) 100%); }
  .cards3 { grid-template-columns: 1fr; }
  .roles li { grid-template-columns: 1fr; }
  .roles li .btn { justify-self: start; }
}

/* ==========================================================================
   Client feedback, round 3 (September 2026)
   ========================================================================== */

/* ---------- Page label above every inner-page H1 ---------- */
.phero__label {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: clamp(14px, 1.6vw, 20px);
  padding: 8px 14px 8px 12px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 4px;
  background: rgba(11, 10, 14, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 700 .82rem/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
.phero__label::before { content: ""; width: 8px; height: 8px; border-radius: 1px; background: var(--purple-lift); box-shadow: 0 0 0 4px rgba(142, 37, 184, .3); }

/* ---------- Shared closing CTA band: one image and one layout on every page ---------- */
.cta--page .cta__frame { padding: clamp(64px, 8vw, 120px) 0; }
.cta--page h2 { max-width: 18ch; font-size: clamp(2.4rem, 4.8vw, 4.6rem); }

/* ---------- About: company overview facts ---------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); }
.facts li { padding: clamp(22px, 2.4vw, 32px) clamp(16px, 2vw, 28px) 0 0; }
.facts li + li { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); }
.facts b { display: block; font: 800 clamp(2.6rem, 4.4vw, 4rem)/.9 var(--f-display); color: var(--purple-btn); text-transform: uppercase; }
.facts li > span { display: block; margin-top: 12px; max-width: 30ch; color: var(--muted); font-size: .98rem; line-height: 1.5; }

/* ---------- About: mission band, word by word ---------- */
.mband { padding: 0 12px; }
.mband__frame {
  position: relative; overflow: hidden; border-radius: 16px; color: #fff; padding: clamp(64px, 9vw, 140px) 0;
  background: radial-gradient(ellipse 55% 70% at 88% 0%, rgba(142, 37, 184, .42), transparent 70%), radial-gradient(ellipse 40% 60% at 0% 100%, rgba(142, 37, 184, .22), transparent 70%), var(--void);
}
.mband__frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.mband .wrap { position: relative; }
.mband__label { display: flex; align-items: center; gap: 14px; font: 700 clamp(1rem, 1.3vw, 1.2rem)/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--purple-soft); }
.mband__label::after { content: ""; flex: 0 0 clamp(60px, 10vw, 140px); height: 2px; background: linear-gradient(90deg, var(--purple-lift), transparent); }
.mband__quote { position: absolute; right: var(--gutter); top: -.12em; font: 800 clamp(10rem, 22vw, 20rem)/1 var(--f-display); color: rgba(142, 37, 184, .22); pointer-events: none; }
.mband .manifesto__text { margin-top: clamp(22px, 3vw, 36px); max-width: 24ch; font-size: clamp(2.2rem, 5.2vw, 5.2rem); color: #fff; }
.mband .manifesto__text .w { color: rgba(255, 255, 255, .16); }
.mband .manifesto__text .w.on { color: #fff; }
.mband .manifesto__text .w.on.k { color: var(--purple-soft); }

/* ---------- About: values as the three letters E, T, R ---------- */
.vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(32px, 4vw, 56px); border-top: 2px solid var(--ink); }
.vals li { position: relative; padding: clamp(24px, 3vw, 40px) clamp(18px, 2.6vw, 40px) clamp(8px, 1vw, 12px) 0; }
.vals li + li { padding-left: clamp(18px, 2.6vw, 40px); border-left: 1px solid var(--line); }
.vals__letter {
  display: block; font: 800 clamp(7rem, 13vw, 12rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 2px var(--purple);
  background: linear-gradient(0deg, var(--purple) 0 50%, transparent 50%) 0 100% / 100% 200% no-repeat; -webkit-background-clip: text; background-clip: text;
  transition: background-position 1.1s var(--ease), -webkit-text-stroke-color .4s ease;
}
.js .vals li .vals__letter { background-position: 0 0; }
.js .vals.is-in li .vals__letter, .vals li:hover .vals__letter { background-position: 0 100%; }
.js .vals.is-in li:nth-child(2) .vals__letter { transition-delay: .15s; }
.js .vals.is-in li:nth-child(3) .vals__letter { transition-delay: .3s; }
.vals h3 { margin-top: clamp(20px, 2.4vw, 30px); font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
.vals p { margin-top: 10px; max-width: 34ch; color: var(--muted); }

/* ---------- About: what sets ETR apart, numbered editorial list ---------- */
.edge { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.edge__head { position: sticky; top: calc(var(--header-h) + 40px); }
.edge__head .copy { margin-top: 22px; }
.edge__list { counter-reset: edge; }
.edge__list li {
  counter-increment: edge; position: relative; display: grid; grid-template-columns: clamp(64px, 7vw, 104px) minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px clamp(16px, 2.4vw, 36px);
  align-items: baseline; padding: clamp(22px, 2.6vw, 34px) clamp(8px, 1vw, 16px); border-top: 1px solid var(--line); isolation: isolate;
}
.edge__list li:last-child { border-bottom: 1px solid var(--line); }
.edge__list li::before { content: "0" counter(edge); font: 800 clamp(2.2rem, 3.4vw, 3.2rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px var(--purple); transition: color .35s ease; }
.edge__list li::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; border-radius: 8px; transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); }
.edge__list li:hover::after { transform: none; }
.edge__list li:hover::before { color: var(--purple); }
.edge__list h3 { font-size: clamp(1.45rem, 2vw, 1.9rem); line-height: 1; }
.edge__list p { color: var(--muted); font-size: 1rem; }

/* ---------- About: team split ---------- */
.teamx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.teamx .copy { margin-top: 22px; }
.teamx__list { margin-top: 26px; border-top: 1px solid var(--line); }
.teamx__list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.teamx__list li span:first-child { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: var(--purple-wash); color: var(--purple-deep); }
.teamx__list .ic { width: 20px; height: 20px; }
.teamx__list small { display: block; font-weight: 400; font-size: .92rem; color: var(--muted); }
.teamx__media { position: relative; }
.teamx__media .media { aspect-ratio: 4 / 3.4; }
.teamx__media .media img { width: 100%; height: 100%; object-fit: cover; }
.teamx__media::before { content: ""; position: absolute; left: -14px; bottom: -14px; width: 42%; height: 42%; border-radius: 8px; background: var(--purple); z-index: -1; }
.teamx__media { isolation: isolate; }

/* ---------- About: where we operate, dot map ---------- */
.geo { background: radial-gradient(ellipse 50% 60% at 15% 0%, rgba(142, 37, 184, .28), transparent 70%), var(--carbon); color: var(--on-dark); overflow: hidden; }
.geo .h-sec { color: #fff; }
.geo__lede { margin-top: 18px; color: var(--on-dark-muted); max-width: 52ch; font-size: 1.06rem; }
.geo__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(28px, 4vw, 56px); }
.geo__map { position: relative; }
.geo__map svg { width: 100%; height: auto; overflow: visible; }
.geo__dots { fill: none; stroke: rgba(217, 166, 238, .46); stroke-width: 4.2; stroke-linecap: round; }
.geo__route { fill: none; stroke: var(--purple-soft); stroke-width: 2.5; stroke-linecap: round; }
.geo__reach { fill: none; stroke: rgba(255, 255, 255, .38); stroke-width: 1.5; stroke-dasharray: 3 7; }
.geo__pin { fill: var(--purple-lift); stroke: #fff; stroke-width: 2.5; }
.geo__ring { fill: none; stroke: var(--purple-soft); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.geo__label { font: 700 15px/1 var(--f-display); letter-spacing: .08em; fill: #fff; }
.geo__sub { font: 600 11px/1 var(--f-display); letter-spacing: .16em; fill: var(--purple-soft); }
.geo__packet { fill: #fff; }
.js .geo.is-in .geo__dots { animation: geoDots 2.2s var(--ease) forwards; }
@property --geo-r { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
@keyframes geoDots { from { --geo-r: 0%; } to { --geo-r: 140%; } }
.js .geo__dots { -webkit-mask-image: radial-gradient(circle at 37% 39%, #000 var(--geo-r), transparent calc(var(--geo-r) + 12%)); mask-image: radial-gradient(circle at 37% 39%, #000 var(--geo-r), transparent calc(var(--geo-r) + 12%)); }
.js .geo__route { stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.8s var(--ease-io) .9s; }
.js .geo.is-in .geo__route { stroke-dashoffset: 0; }
.js .geo__reach { opacity: 0; transition: opacity 1s ease 2s; }
.js .geo.is-in .geo__reach { opacity: 1; }
.js .geo__hub { opacity: 0; transform: translateY(-14px); transform-box: fill-box; transition: opacity .6s ease, transform .8s var(--ease); }
.js .geo.is-in .geo__hub { opacity: 1; transform: none; }
.js .geo.is-in .geo__hub--in { transition-delay: 1.9s; }
.js .geo.is-in .geo__hub--ae { transition-delay: .6s; }
.geo.is-in .geo__ring { animation: geoPulse 2.6s var(--ease) infinite 2.4s; }
.geo.is-in .geo__hub--in .geo__ring { animation-delay: 3.3s; }
@keyframes geoPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.geo__packet { opacity: 0; }
.geo.is-in .geo__packet { opacity: 1; transition: opacity .4s ease 2.8s; }
.geo__offices { display: grid; gap: 14px; }
.geo__office { padding: 22px 24px; border: 1px solid var(--line-dark); border-radius: 8px; background: rgba(255, 255, 255, .03); transition: border-color .3s ease, background-color .3s ease; }
.geo__office:hover { border-color: rgba(217, 166, 238, .5); background: rgba(142, 37, 184, .1); }
.geo__office .office-card__label { color: var(--purple-soft); display: flex; align-items: center; gap: 10px; }
.geo__office .office-card__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--purple-lift); box-shadow: 0 0 0 4px rgba(166, 63, 208, .25); }
.geo__office h3 { margin-top: 12px; color: #fff; font-size: clamp(1.4rem, 1.8vw, 1.7rem); }
.geo__office p { margin-top: 8px; color: var(--on-dark-muted); font-size: .96rem; line-height: 1.55; }
.geo__office p b { color: #fff; font-weight: 600; }

/* ---------- Services: eight service cards in the execution-path style ---------- */
.svcgrid-sec { background: radial-gradient(ellipse 50% 40% at 90% 0%, rgba(142, 37, 184, .26), transparent 70%), var(--carbon); color: var(--on-dark); }
.svcgrid-sec .hpath__head { padding: 0; }
.svcgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.scard {
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-dark); border-radius: 8px; background: var(--carbon-2);
  scroll-margin-top: calc(var(--header-h) + 24px); transition: border-color .35s ease, transform .5s var(--ease), box-shadow .5s var(--ease);
}
.scard:hover { border-color: rgba(217, 166, 238, .45); transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }
.scard__img { position: relative; aspect-ratio: 16 / 7.5; overflow: hidden; }
.scard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.scard:hover .scard__img img { transform: scale(1.06); }
.scard__img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--purple), var(--purple-soft)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.scard:hover .scard__img::after { transform: none; }
.scard__body { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.4vw, 34px); }
.scard__top { display: flex; align-items: flex-end; gap: 18px; }
.scard__n { font: 800 clamp(3rem, 4.2vw, 4rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px var(--purple-soft); transition: color .35s ease; }
.scard:hover .scard__n { color: var(--purple-soft); }
.scard h3 { color: #fff; font-size: clamp(1.6rem, 2.1vw, 2rem); line-height: 1; }
.scard__body > p { margin-top: 16px; color: #D3CCDA; font-size: .98rem; line-height: 1.6; }
.scard__scope { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.scard__scope li { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; font-size: .86rem; font-weight: 600; color: #fff; line-height: 1.3; }
.scard .link-arrow { margin-top: auto; padding-top: 24px; color: var(--purple-soft); }

/* ---------- Products: sticky group tabs that follow the scroll ---------- */
.ptabs { position: sticky; top: var(--header-h); z-index: 20; margin-top: clamp(24px, 3vw, 40px); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ptabs__inner { display: flex; align-items: center; gap: 16px; }
.ptabs nav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 10px 0; }
.ptabs nav::-webkit-scrollbar { display: none; }
.ptabs nav a {
  position: relative; display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; min-height: 42px; padding: 0 12px; border-radius: 4px;
  font: 700 .92rem/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); transition: background-color .3s ease, color .3s ease;
}
.ptabs nav a small { font: 700 .72rem/1 var(--f-display); letter-spacing: .06em; padding: 3px 6px; border-radius: 3px; background: var(--mist); color: var(--muted); transition: background-color .3s ease, color .3s ease; }
.ptabs nav a:hover { color: var(--ink); background: var(--mist); }
.ptabs nav a.is-active { background: var(--purple-btn); color: #fff; }
.ptabs nav a.is-active small { background: rgba(255, 255, 255, .22); color: #fff; }
.ptabs .btn { flex-shrink: 0; }
.pgroup { padding-top: clamp(40px, 5vw, 64px); scroll-margin-top: calc(var(--header-h) + 64px); }
.pgroup__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 22px; align-items: end; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.pgroup__n { grid-row: span 2; font: 800 clamp(3rem, 5vw, 4.6rem)/.8 var(--f-display); color: var(--purple-btn); }
.pgroup__head h3 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.pgroup__head p { max-width: 80ch; color: var(--muted); font-size: 1rem; }
.pgroup .cards3, .pgroup .cards2 { margin-top: 22px; }
.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.pcard { position: relative; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s ease; }
.pcard:hover { transform: translateY(-6px); border-color: var(--purple-line); box-shadow: 0 26px 50px rgba(22, 19, 26, .1); }
.pcard__img { position: relative; }
.pcard__img img { transition: transform 1.1s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.07); }
.pcard__img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--purple); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.pcard:hover .pcard__img::after { transform: none; }
.pcard__tag { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 6px 10px; border-radius: 4px; background: rgba(11, 10, 14, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font: 700 .78rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.pcard h4 { transition: color .3s ease; }
.pcard:hover h4 { color: var(--purple-deep); }
.pcard__apps { border-top: 0; padding-top: 0; margin-top: 18px; }
.pcard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pcard__chips li { padding: 5px 10px; border-radius: 4px; background: var(--mist); font-size: .84rem; line-height: 1.35; color: var(--body); transition: background-color .3s ease; }
.pcard:hover .pcard__chips li { background: var(--purple-wash); }
.pcard--wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pcard--wide .pcard__img { aspect-ratio: auto; min-height: 320px; }
.pcard--wide .pcard__body { padding: clamp(24px, 3vw, 44px); justify-content: center; }
.pcard--wide h4 { font-size: clamp(1.6rem, 2.2vw, 2.1rem); }

/* ---------- Manufacturing: supply catalogue columns ---------- */
.catalog { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 3.4vw, 44px); }
.catalog__col { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.catalog__col:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(22, 19, 26, .09); }
.catalog__col header { position: relative; padding: 20px 20px 18px; background: var(--carbon); color: #fff; }
.catalog__col header .ic { width: 28px; height: 28px; color: var(--purple-soft); }
.catalog__col h3 { margin-top: 16px; color: #fff; font-size: clamp(1.25rem, 1.5vw, 1.45rem); line-height: 1; }
.catalog__col header small { display: block; margin-top: 8px; font: 700 .76rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.catalog__col ul { padding: 8px 20px 16px; }
.catalog__col li { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .96rem; line-height: 1.4; color: var(--ink); }
.catalog__col li:last-child { border-bottom: 0; }
.catalog__col li::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 1px; background: var(--purple); transform: translateY(-1px); }

/* ---------- Scroll-driven 3D wireframe morph (manufacturing, engineering) ---------- */
.morph__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(28px, 4vw, 56px); }
.morph__stage {
  position: sticky; top: calc(var(--header-h) + 4vh); align-self: start; height: min(76vh, 600px); border: 1px solid var(--line-dark); border-radius: 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(142, 37, 184, .2), transparent 62%), #0E0C12;
}
.morph__stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 32px 32px;
}
.morph__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.morph__hud { position: absolute; left: 18px; right: 18px; top: 16px; display: flex; justify-content: space-between; gap: 12px; font: 700 .8rem/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); pointer-events: none; }
.morph__hud b { color: #fff; font-weight: 700; }
.morph__pips { position: absolute; left: 18px; bottom: 18px; display: flex; gap: 6px; }
.morph__pips span { width: 26px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); transition: background-color .4s ease, width .4s var(--ease); }
.morph__pips span.is-on { width: 44px; background: var(--purple-soft); }
.morph__steps { display: grid; }
.morph__step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; opacity: .32; transition: opacity .5s ease; }
.morph__step.is-on { opacity: 1; }
.morph__n { font: 800 clamp(3rem, 5vw, 4.6rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px var(--purple-soft); }
.morph__step.is-on .morph__n { color: var(--purple-soft); }
.morph__step h3 { margin-top: 18px; color: #fff; font-size: clamp(1.9rem, 3vw, 2.8rem); }
.morph__step p { margin-top: 14px; max-width: 46ch; color: #D3CCDA; font-size: 1.04rem; line-height: 1.6; }
.morph__step:first-child { min-height: 50vh; justify-content: flex-start; padding-top: 8vh; }
.morph__step:last-child { min-height: 70vh; }
.no-canvas .morph__stage { display: none; }

/* ---------- Engineering: standards and tools bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 3.4vw, 44px); }
.bento__tile { position: relative; overflow: hidden; display: flex; flex-direction: column; grid-column: span 2; padding: clamp(22px, 2.6vw, 34px); border: 1px solid var(--line); border-radius: 8px; background: #fff; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.bento__tile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(22, 19, 26, .1); }
.bento__tile--wide { grid-column: span 3; min-height: 300px; }
.bento__tile--dark { background: var(--carbon); border-color: var(--carbon); color: var(--on-dark); }
.bento__tile--purple { background: linear-gradient(135deg, var(--purple-deep), var(--purple)); border-color: var(--purple); color: #fff; }
.bento__k { display: flex; align-items: center; gap: 10px; font: 700 .8rem/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--purple-deep); }
.bento__tile--dark .bento__k { color: var(--purple-soft); }
.bento__tile--purple .bento__k { color: #F1DDF9; }
.bento__tile .trust__icon { background: var(--purple-wash); margin-bottom: 22px; }
.bento__v { margin-top: 14px; font-size: 1.06rem; line-height: 1.55; color: var(--ink); }
.bento__tile--dark .bento__v, .bento__tile--purple .bento__v { color: inherit; opacity: .88; }
.bento__big { margin-top: auto; padding-top: 24px; display: grid; gap: 2px; }
.bento__big span { font: 800 clamp(2.4rem, 4vw, 3.8rem)/.92 var(--f-display); text-transform: uppercase; }
.bento__tile--dark .bento__big span:nth-child(2) { color: var(--purple-soft); }
.bento__tile--dark .bento__big span:nth-child(3) { color: transparent; -webkit-text-stroke: 1.5px var(--purple-soft); }
.bento__tile--purple .bento__big span + span { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.bento__tile--wide .bento__v { max-width: 44ch; }
.bento__tile--dark::after, .bento__tile--purple::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 0 0 30px rgba(255, 255, 255, .03), 0 0 0 60px rgba(255, 255, 255, .02); pointer-events: none; }

/* ---------- Industries: five industries, equal weight ---------- */
.inds__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.inds__nav a { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font: 700 .95rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.inds__nav a span { color: var(--purple-btn); transition: color .25s ease; }
.inds__nav a:hover { background: var(--purple-btn); border-color: var(--purple-btn); color: #fff; }
.inds__nav a:hover span { color: #fff; }
.inds { margin-top: clamp(32px, 4vw, 56px); display: grid; gap: clamp(18px, 2vw, 24px); }
.ind { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; scroll-margin-top: calc(var(--header-h) + 24px); transition: box-shadow .5s var(--ease), border-color .35s ease; }
.ind:hover { border-color: var(--purple-line); box-shadow: 0 26px 50px rgba(22, 19, 26, .08); }
.ind:nth-child(even) .ind__media { order: 2; }
.ind__media { position: relative; min-height: 360px; overflow: hidden; }
.ind__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ind:hover .ind__media img { transform: scale(1.05); }
.ind__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 3.4vw, 52px); }
.ind__n { font: 800 clamp(2.6rem, 3.6vw, 3.4rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px var(--purple); transition: color .35s ease; }
.ind:hover .ind__n { color: var(--purple); }
.ind h3 { margin-top: 16px; font-size: clamp(2rem, 3.2vw, 3rem); }
.ind__body > p { margin-top: 12px; max-width: 56ch; color: var(--body); font-size: 1.04rem; }
.ind .scope { margin-top: 20px; }
.ind .btn-row { margin-top: 26px; }

@media (max-width: 1100px) {
  .catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .edge__list li { grid-template-columns: clamp(56px, 7vw, 90px) minmax(0, 1fr); }
  .edge__list li p { grid-column: 2; }
  .bento__tile, .bento__tile--wide { grid-column: span 3; }
  .bento__tile:last-child { grid-column: span 6; }
}
@media (max-width: 900px) {
  .facts { grid-template-columns: 1fr; }
  .facts li + li { padding-left: 0; border-left: 0; }
  .facts li { padding: 20px 0; border-bottom: 1px solid var(--line); }
  .vals { grid-template-columns: 1fr; }
  .vals li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .vals li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 24px; align-items: center; padding: 24px 0; }
  .vals__letter { grid-row: span 2; font-size: clamp(5.6rem, 22vw, 8rem); }
  .vals h3 { margin-top: 0; }
  .edge, .teamx, .geo__grid, .morph__grid { grid-template-columns: 1fr; }
  .edge__head { position: static; }
  .svcgrid { grid-template-columns: 1fr; }
  .cards2 { grid-template-columns: 1fr; }
  .pcard--wide { grid-template-columns: 1fr; }
  .pcard--wide .pcard__img { aspect-ratio: 16 / 10; min-height: 0; }
  .ind { grid-template-columns: 1fr; }
  .ind:nth-child(even) .ind__media { order: 0; }
  .ind__media { min-height: 0; aspect-ratio: 16 / 10; }
  .morph__stage { top: calc(var(--header-h) + 8px); height: 44vh; z-index: 2; }
  .morph__step, .morph__step:first-child, .morph__step:last-child { min-height: 58vh; justify-content: flex-start; padding-top: 32px; }
  .ptabs .btn { display: none; }
}
@media (max-width: 640px) {
  .mband, .cta--page { padding-left: 8px; padding-right: 8px; }
  .mband__frame { border-radius: 12px; }
  .catalog { grid-template-columns: 1fr; }
  .bento__tile, .bento__tile--wide, .bento__tile:last-child { grid-column: 1 / -1; }
  .teamx__media::before { display: none; }
  .scard__img { aspect-ratio: 16 / 9; }
  .geo__label { font-size: 20px; }
  .geo__sub { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .geo__dots { -webkit-mask-image: none; mask-image: none; animation: none; }
  .js .geo__route { stroke-dashoffset: 0; transition: none; }
  .js .geo__reach, .js .geo__hub { opacity: 1; transform: none; transition: none; }
  .geo__packet { display: none; }
  .geo__ring { animation: none !important; }
  .js .vals li .vals__letter { background-position: 0 100%; transition: none; }
  .morph__step { opacity: 1; }
  .scard, .pcard, .ind, .catalog__col, .bento__tile { transition: none; }
}

.js [data-stagger].is-in > *:nth-child(7) { transition-delay: .48s; }
.js [data-stagger].is-in > *:nth-child(8) { transition-delay: .56s; }
.svgrid-sec .hl, .svcgrid-sec .hl, .geo .hl, .morph .hl { color: #fff; }
.cards1 { margin-top: 22px; }
.log--light { border-top-color: var(--line); }
.log--light .log__row { border-bottom-color: var(--line); padding-left: 12px; padding-right: 12px; border-radius: 4px; transition: background-color .3s ease; }
.log--light .log__row:hover { background: var(--mist); }
.log--light .log__item { color: var(--ink); }
.log--light .log__detail { color: var(--muted); }
.log--light .log__stamp { color: var(--purple-deep); border-color: var(--purple); }
.cards2 .pcard__img { aspect-ratio: 16 / 8; }
@media (min-width: 901px) and (max-width: 1240px) { .ptabs nav a small { display: none; } }

/* Round 3 follow-up: alignment fixes, card CTA */
.edge__list li { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
.edge__list li::before { line-height: 1; align-self: center; }
.pgroup__head { display: flex; align-items: center; gap: 18px; }
.pgroup__n { line-height: 1; }
.pgroup__head h3 { line-height: 1; }
.pcard__cta { margin-top: auto; padding-top: 22px; }
.pcard__apps + .pcard__cta { margin-top: auto; }
.pcard--wide .pcard__cta { margin-top: 24px; }
.spy__media + .scope { margin-top: 22px; }
@media (max-width: 1100px) { .edge__list li { grid-template-columns: 60px minmax(0, 1fr); } }

/* ==========================================================================
   Client feedback, round 4
   ========================================================================== */

/* ---------- Nav: caret sits on the text's optical centre ---------- */
.nav__link .ic { width: 13px; height: 13px; }

/* ---------- Secondary line under a document heading ---------- */
.h-sub { margin-top: 14px; font: 700 clamp(1.25rem, 1.8vw, 1.6rem)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
.sec--dark .h-sub, .gates-sec .h-sub { color: var(--on-dark-muted); }

/* ---------- Closing CTA band: gradient box, text left, pill button right ---------- */
.cband { padding: clamp(40px, 5vw, 72px) 0; background: var(--paper); }
.cband__box {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 24px 48px;
  padding: clamp(32px, 4vw, 56px) clamp(26px, 5vw, 64px); border-radius: 16px; color: #fff;
  background: linear-gradient(115deg, #5A1478 0%, var(--purple) 48%, #A94BD6 100%);
  box-shadow: 0 24px 60px rgba(109, 26, 142, .22);
}
.cband__box::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 45% 90% at 85% 50%, rgba(255, 255, 255, .16), transparent 70%), radial-gradient(ellipse 30% 70% at 5% 0%, rgba(255, 255, 255, .1), transparent 70%); }
.cband__box::after { content: ""; position: absolute; right: -80px; top: 50%; z-index: -1; width: 320px; height: 320px; margin-top: -160px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 0 0 40px rgba(255, 255, 255, .04), 0 0 0 80px rgba(255, 255, 255, .03); }
.cband__text { max-width: 60ch; }
.cband h2 { color: #fff; font: 700 clamp(1.6rem, 2.6vw, 2.3rem)/1.15 var(--f-body); text-transform: none; letter-spacing: -.01em; }
.cband p { margin-top: 10px; color: rgba(255, 255, 255, .86); font-size: 1.02rem; }
.cband__btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; background: #fff; color: var(--purple-deep);
  font: 700 .98rem/1 var(--f-body); box-shadow: 0 10px 24px rgba(40, 8, 56, .22); transition: transform .3s var(--ease), box-shadow .3s ease, background-color .25s ease, color .25s ease;
}
.cband__btn .ic { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.cband__btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(40, 8, 56, .3); background: var(--carbon); color: #fff; }
.cband__btn:hover .ic { transform: translateX(4px); }

/* ---------- Manufacturing: wider panels, clear gaps while the row slides ---------- */
.hpath--mfg .hpath__row { gap: 24px; }
.hpath--mfg .hpath__panel { flex-basis: min(84vw, 560px); }
.hpath--mfg .hpath__img { height: clamp(170px, 28vh, 300px); }

/* ---------- Projects: case-study carousel ---------- */
.cases__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.cases__ctrl { display: flex; gap: 8px; }
.cases__btn { width: 52px; height: 52px; display: grid; place-items: center; border: 1.5px solid var(--carbon); border-radius: 50%; color: var(--carbon); transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.cases__btn .ic { width: 20px; height: 20px; }
.cases__btn:hover { background: var(--purple-btn); border-color: var(--purple-btn); color: #fff; }
.cases { margin-top: clamp(28px, 3.4vw, 44px); }
.cases__track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 4px var(--gutter) 24px; scroll-padding: 0 var(--gutter);
}
@media (min-width: 1416px) { .cases__track { padding-left: calc((100vw - var(--wrap)) / 2); padding-right: calc((100vw - var(--wrap)) / 2); scroll-padding: 0 calc((100vw - var(--wrap)) / 2); } }
.cases__track::-webkit-scrollbar { display: none; }
.cases__track:focus-visible { outline-offset: -3px; }
.case {
  flex: 0 0 min(88vw, 1080px); scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden;
  min-height: clamp(380px, 38vw, 480px); border: 1px solid var(--line); border-radius: 12px; background: #fff; scroll-margin-top: calc(var(--header-h) + 24px);
  transition: box-shadow .5s var(--ease);
}
.case:hover { box-shadow: 0 26px 56px rgba(22, 19, 26, .1); }
.case__img { position: relative; overflow: hidden; }
.case__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.case:hover .case__img img { transform: scale(1.05); }
.case__body { display: flex; flex-direction: column; padding: clamp(26px, 3.4vw, 48px); }
.case__count { font: 700 .86rem/1 var(--f-display); letter-spacing: .14em; color: var(--muted); }
.case__count b { color: var(--purple-btn); }
.case__client { margin-top: clamp(18px, 2.4vw, 30px); font: 700 .82rem/1.3 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--purple-deep); }
.case h3 { margin-top: 12px; font-size: clamp(1.9rem, 3vw, 2.8rem); }
.case__text { margin-top: 16px; color: var(--body); }
.case__metric { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.case__metric span { font: 800 clamp(2.2rem, 3.6vw, 3.4rem)/.9 var(--f-display); text-transform: uppercase; color: var(--purple-btn); }
.case__metric small { font-size: .95rem; color: var(--muted); }
.cases__dots { display: flex; gap: 8px; margin-top: 4px; }
.cases__dots button { width: 28px; height: 6px; padding: 0; border-radius: 3px; background: var(--line); transition: width .4s var(--ease), background-color .3s ease; }
.cases__dots button[aria-current="true"] { width: 56px; background: var(--purple-btn); }
.cases__dots button { position: relative; }
.cases__dots button::before { content: ""; position: absolute; inset: -10px -2px; } /* bigger touch target */

/* Reference list: filter to the right of the heading */
.cat__head .ref-filter { margin: 0; justify-content: flex-end; }
#reference-list .table-wrap { margin-top: clamp(24px, 3vw, 36px); }

/* ---------- Quality: assurance checkpoints ---------- */
.gates-sec { background: radial-gradient(ellipse 50% 60% at 90% 0%, rgba(142, 37, 184, .26), transparent 70%), var(--carbon); color: var(--on-dark); }
.gates-sec .h-sec { color: #fff; }
.gates-sec .edit { border-top-color: var(--line-dark); }
.gates-sec .copy { color: var(--on-dark-muted); }
.gates { margin-top: clamp(40px, 5vw, 72px); }
.gates__ends { display: flex; justify-content: space-between; margin-bottom: 18px; font: 700 .8rem/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--purple-soft); }
.gates__list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); }
.gates__list::before, .gates__list::after { content: ""; position: absolute; left: 0; right: 0; top: 31px; height: 2px; }
.gates__list::before { background: rgba(255, 255, 255, .14); }
.gates__list::after { background: linear-gradient(90deg, var(--purple), var(--purple-soft)); transform: scaleX(0); transform-origin: left; transition: transform 2.2s var(--ease-io) .2s; }
.gates.is-in .gates__list::after { transform: none; }
.gates__list li { position: relative; }
.gates__node {
  position: relative; z-index: 1; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .18); background: var(--carbon); color: var(--on-dark-muted);
  transition: border-color .5s ease, background-color .5s ease, color .5s ease, box-shadow .5s ease;
}
.gates__node .ic { width: 26px; height: 26px; }
.gates.is-in .gates__node { border-color: var(--purple-soft); background: var(--purple); color: #fff; box-shadow: 0 0 0 8px rgba(142, 37, 184, .22); }
.gates.is-in li:nth-child(1) .gates__node { transition-delay: .3s; }
.gates.is-in li:nth-child(2) .gates__node { transition-delay: .75s; }
.gates.is-in li:nth-child(3) .gates__node { transition-delay: 1.2s; }
.gates.is-in li:nth-child(4) .gates__node { transition-delay: 1.65s; }
.gates.is-in li:nth-child(5) .gates__node { transition-delay: 2.1s; }
.gates__n { display: block; margin-top: 24px; font: 800 clamp(2.4rem, 3.4vw, 3.2rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px var(--purple-soft); }
.gates__list h3 { margin-top: 14px; color: #fff; font-size: clamp(1.35rem, 1.7vw, 1.6rem); line-height: 1; }
.gates__list p { margin-top: 10px; color: var(--on-dark-muted); font-size: .96rem; line-height: 1.6; }
.gates__list li { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ---------- Careers: why work with us ---------- */
.wbento { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(260px, auto) minmax(260px, auto); gap: 14px; margin-top: clamp(28px, 3.4vw, 44px); }
.wbento__tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(22px, 2.6vw, 34px); border-radius: 12px; isolation: isolate; }
.wbento__tile h3 { font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1; }
.wbento__tile p { margin-top: 10px; max-width: 40ch; font-size: 1rem; line-height: 1.55; }
.wbento__tile--tall { grid-row: span 2; }
.wbento__tile--wide { grid-column: span 2; }
.wbento__tile--photo { color: #fff; background: var(--carbon); }
.wbento__tile--photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.wbento__tile--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11, 10, 14, .9) 0%, rgba(11, 10, 14, .45) 45%, rgba(11, 10, 14, 0) 75%); }
.wbento__tile--photo:hover img { transform: scale(1.05); }
.wbento__tile--photo h3 { color: #fff; }
.wbento__tile--photo p { color: #E6E0EB; }
.wbento__tile--dark { background: var(--carbon); color: var(--on-dark); }
.wbento__tile--dark h3 { color: #fff; }
.wbento__tile--dark p { color: var(--on-dark-muted); }
.wbento__tile--purple { background: linear-gradient(140deg, var(--purple-deep), var(--purple)); color: #fff; }
.wbento__tile--purple h3 { color: #fff; }
.wbento__tile--purple p { color: #F1E4F8; }
.wbento__ic { position: absolute; top: clamp(22px, 2.6vw, 34px); left: clamp(22px, 2.6vw, 34px); width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .1); color: var(--purple-soft); }
.wbento__tile--purple .wbento__ic { color: #fff; background: rgba(255, 255, 255, .16); }
.wbento__ic .ic { width: 28px; height: 28px; }
.wbento__tile--dark::after, .wbento__tile--purple::after { content: ""; position: absolute; right: -70px; top: -70px; z-index: -1; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 0 0 30px rgba(255, 255, 255, .03); }

/* ---------- Careers: role board ---------- */
.rboard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 3.4vw, 44px); align-items: start; }
.rboard__list { display: grid; border-top: 1px solid var(--line); }
.rboard__tab {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 14px; align-items: center; width: 100%; padding: 20px 14px; text-align: left;
  border-bottom: 1px solid var(--line); font: 700 clamp(1.15rem, 1.5vw, 1.4rem)/1.1 var(--f-display); text-transform: uppercase; color: var(--muted); transition: color .25s ease, background-color .25s ease;
}
.rboard__tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--purple); transform: scaleY(0); transition: transform .4s var(--ease); }
.rboard__tab .rboard__n { font-size: .9rem; letter-spacing: .1em; color: var(--muted); }
.rboard__tab .ic { width: 18px; height: 18px; opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .4s var(--ease); }
.rboard__tab:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.rboard__tab.is-active { color: var(--ink); background: #fff; }
.rboard__tab.is-active::before { transform: none; }
.rboard__tab.is-active .rboard__n { color: var(--purple-btn); }
.rboard__tab.is-active .ic, .rboard__tab:hover .ic { opacity: 1; transform: none; color: var(--purple-btn); }
.rboard__panels { position: sticky; top: calc(var(--header-h) + 24px); }
.rboard__panel {
  position: relative; overflow: hidden; display: none; flex-direction: column; align-items: flex-start; min-height: 380px; padding: clamp(28px, 3.4vw, 48px); border-radius: 12px; isolation: isolate;
  background: radial-gradient(ellipse 60% 70% at 100% 0%, rgba(142, 37, 184, .45), transparent 70%), var(--carbon); color: var(--on-dark);
}
.rboard__panel.is-active { display: flex; animation: rbIn .5s var(--ease); }
@keyframes rbIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rboard__big { position: absolute; right: 24px; bottom: -24px; z-index: -1; font: 800 clamp(9rem, 16vw, 14rem)/1 var(--f-display); color: transparent; -webkit-text-stroke: 2px rgba(217, 166, 238, .22); }
.rboard__ic { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .08); color: var(--purple-soft); }
.rboard__ic .ic { width: 30px; height: 30px; }
.rboard__panel h3 { margin-top: 26px; color: #fff; font-size: clamp(1.9rem, 2.8vw, 2.6rem); max-width: 16ch; }
.rboard__panel p { margin-top: 14px; max-width: 42ch; color: #D3CCDA; font-size: 1.06rem; }
.rboard__panel .btn { margin-top: auto; }
.rboard__panel p + .btn { margin-top: 30px; }

/* ---------- Careers: application ---------- */
.apply { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 30px 70px rgba(22, 19, 26, .08); }
.apply__side { position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 3.6vw, 52px); background: linear-gradient(160deg, var(--carbon) 0%, #2A1236 100%); color: var(--on-dark); }
.apply__side::after { content: ""; position: absolute; left: -90px; bottom: -90px; z-index: -1; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 0 0 40px rgba(142, 37, 184, .08), 0 0 0 80px rgba(142, 37, 184, .05); }
.apply__side h2 { color: #fff; font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
.apply__side h2 .hl { color: #fff; }
.apply__side > p { margin-top: 16px; color: var(--on-dark-muted); }
.apply__steps { counter-reset: st; margin-top: 30px; display: grid; gap: 18px; }
.apply__steps li { counter-increment: st; position: relative; padding-left: 50px; }
.apply__steps li::before { content: counter(st); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: #fff; font: 700 1rem/1 var(--f-display); }
.apply__steps li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: -16px; width: 2px; background: rgba(217, 166, 238, .3); }
.apply__steps b { display: block; color: #fff; font-weight: 700; }
.apply__steps span { display: block; margin-top: 2px; font-size: .94rem; color: var(--on-dark-muted); }
.apply__form { padding: clamp(28px, 3.6vw, 52px); }
.apply__form form { display: grid; gap: 4px; }
.drop { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px; border: 2px dashed var(--purple-line); border-radius: 10px; background: var(--purple-wash); cursor: pointer; transition: border-color .25s ease, background-color .25s ease; }
.drop:hover, .drop.is-over, .drop:focus-within { border-color: var(--purple); background: #F2E2F9; }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop__ic { flex-shrink: 0; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--purple-btn); box-shadow: 0 6px 16px rgba(109, 26, 142, .14); }
.drop__ic .ic { width: 22px; height: 22px; }
.drop__text b { display: block; color: var(--ink); }
.drop__text span { display: block; margin-top: 2px; font-size: .9rem; color: var(--muted); }
.drop.has-file .drop__text span { color: var(--purple-deep); font-weight: 600; }

/* ---------- Request a Quote: why send it to ETR ---------- */
.why { position: relative; overflow: hidden; isolation: isolate; padding: clamp(26px, 3vw, 40px); border-radius: 16px; background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(142, 37, 184, .5), transparent 70%), var(--carbon); color: var(--on-dark); }
.why::after { content: ""; position: absolute; right: -60px; bottom: -60px; z-index: -1; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 0 0 30px rgba(255, 255, 255, .03); }
.why__h { color: #fff; font-size: clamp(1.9rem, 2.6vw, 2.4rem); }
.why__h .hl { color: #fff; }
.why__list { counter-reset: why; margin-top: 24px; }
.why__list li { counter-increment: why; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border-top: 1px dashed rgba(255, 255, 255, .18); }
.why__ic { position: relative; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: rgba(142, 37, 184, .35); color: #fff; box-shadow: inset 0 0 0 1px rgba(217, 166, 238, .4); }
.why__ic::after { content: counter(why); position: absolute; right: -4px; top: -4px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--purple-deep); font: 700 .74rem/1 var(--f-display); }
.why__ic .ic { width: 22px; height: 22px; }
.why__list strong { display: block; color: #fff; font: 700 1.2rem/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.why__list span:not(.why__ic) { display: block; margin-top: 6px; color: var(--on-dark-muted); font-size: .96rem; line-height: 1.55; }
.wizard__aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }

/* ---------- Home: 3D pyro line that grows to fill the section ---------- */
.zoom3d { position: relative; background: var(--void); color: #fff; }
.zoom3d__track { height: 280vh; }
.zoom3d__stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); overflow: hidden;
  background: radial-gradient(circle at 50% 55%, rgba(142, 37, 184, .22), transparent 60%), var(--void); }
.zoom3d__stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%); mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%); }
.zoom3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.zoom3d__intro { position: absolute; left: 0; right: 0; top: clamp(28px, 7vh, 72px); text-align: center; padding: 0 var(--gutter); pointer-events: none; }
.zoom3d__h { color: #fff; font-size: clamp(2.2rem, 4.6vw, 4.4rem); }
.zoom3d__h .hl { color: #fff; background-size: 100% .86em; }
.zoom3d__hint { margin-top: 14px; font: 700 .8rem/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--purple-soft); }
.zoom3d__hint::after { content: ""; display: block; width: 2px; height: 26px; margin: 12px auto 0; background: linear-gradient(var(--purple-soft), transparent); animation: zHint 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes zHint { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.zoom3d__labels { position: absolute; inset: 0; pointer-events: none; }
.zoom3d__labels li { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(217, 166, 238, .45); border-radius: 4px; background: rgba(11, 10, 14, .72); font: 700 .8rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: 0; white-space: nowrap; will-change: transform, opacity; }
.zoom3d__labels li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--purple-lift); box-shadow: 0 0 0 3px rgba(166, 63, 208, .3); }
.no-canvas .zoom3d__track { height: auto; }
.no-canvas .zoom3d__stage { position: relative; top: 0; height: auto; padding: var(--sec) 0; }
.no-canvas .zoom3d__intro, .no-canvas .zoom3d__labels, .no-canvas .zoom3d__labels li { position: static; opacity: 1; }
.no-canvas .zoom3d__labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }

@media (max-width: 1100px) {
  .gates__list { grid-template-columns: 1fr; gap: 0; }
  .gates__ends { display: none; }
  .gates__list::before, .gates__list::after { left: 31px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .gates__list::after { transform: scaleY(0); transform-origin: top; }
  .gates.is-in .gates__list::after { transform: none; }
  .gates__list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 22px; padding-bottom: 32px; }
  .gates__node { grid-row: span 3; }
  .gates__n { margin-top: 4px; }
  .wbento { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .wbento__tile--tall { grid-row: auto; grid-column: span 2; min-height: 340px; }
  .wbento__tile--wide { grid-column: span 2; min-height: 300px; }
  .wbento__tile--dark, .wbento__tile--purple { min-height: 280px; }
}
@media (max-width: 900px) {
  .cband__box { flex-direction: column; align-items: flex-start; }
  .case { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; }
  .case__img { aspect-ratio: 16 / 9; }
  .rboard { grid-template-columns: 1fr; }
  .rboard__list { display: none; }
  .rboard__panels { position: static; display: grid; gap: 12px; }
  .rboard__panel, .rboard__panel.is-active { display: flex; min-height: 0; animation: none; }
  .apply { grid-template-columns: 1fr; }
  .wizard__aside { position: static; }
  .cat__head .ref-filter { justify-content: flex-start; }
  .zoom3d__track { height: 220vh; }
}
@media (max-width: 640px) {
  .wbento { grid-template-columns: 1fr; }
  .wbento__tile--tall, .wbento__tile--wide { grid-column: auto; }
  .cases__btn { width: 46px; height: 46px; }
  .cband__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .gates__list::after { transform: none !important; transition: none; }
  .gates__node { transition: none !important; }
  .gates .gates__node { border-color: var(--purple-soft); background: var(--purple); color: #fff; }
  .cases__track { scroll-behavior: auto; }
  .rboard__panel.is-active { animation: none; }
  .zoom3d__hint::after { animation: none; }
}
.zoom3d--still .zoom3d__track { height: auto; }
.zoom3d--still .zoom3d__stage { position: relative; top: 0; height: min(86vh, 760px); }

/* Home: the pyro-line section rises over the last screen of the 3D stage. The stage is plain
   carbon with its grid and glow on one layer that fades out (--zf) as the section comes up; the
   section is transparent over the stage and carbon below it, so no edge shows. */
.zoom3d, .zoom3d__stage { background: var(--carbon); }
.zoom3d__stage::before {
  opacity: calc(.85 * var(--zf, 1));
  background-image: radial-gradient(circle at 50% 55%, rgba(142, 37, 184, .26), transparent 60%), linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
}
.zoom3d canvas { z-index: 1; }
.zoom3d__intro, .zoom3d__labels { z-index: 2; }
.zoom3d__track { height: 270vh; } /* ~1.7 screens of pinned scroll (was 380vh, ~2.8) */
.zoom3d + .pyro {
  z-index: 3; margin-top: calc(var(--header-h) - 100vh); margin-top: calc(var(--header-h) - 100dvh);
  background: linear-gradient(180deg, transparent 0, transparent calc(100vh - var(--header-h)), var(--carbon) calc(100vh - var(--header-h)));
  background: linear-gradient(180deg, transparent 0, transparent calc(100dvh - var(--header-h)), var(--carbon) calc(100dvh - var(--header-h)));
}
.zoom3d--still + .pyro, .no-canvas + .pyro { margin-top: 0; background: radial-gradient(ellipse 60% 50% at 85% 0%, rgba(142, 37, 184, .3), transparent 70%), var(--carbon); }
@media (max-width: 900px) { .zoom3d__track { height: 240vh; } } /* was 320vh */

/* ==========================================================================
   Client feedback, round 5
   ========================================================================== */

/* ---------- Nav: Services, Products and Industries open their page; the caret opens the menu ---------- */
.nav__item--split { display: flex; align-items: center; }
.nav__item--split > .nav__link { padding-right: 6px; border-radius: 4px 0 0 4px; }
.nav__caret { width: 26px; height: 44px; display: grid; place-items: center; border-radius: 0 4px 4px 0; color: var(--ink); transition: background-color .2s ease, color .2s ease; }
.nav__caret .ic { width: 13px; height: 13px; opacity: .7; transition: transform .3s var(--ease); }
.nav__item--split:hover > .nav__link, .nav__item--split:hover > .nav__caret,
.nav__item--split:focus-within > .nav__link, .nav__item--split:focus-within > .nav__caret,
.nav__item--split.is-open > .nav__link, .nav__item--split.is-open > .nav__caret { background: var(--purple-btn); color: #fff; }
.nav__item--split:hover > .nav__caret .ic, .nav__item--split.is-open > .nav__caret .ic { transform: rotate(180deg); opacity: 1; }
.nav__item--split.is-current > .nav__link, .nav__item--split.is-current > .nav__caret { box-shadow: inset 0 -3px 0 var(--purple); border-radius: 0; }

/* ---------- CTA band: the site's own type and button, in the reference layout ---------- */
.cband h2 { font: 800 clamp(2rem, 3.6vw, 3.2rem)/.95 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; }
.cband p { margin-top: 14px; font-size: 1.04rem; line-height: 1.55; }
.cband__btn {
  min-height: 54px; padding: 0 28px; border-radius: 4px; border: 1.5px solid #fff;
  font: 700 1.02rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; box-shadow: none;
}
.cband__btn:hover { transform: none; box-shadow: none; background: var(--carbon); border-color: var(--carbon); color: #fff; }

/* ---------- A dark section straight under a hero: inset and rounded like the hero, never touching it ---------- */
.phero + .svcgrid-sec, .phero + .sec--dark, .phero + .gates-sec { margin: 12px 12px 0; border-radius: 16px; }
@media (max-width: 640px) { .phero + .svcgrid-sec, .phero + .sec--dark, .phero + .gates-sec { margin: 8px 8px 0; border-radius: 12px; } }

/* ---------- Manufacturing: drawing to despatch, pinned photo + vertical steps ---------- */
.scrolly { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(28px, 4vw, 56px); }
.scrolly__media { position: sticky; top: calc(var(--header-h) + 5vh); align-self: start; }
.scrolly__frame { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; border-radius: 12px; background: var(--mist); }
.scrolly__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.4s var(--ease); }
.scrolly__frame img.is-on { opacity: 1; transform: none; }
.scrolly__count { position: absolute; left: 16px; top: 16px; padding: 7px 11px; border-radius: 4px; background: rgba(11, 10, 14, .74); font: 700 .82rem/1 var(--f-display); letter-spacing: .14em; color: var(--on-dark-muted); }
.scrolly__count b { color: #fff; }
.scrolly__bar { height: 3px; margin-top: 14px; overflow: hidden; border-radius: 2px; background: var(--line); }
.scrolly__bar span { display: block; height: 100%; background: var(--purple); transform: scaleX(0); transform-origin: left; transition: transform .2s linear; }
.scrolly__steps { display: grid; }
.scrolly__step { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0 24px clamp(20px, 2.4vw, 32px); border-left: 2px solid var(--line); opacity: .32; transition: opacity .45s ease, border-color .45s ease; }
.scrolly__step.is-on { opacity: 1; border-left-color: var(--purple); }
.scrolly__step:first-child { min-height: 44vh; justify-content: flex-start; padding-top: 6vh; }
.scrolly__step:last-child { min-height: 64vh; }
.scrolly__n { font: 800 clamp(3rem, 5vw, 4.6rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px var(--purple); transition: color .4s ease; }
.scrolly__step.is-on .scrolly__n { color: var(--purple); }
.scrolly__step h3 { margin-top: 18px; font-size: clamp(1.9rem, 3vw, 2.7rem); }
.scrolly__step p { margin-top: 14px; max-width: 46ch; color: var(--body); font-size: 1.04rem; }

/* ---------- Projects: room for the hover shadow, earlier start ---------- */
.cases__track { padding-top: 16px; padding-bottom: 64px; margin-top: -12px; margin-bottom: -40px; }

/* ---------- Request a Quote: photo card with a turning seal ---------- */
.whyx { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(22, 19, 26, .08); }
.whyx__photo { position: relative; aspect-ratio: 16 / 11; }
.whyx__photo img { width: 100%; height: 100%; object-fit: cover; }
.whyx__body { padding: clamp(26px, 3vw, 36px); }
.whyx__h { font-size: clamp(1.8rem, 2.4vw, 2.3rem); max-width: 11ch; }
.whyx__list { margin-top: 20px; }
.whyx__list li { padding: 16px 0; border-top: 1px solid var(--line); }
.whyx__list b { display: block; font: 700 1.15rem/1.1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.whyx__list span { display: block; margin-top: 6px; color: var(--muted); font-size: .96rem; line-height: 1.55; }

/* ---------- Careers: roles as an editorial list; a photograph follows the pointer ---------- */
.rlist { position: relative; margin-top: clamp(28px, 3.4vw, 44px); border-top: 1px solid var(--line); }
.rlist__row { position: relative; border-bottom: 1px solid var(--line); }
.rlist__link {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 56px minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 12px clamp(20px, 3vw, 44px); align-items: center;
  padding: clamp(22px, 2.6vw, 34px) clamp(8px, 1.4vw, 20px);
}
.rlist__link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--carbon); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); }
.rlist__link:hover::before, .rlist__link:focus-visible::before { transform: none; }
.rlist__n { font: 700 .95rem/1 var(--f-display); letter-spacing: .1em; color: var(--purple-btn); transition: color .3s ease; }
.rlist__name { font: 800 clamp(1.5rem, 2.5vw, 2.5rem)/1 var(--f-display); text-transform: uppercase; color: var(--ink); transition: color .3s ease, transform .5s var(--ease); }
.rlist__desc { font-size: .98rem; line-height: 1.55; color: var(--muted); transition: color .3s ease; }
.rlist__go { display: inline-flex; align-items: center; gap: 12px; font: 700 .95rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); transition: color .3s ease; }
.rlist__arrow { width: 46px; height: 46px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; transition: background-color .3s ease, border-color .3s ease, transform .4s var(--ease); }
.rlist__arrow .ic { width: 18px; height: 18px; }
.rlist__link:hover .rlist__name, .rlist__link:focus-visible .rlist__name { color: #fff; transform: translateX(10px); }
.rlist__link:hover .rlist__desc, .rlist__link:focus-visible .rlist__desc { color: var(--on-dark-muted); }
.rlist__link:hover .rlist__n, .rlist__link:focus-visible .rlist__n { color: var(--purple-soft); }
.rlist__link:hover .rlist__go, .rlist__link:focus-visible .rlist__go { color: #fff; }
.rlist__link:hover .rlist__arrow, .rlist__link:focus-visible .rlist__arrow { background: var(--purple-btn); border-color: var(--purple-btn); transform: rotate(45deg); }

/* ---------- Careers: application side panel with a photograph, no steps ---------- */
.apply__side { display: flex; flex-direction: column; min-height: 100%; }
.apply__img { position: absolute; inset: auto 0 0; z-index: -2; width: 100%; height: 62%; object-fit: cover; opacity: .55; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 55%); mask-image: linear-gradient(180deg, transparent 0, #000 55%); }
.apply__side::after { z-index: -1; }

@media (max-width: 900px) {
  .scrolly { grid-template-columns: 1fr; }
  .scrolly__media { top: calc(var(--header-h) + 8px); z-index: 2; background: #fff; padding-bottom: 10px; }
  .scrolly__frame { aspect-ratio: 16 / 10; }
  .scrolly__step, .scrolly__step:first-child, .scrolly__step:last-child { min-height: 52vh; justify-content: flex-start; padding-top: 28px; }
  .rlist__link { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .rlist__desc { grid-column: 2 / -1; grid-row: 2; }
  .rlist__go .sr-only + .rlist__arrow { width: 40px; height: 40px; }
  .apply__img { height: 45%; }
}
@media (max-width: 640px) { .rlist__go { font-size: 0; gap: 0; } .rlist__go .rlist__arrow { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) {
    .scrolly__frame img { transition: none; transform: none; }
}
@media (max-width: 900px) { .apply__side { padding-bottom: 200px; } .apply__img { height: 210px; } }

/* Nav: only the item under the pointer shows its menu, so two menus never overlap while moving across */
.nav__list:hover > .nav__item:not(:hover) .mega { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: none; }
.nav__list:hover > .nav__item:not(:hover) > .nav__link:not(:hover),
.nav__list:hover > .nav__item:not(:hover) > .nav__caret { background: transparent; color: var(--ink); }
.nav__list:hover > .nav__item:not(:hover) .ic { transform: none; }

/* Footer: Industries sits under Company in the same column */
.footer__col .footer__subh { margin-top: 34px; }

/* Mobile: once the columns stack (1100px and below), a pinned side panel would slide over the
   form under it as you scroll (Contact "Get in touch", Request a Quote "Why send it to ETR"). */
@media (max-width: 1100px) { .cscreen__info, .wizard__aside { position: static; } }

/* WhatsApp hand-off under a successful form submission (green kept dark enough for white text, 5.4:1) */
.form-wa { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(20, 83, 45, .18); }
.form-wa p { margin: 0 0 10px; }
.btn--wa { --bg: #157A3C; --fg: #fff; --bd: #157A3C; white-space: normal; text-align: left; }
.btn--wa:hover { --bg: #0F5E2E; --bd: #0F5E2E; }
.btn--wa:hover .ic { transform: none; }

/* reCAPTCHA v3: Google's badge is hidden (it covered the contact tab); its required notice sits under each form */
.grecaptcha-badge { visibility: hidden; }
.captcha-note { margin: 14px 0 0; font-size: .78rem; line-height: 1.5; color: var(--muted); }
.captcha-note a { color: inherit; text-decoration: underline; }