/*
Theme Name: webchampion
Theme URI: https://webchampion.com.au
Author: Web Champion
Description: Conversion-focused block theme for Web Champion (Australia) with a monthly plans emphasis.
Version: 1.0.0
Text Domain: webchampion
Requires at least: 6.4
Tested up to: 6.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ── Manrope: self-hosted variable face for headings (OFL, no CDN calls) ──── */
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ── Fraunces: self-hosted variable display serif (OFL, no CDN calls) ─────
   Used sparingly for bold hero/section headlines only — Manrope remains
   the workhorse face everywhere else (body, UI, nav, most headings). */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/fraunces-italic-var.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

.wc-display-serif {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 480;
  letter-spacing: -0.01em;
}

.wc-display-serif em,
.wc-display-serif .wc-accent-word {
  font-style: italic;
  font-weight: 420;
  color: var(--wp--preset--color--aqua);
}

/* ── Small playful accent marks — used sparingly near hero eyebrows ───────── */
.wc-accent-mark {
  display: inline-block;
  position: relative;
}

.wc-accent-mark--dash {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--wp--preset--color--aqua);
  transform: rotate(-8deg);
  margin: 0 8px 6px 0;
}

.wc-accent-mark--dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp--preset--color--aqua);
  opacity: 0.6;
  margin: 0 0 -2px 0;
}


/* Headings: Manrope. Explicit here because an inline global-styles rule for
   Suisse Intl (a face this theme never shipped) wins the cascade otherwise. */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title, .wp-block-query-title {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}



/* ── Typography: Section heading scale ───────────────────────────────────── */
/* H2s without an explicit inline font-size get a responsive premium scale.
   Patterns that set font-size inline (e.g. the CTA stripe at 36px) are
   unaffected because inline styles always win over class selectors. */
h2:not([style*="font-size"]) {
  font-size: clamp(28px, 2.5vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ── Utility: Eyebrow Label ──────────────────────────────────────────────── */
.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--purple);
}

/* ── Utility: Card Shadow ────────────────────────────────────────────────── */
.card-shadow {
  box-shadow: var(--shadow-card);
}

.card-shadow:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10), 0 3px 10px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* ── Utility: Frosted Surface (testimonials, overlay cards) ──────────────── */
/* Solid white card — works correctly on both light and dark section backgrounds */
.frosted-surface {
  background: #ffffff;
  border: 1px solid var(--wp--preset--color--border, #E5E7EB);
  border-radius: 16px;
}

/* ── Utility: Step Dot (what-happens-next process steps) ─────────────────── */
.step-dot {
  flex-shrink: 0;
}

/* ── Utility: Plan Card ──────────────────────────────────────────────────── */
.plan-card {
  border: 1px solid var(--wp--preset--color--border, #E5E7EB);
  border-radius: 16px;
  padding: 32px;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
}

.plan-card.is-featured {
  border-color: var(--wp--preset--color--purple, #7C00FF);
  border-width: 2px;
  background: linear-gradient(135deg, rgba(34, 0, 255, 0.04), rgba(124, 0, 255, 0.06));
  box-shadow: 0 8px 32px rgba(124, 0, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ── Utility: Plan Price ─────────────────────────────────────────────────── */
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ── Utility: Badge Pill ─────────────────────────────────────────────────── */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: var(--wp--preset--color--ui-grey, #F1F1F1);
  border-radius: 100px;
  font-weight: 600;
  font-size: 13px;
}

/* ── Utility: Auto-fit Grid ──────────────────────────────────────────────── */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

/* ── Utility: Logo Strip ─────────────────────────────────────────────────── */
.logo-strip img {
  max-height: 44px;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.logo-strip img:hover {
  opacity: 1;
  filter: grayscale(0);
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER SYSTEM — Full Rebuild 2026-03
   One clean, stable system. No layered hacks.

   Desktop : [ Logo left ] [ Nav centered ] [ CTA right ]  — CSS Grid
   Mobile  : [ Logo left ] [ Hamburger right ]              — Flex, 2 children
   Overlay : full-width white panel · stacked nav · CTA pill at bottom
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Base: Sticky frosted-glass surface ──────────────────────────────────── */
.wc-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 32px rgba(0, 0, 0, 0.04);
}

/* ── Admin bar: Push sticky header down for logged-in users ──────────────── */
body.admin-bar .wc-header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .wc-header { top: 46px; }
}

/* ══ DESKTOP LAYOUT (≥ 601px) ════════════════════════════════════════════════
   CSS Grid gives pixel-perfect centered nav regardless of logo / CTA widths.
   WP generates flex layout via .wp-block-group.is-layout-flex — we override
   with display:grid !important from our stylesheet which loads after WP's.   */
@media (min-width: 1000px) {
  .wc-header.wp-block-group {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  /* Column placement */
  .wc-header .wp-block-site-logo  { justify-self: start;  }
  .wc-header .wp-block-navigation { justify-self: center; }
  .wc-header .wc-header__cta      { justify-self: end;    }
}

/* ── Desktop: Nav container ──────────────────────────────────────────────── */
.wc-header .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: 0;
}

/* ── Desktop: Top-level nav links and submenu toggles ────────────────────── */
.wc-header .wp-block-navigation-item > a,
.wc-header .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1c1c2e !important;
  padding: 8px 13px;
  border-radius: 12px;
  transition: color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
  line-height: 1.4;
}

.wc-header .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
}

/* Hover */
.wc-header .wp-block-navigation-item > a:hover,
.wc-header .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle {
  color: var(--wp--preset--color--purple) !important;
  background: rgba(124, 0, 255, 0.05);
}

/* Current page indicator */
.wc-header .wp-block-navigation-item.current-menu-item > a,
.wc-header .wp-block-navigation-item [aria-current="page"] {
  color: var(--wp--preset--color--purple) !important;
}

/* Focus ring */
.wc-header .wp-block-navigation-item > a:focus-visible,
.wc-header .wp-block-navigation-item > .wp-block-navigation-submenu__toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--purple);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Premium hover: dims sibling items when one is active */
.wc-header .wp-block-navigation__container:hover
  > .wp-block-navigation-item > a,
.wc-header .wp-block-navigation__container:hover
  > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
  opacity: 0.45;
}

.wc-header .wp-block-navigation__container:hover
  > .wp-block-navigation-item:hover > a,
.wc-header .wp-block-navigation__container:hover
  > .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle,
.wc-header .wp-block-navigation__container:hover
  > .wp-block-navigation-item:focus-within > a,
.wc-header .wp-block-navigation__container:hover
  > .wp-block-navigation-item:focus-within > .wp-block-navigation-submenu__toggle {
  opacity: 1;
}

/* ── Dropdown: hover bridge ──────────────────────────────────────────────────
   A ~6–8px gap between the nav item bottom and the dropdown panel edge breaks
   :hover as the cursor crosses it, hiding the panel prematurely.
   An ::after pseudo bridges the gap so :hover persists through the transit.  */
.wc-header .wp-block-navigation-submenu {
  overflow: visible;
}

.wc-header .wp-block-navigation-submenu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 20px;
}

/* ── Dropdown panel ──────────────────────────────────────────────────────── */
.wc-header .wp-block-navigation__submenu-container {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.10), 0 4px 16px rgba(0, 0, 0, 0.05);
  padding: 8px;
  min-width: 240px;
  margin-top: 8px;
}

/* Dropdown items */
.wc-header .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
  display: block;
  padding: 10px 14px !important;
  border-radius:12px;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  color: #374151 !important;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}

.wc-header .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover {
  background: rgba(124, 0, 255, 0.06);
  color: var(--wp--preset--color--purple) !important;
  opacity: 1 !important;
}

/* Reset sibling-dimming inside dropdown panels */
.wc-header .wp-block-navigation__submenu-container
  .wp-block-navigation__container:hover
  > .wp-block-navigation-item > a {
  opacity: 1 !important;
}

/* ── CTA button: Desktop ─────────────────────────────────────────────────── */
/* Visible on desktop only. Rendered as a proper button via header.html block.
   No stacking overrides needed here — CTA is hidden on mobile (see below). */
.wc-header__cta {
  flex-shrink: 0;
}

/* Header CTAs are short labels ("0499 000 004", "Get a Project Quote") — if the
   row tightens they must yield space by dropping the phone pill (handled at the
   1000–1199px tier), never by wrapping text inside a pill. */
.wc-header__cta .wp-block-button__link {
  white-space: nowrap;
}

/* ══ MOBILE LAYOUT (≤ 600px) ═════════════════════════════════════════════════
   Two children: logo (left) + nav/hamburger (right). CTA hidden from row.
   No flex ordering tricks needed — justify-content:space-between handles it. */
@media (max-width: 999.98px) {
  .wc-header.wp-block-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* CTA container: keep visible on mobile so the phone pill shows.
     Audit button itself is hidden on mobile (lives in nav overlay as wc-nav-cta). */
  .wc-header__cta {
    display: flex !important;
    gap: 8px !important;
  }
  .wc-header__cta > .wp-block-button:not(.wc-header__phone) {
    display: none !important;
  }
  .wc-header__phone .wp-block-button__link {
    font-size: 13px !important;
    padding: 7px 14px !important;
  }

  /* Logo: scale down to fit mobile row */
  .wc-header .wp-block-site-logo img {
    width: 130px !important;
    height: auto !important;
  }
}

@media (max-width: 390px) {
  .wc-header .wp-block-site-logo img {
    width: 110px !important;
  }
}

/* ── Hamburger + close: minimum 44px tap targets (WCAG 2.5.5) ───────────── */
/* IMPORTANT: No display property here. WP controls show/hide of both buttons
   via its own generated CSS. Setting display:flex/inline-flex with !important
   would override WP's display:none rules, forcing the hamburger visible on
   desktop and the close button visible outside the overlay context.
   Only min-width/min-height are safe to set globally.                       */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  min-width: 44px;
  min-height: 44px;
}

/* ── Nav block: baseline alignment in header row ─────────────────────────── */
/* Only target the outer <nav> wrapper — NOT the responsive-container.
   The responsive-container's display is fully managed by WP's CSS + JS.    */
.wc-header .wp-block-navigation {
  display: flex;
  align-items: center;
}

/* ── Desktop: Hide wc-nav-cta from the desktop nav bar ──────────────────── */
/* wc-nav-cta is in header.html as a navigation-link for the mobile overlay.
   At ≥601px the dedicated .wc-header__cta button is visible — suppress the
   duplicate nav link from appearing in the desktop horizontal nav bar.      */
@media (min-width: 1000px) {
  .wc-header .wp-block-navigation-item.wc-nav-cta {
    display: none;
  }
}

/* DB-built pages (care-plans, project-quote) render post content through
   wp:post-content with the theme.json 16px blockGap, which paints 16px white
   seams between consecutive full-width bands. Full-width bands own their own
   spacing; kill the injected gap. */
.wp-block-post-content > .alignfull { margin-block-start: 0; }

/* ── Design tokens: one shadow system, one focus ring ─────────────────────── */
:root {
  --shadow-card: 0 1px 2px rgba(18, 18, 46, 0.05), 0 10px 28px rgba(18, 18, 46, 0.07);
  --shadow-card-hover: 0 2px 4px rgba(18, 18, 46, 0.06), 0 16px 40px rgba(18, 18, 46, 0.11);
  --shadow-glow: 0 6px 20px rgba(124, 0, 255, 0.22);
  --focus-ring: 0 0 0 3px rgba(124, 0, 255, 0.18);
}

/* ══ RESPONSIVE BREAKPOINT OVERRIDE ══════════════════════════════════════════
   WordPress collapses a navigation block with overlayMenu="mobile" at 600px.
   That is far too early for this header: logo 160px + nav 630px + CTA 349px is
   ~1139px of content, and with 3vw padding either side the desktop row does not
   actually fit until ~1212px. Left at WP's default, every width from 601px to
   ~1211px — i.e. every tablet and small laptop — rendered a wrapped nav and a
   CTA squeezed until its text broke one character per line.

   So: keep the hamburger overlay all the way to 999.98px, and give 1000–1199px
   a trimmed desktop row that genuinely fits.                                  */
@media (max-width: 999.98px) {
  /* Hold the inline nav closed and the hamburger visible past WP's own cutoff.
     Scoped to .wc-header and to this range only — outside it WP keeps control. */
  .wc-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  .wc-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
}

/* ── 1000–1199px: desktop row, trimmed to fit ────────────────────────────── */
@media (min-width: 1000px) and (max-width: 1199.98px) {
  /* The phone pill is the least critical item and the widest to lose — the
     number stays reachable in the footer and on the contact page. */
  .wc-header__cta > .wc-header__phone {
    display: none !important;
  }

  .wc-header .wp-block-navigation-item > a,
  .wc-header .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
    font-size: 13px;
    padding: 8px 9px;
  }

  .wc-header .wp-block-site-logo img {
    width: 140px !important;
    height: auto !important;
  }
}

/* ══ MOBILE OVERLAY ══════════════════════════════════════════════════════════
   Full-width white panel.
   ┌────────────────────────────────────────────┐
   │ [close ×]                         top-right│
   │                                            │
   │  Services                                  │
   │  Industries                                │
   │  Care Plans                                │
   │  Case Studies                              │
   │  Contact                                   │
   │                                            │
   │  [ Book a Technical Audit → ]              │
   └────────────────────────────────────────────┘  */

/* Panel: white background, reset WP's default overlay padding, fade-in */
.wc-header .wp-block-navigation__responsive-container.is-menu-open {
  background: #ffffff !important;
  padding: 0 !important;
  animation: wc-menu-fade-in 0.22s ease-out;
}

@keyframes wc-menu-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Body scroll lock when mobile menu is open (set by main.js MutationObserver) */
body.wc-menu-is-open {
  overflow: hidden;
  touch-action: none;
}
body.wc-menu-is-open .wc-sticky-cta {
  display: none !important;
}

/* Close button: top-right corner of open overlay, large tap target */
.wc-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: 12px;
  right: 16px;
  min-width: 44px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Content area: top pad clears close button, sides + bottom for breathing */
.wc-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  padding: 68px 24px 48px !important;
}

/* Nav list: vertical column, full width */
.wc-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100%;
}

/* Overlay: top-level nav links */
.wc-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item > a {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1c1c2e !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  border-radius: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  width: 100%;
  display: block;
}

/* Overlay: submenu toggles (Services / Industries / Care Plans)
   WP core (7.0+) renders the label (<a>) and the expand icon (<button>)
   as separate siblings, and stacks every nav-item child in its own row
   (flex-direction: column) while the overlay is open. Left at width:100%
   this icon-only button stretched into its own full-width bar. Pin it
   out of flow instead, over the label's row, top-right. */
.wc-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 32px !important;
  height: 57px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1c1c2e !important;
  opacity: 1 !important;
}

.wc-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item > .wp-block-navigation-submenu__toggle svg {
  width: 16px !important;
  height: 16px !important;
}

/* Overlay: submenu panel — inline accordion, not absolute dropdown */
.wc-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 4px 0 4px 20px !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* Overlay: submenu items — smaller, muted */
.wc-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  padding: 8px 0 !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  white-space: normal !important;
  width: 100%;
  display: block;
  opacity: 1 !important;
}

/* Overlay: disable sibling-dimming — no hover in mobile overlay */
.wc-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container:hover
  > .wp-block-navigation-item > a,
.wc-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container:hover
  > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
  opacity: 1 !important;
}

/* ── Overlay CTA: wc-nav-cta as a full-width pill button ─────────────────── */
.wc-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.wc-nav-cta {
  margin-top: 28px;
  width: 100%;
}

.wc-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.wc-nav-cta > a {
  display: block !important;
  background: var(--wp--preset--color--purple) !important;
  color: #ffffff !important;
  text-align: center !important;
  border-radius: 100px !important;
  padding: 16px 24px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  border-bottom: none !important;
  border-radius: 100px !important;
  width: 100% !important;
  opacity: 1 !important;
  transition: opacity 0.18s ease;
  box-sizing: border-box !important;
}

.wc-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.wc-nav-cta > a:hover {
  opacity: 0.88 !important;
}


/* ── Footer ──────────────────────────────────────────────────────────────── */
.wc-footer a:not(.wp-block-button__link) {
  color: #cbd5e1 !important;
  text-decoration: none;
}

.wc-footer a:not(.wp-block-button__link):hover {
  color: #fff !important;
}

/* Footer contact links — make phone + email scannable */
.wc-footer a[href^="tel:"],
.wc-footer a[href^="mailto:"] {
  color: #ffffff !important;
  font-weight: 600 !important;
}
.wc-footer a[href^="tel:"]:hover,
.wc-footer a[href^="mailto:"]:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.wc-footer .is-style-list-none {
  list-style: none;
}

.wc-footer .is-style-list-none li {
  margin-bottom: 0;
}

/* ── Shared page helpers ─────────────────────────────────────────────────── */
.wc-breadcrumbs .rank-math-breadcrumb p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  color: var(--wp--preset--color--mid-grey, #6B7280);
}

.wc-breadcrumbs .rank-math-breadcrumb a {
  color: var(--wp--preset--color--purple, #7C00FF);
}

/* Breadcrumbs inside gradient/dark heroes — force white text + a hint of
 * underline so links are visible against the brand-gradient background.
 * Triggers on any container marked `has-white-color` (the hero band). */
.has-white-color .rank-math-breadcrumb p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    margin: 0;
}

.has-white-color .rank-math-breadcrumb a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.has-white-color .rank-math-breadcrumb a:hover,
.has-white-color .rank-math-breadcrumb a:focus-visible {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.85);
}

.has-white-color .rank-math-breadcrumb .separator {
    color: rgba(255, 255, 255, 0.50);
    margin: 0 4px;
}

.wc-empty-state {
  display: grid;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--wp--preset--color--border, #E5E7EB);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
  text-align: center;
}

.wc-empty-state__title {
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.15;
}

.wc-empty-state__message {
  margin: 0 auto;
  max-width: 680px;
  color: var(--wp--preset--color--mid-grey, #6B7280);
}

.wc-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.wc-empty-state__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 100px;
  font-weight: 700;
  text-decoration: none;
}

.wc-empty-state__button.is-primary {
  background: var(--wp--preset--color--purple, #7C00FF);
  color: #ffffff !important;
}

.wc-empty-state__button.is-secondary {
  border: 2px solid var(--wp--preset--color--border, #E5E7EB);
  color: #111827 !important;
}

.wc-media-placeholder__link {
  display: block;
  text-decoration: none;
}

.wc-media-placeholder {
  display: grid;
  align-content: center;
  gap: 10px;
  width: 100%;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    radial-gradient(circle at top right, rgba(0, 197, 255, 0.18), transparent 38%),
    linear-gradient(135deg, #12122E 0%, #3D1EC4 58%, #6C16E8 100%);
  color: #ffffff;
  box-sizing: border-box;
}

.wc-media-placeholder__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}

.wc-media-placeholder__title,
.wc-media-placeholder__text {
  margin: 0;
}

.wc-media-placeholder__title {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.1;
}

.wc-media-placeholder__text {
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.82);
}

.wc-media-placeholder.is-compact {
  padding: 16px;
  text-align: center;
}

.wc-media-placeholder.is-compact .wc-media-placeholder__title {
  font-size: 18px;
}

.wc-media-placeholder.is-compact .wc-media-placeholder__text {
  font-size: 13px;
  max-width: none;
}

.wc-related-services {
  margin-top: 56px;
  padding: 32px;
  border: 1px solid var(--wp--preset--color--border, #E5E7EB);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(124, 0, 255, 0.03), #ffffff 38%);
}

.wc-related-services__intro {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
}

.wc-related-services__eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--purple, #7C00FF);
}

.wc-related-services__title,
.wc-related-services__text,
.wc-related-services__card-title,
.wc-related-services__card-text,
.wc-related-services__footer {
  margin: 0;
}

.wc-related-services__text,
.wc-related-services__card-text {
  color: var(--wp--preset--color--mid-grey, #6B7280);
}

.wc-related-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.wc-related-services__card {
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--wp--preset--color--border, #E5E7EB);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.wc-related-services__card:hover,
.wc-related-services__card:focus-within {
  transform: translateY(-3px);
  border-color: var(--wp--preset--color--purple, #7C00FF);
  box-shadow: 0 14px 32px rgba(124, 0, 255, 0.12);
}

.wc-related-services__card:hover .wc-related-services__card-title a,
.wc-related-services__card:focus-within .wc-related-services__card-title a {
  color: var(--wp--preset--color--purple, #7C00FF) !important;
}

.wc-related-services__card-title {
  font-size: 18px;
  line-height: 1.2;
}

.wc-related-services__card-title a {
  color: #111827 !important;
}

.wc-related-services__footer {
  margin-top: 18px;
  font-weight: 700;
}

.wc-service-next-step {
  margin-top: 56px;
  margin-bottom: 28px;
  padding: 32px;
  border: 1px solid var(--wp--preset--color--border, #E5E7EB);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(124, 0, 255, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(11, 16, 38, 0.02), #ffffff 30%);
}

.wc-service-next-step__content {
  display: grid;
  gap: 14px;
}

.wc-service-next-step__eyebrow,
.wc-service-next-step__title,
.wc-service-next-step__text,
.wc-service-next-step__points,
.wc-service-next-step__support {
  margin: 0;
}

.wc-service-next-step__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--purple, #7C00FF);
}

.wc-service-next-step__text,
.wc-service-next-step__support {
  color: var(--wp--preset--color--mid-grey, #6B7280);
}

.wc-service-next-step__points {
  display: grid;
  gap: 10px;
  padding-left: 18px;
  color: #111827;
}

.wc-service-next-step__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.wc-service-next-step__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 100px;
  font-weight: 700;
  text-decoration: none;
}

.wc-service-next-step__button.is-primary {
  background: var(--wp--preset--color--purple, #7C00FF);
  color: #ffffff !important;
}

.wc-service-next-step__button.is-secondary {
  border: 2px solid var(--wp--preset--color--border, #E5E7EB);
  color: #111827 !important;
}

.wc-service-next-step__button.is-tertiary {
  border: 2px solid var(--wp--preset--color--purple, #7C00FF);
  color: var(--wp--preset--color--purple, #7C00FF) !important;
  background: transparent;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.wc-service-next-step__button.is-tertiary:hover,
.wc-service-next-step__button.is-tertiary:focus-visible {
  background: var(--wp--preset--color--purple, #7C00FF);
  color: #ffffff !important;
}

.wc-service-next-step__support {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
}

.wc-search-intro {
  margin: 0;
  max-width: 64ch;
  color: var(--wp--preset--color--mid-grey, #6B7280);
}

.wc-search-form {
  width: 100%;
}

.wc-search-form .wp-block-search__inside-wrapper {
  gap: 12px;
  padding: 0;
  border: 0;
}

.wc-search-form .wp-block-search__input {
  min-height: 54px;
  border: 1px solid #CBD5E1;
  border-radius: 100px;
  padding: 0 18px;
  background: #ffffff;
}

.wc-search-form .wp-block-search__button {
  min-height: 54px;
  margin: 0;
  border-radius: 100px;
  border: 0;
  padding: 0 22px;
  font-weight: 700;
  background: var(--wp--preset--color--purple, #7C00FF);
  color: #ffffff;
}

/* ── Contact form ────────────────────────────────────────────────────────── */
.wc-contact-form {
  padding: 32px;
  background: #ffffff;
  border: 1px solid var(--wp--preset--color--border, #E5E7EB);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
}

.wc-contact-form__form {
  display: grid;
  gap: 18px;
}

.wc-contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.wc-contact-form__field {
  margin: 0;
}

.wc-contact-form__label,
.wc-contact-form__note-title {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #111827;
}

.wc-contact-form__help,
.wc-contact-form__note-text {
  color: var(--wp--preset--color--mid-grey, #6B7280);
}

.wc-contact-form__help {
  font-size: 13px;
  font-weight: 500;
}

.wc-contact-form__required {
  color: #b91c1c;
}

.wc-contact-form__input,
.wc-contact-form__select,
.wc-contact-form__textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  font: inherit;
  line-height: 1.5;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.wc-contact-form__input,
.wc-contact-form__select {
  min-height: 54px;
  padding: 0 16px;
}

.wc-contact-form__textarea {
  min-height: 160px;
  padding: 14px 16px;
  resize: vertical;
}

.wc-contact-form__input::placeholder,
.wc-contact-form__textarea::placeholder {
  color: #94a3b8;
}

.wc-contact-form__input:focus,
.wc-contact-form__select:focus,
.wc-contact-form__textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--purple, #7C00FF);
  box-shadow: var(--focus-ring);
}

.wc-contact-form__select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #111827 50%),
    linear-gradient(135deg, #111827 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.wc-contact-form__submit {
  justify-self: start;
  border: 0;
  border-radius: 100px;
  padding: 14px 24px;
  background: var(--wp--preset--color--purple, #7C00FF);
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 12px 32px rgba(124, 0, 255, 0.22);
}

.wc-contact-form__submit:hover,
.wc-contact-form__submit:focus-visible {
  opacity: 0.94;
  transform: translateY(-1px);
}

.wc-contact-form__submit:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 3px;
}

.wc-contact-form__notice,
.wc-contact-form__note {
  border-radius: 16px;
  padding: 14px 16px;
}

.wc-contact-form__notice {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.55;
}

.wc-contact-form__notice.is-success {
  background: #ecfdf5;
  border: 1px solid #86efac;
  color: #166534;
}

.wc-contact-form__notice.is-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

.wc-contact-form__notice-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
}
.wc-contact-form__notice-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}
.wc-contact-form__notice-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 0.18s ease;
}
.wc-contact-form__notice-cta:hover {
  opacity: 0.75;
}
.wc-contact-form__notice.is-success .wc-contact-form__notice-cta {
  color: #166534;
}
.wc-contact-form__notice.is-error .wc-contact-form__notice-cta {
  color: #991b1b;
}

.wc-contact-form__note {
  background: var(--wp--preset--color--soft-grey, #F5F5F5);
  border: 1px solid var(--wp--preset--color--border, #E5E7EB);
}

.wc-contact-form__note-title,
.wc-contact-form__note-text {
  margin: 0;
}

.wc-contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Testimonial Cards: Responsive grid ─────────────────────────────────────
   WordPress only ships a max-width:600px → 1-col rule. Without an intermediate
   breakpoint, 3 columns persist at tablet (~820px) giving cards only ~263px of
   width — too narrow for readable text. This adds a 2-col step for 600–900px.
   Selector specificity (0,2,0) beats the WP-generated dynamic class (0,1,0).  */
@media (min-width: 600px) and (max-width: 900px) {
  .wp-block-post-template.columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Testimonial card inner typography ───────────────────────────────────── */
/* Post title inside query-loop cards */
.wp-block-post-template .wp-block-post-title a,
.wp-block-post-template .wp-block-post-title {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  color: #1c1c2e;
}

/* Excerpt text */
.wp-block-post-template .wp-block-post-excerpt__excerpt {
  font-size: 15px;
  line-height: 1.65;
  color: var(--wp--preset--color--mid-grey);
  margin-bottom: 0;
}

/* Read more link */
.wp-block-post-template .wp-block-post-excerpt__more-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--purple);
}

/* Author + date row */
.wp-block-post-template .wp-block-post-author-name,
.wp-block-post-template .wp-block-post-date {
  font-size: 13px;
  color: var(--wp--preset--color--mid-grey);
}

/* ── Mobile: Button Stacking ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .wp-block-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .wp-block-buttons .wp-block-button {
    width: 100%;
  }

  .wp-block-buttons .wp-block-button .wp-block-button__link {
    display: block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
}

/* ── Mobile: Section padding compression ────────────────────────────────── */
/* Full-width sections use large vertical padding on desktop (80px, 72px,
   64px, 56px). These values feel oversized on a 375px viewport. Compress
   to a tighter, still-breathable rhythm on small screens.                  */
@media (max-width: 600px) {
  /* 80px → 52px */
  .wp-block-group.alignfull[style*="padding-top:80px"],
  .wp-block-group.alignfull[style*="padding-top: 80px"] {
    padding-top: 52px !important;
  }
  .wp-block-group.alignfull[style*="padding-bottom:80px"],
  .wp-block-group.alignfull[style*="padding-bottom: 80px"] {
    padding-bottom: 52px !important;
  }
  /* 96px hero → 64px (hero-growth.php top) */
  .wp-block-group.alignfull[style*="padding-top:96px"] {
    padding-top: 64px !important;
  }
  .wp-block-group.alignfull[style*="padding-bottom:88px"] {
    padding-bottom: 60px !important;
  }
  /* 72px → 44px */
  .wp-block-group.alignfull[style*="padding-top:72px"] {
    padding-top: 44px !important;
  }
  .wp-block-group.alignfull[style*="padding-bottom:72px"] {
    padding-bottom: 44px !important;
  }
  /* 64px → 40px */
  .wp-block-group.alignfull[style*="padding-top:64px"] {
    padding-top: 40px !important;
  }
  .wp-block-group.alignfull[style*="padding-bottom:64px"] {
    padding-bottom: 40px !important;
  }
  /* 56px → 36px */
  .wp-block-group.alignfull[style*="padding-top:56px"] {
    padding-top: 36px !important;
  }
  .wp-block-group.alignfull[style*="padding-bottom:56px"] {
    padding-bottom: 36px !important;
  }
}

/* ── Mobile: Plan card padding ───────────────────────────────────────────── */
/* 32px all-sides feels cramped on a 375px card width. 22px gives breathing
   room without losing the card's contained feel.                            */
@media (max-width: 600px) {
  .plan-card {
    padding: 22px !important;
  }
}

/* ── Mobile: Display heading scale ──────────────────────────────────────── */
/* The display preset is 44px — impactful on desktop, reads large on mobile.
   A fluid clamp prevents multi-line breaks that fragment the headline rhythm. */
@media (max-width: 640px) {
  .has-display-font-size,
  [class*="has-display-font-size"] {
    font-size: clamp(30px, 8.5vw, 40px) !important;
    line-height: 1.08 !important;
  }
}

/* ── Mobile: H1 headings without inline size (legal, info pages) ─────────── */
@media (max-width: 640px) {
  h1:not([class*="has-"]):not([style*="font-size"]) {
    font-size: clamp(28px, 7.5vw, 38px);
    line-height: 1.12;
  }
}

/* ── Mobile: Footer logo sizing ──────────────────────────────────────────── */
/* Columns stack on mobile — logo fills the stacked col width. Cap it so the
   wordmark doesn't stretch to full viewport width.                          */
@media (max-width: 600px) {
  .wc-footer-logo img {
    max-width: 180px !important;
    width: 180px !important;
    height: auto !important;
  }
}

/* ── Mobile: Card grid density ───────────────────────────────────────────── */
/* Three-column card grids (industry, services) stack correctly at ≤782px
   (WordPress default). Ensure cards have comfortable vertical gap on mobile. */
@media (max-width: 600px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    gap: 16px !important;
  }
  /* Frosted/plan cards that stack: give breathing room */
  .card-shadow,
  .frosted-surface {
    margin-bottom: 0;
  }
}



/* ── Logo: footer image — prevent layout shift ───────────────────────────── */
/* The footer logo (wc-footer-logo) is an image block. Ensure it does not
   inherit any unexpected float or block margin from WP image defaults.      */
.wc-footer-logo {
  margin: 0 !important;
  line-height: 0;
}

.wc-footer-logo a {
  display: inline-block;
  line-height: 0;
}

.wc-footer-logo img {
  display: block;
  height: auto !important;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE QA PASS — Full UI + Navigation + Mobile fix set
   Applied: 2026-03
   ══════════════════════════════════════════════════════════════════════════ */



/* ── Heading <br> tags: Hide on mobile viewports ────────────────────────── */
/* Multiple headings contain <br> for desktop line-break control:
   - Monthly Plans H1: "Stop hiring per project.<br>Start having a team."
   - About H1: "Two people. One focus.<br>Your technology, working."
   - Audit H1: "Know exactly what's broken<br>before you spend a dollar."
   - Audit closing H2: "Your site is either an asset or a liability.<br>..."
   On mobile these cause awkward forced breaks — natural text wrapping is
   always better at narrow widths. Hide all heading <br>s below 640px.      */
@media (max-width: 640px) {
  h1 br,
  h2 br {
    display: none;
  }
}

/* ── CTA Stripe: Compress large inline H2 on mobile ─────────────────────── */
/* cta-stripe.php uses style="font-size:36px" inline on its H2. This
   bypasses the h2:not([style*="font-size"]) scaling rule. At 375px a 36px
   centred heading runs 3+ lines and dominates the section uncomfortably.
   Compress to a fluid range that reads strong without overwhelming.         */
@media (max-width: 640px) {
  h2[style*="font-size:36px"],
  h2[style*="font-size: 36px"] {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.18 !important;
  }
}

/* ── Plans grid: Single column on tablet (600–900px) ────────────────────── */
/* Three plan cards at 600–900px viewport gives each card ~195px of content
   width after padding (5vw page margin, 28px card padding each side). The
   "Most Popular" badge + "Recommended" label in a nowrap flex row overflows
   at that width. Stack all three cards to a single column between these
   breakpoints. The :has() selector is supported in all modern browsers
   (Chrome 105+, Safari 15.4+, Firefox 121+).                               */
@media (max-width: 900px) {
  .wp-block-columns:has(.plan-card) {
    flex-direction: column !important;
  }
  .wp-block-columns:has(.plan-card) > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Trust bar: 2×2 grid on mobile ─────────────────────────────────────── */
/* The trust-bar.php columns block gets className "trust-bar-cols".
   4 stats stacked vertically takes excessive vertical space on mobile.
   A 2×2 grid keeps all four stats visible in a compact, scannable layout.
   Also fixes the border-right dividers which look odd in vertical stack.   */
@media (max-width: 600px) {
  .trust-bar-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
  }
  .trust-bar-cols > .wp-block-column {
    flex-basis: auto !important;
    border-right: none !important;
    padding: 14px 16px !important;
  }
  .trust-bar-cols > .wp-block-column:nth-child(1),
  .trust-bar-cols > .wp-block-column:nth-child(2) {
    border-bottom: 1px solid var(--wp--preset--color--border) !important;
  }
  .trust-bar-cols > .wp-block-column:nth-child(1),
  .trust-bar-cols > .wp-block-column:nth-child(3) {
    border-right: 1px solid var(--wp--preset--color--border) !important;
  }
}

/* ── Contact form: Stack name/email columns on small screens ────────────── */
/* The contact form (wp:html) uses inline style="grid-template-columns:1fr 1fr"
   for the Name + Email row. At 375px viewport the two inputs shrink to ~150px
   each — usable but tight. Below 480px, stack them to a single column so
   each input gets the full content width for comfortable touch input.       */
@media (max-width: 480px) {
  .wc-contact-form__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Tablet: Section sub-heading comfort ────────────────────────────────── */
/* Between 640-900px, very short section H2s (from pattern headings) can
   look too small at the 28px clamp floor. Nudge the max slightly higher
   for mid-range viewports via a wider vw band.                             */
@media (min-width: 640px) and (max-width: 1100px) {
  h2:not([style*="font-size"]) {
    font-size: clamp(28px, 3.2vw, 36px);
  }
}

/* ── Mobile: Wider plan card max-width on narrow screens ───────────────── */
/* When plan cards stack to single column (via .plan-card :has() rule above),
   ensure they don't max-out at a width that feels cramped on mid-phones.   */
@media (max-width: 600px) {
  .wp-block-columns:has(.plan-card) > .wp-block-column {
    max-width: 100%;
  }
}

/* ── Footer bottom strip: Wrap contact info gracefully on mobile ─────────  */
/* The footer bottom flex row has email, location, experience, and ABN. On
   mobile these flow correctly due to flexWrap:wrap in the block markup, but
   the gap between items can be inconsistent. Tighten the flex gap.         */
@media (max-width: 600px) {
  .wc-empty-state,
  .wc-contact-form {
    padding: 22px;
  }

  .wc-empty-state__actions {
    flex-direction: column;
  }

  .wc-empty-state__button {
    width: 100%;
  }

  .wc-related-services {
    padding: 22px;
  }

  .wc-related-services__grid {
    grid-template-columns: 1fr;
  }

  .wc-service-next-step {
    padding: 24px;
  }

  .wc-service-next-step__actions,
  .wc-service-next-step__support {
    flex-direction: column;
    align-items: flex-start;
  }

  .wc-contact-form__submit {
    width: 100%;
    justify-self: stretch;
  }

  .wc-footer .wp-block-group[style*="padding-top:18px"] .wp-block-group {
    gap: 12px !important;
  }
}

/* Trust strip — chip + logo-ready styling.
   Text fallback uses pill chips with subtle opacity. When logo images are
   added (replace .trust-chip <p> blocks with wp:image inside .trust-logos),
   the same grayscale + hover treatment applies to the <img> children.        */
.trust-logos {
  align-items: center;
  justify-content: center;
}
.trust-logos .trust-chip {
  display: inline-block;
  padding: 6px 14px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--dark-grey, #374151);
  border: 1px solid var(--wp--preset--color--border, #E5E7EB);
  border-radius: 100px;
  opacity: 1;
  transition: opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.trust-logos .trust-chip:hover {
  opacity: 1;
  border-color: var(--wp--preset--color--purple, #7C00FF);
  color: var(--wp--preset--color--black, #000000);
}

/* ══ Platforms we build on ═══════════════════════════════════════════════════
   Grouped capability strip. A flat row of nine identical outlined pills read as
   a tag cloud; grouping by purpose ("build" vs "connect") turns the same list
   into a capability claim. Chips are filled rather than outlined and squarer
   than the trust pills, which reads as technical rather than decorative.     */
.wc-platforms {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 940px;
  margin: 0 auto;
}

.wc-platforms__group {
  display: flex;
  align-items: center;
  gap: 18px;
}

.wc-platforms__label {
  /* Wide enough for the longest label ("Platforms we build on") to stay on one
     line, so every group label sits on a single baseline against its chip row. */
  flex: 0 0 202px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--mid-grey, #6B7280);
  line-height: 1.3;
}

.wc-platforms__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.wc-platforms__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #1c1c2e;
  background: #F4F4F9;
  border: 1px solid transparent;
  border-radius: 9px;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.wc-platforms__chip:hover {
  background: rgba(124, 0, 255, 0.06);
  border-color: rgba(124, 0, 255, 0.35);
  transform: translateY(-1px);
}

/* Systems WE build carry brand tint; third-party platform names stay neutral
   grey. The colour difference is the tell that one row is our capability and
   the other is nominative use of someone else's product name. */
.wc-platforms__chip--ours {
  background: rgba(124, 0, 255, 0.07);
  color: #2e0a5c;
  border-color: rgba(124, 0, 255, 0.16);
}

.wc-platforms__chip--ours:hover {
  background: rgba(124, 0, 255, 0.13);
  border-color: rgba(124, 0, 255, 0.4);
}

/* The mark sits WITH the label, never instead of it — a lone Laravel or Xero
   glyph means nothing to a non-technical buyer, which is the exact audience
   this strip is for. Icon aids recognition; the word carries the meaning. */
.wc-platforms__mark {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.62;
  transition: opacity 0.2s ease;
}

.wc-platforms__mark svg { width: 100%; height: 100%; }

/* Our own system icons take the brand purple; third-party marks stay neutral. */
.wc-platforms__chip--ours .wc-platforms__mark--icon {
  color: var(--wp--preset--color--purple, #7C00FF);
  opacity: 0.85;
}

.wc-platforms__chip:hover .wc-platforms__mark { opacity: 1; }

.wc-platforms__text { line-height: 1.2; }

@media (max-width: 860px) {
  .wc-platforms__group {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .wc-platforms__label {
    flex: none;
    text-align: center;
  }
  .wc-platforms__items { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-platforms__chip,
  .wc-platforms__logo { transition: none; }
  .wc-platforms__chip:hover { transform: none; }
}
/* Client logos are the strongest proof on the page, so they are sized to be
   read, not decorated. 28px at 0.5 opacity was small enough that most marks
   were illegible; 44px at 0.78 keeps the greyscale cohesion but makes each
   brand actually recognisable at a glance. */
.trust-logos img {
  height: 44px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.78;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.trust-logos img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ============================================================
 * Web Champion — Contact form (.wc-contact-form__*)
 * Fixes for /contact/ page where the custom theme form
 * was rendering unstyled and the honeypot was visible.
 *
 * Save target: Appearance → Customise → Additional CSS
 *              OR theme's style.css
 * ============================================================ */

.wc-contact-form__form { margin: 0; }

/* Hide honeypot accessibly (still in DOM for bots, invisible to humans + screen readers) */
.wc-contact-form__honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Two-column responsive grid */
.wc-contact-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}
.wc-contact-form__field {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.wc-contact-form__field--full {
    grid-column: 1 / -1;
}

/* Labels */
.wc-contact-form__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
    line-height: 1.4;
}
.wc-contact-form__required {
    color: #dc2626;
    margin-left: 2px;
}
.wc-contact-form__help {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 4px;
}

/* Inputs / selects / textareas */
.wc-contact-form__input,
.wc-contact-form__select,
.wc-contact-form__textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    line-height: 1.4;
    color: #111827;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

/* Custom select chevron — explicit background-size is required because the
   `background:#ffffff` shorthand above resets background-size to auto, and the
   inline SVG has only a viewBox (no intrinsic size), so without this it scales
   to fill the whole field. */
.wc-contact-form__select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 13px 9px;
    padding-right: 42px;
}

.wc-contact-form__textarea {
    min-height: 130px;
    resize: vertical;
}

.wc-contact-form__input:focus,
.wc-contact-form__select:focus,
.wc-contact-form__textarea:focus {
    outline: none;
    border-color: #7C00FF;
    box-shadow: var(--focus-ring);
}

/* Inline validation: error state + message under field */
.wc-contact-form__input.is-invalid,
.wc-contact-form__select.is-invalid,
.wc-contact-form__textarea.is-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.wc-contact-form__input.is-invalid:focus,
.wc-contact-form__select.is-invalid:focus,
.wc-contact-form__textarea.is-invalid:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22);
}
.wc-contact-form__error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #b91c1c;
    line-height: 1.4;
}
.wc-contact-form__error::before {
    content: "⚠ ";
    margin-right: 2px;
}
.wc-contact-form__input::placeholder,
.wc-contact-form__textarea::placeholder {
    color: #9ca3af;
}

/* Legacy duplicate of the .wc-contact-form__submit rule above has been
 * removed. Canonical rule is at line ~977. Final polish overrides below. */
.wc-contact-form__submit {
    background: linear-gradient(135deg, #6C16E8 0%, #3D1EC4 100%);
    min-height: 54px;
    padding: 14px 32px;
    font-size: 16px;
    box-shadow: 0 8px 24px rgba(34, 0, 255, 0.22);
}
.wc-contact-form__submit:hover,
.wc-contact-form__submit:focus-visible {
    background: linear-gradient(135deg, #3D1EC4 0%, #6C16E8 100%);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(124, 0, 255, 0.30);
    opacity: 1;
}
.wc-contact-form__submit:active {
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(34, 0, 255, 0.20);
}

/* Required-field marker — subtle aqua dot, accessible to AT (aria-hidden in DOM) */
.wc-contact-form__required {
    color: var(--wp--preset--color--purple, #7C00FF);
    font-weight: 800;
    margin-left: 2px;
}

/* Helper "What happens next" note box */
.wc-contact-form__note {
    background: #f9fafb;
    border-radius:12px;
    padding: 16px 18px;
    margin-top: 20px;
    border: 1px solid #e5e7eb;
}
.wc-contact-form__note-title {
    font-weight: 600;
    color: #111827;
    margin: 0 0 6px;
    font-size: 0.95rem;
}
.wc-contact-form__note-text {
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

/* Mobile — stack to single column */
@media (max-width: 640px) {
    .wc-contact-form__grid {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
 * Web Champion — Service case-study cards (round 8)
 * Proof grid surfaced on flagship service pages (web-apps, integrations).
 * ════════════════════════════════════════════════════════════════════════════ */

.wc-service-case-studies {
    margin: 56px auto 16px;
    max-width: 1200px;
    padding: 0 5vw;
}
.wc-service-case-studies__intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 28px;
}
.wc-service-case-studies__eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--purple, #7C00FF);
    margin: 0 0 8px;
}
.wc-service-case-studies__heading {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--wp--preset--color--black, #000000);
    text-transform: capitalize;
}
.wc-service-case-studies__lead {
    font-size: 16px;
    color: var(--wp--preset--color--mid-grey, #6B7280);
    margin: 0;
}
.wc-service-case-studies__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
    margin-bottom: 22px;
}
.wc-service-case-studies__card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #ece9f5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.wc-service-case-studies__card:hover,
.wc-service-case-studies__card:focus-within {
    transform: translateY(-3px);
    border-color: var(--wp--preset--color--purple, #7C00FF);
    box-shadow: 0 14px 32px rgba(124, 0, 255, 0.12);
}
.wc-service-case-studies__image-link {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #f7f4ff 0%, #ece9f5 100%);
}
.wc-service-case-studies__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.wc-service-case-studies__card:hover .wc-service-case-studies__image {
    transform: scale(1.04);
}
.wc-service-case-studies__body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.wc-service-case-studies__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}
.wc-service-case-studies__title a {
    color: var(--wp--preset--color--black, #000000) !important;
    text-decoration: none;
}
.wc-service-case-studies__card:hover .wc-service-case-studies__title a {
    color: var(--wp--preset--color--purple, #7C00FF) !important;
}
.wc-service-case-studies__text {
    font-size: 15px;
    color: var(--wp--preset--color--mid-grey, #6B7280);
    margin: 0;
    line-height: 1.55;
    flex: 1;
}
.wc-service-case-studies__cta {
    margin: 8px 0 0;
}
.wc-service-case-studies__cta a {
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--purple, #7C00FF);
    text-decoration: none;
}
.wc-service-case-studies__cta a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.wc-service-case-studies__more {
    text-align: center;
    margin: 0;
}
.wc-service-case-studies__more a {
    font-size: 15px;
    font-weight: 600;
    color: var(--wp--preset--color--purple, #7C00FF);
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 1px;
}

/* ════════════════════════════════════════════════════════════════════════════
 * Web Champion — Polish round 6 (Apr 2026)
 *  - Back-to-top floating button
 *  - Hero entrance animation
 * ════════════════════════════════════════════════════════════════════════════ */

/* Back-to-top button — bottom-right, fades in after long scroll. */
.wc-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wp--preset--color--purple, #7C00FF);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease, background-color 0.18s ease;
    box-shadow: var(--shadow-glow);
    font-size: 18px;
    line-height: 1;
}
.wc-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.wc-back-to-top:hover,
.wc-back-to-top:focus-visible {
    background: #6300CC;
    transform: translateY(-2px);
}
.wc-back-to-top svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Lift the button above the sticky mobile CTA bar */
@media (max-width: 768px) {
    .wc-back-to-top {
        bottom: 80px;
        right: 16px;
    }
}
/* Hide if user prefers no motion (button still works but no hover bounce) */
@media (prefers-reduced-motion: reduce) {
    .wc-back-to-top { transition: opacity 0.15s ease; transform: none; }
    .wc-back-to-top.is-visible { transform: none; }
}

/* Hero entrance animation — applied to first heading + adjacent paragraphs/buttons
 * inside cover/hero blocks. Respects prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    .wp-block-cover :is(h1, h2):first-of-type,
    .wp-block-cover :is(h1, h2):first-of-type + p,
    .wp-block-cover :is(h1, h2):first-of-type + p + p,
    .wp-block-cover :is(h1, h2):first-of-type + .wp-block-buttons,
    .wp-block-cover :is(h1, h2):first-of-type ~ .wp-block-buttons,
    .wc-hero-animate > * {
        opacity: 0;
        transform: translateY(12px);
        animation: wc-hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .wp-block-cover :is(h1, h2):first-of-type {
        animation-delay: 0.08s;
    }
    .wp-block-cover :is(h1, h2):first-of-type + p {
        animation-delay: 0.18s;
    }
    .wp-block-cover :is(h1, h2):first-of-type + p + p {
        animation-delay: 0.28s;
    }
    .wp-block-cover :is(h1, h2):first-of-type + .wp-block-buttons,
    .wp-block-cover :is(h1, h2):first-of-type ~ .wp-block-buttons {
        animation-delay: 0.36s;
    }
}
@keyframes wc-hero-rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
 * Web Champion — Polish round 5 (Apr 2026)
 *  - Active nav indicator
 *  - Reading progress bar
 *  - Hero gradient polish
 *  - Stat counter base styles
 * ════════════════════════════════════════════════════════════════════════════ */

/* Active nav: applied by main.js when href matches current path.
 * Stronger than the existing aria-current rule so the indicator stands out.
 * Only the label link gets the underline bar — an is-current item with a
 * submenu toggle (e.g. "Services") has the toggle as a separate, narrow
 * sibling element; giving it its own ::after underline renders as a
 * disconnected dash floating next to the label instead of under it. */
.wc-header .wp-block-navigation-item.is-current > a,
.wc-header .wp-block-navigation-item.is-current > .wp-block-navigation-submenu__toggle {
    color: var(--wp--preset--color--purple, #7C00FF) !important;
    position: relative;
}
.wc-header .wp-block-navigation-item.is-current > a::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 2px;
    height: 2px;
    background: var(--wp--preset--color--purple, #7C00FF);
    border-radius: 2px;
}

/* Reading progress bar — fixed top, gradient, scales x-axis to scroll progress.
 * The element is injected by main.js and only made visible on long pages. */
.wc-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 99998;
    pointer-events: none;
    background: transparent;
    display: none;
}
.wc-progress-bar.is-active { display: block; }
.wc-progress-bar__fill {
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 0;
    background: linear-gradient(90deg, #6C16E8 0%, #8B3DFF 100%);
    transition: transform 0.05s linear;
    box-shadow: 0 1px 3px rgba(124, 0, 255, 0.4);
}
body.admin-bar .wc-progress-bar { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .wc-progress-bar { top: 46px; }
}

/* Hero polish — subtle radial gradient + dot pattern on cover blocks,
 * keeping any uploaded image readable. Only triggers when there's no overlay
 * already from theme.json. */
.wp-block-cover.has-purple-background-color::before,
.wp-block-cover.is-style-wc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08), transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.06), transparent 50%);
    opacity: 0.9;
}

/* Stat counter — animation cue. The number swap happens via JS via textContent;
 * this just provides a smooth fade-in from a faded state. */
.wc-stat-counter {
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}
.wc-stat-counter.is-counting {
    transform: translateY(2px);
    opacity: 0.9;
}
.wc-stat-counter.is-done {
    transform: translateY(0);
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
 * Web Champion — A11y + readability polish (Apr 2026, round 4)
 * Skip-link, focus rings, reading-width cap, external-link indicator
 * ════════════════════════════════════════════════════════════════════════════ */

/* Skip-to-content link — visible only on keyboard focus, top-left of viewport */
.wc-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    padding: 10px 16px;
    background: var(--wp--preset--color--purple, #7C00FF);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 12px;
    box-shadow: var(--shadow-glow);
    transform: translateY(-200%);
    transition: transform 0.18s ease;
}
.wc-skip-link:focus,
.wc-skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* Sitewide visible focus rings — keyboard users see exactly what's focused.
 * Uses :focus-visible so mouse clicks don't show the ring. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--wp--preset--color--purple, #7C00FF);
    outline-offset: 3px;
    border-radius: 4px;
}
.wp-block-button__link:focus-visible {
    outline-offset: 4px;
}
.wc-header__phone .wp-block-button__link:focus-visible,
.wc-header__cta .wp-block-button__link:focus-visible {
    outline-offset: 3px;
}
/* Don't double-up rings on form fields that already have a focus shadow */
.wc-contact-form__input:focus-visible,
.wc-contact-form__select:focus-visible,
.wc-contact-form__textarea:focus-visible,
.wc-quick-audit__input:focus-visible {
    outline: none;
}

/* Reading width cap — long body paragraphs and lists shouldn't run wider than ~72ch
 * on big screens. Headings, columns, hero sections, and explicit alignwide/alignfull
 * blocks are exempted. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
main p:not([class*="has-text-align"]):not(.wc-trust-strip *):not(.wc-quick-audit__hint):not(.wc-contact-form__notice-text):not(.wc-service-next-step__text):not(.wp-block-cover *) {
    max-width: 72ch;
}

/* External link indicator — small icon after links pointing offsite (added by main.js).
 * The class is added by JS so static internal HTML stays clean. */
a.wc-external-link::after {
    content: "";
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-left: 0.25em;
    margin-bottom: -0.05em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7h8v8'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7h8v8'/></svg>") no-repeat center / contain;
    opacity: 0.7;
    transition: opacity 0.15s ease, transform 0.15s ease;
    vertical-align: baseline;
}
a.wc-external-link:hover::after {
    opacity: 1;
    transform: translate(1px, -1px);
}
/* Skip the icon on header/footer/nav/buttons where it would clutter */
.wc-header a.wc-external-link::after,
.wc-footer a.wc-external-link::after,
.wp-block-button__link.wc-external-link::after,
.wc-sticky-cta a.wc-external-link::after {
    display: none;
}

/* Form submission loading state */
.wc-contact-form__submit.is-loading {
    pointer-events: none;
    opacity: 0.85;
    position: relative;
}
.wc-contact-form__submit.is-loading::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: wc-spin 0.7s linear infinite;
    vertical-align: -2px;
}
@keyframes wc-spin {
    to { transform: rotate(360deg); }
}
.wc-quick-audit__submit.is-loading {
    pointer-events: none;
    opacity: 0.85;
}
.wc-quick-audit__submit.is-loading::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: wc-spin 0.7s linear infinite;
    vertical-align: -1px;
}

/* ── Fluid heading sizes (April 2026) ────────────────────────────────────── */
/* Theme.json uses fixed sizes which look weak on big screens and crowded on small.
 * Inline clamp() styles on specific landing-page hero headings still win
 * (CSS specificity); this is the global default for headings without overrides. */
h1.wp-block-heading,
.wp-block-post-title {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.01em;
}
h2.wp-block-heading {
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.005em;
}
h3.wp-block-heading {
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.3;
}

/* ════════════════════════════════════════════════════════════════════════════
 * Web Champion — Conversion improvements (Apr 2026)
 *  - Header phone pill (.wc-header__phone) hover/focus
 *  - Contact page trust line + alt-contact line
 *  - Sitewide trust strip below header
 *  - Sticky mobile bottom CTA bar
 *  - Inline service-page CTA block
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Header phone pill: hover/focus ──────────────────────────────────────── */
.wc-header__phone .wp-block-button__link {
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.wc-header__phone .wp-block-button__link:hover,
.wc-header__phone .wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--purple, #7C00FF) !important;
    color: #ffffff !important;
    border-color: var(--wp--preset--color--purple, #7C00FF) !important;
    outline: none;
    box-shadow: var(--shadow-glow);
}

/* ── Contact page: trust line above form ─────────────────────────────────── */
.wc-trust-line {
    color: var(--wp--preset--color--mid-grey, #6B7280);
    margin-bottom: 18px !important;
    letter-spacing: 0.01em;
}
.wc-trust-line strong {
    color: var(--wp--preset--color--black, #000000);
}

/* ── Contact page: alt-contact line below form ───────────────────────────── */
.wc-alt-contact {
    color: var(--wp--preset--color--mid-grey, #6B7280);
    margin-top: 16px !important;
}
.wc-alt-contact a {
    color: var(--wp--preset--color--purple, #7C00FF);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(124, 0, 255, 0.25);
    transition: border-color 0.18s ease;
}
.wc-alt-contact a:hover {
    border-bottom-color: var(--wp--preset--color--purple, #7C00FF);
}

/* ── Sitewide trust strip (sits directly below header) ───────────────────── */
.wc-trust-strip {
    background: linear-gradient(180deg, #f8f7fc 0%, #ffffff 100%);
    border-bottom: 1px solid #ece9f5;
    padding: 8px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--wp--preset--color--mid-grey, #6B7280);
    letter-spacing: 0.01em;
}
.wc-trust-strip strong {
    color: var(--wp--preset--color--black, #000000);
}
@media (max-width: 600px) {
    .wc-trust-strip {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ── Mobile sticky bottom CTA bar ────────────────────────────────────────── */
.wc-sticky-cta {
    display: none;
}
@media (max-width: 768px) {
    .wc-sticky-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        gap: 8px;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: saturate(180%) blur(10px);
        -webkit-backdrop-filter: saturate(180%) blur(10px);
        border-top: 1px solid #ece9f5;
        box-shadow: 0 -4px 16px rgba(11, 16, 38, 0.06);
    }
    .wc-sticky-cta a {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 12px 14px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        border-radius: 100px;
        transition: opacity 0.18s ease, transform 0.05s ease;
    }
    .wc-sticky-cta a:active { transform: translateY(1px); }
    .wc-sticky-cta__phone {
        color: var(--wp--preset--color--purple, #7C00FF);
        background: transparent;
        border: 2px solid var(--wp--preset--color--purple, #7C00FF);
    }
    .wc-sticky-cta__audit {
        color: #fff;
        background: var(--wp--preset--color--purple, #7C00FF);
    }
    /* Add bottom padding to body so content isn't hidden behind sticky bar */
    body {
        padding-bottom: 64px;
    }
    /* Footer adjustments so it doesn't sit jammed against the bar */
    .wc-footer { margin-bottom: 0; }
}

/* ── Quick audit URL form (hero of /audit/) ──────────────────────────────── */
.wc-quick-audit {
    max-width: 620px;
    margin: 24px 0 8px;
    padding: 18px 18px 14px;
    background: #ffffff;
    border: 1px solid #e9e3fb;
    border-radius: 16px;
    box-shadow: var(--shadow-glow);
}
.wc-quick-audit__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--wp--preset--color--black, #000000);
    margin: 0 0 10px;
}
.wc-quick-audit__row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.wc-quick-audit__input {
    flex: 1 1 260px;
    min-width: 0;
    padding: 12px 16px;
    font-size: 15px;
    color: #111827;
    background: #ffffff;
    border: 1.5px solid #d1d5db;
    border-radius: 100px;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.wc-quick-audit__input:focus {
    outline: none;
    border-color: var(--wp--preset--color--purple, #7C00FF);
    box-shadow: var(--focus-ring);
}
.wc-quick-audit__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    background: var(--wp--preset--color--purple, #7C00FF);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.05s ease;
    font-family: inherit;
    white-space: nowrap;
}
.wc-quick-audit__submit:hover { background: #6300CC; }
.wc-quick-audit__submit:active { transform: translateY(1px); }
.wc-quick-audit__hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--wp--preset--color--mid-grey, #6B7280);
}
@media (max-width: 480px) {
    .wc-quick-audit__row {
        flex-direction: column;
    }
    .wc-quick-audit__submit {
        width: 100%;
    }
}

/* ── Inline service-page CTA block ───────────────────────────────────────── */
.wc-service-cta {
    background: linear-gradient(135deg, #f7f4ff 0%, #ffffff 100%);
    border: 1px solid #e9e3fb;
    border-radius: 16px;
    padding: 28px 24px;
    margin: 32px 0;
    text-align: center;
}
.wc-service-cta__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--wp--preset--color--black, #000000);
    margin: 0 0 8px;
    line-height: 1.3;
}
.wc-service-cta__sub {
    color: var(--wp--preset--color--mid-grey, #6B7280);
    font-size: 15px;
    margin: 0 0 18px;
}
.wc-service-cta__buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.wc-service-cta__buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 100px;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.wc-service-cta__buttons .is-primary {
    background: var(--wp--preset--color--purple, #7C00FF);
    color: #fff;
}
.wc-service-cta__buttons .is-primary:hover {
    background: #6300CC;
}
.wc-service-cta__buttons .is-secondary {
    background: transparent;
    border: 2px solid var(--wp--preset--color--purple, #7C00FF);
    color: var(--wp--preset--color--purple, #7C00FF);
}
.wc-service-cta__buttons .is-secondary:hover {
    background: var(--wp--preset--color--purple, #7C00FF);
    color: #fff;
}

/* ================================================================
 * WC: Four-paths templates — responsive overrides
 * ================================================================
 * Targets the offer pages, service detail pages, industry detail
 * pages, and SEO landing pages built with the consistent shape:
 * gradient hero → trust strip → tile grids → reused patterns.
 * Adds mobile/tablet polish without bloating block markup.
 * ================================================================ */

/* ── Hero: gradient hero on offer/service/industry pages ─────────────── */

/* Hero H1 — keep readable at every screen size */
.has-display-font-size {
    font-size: clamp(28px, 5.5vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

@media (max-width: 600px) {
    /* Compress hero gradient padding on mobile so the H1 isn't lost */
    [class*="alignfull"][style*="background:var(--wp--preset--gradient--brand)"] {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    /* Hero sub paragraph — prevent oversized body text on small screens */
    .has-m-font-size {
        font-size: 16px !important;
        line-height: 1.55;
    }

    /* Hero CTA buttons stretch to full width when stacked */
    [class*="alignfull"][style*="background:var(--wp--preset--gradient--brand)"] .wp-block-button__link {
        display: block;
        text-align: center;
    }
    [class*="alignfull"][style*="background:var(--wp--preset--gradient--brand)"] .wp-block-buttons {
        gap: 8px !important;
    }
    [class*="alignfull"][style*="background:var(--wp--preset--gradient--brand)"] .wp-block-button {
        width: 100%;
    }

    /* Trust pills below CTAs — tighter spacing */
    [class*="alignfull"][style*="background:var(--wp--preset--gradient--brand)"] > .wp-block-group > .wp-block-group {
        gap: 8px !important;
    }
}

/* ── Tile grids: 4-card sections stack to 2x2 on tablet ──────────────── */
/* Most "what we do" sections use 4 alignwide columns. WP defaults to
 * single-column stack only below 781px — leaving 4 cards cramped on
 * iPad portrait (768-1024px). Force 2x2 in that range.
 *
 * Uses :has() — Chrome 105+, Safari 15.4+, Firefox 121+.
 * Older browsers fall back to WP's default (still readable, just tighter).
 */
@media (min-width: 782px) and (max-width: 1024px) {
    .wp-block-columns.alignwide:has(> .wp-block-column:nth-child(4)):not(:has(> .wp-block-column:nth-child(5))) {
        flex-wrap: wrap !important;
        row-gap: 16px;
    }
    .wp-block-columns.alignwide:has(> .wp-block-column:nth-child(4)):not(:has(> .wp-block-column:nth-child(5))) > .wp-block-column {
        flex-basis: calc(50% - 8px) !important;
        flex-grow: 0 !important;
        flex-shrink: 0;
    }
}

/* ── Card grids: tighter padding on mobile so cards aren't cramped ──── */
@media (max-width: 600px) {
    /* Reduce inner card padding from ~28px to ~20px on mobile */
    .wp-block-columns .card-shadow {
        padding: 20px !important;
    }

    /* Reduce gap between vertically-stacked cards */
    .wp-block-columns {
        row-gap: 12px;
    }

    /* Section padding compression */
    .wp-block-group.alignfull[style*="padding-top:72px"] {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
}

/* ── Pricing tier card grid (3-up) ───────────────────────────────────── */
/* Same fix at the 782-1024 range so tier cards have breathing room */
@media (min-width: 782px) and (max-width: 960px) {
    .wp-block-columns.alignwide:has(> .wp-block-column:nth-child(3)):not(:has(> .wp-block-column:nth-child(4))) {
        flex-wrap: wrap !important;
        row-gap: 16px;
    }
    .wp-block-columns.alignwide:has(> .wp-block-column:nth-child(3)):not(:has(> .wp-block-column:nth-child(4))) > .wp-block-column:nth-child(1),
    .wp-block-columns.alignwide:has(> .wp-block-column:nth-child(3)):not(:has(> .wp-block-column:nth-child(4))) > .wp-block-column:nth-child(2) {
        flex-basis: calc(50% - 8px) !important;
        flex-grow: 0 !important;
    }
    /* Third card spans full width on tablet */
    .wp-block-columns.alignwide:has(> .wp-block-column:nth-child(3)):not(:has(> .wp-block-column:nth-child(4))) > .wp-block-column:nth-child(3) {
        flex-basis: 100% !important;
        flex-grow: 0 !important;
    }
}

/* ── Plan grid: featured (Most Popular) card never below others on tablet ─ */
@media (min-width: 782px) and (max-width: 960px) {
    .wp-block-columns.alignwide:has(> .wp-block-column .plan-card[id="growth"]) > .wp-block-column:nth-child(2) {
        flex-basis: 100% !important;
        order: 0;
    }
    .wp-block-columns.alignwide:has(> .wp-block-column .plan-card[id="growth"]) > .wp-block-column:nth-child(1) {
        order: 1;
    }
    .wp-block-columns.alignwide:has(> .wp-block-column .plan-card[id="growth"]) > .wp-block-column:nth-child(3) {
        order: 2;
    }
}

/* ── Quote/fix form: mobile-first form inside card ───────────────────── */
@media (max-width: 720px) {
    .wc-quote-form {
        padding: 24px !important;
    }
    .wc-quote-form .wc-options {
        gap: 6px;
    }
    .wc-quote-form .wc-options label {
        font-size: 13px;
        padding: 8px 12px;
    }
    .wc-quote-form button[type="submit"] {
        width: 100%;
        padding: 14px 24px;
    }
}

/* ── Sticky mobile CTA: extra bottom space so footer isn't hidden ────── */
@media (max-width: 782px) {
    body {
        padding-bottom: 64px; /* match sticky CTA height */
    }
    .wc-sticky-cta {
        font-size: 14px;
    }
}

/* ── WPForms-rendered forms (project-quote, website-fix-triage, sprint-scoping) ─ */
/* Make sure WPForms output also wraps cleanly at narrow widths */
@media (max-width: 720px) {
    .wpforms-container {
        padding: 0 !important;
    }
    .wpforms-container .wpforms-field-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .wpforms-container .wpforms-field-row .wpforms-field-row-block {
        padding: 0 !important;
        width: 100% !important;
        margin-bottom: 12px;
    }
    .wpforms-container .wpforms-submit {
        width: 100%;
        padding: 14px 24px !important;
    }
}

/* ── Hero right-column "Four ways" card (homepage hero only) ─────────── */
/* Hero card stacks below the H1 on tablet/mobile so neither is squished.
   The text column (first child) also needs an explicit flex-basis: 100% —
   with the default flex-basis: 0 it "fits" the current line at zero size
   per flexbox's wrap algorithm and never actually wraps to its own row,
   leaving it squeezed to 0 width instead of stacking under the card. */
@media (max-width: 1024px) {
    [class*="alignfull"][style*="background:var(--wp--preset--gradient--brand)"] .wp-block-columns {
        flex-wrap: wrap;
    }
    [class*="alignfull"][style*="background:var(--wp--preset--gradient--brand)"] .wp-block-columns > .wp-block-column:first-child {
        flex-basis: 100% !important;
    }
    [class*="alignfull"][style*="background:var(--wp--preset--gradient--brand)"] .wp-block-column[style*="flex-basis:40%"] {
        flex-basis: 100% !important;
        margin-top: 32px;
    }
}

/* ── Plans grid: anchor target spacing on mobile ─────────────────────── */
@media (max-width: 600px) {
    .plan-card[id="care"],
    .plan-card[id="growth"],
    .plan-card[id="tech-partner"] {
        scroll-margin-top: 80px;
    }
}

/* ── Honest "what's not included" block: mobile-friendly bullets ──── */
@media (max-width: 600px) {
    .wp-block-list {
        padding-left: 20px;
    }
    .wp-block-list li {
        margin-bottom: 8px;
    }
}

/* ── Trust strip: prevent client logos/chips from overflowing ────────── */
.trust-logos {
    column-gap: 16px;
    row-gap: 8px;
}
.trust-chip {
    white-space: nowrap;
}
@media (max-width: 600px) {
    .trust-chip {
        font-size: 12px !important;
    }
}

/* ── Header navigation: cleaner mobile flow ──────────────────────────── */
@media (max-width: 782px) {
    /* Reduce header padding on mobile */
    .wc-header {
        padding-left: 4vw !important;
        padding-right: 4vw !important;
    }

    /* Hide phone-pill button on small mobile (sticky CTA covers calls) */
    .wc-header__phone {
        display: none;
    }

    /* Let the primary CTA button breathe */
    .wc-header__cta .wp-block-button__link {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }
}

/* ── CTA stripe: prevent buttons cramping on tablet ──────────────────── */
@media (max-width: 600px) {
    [class*="alignfull"][style*="background:var(--wp--preset--gradient--brand)"] .wp-block-buttons[class*="justifyContent"]
        .wp-block-button {
        width: 100%;
    }
}

/* ── Sprint includes: Week 0/1/2/Hand-over cards stack cleanly ───────── */
/* These use a 4-col grid and benefit from earlier 2x2 stacking */
@media (max-width: 900px) {
    .wp-block-columns.alignwide:has(> .wp-block-column:nth-child(4) .card-shadow[style*="border:2px solid"]) {
        row-gap: 14px;
    }
}

/* ── Honesty block (sprint-outcomes, care-not-included): wider gap ───── */
@media (max-width: 600px) {
    .wp-block-columns.alignwide:has(.wp-block-group.card-shadow[style*="border-left:4px solid"]) {
        row-gap: 12px;
    }
}

/* ── Smooth-scroll behaviour for in-page anchors (#pricing, #form, etc.) ─ */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ── /contact/ hero pill row ──────────────────────────────────────────
 * Tappable contact card-pills in the hero of /contact/. Replaces the old
 * inline-paragraph row of phone/email/address. Each pill is a 56px-tall
 * tap target on mobile and reads as a button.
 */

.wc-contact-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.wc-contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    min-height: 56px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    line-height: 1.2;
}

.wc-contact-pill:hover,
.wc-contact-pill:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    text-decoration: none;
}

.wc-contact-pill:active {
    transform: translateY(1px);
}

.wc-contact-pill--call {
    background: rgba(0, 197, 255, 0.18);
    border-color: rgba(0, 197, 255, 0.55);
}

.wc-contact-pill--call:hover,
.wc-contact-pill--call:focus-visible {
    background: rgba(0, 197, 255, 0.30);
    border-color: rgba(0, 197, 255, 0.85);
}

.wc-contact-pill--static {
    cursor: default;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
}

.wc-contact-pill__icon {
    font-size: 22px;
    flex: 0 0 auto;
}

.wc-contact-pill__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wc-contact-pill__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.78;
    font-weight: 600;
}

.wc-contact-pill__value {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

@media (max-width: 600px) {
    .wc-contact-pills {
        gap: 10px;
    }
    .wc-contact-pill {
        flex: 1 1 100%;
        padding: 12px 16px;
    }
    .wc-contact-pill__value {
        font-size: 15px;
    }
}

/* ── /contact/ FAQ ──────────────────────────────────────────────────── */

.wc-contact-faq {
    max-width: 760px;
    margin: 0 auto;
}

.wc-contact-faq__item {
    border-top: 1px solid var(--wp--preset--color--border, #E5E7EB);
    padding: 18px 0;
}

.wc-contact-faq__item:last-child {
    border-bottom: 1px solid var(--wp--preset--color--border, #E5E7EB);
}

.wc-contact-faq__q {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--wp--preset--color--black, #000);
}

.wc-contact-faq__a {
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
    color: var(--wp--preset--color--mid-grey, #6B7280);
}

/* ── /about/ stats strip ─────────────────────────────────────────────
 * 4-column "by the numbers" band on a black background. Stacks to 2x2
 * on tablet, single column on small mobile.
 */

.wc-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto;
}

.wc-stat {
    text-align: center;
}

.wc-stat__value {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 8px;
    background: var(--wp--preset--gradient--brand, linear-gradient(135deg, #6C16E8, #3D1EC4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Fallback if gradient text isn't supported */
    color: #00C5FF;
}

@supports (-webkit-background-clip: text) {
    .wc-stat__value {
        background: linear-gradient(135deg, #8B3DFF 0%, #6C16E8 60%, #3D1EC4 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.wc-stat__label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}

@media (max-width: 900px) {
    .wc-stats-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }
}

@media (max-width: 480px) {
    .wc-stats-strip {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ── /about/ team grid ───────────────────────────────────────────────
 * Two-card grid: founder bio + how-we-work ethos. Stacks at <900px.
 */

.wc-team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.wc-team-card {
    background: #fff;
    border-radius: 16px;
    padding: 36px 32px;
    box-shadow: 0 6px 24px rgba(34, 0, 255, 0.06);
    border: 1px solid var(--wp--preset--color--border, #E5E7EB);
}

.wc-team-card--ethos {
    background: linear-gradient(140deg, #ffffff 0%, #f7f5ff 100%);
}

.wc-team-card__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--wp--preset--gradient--brand, linear-gradient(135deg, #6C16E8, #3D1EC4));
    color: #fff;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.wc-team-card__role {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--wp--preset--color--purple, #7C00FF);
    margin-bottom: 8px;
}

.wc-team-card__name {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.2;
    color: var(--wp--preset--color--black, #000);
}

.wc-team-card__bio {
    font-size: 15px;
    line-height: 1.6;
    color: var(--wp--preset--color--mid-grey, #6B7280);
    margin: 0 0 20px;
}

.wc-team-card__pills {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wc-team-card__pills li {
    background: var(--wp--preset--color--ui-grey, #F1F1F1);
    color: var(--wp--preset--color--dark-grey, #374151);
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
}

.wc-team-card__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wc-team-card__bullets li {
    position: relative;
    padding-left: 26px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--wp--preset--color--dark-grey, #374151);
}

.wc-team-card__bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--wp--preset--color--purple, #7C00FF);
    font-weight: 800;
    font-size: 16px;
}

@media (max-width: 900px) {
    .wc-team-grid {
        grid-template-columns: 1fr;
    }
    .wc-team-card {
        padding: 28px 24px;
    }
}

/* ── /case-studies/ snapshot chips ─────────────────────────────────────
 * Three-up "headline fact" strip that sits between the case study H3
 * and the body. Each chip = bold value + small uppercase label.
 */

.wc-case-stats {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.wc-case-stats li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--wp--preset--color--soft-grey, #F5F5F5);
    border: 1px solid var(--wp--preset--color--border, #E5E7EB);
    border-radius:12px;
    line-height: 1.2;
}

.wc-case-stats__value {
    font-size: 16px;
    font-weight: 700;
    color: var(--wp--preset--color--purple, #7C00FF);
    letter-spacing: -0.01em;
}

.wc-case-stats__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--wp--preset--color--mid-grey, #6B7280);
}

@media (max-width: 600px) {
    .wc-case-stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .wc-case-stats li {
        padding: 10px 12px;
    }
}

/* ── Homepage testimonial pull-quote ──────────────────────────────────
 * Single large quote on a black band, between the case-study card and
 * the why-us pattern. Big quote-mark glyph, gradient avatar, restrained
 * attribution.
 */

.wc-testimonial {
    max-width: 880px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.wc-testimonial__mark {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 120px;
    line-height: 0.6;
    color: var(--wp--preset--color--purple, #7C00FF);
    opacity: 0.9;
    margin-bottom: 8px;
    user-select: none;
}

.wc-testimonial__quote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.45;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.005em;
}

.wc-testimonial__cite {
    margin-top: 36px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-style: normal;
}

.wc-testimonial__avatar {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8B3DFF 0%, #6C16E8 60%, #3D1EC4 100%);
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wc-testimonial__attr {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wc-testimonial__name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.wc-testimonial__role {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.66);
    line-height: 1.35;
}

@media (max-width: 600px) {
    .wc-testimonial__mark {
        font-size: 84px;
    }
    .wc-testimonial__quote {
        font-size: 19px;
        line-height: 1.5;
    }
    .wc-testimonial__cite {
        margin-top: 28px;
    }
}

/* ── Homepage 3-up testimonials grid ──────────────────────────────────
 * 3-column vouch grid on a black band. Replaces the single-quote
 * testimonial-quote pattern on the homepage where richer social proof
 * matters most. Stacks 1-up on small mobile.
 */

.wc-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.wc-vouch {
    margin: 0;
    padding: 32px 28px 28px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wc-vouch__mark {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 56px;
    line-height: 0.6;
    color: var(--wp--preset--color--purple, #7C00FF);
    user-select: none;
    margin-bottom: -8px;
}

/* Star row on Google-sourced vouches. Sits between the quote mark and the
   quote itself; aria-label on the element carries the rating for screen
   readers, so the glyphs are decorative repetition only. */
.wc-vouch__stars {
    color: #FFC107;
    font-size: 15px;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 10px;
}

.wc-vouch__quote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    flex: 1;
}

.wc-vouch__cite {
    display: flex;
    align-items: center;
    gap: 14px;
    font-style: normal;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 18px;
    margin-top: 4px;
}

.wc-vouch__avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6C16E8 0%, #3D1EC4 100%);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wc-vouch__avatar--blue {
    background: linear-gradient(135deg, #3D1EC4 0%, #8B3DFF 100%);
}

.wc-vouch__avatar--aqua {
    background: linear-gradient(135deg, #8B3DFF 0%, #6C16E8 100%);
}

.wc-vouch__attr {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
}

.wc-vouch__name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.wc-vouch__role {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.70);
}

.wc-vouch__context {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.50);
    margin-top: 4px;
}

@media (max-width: 1000px) {
    .wc-testimonial-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .wc-vouch {
        padding: 28px 24px 24px;
    }
    .wc-vouch__quote {
        font-size: 16px;
    }
}

/* ── Single blog post featured-image slot ────────────────────────────
 * The wrapper sits between the hero and body. When the post has a real
 * featured image, lift it -48px so it bridges hero→body. When the post
 * has no image, the wrapper is empty and we want zero space (the hero's
 * bottom padding + body's top padding handle the rhythm).
 */

.wc-post-feature-slot {
    margin-top: 0;
}

.wc-post-feature-slot:has(img) {
    margin-top: -48px;
}

/* Fallback for browsers without :has() — use empty selector. Empty
 * wrapper has no first-child, so this resets margin to 0 there. */
.wc-post-feature-slot:empty {
    margin: 0;
    padding: 0;
}

/* ── Single blog post body typography ────────────────────────────────
 * The single.html template wraps post-content in .wc-post-content with
 * contentSize:760px, but WP's layout serialisation doesn't always honour
 * the inner contentSize. Force it here, plus give post body proper
 * paragraph/heading rhythm.
 */

.wc-post-content {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.wc-post-content > * + * {
    margin-top: 1.4em;
}

.wc-post-content > h2,
.wc-post-content > h3 {
    margin-top: 1.8em;
    margin-bottom: 0.4em;
    font-weight: 700;
    line-height: 1.25;
}

.wc-post-content > h2 {
    font-size: clamp(22px, 2.6vw, 28px);
}

.wc-post-content > h3 {
    font-size: clamp(18px, 2.1vw, 22px);
}

.wc-post-content > p,
.wc-post-content > ul,
.wc-post-content > ol {
    font-size: 17px;
    line-height: 1.7;
    color: var(--wp--preset--color--dark-grey, #374151);
}

.wc-post-content > ul,
.wc-post-content > ol {
    padding-left: 1.4em;
}

.wc-post-content > ul li + li,
.wc-post-content > ol li + li {
    margin-top: 6px;
}

.wc-post-content > blockquote {
    border-left: 3px solid var(--wp--preset--color--purple, #7C00FF);
    padding-left: 20px;
    margin-left: 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--wp--preset--color--mid-grey, #6B7280);
    font-style: italic;
}

.wc-post-content > pre,
.wc-post-content > .wp-block-code {
    background: var(--wp--preset--color--soft-grey, #F5F5F5);
    border: 1px solid var(--wp--preset--color--border, #E5E7EB);
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.55;
    overflow-x: auto;
}

/* ── /agency-partners/ white-label promise grid ──────────────────────
 * 2x2 trust card grid on a black band beneath the agency body content.
 * Each card addresses a specific agency-owner fear or objection.
 */

.wc-whitelabel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 980px;
    margin: 0 auto;
}

.wc-whitelabel-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wc-whitelabel-card__icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 4px;
}

.wc-whitelabel-card__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    line-height: 1.3;
}

.wc-whitelabel-card__body {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
}

@media (max-width: 720px) {
    .wc-whitelabel-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .wc-whitelabel-card {
        padding: 22px 20px;
    }
}

/* ── /services/performance-optimisation/ before/after proof cards ──── */

.wc-speed-proof-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 880px;
    margin: 0 auto;
}

.wc-speed-proof {
    background: #fff;
    border: 1px solid var(--wp--preset--color--border, #E5E7EB);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

.wc-speed-proof__label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--wp--preset--color--purple, #7C00FF);
    margin-bottom: 14px;
}

.wc-speed-proof__row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wc-speed-proof__before,
.wc-speed-proof__after {
    flex: 1;
    text-align: center;
    padding: 14px 12px;
    border-radius:12px;
    background: var(--wp--preset--color--soft-grey, #F5F5F5);
    border: 1px solid var(--wp--preset--color--border, #E5E7EB);
}

.wc-speed-proof__score {
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.wc-speed-proof__score--bad {
    color: #dc2626;
}

.wc-speed-proof__score--med {
    color: #F5A623;
}

.wc-speed-proof__score--good {
    color: #15803d;
}

.wc-speed-proof__metric {
    font-size: 12px;
    color: var(--wp--preset--color--dark-grey, #374151);
    font-weight: 600;
    margin-bottom: 4px;
}

.wc-speed-proof__caption {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--mid-grey, #6B7280);
    font-weight: 600;
}

.wc-speed-proof__arrow {
    font-size: 28px;
    color: var(--wp--preset--color--purple, #7C00FF);
    font-weight: 800;
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .wc-speed-proof__row {
        flex-direction: column;
        gap: 10px;
    }
    .wc-speed-proof__arrow {
        transform: rotate(90deg);
        font-size: 22px;
    }
    .wc-speed-proof__score {
        font-size: 38px;
    }
}

/* ── End of WC responsive overrides ──────────────────────────────────── */


/* Icon system — consistent stroke SVGs replacing emoji glyphs.
   Aqua on dark sections (hero, Standard); add wc-icon--purple on light. */
.wc-icon {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--wp--preset--color--aqua, #00C5FF);
}
.wc-icon svg { width: 100%; height: 100%; }
.wc-icon--purple { color: var(--wp--preset--color--purple, #7C00FF); }

/* Card icons — replaces the emoji that were previously used as card glyphs.
   Emoji render differently on every OS (and as flat colour blocks on some
   Android/Windows builds), which broke the visual consistency of every card
   grid on the site. These inherit the theme stroke style instead. Sizing comes
   from an inline width/height matched to the emoji font-size they replaced. */
.wc-icon--card {
  display: inline-flex;
  color: var(--wp--preset--color--purple, #7C00FF);
  margin-bottom: 2px;
}

.card-shadow:hover .wc-icon--card { color: var(--wp--preset--color--purple, #7C00FF); }

/* Feature check-lists — purple stroke check bullet replacing inline emoji.
   Applied to .wc-feature-list groups; styles direct <p> children only. */
.wc-feature-list > p {
  position: relative;
  padding-left: 30px;
  margin: 0;
}
.wc-feature-list > p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 19px;
  height: 19px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C00FF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Icon variants + inline check + star rating */
.wc-icon--muted { color: var(--wp--preset--color--mid-grey, #6B7280); }
.wc-check-inline { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.15em; }

/* Inline icon for location/origin lines. Replaces the AU flag emoji, which
   renders as the bare letters "AU" on Windows and as a different shape on
   every platform — unreliable for a trust signal that sits in the header,
   footer and every CTA band. */
.wc-inline-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  margin-right: 1px;
  opacity: 0.85;
}
.wc-inline-icon svg { width: 100%; height: 100%; }
.wc-check-inline svg { width: 100%; height: 100%; }
.wc-stars { display: inline-flex; gap: 3px; color: #F5A623; line-height: 1; }
.wc-stars svg { width: 18px; height: 18px; }

/* Inline x (muted) + clean bullet lists for semantic yes/no lists */
.wc-x-inline { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.15em; color: var(--wp--preset--color--mid-grey, #6B7280); }
.wc-x-inline svg { width: 100%; height: 100%; }
.wc-clean-list { list-style: none; padding-left: 0; }
.wc-clean-list li { display: flex; align-items: flex-start; gap: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   INTERACTION POLISH — tactile, restrained micro-interactions.
   All movement is guarded by prefers-reduced-motion (bottom of block).
   Composes with existing .card-shadow hover-lift and :focus-visible rings.
   ══════════════════════════════════════════════════════════════════════════ */

/* Buttons — lift on hover, press on active. Inline styles set bg/radius/
   padding; transform + box-shadow are free to add here without conflict. */
.wp-block-button__link {
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  will-change: transform;
}
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(124, 0, 255, 0.14);
}
/* Low-emphasis buttons get a neutral, softer shadow */
.is-style-outline .wp-block-button__link:hover,
.is-style-ghost .wp-block-button__link:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Pricing / persona cards — subtle lift (they read as interactive) */
.plan-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.10), 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* Icons nudge up + brighten when their card is hovered */
.wc-icon { transition: transform 0.2s ease, color 0.2s ease; }
.card-shadow:hover .wc-icon,
.frosted-surface:hover .wc-icon {
  transform: translateY(-2px) scale(1.06);
}

/* Content links (prose only) — animated underline, skips buttons/nav/eyebrows */
.work-content a:not(.wp-block-button__link),
.wp-block-post-content a:not(.wp-block-button__link) {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

/* Reduced motion — keep colour/shadow feedback, remove all movement */
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link,
  .plan-card,
  .wc-icon {
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
    will-change: auto;
  }
  .wp-block-button__link:hover,
  .wp-block-button__link:active,
  .plan-card:hover,
  .card-shadow:hover .wc-icon,
  .frosted-surface:hover .wc-icon {
    transform: none !important;
  }
}

/* ══ WPForms brand styling ═══════════════════════════════════════════════
   The project-quote / website-fix / sprint forms are WPForms-rendered and
   default to WPForms' blue button + plain fields. Brand them to match the
   theme (purple pill submit, rounded fields, brand focus ring).           */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="url"],
.wpforms-form input[type="number"],
.wpforms-form textarea,
.wpforms-form select {
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 1rem !important;
  color: #111827 !important;
  background: #ffffff !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  box-shadow: none !important;
}
.wpforms-form textarea { min-height: 130px; }
.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
  border-color: var(--wp--preset--color--purple, #7C00FF) !important;
  box-shadow: var(--focus-ring) !important;
  outline: none !important;
}
/* Purple accent for checkboxes / radios */
.wpforms-form input[type="checkbox"],
.wpforms-form input[type="radio"] {
  accent-color: var(--wp--preset--color--purple, #7C00FF);
  width: 18px;
  height: 18px;
}
/* Submit — brand purple pill with hover lift */
.wpforms-form .wpforms-submit,
.wpforms-container .wpforms-submit {
  background-color: var(--wp--preset--color--purple, #7C00FF) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 100px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 30px !important;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}
.wpforms-form .wpforms-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.wpforms-form .wpforms-submit:active { transform: translateY(0); }
.wpforms-form .wpforms-required-label,
.wpforms-form .wpforms-error { color: #dc2626 !important; }
@media (prefers-reduced-motion: reduce) {
  .wpforms-form .wpforms-submit:hover { transform: none; }
}

/* ══ FAQ accordion ([wc_faq]) ════════════════════════════════════════════ */
.wc-faq { display: flex; flex-direction: column; gap: 12px; }
.wc-faq__item {
  background: #ffffff;
  border: 1px solid var(--wp--preset--color--border, #E5E7EB);
  border-radius: 12px;
  padding: 4px 22px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.wc-faq__item[open] {
  border-color: var(--wp--preset--color--purple, #7C00FF);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.wc-faq__q {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  color: #000000;
  padding: 16px 34px 16px 0;
  position: relative;
  transition: color 0.15s ease;
}
.wc-faq__q::-webkit-details-marker { display: none; }
.wc-faq__q::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--wp--preset--color--purple, #7C00FF);
  border-bottom: 2px solid var(--wp--preset--color--purple, #7C00FF);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.wc-faq__item[open] .wc-faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.wc-faq__q:hover { color: var(--wp--preset--color--purple, #7C00FF); }
.wc-faq__a {
  font-size: 15px;
  line-height: 1.65;
  color: var(--wp--preset--color--mid-grey, #6B7280);
  padding: 0 0 18px;
}
.wc-faq__a p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .wc-faq__item, .wc-faq__q, .wc-faq__q::after { transition: none; }
}

/* ══ FAQ accordion — core wp:details blocks ══════════════════════════════
   The homepage FAQ ships via [wc_faq] and gets .wc-faq styling above. Eight
   other pages (agency-partners, care-plans, white-label, fractional-cto,
   ai-for-business, sprint, website-fix, system-development) build the same
   accordion out of core wp:details blocks instead, which land as
   .wp-block-details — a class the theme never styled, so those FAQs rendered
   with the raw browser disclosure triangle and no spacing between items.
   Mirror the .wc-faq treatment so every FAQ on the site reads identically.
   Block-editor inline styles (border/radius/background/padding) are authored
   per-block in content, so match on the properties they don't set and let
   the inline ones win where they exist.                                     */
.wp-block-details {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Sibling accordion items sit flush without this — core sets no gap. */
.wp-block-details + .wp-block-details { margin-top: 12px; }

.wp-block-details[open] {
  border-color: var(--wp--preset--color--purple, #7C00FF);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.wp-block-details > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  color: #000000;
  padding-right: 34px;
  position: relative;
  transition: color 0.15s ease;
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::marker { content: ""; }
/* Summary text is wrapped in <strong> in content; the weight is on summary. */
.wp-block-details > summary strong { font-weight: inherit; }

.wp-block-details > summary::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--wp--preset--color--purple, #7C00FF);
  border-bottom: 2px solid var(--wp--preset--color--purple, #7C00FF);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.wp-block-details[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
.wp-block-details > summary:hover { color: var(--wp--preset--color--purple, #7C00FF); }
.wp-block-details > summary:focus-visible {
  outline: 2px solid var(--wp--preset--color--purple, #7C00FF);
  outline-offset: 3px;
  border-radius: 4px;
}

.wp-block-details > :not(summary) {
  font-size: 15px;
  line-height: 1.65;
  color: var(--wp--preset--color--mid-grey, #6B7280);
}
.wp-block-details > summary + * { margin-top: 12px; }
.wp-block-details > :not(summary):last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .wp-block-details,
  .wp-block-details > summary,
  .wp-block-details > summary::after { transition: none; }
}

/* ── Accessibility: honour reduced-motion globally ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print: quotes and care plans get printed for approvers ──────────────── */
@media print {
  .wc-header, .wc-trust-strip, footer, .wc-service-next-step,
  .wc-hq-embed, .wp-block-buttons, .wc-sticky-cta, #wpadminbar { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  main { padding: 0 !important; }
  .alignfull { padding: 12px 0 !important; background: #fff !important; color: #000 !important; }
  .card-shadow { box-shadow: none !important; border: 1px solid #ccc !important; }
  a::after { content: ""; } /* no URL spam */

  /* Scroll-reveal targets start at opacity:0 and are only un-hidden when the
     IntersectionObserver in main.js fires. Printing (and PDF export) never
     scrolls, so any section still below the fold printed blank — whole bands
     of copy vanished from the printed page. Force the resting state. */
  .wc-reveal { opacity: 1 !important; transform: none !important; }

  /* Accordion answers are collapsed by default; print the questions AND the
     answers so a printed FAQ is actually readable. */
  details > *:not(summary) { display: revert !important; }
  details::details-content { content-visibility: visible !important; }
  .wp-block-details > summary::after, .wc-faq__q::after { display: none !important; }

  /* Dark bands are flattened to a white background above, but any text that
     carries its own light colour (white cards on the navy white-label band,
     hero copy, footer-style callouts) then printed white-on-white and
     disappeared entirely — the section looked like bare icons with no words.
     Force ink-on-paper for everything in the printed content. */
  main, main *, .alignfull, .alignfull * { color: #000 !important; }
  /* Translucent-white surfaces go invisible on paper; give them a hairline. */
  [class*="__card"], [class*="-card"], .wc-whitelabel-card {
    background: transparent !important;
    border-color: #ccc !important;
  }
}

/* ══ Work showcase: browser-frame screenshot cards ═══════════════════════
   Real client-site screenshots on the homepage. The frame is pure CSS —
   a title bar with three dots over the image — so screenshots read as
   live websites, not decorative photos. Cards reuse .card-shadow so the
   existing scroll-reveal JS picks them up automatically.               */
.wc-browser-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border, #E5E7EB);
  background: #fff;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.wc-browser-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(18, 18, 46, 0.14);
}
.wc-browser-frame__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #F1F2F7;
  border-bottom: 1px solid var(--wp--preset--color--border, #E5E7EB);
}
.wc-browser-frame__bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D6D8E1;
}
.wc-browser-frame__bar span:nth-child(1) { background: #FC5F57; }
.wc-browser-frame__bar span:nth-child(2) { background: #FDBC2E; }
.wc-browser-frame__bar span:nth-child(3) { background: #28C840; }
.wc-browser-frame__url {
  margin-left: 10px;
  font-size: 12px;
  line-height: 1;
  color: var(--wp--preset--color--mid-grey, #6B7280);
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-browser-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

/* Showcase cards without a browser-frame wrapper (e.g. phone screenshots)
   still need the same rendered height as their row siblings, or the card
   stretches to match and leaves dead space below the shorter one. */
.wp-block-column > .card-shadow .wp-block-image img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-radius: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .wc-browser-frame { transition: none; }
  .wc-browser-frame:hover { transform: none; }
}

/* ── Focus visibility: one ring, everywhere interactive ──────────────────── */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.wc-header .wp-block-navigation-item > a:focus-visible,
.wc-media-placeholder__link:focus-visible,
a.wc-service-next-step__button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Card rows: flush bottoms ────────────────────────────────────────────── */
.wp-block-column > .card-shadow { height: 100%; box-sizing: border-box; }

/* ── Interactive tiles: perceptible hover, no fake affordance on static cards ── */
.wc-media-placeholder__link .wc-media-placeholder,
.wp-block-post-featured-image a img {
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.wc-media-placeholder__link:hover .wc-media-placeholder { filter: brightness(1.08); }
.wp-block-post-featured-image a:hover img { filter: brightness(1.04); }
.wp-block-column > .card-shadow:has(a):hover {
  box-shadow: var(--shadow-card-hover);
  transition: box-shadow 0.18s ease;
}

/* ══ MOTION (ported from the TrueWave build) ═══════════════════════════════
   Load-time hero choreography + scroll-reveal + marquee. Everything lives
   inside no-preference so reduced-motion users get a fully static page.    */
@media (prefers-reduced-motion: no-preference) {
  @keyframes wc-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  /* Gradient-hero entrance: children rise in sequence */
  .wp-block-group.alignfull[style*="gradient--brand"] > .wp-block-group.alignwide > * {
    animation: wc-fade-up .65s cubic-bezier(.22,.61,.36,1) both;
  }
  .wp-block-group.alignfull[style*="gradient--brand"] > .wp-block-group.alignwide > :nth-child(2) { animation-delay: .08s; }
  .wp-block-group.alignfull[style*="gradient--brand"] > .wp-block-group.alignwide > :nth-child(3) { animation-delay: .16s; }
  .wp-block-group.alignfull[style*="gradient--brand"] > .wp-block-group.alignwide > :nth-child(4) { animation-delay: .24s; }
  .wp-block-group.alignfull[style*="gradient--brand"] > .wp-block-group.alignwide > :nth-child(5) { animation-delay: .32s; }
  /* homepage hero side card (second alignwide child column) */
  .wp-block-group.alignfull[style*="gradient--brand"] .wc-hero-card { animation: wc-fade-up .7s .28s cubic-bezier(.22,.61,.36,1) both; }

  /* Scroll reveal: class applied by JS only, so no-JS never hides content */
  .wc-reveal { opacity: 0; transform: translateY(16px);
    transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--wc-reveal-i, 0) * 70ms); }
  .wc-reveal.is-in { opacity: 1; transform: none; }

  /* Trusted-by marquee */
  .wc-marquee__track { animation: wc-marquee 42s linear infinite; }
  .wc-marquee:hover .wc-marquee__track { animation-play-state: paused; }
  @keyframes wc-marquee { to { transform: translateX(-50%); } }
}
.wc-marquee { overflow: hidden; }
.wc-marquee__track { display: flex; align-items: center; gap: 12px; width: max-content; }
@media (prefers-reduced-motion: reduce) {
  /* No animation, so the track wraps into a static grid. The duplicate row
     exists only to make the scroll loop seamless — with the animation off it
     is pure repetition, so it must be hidden. aria-hidden sits on the ROW,
     not the track; targeting the track never matched and every logo rendered
     twice. */
  .wc-marquee__track { flex-wrap: wrap; width: auto; justify-content: center; }
  .wc-marquee__row[aria-hidden="true"] { display: none; }
  .wc-marquee__row { flex-wrap: wrap; justify-content: center; row-gap: 20px; }
}

/* ══ PRICE SYSTEM: one treatment everywhere ════════════════════════════════ */
.wc-price {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wc-marquee__row { display: flex; align-items: center; gap: 40px; padding-right: 40px; }

/* ── Breadcrumbs: schema-only ──────────────────────────────────────────────
   Rank Math renders a lone "Web Champion" crumb in a floating white strip
   above every hero — reads as unfinished chrome on a 2-level site. Hide the
   visible trail; the BreadcrumbList JSON-LD Google reads is emitted
   separately and is unaffected. Delete this block to bring the trail back. */
.wc-breadcrumbs { display: none; }

/* ══ HERO BANDS: one alignment, ambient depth ══════════════════════════════
   Scoped to gradient bands that contain the page H1 (:has), so the centered
   cta-stripe band is untouched. 10 DB-built pages shipped heroes with a left
   H1 fighting centered eyebrows/paragraphs — unify to the left-aligned hero
   the templates and homepage already use.                                  */
.wp-block-group.alignfull[style*="gradient--brand"]:has(h1) .has-text-align-center {
  text-align: left;
}
.wp-block-group.alignfull[style*="gradient--brand"]:has(h1) .wp-block-buttons.is-content-justification-center,
.wp-block-group.alignfull[style*="gradient--brand"]:has(h1) .wp-block-group.is-content-justification-center {
  justify-content: flex-start;
}
/* Keep hero copy at a readable measure once left-aligned */
.wp-block-group.alignfull[style*="gradient--brand"]:has(h1) h1 { max-width: 21ch; margin-inline: 0 auto; }
.wp-block-group.alignfull[style*="gradient--brand"]:has(h1) h1 + p,
.wp-block-group.alignfull[style*="gradient--brand"]:has(h1) p.has-m-font-size { max-width: 58ch; margin-inline: 0 auto; }
/* Constrained layout centres narrower blocks with !important — pin every
   hero child to the shared left edge with the same weight so eyebrow, H1,
   copy and buttons align at every viewport width. */
.wp-block-group.alignfull[style*="gradient--brand"]:has(h1) .is-layout-constrained > :where(:not(.alignfull)) {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Ambient background: two soft light orbs drifting behind hero content.
   Pure CSS, sits under the text (z-index), static under reduced motion.   */
.wp-block-group.alignfull[style*="gradient--brand"]:has(h1) {
  position: relative;
  overflow: hidden;
}
.wp-block-group.alignfull[style*="gradient--brand"]:has(h1) > * {
  position: relative;
  z-index: 1;
}
.wp-block-group.alignfull[style*="gradient--brand"]:has(h1)::before,
.wp-block-group.alignfull[style*="gradient--brand"]:has(h1)::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
}
.wp-block-group.alignfull[style*="gradient--brand"]:has(h1)::before {
  width: 44vw; height: 44vw; max-width: 640px; max-height: 640px;
  right: -12vw; top: -18vw;
  background: radial-gradient(circle, rgba(0,197,255,0.28), rgba(0,197,255,0) 65%);
}
.wp-block-group.alignfull[style*="gradient--brand"]:has(h1)::after {
  width: 36vw; height: 36vw; max-width: 520px; max-height: 520px;
  left: -10vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(255,255,255,0.14), rgba(255,255,255,0) 65%);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes wc-orb-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-4vw,3vw) scale(1.08); } }
  @keyframes wc-orb-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(3vw,-2vw) scale(1.05); } }
  .wp-block-group.alignfull[style*="gradient--brand"]:has(h1)::before { animation: wc-orb-a 14s ease-in-out infinite; }
  .wp-block-group.alignfull[style*="gradient--brand"]:has(h1)::after  { animation: wc-orb-b 18s ease-in-out infinite; }
}