/* ═══════════ Service pages — photo hero with centred text ═══════════
   Applies to heroes marked .svc-hero (the capability pages whose hero is text only).
   The photo is a CMS field (hero.bg) on each page; a dark wash keeps the text readable. */

.inner main > .svc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(82vh, 760px);
  background: var(--bg-dark) !important;
  color: rgba(255, 255, 255, .86);
  text-align: center;
}
.svc-hero__bg { position: absolute; inset: 0; z-index: -1; }
.svc-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(14, 12, 11, .55) 0%, rgba(14, 12, 11, .78) 100%),
    linear-gradient(180deg, rgba(14, 12, 11, .35) 0%, rgba(14, 12, 11, .1) 40%, rgba(14, 12, 11, .45) 100%);
}

/* centred layout */
.svc-hero > :not(.svc-hero__bg) { width: 100%; }
.svc-hero :is(h1, p) { margin-left: auto !important; margin-right: auto !important; }
.svc-hero :is([class*="__hl"], .hero-hl, .hero-big, .hero-statement) { max-width: 920px; margin-left: auto; margin-right: auto; }
.svc-hero :is([class*="__body"], .hero-sub) { max-width: 680px; }
.svc-hero :is(.eyebrow, .hero-eyebrow) { justify-content: center; }
.svc-hero :is([class*="__platforms"], [class*="__tags"], [class*="__pillars"], [class*="__action"], [class*="hero-strip"],
  .hero-cta-row, .hero-stats, .hero-statement) { justify-content: center; margin-left: auto; margin-right: auto; }
.svc-hero .hero-statement { text-align: center; }

/* light text on the photo */
.svc-hero :is(h1, h2, [class*="__hl"], .hero-hl, .hero-big, .hero-statement, .hero-statement-left, .hs-n) { color: #fff !important; }
.svc-hero :is(h1, h2) em { color: var(--color-tertiary) !important; }
.svc-hero :is(p, [class*="__body"], .hero-sub, .hs-l, .hero-cta-note) { color: rgba(255, 255, 255, .86) !important; }
.svc-hero :is(.eyebrow, .hero-eyebrow) { color: var(--color-tertiary) !important; }
.svc-hero :is(.eyebrow, .hero-eyebrow)::before { background-color: var(--color-tertiary) !important; }
.svc-hero :is([class*="__tag"], [class*="platform"], [class*="__pillar"], [class*="hero-strip"] *) { color: rgba(255, 255, 255, .82) !important; }
.svc-hero [class*="__sep"] { color: rgba(255, 255, 255, .4) !important; background-color: rgba(255, 255, 255, .4) !important; }
.svc-hero a:not(.btn):not(.btn-dark):not(.btn-primary) { color: #fff !important; border-color: rgba(255, 255, 255, .7) !important; }
.svc-hero a:not(.btn):not(.btn-dark):not(.btn-primary)::after { background-color: #fff !important; }
.svc-hero .btn-dark { background: #fff !important; color: var(--text-primary) !important; border-color: #fff !important; }
.svc-hero .btn-dark:hover { background: var(--color-tertiary) !important; border-color: var(--color-tertiary) !important; }
.svc-hero * { border-color: rgba(255, 255, 255, .18); }

/* accents & small text on the photo */
.svc-hero em { color: var(--color-tertiary) !important; }
.svc-hero :is(.hs-n, .hs-n *) { color: #fff !important; }
.svc-hero .hs-n :is(em, span, sup, small) { color: var(--color-tertiary) !important; }
.svc-hero :is(p, [class*="__body"], .hero-sub) :is(span, strong, b) { color: #fff !important; opacity: 1 !important; }
/* strips / panels inside the hero become frosted glass instead of white blocks */
.svc-hero [class*="hero-strip"] {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px);
}
.svc-hero [class*="strip-cell"] { background: transparent !important; border-color: rgba(255, 255, 255, .16) !important; }
.svc-hero [class*="strip-tag"] { color: var(--color-tertiary) !important; }
.svc-hero [class*="strip-desc"] { color: rgba(255, 255, 255, .82) !important; }

/* Heroes that had a mockup / card on the right (WordPress, Shopify, Webflow, Framer, Fractional CMO…):
   one centred column over the photo. The right-hand visual stays in the page code, hidden —
   delete these two rules to bring it back. */
.svc-hero--split :is([class*="__grid"], .hero-inner) { display: block !important; }
.svc-hero--split :is([class*="__grid"] > [class*="__preview"], .hero-inner > :not(:first-child)) { display: none !important; }
.svc-hero--split :is([class*="__content"], .hero-inner > :first-child) { max-width: 920px; margin: 0 auto; }

/* Who-we-serve pages (Businesses, Agencies) and Contact use the same photo hero */
.svc-hero [class*="__bg-word"] { display: none !important; }
.svc-hero :is(.btn-primary, .btn-dark) { background: #fff !important; color: var(--text-primary) !important; border-color: #fff !important; }
.svc-hero :is(.btn-primary, .btn-dark):hover { background: var(--color-tertiary) !important; border-color: var(--color-tertiary) !important; color: var(--text-primary) !important; }
.svc-hero :is(.page-eyebrow) { color: var(--color-tertiary) !important; }
.svc-hero :is(.page-hl) { color: #fff !important; margin-left: auto; margin-right: auto; }
.svc-hero [class*="hero-pillar"] { color: rgba(255, 255, 255, .84) !important; }
.svc-hero [class*="hero-pillar"] :is(h2, h3, h4, strong, [class*="__title"], [class*="__label"]) { color: #fff !important; }
.svc-hero [class*="__pillars"] { text-align: left; max-width: 1100px; margin-left: auto; margin-right: auto; }
.svc-hero [class*="__pillars"] {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  backdrop-filter: blur(6px);
}
.svc-hero [class*="__pillars"] > * { background: transparent !important; border-color: rgba(255, 255, 255, .16) !important; }
.svc-hero :is(.btn-primary, .btn-dark) * { color: inherit !important; }
/* Contact: a shorter hero so the form stays close */
.inner main > .svc-hero--compact { min-height: min(58vh, 540px); }