/* =====================================================================
   QA Madness - Homepage redesign styles
   ---------------------------------------------------------------------
   SCOPING RULE: every selector in this file is prefixed with `body.home`
   (the class WordPress auto-adds to the static front page) so none of these
   rules can affect inner pages. This file is enqueued only when
   is_front_page() is true (see functions.php).
   ===================================================================== */

/* ---------- Fonts (self-hosted, already shipped with the theme) -------- */
@font-face {
  font-family: "GT Sectra Display";
  src: url("../fonts/GTSectraDisplaySuper.woff2") format("woff2"),
       url("../fonts/GTSectraDisplaySuper.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk QA";
  src: url("../assets/fonts/AktivGroteskCorp-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk QA";
  src: url("../assets/fonts/AktivGroteskCorp-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk QA";
  src: url("../assets/fonts/AktivGroteskCorp-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk QA";
  src: url("../assets/fonts/AktivGroteskCorp-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens (scoped to the homepage wrapper) ------------- */
body.home {
  --h-bg: #08080d;
  --h-bg-alt: #0f0f16;
  --h-card: rgba(255, 255, 255, 0.03);
  --h-card-2: rgba(255, 255, 255, 0.05);
  --h-border: rgba(255, 255, 255, 0.09);
  --h-border-strong: rgba(255, 255, 255, 0.16);
  --h-text: #ffffff;
  --h-muted: #9a9aab;
  --h-muted-2: #6f6f80;

  --h-green: #3fe3b6;
  --h-green-grad: linear-gradient(135deg, #45e6ba 0%, #16bc8f 100%);
  --h-green-grad-soft: linear-gradient(135deg, #8af0d6 0%, #4fd8b3 100%);

  --h-purple: #8e6cff;
  --h-purple-grad: linear-gradient(135deg, #9170ff 0%, #6a47f0 100%);
  --h-purple-grad-soft: linear-gradient(135deg, #b9a6ff 0%, #8e6cff 100%);

  --h-lilac: #cbbcff;
  --h-on-light: #1a1430;

  --h-radius: 14px;
  --h-radius-lg: 22px;
  --h-pill: 999px;
  --h-container: 1200px;
  --h-font: "Aktiv Grotesk QA", "Helvetica Neue", Arial, sans-serif;
  --h-serif: "GT Sectra Display", Georgia, "Times New Roman", serif;
}

/* ---------- Page base -------------------------------------------------- */
body.home {
  background: var(--h-bg);
}
body.home {
  overflow-x: hidden;
  /* The parent theme adds body{padding-top:74px} to clear its fixed header. The
     homepage header is transparent and overlaps the hero, so remove that offset
     here (kept !important only to beat the parent's own header offset). */
  padding-top: 0 !important;
}
body.home .site-homepage {
  font-family: var(--h-font);
  color: var(--h-text);
  background: var(--h-bg);
  overflow-x: clip;
  font-size: 14px;
  line-height: 1.6;
}
body.home .site-homepage h1,
body.home .site-homepage h2,
body.home .site-homepage h3,
body.home .site-homepage .home-intro__text,
body.home .site-homepage .home-hero__title {
  overflow-wrap: break-word;
}
body.home .site-homepage * {
  box-sizing: border-box;
}
body.home .site-homepage img {
  max-width: 100%;
  height: auto;
}
body.home .site-homepage .container {
  width: 100%;
  max-width: var(--h-container);
  margin-inline: auto;
  padding-inline: 19px;
}
body.home .site-homepage h1,
body.home .site-homepage h2,
body.home .site-homepage h3,
body.home .site-homepage h4 {
  margin: 0;
  color: var(--h-text);
  line-height: 1.12;
  font-weight: 700;
  font-family: var(--h-font); /* override theme's global serif headings */
}
body.home .site-homepage p {
  margin: 0;
}

/* Section rhythm + shared section header */
body.home .home-section {
  padding: 77px 0;
  position: relative;
  
}
body.home .home-section--tight {
  padding: 51px 0;
}
/* Section content spacing - 80px vertical rhythm on desktop, 64px on mobile.
   Hero (not a .home-section), Clients, and Testimonials keep their own widths;
   every other section caps its content at 1200px (the default .container width). */
body.home .home-section:not(.home-clients):not(.home-testimonials) { padding: 50px 0; }
@media (max-width: 768px) { body.home .home-section:not(.home-clients):not(.home-testimonials) { padding: 64px 0; } }

/* Testimonials keeps the full-bleed gutter treatment (content fills the gutters). */
body.home .home-testimonials { padding: 128px; }
body.home .home-testimonials > .container { max-width: none; padding-inline: 0; }
@media (max-width: 1280px) { body.home .home-testimonials { padding-inline: 80px; } }
@media (max-width: 900px)  { body.home .home-testimonials { padding-inline: 40px; } }
@media (max-width: 768px)  { body.home .home-testimonials { padding: 64px 19px; } }

/* Tighter gap between the intro statement and the problems heading: 28 + 28 = 56px.
   Must out-specify the :not():not() base rule above, hence the repeated :not()s. */
body.home .home-section:not(.home-clients):not(.home-testimonials).home-intro { padding-bottom: 28px; }
body.home .home-section:not(.home-clients):not(.home-testimonials).home-problems { padding-top: 28px; }
body.home .home-section__head {
  max-width: 1000px;
  margin: 0 auto 45px;
  text-align: center;
}
body.home .home-section__head h2 {
  font-size: 48px;
  letter-spacing: -0.01em;
}
body.home .home-section__head p {
  margin-top: 14px;
  color: #fff;
  font-size: 18px;
}
/* Gradient accent words inside serif headings */
body.home .home-accent-green {
  font-family: var(--h-serif);
  font-style: italic;
  background: var(--h-green-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
body.home .home-accent-purple {
  font-family: var(--h-serif);
  font-style: normal;
  background: var(--h-purple-grad-soft);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Intro card "Confidence is" - solid purple instead of the gradient.
   Color is set in WP Admin (Home -> "Intro - accent color"); the value below is
   the fallback used when the field is empty. */
body.home .home-intro .home-accent-purple {
  background: none;
  -webkit-text-fill-color: var(--intro-accent, #7d51f1);
  color: var(--intro-accent, #7d51f1);
}

/* =====================================================================
   BUTTONS  (recreated from the Figma button component sheet)
   ===================================================================== */
body.home .home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 21px;
  border: 0;
  border-radius: var(--h-pill);
  font-family: var(--h-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.3s ease, opacity 0.25s ease,
              background 0.35s ease, gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
body.home .home-btn svg { flex: none; }
body.home .home-btn svg:last-child { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
/* Hover: lift + widen the gap between the label and the trailing arrow, which
   stretches the button. The gap only affects buttons that have an arrow, so a
   text-only button doesn't stretch. */
body.home .home-btn:hover { transform: translateY(-1px); gap: 24px; }
body.home .home-btn:hover svg:last-child { transform: translateX(2px); }

body.home .home-btn--green {
  background: #00CCA6; /* flat base colour at rest */
  color: #08130f;
  /* Label glued to the left so the hover gap extends the button rightward
     (text stays put) instead of spreading the content out from the centre. */
  justify-content: flex-start;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
/* Larger size for the big "Get a free consultation" CTA. No min-width: a fixed
   minimum wider than the content would absorb the hover gap-stretch (the arrow
   just slides into the slack instead of the button growing). Sizing to content
   lets the gap actually widen the button, like the "All Articles" button. */
body.home .home-ctaai__btn {
  height: 57px;
  padding-inline: 32px;
}
/* Horizontal-only stretch - no vertical lift on this button. */
body.home .home-btn--green:hover { transform: none; }
/* Gradient highlight, brightest toward the arrow / end of the label. It fades in
   on hover (a flat->gradient swap can't animate, but an overlay's opacity can) and
   is delayed slightly so it appears just after the button finishes stretching.
   z-index:-1 keeps it above the flat fill but behind the text. */
body.home .home-btn--green::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(to right, rgba(69, 230, 186, 0) 35%, rgba(69, 230, 186, 0.95) 100%);
  opacity: 0;
  transition: opacity 0.5s ease 0.18s;
}
body.home .home-btn--green:hover::after { opacity: 1; }
body.home .home-btn--green svg path { stroke: #08130f; }

body.home .home-btn--green-soft {
  background: var(--h-green-grad-soft);
  color: #08130f;
}

body.home .home-btn--purple {
  background: var(--h-purple-grad);
  color: #ffffff;
  /* Match the lilac/green "All Articles" animation: left-anchored content that
     stretches rightward, with a gradient overlay that fades in (no vertical lift). */
  justify-content: flex-start;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
body.home .home-btn--purple::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(to right, rgba(185, 166, 255, 0) 35%, rgba(185, 166, 255, 0.95) 100%);
  opacity: 0;
  transition: opacity 0.5s ease 0.18s;
}
body.home .home-btn--purple:hover::after { opacity: 1; }
/* Keep the gap fixed so the leading icon + label stay grouped and anchored left
   (the uniform gap growth would push the label away from the calendar icon).
   The stretch comes from the trailing arrow's growing left margin instead, so
   the label stays put and only the arrow slides - like "Get Free Consultation". */
body.home .home-btn--purple:hover { transform: none; gap: 8px; }
body.home .home-btn--purple svg:last-child {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
body.home .home-btn--purple:hover svg:last-child { margin-left: 16px; }
body.home .home-btn--purple svg path { stroke: #ffffff; }

body.home .home-btn--purple-soft {
  background: var(--h-purple-grad-soft);
  color: #ffffff;
}

body.home .home-btn--tint {
  background: rgba(142, 108, 255, 0.16);
  color: var(--h-lilac);
}

body.home .home-btn--lilac {
  background: var(--h-lilac);
  color: var(--h-on-light);
  /* Match the green button: left-anchored content + overlay gradient. */
  justify-content: flex-start;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
/* Gradient fades in via an opacity overlay rather than swapping the flat fill for
   a gradient (a flat->gradient background can't transition, which caused the blink
   on un-hover). Lighter toward the arrow / end of the label. */
body.home .home-btn--lilac::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(to right, rgba(227, 219, 255, 0) 35%, rgba(227, 219, 255, 0.95) 100%);
  opacity: 0;
  transition: opacity 0.5s ease 0.18s;
}
body.home .home-btn--lilac:hover::after { opacity: 1; }
/* Horizontal-only stretch - no vertical lift (removes the shake). */
body.home .home-btn--lilac:hover { transform: none; }

body.home .home-btn--sm {
  padding: 7px 13px;
  font-size: 10px;
  gap: 6px;
}
/* Keep the stretch proportional on the small button. */
body.home .home-btn--sm:hover { gap: 14px; }
body.home .home-btn--ghost {
  background: transparent;
  color: var(--h-muted);
  opacity: 0.55;
}

/* =====================================================================
   FOCUS-VISIBLE  (keyboard accessibility - scoped to the homepage)
   Covers buttons, links, menu items, accordion controls and card links.
   ===================================================================== */
body.home a:focus-visible,
body.home button:focus-visible,
body.home [data-acc-head]:focus-visible,
body.home .home-testi__nav:focus-visible {
  outline: 2px solid var(--h-green);
  outline-offset: 3px;
}
/* Buttons can sit on green/purple fills - use a white ring for contrast. */
body.home .home-btn:focus-visible { outline-color: #ffffff; }
/* Remove the legacy focus glow only when a non-keyboard focus is detected. */
body.home a:focus:not(:focus-visible),
body.home button:focus:not(:focus-visible) { outline: none; }

/* =====================================================================
   LINKS  (recreated from the Figma link component sheet)
   ===================================================================== */
body.home .home-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--h-muted);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}
body.home .home-link:hover { color: var(--h-text); }
body.home .home-link--active {
  color: #CBB9F9;
  font-weight: 700;
}
body.home .home-link__chevron {
  width: 11px;
  height: 11px;
  transition: transform 0.2s ease;
}
body.home .home-link--active .home-link__chevron { transform: rotate(180deg); }

/* =====================================================================
   HEADER  +  MEGA-MENU  (homepage only - see header.php is_front_page)
   ===================================================================== */
body.home .home-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 60;
  padding: 0;
  background: transparent;
  transition: background 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
}
body.home .home-header.is-stuck {
  position: fixed;
  background: #08060D;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* The redesigned home header shares the legacy `header` class, so the shared
   general-main.js adds `header-to-top` (legacy top:-75px = hide-on-scroll-down)
   to it. The home header opts out: it stays pinned and only swaps to its solid
   look via .is-stuck. Higher specificity + later source order beats the legacy
   rule without !important. */
body.home .home-header.header-to-top { top: 0; }
/* When a dropdown is open, give the header the same solid surface as the
   mega-menu panel so the hero glow doesn't bleed through behind it. */
body.home .home-header.is-menu-open {
  background: #08060D;
}
/* Floating back-to-top button - fixed bottom-right, sitting above the chat
   bubble. Hidden until the user scrolls down a bit (toggled in home.js). */
body.home .home-totop {
  position: fixed;
  right: 24px;
  bottom: 92px; /* clears the chat widget that sits at the bottom-right corner */
  z-index: 95;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--h-border-strong);
  background: #08060D;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.85);
  /* Smooth ease-out entrance (fade + rise + scale). visibility flips after the
     fade on hide (0.45s delay) and immediately on show, so neither direction
     is clipped. bottom glides separately when the chat opens/closes. */
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.45s,
    background 0.2s ease,
    bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
body.home .home-totop:hover { background: #15111f; border-color: #fff; }
body.home .home-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0s,
    background 0.2s ease,
    bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scroll progress bar pinned to the header's bottom edge; its width tracks how
   far the page has been scrolled (updated in home.js). */
body.home .home-header__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  max-width: 100%;
  background: linear-gradient(90deg, var(--h-green), #9170ff);
  transition: width 0.1s linear;
  pointer-events: none;
  z-index: 1;
}
body.home .home-header__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 1280px;   /* header content width (independent of the sections) */
  min-height: 72px;    /* header bar height */
  margin-inline: auto;
  padding-inline: 19px; /* keep the logo + burger off the screen edges (matches the section inset) */
}
body.home .home-header__logo {
  flex: none;
  display: inline-flex;
}
body.home .home-header__logo img { width: 128px; height: auto; }
body.home .home-header__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  margin-right: 29px;
}
body.home .home-header__cta { flex: none; font-size: 14px; padding: 9px 18px; }

/* top-level menu */
body.home .home-menu {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.home .home-menu > li { position: static; }
body.home .home-menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.15s ease;
}
body.home .home-menu > li > a:hover,
body.home .home-menu > li.is-open > a { color: #ffffff; }
/* chevron for parents */
body.home .home-menu > li.menu-item-has-children > a::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
body.home .home-menu > li.is-open.menu-item-has-children > a::after { transform: rotate(180deg); }
body.home .home-menu > li.is-open.menu-item-has-children > a { color: #CBB9F9; }

/* mega panel (depth-1 submenu) */
/* Mega-menu panel - a contained, framed card (capped width, centered), not a
   full-bleed bar. See the margin/border/radius below. */
body.home .home-menu .sub-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  list-style: none;
  border: 1px solid var(--h-border);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  /* The nested .sub-menu sets visibility:visible, which would otherwise leave
     this invisible (opacity:0) full-width panel hoverable and pop the dropdown
     open when the cursor isn't on the menu item. Block hovers until it opens. */
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  /* Flat dropdowns (Coverage, Industries, ...) lay their items out in aligned
     columns. The Services panel overrides this to flex (grouped layout). */
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: center;
  align-items: start;
  gap: 14px 45px;
  /* Contained card, not a full-bleed bar: centre a box that caps at 1280px with
     a gutter on either side and a small gap below the header, then pad the
     content inside. The border + radius above frame it. */
  margin: 8px max(19px, calc((100% - 1280px) / 2)) 0;
  padding: 32px 28px 36px;
  background: #15111E;
}
body.home .home-menu > li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/* Re-enable interaction across the whole open panel - including nested item
   lists, which are pointer-events:none while closed (the hover-bug fix). Without
   this the Services group links inherit `none` and aren't clickable. */
body.home .home-menu > li.is-open .sub-menu { pointer-events: auto; }

/* item links */
body.home .home-menu .sub-menu a {
  color: var(--h-muted);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  padding: 0; /* drop inherited theme padding so centered items align true */
  transition: color 0.15s ease;
}
body.home .home-menu .sub-menu a:hover { color: #ffffff; }

/* group heading (Services -> Testing / Development ...) with purple underline */
body.home .home-menu .sub-menu > li.menu-item-has-children { text-align: center; }
body.home .home-menu .sub-menu > li.menu-item-has-children > a {
  display: inline-block;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 18px;
  padding: 0; /* drop inherited theme padding so the text centers in its box */
}
/* Underline sits on the inner <span> so it hugs the heading text exactly
   (the <a> can carry extra padding from the inherited theme). */
body.home .home-menu .sub-menu > li.menu-item-has-children > a span {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 2px solid #7D51F1;
}

/* nested item list - flows into balanced columns, left aligned, no wrapping */
body.home .home-menu .sub-menu .sub-menu {
  position: static;
  display: block;
  opacity: 1;
  visibility: visible;
  transform: none;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  text-align: left;
  /* default: single column for short groups (Development, etc.) */
  column-count: 1;
  column-gap: 29px;
  width: max-content;
}
body.home .home-menu .sub-menu .sub-menu li {
  break-inside: avoid;
  margin-bottom: 11px;
}
/* The Services dropdown is now an ACF/PHP panel (qmh_render_services_panel) that
   reuses the Coverage panel classes (.home-mega-cov*), so its styling lives in the
   Coverage section below. The old WP-menu five-column CSS was removed here. */

/* Shared aurora background for the mega-menu CTA sections (Services, Coverage,
   Company) - a green->blue->purple wash over near-black, recreated in CSS. To use a
   real image instead, set: --cta-aurora: url("../assets/images/cta-aurora.jpg") center/cover; */
body.home {
  --cta-aurora:
    radial-gradient(60% 130% at 27% 0%, rgba(22, 190, 140, 0.45), transparent 60%),
    radial-gradient(70% 165% at 48% 135%, rgba(68, 70, 225, 0.48), transparent 62%),
    radial-gradient(55% 150% at 60% 130%, rgba(120, 65, 215, 0.42), transparent 55%),
    linear-gradient(90deg, #121019 0%, rgba(30, 120, 170, 0.22) 35%, rgba(95, 60, 200, 0.26) 55%, #121019 84%);
}

/* Aurora rendered on a ::before layer at 0.5 opacity so the background image is
   semi-transparent without fading the icon/headline/button on top. */
body.home .home-menu .home-mega-cov__cta::before,
body.home .home-menu .home-mega-ind__cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--cta-aurora);
  opacity: 0.5;
}

/* Mobile (stacked menu overlay): hide the mega-menu CTA sections. !important is
   needed to beat the later base `display:flex` rules and the high-specificity
   `.is-nav-open ... > li { display:block }` reveal rule that re-shows panel items. */
@media (max-width: 1024px) {
  body.home .home-menu .home-mega-cov__cta,
  body.home .home-menu .home-mega-cov__head,
  body.home .home-menu .home-mega-ind__intro,
  body.home .home-menu .home-mega-ind__cta { display: none !important; }
}

/* ===== Services panel: Mobile card with nested iOS / Android sublinks =====
   The card is a <div> reusing the shared .home-mega-card styling; a stretched
   overlay link makes the whole card open Mobile testing, while the small sublinks
   sit above it (z-index) so they stay separately clickable (no nested anchors). */
body.home .home-menu .home-mega-svc .home-svc-mcard__main { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
body.home .home-menu .home-mega-svc .home-svc-mcard__subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
body.home .home-menu .home-mega-svc .home-svc-mcard__sub {
  position: relative; z-index: 2; /* above the stretched main link, so it stays clickable */
  display: inline-flex; align-items: center; padding: 2px 10px;
  border-radius: var(--h-pill); font-size: 11px; font-weight: 600; line-height: 1.6;
  color: rgba(255, 255, 255, 0.7); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--acc, #8e6cff) 30%, transparent);
  background: color-mix(in srgb, var(--acc, #8e6cff) 8%, transparent);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
body.home .home-menu .home-mega-svc .home-svc-mcard__sub:hover {
  border-color: color-mix(in srgb, var(--acc, #8e6cff) 60%, transparent);
  background: color-mix(in srgb, var(--acc, #8e6cff) 18%, transparent);
  color: #fff;
}

/* ===== Industries mega panel (ACF-driven; injected by QM_Home_Mega_Walker) =====
   Left intro column (eyebrow + heading + paragraph + CTA card) and a grid of
   clickable industry rows (icon tile + title + description + chevron). Lives in
   the same `.sub-menu` card; selectors are scoped under `.home-mega-ind` so they
   out-rank the generic `.sub-menu a` rules (and come later in the file). */
body.home .home-menu .home-mega-ind a { white-space: normal; padding: 0; color: inherit; }
body.home .home-menu .home-mega-ind__inner { display: block; }
body.home .home-menu .home-mega-ind__eyebrow {
  display: inline-block; margin-bottom: 14px;
  color: var(--h-purple); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
body.home .home-menu .home-mega-ind__heading { margin: 0 0 14px; font-size: 26px; line-height: 1.15; font-weight: 700; color: #fff; }
body.home .home-menu .home-mega-ind__title-accent { color: var(--h-purple); }
body.home .home-menu .home-mega-ind__desc { margin: 0 0 22px; max-width: 280px; color: rgba(255, 255, 255, 0.6); font-size: 13px; line-height: 1.6; }

/* CTA card */
/* CTA bar (icon + text + pill button), matching the Coverage/Company/Services
   CTA bars in style and size. Full-width below the panel columns. */
body.home .home-menu .home-mega-ind__cta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding: 13px 18px; border-radius: 16px;
  border: 1px solid var(--h-border); background: transparent; position: relative; z-index: 0;
}
body.home .home-menu .home-mega-ind__cta-ico { flex: none; display: inline-flex; align-items: center; color: var(--h-purple); }
body.home .home-menu .home-mega-ind__cta-text { display: flex; flex-direction: column; min-width: 0; }
body.home .home-menu .home-mega-ind__cta-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.3; }
body.home .home-menu .home-mega-ind__cta-sub { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, 0.6); }
body.home .home-menu .home-mega-ind__cta-btn { margin-left: auto; }
body.home .home-menu .home-mega-ind .home-mega-cta-btn { padding: 13px 30px; font-size: 14px; } /* match Services CTA button size */

/* Item grid */
body.home .home-menu .home-mega-ind__grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.home .home-menu .home-mega-ind__grid > li { margin: 0; }
body.home .home-menu .home-mega-ind__cta-ico svg { width: 22px; height: 22px; }
body.home .home-menu .home-mega-ind__cta-ico img { width: 22px; height: 22px; object-fit: contain; }

/* Desktop: contained card with the two-column (intro + 3-col grid) layout. */
@media (min-width: 1025px) {
  body.home .home-menu .home-mega-ind { display: block; }
  body.home .home-menu .home-mega-ind__inner { display: grid; grid-template-columns: 300px 1fr; gap: 24px 44px; align-items: start; }
  body.home .home-menu .home-mega-ind__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 10px 16px; }
  body.home .home-menu .home-mega-ind__cta { grid-column: 1 / -1; margin-top: 0; } /* full-width CTA bar below both columns */
}

/* ===== Coverage mega panel (ACF-driven; injected by QM_Home_Mega_Walker) =====
   Top intro row (icon + heading + paragraph + optional illustration), four
   labelled card columns, and a bottom CTA bar. */
body.home .home-menu .home-mega-cov a { white-space: normal; padding: 0; color: inherit; }
body.home .home-menu .home-mega-cov__inner { display: block; }

/* Head row */
body.home .home-menu .home-mega-cov__head { display: flex; align-items: flex-start; gap: 18px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--h-border); }
body.home .home-menu .home-mega-cov__head-ico { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; border: 1px solid rgba(142, 108, 255, 0.3); background: rgba(142, 108, 255, 0.1); color: var(--h-purple); }
body.home .home-menu .home-mega-cov__head-ico svg { width: 28px; height: 28px; }
body.home .home-menu .home-mega-cov__heading { margin: 0 0 6px; font-size: 28px; line-height: 1.1; font-weight: 700; color: #fff; }
body.home .home-menu .home-mega-cov__heading-accent { color: var(--h-purple); }
body.home .home-menu .home-mega-cov__desc { margin: 0; max-width: 420px; color: rgba(255, 255, 255, 0.6); font-size: 14px; line-height: 1.5; }
body.home .home-menu .home-mega-cov__art { margin-left: auto; flex: none; }
body.home .home-menu .home-mega-cov__art img { height: 140px; width: auto; display: block; }

/* Card columns */
body.home .home-menu .home-mega-cov__cols { display: grid; grid-template-columns: 1fr; gap: 20px; }
body.home .home-menu .home-mega-cov__col-label { display: block; margin-bottom: 12px; color: var(--h-purple); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.85; }
body.home .home-menu .home-mega-cov__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

/* Bottom CTA bar */
body.home .home-menu .home-mega-cov__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--h-border); background: transparent; position: relative; z-index: 0; }
body.home .home-menu .home-mega-cov__cta-ico { flex: none; display: inline-flex; align-items: center; color: var(--h-purple); }
body.home .home-menu .home-mega-cov__cta-ico svg { width: 26px; height: 26px; }
body.home .home-menu .home-mega-cov__cta-text { font-size: 19px; font-weight: 700; color: #fff; }
body.home .home-menu .home-mega-cov__accent-p { color: var(--h-purple); }
body.home .home-menu .home-mega-cov__accent-g { color: var(--h-green); }
body.home .home-menu .home-mega-cov__cta-btn { margin-left: auto; flex: none; } /* appearance from .home-mega-cta-btn */

/* Desktop: 4 columns with thin dividers between them. */
@media (min-width: 1025px) {
  body.home .home-menu .home-mega-cov { display: block; }
  body.home .home-menu .home-mega-cov__cols { grid-template-columns: repeat(4, 1fr); gap: 0; align-items: stretch; }
  body.home .home-menu .home-mega-cov__col { padding: 0 22px; border-left: 1px solid var(--h-border); }
  body.home .home-menu .home-mega-cov__col:first-child { padding-left: 0; border-left: 0; }
  body.home .home-menu .home-mega-cov__col:last-child { padding-right: 0; }
}
/* Mobile: stack everything; hide the decorative illustration. */
@media (max-width: 1024px) {
  body.home .home-menu .home-mega-cov__art { display: none; }
  body.home .home-menu .home-mega-cov__cta-btn { margin-left: 0; }
}

/* ===== Company mega menu (compact, standalone) =====
   Company has only 3 links, so it uses a small two-column dropdown (left CTA card
   + a short list of link cards) instead of the wide mega-menu layout. Scoped to
   body.home and kept separate from the shared mega-menu classes. */
body.home .home-menu .home-mega-company a { text-decoration: none; color: inherit; white-space: normal; }
body.home .home-menu .home-mega-company__panel { display: block; }

/* Left CTA card: brand mark + title + text + button. */
body.home .home-menu .home-mega-company__cta {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 26px; border-radius: 16px; border: 1px solid var(--h-border);
  background: radial-gradient(120% 130% at 15% 0%, rgba(142, 108, 255, 0.16), transparent 55%), rgba(255, 255, 255, 0.015);
}
body.home .home-menu .home-mega-company__cta-brand { display: inline-flex; margin-bottom: 22px; }
body.home .home-menu .home-mega-company__cta-brand img { height: 34px; width: auto; }
body.home .home-menu .home-mega-company__cta-title { margin: 0 0 10px; font-size: 26px; line-height: 1.15; font-weight: 700; color: #fff; }
body.home .home-menu .home-mega-company__accent { color: var(--h-purple); }
body.home .home-menu .home-mega-company__cta-text { margin: 0 0 24px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
/* Reuse the shared CTA button look for consistency; centered, compact size. */
body.home .home-menu .home-mega-company__cta-btn { margin-top: auto; align-self: center; }
body.home .home-menu .home-mega-company .home-mega-cta-btn { padding: 13px 30px; font-size: 14px; }

/* Right column: a short vertical list of link cards (label + arrow). */
body.home .home-menu .home-mega-company__links { display: flex; flex-direction: column; gap: 12px; }
body.home .home-menu .home-mega-company__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 50px; box-sizing: border-box; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--h-border); background: rgba(255, 255, 255, 0.015);
  color: #fff; font-size: 15px; font-weight: 600;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
body.home .home-menu .home-mega-company__link:hover {
  border-color: rgba(142, 108, 255, 0.5);
  background: rgba(142, 108, 255, 0.08);
  box-shadow: 0 8px 24px rgba(142, 108, 255, 0.18);
}
/* Center the label: a leading spacer the same width as the trailing arrow
   balances it, so the flex:1 label centers its text across the button. */
body.home .home-menu .home-mega-company__link::before { content: ""; flex: none; width: 18px; }
body.home .home-menu .home-mega-company__link-label { flex: 1; min-width: 0; text-align: center; }
body.home .home-menu .home-mega-company__arrow { flex: none; width: 18px; height: 18px; color: var(--h-purple); transition: transform 0.18s ease; }
body.home .home-menu .home-mega-company__link:hover .home-mega-company__arrow { transform: translateX(3px); }

/* Keyboard focus (Company links + shared with Coverage/Industries CTA buttons). */
body.home .home-menu .home-mega-company__link:focus,
body.home .home-menu .home-mega-company__cta-btn:focus,
body.home .home-menu .home-mega-cov__cta-btn:focus,
body.home .home-menu .home-mega-ind__cta:focus { outline: none; }
body.home .home-menu .home-mega-company__link:focus-visible,
body.home .home-menu .home-mega-company__cta-btn:focus-visible,
body.home .home-menu .home-mega-cov__cta-btn:focus-visible,
body.home .home-menu .home-mega-ind__cta:focus-visible { outline: 2px solid var(--h-purple); outline-offset: 3px; }

/* Reduced motion: no arrow slide on hover. */
@media (prefers-reduced-motion: reduce) {
  body.home .home-menu .home-mega-company__link:hover .home-mega-company__arrow { transform: none; }
}

/* ===== Unified mega-menu CTA buttons =====
   Every panel's CTA button (Services / Coverage / Company) shares one green pill
   and the same lift-on-hover animation as "Get Free Consultation". The marker
   class `home-mega-cta-btn` is added to each button in inc/industries-menu.php;
   this block sits after the per-panel rules so it standardises their look (green
   fill, padding, size) over the earlier purple-outline styles via source order.
   Positioning (margin-left:auto, mobile margin-left:0) stays on the per-panel
   rules and is intentionally not set here. */
body.home .home-menu a.home-mega-cta-btn,
body.home .home-menu .home-mega-cta-btn {
  position: relative; z-index: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px;
  padding: 16px 40px; border-radius: var(--h-pill);
  background: transparent;
  color: #ffffff; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap;
  border: 1px solid rgba(142, 108, 255, 0.6); text-decoration: none;
  transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
}
/* Hover mirrors the hero "Get a free consultation" button: no vertical lift - the
   label stays left-anchored while the gap widens (the button stretches rightward),
   the trailing arrow slides, and a purple gradient sheen fades in from the right.
   The sheen sits at z-index:-1 (above the transparent fill, behind the label). */
body.home .home-menu .home-mega-cta-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(to right, rgba(142, 108, 255, 0) 35%, rgba(142, 108, 255, 0.9) 100%);
  opacity: 0; transition: opacity 0.5s ease 0.18s;
}
body.home .home-menu .home-mega-cta-btn:hover::after { opacity: 1; }
body.home .home-menu .home-mega-cta-btn:hover { gap: 24px; border-color: var(--h-purple); }
body.home .home-menu .home-mega-cta-btn svg { flex: none; width: 18px; height: 18px; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
body.home .home-menu .home-mega-cta-btn:hover svg:last-child { transform: translateX(2px); }
body.home .home-menu .home-mega-cta-btn:focus { outline: none; }
body.home .home-menu .home-mega-cta-btn:focus-visible { outline: 2px solid var(--h-purple); outline-offset: 3px; }

@media (min-width: 1025px) {
  /* Company has only 3 links, so the dropdown is a compact fixed-width box (not
     the wide mega-menu). Two columns: left CTA card, right link list. */
  /* Reset the inherited .sub-menu grid (repeat(4, max-content)) so the panel fills
     the capped 680px card instead of shrinking to content - otherwise the right
     links column collapses to its label width and the buttons come out uneven.
     Matches the display:block reset on the Coverage/Industries panels. */
  body.home .home-menu .home-mega-company { display: block; margin-inline: max(19px, calc((100% - 680px) / 2)); }
  body.home .home-menu .home-mega-company__panel { display: grid; grid-template-columns: 320px 1fr; gap: 24px 44px; align-items: start; }
}

/* ===== Mega-panel cards: fade-up on open + hover highlight (all panels) ===== */
@keyframes qmMegaCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1025px) {
  /* Cards animate in when the dropdown opens. `backwards` (not forwards) so the
     hover transform still works once the entrance finishes. */
  body.home .home-menu > li.is-open .home-mega-card {
    animation: qmMegaCardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  body.home .home-menu > li.is-open .home-mega-card:nth-child(2) { animation-delay: 0.05s; }
  body.home .home-menu > li.is-open .home-mega-card:nth-child(3) { animation-delay: 0.1s; }
  body.home .home-menu > li.is-open .home-mega-card:nth-child(4) { animation-delay: 0.14s; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .home-menu > li.is-open .home-mega-card { animation: none; }
}

/* ===== Resources mega panel (ACF-driven; injected by QM_Home_Mega_Walker) =====
   Two large clickable cards: icon tile + title/description + a circular arrow
   button, with a purple underline glow. */
body.home .home-menu .home-mega-res a { white-space: normal; padding: 0; color: inherit; }
body.home .home-menu .home-mega-res__inner { display: block; }
body.home .home-menu .home-mega-res__cards { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0; padding: 0; list-style: none; }
body.home .home-menu .home-mega-res__cards > li { margin: 0; }
@media (min-width: 1025px) {
  /* Resources has only two cards, so cap the panel narrower than the shared
     1280px mega-panel width (change 720px to resize). */
  body.home .home-menu .home-mega-res { display: block; margin-inline: max(19px, calc((100% - 300px) / 2)); }
  body.home .home-menu .home-mega-res__cards { grid-template-columns: 1fr; gap: 24px; }
}

/* ===== Shared mega-menu card (one component for every dropdown panel) =====
   `--card-accent` (set inline per card in admin) overrides the default purple;
   color-mix derives the matching tints. */
/* `.sub-menu` in the selector raises specificity above the base `.sub-menu a`
   and per-panel `a` resets (which set padding:0) so the card padding actually
   applies - without it the icon overlaps the card border. */
body.home .home-menu .sub-menu .home-mega-card {
  --acc: var(--card-accent, #8e6cff);
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  min-height: 84px; box-sizing: border-box;
  padding: 16px 22px; border-radius: 14px;
  border: 1px solid var(--h-border); background: rgba(255, 255, 255, 0.015);
  color: inherit; text-decoration: none; cursor: pointer; white-space: normal;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.home .home-menu .home-mega-card:hover {
  border-color: color-mix(in srgb, var(--acc) 45%, transparent);
  background: color-mix(in srgb, var(--acc) 7%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38);
}
body.home .home-menu .home-mega-card::after {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--acc) 75%, transparent), transparent);
  opacity: 0; transition: opacity 0.2s ease;
}
body.home .home-menu .home-mega-card:hover::after { opacity: 1; }
body.home .home-menu .home-mega-card__ico {
  flex: none; width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  background: color-mix(in srgb, var(--acc) 10%, transparent); color: var(--acc);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
body.home .home-menu .home-mega-card:hover .home-mega-card__ico {
  border-color: color-mix(in srgb, var(--acc) 60%, transparent);
  background: color-mix(in srgb, var(--acc) 22%, transparent); color: #fff;
}
body.home .home-menu .home-mega-card__ico svg { width: 23px; height: 23px; }
body.home .home-menu .home-mega-card__ico img { width: 23px; height: 23px; object-fit: contain; }
body.home .home-menu .home-mega-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.home .home-menu .home-mega-card__badge {
  align-self: flex-start; margin-bottom: 3px; padding: 2px 8px; border-radius: var(--h-pill);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
}
body.home .home-menu .home-mega-card__title { font-size: 15px; font-weight: 600; color: #fff; }
body.home .home-menu .home-mega-card__desc {
  font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.7);
  /* Clamp to 2 lines so a narrow column can't make a card taller than the rest. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
body.home .home-menu .home-mega-card__arrow {
  flex: none; margin-left: auto; align-self: center; width: 18px; height: 18px;
  color: var(--acc); opacity: 0.55; transition: opacity 0.2s ease, transform 0.2s ease;
}
body.home .home-menu .home-mega-card:hover .home-mega-card__arrow { opacity: 1; transform: translateX(3px); }
body.home .home-menu .home-mega-card__arrow svg { width: 18px; height: 18px; }
body.home .home-menu .home-mega-card:focus { outline: none; }
body.home .home-menu .home-mega-card:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

/* ===== Compact menu-item cards (shared by EVERY mega panel) =====
   The `.sub-menu` prefix ties the base card rule's specificity; placed after it so
   these win. This is the single source for item-card size across all dropdowns. */
body.home .home-menu .sub-menu .home-mega-card { min-height: 0; gap: 12px; padding: 10px 13px; border-radius: 12px; }
body.home .home-menu .sub-menu .home-mega-card__ico { width: 36px; height: 36px; border-radius: 9px; }
body.home .home-menu .sub-menu .home-mega-card__ico svg { width: 18px; height: 18px; }
body.home .home-menu .sub-menu .home-mega-card__title { font-size: 13px; }
body.home .home-menu .sub-menu .home-mega-card__desc { font-size: 11.5px; }
body.home .home-menu .sub-menu .home-mega-card__arrow,
body.home .home-menu .sub-menu .home-mega-card__arrow svg { width: 16px; height: 16px; }

/* Services panel chrome (header + CTA) - compacted to match its smaller cards.
   Scoped to .home-mega-svc so the Coverage header/CTA keep their own sizing. */
body.home .home-menu .home-mega-svc .home-mega-cov__head { gap: 14px; padding-bottom: 14px; margin-bottom: 16px; }
body.home .home-menu .home-mega-svc .home-mega-cov__head-ico { width: 46px; height: 46px; border-radius: 12px; }
body.home .home-menu .home-mega-svc .home-mega-cov__head-ico svg { width: 22px; height: 22px; }
body.home .home-menu .home-mega-svc .home-mega-cov__heading { font-size: 22px; margin-bottom: 4px; }
body.home .home-menu .home-mega-svc .home-mega-cov__desc { font-size: 13px; }
body.home .home-menu .home-mega-svc .home-mega-cov__col-label { margin-bottom: 9px; }
body.home .home-menu .home-mega-svc .home-mega-cov__list { gap: 6px; }
/* Column count follows the menu (set inline as --svc-cols); desktop only - the
   mobile overlay keeps the single-column stack from the base .home-mega-cov rule. */
@media (min-width: 1025px) {
  body.home .home-menu .home-mega-svc .home-mega-cov__cols { grid-template-columns: repeat(var(--svc-cols, 4), minmax(0, 1fr)); }
}
/* Compact CTA bar - applied to BOTH Coverage and Services (home-mega-cov), so all
   panels' CTA bars are the same size. (Company/Industries set their own to match.) */
body.home .home-menu .home-mega-cov__cta { margin-top: 16px; padding: 13px 18px; }
body.home .home-menu .home-mega-cov__cta-ico svg { width: 22px; height: 22px; }
body.home .home-menu .home-mega-cov__cta-text { font-size: 16px; }
body.home .home-menu .home-mega-cov .home-mega-cta-btn { padding: 13px 30px; font-size: 14px; }

/* List-item card icons are hidden across every mega panel (Services, Coverage,
   Company, Industries, Resources) - icons live on section titles / headers, not
   on the card rows. Header and CTA icons use their own classes and are unaffected. */
body.home .home-menu .sub-menu .home-mega-card__ico { display: none; }
/* Descriptions removed from all mega-menu item cards - title (+ arrow) only. */
body.home .home-menu .sub-menu .home-mega-card__desc { display: none; }
/* Services section-title (column-label) icons. */
/* Column-label icons (Services section icons + Coverage group icons share this). */
body.home .home-menu .home-mega-cov__col-label { display: flex; align-items: center; gap: 8px; }
body.home .home-menu .home-svc-col-ico { flex: none; width: 20px; height: 20px; }

/* Mobile overlay: the stacked menu centres text by default, which reads awkwardly
   for the mega-menu card rows. Left-align card content and the section labels. */
@media (max-width: 1024px) {
  body.home .home-header.is-nav-open .home-menu .home-mega-card { text-align: left; }
  body.home .home-header.is-nav-open .home-menu .home-mega-cov__col-label,
  body.home .home-header.is-nav-open .home-menu .home-mega-cov__col { text-align: left; }
  body.home .home-header.is-nav-open .home-menu .home-mega-cov__col-label { justify-content: flex-start; }
}

/* burger (mobile) */
body.home .home-burger {
  display: none;
  width: 35px;
  height: 35px;
  border: 1px solid var(--h-border);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  position: relative;
}
body.home .home-burger span,
body.home .home-burger span::before,
body.home .home-burger span::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 16px;
  height: 2px;
  background: #fff;
  transform: translateX(-50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
body.home .home-burger span { top: 50%; margin-top: -1px; }
body.home .home-burger span::before { top: -6px; }
body.home .home-burger span::after { top: 6px; }

/* =====================================================================
   HERO
   ===================================================================== */
body.home .home-hero {
  position: relative;
  padding: 200px 0 72px;
  text-align: center;
  overflow: hidden;
}
body.home .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* top-left: red bleeding into purple */
    radial-gradient(34% 30% at 2% 2%, rgba(214, 54, 84, 0.55), transparent 60%),
    radial-gradient(42% 44% at 0% 24%, rgba(120, 70, 230, 0.55), transparent 62%),
    /* right side: purple high, blue mid, green low into bottom-right */
    radial-gradient(34% 40% at 100% 22%, rgba(126, 84, 250, 0.55), transparent 60%),
    radial-gradient(40% 46% at 102% 52%, rgba(60, 110, 240, 0.45), transparent 62%),
    radial-gradient(46% 50% at 96% 84%, rgba(38, 205, 158, 0.50), transparent 62%);
  filter: blur(32px);
  pointer-events: none;
  z-index: 0;
}
/* keep the centre (behind the headline) dark so text stays crisp */
body.home .home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 44% at 50% 40%, rgba(8, 8, 13, 0.85) 8%, transparent 66%);
  pointer-events: none;
  z-index: 0;
}
body.home .home-hero > .container { position: relative; z-index: 1; }

/* Optional background IMAGE (when assets/images/hero-bg.* exists): replace the
   CSS aurora with the image (no blur) and drop the dark-center overlay.
   `100% 100%` fills the hero box without cropping so the full aurora shows. */
body.home .home-hero--image::before {
  /* fit the whole image to the hero box (full image + full-bleed) */
  background: var(--hero-bg-image) center / 100% 100% no-repeat;
  background-color: var(--h-bg);
  filter: none;
}
body.home .home-hero--image::after { display: none; }

body.home .home-hero__ratings {
  display: inline-flex;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  justify-content: center;
}
body.home .home-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--h-muted);
  font-size: 12px;
  padding: 7px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--h-pill);
}
body.home .home-rating b { color: #ff5630; font-weight: 700; }
body.home .home-rating__logo { display: inline-flex; flex: none; line-height: 0; }
body.home .home-rating__logo img { display: block; width: 13px; height: 13px; }

/* `.site-homepage` keeps specificity above the global `h1` rule so the title
   uses GT Sectra Display (serif) instead of the default sans heading font. */
body.home .site-homepage .home-hero__title {
  font-family: "GT Sectra Display", Georgia, "Times New Roman", serif;
  font-size: clamp(37px, 5.6vw, 74px);
  font-weight: 400; /* GT Sectra "Super" is already heavy */
  letter-spacing: 0;
  line-height: 1.0;
}
body.home .home-hero__title-line {
  display: block;
  color: #fff;
}
body.home .home-hero__title-accent {
  display: block;
  background: linear-gradient(90deg, #7a5cf0 0%, #5b7ee8 46%, #2fd4b5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

body.home .home-hero__subtitle {
  max-width: 461px;
  margin: 19px auto 29px;
  color: #fff;
  font-size: clamp(13px, 1.28vw, 16px);
}
body.home .home-hero__subtitle strong { color: #fff; font-weight: 700; }

body.home .home-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 13px 32px;
  justify-content: center;
  align-items: center;
  margin-top: 45px;
}
body.home .home-stat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
body.home .home-stat__icon {
  display: grid;
  place-items: center;
  flex: none;
}
body.home .home-stat__icon svg { display: block; }
body.home .home-stat__icon-img { display: block; width: 36px; height: 36px; object-fit: contain; border-radius: 8px; }
body.home .home-stat__text { display: inline-flex; flex-direction: column; }
body.home .home-stat__title { font-size: 16px; font-weight: 500; line-height: 1.1; }
body.home .home-stat__title--green { color: #68DCC7; }
body.home .home-stat__title--purple { color: #CBB9F9; }
body.home .home-stat__sub { font-size: 12px; color: #fff; }

/* Certification badges (inline in the stats row, borderless like the design) */
body.home .home-cert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 18px;
  position: relative;
}
body.home .home-cert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 27px;
  width: 1px;
  background: var(--h-border);
}
body.home .home-cert img { display: block; height: 34px; width: auto; }
body.home .home-cert__emblem { display: inline-flex; flex: none; }
body.home .home-cert__text {
  font-size: 10px;
  font-weight: 600;
  color: #d7d9e6;
  max-width: 112px;
  line-height: 1.25;
  text-align: left;
}
body.home .home-cert__text--istqb { display: flex; flex-direction: column; }
body.home .home-cert__text--istqb b { font-size: 14px; letter-spacing: 0.06em; color: #fff; }
body.home .home-cert__text--istqb span { font-size: 9px; color: var(--h-muted); font-weight: 500; }

/* Hero highlight cards (01-04) */
body.home .home-hero__cards {
  display: grid;
  /* minmax(0, 288px): cap each card at the 288px design width but let it shrink
     so the 4-up row never overflows between the desktop and 900px breakpoints. */
  grid-template-columns: repeat(4, minmax(0, 288px));
  justify-content: space-between;
  gap: 16px;
  margin-top: 58px;
  text-align: left;
}
body.home .home-hcard {
  position: relative;
  width: 288px;
  height: 172px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: 24px 21px 32px;
  border-radius: var(--h-radius-lg);
  background-color: rgba(21, 17, 30, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
body.home .home-hcard__num {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 34px;
  border-radius: var(--h-pill);
  border: 1px solid rgba(142, 108, 255, 0.5);
  background: rgba(28, 24, 42, 0.5);
  color: #7D51F1;
  font-size: 12px;
  font-weight: 700;
}
body.home .home-hcard__value {
  display: block;
  font-size: clamp(27px, 2.4vw, 32px);
  font-weight: 700;
  color: #CBB9F9;
  line-height: 1;
}
body.home .home-hcard__label {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-size: 14px;
}

/* =====================================================================
   SHARED CARD
   ===================================================================== */
body.home .home-card {
  background: var(--h-card);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  padding: 22px;
}
body.home .home-card h3 { font-size: 16px; margin-bottom: 8px; }
body.home .home-card p { color: var(--h-muted); font-size: 12px; }
body.home .home-card__dot {
  display: inline-block;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--h-purple-grad);
  margin-bottom: 14px;
}

/* ---------- Intro statement ---------- */
/* The section below the hero (intro + problems) sits on a slightly lifted
   dark-navy band, distinct from the near-black page background. */
body.home .home-intro,
body.home .home-problems { background: #14101D; }
body.home .home-intro { text-align: center; }
body.home .home-intro__card {
  position: relative;
  max-width: 1200px;
  min-height: clamp(208px, 27.2vw, 323px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(29px, 4vw, 51px) clamp(19px, 4vw, 64px);
  border-radius: var(--h-radius-lg);
  border: 1px solid var(--h-border);
  /* Near-black panel with a violet glow hugging the right edge - a bright
     upper-right lobe flowing diagonally into a softer lower-right lobe. */
  background:
    radial-gradient(42% 56% at 80% 24%, rgba(110, 64, 240, 0.60), rgba(110, 64, 240, 0) 70%),
    radial-gradient(46% 52% at 92% 80%, rgba(82, 40, 205, 0.52), rgba(82, 40, 205, 0) 72%),
    radial-gradient(95% 130% at 102% 52%, rgba(60, 32, 150, 0.30), rgba(60, 32, 150, 0) 70%),
    #0a0a0f;
  overflow: hidden;
}
/* When assets/images/intro-card-bg.* exists, the export IS the whole card
   (rounded corners + border + glow on a transparent canvas). So we drop our own
   panel chrome - no fill, no border - and let the image be the card; its
   transparent margin blends into the section band behind it. */
body.home .home-intro__card.has-bg {
  background: var(--intro-bg) center / cover no-repeat;
  border: 0;
}
body.home .site-homepage .home-intro__text {
  font-family: var(--h-serif);   /* GT Sectra - beats the global sans heading rule */
  font-size: clamp(22px, 3.36vw, 40px);
  line-height: 1.12;
  color: #fff;
}
/* Keep the lead and the "Confidence is" accent on separate centered lines,
   regardless of how wide the card is. */
body.home .home-intro__lead,
body.home .home-intro__text .home-accent-purple { display: block; }
body.home .home-intro__lead { color: #fff; }
body.home .home-intro__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 19px 0 0;
  padding: 0;
  list-style: none;
}
body.home .home-intro__pills li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--h-muted);
  font-size: 11px;
  font-weight: 500;
  
  margin-bottom: 24px;
}
body.home .home-intro__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--h-purple); flex: none; }
body.home .home-intro__sub {
  max-width: 800px;
  margin: 18px auto 0;
  color: white;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
}
body.home .home-intro__sub strong { color: #fff; font-weight: 600; }

/* ---------- Problems accordion ---------- */
body.home .home-acc {
  max-width: 704px;
  margin: 0 auto;
  border-top: 1px solid var(--h-border);
}
body.home .home-acc__item { border-bottom: 1px solid var(--h-border); }
body.home .home-acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 19px 3px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: #fff;
}
body.home .home-acc__title { font-size: clamp(14px, 1.6vw, 18px); font-weight: 600; }
body.home .home-acc__icon {
  position: relative;
  width: 18px; height: 18px; flex: none;
}
body.home .home-acc__icon::before,
body.home .home-acc__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 2px;
  background: var(--h-green);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
body.home .home-acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
body.home .home-acc__item.is-open .home-acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
body.home .home-acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
body.home .home-acc__body > .home-acc__rich {
  overflow: hidden;
  color: var(--h-muted);
  font-size: 13px;
  padding-right: 30px;
}
/* Rich-text answers output their own <p>; keep the previous single-paragraph
   spacing while still allowing lists / multiple paragraphs from the editor. */
body.home .home-acc__rich > :first-child { margin-top: 0; }
body.home .home-acc__rich > :last-child { margin-bottom: 0; }
body.home .home-acc__item.is-open .home-acc__body { grid-template-rows: 1fr; }
body.home .home-acc__item.is-open .home-acc__body > .home-acc__rich { padding-bottom: 19px; }

/* WYSIWYG description containers: the editor wraps content in <p>, so neutralize
   the outer paragraph margins to keep single-paragraph copy looking the same,
   while still allowing multiple paragraphs / lists when an editor adds them. */
body.home .home-intro__sub > :first-child,
body.home .home-ctaai__desc > :first-child,
body.home .home-final__desc > :first-child,
body.home .home-service__text > :first-child,
body.home .home-case__text > :first-child,
body.home .home-domain__text > :first-child,
body.home .home-process__text > :first-child,
body.home .home-product__text > :first-child,
body.home .home-work__sub > :first-child { margin-top: 0; }
body.home .home-intro__sub > :last-child,
body.home .home-ctaai__desc > :last-child,
body.home .home-final__desc > :last-child,
body.home .home-service__text > :last-child,
body.home .home-case__text > :last-child,
body.home .home-domain__text > :last-child,
body.home .home-process__text > :last-child,
body.home .home-product__text > :last-child,
body.home .home-work__sub > :last-child { margin-bottom: 0; }

/* ---------- Problems accordion (icon + result badge variant) ---------- */
body.home .home-accent-text-purple { color: #7D51F1; }
body.home .home-accent-text-green { color: var(--h-green); }
/* Divided list with default / hover / open states. */
body.home .home-acc--problems {
  max-width: 1200px;
  border-top: 0;
}
body.home .home-acc--problems .home-acc__item {
  border: 0;
  border-top: 0.5px solid #211F25;   /* separator between items (default) */
  background: transparent;            /* default = same as the section background */
  transition: background 0.18s ease, border-color 0.18s ease;
}
body.home .home-acc--problems .home-acc__item:first-child { border-top: 0; }
body.home .home-acc--problems .home-acc__head { gap: 14px; justify-content: flex-start; padding: 15px 18px; }
/* Hover + open: filled highlight; the divider hides on the active item itself. */
body.home .home-acc--problems .home-acc__item:hover,
body.home .home-acc--problems .home-acc__item.is-open {
  background: #15111E;
  border-top-color: transparent; /* hide the active item's own top divider */
}
/* Only the last item rounds its corners (so its own bottom divider can curve);
   the rest stay square so their dividers read as clean straight 0.5px lines. */
body.home .home-acc--problems .home-acc__item:last-child:hover,
body.home .home-acc--problems .home-acc__item:last-child.is-open {
  border-radius: 0 0 var(--h-radius) var(--h-radius); /* round only the lower corners */
}
/* Highlight only the divider directly below the active item (= the next item's
   top border) - one purple divider per row. Hover keeps the 0.5px separator width
   (recoloured); an expanded item gets a heavier 1px line. */
body.home .home-acc--problems .home-acc__item:hover + .home-acc__item {
  border-top-color: #5336A1;
}
/* The :not(:hover) keeps the heavier 1px expanded divider from overriding the
   0.5px hover divider when you hover the item directly below an open one. */
body.home .home-acc--problems .home-acc__item.is-open + .home-acc__item:not(:hover) {
  border-top: 1px solid #5336A1;
}
/* The last item has no sibling below it, so it draws its own divider as a rounded
   bottom border that follows the highlight's corners (0.5px hover / 1px expanded).
   A persistent transparent bottom border gives the colour transition a clean
   start - without it the border fades in from the default white border colour. */
body.home .home-acc--problems .home-acc__item:last-child {
  border-bottom: 0.5px solid transparent;
}
body.home .home-acc--problems .home-acc__item:last-child:hover {
  border-bottom-color: #5336A1;
}
body.home .home-acc--problems .home-acc__item:last-child.is-open {
  border-bottom: 1px solid #5336A1;
}
/* Hover: tint the question text light purple. */
body.home .home-acc--problems .home-acc__item:hover .home-acc__title {
  color: #CBB9F9;
}
body.home .home-acc__ico {
  flex: none;
  width: 35px; height: 35px;
  display: grid; place-items: center;
  /* Each icon tile (assets/images/problem-icons/*.svg) carries its own
     purple background, so the wrapper is just a sizing box. */
}
body.home .home-acc__ico img { width: 100%; height: 100%; display: block; }
body.home .home-acc--problems .home-acc__title { flex: 1 1 auto; font-size: clamp(12px, 1.36vw, 14px); transition: color 0.18s ease; }
body.home .home-acc__badge {
  flex: none;
  min-width: 96px;
  height: 34px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--h-pill);
  border: 1px solid #5336A1;
  color: #7D51F1;
  font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
body.home .home-acc__chev { flex: none; color: var(--h-muted); display: inline-flex; }
/* Right-side icon: diagonal arrow by default/hover, X when open. */
body.home .home-acc__chev-close { display: none; }
body.home .home-acc--problems .home-acc__item.is-open .home-acc__chev-arrow { display: none; }
body.home .home-acc--problems .home-acc__item.is-open .home-acc__chev-close { display: inline-flex; }
body.home .home-acc--problems .home-acc__item.is-open .home-acc__chev { color: #fff; }
body.home .home-acc--problems .home-acc__body > .home-acc__rich { padding-left: 18px; padding-right: 18px; }

/* ---------- AI comparison table ---------- */
body.home .home-cmp { max-width: 1200px; margin: 45px auto 0; }
body.home .home-cmp__row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
}
body.home .home-cmp__cell {
  padding: 14px 18px;
  color: #fff;
  display: flex; align-items: center; gap: 6px;
}
/* Optional admin-uploaded column icon - fit the 18x18 box of the default SVG
   without distorting non-square uploads. */
body.home .home-cmp__ico { flex: none; width: 18px; height: 18px; object-fit: contain; }
body.home .home-cmp__cell--feature { color: #fff; font-weight: 500; }
/* Dividers in the feature (label) column - only the two middle rows, which yields
   the three inner lines while leaving the first row's top and last row's bottom clean.
   Row order inside .home-cmp: 1 = head, 2 = Test cases, 3 = Automating, 4 = Fixing flaky. */
body.home .home-cmp__row:nth-child(3) .home-cmp__cell--feature {
  border-top: 1px solid #211F25;
  border-bottom: 1px solid #211F25;
}
body.home .home-cmp__row:nth-child(4) .home-cmp__cell--feature {
  border-bottom: 1px solid #211F25;
}
body.home .home-cmp__cell--with {
  background: rgba(63, 227, 182, 0.06);
  border-inline: 1px solid rgba(63, 227, 182, 0.4);
  border-top: 1px solid rgba(63, 227, 182, 0.4); /* row divider, confined to the box */
}
body.home .home-cmp__row--head .home-cmp__cell { font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; }
body.home .home-cmp__row--head .home-cmp__cell--without { color: #ff5470; }
body.home .home-cmp__row--head .home-cmp__cell--with {
  color: var(--h-green);
  border-top: 1px solid rgba(63, 227, 182, 0.4);
  border-radius: 0 10px 0 0; /* square the left edge - it meets the WITHOUT box */
}
body.home .home-cmp__row:last-child .home-cmp__cell--with {
  border-bottom: 1px solid rgba(63, 227, 182, 0.4);
  border-radius: 0 0 10px 0; /* square the left edge - it meets the WITHOUT box */
}
body.home .home-cmp__cell--with b { color: #fff; font-weight: 700; }
/* WITHOUT AI column - neutral box mirroring the green QAMADNESS box. */
body.home .home-cmp__cell--without {
  background: rgba(255, 255, 255, 0.02);
  border-inline: 1px solid var(--h-border);
  border-top: 1px solid var(--h-border); /* row divider, confined to the box */
}
body.home .home-cmp__row--head .home-cmp__cell--without {
  border-top: 1px solid var(--h-border);
  border-radius: 10px 0 0 0; /* square the right edge - it meets the WITH box */
}
body.home .home-cmp__row:last-child .home-cmp__cell--without {
  border-bottom: 1px solid var(--h-border);
  border-radius: 0 0 0 10px; /* square the right edge - it meets the WITH box */
}
body.home .home-cmp__note { color: var(--h-green); font-style: normal; font-size: 10px; }

/* ---------- Note boxes ---------- */
body.home .home-problems__notes { max-width: 1200px; margin: 29px auto 0; display: flex; flex-direction: column; gap: 11px; }
body.home .home-note {
  padding: 14px 18px;
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  background: rgba(255, 255, 255, 0.02);
  color: #fff;
  font-size: 14px; line-height: 1.6;
}
body.home .home-note strong { color: #fff; font-weight: 700; }

/* ---------- Agents - QA-owned decision diagram ---------- */
/* Figma dimensions: cards 288x161, node 592x338, 16px gaps. The full row is
   288 + 16 + 592 + 16 + 288 = 1200 (the section's max content width); two
   stacked cards (161 + 16 + 161 = 338) match the node's height. */
body.home .home-agents__diagram {
  display: grid;
  /* Equal-share track growth fills the 288px card tracks first, so the cards hit
     exactly 288px; the centre node (max 592) absorbs the ~38px the padded 1162px
     container is short of the full 1200px. */
  grid-template-columns: minmax(0, 288px) minmax(0, 592px) minmax(0, 288px);
  justify-content: center;
  column-gap: 16px;
  align-items: center;
}
body.home .home-agents__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Agent cards (the four spokes) */
body.home .home-agent-card {
  height: 161px;
  background: var(--h-card);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  padding: 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Same duration/easing as the node glow so the card lights up in step with
     the glow arriving at it. */
  transition: border-color 1.4s cubic-bezier(0.4, 0, 0.2, 1),
              background 1.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
body.home .home-agent-card.is-active {
  /* Same teal as the pill - border = pill's bright edge (#046654),
     fill/glow = the pill glow green (#06423C). */
  border-color: #046654;
  background: rgba(6, 66, 60, 0.12);
  box-shadow: 0 0 0 1px rgba(6, 66, 60, 0.4), 0 11px 27px rgba(6, 66, 60, 0.22);
}
body.home .home-agent-card__ico {
  width: 35px; height: 35px;
  border-radius: 10px;
  display: grid; place-items: center;
  overflow: hidden;
  margin-bottom: 13px;
  background: #00886F; /* dimmed tile -> #00CCA6 when the card is active */
  transition: background 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
body.home .home-agent-card.is-active .home-agent-card__ico { background: #00CCA6; }
/* Glyph painted from a transparent SVG via a CSS mask, so the glyph colour is
   pure CSS (the SVG's own colours are ignored - only its shape/alpha is used). */
body.home .home-agent-card__glyph {
  width: 20px; height: 20px;
  background-color: #68DCC7; /* dimmed glyph -> #00886F when active */
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
  transition: background-color 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
body.home .home-agent-card.is-active .home-agent-card__glyph { background-color: #00886F; }
/* PNG fallback (used until the glyph-only SVGs are added). */
body.home .home-agent-card__ico img { width: 100%; height: 100%; display: block; opacity: 0.5; }
body.home .home-agent-card.is-active .home-agent-card__ico img { opacity: 1; }
body.home .home-agent-card__title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 3px; }
body.home .home-agent-card__sub { color: var(--h-muted); font-size: 14px; }

/* The glow angle is a registered <angle> so it can be *transitioned* - one
   variable drives both the glow's orbit (::before transform) and the border's
   rotating gradient, keeping the lit edge in sync with the glow. */
@property --agent-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 45deg;
}
/* Center decision node (animated glow) */
body.home .home-agents__center { display: flex; }
body.home .home-agents__node {
  position: relative;
  width: 100%;
  height: 338px; /* 161 + 16 + 161 - matches the two stacked cards beside it */
  border-radius: 999px;
  /* Base fill = #08070E (darkest). The 0.5px border is a conic gradient that's
     brightest (#046654) at the glow angle and darkest (#0D1A18) opposite, so the
     lit edge rotates around the pill in step with the glow. */
  border: 0.5px solid transparent;
  background:
    linear-gradient(#08070E, #08070E) padding-box,
    conic-gradient(from var(--agent-angle, 45deg),
      #046654 0deg, #0D1A18 180deg, #046654 360deg) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: --agent-angle 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 26px;
}
body.home .home-agents__node::before {
  content: "";
  position: absolute;
  inset: -45%;
  /* Soft glow peaking at #06423C (greenest part of the pill), fading to transparent.
     Many stops -> smooth falloff that avoids visible banding rings. */
  background: radial-gradient(circle 640px at center,
    rgba(6, 66, 60, 1) 0%,
    rgba(6, 66, 60, 0.82) 16%,
    rgba(6, 66, 60, 0.58) 31%,
    rgba(6, 66, 60, 0.38) 46%,
    rgba(6, 66, 60, 0.22) 62%,
    rgba(6, 66, 60, 0.1) 80%,
    rgba(6, 66, 60, 0) 100%);
  filter: blur(60px); /* heavier blur -> smoother falloff, no visible glow core */
  z-index: 0;
  /* Orbit the glow on a circle around the pill centre: rotate() spins the offset
     blob about the centre, so transitioning the angle sweeps a true circular arc
     (not the straight corner-to-corner drift the translate version produced).
     --agent-angle is incremented by 90deg per step in home.js for continuous spin. */
  transform-origin: center;
  /* Driven by the animated --agent-angle (transitioned on the node), so no
     transition is needed here - the variable interpolation orbits the glow. */
  transform: rotate(var(--agent-angle, 45deg)) translateY(-250px);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  body.home .home-agents__node { transition: none; }
}
body.home .home-agents__node > * { position: relative; z-index: 1; }
body.home .home-agents__node-eyebrow {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;       /* title case, no tracking - matches the design */
  text-transform: none;
  margin-bottom: 8px;
}
body.home .home-agents__node-title {
  font-size: clamp(21px, 2.4vw, 32px);
  /* 500 (Medium) is a real face; 600 would round UP to 700 Bold since the font
     ships only 300/400/500/700 weights. */
  font-weight: 500;
  color: #00cca6;
  line-height: 1.1;
}
body.home .home-agents__node-sub { color: rgba(255, 255, 255, 0.85); font-size: 14px; margin-top: 10px; }
/* Green separator dots in the sub-line - smaller than the words. */
body.home .home-agents__node-dot { color: var(--h-green); font-size: 0.6em; vertical-align: middle; }

/* Product cards */
body.home .home-agents__products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 35px;
}
body.home .home-product {
  position: relative;
  border-radius: var(--h-radius-lg);
  padding: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.6s ease;
}
/* Hover: lift the card and (below) fill the footer with the accent colour. */
body.home .home-product:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
body.home .home-product--purple:hover { border-color: rgba(142, 108, 255, 0.6); }
body.home .home-product--green:hover { border-color: rgba(63, 227, 182, 0.6); }
/* Background gradient stretched to fill (images cropped to remove their baked-in
   border + rounded corners - the frame is now the CSS border below). The card's
   border-radius + overflow:hidden round the fill; the border draws crisply on top. */
body.home .home-product--purple {
  background: url("../assets/images/purple-back.png?v=3") center / 100% 100% no-repeat;
  border: 1px solid rgba(142, 108, 255, 0.35);
}
body.home .home-product--green {
  background: url("../assets/images/green-back.png?v=3") center / 100% 100% no-repeat;
  border: 1px solid rgba(63, 227, 182, 0.35);
}
body.home .home-product__badge {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: var(--h-pill);
  font-size: 10px;
  font-weight: 700;
  border: 1px solid currentColor;
  margin-bottom: 24px;
}
body.home .home-product--purple .home-product__badge { color: var(--h-purple); }
body.home .home-product--green .home-product__badge { color: var(--h-green); }
/* Ancestor `.home-product` raises specificity above the global
   `.site-homepage h3/p { margin: 0 }` so these margins actually apply. */
body.home .home-product .home-product__title { font-size: 18px; margin: 0 0 24px; }
body.home .home-product .home-product__text { color: rgba(255, 255, 255, 0.9); font-size: 12px; line-height: 1.6; margin: 0 0 32px; }
body.home .home-product__foot {
  margin-top: auto; /* pin to the card bottom so both cards' footers align */
  position: relative; /* anchor for the absolutely-placed arrow */
  display: flex;
  align-items: center;
  justify-content: center; /* centre the label across the full bar */
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--h-radius);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 11px;
  font-weight: normal;
  text-decoration: none;
  transition: background 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.6s ease;
}
/* Arrow pinned to the left so the label can centre over the whole bar. On hover
   it slides across to the right edge (animating `left`, while the label stays
   centred). */
body.home .home-product__foot-ico {
  display: inline-flex;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1), color 0.6s ease;
}
body.home .home-product--purple .home-product__foot-ico { color: var(--h-purple); }
body.home .home-product--green .home-product__foot-ico { color: var(--h-green); }
body.home .home-product__foot-text { text-align: center; }
body.home .home-product__foot--static { cursor: default; }

/* Hover: the footer becomes a solid accent button with dark text, and the arrow
   moves from the left edge to sit right after the label. */
body.home .home-product--purple:hover .home-product__foot { background: var(--h-purple); color: #0c0a18; }
body.home .home-product--green:hover .home-product__foot { background: var(--h-green); color: #07120f; }
body.home .home-product:hover .home-product__foot-ico {
  left: calc(100% - 32px); /* slide to the right edge (mirrors the 14px left inset) */
  color: inherit;          /* dark, matching the button text */
}

/* Agents diagram - responsive (relax the fixed desktop dimensions). */
@media (max-width: 1040px) {
  body.home .home-agents__diagram {
    grid-template-columns: 1fr;
    justify-content: stretch;
    column-gap: 0;
    row-gap: 18px;
  }
  body.home .home-agents__center { order: -1; }
  body.home .home-agents__col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
  }
  body.home .home-agent-card { height: auto; min-height: 120px; }
  body.home .home-agents__node { width: 100%; height: auto; min-height: 192px; }
  body.home .home-agents__products { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* Mobile diagram (matches the mobile design): two agent cards on top, the
     QA Engineer node full-width in the MIDDLE, then two cards below - followed by
     the stacked product cards. Flatten the two card columns so all four cards +
     the node become direct items of one 2-column grid, then order them.
     Card slots: tl=Maintain, bl=Automate, tr=Analyze, br=Design. */
  body.home .home-agents__diagram {
    grid-template-columns: 1fr 1fr;
    column-gap: 13px;
    row-gap: 13px;
  }
  body.home .home-agents__col { display: contents; }
  body.home .home-agents [data-agent="tl"] { order: 1; } /* Maintain (top-left) */
  body.home .home-agents [data-agent="tr"] { order: 2; } /* Analyze  (top-right) */
  body.home .home-agents__center { order: 3; grid-column: 1 / -1; } /* node, full-width middle */
  body.home .home-agents [data-agent="bl"] { order: 4; } /* Automate (bottom-left) */
  body.home .home-agents [data-agent="br"] { order: 5; } /* Design   (bottom-right) */
}

/* ---------- Three ways comparison matrix ---------- */
/* Three-ways + AI-CTA share a lifted dark band (matches the intro/problems band). */
body.home .home-ways,
body.home .home-ctaai { background: #110d1a; }
/* Tighten the gap between the table and the AI-CTA banner to 44px (22 + 22).
   The :not()s match the base section rule's specificity so these win over its
   128px vertical padding. */
body.home .home-section:not(.home-clients):not(.home-testimonials).home-ways { padding-bottom: 22px; }
body.home .home-section:not(.home-clients):not(.home-testimonials).home-ctaai { padding-top: 22px; }
body.home .home-ways__matrix { max-width: 1200px; margin: 0 auto; }
body.home .home-ways__table {
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius-lg);
  background: rgba(255, 255, 255, 0.015);
}
body.home .home-ways__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 266px 266px 266px;
  align-items: stretch;
  border-bottom: 1px solid var(--h-border);
}
body.home .home-ways__row:last-child { border-bottom: 0; }
body.home .home-ways__cell {
  padding: 18px;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative; /* anchor for the absolutely-placed note */
}
body.home .home-ways__cell--feature {
  align-items: flex-start;
  text-align: left;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
/* Vertical separators between the non-highlighted columns - the highlighted
   column draws its own green border-inline, so this completes the grid. */
body.home .home-ways__cell:not(.home-ways__cell--feature):not(.is-highlight) {
  border-left: 1px solid var(--h-border);
}
/* Data cells are a fixed 88px tall. Marks are top-aligned (not centred) so the
   note pinned 24px from the bottom has clearance - at 88px a centred mark + the
   note would collide. Marks stay aligned across the row since every cell uses
   the same top alignment. */
body.home .home-ways__row:not(.home-ways__row--head) .home-ways__cell {
  height: 88px;
  justify-content: flex-start;
}
/* No note in the cell -> centre the mark vertically (only note cells need the
   top alignment to make room for the bottom-pinned note). */
body.home .home-ways__row:not(.home-ways__row--head) .home-ways__cell:not(.home-ways__cell--note) {
  justify-content: center;
}
body.home .home-ways__row--head .home-ways__cell {
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 18px;
}
body.home .home-ways__row--head .home-ways__cell--feature { color: #fff; }
/* Highlighted "QA Madness + AI" column - continuous green box */
body.home .home-ways__cell.is-highlight {
  background: rgba(63, 227, 182, 0.05);
  border-inline: 1px solid rgba(63, 227, 182, 0.4);
}
body.home .home-ways__row--head .home-ways__cell.is-highlight {
  color: var(--h-green);
  border-top: 1px solid rgba(63, 227, 182, 0.4);
  border-radius: 11px 11px 0 0;
}
body.home .home-ways__row:last-child .home-ways__cell.is-highlight {
  border-bottom: 1px solid rgba(63, 227, 182, 0.4);
  border-radius: 0 0 11px 11px;
}
body.home .home-ways__mark { display: inline-flex; }
/* Optional admin-uploaded yes/no icon - fit the 20x20 box of the default SVG
   without distorting non-square uploads. */
body.home .home-ways__mark-img { width: 20px; height: 20px; object-fit: contain; }
/* Pinned 24px above the cell's bottom edge (the marks stay vertically centred
   independently, so they remain aligned across the whole row). */
body.home .home-ways__note {
  position: absolute;
  left: 0; right: 0;
  bottom: 24px;
  font-size: 12px;
  color: var(--h-muted-2);
}
body.home .home-ways__captions {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  margin-top: 24px;
}
body.home .home-ways__caption {
  padding: 0 13px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
body.home .home-ways__caption.is-highlight { color: var(--h-green); }

/* ---------- AI CTA band ---------- */
body.home .home-ctaai__box {
  position: relative;
  border-radius: var(--h-radius-lg);
  padding: clamp(32px, 4.8vw, 61px) clamp(19px, 4vw, 64px);
  text-align: center;
  overflow: hidden;
  border: 1px solid var(--h-border);
  background:
    radial-gradient(70% 90% at 10% 6%, rgba(120, 80, 255, 0.55), transparent 55%),
    radial-gradient(70% 100% at 92% 96%, rgba(0, 200, 150, 0.5), transparent 55%),
    #0a0a12;
}
/* Optional background image (admin upload or the theme hero-style webp) -
   replaces the gradient above. Painted on a ::before layer; the new full-bleed
   webp needs no overscan, so it sits at a plain `cover`. Border removed + drop
   shadow added to match the design. */
body.home .home-ctaai__box.has-bg {
  background: none;
  border-color: transparent;
  border-radius: 32px; /* rounder corners to match the design */
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
body.home .home-ctaai__box.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Desktop: cover + a slight overscan zoom. The image's glow fades softly
     toward its edges, so fitting it flush leaves a dark "frame" inside the
     rounded card; scaling ~14% (the box's overflow:hidden clips the overscan)
     pushes the glow out to the card edges. Mobile overrides this - cover + a
     focal point, no zoom - since its tall card already crops in enough. */
  background: var(--ctaai-bg) center / cover no-repeat;
  transform: scale(1.14);
  transform-origin: center;
  pointer-events: none;
}
body.home .home-ctaai__box.has-bg > * {
  position: relative;
  z-index: 1;
}
/* Ancestor `.home-ctaai__box` raises specificity above the global
   `.site-homepage h2/p { margin: 0 }` so the auto-centering actually applies. */
body.home .home-ctaai__box .home-ctaai__title {
  font-family: var(--h-serif);
  font-weight: 400;
  font-size: clamp(24px, 3.68vw, 54px);
  line-height: 1.08;
  max-width: 800px;
  margin: 0 auto;
  color: #fff;
}
body.home .home-ctaai__accent { font-family: var(--h-serif); color: #00cca6; }
body.home .home-ctaai__box .home-ctaai__desc {
  max-width: 800px;
  margin: 18px auto 48px; /* 48px gap above the consultation button */
  color: var(--h-muted);
  font-size: 18px;
  line-height: 1.6;
  color: #fff;
}
body.home .home-ctaai__desc strong { color: #fff; font-weight: 800; }
body.home .home-ctaai__link {
  display: flex;            /* own line, below the button */
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 48px; /* 48px gap below the consultation button */
  color: var(--h-muted);
  font-size: 12px;
  text-decoration: none;
}
body.home .home-ctaai__link:hover { color: #fff; }
body.home .home-ctaai__link-path { color: inherit; }
/* Optional admin-uploaded link icon - fit the 15x15 box of the default arrow. */
body.home .home-ctaai__link-img { width: 15px; height: 15px; object-fit: contain; flex: none; }
body.home .home-ctaai__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 21px 32px;
  margin: 35px 0 0;
  padding: 0;
  list-style: none;
}
body.home .home-ctaai__chip { display: flex; align-items: center; gap: 10px; text-align: left; }
body.home .home-ctaai__chip-ico {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid; place-items: center;
}
/* Optional admin-uploaded chip icon - fit the 20x20 box of the default SVG. */
body.home .home-ctaai__chip-ico-img { width: 20px; height: 20px; object-fit: contain; }
body.home .home-ctaai__chip-ico--green { background: #00886F; color: #68DCC7; }
body.home .home-ctaai__chip-ico--purple { background: #5336A1; color: #CBB9F9; }
body.home .home-ctaai__chip-text { display: flex; flex-direction: column; line-height: 1.3; }
body.home .home-ctaai__chip-title { font-weight: 500; color: #fff; font-size: 14px; }
/* Title color follows the chip's accent (set on the adjacent icon span). */
body.home .home-ctaai__chip-ico--green + .home-ctaai__chip-text .home-ctaai__chip-title { color: #68DCC7; }
body.home .home-ctaai__chip-ico--purple + .home-ctaai__chip-text .home-ctaai__chip-title { color: #CBB9F9; }
body.home .home-ctaai__chip-sub { color: var(--h-muted); font-size: 12px; }

/* ---------- Services ---------- */
body.home .home-services { background: #08060D; }
body.home .home-services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 19px;
  margin-bottom: 35px;
}
body.home .home-services__head-text { max-width: 600px; }
/* Eyebrow pill above the section heading. */
body.home .home-services__eyebrow,
body.home .home-process__eyebrow,
body.home .home-testi__eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 14px;
  white-space: nowrap;
  border-radius: var(--h-pill);
  border: 1px solid rgba(142, 108, 255, 0.35);
  background: rgba(142, 108, 255, 0.08);
  color: #a78bff;
  font-size: 11px;
  font-weight: 700;
}
/* The Process / Testimonials pills are shown on mobile only (revealed in @media <=768). */
body.home .home-process__eyebrow,
body.home .home-testi__eyebrow { display: none; }
/* The Services "Our Services" eyebrow pill is hidden on the homepage (per design). */
body.home .home-services__eyebrow { display: none; }
body.home .home-services__head h2 { font-size: clamp(34px, 10vw, 48px); letter-spacing: -0.01em; }
body.home .home-services__head p { margin-top: 13px; color: var(--h-muted); font-size: clamp(15px, 4vw, 18px); }
body.home .home-services__btn { flex: none; }
/* Desktop: the "All Services" button lives after the grid in the markup (so it
   drops to the bottom on mobile), but here it's grid-placed back into the header's
   top-right. Explicit row/column placement keeps it there regardless of DOM order. */
@media (min-width: 769px) {
  body.home .home-services .container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 19px;
    row-gap: 35px;
  }
  body.home .home-services__head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  body.home .home-services__btn { grid-column: 2; grid-row: 1; justify-self: end; }
  body.home .home-services__grid { grid-column: 1 / -1; grid-row: 2; }
}

body.home .home-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 19px;
}
/* Wide cards span two columns (class set in services.php, not positional). */
body.home .home-services__grid > .home-service--wide { grid-column: span 2; }

body.home .home-service {
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow the card to shrink in its grid track so text wraps instead of overflowing */
  background: var(--h-card);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  padding: 22px;
}
/* Card surface tinted to its theme color (overrides the default --h-card). */
body.home .home-service--purple { border-color: rgba(142, 108, 255, 0.35); background: #110E19; }
body.home .home-service--green { border-color: rgba(0, 204, 166, 0.35); background: #0D1217; }
body.home .home-service__top { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
body.home .home-service__ico {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
}
body.home .home-service--purple .home-service__ico { background: rgba(142, 108, 255, 0.16); color: #a78bff; }
body.home .home-service--green .home-service__ico { background: rgba(0, 204, 166, 0.16); color: #00cca6; }
/* Optional admin-uploaded service icon. The uploaded PNGs are complete tiles
   (their own background + glyph), so let the image fill the whole tile and drop
   our duplicate tile background when one is present. */
body.home .home-service__ico--has-img { background: none; }
body.home .home-service__ico-img { width: 100%; height: 100%; object-fit: contain; }
body.home .home-service__title { font-size: 18px; font-weight: 500; line-height: 1.2; }
body.home .home-service--purple .home-service__title { color: #CBB9F9; }
body.home .home-service--green .home-service__title { color: #68DCC7; }
body.home .home-service__text { color: var(--h-muted); font-size: 14px; line-height: 1.6; }
body.home .home-service__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
/* border uses currentColor so it always matches the tag text colour. */
body.home .home-service__tags li { padding: 4px 10px; border-radius: var(--h-pill); border: 1px solid currentColor; font-size: 10px; font-weight: 600; }
body.home .home-service__tags li::before { content: "#"; }
body.home .home-service--purple .home-service__tags li { background: #0E0B15; color: #5336A1; }
body.home .home-service--green .home-service__tags li { background: #0D1217; color: #00886F; }
body.home .home-service__more {
  margin-top: auto;
  padding-top: 18px;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 12px; /* resting gap between label and arrow */
  font-weight: 500;
  font-size: 12px;
  text-decoration: none;
  transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease;
}
/* Hover: stretch the gap to 20px and tint text + arrow to the card colour. */
body.home .home-service__more:hover { gap: 20px; }
body.home .home-service--purple .home-service__more { color: #fff; }
body.home .home-service--green .home-service__more { color: #fff; }
body.home .home-service--purple .home-service__more:hover { color: #CBB9F9; }
body.home .home-service--green .home-service__more:hover { color: #68DCC7; }
body.home .home-service__more--static { cursor: default; }

/* ---------- Clients logos (auto-scrolling marquee) ---------- */
body.home .home-clients {
  text-align: center;
  background: #1a1a22;
  min-height: 146px;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Ancestor `.home-clients` raises specificity above the global `.site-homepage p
   { margin: 0 }` so this gap (title -> logos) actually applies. Adjust here. */
body.home .home-clients .home-clients__title { color: var(--h-muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px;}
body.home .home-clients__marquee {
  overflow: hidden;
  width: 100%;
  /* Fade the logos out toward both edges. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
body.home .home-clients__track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: clientsScroll 45s linear infinite;
}
body.home .home-clients__marquee:hover .home-clients__track { animation-play-state: paused; }
/* Gap lives on the items (not `gap`) so translateX(-50%) loops seamlessly. */
body.home .home-clients__item {
  flex: none;
  margin-right: clamp(38px, 4.8vw, 77px);
  display: flex;
  align-items: center;
}
body.home .home-clients__item img {
  height: 27px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1) brightness(1.7);
  transition: opacity 0.2s ease;
}
body.home .home-clients__item img:hover { opacity: 0.9; }
@keyframes clientsScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  body.home .home-clients__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}
/* Text fallback (scrolls in the same marquee until logos are uploaded) */
body.home .home-clients__track--text .home-clients__item { color: var(--h-muted-2); font-size: 16px; font-weight: 700; white-space: nowrap; }

/* ---------- Results stats ---------- */
body.home .home-results { background: #110D1A; }
/* "By the Numbers" eyebrow pill (centred above the heading via .home-section__head). */
body.home .home-results__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;          /* auto-fit the label (a fixed 131x34 cropped it) */
  white-space: nowrap;
  margin-bottom: 16px;
  border-radius: var(--h-pill);
  border: 1px solid #00886F;
  background: #0F1419;
  color: #00CCA6;
  font-size: 12px;
  font-weight: 700;
}
/* The Results "By the Numbers" eyebrow pill is hidden on the homepage (per design). */
body.home .home-results__eyebrow { display: none; }
body.home .home-results__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 19px;
}
body.home .home-results__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 14px;
  background: var(--h-card);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
}
body.home .home-results__item--purple { border-color: rgba(142, 108, 255, 0.35); background: #110E19; }
body.home .home-results__item--green { border-color: rgba(0, 204, 166, 0.35); background: #0D1217; }
body.home .home-results__ico {
  width: 37px; height: 37px;
  border-radius: 10px;
  display: grid; place-items: center;
  margin-bottom: 18px;
}
/* Optional admin-uploaded stat icon. Uploaded PNGs are complete tiles (their own
   background + glyph), so let the image fill the whole tile and drop our
   duplicate tile background when one is present. */
body.home .home-results__ico--has-img { background: none; }
body.home .home-results__ico-img { width: 100%; height: 100%; object-fit: contain; }
body.home .home-results__item--purple .home-results__ico { background: rgba(142, 108, 255, 0.16); color: #a78bff; }
body.home .home-results__item--green .home-results__ico { background: rgba(0, 204, 166, 0.16); color: #00cca6; }
body.home .home-results__num { display: block; font-size: clamp(26px, 3.2vw, 37px); font-weight: 700; line-height: 1; }
body.home .home-results__item--purple .home-results__num { color: #a78bff; }
body.home .home-results__item--green .home-results__num { color: #00cca6; }
body.home .home-results__label { display: block; margin-top: 11px; color: #fff; font-size: 18px; font-weight: 500; }
body.home .home-results__sub { display: block; margin-top: 6px; color: var(--h-muted); font-size: 14px; }

/* Results CTA banner */
body.home .home-results__cta {
  position: relative;
  margin-top: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 19px;
  padding: 22px clamp(22px, 3.2vw, 38px);
  border-radius: var(--h-radius-lg);
  border: 1px solid var(--h-border);
  overflow: hidden;
  background:
    radial-gradient(60% 160% at 42% 50%, rgba(63, 90, 230, 0.45), transparent 60%),
    radial-gradient(45% 150% at 60% 60%, rgba(0, 200, 150, 0.4), transparent 60%),
    #0c0c14;
}
/* Optional admin-uploaded CTA banner background - replaces the gradient. */
body.home .home-results__cta.has-bg {
  background: var(--results-cta-bg) center / cover no-repeat;
}
body.home .home-results__cta-text { position: relative; font-size: clamp(13px, 1.36vw, 18px); font-weight: 500; color: #fff; max-width: 650px; }
body.home .home-results__cta-btn { position: relative; flex: none; }

/* ---------- Process steps ---------- */
body.home .home-process { background: #08060D; }
body.home .home-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 19px;
}
body.home .home-process__card {
  background: var(--h-card);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  padding: 21px 19px;
  position: relative; /* anchor for the connector line */
}
body.home .home-process__card--purple { border-color: rgba(142, 108, 255, 0.35); }
body.home .home-process__card--green { border-color: rgba(0, 204, 166, 0.35); background: #0F1419; }
/* Connector line bridging the 19px gap to the next step, aligned with the number
   badge. Gradient runs from this card's colour to the next (cards alternate). */
body.home .home-process__card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 40px;        /* ~ vertical centre of the 40px number badge */
  /* -20px (not -19) accounts for the card's 1px border: positioned relative to
     the padding box, this makes the line span exactly border-edge to border-edge
     instead of starting 1px inside card 1 and stopping 1px short of card 2. */
  right: -20px;
  width: 19px;
  height: 1px;      /* thin, like an extension of the border */
  z-index: 2;
}
body.home .home-process__card--purple:not(:last-child)::after { background: linear-gradient(to right, rgba(142, 108, 255, 0.6), rgba(0, 204, 166, 0.6)); }
body.home .home-process__card--green:not(:last-child)::after { background: linear-gradient(to right, rgba(0, 204, 166, 0.6), rgba(142, 108, 255, 0.6)); }
body.home .home-process__head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
body.home .home-process__num {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 16px;
}
body.home .home-process__card--purple .home-process__num { background: #5336A1; color: #CBB9F9; }
body.home .home-process__card--green .home-process__num { background: #00886F; color: #68DCC7; }
body.home .home-process__title { font-size: 18px; font-weight: 700; line-height: 1.2; }
body.home .home-process__card--purple .home-process__title { color: #CBB9F9; }
body.home .home-process__card--green .home-process__title { color: #68DCC7; }
body.home .home-process__text { color: #fff; font-size: 14px; line-height: 1.6; font-weight: 100; }
body.home .home-process__list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-weight: 100;}
body.home .home-process__list li { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; }
body.home .home-process__dot { flex: none; width: 5px; height: 5px; border-radius: 50%; }
body.home .home-process__card--purple .home-process__dot { background: #a78bff; }
body.home .home-process__card--green .home-process__dot { background: #00cca6; }

/* ---------- Domains ---------- */
body.home .home-domains__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px;
}
body.home .home-domain {
  background: var(--h-card);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  padding: 21px;
}
body.home .home-domain--purple { border-color: rgba(142, 108, 255, 0.35); }
body.home .home-domain--green { border-color: rgba(0, 204, 166, 0.35); background: #0F1419; }
body.home .home-domain__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
body.home .home-domain__ico {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  overflow: hidden;
}
/* The SVG file is a full 48x48 tile (its own background + glyph). */
body.home .home-domain__ico-img { width: 100%; height: 100%; display: block; }
/* Tile colours apply to the inline-glyph fallback; the SVG image covers them. */
body.home .home-domain--purple .home-domain__ico { background: rgba(142, 108, 255, 0.16); color: #a78bff; }
body.home .home-domain--green .home-domain__ico { background: rgba(0, 204, 166, 0.16); color: #00cca6; }
body.home .home-domain__badge {
  padding: 5px 11px;
  border-radius: var(--h-pill);
  border: 1px solid;
  font-size: 14px;
  font-weight: 500;
}
body.home .home-domain--purple .home-domain__badge { border-color: #5336A1; color: #7D51F1; }
body.home .home-domain--green .home-domain__badge { border-color: #00886F; color: #00CCA6; }
body.home .home-domain__title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
body.home .home-domain__text { color: #fff; font-size: 14px; line-height: 1.6; font-weight: lighter; }

/* ---------- Case studies ---------- */
body.home .home-cases__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 19px;
  margin-bottom: 35px;
}
body.home .home-cases__head-text { max-width: 512px; }
body.home .home-cases__head h2 { font-size: 48px; letter-spacing: -0.01em; }
body.home .home-cases__head p { margin-top: 13px; color: var(--h-muted); font-size: 14px; }
body.home .home-cases__btn { flex: none; }
/* Desktop: the "All Case Studies" button is after the grid in the markup (so it
   drops to the bottom on mobile), but here it's grid-placed back into the header's
   top-right. Explicit row/column placement keeps it there regardless of DOM order. */
@media (min-width: 769px) {
  body.home .home-cases .container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 19px;
    row-gap: 35px;
  }
  body.home .home-cases__head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  body.home .home-cases__btn { grid-column: 2; grid-row: 1; justify-self: end; }
  body.home .home-cases__grid { grid-column: 1 / -1; grid-row: 2; }
}

body.home .home-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px;
}
body.home .home-case {
  display: flex;
  flex-direction: column;
  border-radius: var(--h-radius-lg);
  border: 1px solid var(--h-border);
  padding: 22px;
  overflow: hidden;
}
body.home .home-case--purple {
  /* 110% overscan crops the image's baked border/corners off all four edges; the
     card's own border-radius + overflow:hidden then define clean smooth corners. */
  background: url("../assets/images/purple-back.png?v=1") center / 110% 110% no-repeat,
              linear-gradient(150deg, #2a1a52 0%, #160e2c 70%);
  border-color: #5336A1;
}
body.home .home-case--green {
  background: url("../assets/images/green-back.png?v=1") center / 110% 110% no-repeat,
              linear-gradient(150deg, #0c4a3a 0%, #0a2820 70%);
  border-color: #00886F;
}
body.home .home-case__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; }
body.home .home-case__tag {
  min-width: 67px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border-radius: var(--h-pill);
  border: 1px solid currentColor;
  font-family: var(--h-font);
  font-size: 12px;
  /* 500 = Medium (a real face). 600 would round UP to 700 Bold since the font
     only ships 300/400/500/700, which read as a heavier "different" font. */
  font-weight: 500;
}
/* Tag background gradient, left -> right: a lighter shade fading into the base tone. */
body.home .home-case--purple .home-case__tag { color: #7D51F1; background: linear-gradient(to right, #2E2150 0%, #241A3F 100%); }
body.home .home-case--green .home-case__tag { color: #00CCA6; background: linear-gradient(to right, #0F3A31 0%, #0A2D27 100%); }
/* `.home-case` ancestor out-specifies the global `.site-homepage h3 { margin: 0 }`. */
body.home .home-case .home-case__title { font-size: 18px; font-weight: 600; line-height: 1.25; margin: 16px 0; }
body.home .home-case__text { color: rgba(255, 255, 255, 0.78); font-size: 14px; line-height: 1.6; }
/* margin-top:auto pins the metrics to the bottom of the card so they align across
   all three cards regardless of how long each description is. */
body.home .home-case__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: auto 0 19px; }
/* Tiles are equal height (grid stretch) with their content vertically centred.
   The label reserves a fixed 2-line height (below), so a 1-line label takes the
   same space as a 2-line one - keeping the numbers aligned across both tiles. */
body.home .home-case__metric {
  text-align: center;
  padding: 14px 10px;
  border-radius: var(--h-radius);
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.home .home-case__metric-num { display: block; font-size: 24px; font-weight: 700; line-height: 1; }
body.home .home-case--purple .home-case__metric-num { color: #b9a6ff; }
body.home .home-case--green .home-case__metric-num { color: #4fe0bf; }
body.home .home-case__metric-label { display: block; margin-top: 6px; color: #fff; font-size: 12px; line-height: 1.4; min-height: 2.8em; }
body.home .home-case__more {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 12px; /* resting gap between label and arrow */
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  text-decoration: none;
  transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease;
}
/* Hover: stretch the gap to 20px and tint text + arrow to the card colour. */
body.home .home-case__more:hover { gap: 20px; }
body.home .home-case--purple .home-case__more:hover { color: #CBB9F9; }
body.home .home-case--green .home-case__more:hover { color: #68DCC7; }

/* ---------- How we work ---------- */
/* How We Work - 2-column grid; each card opens its body on hover.
   Transparent by default, #2C2A31 on hover. align-items:start so a hovered card
   grows on its own without stretching its row-mate. */
body.home .home-work__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto;
}
body.home .home-work__item {
  border-radius: var(--h-radius);
  background: transparent;
  transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
body.home .home-work__item:hover { background: #2C2A31; }
body.home .home-work__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 24px;
}
body.home .home-work__title { font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; transition: color 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
body.home .home-work__item:hover .home-work__title { color: var(--h-green); }
body.home .home-work__sub { display: block; margin-top: 10px; color: #fff; font-weight: lighter; font-size: 18px; line-height: 1.6; }
body.home .home-work__icon { flex: none; color: var(--h-muted); display: inline-flex; transition: color 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
body.home .home-work__item:hover .home-work__icon { color: var(--h-green); }
/* Arrow when closed, X on hover (open). */
body.home .home-work__icon-close { display: none; }
body.home .home-work__item:hover .home-work__icon-arrow { display: none; }
body.home .home-work__item:hover .home-work__icon-close { display: inline-flex; }
/* Body opens on hover - animated via grid-template-rows 0fr -> 1fr. */
body.home .home-work__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
body.home .home-work__item:hover .home-work__body { grid-template-rows: 1fr; }
body.home .home-work__body-inner { overflow: hidden; }
body.home .home-work__body p { color: #fff; font-size: 14px; font-weight: lighter; line-height: 1.6; margin: 0 24px 16px; }
body.home .home-work__body p:last-child { margin-bottom: 22px; }
/* Touch devices: :hover sticks after a tap, so neutralise the hover styles here
   and drive expand/collapse from an .is-open class toggled on tap (see home.js).
   Desktop (hover: hover) keeps the original hover behaviour above. */
@media (hover: none) {
  body.home .home-work__head { cursor: pointer; }
  body.home .home-work__item:hover { background: transparent; }
  body.home .home-work__item:hover .home-work__title { color: #fff; }
  body.home .home-work__item:hover .home-work__icon { color: var(--h-muted); }
  body.home .home-work__item:hover .home-work__icon-arrow { display: inline-flex; }
  body.home .home-work__item:hover .home-work__icon-close { display: none; }
  body.home .home-work__item:hover .home-work__body { grid-template-rows: 0fr; }
}
body.home .home-work__item.is-open { background: #2C2A31; }
body.home .home-work__item.is-open .home-work__title { color: var(--h-green); }
body.home .home-work__item.is-open .home-work__icon { color: var(--h-green); }
body.home .home-work__item.is-open .home-work__icon-arrow { display: none; }
body.home .home-work__item.is-open .home-work__icon-close { display: inline-flex; }
body.home .home-work__item.is-open .home-work__body { grid-template-rows: 1fr; }

/* ---------- Tools: chip marquees + category grid ---------- */
body.home .home-tools__rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 6px auto 38px;
  max-width: var(--h-container);
  padding-inline: 19px;
}
body.home .home-tools__marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
body.home .home-tools__track {
  display: flex;
  width: max-content;
  margin: 0; padding: 0;
  list-style: none;
  animation: toolsScroll 50s linear infinite;
}
body.home .home-tools__marquee--rev .home-tools__track { animation-direction: reverse; }
body.home .home-tools__rows:hover .home-tools__track { animation-play-state: paused; }
body.home .home-tools__chip {
  flex: none;
  margin-right: 13px;
  padding: 9px 18px;
  background: var(--h-card-2);
  border: 1px solid var(--h-border);
  border-radius: var(--h-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--h-muted);
  white-space: nowrap;
  cursor: default;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
/* Highlight a chip on hover (the row pauses above), the same dim -> bright idea as
   the client logos. */
body.home .home-tools__chip:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--h-border-strong);
}
@keyframes toolsScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  body.home .home-tools__track { animation: none; flex-wrap: wrap; width: auto; }
}

/* "Tech Stack" eyebrow pill - green. Hidden on the homepage (per design). */
body.home .home-tools__eyebrow {
  display: none;
  margin-bottom: 16px;
  padding: 7px 14px;
  white-space: nowrap;
  border-radius: var(--h-pill);
  border: 1px solid #00886F;
  background: #0F1419;
  color: #00CCA6;
  font-size: 11px;
  font-weight: 700;
}
body.home .home-tools__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 19px;
}
body.home .home-tools__cat {
  background: var(--h-card);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  padding: 21px;
}
body.home .home-tools__cat--wide { grid-column: span 2; }
body.home .home-tools__cat--purple { border-color: rgba(142, 108, 255, 0.35); }
body.home .home-tools__cat--green { border-color: rgba(0, 204, 166, 0.35); background: #0F1419; }
body.home .home-tools__cat-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
body.home .home-tools__cat--purple .home-tools__cat-title { color: #a78bff; }
body.home .home-tools__cat--green .home-tools__cat-title { color: #00cca6; }
body.home .home-tools__cat-list {
  margin: 16px 0 0; padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
body.home .home-tools__cat-list.is-one-col { grid-template-columns: 1fr; }
body.home .home-tools__cat-list li { color: #fff; font-size: 12px; font-weight: lighter; }

/* ---------- Testimonials carousel ---------- */
/* Content starts 200px from the left and bleeds off the right (carousel); the
   128px top/bottom comes from the section's vertical padding. */
/* Full-width container so the carousel can scroll edge-to-edge; the left inset
   lives on the head and the track instead. It matches the centred site
   container's left edge (max-width var(--h-container) + 19px padding) so the
   heading and first card line up with every other section, instead of a fixed
   200px that drifts left on wide screens. */
body.home .home-testi .container {
  max-width: none;
  margin: 0;
  padding: 0;
  --testi-inset: max(19px, calc((100% - var(--h-container)) / 2 + 19px));
}
body.home .home-testi__head { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 32px; padding: 0 200px 0 var(--testi-inset); }
body.home .home-testi__head h2 { font-size: 48px; letter-spacing: -0.01em; }
/* Mobile: nav flows below the carousel, centred (markup places it after the viewport). */
body.home .home-testi__controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; }
/* Desktop: grid the container so the controls sit back in the header (top-right),
   the heading top-left, and the carousel spans the row below - restoring the
   original desktop layout while mobile keeps the controls below. */
@media (min-width: 769px) {
  /* Three columns: [1fr] [controls auto] [right gutter]. Head + viewport span
     all three so their width equals the full container (var(--testi-inset)'s 100%
     keys off the full width). The gutter equals the inset, so the controls' right
     edge lands at the container edge - mirroring the heading's left inset. A
     grid-track width sizes against the full container (unlike a % item-margin,
     which keys off the narrow auto column - that was the earlier mistake). */
  body.home .home-testi .container { display: grid; grid-template-columns: 1fr auto 40px; align-items: center; row-gap: 32px; }
  body.home .home-testi__head { grid-area: 1 / 1 / 2 / 4; margin-bottom: 0; }
  body.home .home-testi__controls { grid-area: 1 / 2; margin: 0; justify-self: end; }
  body.home .home-testi__viewport { grid-area: 2 / 1 / 3 / 4; }
}
@media (min-width: 901px) {
  body.home .home-testi .container { grid-template-columns: 1fr auto var(--testi-inset); } /* right gutter = inset so the controls align to the container edge */
}
body.home .home-testi__nav {
  border: 0;
  background: transparent;
  color: var(--h-muted);
  display: grid; place-items: center;
  padding: 2px;
  cursor: pointer;
  transition: color 0.18s ease;
}
body.home .home-testi__nav svg { width: 14px; height: 14px; }
body.home .home-testi__nav:hover { color: #fff; }

body.home .home-testi__viewport { overflow: hidden; }
body.home .home-testi__track {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0 var(--testi-inset);  /* both ends align to the site container: first card rests at the left edge, last card at the right edge */
  scroll-padding-left: var(--testi-inset); /* snapped cards align to that container inset */
  list-style: none;
  scroll-snap-type: none; /* nav is JS-driven; snapping fought the smooth scroll and the off-grid end position */
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
body.home .home-testi__track::-webkit-scrollbar { display: none; }
body.home .home-testi__slide { flex: 0 0 592px; scroll-snap-align: start; }

body.home .home-testi__card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--h-radius-lg);
  padding: 22px 24px;
  height: 334px; /* matches the 592x334 preview images so they fill without cropping */
  overflow: hidden;
  background-color: #0c0c14;
}
/* A faint grid texture sits over the colour gradient (top two layers). */
body.home .home-testi__card--purple {
  background-image:
    repeating-linear-gradient(rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 44px),
    radial-gradient(120% 120% at 80% 30%, rgba(110, 70, 240, 0.55), transparent 60%),
    linear-gradient(135deg, #1a1140 0%, #0c0c14 70%);
}
body.home .home-testi__card--green {
  background-image:
    repeating-linear-gradient(rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 44px),
    radial-gradient(120% 120% at 80% 30%, rgba(0, 190, 140, 0.5), transparent 60%),
    linear-gradient(135deg, #0c3a2e 0%, #0c0c14 70%);
}
/* When a full preview thumbnail is provided, it becomes the whole card. */
body.home .home-testi__card--has-preview { background: var(--testi-preview) center / cover no-repeat; padding: 0; }
body.home .home-testi__brand { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.85); margin-bottom: 22px; }
body.home .home-testi__brand-sep { opacity: 0.5; }
body.home .home-testi__body { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body.home .home-testi__session { display: block; font-family: var(--h-serif); font-size: clamp(18px, 1.92vw, 24px); line-height: 1.1; color: #fff; }
body.home .home-testi__with { display: block; margin-top: 13px; font-style: italic; font-size: 12px; color: #4fe0bf; }
body.home .home-testi__card--purple .home-testi__with { color: #b9a6ff; }
body.home .home-testi__avatar {
  flex: none;
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: var(--testi-photo, radial-gradient(circle at 50% 40%, rgba(255,255,255,0.18), rgba(255,255,255,0.04))) center / cover no-repeat;
}
/* Colored glow ring around the photo, per card theme. */
body.home .home-testi__card--green .home-testi__avatar { border-color: #4fe0bf; box-shadow: 0 0 22px rgba(63, 227, 182, 0.55); }
body.home .home-testi__card--purple .home-testi__avatar { border-color: #b9a6ff; box-shadow: 0 0 22px rgba(142, 108, 255, 0.55); }
/* Hover: green translucent cover + play triangle, smoothly faded in. */
body.home .home-testi__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 136, 111, 0.55);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
body.home .home-testi__card:hover .home-testi__overlay,
body.home .home-testi__card:focus-visible .home-testi__overlay { opacity: 1; }
body.home .home-testi__play {
  display: grid;
  place-items: center;
  transform: scale(0.8);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
body.home .home-testi__card:hover .home-testi__play,
body.home .home-testi__card:focus-visible .home-testi__play { transform: scale(1); }
body.home .home-testi__caption { margin-top: 24px; font-weight: 700; color: #fff; font-size: 18px; transition: color 0.3s ease; }
body.home .home-testi__caption-at { font-weight: 400; } /* "at" stays regular weight */
/* Whole caption is white by default, turns green when its card is hovered. */
body.home .home-testi__slide:hover .home-testi__caption { color: #68DCC7; }

/* Progress dots - active is an elongated green pill, smoothly animated. */
body.home .home-testi__dots { display: flex; align-items: center; gap: 6px; }
body.home .home-testi__dot {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--h-border-strong);
  border: 0; padding: 0;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
}
body.home .home-testi__dot.is-active { width: 20px; background: var(--h-green); }

/* Video modal */
body.home .home-testi__modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
}
body.home .home-testi__modal[hidden] { display: none; }
body.home .home-testi__modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 10, 0.85);
  backdrop-filter: blur(4px);
}
body.home .home-testi__modal-dialog {
  position: relative;
  width: min(880px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: var(--h-radius-lg);
  overflow: hidden;
  background: #000;
}
body.home .home-testi__modal-close {
  position: absolute;
  top: -42px;
  right: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--h-border-strong);
  background: transparent;
  color: #fff;
  cursor: pointer;
}
body.home .home-testi__modal-frame { width: 100%; height: 100%; }
body.home .home-testi__modal-frame iframe,
body.home .home-testi__modal-frame video { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Partner (numbered bars) ---------- */
body.home .home-partner__list {
  max-width: 896px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
body.home .home-partner__row { display: flex; align-items: stretch; gap: 13px; }
body.home .home-partner__num {
  flex: none;
  width: 84px;
  height: 84px;
  align-self: flex-start; /* fixed 84x84 square, not stretched to the bar height */
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #5336A1;
  color: #CBB9F9;
  font-weight: 800;
  font-size: 24px;
}
body.home .home-partner__bar {
  flex: 1;
  display: flex;
  align-items: center; /* vertically centre the text in the bar */
  padding: 16px 21px;
  border-radius: 10px;
  background: var(--h-card);
  border: 1px solid #5336A1;
  color: #fff;
  font-size: 18px;
  font-weight: lighter;
  line-height: 1.5;
}
body.home .home-partner__bar strong { color: #fff; font-weight: 700; }
@media (max-width: 768px) {
  /* Mobile: the number badge stretches to the bar's full height (per design)
     instead of staying a fixed top-aligned square - the text wraps to several
     lines on a phone, so a fixed square would float disconnected at the top. */
  body.home .home-partner__num { width: 44px; height: auto; align-self: stretch; font-size: 22px; }
  body.home .home-partner__bar { padding: 13px 14px; font-size: 12px; }
}

/* ---------- Blog ---------- */
body.home .home-blog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 19px;
  margin-bottom: 35px;
}
body.home .home-blog__head-text { max-width: 512px; }
/* "QA Insights" eyebrow pill - green. Hidden on the homepage (per design). */
body.home .home-blog__eyebrow {
  display: none;
  margin-bottom: 16px;
  padding: 7px 14px;
  white-space: nowrap;
  border-radius: var(--h-pill);
  border: 1px solid #00886F;
  background: #0F1419;
  color: #00CCA6;
  font-size: 11px;
  font-weight: 700;
}
body.home .home-blog__head h2 { font-size: 48px; letter-spacing: -0.01em; }
body.home .home-blog__head p { margin-top: 13px; color: var(--h-muted); font-size: 14px; }
body.home .home-blog__btn { flex: none; }
/* Desktop: the "All Articles" button is after the grid in the markup (so it drops
   to the bottom on mobile), but here it's grid-placed back into the header's
   top-right. Explicit row/column placement keeps it there regardless of DOM order. */
@media (min-width: 769px) {
  body.home .home-blog .container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 19px;
    row-gap: 35px;
  }
  body.home .home-blog__head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  body.home .home-blog__btn { grid-column: 2; grid-row: 1; justify-self: end; }
  body.home .home-blog__grid { grid-column: 1 / -1; grid-row: 2; }
}

body.home .home-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px;
}
body.home .home-blog__card {
  display: flex;
  flex-direction: column;
  background: var(--h-card);
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius);
  overflow: hidden;
}
body.home .home-blog__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--h-card-2); }
body.home .home-blog__thumb img { width: 100%; height: 100%; object-fit: cover; }
body.home .home-blog__badge {
  position: absolute;
  top: 13px; left: 13px;
  padding: 5px 11px;
  border-radius: var(--h-pill);
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(3px);
  border: 1px solid;

}
body.home .home-blog__card--purple .home-blog__badge { background: #15111E; color: #7D51F1;  border-color: #5336A1;}
body.home .home-blog__card--green .home-blog__badge { background: #0D1A18; color: #00CCA6; border-color: #00886F;}
body.home .home-blog__body { display: flex; flex-direction: column; flex: 1; padding: 20px 21px 21px; }
body.home .home-blog__meta { display: flex; align-items: center; gap: 7px; color: var(--h-lilac); font-size: 13px; line-height: 1; }
body.home .home-blog__meta-item { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
body.home .home-blog__meta-item svg { flex: none; display: block; }
body.home .home-blog__meta-dot { display: inline-flex; align-items: center; color: #fff; opacity: 1; }
body.home .home-blog__body .home-blog__title {
  font-size: 19px; line-height: 1.35; margin: 16px 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.home .home-blog__title a { color: #fff; text-decoration: none; }
body.home .home-blog__excerpt {
  color: #b6b6c4; font-size: 14px; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body.home .home-blog__more {
  margin-top: auto;
  padding-top: 16px;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 11px; /* resting gap between label and arrow */
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: gap 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease;
}
body.home .home-blog__more svg { flex: none; }
/* Hover: stretch the gap so the arrow slides away from the label, tint to green. */
body.home .home-blog__more:hover { gap: 19px; color: var(--h-green); }

/* ---------- FAQ accordion (shared .home-acc base + FAQ-only visuals) ----------
   Mechanics (expand/collapse, head reset, chev arrow/close swap) come from the
   base .home-acc block. Only FAQ's visual differences live here. */
body.home .home-acc--faq { max-width: 800px; border-top: 0; }
/* Per-item top divider (instead of the base bottom divider) so the dark panel
   can hide its own top line on hover/open. */
body.home .home-acc--faq .home-acc__item {
  border-top: 1px solid var(--h-border);
  border-bottom: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}
body.home .home-acc--faq .home-acc__item:hover,
body.home .home-acc--faq .home-acc__item.is-open {
  background: #2C2A31;
  border-top-color: transparent;
}
body.home .home-acc--faq .home-acc__head { gap: 16px; padding: 21px 19px; }
body.home .home-acc--faq .home-acc__q { font-size: clamp(13px, 1.44vw, 15px); font-weight: 700; }
body.home .home-acc--faq .home-acc__item:hover .home-acc__q,
body.home .home-acc--faq .home-acc__item.is-open .home-acc__q { color: #a78bff; }
body.home .home-acc--faq .home-acc__item:hover .home-acc__chev,
body.home .home-acc--faq .home-acc__item.is-open .home-acc__chev { color: #a78bff; }
/* Closed shows the arrow; open swaps to the X. */
body.home .home-acc--faq .home-acc__item.is-open .home-acc__chev-arrow { display: none; }
body.home .home-acc--faq .home-acc__item.is-open .home-acc__chev-close { display: inline-flex; }
body.home .home-acc--faq .home-acc__body > .home-acc__rich {
  color: #fff;
  font-size: 14px;
  font-weight: lighter;
  line-height: 1.6;
  padding: 0 19px;
}
body.home .home-acc--faq .home-acc__item.is-open .home-acc__body > .home-acc__rich { padding-bottom: 21px; }

/* ---------- Final CTA ---------- */
body.home .home-final { padding-bottom: 88px; }
body.home .home-final__inner {
  position: relative;
  text-align: center;
  border: 1px solid var(--h-border);
  border-radius: var(--h-radius-lg);
  padding: clamp(38px, 5.6vw, 72px);
  /* Aurora: purple top-left -> blue -> green bottom-right. */
  background:
    radial-gradient(50% 80% at 16% 14%, rgba(110, 70, 240, 0.6), transparent 60%),
    radial-gradient(55% 90% at 90% 52%, rgba(40, 86, 230, 0.5), transparent 60%),
    radial-gradient(55% 95% at 82% 102%, rgba(0, 190, 140, 0.5), transparent 60%),
    #0b0b13;
  overflow: hidden;
}
/* Optional background image (theme webp) - replaces the gradient. Same treatment
   as the AI-CTA badge: desktop fits the landscape with a slight overscan zoom
   (clipped by overflow:hidden) so the glow reaches the rounded corners; mobile
   uses a dedicated portrait crop. */
body.home .home-final__inner.has-bg {
  background: none;
  border-color: transparent;
  border-radius: 32px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
body.home .home-final__inner.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--final-bg) center / cover no-repeat;
  transform: scale(1.14);
  transform-origin: center;
  pointer-events: none;
}
body.home .home-final__inner.has-bg > * { position: relative; z-index: 1; }
body.home .home-final__title {
  font-family: var(--h-serif);
  font-weight: 400;
  font-size: clamp(24px, 3.68vw, 45px);
  line-height: 1.08;
  color: #fff;
}
body.home .home-final__title .home-accent-purple { display: block; }
body.home .home-final__inner .home-final__desc { position: relative; max-width: 512px; margin: 18px auto 27px; color: rgba(255, 255, 255, 0.85); font-size: 14px; line-height: 1.6; }
body.home .home-final__btn { position: relative; }
body.home .home-final__points {
  position: relative;
  list-style: none;
  margin: 29px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}
body.home .home-final__points li { display: inline-flex; align-items: center; gap: 6px; color: var(--h-muted); font-size: 11px; }
body.home .home-final__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--h-green); flex: none; }

/* ---------- Section background colors (alternating band) ---------- */
body.home .home-domains { background: #110D1A; }
body.home .home-cases   { background: #08060D; }
body.home .home-work    { background: #110D1A; }
body.home .home-tools   { background: #08060D; }
body.home .home-testi   { background: #110D1A; }
body.home .home-partner { background: #08060D; }
body.home .home-blog    { background: #110D1A; }
body.home .home-faq     { background: #08060D; }
body.home .home-final   { background: #110D1A; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
  /* ---------- Mobile nav: full-screen overlay (centered accordion) ---------- */
  body.home .home-header__nav { display: none; }
  body.home .home-header__cta { display: none; }
  body.home .home-burger { display: inline-block; margin-left: auto; } /* push to the right (nav/CTA are hidden on mobile) */

  /* Burger turns into a lavender X while the overlay is open. */
  body.home .home-header.is-nav-open .home-burger {
    position: fixed; top: 18px; right: 19px; z-index: 1002; border-color: transparent;
  }
  body.home .home-header.is-nav-open .home-burger span { background: transparent; }
  body.home .home-header.is-nav-open .home-burger span::before { top: 0; background: #CBB9F9; transform: translateX(-50%) rotate(45deg); }
  body.home .home-header.is-nav-open .home-burger span::after  { top: 0; background: #CBB9F9; transform: translateX(-50%) rotate(-45deg); }

  /* Overlay panel. */
  body.home .home-header.is-nav-open .home-header__nav {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 1000;
    margin: 0; padding: 88px 24px 116px;
    background: #0c0b13; overflow-y: auto;
    /* Centre the menu when it fits; `safe` falls back to top-aligned (and lets the
       overlay scroll) when an expanded panel is taller than the screen - avoids the
       clipped, unscrollable top that justify-content:center / margin:auto cause.
       The plain `center` is the fallback for engines without `safe`. */
    justify-content: center;
    justify-content: safe center;
  }
  body.home .home-header.is-nav-open .home-menu {
    flex-direction: column; align-items: center; gap: 26px; width: 100%; padding: 0; margin: 0;
  }

  /* Top-level items. */
  body.home .home-header.is-nav-open .home-menu > li { width: 100%; text-align: center; }
  body.home .home-header.is-nav-open .home-menu > li > a {
    justify-content: center; font-size: 24px; font-weight: 700; color: #fff; padding: 4px 0;
  }
  body.home .home-header.is-nav-open .home-menu > li.is-open > a { color: #fff; }

  /* Collapse + flatten every sub-menu (overrides the desktop dropdown/grid/flex). */
  body.home .home-header.is-nav-open .home-menu .sub-menu {
    position: static; display: none; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; box-shadow: none; border: 0; background: none;
    margin: 0; padding: 0; width: auto; column-count: initial; grid-template-columns: none;
    text-align: center;
  }
  body.home .home-header.is-nav-open .home-menu .custom-services-class > .sub-menu { gap: 0; }
  body.home .home-header.is-nav-open .home-menu .custom-services-class .sub-menu .sub-menu {
    display: none; column-count: initial; width: auto; grid-template-columns: none;
  }
  body.home .home-header.is-nav-open .home-menu .custom-services-class > .sub-menu > li:not(.menu-col-primary) { display: block; }
  body.home .home-header.is-nav-open .home-menu .custom-services-class > .sub-menu > li:not(.menu-col-primary) > a { transform: none; }

  /* Reveal a panel only when its parent item is open. */
  body.home .home-header.is-nav-open .home-menu > li.is-open > .sub-menu { display: block; padding-top: 26px; }
  body.home .home-header.is-nav-open .home-menu .custom-services-class .sub-menu > li.is-open > .sub-menu { display: block; padding-top: 26px; }

  /* Item spacing inside open panels (airier, to match the design). */
  body.home .home-header.is-nav-open .home-menu .sub-menu > li { margin-bottom: 28px; }
  body.home .home-header.is-nav-open .home-menu .sub-menu .sub-menu li { margin-bottom: 22px; }

  /* Sub-group headers (Testing / Other Services) + their chevron. */
  body.home .home-header.is-nav-open .home-menu .sub-menu > li.menu-item-has-children > a {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 0; white-space: nowrap;
  }
  body.home .home-header.is-nav-open .home-menu .sub-menu > li.menu-item-has-children > a::after {
    content: ""; flex: none; width: 8px; height: 8px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s ease;
  }
  body.home .home-header.is-nav-open .home-menu .sub-menu > li.is-open.menu-item-has-children > a::after { transform: rotate(180deg); }

  /* Leaf links. */
  body.home .home-header.is-nav-open .home-menu .sub-menu a { font-size: 15px; color: rgba(255, 255, 255, 0.78); white-space: normal; }

  /* Purple underline under any expanded header (top-level + sub-group). */
  body.home .home-header.is-nav-open .home-menu .sub-menu > li.menu-item-has-children > a span { border-bottom: 0; padding-bottom: 0; }
  body.home .home-header.is-nav-open .home-menu > li.is-open > a span,
  body.home .home-header.is-nav-open .home-menu .sub-menu > li.is-open.menu-item-has-children > a span {
    display: inline-block; border-bottom: 2px solid #7D51F1; padding-bottom: 7px;
  }

  /* Solid (fading) band behind the pinned CTA. The Contact Us pill is fixed and
     transparent, so without this the scrolling menu items show through it and
     read as overlapping the button. The band lives inside the nav's stacking
     context (above its scrolling content) but below the CTA itself (z-index
     1001), so items fade out under it while the pill stays crisp on top. The
     gradient is solid up to the pill's top edge, then fades so the last item
     (which rests above the 116px bottom padding) isn't dimmed. */
  body.home .home-header.is-nav-open .home-header__nav::after {
    content: "";
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, #0c0b13 0%, #0c0b13 68%, rgba(12, 11, 19, 0) 100%);
  }

  /* Contact Us -> outlined pill pinned to the bottom of the overlay. */
  body.home .home-header.is-nav-open .home-header__cta {
    display: inline-flex; position: fixed; left: 24px; right: 24px; bottom: 28px; z-index: 1001;
    justify-content: center; background: transparent;
    border: 1px solid rgba(203, 185, 249, 0.5); color: #CBB9F9; font-size: 16px; padding: 16px 18px;
  }

  /* Lock the page behind the overlay. */
  body.home.home-nav-lock { overflow: hidden; }
}
@media (max-width: 900px) {
  body.home .home-services__grid { grid-template-columns: repeat(2, 1fr); }
  body.home .home-results__grid { grid-template-columns: repeat(2, 1fr); }
  body.home .home-process__grid { grid-template-columns: repeat(2, 1fr); }
  body.home .home-process__card::after { display: none; } /* row wraps - connectors no longer line up */
  body.home .home-ways__matrix { overflow-x: auto; }
  body.home .home-ways__row,
  body.home .home-ways__captions { grid-template-columns: 1.5fr 1fr 1fr 1fr; min-width: 544px; }
  body.home .home-domains__grid { grid-template-columns: repeat(2, 1fr); }
  body.home .home-tools__grid { grid-template-columns: repeat(2, 1fr); }
  body.home .home-hero__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home .home-cases__grid { grid-template-columns: 1fr; }
  body.home .home-testi__grid { grid-template-columns: 1fr; }
  body.home .home-blog__grid { grid-template-columns: 1fr; }
  body.home .home-work__grid { grid-template-columns: 1fr; }
  /* Testimonials full-bleed inset: the 200px desktop inset overflows below ~1280px
     (the responsive overrides were on the wrong class `.home-testimonials`). */
  body.home .home-testi__head { padding: 0 40px; }
  body.home .home-testi__track { padding: 0 40px; scroll-padding-left: 40px; }
}
@media (max-width: 560px) {
  body.home .home-services__grid,
  body.home .home-process__grid { grid-template-columns: 1fr; }
  body.home .home-domains__grid { grid-template-columns: 1fr; }
  body.home .home-results__grid { grid-template-columns: 1fr; }
  body.home .home-tools__grid { grid-template-columns: 1fr; }
  body.home .home-tools__cat--wide { grid-column: span 1; }
  /* Hero highlight cards stay 2-up on mobile (per design) - the 900px rule's
     repeat(2,1fr) carries down; no single-column override here. */
}
@media (max-width: 768px) {
  body.home .home-section { padding: 51px 0; }
  body.home .home-services__head,
  body.home .home-cases__head,
  body.home .home-blog__head { flex-direction: column; align-items: flex-start; }
  /* "All Case Studies" / "All Articles" buttons drop below the cards (per design), full-width. */
  body.home .home-cases__btn,
  body.home .home-blog__btn { width: 100%; justify-content: center; margin-top: 22px; }
  /* Final CTA reassurance points stack vertically, centered (per design). */
  body.home .home-final__points { flex-direction: column; align-items: center; gap: 10px; }
  /* Final CTA background: use the portrait crop at plain cover (the landscape
     desktop image can't fill a tall card cleanly) - same as the AI-CTA badge. */
  body.home .home-final__inner.has-bg::before {
    background-image: var(--final-bg-mobile, var(--final-bg));
    background-size: cover;
    background-position: center;
    transform: none;
  }
  /* Case-study metric tiles stack full-width on mobile (side-by-side squeezed them
     in the now full-width card). The 2-line min-height was only to align two tiles
     in a row, so drop it for snug single-column boxes. */
  body.home .home-case__metrics { grid-template-columns: 1fr; margin-top: 16px; }
  body.home .home-case__metric-label { min-height: 0; }
  /* Services cards: single column on mobile (per design). Reset the wide top-row
     cards' `grid-column: span 2` - in a 1-column grid that span would spawn an
     implicit 2nd column and pair the other cards two-per-row. "Learn more" sits
     bottom-left like the design. */
  body.home .home-services__grid { grid-template-columns: 1fr; }
  body.home .home-services__grid > .home-service--wide { grid-column: auto; }
  body.home .home-service__more { align-self: flex-start; }
  /* "All Services" button drops below the cards (per design), full-width. */
  body.home .home-services__btn { width: 100%; justify-content: center; margin-top: 22px; }
  /* Process step cards: single column on mobile (per design). */
  body.home .home-process__grid { grid-template-columns: 1fr; }
  /* Domain cards: single column across the full mobile range (per design). */
  body.home .home-domains__grid { grid-template-columns: 1fr; }
  /* Tools category cards: single column on mobile; reset the wide card's span 2
     (else it spawns an implicit column like Services). */
  body.home .home-tools__grid { grid-template-columns: 1fr; }
  body.home .home-tools__cat--wide { grid-column: span 1; }
  /* Testimonials: tighter inset + smaller heading so it stops overflowing on phones. */
  body.home .home-testi__head { padding: 0 19px; }
  body.home .home-testi__head h2 { font-size: clamp(28px, 8vw, 40px); }
  body.home .home-testi__track { padding: 0 19px; scroll-padding-left: 19px; }
  body.home .home-testi__slide { flex-basis: 86%; }
  /* The card's height is fixed at 334px for the 592px desktop slide; on a narrow
     mobile slide that makes it near-square and crops the wide 592x334 preview.
     Let height follow the image's aspect ratio so the card stays a wide rectangle. */
  body.home .home-testi__card { height: auto; aspect-ratio: 592 / 334; }
  body.home .home-results__grid { grid-template-columns: 1fr; }
  body.home .home-results__cta { flex-direction: column; align-items: center; text-align: center; }
  body.home .home-hero { padding: 104px 0 48px; }
  /* Stat chips -> 2-column, left-aligned grid (matches the mobile design). */
  body.home .home-hero__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; justify-items: start; align-items: start; }
  body.home .home-cert { padding-left: 0; }
  body.home .home-cert::before { display: none; } /* divider is for the inline desktop row only */
  /* The last cert (ISTQB) is the odd 5th item in the 2-col grid, so it sits alone
     in the left column - span both columns and center it. */
  body.home .home-hero__chips .home-cert:last-child { grid-column: 1 / -1; justify-self: center; }
  /* Primary CTA spans the width with a centred label. */
  body.home .home-hero .home-btn--green { width: 100%; justify-content: center; }
  body.home .home-section__head { margin-bottom: 32px; }
  /* Problems accordion -> centered vertical cards (matches the mobile design):
     icon, then title, then the result badge, then a down arrow - each centered
     and stacked. DOM order already is icon -> title -> badge -> chevron, so we just
     switch the head to a centered column and reset the desktop ordering. */
  body.home .home-acc--problems .home-acc__head {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 26px 18px;
  }
  body.home .home-acc__ico { width: 44px; height: 44px; }
  body.home .home-acc--problems .home-acc__title {
    flex: 0 0 auto;
    order: 0;
    font-size: 15px;
    line-height: 1.45;
    max-width: 280px;
  }
  body.home .home-acc__badge { order: 0; margin: 0; }
  body.home .home-acc__chev { order: 0; margin: 0; }
  body.home .home-acc--problems .home-acc__body > .home-acc__rich { padding-left: 0; padding-right: 0; text-align: center; }
  /* Comparison table: tighter columns + smaller text */
  /* Comparison table -> stacked mobile cards (matches the mobile design): two
     centered header chips on top, then each feature as a centered caption above
     a pair of individually-bordered value boxes (without | with). */
  body.home .home-cmp { margin-top: 28px; }
  body.home .home-cmp__cell { padding: 12px 10px; font-size: 12px; font-weight: 400; min-width: 0; }

  /* Header row: hide the empty feature cell; two equal, centered chips. */
  body.home .home-cmp__row--head { grid-template-columns: 1fr 1fr; gap: 8px; }
  body.home .home-cmp__row--head .home-cmp__cell--feature { display: none; }
  body.home .home-cmp__row--head .home-cmp__cell {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0;
    white-space: normal;
  }

  /* Data rows: feature label spans a centered top line, then without | with. */
  body.home .home-cmp__row:not(.home-cmp__row--head) {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "feat feat" "without with";
    gap: 8px;
    margin-top: 16px;
  }
  body.home .home-cmp__cell--feature {
    grid-area: feat;
    justify-content: center;
    text-align: center;
    color: var(--h-muted);
    padding: 0 0 2px;
    border: 0 !important;            /* drop the desktop divider borders */
  }
  body.home .home-cmp__row:not(.home-cmp__row--head) .home-cmp__cell--without { grid-area: without; }
  body.home .home-cmp__row:not(.home-cmp__row--head) .home-cmp__cell--with { grid-area: with; }

  /* Every value / header box: individually rounded + bordered, content centered.
     Overrides the desktop shared-edge borders and corner-only radii. */
  body.home .home-cmp__cell--without,
  body.home .home-cmp__cell--with {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    border-radius: 12px !important;
    border: 1px solid var(--h-border) !important;
  }
  body.home .home-cmp__cell--with { border-color: rgba(63, 227, 182, 0.4) !important; }
  body.home .home-cmp__note { display: block; }
  /* Three-ways matrix -> stacked mobile layout (matches the mobile design):
     drop the "What matters" column, keep the three approach columns, and lift
     each feature name to a centered caption above its row of marks. Each row of
     marks is one rounded bordered box (QA Madness column highlighted green); the
     quote captions stay as three columns underneath. */
  body.home .home-ways__matrix { overflow-x: visible; }
  body.home .home-ways__table { border: 0; background: none; border-radius: 0; }

  /* Hide the "What matters" header label + its caption-row spacer. */
  body.home .home-ways__row--head .home-ways__cell--feature,
  body.home .home-ways__cap-feature { display: none; }

  /* Header + data rows -> three equal columns; captions match. */
  body.home .home-ways__row { grid-template-columns: 1fr 1fr 1fr; min-width: 0; border-bottom: 0; margin-bottom: 14px; }
  body.home .home-ways__captions { grid-template-columns: 1fr 1fr 1fr; min-width: 0; }
  body.home .home-ways__cell { min-width: 0; padding: 12px 6px; }

  /* Feature name -> centered caption spanning the full width, above the marks. */
  body.home .home-ways__row:not(.home-ways__row--head) .home-ways__cell--feature {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
    color: var(--h-muted);
    font-weight: 500;
    font-size: 13px;
    height: auto;
    padding: 4px 8px 12px;
  }

  /* The three mark / header cells form one rounded bordered box per row. */
  body.home .home-ways__cell:not(.home-ways__cell--feature) {
    border-top: 1px solid var(--h-border);
    border-bottom: 1px solid var(--h-border);
    border-left: 1px solid var(--h-border);
  }
  /* Full shorthands with !important so the desktop highlight-column corner radii
     (higher specificity, and they round the left side) are fully overridden -
     each row reads as one clean rounded box. */
  body.home .home-ways__cell--feature + .home-ways__cell {
    border-radius: 11px 0 0 11px !important;
  }
  body.home .home-ways__cell:not(.home-ways__cell--feature):last-child {
    border-right: 1px solid var(--h-border);
    border-radius: 0 11px 11px 0 !important;
  }
  /* Highlighted "QA Madness + AI" column -> green box edges. */
  body.home .home-ways__row .home-ways__cell.is-highlight { border-color: rgba(63, 227, 182, 0.4) !important; }

  /* Compact, centered header chips. */
  body.home .home-ways__row--head .home-ways__cell { font-size: 11px; letter-spacing: 0; }

  /* Data cells: marks centered, notes shown statically beneath (no absolute pin). */
  body.home .home-ways__row:not(.home-ways__row--head) .home-ways__cell {
    height: auto;
    min-height: 64px;
    justify-content: center;
  }
  body.home .home-ways__note { position: static; left: auto; right: auto; bottom: auto; font-size: 10px; margin-top: 4px; }
  body.home .home-ways__caption { font-size: 11px; padding: 0 6px; }
  /* (How We Work is now a tap-to-toggle accordion on touch - see the .is-open
     rules and the @media (hover: none) block above, plus the handler in home.js.) */
  /* AI CTA button spans the width on mobile, matching the hero CTA. */
  body.home .home-ctaai__btn { width: 100%; justify-content: center; }
  /* The card is portrait on mobile but the desktop background is landscape, so
     cropping/positioning it is aspect-fragile across phones. Use the dedicated
     portrait crop (--ctaai-bg-mobile, a vertical aurora) at plain cover instead;
     it fills any tall card cleanly. Falls back to the desktop image if no mobile
     crop exists. */
  body.home .home-ctaai__box.has-bg::before {
    background-image: var(--ctaai-bg-mobile, var(--ctaai-bg));
    background-size: cover;
    background-position: center;
    transform: none; /* the desktop overscan zoom isn't needed here */
  }
  /* AI CTA chips: two equal columns (rows of 2 / 2 / 1). minmax(0,1fr) - not
     max-content - so each column is bounded by the card and long sub-labels
     (e.g. "your existing stack & CI/CD") wrap instead of overflowing and being
     clipped by the card's overflow:hidden. */
  body.home .home-ctaai__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px 20px;
    /* Cap + centre the pair so the two columns sit as a centered group (per the
       design) rather than stretching to the card's edges; on narrow phones it
       simply fills the available width. */
    max-width: 340px;
    margin: 35px auto 0;
  }
  /* A lone trailing chip (odd count, e.g. "AI is optional") spans both columns
     and centers on its own row instead of hanging in the left column. */
  body.home .home-ctaai__chip:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-content: center;
  }
  /* Mobile only: swap the 3rd/4th chips so row 2 reads "Works with | Independent"
     to match the design (desktop keeps the admin order). All five need an explicit
     order, else the unset (order:0) chips would sort ahead of the swapped pair. */
  body.home .home-ctaai__chip:nth-child(1) { order: 1; }
  body.home .home-ctaai__chip:nth-child(2) { order: 2; }
  body.home .home-ctaai__chip:nth-child(3) { order: 4; } /* Independent -> row 2 right */
  body.home .home-ctaai__chip:nth-child(4) { order: 3; } /* Works with  -> row 2 left  */
  body.home .home-ctaai__chip:nth-child(5) { order: 5; }
  /* Intro card: shrink the heading + paragraph on mobile so the text fits the
     card instead of dominating it. Needs the `.site-homepage` ancestor to outrank
     the base clamp rule (which is itself `.site-homepage`-scoped). */
  body.home .site-homepage .home-intro__text { font-size: 18px; line-height: 1.2; }
  body.home .site-homepage .home-intro__sub { font-size: 13px; }
  /* The base 19px horizontal padding lets the wide paragraph run up against the
     card's rounded border. Give it more breathing room on mobile so the text sits
     clearly inside the card. */
  body.home .home-intro__card { padding-left: 26px; padding-right: 26px; }
  /* The intro card's background is a fixed-aspect PNG (.has-bg). A long mobile
     paragraph makes the card tall + narrow, so `cover` crops the image's baked-in
     rounded card/glow and the lower text ends up outside the visible card box.
     On mobile, fall back to the CSS gradient + border (same look as the non-image
     card), which grows with the content and always wraps the text. */
  body.home .home-intro__card.has-bg {
    background:
      radial-gradient(42% 56% at 80% 24%, rgba(110, 64, 240, 0.60), rgba(110, 64, 240, 0) 70%),
      radial-gradient(46% 52% at 92% 80%, rgba(82, 40, 205, 0.52), rgba(82, 40, 205, 0) 72%),
      radial-gradient(95% 130% at 102% 52%, rgba(60, 32, 150, 0.30), rgba(60, 32, 150, 0) 70%),
      #0a0a0f;
    border: 1px solid var(--h-border);
  }

  /* Section order is admin-controlled and applied in the DOM: front-page.php
     renders sections via qmh_home_section_order(), so mobile follows the same
     order as desktop. No per-section flex `order` overrides are needed here. */
  /* Mobile: uniform 44px for every section heading. The `.site-homepage`
     ancestor lifts specificity above the per-section clamps (and the <=480
     `.home-section__head h2` rule below) so this wins across all mobile widths. */
  body.home .site-homepage .home-services__head h2,
  body.home .site-homepage .home-cases__head h2,
  body.home .site-homepage .home-testi__head h2,
  body.home .site-homepage .home-blog__head h2,
  body.home .site-homepage .home-section__head h2 { font-size: 44px; }
}
@media (max-width: 480px) {
  body.home .site-homepage .container { padding-inline: 14px; }
  body.home .home-hero__title { font-size: 27px; }
  body.home .home-section__head h2 { font-size: 22px; }
  body.home .home-intro__text { font-size: 22px; }
  body.home .home-final__title { font-size: 24px; }
  body.home .home-ctaai__box h2 { font-size: 19px; }
  body.home .home-cases__metric { font-size: 30px; }
  body.home .home-results__num { font-size: 29px; }
}