/* =========================================================
   Theme overrides. Loaded after styles.css.
   1. CTA colour fixes
   2. Heading typeface
   3. Breadcrumb restyle
   4. Expanding service panels on the homepage
   ========================================================= */

/* ---------- 1. CTA buttons ---------- */

/* .nav-links a { color: var(--muted) } was beating the button's white text. */
.nav-links a.btn,
.nav-links a.btn:hover,
.nav-links a.btn:focus-visible,
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover,
.nav-links a.btn-primary:focus-visible { color:#fff; }
.nav-links a.btn::after,
.nav-links a.btn-primary::after { content:none; }

.btn-primary:not(.cta-banner .btn-primary),
.btn-primary:link:not(.cta-banner .btn-primary),
.btn-primary:visited:not(.cta-banner .btn-primary) { color:#fff; }

/* Inside the gradient banner the button inverts: white pill, violet text. */
.cta-banner .btn-primary,
.cta-banner .btn-primary:link,
.cta-banner .btn-primary:visited,
.cta-banner .btn-primary:hover,
.cta-banner .btn-primary:focus-visible,
.cta-banner .btn-primary .btn-arrow { color:var(--violet); }

/* ---------- 2. Heading typeface ---------- */
/* Figtree: geometric, double-storey 'a', heavy weights available. Closest
   free equivalent to the corporate-geometric look. To try an alternative,
   swap 'Figtree' for 'Plus Jakarta Sans' here and in functions.php. */
h1, h2, h3, h4, h5,
.hero h1,
.page-head h1,
.head h2,
.cta-banner h2,
.footer h5 {
  font-family:'Figtree','Bricolage Grotesque',sans-serif;
  letter-spacing:-.025em;
}
.hero h1, .page-head h1 { font-weight:800; line-height:1.06; }
.head h2, .cta-banner h2 { font-weight:800; }
h3, h4 { font-weight:700; }

/* ---------- 3. Breadcrumb ---------- */
.crumb {
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 16px 7px 14px; margin-bottom:22px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:100px; box-shadow:var(--shadow-sm);
  font-size:13px; font-weight:600; color:var(--muted);
}
.crumb ol { display:flex; align-items:center; gap:10px; list-style:none; margin:0; padding:0; }
.crumb li { display:flex; align-items:center; gap:10px; }
.crumb li + li::before {
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--grad); opacity:.85;
}
.crumb a { color:var(--muted); transition:color .25s; }
.crumb a:hover { color:var(--magenta); }
.crumb li[aria-current="page"] { color:var(--text); }
.crumb .accent a { color:var(--magenta); }

/* ---------- 4. Service panels ---------- */
.svc-panels {
  display:flex; gap:14px; align-items:stretch;
  min-height:440px; margin-top:10px;
}
.svc-panel {
  position:relative; flex:0 0 76px; min-width:76px;
  border-radius:var(--radius); overflow:hidden;
  background:var(--panel,var(--grad));
  box-shadow:var(--shadow-sm);
  transition:flex-basis .55s var(--ease), min-width .55s var(--ease), box-shadow .4s;
  display:flex;
}
.svc-panel::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,14,34,.12) 0%, rgba(22,14,34,.62) 100%);
}
.svc-panel > a {
  position:relative; z-index:2; display:flex; flex-direction:column;
  justify-content:flex-end; width:100%; padding:30px 26px; color:#fff;
}
.svc-panel-title {
  font-family:'Figtree',sans-serif; font-weight:800; font-size:22px;
  line-height:1.1; letter-spacing:-.02em; color:#fff;
  writing-mode:vertical-rl; transform:rotate(180deg);
  white-space:nowrap; transition:writing-mode 0s;
}
.svc-panel-body {
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .35s var(--ease) .15s;
}
.svc-panel-body p { font-size:15.5px; line-height:1.6; margin:14px 0 16px; max-width:38ch; }
.svc-panel-link { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:#fff; }
.svc-panel-link::after { content:"\2192"; transition:transform .3s var(--ease); }
.svc-panel:hover .svc-panel-link::after { transform:translateX(4px); }

.svc-panel:hover,
.svc-panel:focus-within,
.svc-panel.is-open {
  flex:1 1 360px; min-width:280px; box-shadow:var(--shadow);
}
.svc-panel:hover .svc-panel-title,
.svc-panel:focus-within .svc-panel-title,
.svc-panel.is-open .svc-panel-title {
  writing-mode:horizontal-tb; transform:none; white-space:normal; font-size:27px;
}
.svc-panel:hover .svc-panel-body,
.svc-panel:focus-within .svc-panel-body,
.svc-panel.is-open .svc-panel-body {
  opacity:1; max-height:240px;
}

/* Optional photography: set --panel-img on the element and it layers in. */
.svc-panel[style*="--panel-img"] { background-size:cover; background-position:center; }

@media (max-width:980px){
  .svc-panels { flex-wrap:wrap; min-height:0; }
  .svc-panel { flex:1 1 calc(50% - 7px); min-width:calc(50% - 7px); min-height:230px; }
  .svc-panel .svc-panel-title { writing-mode:horizontal-tb; transform:none; white-space:normal; font-size:22px; }
  .svc-panel .svc-panel-body { opacity:1; max-height:none; }
  .svc-panel:hover, .svc-panel.is-open { flex:1 1 calc(50% - 7px); min-width:calc(50% - 7px); }
}
@media (max-width:720px){
  .svc-panel, .svc-panel:hover, .svc-panel.is-open { flex:1 1 100%; min-width:100%; }
}

/* ---------- 5. Panel discovery cues ---------- */

/* The first panel opens by default. It collapses as soon as the pointer lands
   on any other panel, so hovering still behaves as expected. */
.svc-panels:hover .svc-panel.is-open:not(:hover) {
  flex:0 0 76px; min-width:76px; box-shadow:var(--shadow-sm);
}
.svc-panels:hover .svc-panel.is-open:not(:hover) .svc-panel-title {
  writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; font-size:22px;
}
.svc-panels:hover .svc-panel.is-open:not(:hover) .svc-panel-body {
  opacity:0; max-height:0;
}

/* Chevron badge on collapsed panels: a visible invitation to open them. */
.svc-panel-cue {
  position:absolute; top:22px; left:50%; transform:translateX(-50%);
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.38);
  backdrop-filter:blur(4px);
  display:grid; place-items:center;
  opacity:1; transition:opacity .3s var(--ease);
}
.svc-panel-cue::before {
  content:""; width:7px; height:7px; margin-left:-3px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg);
  animation:zearch-nudge 1.9s var(--ease) infinite;
}
.svc-panel:hover .svc-panel-cue,
.svc-panel:focus-within .svc-panel-cue,
.svc-panel.is-open .svc-panel-cue { opacity:0; }
.svc-panels:hover .svc-panel.is-open:not(:hover) .svc-panel-cue { opacity:1; }

@keyframes zearch-nudge {
  0%,100% { transform:rotate(-45deg) translate(0,0); }
  50%     { transform:rotate(-45deg) translate(3px,3px); }
}

.svc-panels-hint {
  display:flex; align-items:center; gap:14px; margin-top:22px;
  font-size:13.5px; font-weight:600; color:var(--muted-2);
}
.svc-panels-hint-rail {
  width:64px; height:2px; border-radius:2px; background:var(--grad);
  animation:zearch-rail 2.4s var(--ease) infinite;
}
@keyframes zearch-rail {
  0%,100% { width:40px; opacity:.6; }
  50%     { width:78px; opacity:1; }
}

/* ---------- 6. Hero slider ---------- */
.hero-slides { position:relative; }
.hero-slide {
  display:none;
  animation:zearch-slide-in .6s var(--ease) both;
}
.hero-slide.is-active { display:block; }
@keyframes zearch-slide-in {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:none; }
}

.hero-dots { display:flex; gap:10px; margin-top:30px; }
.hero-dot {
  width:34px; height:5px; border:none; border-radius:100px; padding:0;
  background:var(--line); cursor:pointer; transition:background .3s, width .3s var(--ease);
}
.hero-dot.is-active { background:var(--grad); width:52px; }
.hero-dot:hover { background:var(--muted-2); }
.hero-dot.is-active:hover { background:var(--grad); }

/* Rotating word in the AI headline. */
.word-rotator {
  display:inline-grid; vertical-align:bottom;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.word-rotator .word {
  grid-area:1 / 1; opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
  white-space:nowrap;
}
/* The incoming word waits for the outgoing one to clear, so the two never
   sit on top of each other mid-transition. */
.word-rotator .word.is-active {
  opacity:1; visibility:visible; transform:none;
  transition:opacity .32s var(--ease) .3s, transform .32s var(--ease) .3s, visibility 0s linear .3s;
}

@media (prefers-reduced-motion: reduce) {
  .svc-panel-cue::before, .svc-panels-hint-rail { animation:none; }
  .hero-slide { animation:none; }
}
@media (max-width:980px){
  .svc-panels-hint { display:none; }
  .svc-panel-cue { display:none; }
}


/* ---------- 7. Panel sizing for the longer service copy ---------- */
/* Desktop only. These were unconditional in v1.6 to v2.0 and landed after the
   mobile rules in the cascade, which forced 70px-wide columns on phones. */
@media (min-width:981px){
  .svc-panels { min-height:500px; }
  .svc-panel-trigger { justify-content:flex-end; }
  .svc-panel-body p { font-size:15px; line-height:1.55; margin:14px 0 16px; max-width:42ch; }
  .svc-panel:hover, .svc-panel:focus-within, .svc-panel.is-open { flex:1 1 420px; min-width:330px; }
  .svc-panel:hover .svc-panel-body,
  .svc-panel:focus-within .svc-panel-body,
  .svc-panel.is-open .svc-panel-body { max-height:360px; }
}

/* Second hero paragraph sits quieter than the first. */
.hero-slide .lead-sub { font-size:16px; opacity:.8; margin-top:12px; }

@media (max-width:1180px){
  .svc-panel-body p { font-size:14.5px; }
}
@media (max-width:980px){
  .svc-panels { min-height:0; }
  .svc-panel { min-height:280px; }
}


/* ---------- 8. Vertical rhythm around the services section ---------- */
#services { padding-bottom:64px; }
#services + .section-pad { padding-top:0; }
.svc-panels-hint { margin-top:18px; }

/* Slightly tighter panels so nine of them sit comfortably at 1240px. */
@media (min-width:981px){
  .svc-panels { gap:12px; }
  .svc-panel { flex:0 0 70px; min-width:70px; }
  .svc-panels:hover .svc-panel.is-open:not(:hover) { flex:0 0 70px; min-width:70px; }
}

/* Service page hero: keep the H1 clear of the sticky nav. */
.page-head { padding-top:64px; }
.page-head h1 { scroll-margin-top:96px; }

/* Services hub cards: give the summary room and keep cards even. */
.svc-grid .svc { display:flex; flex-direction:column; }
.svc-grid .svc p { flex:1 1 auto; }

/* ---------- 9. Spacing clean-up ---------- */
/* page-head already carries 50px of bottom padding; the section after it does
   not need a further 110px on top. */
.page-head + .section-pad,
.page-head + section .section-pad { padding-top:26px; }
.page-head + .wrap { margin-top:26px; }
.service-body { padding-top:26px; }

/* ---------- 10. Service page body formatting ---------- */
/* The wrap stays full width so the left edge lines up with the H1 above;
   the readable line length is capped on the content itself instead. */
.service-body .wrap { max-width:var(--maxw); }
.service-body .wrap > * { max-width:880px; margin-left:0; margin-right:auto; }

.service-body > .wrap > p:first-child {
  font-size:19px; line-height:1.65; color:var(--text);
  padding:26px 30px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}

.service-body h2 {
  font-size:clamp(26px,3.2vw,36px);
  margin:56px 0 20px; padding-top:26px;
  border-top:1px solid var(--line-2);
}
.service-body h2:first-of-type { margin-top:48px; }

.service-body h3 {
  font-size:19px; margin:26px 0 8px; color:var(--text);
}

.service-body p { color:var(--muted); font-size:17px; line-height:1.7; margin-bottom:16px; }

/* "What is included" — gradient tick list */
.service-body ul { list-style:none; display:grid; gap:12px; margin:0 0 8px; padding:0; }
.service-body ul li {
  position:relative; padding:14px 18px 14px 50px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text); font-size:16px; line-height:1.55;
}
.service-body ul li::before {
  content:""; position:absolute; left:18px; top:19px;
  width:16px; height:16px; border-radius:50%; background:var(--grad);
}
.service-body ul li::after {
  content:""; position:absolute; left:22.5px; top:23px;
  width:6px; height:3px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}

/* "How we work" — numbered steps */
.service-body ol { list-style:none; counter-reset:zearch-step; display:grid; gap:14px; margin:0; padding:0; }
.service-body ol li {
  counter-increment:zearch-step;
  position:relative; padding:16px 20px 16px 64px;
  background:var(--surface-2); border-radius:var(--radius-sm);
  color:var(--text); font-size:16px; line-height:1.6;
}
.service-body ol li::before {
  content:counter(zearch-step,decimal-leading-zero);
  position:absolute; left:20px; top:16px;
  font-family:'Figtree',sans-serif; font-weight:800; font-size:15px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* FAQ pairs read as cards */
.service-body h3 + p {
  padding:0 0 22px; margin-bottom:22px;
  border-bottom:1px solid var(--line-2);
}
.service-body h3 + p:last-child { border-bottom:none; }

@media (max-width:720px){
  .service-body > .wrap > p:first-child { font-size:17px; padding:20px 22px; }
  .service-body h2 { margin:40px 0 16px; }
}

/* ---------- 11. Panel hit zones ---------- */
/* With JS zones active, hovering is driven by fixed-width invisible zones, so
   the panel under the cursor never slides out from under it. */
.svc-panels { position:relative; }
.svc-panels-zones { position:absolute; inset:0; z-index:5; display:flex; }
.svc-panels-zones a { flex:1 1 0; display:block; }

@media (min-width:981px){
  .svc-panels.has-zones .svc-panel:hover:not(.is-open) { flex:0 0 70px; min-width:70px; box-shadow:var(--shadow-sm); }
  .svc-panels.has-zones .svc-panel:hover:not(.is-open) .svc-panel-title {
    writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; font-size:22px;
  }
  .svc-panels.has-zones .svc-panel:hover:not(.is-open) .svc-panel-body { opacity:0; max-height:0; }
  .svc-panels.has-zones .svc-panel:hover:not(.is-open) .svc-panel-cue { opacity:1; }

  .svc-panels.has-zones:hover .svc-panel.is-open,
  .svc-panels.has-zones .svc-panel.is-open { flex:1 1 420px; min-width:330px; box-shadow:var(--shadow); }
  .svc-panels.has-zones:hover .svc-panel.is-open .svc-panel-title,
  .svc-panels.has-zones .svc-panel.is-open .svc-panel-title {
    writing-mode:horizontal-tb; transform:none; white-space:normal; font-size:27px;
  }
  .svc-panels.has-zones:hover .svc-panel.is-open .svc-panel-body,
  .svc-panels.has-zones .svc-panel.is-open .svc-panel-body { opacity:1; max-height:360px; }
  .svc-panels.has-zones:hover .svc-panel.is-open .svc-panel-cue { opacity:0; }
}

@media (max-width:980px){
  .svc-panels-zones { display:none; }
}

/* ---------- 12. Logo and hero heading ---------- */
.logo-text { font-family:'Figtree',sans-serif; font-weight:800; font-size:24px; letter-spacing:-.02em; color:var(--text); }
.footer .logo-text { color:#fff; }

/* Slide 2 carries the same look as the H1 without being a second H1,
   which would confuse crawlers about the page's actual heading. */
.hero-slide .hero-h1 {
  font-family:'Figtree',sans-serif; font-weight:800;
  font-size:clamp(42px,6vw,80px); line-height:1.06; letter-spacing:-.025em;
  color:var(--text); margin-bottom:26px;
}

.footer .socials { margin-top:20px; }


/* =========================================================
   13. Mobile service panels — authoritative, last in the file
   On phones and tablets the row becomes simple stacked cards:
   no vertical text, no collapsing, no hover behaviour.
   ========================================================= */
@media (max-width:980px){
  .svc-panels {
    display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
    min-height:0; flex-wrap:initial;
  }
  .svc-panels .svc-panel,
  .svc-panels .svc-panel:hover,
  .svc-panels .svc-panel:focus-within,
  .svc-panels .svc-panel.is-open,
  .svc-panels.has-zones .svc-panel,
  .svc-panels.has-zones .svc-panel:hover:not(.is-open),
  .svc-panels.has-zones .svc-panel.is-open {
    flex:initial; min-width:0; width:auto; min-height:0;
    box-shadow:var(--shadow-sm);
  }
  .svc-panels .svc-panel-trigger { padding:24px 22px 0; justify-content:flex-start; }

  .svc-panels .svc-panel-title,
  .svc-panels .svc-panel:hover .svc-panel-title,
  .svc-panels.has-zones .svc-panel .svc-panel-title,
  .svc-panels.has-zones .svc-panel:hover:not(.is-open) .svc-panel-title,
  .svc-panels.has-zones .svc-panel.is-open .svc-panel-title {
    writing-mode:horizontal-tb; transform:none; white-space:normal;
    font-size:20px; line-height:1.2; margin-bottom:10px;
  }

  .svc-panels .svc-panel-body,
  .svc-panels .svc-panel:hover .svc-panel-body,
  .svc-panels.has-zones .svc-panel .svc-panel-body,
  .svc-panels.has-zones .svc-panel:hover:not(.is-open) .svc-panel-body,
  .svc-panels.has-zones .svc-panel.is-open .svc-panel-body {
    opacity:1; max-height:none; overflow:visible;
  }
  .svc-panels .svc-panel-body p { font-size:14.5px; line-height:1.55; max-width:none; margin:0 0 14px; }
  .svc-panels .svc-panel-cue { display:none; }
  .svc-panels-zones { display:none; }
  .svc-panels-hint { display:none; }
}

@media (max-width:640px){
  .svc-panels { grid-template-columns:1fr; }
  .svc-panels .svc-panel-trigger { padding:22px 20px 0; }
  .svc-panels .svc-panel-title { font-size:19px; }
}

/* ---------- 14. Other mobile tidy-ups ---------- */
@media (max-width:720px){
  /* Hero: the rotating word was overflowing narrow screens. */
  .hero-slide .hero-h1 { font-size:clamp(32px,8.5vw,46px); }
  .word-rotator { display:block; }
  .word-rotator .word { white-space:normal; }

  /* Dots sit closer to the copy on small screens. */
  .hero-dots { margin-top:22px; }

  /* Breadcrumb pill can run past the viewport on long page titles. */
  .crumb { max-width:100%; flex-wrap:wrap; row-gap:4px; }
  .crumb ol { flex-wrap:wrap; row-gap:4px; }

  /* Service body cards need less inset on phones. */
  .service-body ul li { padding:12px 16px 12px 44px; }
  .service-body ol li { padding:14px 16px 14px 56px; }
}

/* =========================================================
   15. Mobile hero — stop the horizontal overflow
   Grid items default to min-width:auto, so a wide child can push a column
   past the viewport. Everything below pins the hero to the screen width.
   overflow-x:clip is used rather than hidden because hidden breaks the
   sticky nav.
   ========================================================= */
html { overflow-x:clip; }
body { overflow-x:clip; max-width:100%; }

@media (max-width:980px){
  .hero-grid { grid-template-columns:minmax(0,1fr); gap:40px; }
  .hero-grid > * { min-width:0; max-width:100%; }

  .hero-slides,
  .hero-slide,
  .hero-slide .lead,
  .hero-slide .hero-h1,
  .hero h1 { min-width:0; max-width:100%; }

  .hero-slide .lead { max-width:100%; }

  .hero-visual {
    width:100%; max-width:min(420px,100%);
    margin-inline:auto; min-width:0;
  }

  .hero-cta { flex-wrap:wrap; }
  .hero-cta .btn { flex:1 1 200px; justify-content:center; text-align:center; }

  .word-rotator { display:block; max-width:100%; }
  .word-rotator .word { white-space:normal; }

  .hero-stats { flex-wrap:wrap; gap:28px 30px; }
  .hero-stat { min-width:0; }
}

@media (max-width:640px){
  /* The orb is decorative and adds nothing on a phone, where it is the main
     source of width pressure. Hidden rather than shrunk. */
  .hero-visual { display:none; }
  .hero { padding:72px 0 56px; }
  .hero-slide .lead { font-size:17px; }
  .hero-cta .btn { flex:1 1 100%; }
  .marquee, .marquee-track { max-width:100vw; }
}

/* =========================================================
   16. Rotating word: gradient applied per word, not on the wrapper
   Safari and iOS apply background-clip:text only to the element that
   directly contains the text. The wrapper held the gradient while the
   words sat in child spans, so on iPhone the spans inherited
   transparent fill with no gradient behind them and vanished.
   ========================================================= */
.word-rotator {
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  -webkit-text-fill-color:currentColor;
  color:inherit;
}
.word-rotator .word {
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* Keep the words stacked in one cell at every width, so only the active one
   occupies space. display:block broke that stacking on phones. */
.word-rotator,
.hero-slide .word-rotator {
  display:inline-grid; vertical-align:bottom; max-width:100%;
}
.word-rotator .word { white-space:normal; }

/* =========================================================
   17. Hide the decorative chart on every small screen
   It is an illustration of a dashboard, not real data, and on phones and
   tablets it costs height and width without adding anything.
   ========================================================= */
@media (max-width:980px){
  .hero-visual { display:none; }
  .hero-grid { gap:0; }
}

/* ---------- 18. About page story split ---------- */
.split > div { min-width:0; }


/* ---------- 19. Growth engine illustration ---------- */
.zd-engine { width:100%; max-width:520px; margin-inline:auto; }
.zd-engine svg { display:block; width:100%; height:auto; }

.zd-eyebrow {
  font-family:'Figtree',sans-serif; font-size:13px; font-weight:800;
  letter-spacing:.14em; fill:var(--muted-2);
}
.zd-chips text {
  font-family:'Figtree',sans-serif; font-size:14.5px; font-weight:700; fill:#fff;
}
.zd-chips rect { filter:drop-shadow(0 8px 12px rgba(95,40,140,.18)); }

/* transform-box keeps every transform relative to the element's own box,
   not the SVG viewport. Without it the bars scale from the canvas edge and
   slide out of the card. */
.zd-bar, .zd-wave, .zd-sweep, .zd-bob, .zd-ringrot {
  transform-box:fill-box; transform-origin:50% 50%;
}
.zd-bar { transform-origin:50% 100%; }
.zd-ringrot { transform-box:view-box; transform-origin:280px 250px; }

.zd-ringrot { animation:zd-spin 52s linear infinite; }
@keyframes zd-spin { to { transform:rotate(360deg); } }

.zd-bob { animation:zd-bob 6.5s ease-in-out infinite; }
.zd-bob.d1{animation-delay:-2.2s}.zd-bob.d2{animation-delay:-4.4s}
@keyframes zd-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

.zd-wave { animation:zd-ripple 4s ease-out infinite; }
.zd-wave.w2{animation-delay:-1.33s}.zd-wave.w3{animation-delay:-2.66s}
@keyframes zd-ripple { 0%{opacity:.5;transform:scale(.35)} 100%{opacity:0;transform:scale(1)} }

.zd-sweep { animation:zd-spin 9s linear infinite; }

.zd-bar { animation:zd-grow 6s ease-in-out infinite; }
.zd-bar.b1{animation-delay:-.3s}.zd-bar.b2{animation-delay:-.6s}.zd-bar.b3{animation-delay:-.9s}
.zd-bar.b4{animation-delay:-1.2s}.zd-bar.b5{animation-delay:-1.5s}
@keyframes zd-grow { 0%,100%{transform:scaleY(.3)} 50%{transform:scaleY(1)} }

.zd-draw { stroke-dasharray:420; stroke-dashoffset:420; animation:zd-draw 6s ease-in-out infinite; }
@keyframes zd-draw {
  0%{stroke-dashoffset:420}
  45%{stroke-dashoffset:0}
  85%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}

@media (max-width:980px){
  .zd-engine { max-width:440px; margin-top:8px; }
}

@media (prefers-reduced-motion: reduce){
  .zd-ringrot,.zd-bob,.zd-wave,.zd-sweep,.zd-bar,.zd-draw { animation:none; }
  .zd-draw { stroke-dashoffset:0; }
  .zd-travel { display:none; }
  .zd-wave { opacity:.25; }
}

/* =========================================================
   20. Navigation bar
   Kept light, as on the original design. The logo wordmark is a light
   colour in the source file, so it needs a dark-lettered version uploaded
   at Appearance > Customize > Site Identity to be legible here.
   ========================================================= */
.nav { overflow:visible; }

/* =========================================================
   21. Services mega menu
   Three zones divided by hairlines: intro, numbered list, feature card.
   Opens on hover, on tap for touch, and on keyboard focus.
   ========================================================= */
.nav-links .has-mega { position:static; }
.mega-caret {
  display:inline-block; width:7px; height:7px; margin-left:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .25s var(--ease);
}
.has-mega.is-open > a .mega-caret { transform:translateY(1px) rotate(-135deg); }

.mega {
  position:absolute; left:0; right:0; top:100%;
  background:var(--violet);
  color:#fff;
  box-shadow:0 34px 70px -34px rgba(40,12,70,.55);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  z-index:60;
}
.has-mega.is-open .mega,
.has-mega:focus-within .mega {
  opacity:1; visibility:visible; transform:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;
}

.mega-inner {
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1.15fr 360px;
}
.mega-col { padding:42px 40px; }
.mega-col + .mega-col { border-left:1px solid rgba(255,255,255,.14); }
.mega-feature { padding:26px 30px; display:flex; align-items:stretch; }

/* --- intro --- */
.mega-heading {
  font-family:'Figtree',sans-serif; font-size:26px; font-weight:800;
  line-height:1.2; letter-spacing:-.02em; color:#fff; margin:0 0 14px; max-width:15ch;
}
.mega-blurb { font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.72); margin:0 0 24px; max-width:38ch; }
.mega-btn {
  display:inline-block; padding:12px 24px; border-radius:6px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.4);
  color:#fff; font-family:'Figtree',sans-serif; font-weight:700; font-size:14px;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.mega-btn::after { content:none; }
.mega-btn:hover, .mega-btn:focus-visible { background:#fff; color:var(--violet); }

/* --- numbered list --- */
.mega-list { display:grid; grid-template-columns:repeat(2,1fr); gap:2px 20px; align-content:start; }
.mega-item {
  display:flex; align-items:baseline; gap:14px;
  padding:9px 10px 9px 0; border-radius:6px;
  transition:padding-left .2s var(--ease);
}
.mega-item::after { content:none; }
.mega-item:hover, .mega-item:focus-visible { padding-left:8px; }
.mega-num {
  font-family:'Figtree',sans-serif; font-size:12.5px; font-weight:700;
  color:rgba(255,255,255,.45); letter-spacing:.06em; min-width:20px;
}
.mega-item-title {
  font-family:'Figtree',sans-serif; font-size:15.5px; font-weight:600;
  color:rgba(255,255,255,.9); line-height:1.35;
}
.mega-item:hover .mega-item-title { color:#fff; }
.mega-item:hover .mega-num { color:var(--spark); }
.mega-item-all .mega-item-title { color:var(--spark); }

/* --- feature card --- */
.mega-feature-card {
  position:relative; overflow:hidden; width:100%;
  border-radius:12px; background:linear-gradient(150deg,#8B35B2 0%,#4A1B6E 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:26px; min-height:220px;
}
.mega-feature-art { position:absolute; inset:0; opacity:.5; }
.mfa-ring {
  position:absolute; border:1px solid rgba(255,255,255,.35); border-radius:50%;
  top:-40px; right:-30px;
}
.mfa-ring.r1 { width:150px; height:150px; }
.mfa-ring.r2 { width:210px; height:210px; top:-70px; right:-60px; }
.mfa-ring.r3 { width:270px; height:270px; top:-100px; right:-90px; opacity:.6; }
.mfa-bar { position:absolute; bottom:86px; width:12px; border-radius:3px; background:rgba(255,255,255,.55); }
.mfa-bar.b1 { left:30px;  height:26px; }
.mfa-bar.b2 { left:50px;  height:44px; }
.mfa-bar.b3 { left:70px;  height:34px; }
.mfa-bar.b4 { left:90px;  height:62px; background:var(--spark); }
.mega-feature-body { position:relative; z-index:2; }
.mega-feature-body h3 {
  font-family:'Figtree',sans-serif; font-size:19px; font-weight:800; color:#fff; margin:0 0 6px;
}
.mega-feature-body p { font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.8); margin:0 0 16px; }
.mega-feature-btn {
  display:inline-block; padding:11px 20px; border-radius:6px;
  background:#fff; color:var(--violet);
  font-family:'Figtree',sans-serif; font-weight:700; font-size:13.5px;
}
.mega-feature-btn::after { content:none; }
.mega-feature-btn:hover { background:var(--spark); color:#2A0E04; }

@media (max-width:1180px){
  .mega-inner { grid-template-columns:1fr 1.1fr; }
  .mega-feature { display:none; }
}
@media (max-width:1040px){
  .mega-col { padding:30px 28px; }
  .mega-list { grid-template-columns:1fr; }
}

@media (max-width:980px){
  .mega {
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; background:transparent; color:inherit; display:none;
  }
  .has-mega.is-open .mega { display:block; }
  .mega-inner { display:block; }
  .mega-col { padding:2px 0 8px; }
  .mega-col + .mega-col { border-left:none; }
  .mega-intro, .mega-feature { display:none; }
  .mega-list { display:block; }
  .mega-item { padding:10px 0; }
  .mega-num { display:none; }
  .mega-item-title { color:var(--text); font-size:15px; }
}

/* =========================================================
   22. Service panels open on click, not hover
   The hover rules in sections 4 and 7 are neutralised here, so a panel only
   expands when it carries .is-open, which the script sets on click.
   ========================================================= */
@media (min-width:981px){
  .svc-panels .svc-panel:hover:not(.is-open),
  .svc-panels .svc-panel:focus-within:not(.is-open),
  .svc-panels.has-zones .svc-panel:hover:not(.is-open) {
    flex:0 0 70px; min-width:70px; box-shadow:var(--shadow-sm);
  }
  .svc-panels .svc-panel:hover:not(.is-open) .svc-panel-title,
  .svc-panels .svc-panel:focus-within:not(.is-open) .svc-panel-title {
    writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; font-size:22px;
  }
  .svc-panels .svc-panel:hover:not(.is-open) .svc-panel-body,
  .svc-panels .svc-panel:focus-within:not(.is-open) .svc-panel-body {
    opacity:0; max-height:0;
  }
  .svc-panels .svc-panel:hover:not(.is-open) .svc-panel-cue { opacity:1; }

  /* the open panel stays open regardless of where the pointer is */
  .svc-panels:hover .svc-panel.is-open:not(:hover),
  .svc-panels.has-zones:hover .svc-panel.is-open:not(:hover) {
    flex:1 1 420px; min-width:330px; box-shadow:var(--shadow);
  }
  .svc-panels:hover .svc-panel.is-open:not(:hover) .svc-panel-title,
  .svc-panels.has-zones:hover .svc-panel.is-open:not(:hover) .svc-panel-title {
    writing-mode:horizontal-tb; transform:none; white-space:normal; font-size:27px;
  }
  .svc-panels:hover .svc-panel.is-open:not(:hover) .svc-panel-body,
  .svc-panels.has-zones:hover .svc-panel.is-open:not(:hover) .svc-panel-body {
    opacity:1; max-height:360px;
  }
  .svc-panels .svc-panel.is-open .svc-panel-cue { opacity:0; }

  /* the collapsed panels show a chevron, since clicking is less discoverable
     than hovering */
  .svc-panel-cue { cursor:pointer; }
  .svc-panel-trigger { cursor:pointer; }
}

/* =========================================================
   23. Deep orchid palette
   Every colour in styles.css comes from these tokens, so redefining them
   here re-skins the whole site: buttons, gradients, panels, the growth
   engine, charts and the footer.
   ========================================================= */
:root{
  --bg:        #FBF9FD;   /* page, a cool off-white instead of warm cream */
  --bg-2:      #F3EBFA;   /* faint orchid tint */
  --surface:   #FFFFFF;
  --surface-2: #F5EEFB;   /* tinted tile */
  --text:      #1E1030;   /* aubergine near-black */
  --muted:     #5F5570;
  --muted-2:   #8E85A0;

  --magenta:   #7A2E9E;   /* orchid, the lead colour */
  --violet:    #3B1560;   /* aubergine, the deep end */
  --accent:    #7A2E9E;
  --coral:     #5B2280;   /* mid purple, used for alternating fills */

  --grad:      linear-gradient(120deg, #7A2E9E 0%, #5B2280 48%, #3B1560 100%);
  --grad-soft: linear-gradient(135deg, rgba(122,46,158,.12), rgba(59,21,96,.12));

  --dark:      #24103A;   /* footer block */
  --line:      rgba(30,16,48,.10);
  --line-2:    rgba(30,16,48,.06);

  --shadow:    0 26px 60px -28px rgba(70,25,110,.32);
  --shadow-sm: 0 10px 30px -14px rgba(70,25,110,.24);

  /* The coral is the thing that stops this looking like every other purple
     site. Used sparingly: eyebrows, stat figures, link hovers, one badge. */
  --spark:     #FF7A59;
  --spark-ink: #C2451F;
}

/* Eyebrow labels carry the coral, which lifts an otherwise monochrome page. */
.eyebrow { color:var(--spark-ink); }
.eyebrow::before { background:var(--spark); }

/* Stat figures: coral rather than gradient, so the numbers read instantly. */
.hero-stat .num, .stat-box .num { color:var(--spark-ink); }
.hero-stat .num span, .stat-box .num span { color:inherit; }

/* Link hover in the footer and breadcrumb picks up the accent. */
.crumb a:hover { color:var(--spark-ink); }
.footer a:hover { color:var(--spark); }

/* The NEW badge in the hero tag. */
.hero-tag b { background:var(--spark); color:#2A0E04; }

/* Ghost buttons get a subtle orchid edge rather than plain grey. */
.btn-ghost { border-color:rgba(122,46,158,.28); }
.btn-ghost:hover { border-color:rgba(122,46,158,.55); background:rgba(122,46,158,.05); }


/* =========================================================
   24. Service panels: button to open, link only inside
   The whole panel used to be an anchor, so the browser showed a target URL
   on hover and a stray click could navigate. Now the panel opens with a
   button and the only link is the CTA inside the open body.
   ========================================================= */
.svc-panel { display:flex; flex-direction:column; }

.svc-panel-trigger {
  position:relative; z-index:2;
  flex:1 1 auto; width:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:30px 26px 0;
  background:none; border:0; margin:0;
  font:inherit; color:#fff; text-align:left; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.svc-panel-trigger:focus-visible { outline:2px solid #fff; outline-offset:-4px; border-radius:var(--radius); }

.svc-panel-body {
  position:relative; z-index:2;
  padding:0 26px 30px;
  color:#fff;
}

.svc-panel-link {
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border-radius:100px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.45);
  color:#fff; font-family:'Figtree',sans-serif; font-weight:700; font-size:14px;
  line-height:1; white-space:nowrap;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.svc-panel-link::after { content:"\2192"; transition:transform .25s var(--ease); }
.svc-panel-link:hover, .svc-panel-link:focus-visible {
  background:#fff; border-color:#fff; color:var(--violet);
}
.svc-panel-link:hover::after { transform:translateX(4px); }

/* The cue sits on the trigger now. */
.svc-panel-cue { pointer-events:none; }

@media (min-width:981px){
  /* collapsed: no padding pressure from the body */
  .svc-panel:not(.is-open) .svc-panel-body { padding-top:0; padding-bottom:0; }
  .svc-panel.is-open .svc-panel-body { padding-bottom:30px; }
}

@media (max-width:980px){
  .svc-panel-trigger { padding:24px 22px 0; flex:0 0 auto; }
  .svc-panel-body { padding:0 22px 24px; }
  .svc-panel-link { margin-top:4px; }
}


/* =========================================================
   25. Mega menu contrast
   Specificity note, since this is what broke twice:
     .nav-links .mega a:hover            = 2 classes + 1 pseudo + 1 element
     .nav-links .mega-btn:hover          = 3 classes
   The first wins, so a blanket "all links are white" rule overrode the
   buttons and left white text on a white pill. The blanket rule now excludes
   the buttons, and each button sets its own colour at a higher specificity.
   ========================================================= */

/* Links inside the panel, excluding the two buttons. */
.nav-links .mega a:not(.mega-btn):not(.mega-feature-btn),
.nav-links .mega a:not(.mega-btn):not(.mega-feature-btn):hover,
.nav-links .mega a:not(.mega-btn):not(.mega-feature-btn):focus-visible { color:#fff; }

.nav-links .mega a::after { content:none; }

/* List items: a soft wash, never a solid light block. */
.nav-links .mega-item:hover,
.nav-links .mega-item:focus-visible { background:rgba(255,255,255,.08); border-radius:6px; }
.nav-links .mega-item .mega-item-title { color:rgba(255,255,255,.9); }
.nav-links .mega-item:hover .mega-item-title,
.nav-links .mega-item:focus-visible .mega-item-title { color:#fff; }
.nav-links .mega-item:hover .mega-num,
.nav-links .mega-item:focus-visible .mega-num { color:var(--spark); }
.nav-links .mega-item-all .mega-item-title,
.nav-links .mega-item-all:hover .mega-item-title { color:var(--spark); }

/* Explore services: outlined on the panel, inverts on hover. */
.nav-links .mega a.mega-btn {
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
}
.nav-links .mega a.mega-btn:hover,
.nav-links .mega a.mega-btn:focus-visible {
  background:#fff;
  border-color:#fff;
  color:#3B1560;
}

/* Feature card button: white pill, aubergine text, coral on hover. */
.nav-links .mega a.mega-feature-btn {
  background:#fff;
  color:#3B1560;
}
.nav-links .mega a.mega-feature-btn:hover,
.nav-links .mega a.mega-feature-btn:focus-visible {
  background:#FF7A59;
  color:#2A0E04;
}

/* =========================================================
   26. Redesigned service pages (zsvc-)
   ========================================================= */
.wrap-narrow { max-width:820px; }

/* --- hero --- */
.zsvc-hero { position:relative; padding:56px 0 64px; overflow:hidden; }
.zsvc-hero-glow {
  position:absolute; top:-160px; right:-120px; width:560px; height:560px; z-index:0;
  background:radial-gradient(circle, rgba(122,46,158,.20), rgba(122,46,158,0) 68%);
  pointer-events:none;
}
.zsvc-hero .wrap { position:relative; z-index:1; }
.zsvc-hero-eyebrow { margin-bottom:16px; }
.zsvc-hero h1 { font-size:clamp(34px,5.2vw,60px); line-height:1.05; letter-spacing:-.03em; max-width:16ch; margin:0 0 20px; }
.zsvc-hero-lead { font-size:clamp(17px,1.4vw,19px); line-height:1.6; color:var(--muted); max-width:62ch; margin:0 0 30px; }
.zsvc-hero-actions { display:flex; gap:14px; flex-wrap:wrap; }

/* --- problem --- */
.zsvc-problem-grid { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.zsvc-problem h2 { font-size:clamp(26px,3.2vw,38px); letter-spacing:-.02em; margin:0 0 16px; }
.zsvc-problem p { font-size:17px; line-height:1.7; color:var(--muted); }
.zsvc-journey { display:flex; flex-wrap:wrap; gap:10px; }
.zsvc-journey-node {
  position:relative; padding:12px 18px; border-radius:100px;
  background:var(--surface); border:1px solid var(--line);
  font-family:'Figtree',sans-serif; font-weight:600; font-size:14.5px; color:var(--text);
  box-shadow:var(--shadow-sm);
}
.zsvc-journey-node:not(:last-child) { margin-right:26px; }
.zsvc-journey-node:not(:last-child)::after {
  content:""; position:absolute; right:-20px; top:50%;
  width:13px; height:2px; background:linear-gradient(90deg,var(--magenta),var(--violet));
  transform:translateY(-50%); border-radius:2px;
}
.zsvc-journey-node:not(:last-child)::before {
  content:""; position:absolute; right:-20px; top:50%; z-index:2;
  width:6px; height:6px;
  border-top:2px solid var(--violet); border-right:2px solid var(--violet);
  transform:translateY(-50%) rotate(45deg);
}

/* --- capability cards --- */
.zsvc-cap-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.zsvc-cap {
  padding:26px 24px; border-radius:var(--radius); background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.zsvc-cap:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(122,46,158,.3); }
.zsvc-cap h3 { font-size:19px; margin:0 0 8px; }
.zsvc-cap > p { font-size:14.5px; line-height:1.55; color:var(--muted); margin:0 0 14px; }
.zsvc-cap ul { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.zsvc-cap ul li { position:relative; padding-left:20px; font-size:13.5px; color:var(--text); line-height:1.45; }
.zsvc-cap ul li::before {
  content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:50%;
  background:var(--grad);
}

/* --- flow: a clean connected timeline, no floating shapes --- */
.zsvc-flow {
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:0;
  justify-content:center;
}
.zsvc-flow-step { position:relative; display:flex; align-items:center; }
.zsvc-flow-step > span:first-child {
  position:relative; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:13px 22px; border-radius:14px; margin:8px 0;
  background:var(--grad); color:#fff;
  font-family:'Figtree',sans-serif; font-weight:700; font-size:14.5px; text-align:center;
  box-shadow:0 8px 20px -12px rgba(70,25,110,.5);
}
/* connector between pills: a short rail and a chevron, sitting in a fixed gap */
.zsvc-flow-step:not(:last-child) { margin-right:44px; }
.zsvc-flow-step:not(:last-child)::after {
  content:""; position:absolute; right:-38px; top:50%; z-index:1;
  width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--magenta), var(--violet));
  transform:translateY(-50%);
}
.zsvc-flow-head {
  position:absolute; right:-18px; top:50%; z-index:2;
  width:8px; height:8px;
  border-top:2.5px solid var(--violet); border-right:2.5px solid var(--violet);
  transform:translateY(-50%) rotate(45deg);
}
/* a coral pip travels the rail on a gentle loop */
.zsvc-flow-step:not(:last-child) > span:first-child::after {
  content:""; position:absolute; right:-38px; top:50%; z-index:3;
  width:6px; height:6px; border-radius:50%; background:var(--spark);
  box-shadow:0 0 6px rgba(255,122,89,.7);
  transform:translateY(-50%);
  animation:zsvc-pip 2.8s var(--ease) infinite;
  animation-delay:calc(var(--i) * .18s);
}
@keyframes zsvc-pip {
  0%   { right:-38px; opacity:0; }
  25%  { opacity:1; }
  75%  { opacity:1; }
  100% { right:-16px; opacity:0; }
}

/* --- metrics --- */
.zsvc-metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.zsvc-metric {
  padding:28px 24px; border-radius:var(--radius); text-align:center;
  background:var(--surface-2); border:1px solid var(--line-2);
}
.zsvc-metric-label { font-family:'Figtree',sans-serif; font-weight:700; font-size:17px; color:var(--text); }

/* --- process --- */
.zsvc-steps { list-style:none; margin:0; padding:0; display:grid; gap:0; max-width:820px; }
.zsvc-step { display:flex; gap:24px; padding:24px 0; border-top:1px solid var(--line-2); }
.zsvc-step:first-child { border-top:none; }
.zsvc-step-num {
  font-family:'Figtree',sans-serif; font-weight:800; font-size:22px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; min-width:44px;
}
.zsvc-step h3 { font-size:19px; margin:0 0 5px; }
.zsvc-step p { font-size:15.5px; line-height:1.6; color:var(--muted); margin:0; }

/* --- related --- */
.zsvc-related { background:var(--surface-2); }
.zsvc-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.zsvc-related-card {
  display:flex; flex-direction:column; gap:8px; padding:24px;
  border-radius:var(--radius); background:var(--surface); border:1px solid var(--line);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.zsvc-related-card::after { content:none; }
.zsvc-related-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.zsvc-related-title { font-family:'Figtree',sans-serif; font-weight:700; font-size:17px; color:var(--text); }
.zsvc-related-desc { font-size:13.5px; line-height:1.5; color:var(--muted); }
.zsvc-related-go { position:relative; width:20px; height:12px; margin-top:auto; }
.zsvc-related-go::before {
  content:""; position:absolute; left:0; top:5px; width:16px; height:2px;
  background:var(--magenta); border-radius:2px;
  transition:width .25s var(--ease), transform .25s var(--ease);
}
.zsvc-related-go::after {
  content:""; position:absolute; left:10px; top:1px; width:8px; height:8px;
  border-top:2px solid var(--magenta); border-right:2px solid var(--magenta);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.zsvc-related-card:hover .zsvc-related-go::before { width:20px; }
.zsvc-related-card:hover .zsvc-related-go::after { transform:rotate(45deg) translate(2px,-2px); }

/* --- FAQ accordion --- */
.zsvc-accordion { display:grid; gap:12px; }
.zsvc-acc-item {
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface);
  overflow:hidden;
}
.zsvc-acc-item summary {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; cursor:pointer; list-style:none;
  font-family:'Figtree',sans-serif; font-weight:700; font-size:16.5px; color:var(--text);
}
.zsvc-acc-item summary::-webkit-details-marker { display:none; }
.zsvc-acc-icon { position:relative; width:16px; height:16px; flex:0 0 16px; }
.zsvc-acc-icon::before, .zsvc-acc-icon::after {
  content:""; position:absolute; background:var(--magenta); border-radius:2px;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.zsvc-acc-icon::before { top:7px; left:0; width:16px; height:2px; }
.zsvc-acc-icon::after { top:0; left:7px; width:2px; height:16px; }
.zsvc-acc-item[open] .zsvc-acc-icon::after { transform:rotate(90deg); opacity:0; }
.zsvc-acc-body { padding:0 22px 20px; }
.zsvc-acc-body p { margin:0; font-size:15.5px; line-height:1.7; color:var(--muted); }

/* --- final CTA --- */
.zsvc-final {
  position:relative; overflow:hidden; text-align:center;
  padding:64px 40px; border-radius:var(--radius);
  background:var(--grad); color:#fff; margin-bottom:20px;
}
.zsvc-final .eyebrow { color:rgba(255,255,255,.85); }
.zsvc-final .eyebrow::before { background:#fff; }
.zsvc-final h2 { font-size:clamp(28px,4vw,44px); letter-spacing:-.02em; margin:0 0 12px; color:#fff; }
.zsvc-final p { font-size:18px; color:rgba(255,255,255,.85); margin:0 0 28px; }
.zsvc-final-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Primary CTA on the gradient panel: white pill, violet text.
   Specificity has to beat .btn-primary:not(.cta-banner .btn-primary) from
   section 25, so both the panel class and the button class are named, plus a
   :not() to match its weight and win on source order. */
.zsvc-final .btn.btn-primary:not(.cta-banner .btn-primary),
.zsvc-final .btn.btn-primary:not(.cta-banner .btn-primary):hover,
.zsvc-final .btn.btn-primary:not(.cta-banner .btn-primary):focus-visible {
  background:#fff !important;
  color:var(--violet) !important;
}
.zsvc-final .btn.btn-primary .btn-arrow::before { background:var(--violet); }
.zsvc-final .btn.btn-primary .btn-arrow::after {
  background:transparent; border-top-color:var(--violet); border-right-color:var(--violet);
}

/* Secondary CTA on the gradient panel: outlined white. */
.zsvc-final .btn.btn-ghost,
.zsvc-final .btn.btn-ghost-invert,
.zsvc-final .btn.btn-ghost-invert:hover,
.zsvc-final .btn.btn-ghost-invert:focus-visible {
  border-color:rgba(255,255,255,.55);
  color:#fff !important;
  background:transparent;
}
.zsvc-final .btn.btn-ghost-invert:hover,
.zsvc-final .btn.btn-ghost-invert:focus-visible {
  border-color:#fff; background:rgba(255,255,255,.12);
}

/* --- responsive --- */
@media (max-width:900px){
  .zsvc-problem-grid { grid-template-columns:1fr; gap:28px; }
  .zsvc-cap-grid, .zsvc-metric-grid, .zsvc-related-grid { grid-template-columns:repeat(2,1fr); }
  .zsvc-flow { justify-content:flex-start; }
}
@media (max-width:600px){
  .zsvc-cap-grid, .zsvc-metric-grid, .zsvc-related-grid { grid-template-columns:1fr; }
  .zsvc-hero { padding:40px 0 48px; }
  .zsvc-step { gap:16px; }
  .zsvc-final { padding:44px 24px; }
  .zsvc-flow-step span { font-size:14px; padding:12px 16px; }
}

/* =========================================================
   27. Drawn button chevron (replaces the → glyph everywhere)
   An empty .btn-arrow span becomes a small chevron drawn in CSS, so buttons
   keep a direction cue without a literal arrow character.
   ========================================================= */
.btn-arrow {
  display:inline-block; width:16px; height:9px; position:relative; margin-left:2px;
}
.btn-arrow::before {
  content:""; position:absolute; left:0; top:3.5px; width:11px; height:2px;
  background:currentColor; border-radius:2px;
  transition:width .25s var(--ease), transform .25s var(--ease);
}
.btn-arrow::after {
  content:""; position:absolute; left:7px; top:0.5px; width:7px; height:7px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.btn:hover .btn-arrow::before { width:15px; }
.btn:hover .btn-arrow::after { transform:rotate(45deg) translate(2px,-2px); }

/* =========================================================
   28. Interactive touches across service pages
   All CSS, all reduce-motion aware, no libraries.
   ========================================================= */

/* Capability cards: a gradient hairline draws in along the top on hover. */
.zsvc-cap { position:relative; }
.zsvc-cap::before {
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:var(--grad); border-radius:var(--radius) var(--radius) 0 0;
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.zsvc-cap:hover::before { transform:scaleX(1); }

/* Capability list bullets brighten to coral as the card is hovered. */
.zsvc-cap:hover ul li::before { background:var(--spark); }

/* Metric tiles: subtle lift and a coral underline that grows on hover. */
.zsvc-metric { position:relative; overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.zsvc-metric:hover { transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.zsvc-metric::after {
  content:""; position:absolute; left:50%; bottom:0; width:0; height:3px;
  background:var(--grad); transform:translateX(-50%); transition:width .3s var(--ease);
}
.zsvc-metric:hover::after { width:60%; }

/* Process steps: the number badge fills on hover and the row slides slightly. */
.zsvc-step { transition:padding-left .25s var(--ease); }
.zsvc-step:hover { padding-left:8px; }
.zsvc-step-num { transition:transform .25s var(--ease); display:inline-block; }
.zsvc-step:hover .zsvc-step-num { transform:scale(1.12); }

/* Journey chips: gentle stagger float. */
.zsvc-journey-node { transition:transform .25s var(--ease), border-color .25s var(--ease); }
.zsvc-journey-node:hover { transform:translateY(-3px); border-color:rgba(122,46,158,.4); }

/* FAQ: the row tints and the left edge grows a gradient bar when open. */
.zsvc-acc-item { position:relative; transition:border-color .25s var(--ease); }
.zsvc-acc-item::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad); transform:scaleY(0); transform-origin:top;
  transition:transform .3s var(--ease); border-radius:3px 0 0 3px;
}
.zsvc-acc-item[open] { border-color:rgba(122,46,158,.3); }
.zsvc-acc-item[open]::before { transform:scaleY(1); }
.zsvc-acc-item summary { transition:color .2s var(--ease); }
.zsvc-acc-item summary:hover { color:var(--magenta); }
.zsvc-acc-body { animation:zsvc-faq-open .3s var(--ease); }
@keyframes zsvc-faq-open { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* Final CTA: a soft sheen drifts across the gradient. */
.zsvc-final::after {
  content:""; position:absolute; top:-50%; left:-30%; width:60%; height:200%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  transform:skewX(-18deg); animation:zsvc-sheen 6s var(--ease) infinite;
}
@keyframes zsvc-sheen { 0%{left:-40%} 55%,100%{left:120%} }

/* Hero glow breathes very gently. */
.zsvc-hero-glow { animation:zsvc-breathe 6s ease-in-out infinite; }
@keyframes zsvc-breathe { 0%,100%{opacity:.75;transform:scale(1)} 50%{opacity:1;transform:scale(1.06)} }

/* Reveal-on-scroll for these pages: fade and rise. Uses the existing observer
   which adds .in when the element enters the viewport. */
.zsvc .reveal { opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.zsvc .reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .zsvc-flow-step::before,
  .zsvc-final::after,
  .zsvc-hero-glow,
  .zsvc-acc-body { animation:none; }
  .zsvc .reveal { opacity:1; transform:none; transition:none; }
}

/* =========================================================
   29. Services hub (zhub-) and grouped mega menu
   ========================================================= */
.zhub-hero { padding-bottom:40px; }
.head.center { margin-left:auto; margin-right:auto; text-align:center; }
.head.center .eyebrow { display:inline-block; }

.zhub-group { padding:36px 0; }
.zhub-group + .zhub-group { border-top:1px solid var(--line-2); }
.zhub-group-head { display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.zhub-group-num {
  width:38px; height:4px; border-radius:4px; background:var(--grad); flex:0 0 38px;
}
.zhub-group-head h2 { font-size:clamp(22px,2.6vw,30px); margin:0; letter-spacing:-.02em; }

.zhub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.zhub-card {
  display:flex; flex-direction:column; gap:8px; padding:26px 24px;
  border-radius:var(--radius); background:var(--surface); border:1px solid var(--line);
  position:relative; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.zhub-card::after { content:none; }
.zhub-card::before {
  content:""; position:absolute; left:0; top:0; width:100%; height:3px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.zhub-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(122,46,158,.3); }
.zhub-card:hover::before { transform:scaleX(1); }
.zhub-card-title { font-family:'Figtree',sans-serif; font-weight:800; font-size:19px; color:var(--text); }
.zhub-card-promise { font-family:'Figtree',sans-serif; font-weight:600; font-size:14px; color:var(--magenta); }
.zhub-card-desc { font-size:14px; line-height:1.55; color:var(--muted); }
.zhub-card-go { position:relative; width:20px; height:12px; margin-top:6px; }
.zhub-card-go::before { content:""; position:absolute; left:0; top:5px; width:16px; height:2px; background:var(--magenta); border-radius:2px; transition:width .25s var(--ease); }
.zhub-card-go::after { content:""; position:absolute; left:10px; top:1px; width:8px; height:8px; border-top:2px solid var(--magenta); border-right:2px solid var(--magenta); transform:rotate(45deg); }
.zhub-card:hover .zhub-card-go::before { width:20px; }

.zhub-system { background:var(--surface-2); }

/* grouped mega menu */
.mega-group { margin-bottom:14px; }
.mega-group-label {
  display:block; font-family:'Figtree',sans-serif; font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--spark); margin-bottom:4px;
}
.mega-item-grouped { padding:7px 10px 7px 0; }
.mega-item-grouped .mega-item-title { font-size:15px; }
.nav-links .mega-list { column-count:2; column-gap:28px; }
.nav-links .mega-group { break-inside:avoid; }

@media (max-width:900px){
  .zhub-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .zhub-grid { grid-template-columns:1fr; }
}
@media (max-width:980px){
  .nav-links .mega-list { column-count:1; }
  .mega-group-label { color:var(--muted); margin-top:8px; }
}


/* =========================================================
   30. Service page spacing and hero visual
   ========================================================= */
/* Consecutive full-pad sections were stacking 64+64=128px of gap. Halve the
   join so the rhythm is tighter without cramping. */
.zsvc .section-pad { padding:48px 0; }
.zsvc .section-pad + .section-pad { padding-top:0; }
.zsvc-problem { padding-top:8px; }
.zsvc-hero + .zsvc-problem { padding-top:0; }

/* Alternate section tints so the page reads as distinct blocks, not one long
   scroll with gaps. */
.zsvc-caps, .zsvc-metrics, .zsvc-related { background:var(--surface-2); }
.zsvc-engine, .zsvc-process, .zsvc-faq { background:var(--bg); }

/* --- hero art: an SVG orbit graphic, self-contained --- */
.zsvc-hero .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; }
.zsvc-hero .crumb, .zsvc-hero-eyebrow, .zsvc-hero h1, .zsvc-hero-lead, .zsvc-hero-actions { grid-column:1; }
.zsvc-hero-art {
  grid-column:2; grid-row:1 / 6; align-self:center; justify-self:center;
  width:100%; max-width:440px; position:relative; z-index:1;
}
.zsvc-hero-art svg { display:block; width:100%; height:auto; overflow:visible; }
.zha-core-label { font-family:'Figtree',sans-serif; font-weight:800; font-size:30px; fill:#fff; letter-spacing:-.02em; }
.zha-chip-label { font-family:'Figtree',sans-serif; font-weight:600; font-size:13px; fill:#1E1030; }
.zha-core { transform-box:fill-box; transform-origin:center; animation:zha-pulse 5s ease-in-out infinite; }
@keyframes zha-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.zha-ring { transform-box:fill-box; transform-origin:center; animation:zha-spin 44s linear infinite; }
.zha-ring-rev { animation-duration:64s; animation-direction:reverse; }
@keyframes zha-spin { to { transform:rotate(360deg); } }
.zha-chip { transform-box:fill-box; transform-origin:center; animation:zha-float 6s ease-in-out infinite; animation-delay:calc(var(--d) * -1.4s); }
@keyframes zha-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

@media (max-width:900px){
  .zsvc-hero .wrap { grid-template-columns:1fr; }
  .zsvc-hero-art { display:none; }
}
@media (prefers-reduced-motion: reduce){
  .zha-core, .zha-ring, .zha-chip, .zha-orbit { animation:none; }
  .zha-orbit { display:none; }
}