/* ==========================================================================
   ZAOTECH REFRESH LAYER
   Loaded after style.css. Reference order: Palo Alto, CrowdStrike, Sophos.
   Palette: charcoal #231f20, orange #f57f20, grey #b2b1b2 (+ tints). No white.
   Everything here is additive; delete this file (and js/refresh.js) to revert.
   ========================================================================== */

:root {
  --bar-h: 38px;
  --rf-charcoal: #231f20;
  --rf-orange: #f57f20;
  --rf-orange-ink: #9c4607;
  --rf-text: #3a3436;
  --rf-mist: #e9f0fb;
  --rf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 1. Urgent-help bar (sits inside the fixed header, folds away on scroll) ---------- */
.utility-bar {
  background: var(--rf-charcoal);
  color: var(--grey-375);
  font-size: 0.84rem;
  line-height: 1;
  height: var(--bar-h);
  overflow: hidden;
  transition: height 0.3s var(--rf-ease), opacity 0.25s ease;
}

#site-header.is-scrolled .utility-bar {
  height: 0;
  opacity: 0;
}

.utility-bar-inner {
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.utility-bar p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem 1.1rem;
  white-space: nowrap;
}

.utility-q {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  color: var(--grey-200);
}

.utility-q i {
  color: var(--rf-orange);
}

.utility-bar a.utility-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--orange-150);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.utility-bar a.utility-link:hover,
.utility-bar a.utility-link:focus-visible {
  color: var(--rf-orange);
}

.utility-bar a.utility-link span {
  color: inherit;
  font-family: inherit;
}

.utility-hours {
  color: var(--grey-500);
}

.utility-bar .utility-q-m {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--grey-200);
}

.utility-bar .utility-q-m i {
  color: var(--rf-orange);
}

.utility-hours span {
  color: inherit;
  font-family: inherit;
}

.open-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grey-650);
  flex: 0 0 8px;
}

.utility-hours.is-open .open-dot {
  background: var(--rf-orange);
  box-shadow: 0 0 0 0 rgb(var(--orange-rgb) / 0.55);
  animation: rfPulse 2.2s ease-out infinite;
}

@keyframes rfPulse {
  0% { box-shadow: 0 0 0 0 rgb(var(--orange-rgb) / 0.55); }
  80%, 100% { box-shadow: 0 0 0 8px rgb(var(--orange-rgb) / 0); }
}

@media (max-width: 767.98px) {
  :root { --bar-h: 36px; }
  .utility-bar .utility-hours { display: none; }
  .utility-bar-inner { justify-content: center; }
  .utility-bar .utility-q { display: none; }
  .utility-bar .utility-q-m { display: inline-flex; }
  .utility-bar p { gap: 1.4rem; }
  .utility-bar a.utility-link { font-size: 0.9rem; }
}

/* ---------- 2. Header: compact once the page is scrolled ---------- */
#site-header .site-navbar,
#site-header .site-brand-logo,
#site-header .site-brand-copy h6 {
  transition: padding 0.3s var(--rf-ease), width 0.3s var(--rf-ease), height 0.3s var(--rf-ease),
    opacity 0.2s ease, max-height 0.3s var(--rf-ease);
}

#site-header.is-scrolled .site-navbar {
  padding: 0.45rem 0 !important;
}

#site-header.is-scrolled .site-brand-logo {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

#site-header.is-scrolled .site-brand-copy h6 {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

#site-header.is-scrolled .site-brand-copy h3 {
  font-size: 1.12rem;
}

/* ---------- 3. Scroll progress line ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1070;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--rf-orange), var(--orange-250));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- 3b. Hero colour: light blue easing to a soft warm tint (ties the hero to the orange) ---------- */
body.home-light .home-hero {
  background:
    radial-gradient(60% 80% at 85% 15%, rgb(var(--sky-soft-rgb) / 0.5), transparent 60%),
    radial-gradient(55% 70% at 92% 100%, rgb(var(--orange-rgb) / 0.2), transparent 65%),
    radial-gradient(45% 60% at 4% 92%, rgb(var(--orange-rgb) / 0.1), transparent 65%),
    linear-gradient(160deg, var(--mist-5) 0%, var(--mist-6) 50%, var(--sand-100) 100%);
}

/* ---------- 4. Hero: split layout with the service orbit ---------- */
body.home-light .home-hero {
  padding-top: calc(8.5rem + var(--bar-h));
  padding-bottom: 5.5rem;
}

body.home-light .home-hero .zt-hero {
  max-width: none;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.zt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.25rem;
  color: var(--rf-orange-ink);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.zt-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--rf-orange);
}

body.home-light .home-hero .zt-hero .home-title {
  margin: 0;
  max-width: none;
  font-size: clamp(2rem, 3.3vw, 3.2rem);
  text-wrap: initial;
}

.hero-sub {
  margin: 1.5rem 0 0;
  max-width: 34ch;
  color: var(--rf-text);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  font-weight: 500;
}

.home-hero .service-overlay-grid--hero {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Problem-first entry tiles under the hero: the visitor's situation, then the service */
.zt-probs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.zt-probs a {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.3rem 1.3rem 1.15rem;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 14px 34px rgb(var(--charcoal-rgb) / 0.07);
}

.zt-prob-q {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
}

.zt-prob-d {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.zt-prob-to {
  margin-top: auto;
  padding-top: 0.35rem;
  color: var(--accent-text);
  font-size: 0.92rem;
  font-weight: 700;
}

.zt-probs a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .zt-probs a { transition: transform 0.2s var(--rf-ease), box-shadow 0.2s ease; }
  .zt-probs a:hover, .zt-probs a:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 40px rgb(var(--charcoal-rgb) / 0.1); }
}

@media (max-width: 991.98px) { .zt-probs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .zt-probs { grid-template-columns: 1fr; } }

/* Orbit */
.hero-orbit {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1;
  margin-inline: auto;
  container-type: inline-size;
}

.orbit-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.orbit-rings circle {
  fill: none;
  stroke: rgb(var(--charcoal-rgb) / 0.14);
  stroke-width: 0.28;
  stroke-dasharray: 0.9 1.6;
}

.orbit-rings circle:nth-child(2) {
  stroke: rgb(var(--orange-rgb) / 0.45);
  stroke-dasharray: none;
  stroke-width: 0.34;
}

.orbit-dot {
  position: absolute;
  inset: 0;
  animation: rfSpin 30s linear infinite;
}

.orbit-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 15cqw;
  width: 2.6cqw;
  height: 2.6cqw;
  margin-left: -1.3cqw;
  margin-top: -1.3cqw;
  border-radius: 50%;
  background: var(--rf-orange);
  box-shadow: 0 0 0 1cqw rgb(var(--orange-rgb) / 0.2);
}

@keyframes rfSpin {
  to { transform: rotate(360deg); }
}

.orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24cqw;
  height: 24cqw;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--on-dark);
  border: 1px solid rgb(var(--charcoal-rgb) / 0.08);
  box-shadow: 0 0 0 2.2cqw rgb(var(--orange-rgb) / 0.12), 0 0 0 4.6cqw rgb(var(--orange-rgb) / 0.06),
    0 18px 40px rgb(var(--charcoal-rgb) / 0.14);
}

.orbit-core img {
  width: 56%;
  height: auto;
  display: block;
}

.orbit-nodes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.orbit-nodes li {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(35cqw) rotate(calc(var(--a) * -1));
}

.orbit-nodes a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqw;
  text-decoration: none;
}

.node-ic {
  display: grid;
  place-items: center;
  width: 15.5cqw;
  height: 15.5cqw;
  border-radius: 50%;
  background: var(--on-dark);
  border: 1px solid rgb(var(--charcoal-rgb) / 0.09);
  box-shadow: 0 10px 24px rgb(var(--charcoal-rgb) / 0.13);
  color: var(--rf-charcoal);
  animation: rfNodeLight 14s var(--rf-ease) infinite; /* 7 nodes x 2s */
  animation-delay: calc(var(--i) * 2s);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.node-ic i {
  font-size: 6.6cqw;
  line-height: 1;
}

.orbit-nodes b {
  color: var(--rf-charcoal);
  font-family: var(--font-display);
  font-size: clamp(0.66rem, 3.1cqw, 0.86rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.orbit-nodes a:hover .node-ic, .orbit-nodes a:focus-visible .node-ic {
  background: var(--rf-orange);
  animation-play-state: paused;
}

.orbit-nodes a:focus-visible .node-ic {
  transform: scale(1.08);
}

@media (hover: hover) {
  .orbit-nodes a:hover .node-ic {
    transform: scale(1.08);
  }
}

@keyframes rfNodeLight {
  0%, 12.9% { background: var(--rf-orange); transform: scale(1.1); box-shadow: 0 14px 30px rgb(var(--orange-rgb) / 0.35); }
  18.9%, 100% { background: var(--on-dark); transform: scale(1); }
}

@media (max-width: 991.98px) {
  body.home-light .home-hero .zt-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.2rem;
  }

  .zt-eyebrow { justify-content: center; }
  .zt-eyebrow::before { display: none; }
  .hero-sub { margin-inline: auto; }
  .hero-orbit { width: min(100%, 380px); }
}

@media (max-width: 575.98px) {
  body.home-light .home-hero { padding-top: calc(6.2rem + var(--bar-h)); padding-bottom: 3.5rem; }
  body.home-light .home-hero .zt-hero .home-title { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  .hero-orbit { width: min(100%, 300px); }
  .hero-sub { font-size: 1.02rem; }
}

/* ---------- 5. Chapter bar (sticky, scroll-spy) ---------- */
/* overflow-x:hidden on html+body makes body a scroll container and breaks position:sticky.
   clip hides horizontal overflow the same way without that side effect. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

.chapter-nav {
  position: sticky;
  top: var(--hdr-c, 78px);
  z-index: 1040;
  background: rgb(var(--mist-bar-rgb) / 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(var(--charcoal-rgb) / 0.08);
}

.chapter-nav .container {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.chapter-nav .container::-webkit-scrollbar { display: none; }

.chapter-nav a {
  position: relative;
  flex: 0 0 auto;
  padding: 1rem 1.05rem;
  color: var(--rf-text);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.chapter-nav a:hover { color: var(--rf-orange-ink); }

.chapter-nav a::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  right: 1.05rem;
  bottom: 0;
  height: 2px;
  background: var(--rf-orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s var(--rf-ease);
}

.chapter-nav a.is-active { color: var(--rf-orange-ink); }
.chapter-nav a.is-active::after { transform: scaleX(1); }

main section[id] { scroll-margin-top: 120px; }

/* ---------- 6. Stats band (charcoal, big numerals) ---------- */
body.home-light .proof-strip {
  position: relative;
  overflow: hidden;
  padding: clamp(3.25rem, 6vw, 5.5rem) 0;
  background: var(--rf-charcoal);
  border: 0;
}

body.home-light .proof-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 120% at 8% 0%, rgb(var(--orange-rgb) / 0.22), transparent 60%),
    radial-gradient(40% 90% at 100% 100%, rgb(var(--orange-800-rgb) / 0.28), transparent 70%);
  pointer-events: none;
}

body.home-light .proof-strip .container { position: relative; }

body.home-light .proof-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 4vw, 4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

body.home-light .proof-strip .proof-stat {
  padding: 1.25rem 0 0;
  border: 0;
  border-top: 2px solid var(--rf-orange);
  background: none;
  box-shadow: none;
  text-align: left;
}

body.home-light .proof-strip .proof-stat::before,
body.home-light .proof-strip .proof-stat::after { display: none; }

body.home-light .proof-strip .proof-stat-value {
  display: block;
  color: var(--rf-orange);
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 6.2vw, 4.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

body.home-light .proof-strip .proof-stat-label {
  display: block;
  margin-top: 0.75rem;
  max-width: 26ch;
  color: var(--grey-350);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 767.98px) {
  body.home-light .proof-strip-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  body.home-light .proof-strip .proof-stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 1.1rem; }
  body.home-light .proof-strip .proof-stat-value { font-size: 2.6rem; min-width: 5.2ch; }
  body.home-light .proof-strip .proof-stat-label { margin: 0; }
}

/* ---------- 7. Section polish ---------- */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.section-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--rf-orange);
}

body.home-light .home-what-we-do {
  background: linear-gradient(180deg, var(--mist-7) 0%, var(--mist-8) 100%);
}

body.home-light .position-card,
body.home-light .delivery-card {
  border-radius: 24px;
  border: 1px solid rgb(var(--charcoal-rgb) / 0.08);
  transition: transform 0.25s var(--rf-ease), box-shadow 0.25s var(--rf-ease), border-color 0.25s ease;
}

body.home-light .position-card:hover, body.home-light .delivery-card:hover {
  border-color: rgb(var(--orange-rgb) / 0.45);
}

@media (hover: hover) {
  body.home-light .position-card:hover, body.home-light .delivery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgb(var(--charcoal-rgb) / 0.12);
  }
}

/* ---------- 8. Reveal on scroll (only when JS is running) ---------- */
.js-rv .rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--rf-ease), transform 0.7s var(--rf-ease);
  transition-delay: var(--d, 0ms);
}

.js-rv .rv.in {
  opacity: 1;
  transform: none;
}

/* ---------- 9. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-rv .rv { opacity: 1; transform: none; transition: none; }
  .orbit-dot, .node-ic, .utility-hours.is-open .open-dot { animation: none; }
  .scroll-progress { display: none; }
}

@media (max-width: 399.98px) {
  .utility-bar .utility-q-m { display: none; }
  .utility-bar p { gap: 1.1rem; }
}

/* ---------- 10. Inner pages: make room for the urgent-help bar (home hero handles its own) ---------- */
body:not(.home-light) #site-header + * {
  margin-top: var(--bar-h);
}

/* ---------- 11. In-page section bars on inner pages: same flat style as the home chapter bar ---------- */
body .tech-anchor-nav,
body .industry-nav-band {
  position: sticky;
  top: var(--hdr-c, 78px);
  z-index: 1040;
  margin: 0;
  padding: 0;
  background: rgb(var(--mist-bar-rgb) / 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 0;
  border-bottom: 1px solid rgb(var(--charcoal-rgb) / 0.08);
  border-radius: 0;
  box-shadow: none;
}

body .tech-anchor-nav > .container,
body .industry-nav-band .industry-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.25rem;
  margin: 0 auto;
  padding: 0 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body .tech-anchor-nav > .container::-webkit-scrollbar,
body .industry-nav-band .industry-nav::-webkit-scrollbar { display: none; }

body .industry-nav-band > .container { padding-left: 0; padding-right: 0; }

body .tech-anchor-nav .tech-anchor-link,
body .industry-nav-band .industry-nav a {
  position: relative;
  flex: 0 0 auto;
  padding: 1rem 1.05rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--rf-text);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

body .tech-anchor-nav .tech-anchor-link:hover,
body .industry-nav-band .industry-nav a:hover { color: var(--rf-orange-ink); background: none; transform: none; box-shadow: none; }

body .tech-anchor-nav .tech-anchor-link::after,
body .industry-nav-band .industry-nav a::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  right: 1.05rem;
  bottom: 0;
  height: 2px;
  background: var(--rf-orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s var(--rf-ease);
}

body .tech-anchor-nav .tech-anchor-link.is-active,
body .industry-nav-band .industry-nav a.is-active { color: var(--rf-orange-ink); }

body .tech-anchor-nav .tech-anchor-link.is-active::after,
body .industry-nav-band .industry-nav a.is-active::after { transform: scaleX(1); }

/* ==========================================================================
   PASS 2 (see REDESIGN.md): count-based pillars, accent phrases, audience routing,
   "Trusted by" label, connected process flow.
   ========================================================================== */

/* ---------- 12. One accent phrase per headline (darker orange keeps contrast on light grounds) ---------- */
.section-title em,
.tech-grid-head h2 em,
#process-title em {
  font-style: normal;
  color: var(--brand-orange-ink);
}

.cta-band .section-title em,
.proof-strip .section-title em {
  color: var(--rf-orange);
}

.zt-section-head {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
  text-align: center;
}

.zt-section-head .section-eyebrow { justify-content: center; }
.zt-section-head .section-copy { margin-inline: auto; max-width: 56ch; }

/* ---------- 13. Promise timeline (#why): scoped, documented, supported ---------- */
body.home-light .zt-pillars {
  background: linear-gradient(180deg, var(--mist-9) 0%, var(--mist-10) 100%);
}

.zt-promise {
  max-width: 1080px;
  margin: 0 auto;
}

.zt-promise-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the line that joins the three steps, centred on the dots */
.zt-promise-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  background: var(--brand-orange);
  transform-origin: left center;
}

.zt-promise-step {
  position: relative;
  text-align: center;
}

.zt-promise-dot {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: var(--brand-orange);
  color: var(--on-orange);
  font-size: 1.4rem;
  box-shadow: 0 0 0 8px var(--mist-10), 0 10px 24px rgb(var(--orange-rgb) / 0.28);
}

.zt-promise-step h3 {
  margin: 0 0 0.5rem;
  color: var(--rf-charcoal);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
}

.zt-promise-step p {
  max-width: 30ch;
  margin: 0 auto;
  color: var(--rf-text);
  font-size: 1rem;
  line-height: 1.6;
}

/* one contract and one escalation path underneath all three steps */
.zt-promise-rail {
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  padding: 1rem 1.5rem;
  border: 1px solid var(--grey-200);
  border-top: 3px solid var(--brand-orange);
  border-radius: 0 0 18px 18px;
  background: var(--on-dark);
  color: var(--rf-text);
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
}

.zt-promise-rail b {
  color: var(--rf-charcoal);
  font-family: var(--font-display);
  font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
  .js-rv .zt-promise .zt-promise-steps::before { transform: scaleX(0); transition: transform 1.1s var(--rf-ease) 0.2s; }
  .js-rv .zt-promise.in .zt-promise-steps::before { transform: scaleX(1); }
  .js-rv .zt-promise .zt-promise-dot { transform: scale(0.6); opacity: 0; transition: transform 0.5s var(--rf-ease), opacity 0.5s ease; }
  .js-rv .zt-promise.in .zt-promise-dot { transform: none; opacity: 1; }
  .js-rv .zt-promise.in .zt-promise-step:nth-child(2) .zt-promise-dot { transition-delay: 0.55s; }
  .js-rv .zt-promise.in .zt-promise-step:nth-child(3) .zt-promise-dot { transition-delay: 1.05s; }
}

/* phones and tablets: the steps stack and the line runs down the left */
@media (max-width: 767.98px) {
  .zt-promise-steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .zt-promise-steps::before { top: 29px; bottom: 29px; left: 28px; right: auto; width: 2px; height: auto; transform-origin: center top; }
  .zt-promise-step { display: grid; grid-template-columns: 58px 1fr; column-gap: 1.1rem; text-align: left; }
  .zt-promise-dot { grid-row: span 2; margin-bottom: 0; }
  .zt-promise-step h3 { align-self: end; }
  .zt-promise-step p { margin: 0; max-width: none; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  .js-rv .zt-promise .zt-promise-steps::before { transform: scaleY(0); }
  .js-rv .zt-promise.in .zt-promise-steps::before { transform: scaleY(1); }
}

/* ---------- 13b. Home: mid-dark greys instead of black on the dark bands (light theme) ---------- */
[data-theme="light"] :is(body.home-light .proof-strip, .cta-box, .industry-cta-panel, .site-footer) {
  background: var(--band-grey-1);
}

[data-theme="light"] body.home-light .proof-strip::before { display: none; }

/* orange text does not hold contrast on this grey: numbers and accents go off-white or pale orange */
[data-theme="light"] body.home-light .proof-strip .proof-stat-value { color: var(--brand-orange-ink); }
[data-theme="light"] body.home-light .proof-strip .proof-stat-label { color: var(--on-dark); }
[data-theme="light"] .cta-box .section-title em { color: var(--brand-orange-ink); -webkit-text-fill-color: var(--brand-orange-ink); background: none; }
[data-theme="light"] .cta-box :is(p, .section-eyebrow) { color: var(--on-dark) !important; }
[data-theme="light"] .site-footer :is(p, a, span, li, .footer-copy, .footer-bottom-copy) { color: var(--on-dark); }

/* ---------- 14. "Trusted by" label above client logos ---------- */
.zt-trusted {
  margin: 0 0 1.1rem;
  text-align: center;
  color: var(--grey-700);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---------- 15. Here for you (audience routing) ---------- */
body.home-light .zt-audience {
  background: linear-gradient(180deg, var(--mist-7) 0%, var(--mist-11) 100%);
}

.zt-audience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
}

.zt-aud-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.6rem 1.5rem 3.4rem;
  border-radius: 22px;
  background: var(--on-dark);
  border: 1px solid rgb(var(--charcoal-rgb) / 0.08);
  color: var(--rf-charcoal);
  text-decoration: none;
  transition: transform 0.25s var(--rf-ease), box-shadow 0.25s var(--rf-ease), border-color 0.25s ease;
}

.zt-aud-card:hover, .zt-aud-card:focus-visible {
  border-color: rgb(var(--orange-rgb) / 0.5);
  color: var(--rf-charcoal);
}

.zt-aud-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgb(var(--charcoal-rgb) / 0.12);
}

@media (hover: hover) {
  .zt-aud-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgb(var(--charcoal-rgb) / 0.12);
  }
}

.zt-aud-ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 0.6rem;
  border-radius: 14px;
  background: rgb(var(--orange-rgb) / 0.12);
  color: var(--rf-orange-ink);
  font-size: 1.3rem;
}

.zt-aud-card .zt-aud-for {
  color: var(--rf-orange-ink);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.zt-aud-card b {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
}

.zt-aud-card .zt-aud-text {
  color: var(--rf-text);
  font-size: 0.95rem;
  line-height: 1.5;
}

.zt-aud-card .zt-aud-go {
  position: absolute;
  left: 1.5rem;
  bottom: 1.3rem;
  color: var(--rf-orange-ink);
  font-size: 1.2rem;
  transition: transform 0.25s var(--rf-ease);
}

@media (hover: hover) {
  .zt-aud-card:hover .zt-aud-go {
    transform: translateX(6px);
  }
}

@media (max-width: 991.98px) { .zt-audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
  .zt-audience-grid { grid-template-columns: 1fr; }
  .zt-aud-card { padding: 1.25rem 3.2rem 1.25rem 1.25rem; }
  .zt-aud-card .zt-aud-go { left: auto; right: 1.25rem; bottom: auto; top: 50%; transform: translateY(-50%); }
  @media (hover: hover) {
    .zt-aud-card:hover .zt-aud-go {
      transform: translate(6px, -50%);
    }
  }
}

/* ---------- 16. Connected process flow (class added by refresh.js) ---------- */
.zt-process #process-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--rf-orange-ink) !important;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: none !important;
}

.zt-process #process-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--rf-orange);
}

.zt-flow {
  position: relative;
  counter-reset: zt-step;
}

.zt-flow > [class*="col"] { counter-increment: zt-step; position: relative; z-index: 1; }

.zt-flow > [class*="col"] > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.zt-flow .process-stage {
  padding: 1.5rem 1rem 0 !important;
  text-align: center;
}

.zt-flow .process-stage-icon {
  display: grid !important;
  place-items: center;
  margin: 0 auto 1rem !important;
  border-radius: 50% !important;
}

.zt-flow .rounded-circle,
.zt-flow .process-stage-icon {
  position: relative;
  width: 72px !important;
  height: 72px !important;
  background: var(--on-dark) !important;
  border: 2px solid var(--rf-orange);
  box-shadow: 0 0 0 8px rgb(var(--orange-rgb) / 0.1), 0 12px 26px rgb(var(--charcoal-rgb) / 0.12);
}

.zt-flow .rounded-circle::after,
.zt-flow .process-stage-icon::after {
  content: counter(zt-step, decimal-leading-zero);
  position: absolute;
  top: -8px;
  right: -10px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rf-charcoal);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
}

.zt-flow .rounded-circle i,
.zt-flow .process-stage-icon i { color: var(--rf-orange-ink) !important; }

@media (min-width: 992px) {
  .zt-flow::before {
    content: "";
    position: absolute;
    top: calc(1.5rem + 36px);
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, var(--rf-orange), rgb(var(--orange-rgb) / 0.35), var(--rf-orange));
    z-index: 0;
  }
}

/* ---------- 17. Colour rules: no #f57f20 text on light grounds; charcoal text on orange buttons ---------- */
/* power-systems.html inline style sets light text on the hover state of its orange buttons. */
body .detail-cta:hover,
body .detail-cta:focus-visible {
  color: var(--on-orange);
}

/* 404.html inline style paints the large "404" in brand orange on a light ground. */
body.error-page .error-code {
  color: var(--brand-orange-ink);
}

/* ---------- 18. Section bars on phones: "On this page" menu (desktop unchanged) ---------- */
@media (min-width: 576px) {
  .zt-sec-toggle { display: none; }
  .zt-sec-wrap { display: contents; }
}

@media (max-width: 575.98px) {
  body .zt-sec-ready > .container {
    display: block;
    overflow: visible;
    padding: 0 1rem;
  }

  .zt-sec-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rf-text);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
  }

  .zt-sec-toggle .zt-sec-label,
  .zt-sec-toggle .zt-sec-current { color: inherit; font-family: inherit; }
  .zt-sec-toggle .zt-sec-current { color: var(--rf-orange-ink); }
  .zt-sec-toggle .zt-sec-current:empty { display: none; }
  .zt-sec-toggle .zt-sec-current::before { content: "\00B7"; margin-right: 0.55rem; color: var(--rf-text); }
  .zt-sec-toggle i { margin-left: auto; font-size: 0.95rem; transition: transform 0.25s var(--rf-ease); }
  .zt-sec-ready.is-open .zt-sec-toggle i { transform: rotate(180deg); }

  body .zt-sec-ready [data-zt-sec-list] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0.35rem 0;
    max-height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--rf-mist);
    border: 0;
    border-bottom: 1px solid rgb(var(--charcoal-rgb) / 0.1);
    border-radius: 0;
    box-shadow: 0 18px 30px rgb(var(--charcoal-rgb) / 0.12);
  }

  body .zt-sec-ready.is-open [data-zt-sec-list] { display: flex; }

  body .zt-sec-ready [data-zt-sec-list] a {
    width: 100%;
    padding: 0.85rem 1.25rem;
    white-space: normal;
  }

  body .zt-sec-ready [data-zt-sec-list] a::after {
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0;
    right: auto;
    width: 3px;
    height: auto;
  }
}

/* ==========================================================================
   LOGO PASS: every logo strip uses the Technology tile size and format
   (trimmed logo files in img/partners/wordmarks and img/clients/wordmarks,
   196 x 84 tiles, logo up to 38 px tall). The colour treatment stays as on
   the home page: greyscale, full colour on hover.
   ========================================================================== */
html body .partner-marquee .partner-logo-item {
  flex: 0 0 160px;
  width: 160px;
  min-width: 0;
  height: 64px;
  min-height: 0;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--grey-300);
  border-radius: 12px;
  background: var(--grey-100);
  box-shadow: none;
}
html body .partner-marquee .partner-marquee-track { gap: 0.75rem; padding-right: 0.75rem; } /* trailing gap keeps the -50% loop seamless */
html body .partner-marquee .partner-logo-item img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 28px;
  object-fit: contain;
}
@media (max-width: 767.98px) {
  html body .partner-marquee .partner-logo-item { flex-basis: 120px; width: 120px; height: 52px; padding: 0.5rem 0.6rem; }
  html body .partner-marquee .partner-marquee-track { gap: 0.5rem; padding-right: 0.5rem; }
  html body .partner-marquee .partner-logo-item img { max-height: 22px; }
}
html body .partner-marquee .partner-logo-item.is-mark img { max-height: 38px; }
@media (max-width: 767.98px) { html body .partner-marquee .partner-logo-item.is-mark img { max-height: 30px; } }

/* ==========================================================================
   THEME TOGGLE (header). Icon button on desktop, labelled button in the
   mobile menu; js/theme.js keeps the icon, label and aria-pressed in step.
   ========================================================================== */
.theme-toggle-item { align-items: center; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.theme-toggle:hover { color: var(--accent-text); border-color: var(--accent-text); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.theme-toggle--menu { width: auto; height: auto; padding: 0.6rem 1rem; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; }
.theme-toggle-item--menu { margin-top: 0.75rem; }