/*
Theme Name: E11 Group
Theme URI: https://e11group.com
Author: E11 Group
Author URI: https://e11group.com
Description: Child theme of Launchpad for E11 Group — a mission-driven digital agency serving nonprofits, higher ed, and do-good organizations. Dark, bold, warm palette built around brand red-orange with warm brown neutrals.
Template: launchpad
Tags: block-theme, full-site-editing, child-theme
Version: 0.4.11
*/

/* ==========================================================================
   E11 Group — Child Theme Styles
   Inherits the parent theme's core styles. Adds header, footer, navigation,
   and custom component styles.
   ========================================================================== */

/* ── Body / page background ──
   The dark page background and default text color are set in theme.json
   (styles.color.background / styles.color.text) so they apply to BOTH the
   front end and the block editor iframe. Only set overflow clipping here —
   it's purely a runtime layout concern and doesn't belong in theme.json. */
html, body {
  overflow-x: clip;
  /* DM Sans is a dual-axis variable font (opsz 9-40, wght 100-1000). The
     9pt optical size has thicker strokes tuned for small text and is the
     default. Turning on optical sizing lets the browser pick the right
     cut for the current font-size so body copy renders at the proper,
     lighter weight instead of the micro-text-optimized default. */
  font-optical-sizing: auto;
  /* Force grayscale antialiasing on macOS. Without these, Chrome and
     Safari fall back to subpixel antialiasing which visually thickens
     strokes by ~10-15% — the single biggest reason a font can look
     "heavier" in one browser context than another at the same weight.
     The design foundation uses grayscale; match it here so the WP site
     and the design render text at identical apparent weight. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Global keyboard focus ring ──
   Every interactive element must have a visible focus indicator for
   keyboard users. `:focus-visible` only fires on keyboard focus (not
   click), so it doesn't add visual noise for mouse users. This is the
   accessibility floor — individual components may provide richer focus
   treatments on top, but no interactive element is ever un-styled here. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--wp--preset--color--primary-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Site Header (transparent → dark on scroll) ── */
.site-header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  padding: 0 var(--wp--preset--spacing--medium);
  /* Explicit `backdrop-filter: none` so the transition to `blur(12px)`
     on .scrolled actually interpolates — Chrome won't animate from
     `initial`/`unset` to `blur(X)`, and the attempted transition
     silently breaks the sibling background-color transition too. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* When the WP admin bar is showing, push our fixed header below it */
body.admin-bar .site-header.site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header.site-header { top: 46px; }
}
/* Double-selector for specificity (0,3,0) so this unambiguously beats
   the base `.site-header.site-header { background-color: transparent }`
   rule regardless of source order between the two stylesheets that end
   up emitting header rules (style.css + theme.json-generated CSS). */
/* When the mobile nav is open, strip backdrop-filter from the header.
   `backdrop-filter` creates a containing block for position:fixed descendants
   (per CSS Containment spec), which traps the mobile nav — a position:fixed
   child of .site-header — inside the header's rect instead of covering the
   whole viewport. Dropping the filter restores the viewport as the
   containing block so the nav overlays the page correctly regardless of
   scroll position. */
.site-header.site-header:has(.site-nav.mobile-open) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.site-header.scrolled {
  background-color: rgba(26, 14, 8, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.site-header .logo { display: inline-flex; }
.site-header .logo img { height: 28px; width: auto; display: block; }

/* ── Desktop Navigation ── */
.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav a:not(.nav-cta) {
  color: var(--wp--preset--color--neutral-light);
  font-family: var(--wp--preset--font-family--primary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0.01em;
}
.site-nav a:not(.nav-cta):hover { color: var(--wp--preset--color--primary-light); }
.site-nav a.nav-active { color: var(--wp--preset--color--primary); }
/* .nav-cta is a raw <a> with the `wp-element-button` class. Its base bg
   comes from theme.json `styles.elements.button`, but the theme.json-
   generated CSS uses `:where()` which has zero specificity — any other
   rule that touches `color` on an `a` (including section style link
   rules) wins, so the text disappears into the red background. We
   restate color + background here with real specificity so the nav CTA
   stays correct regardless of what section it's drawn over. Nav-specific
   size tweaks (smaller font/padding than the default button) also live
   here because the header needs a tighter button than the page content. */
/* Use `a.nav-cta` so specificity (0,2,1) matches `.site-nav a.nav-active`
   (0,2,1) and this rule wins by source order, even when the current page
   URL happens to match /pricing/ and e11.js adds nav-active on top of
   nav-cta. Without this the label would paint primary-red on a primary-red
   background, making the CTA look empty. */
.site-nav a.nav-cta {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  color: var(--wp--preset--color--base);
  background-color: var(--wp--preset--color--primary);
}
.site-nav a.nav-cta:hover,
.site-nav a.nav-cta:focus-visible {
  color: var(--wp--preset--color--base);
  background-color: var(--wp--preset--color--primary-dark);
}

/* ── Nav Dropdowns ── */
.nav-dropdown { position: relative; }
.nav-dropdown > a { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.nav-chevron { transition: transform 0.2s; }
.nav-dropdown.open .nav-chevron { transform: rotate(180deg); }
/* Plus/minus toggle — mobile only. Hidden on desktop where the chevron reads. */
.nav-plus { display: none; }

/* ── Mega Menu (Services) ── */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 720px;
  background: rgba(26, 14, 8, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  pointer-events: none;
}
.nav-dropdown.open .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.mega-menu-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  gap: 0 1.25rem;
}
.mega-col {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
}
.mega-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--primary);
  padding-bottom: 0.75rem;
}
.mega-item {
  display: flex;
  gap: 0.625rem;
  padding: 0.5rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
  align-self: start;
}
.mega-item:hover { background: rgba(255, 255, 255, 0.05); }
.mega-item img { width: 24px; height: 24px; margin-top: 2px; flex-shrink: 0; }
.mega-item strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wp--preset--color--base);
  margin-bottom: 2px;
}
.mega-item div span {
  display: block;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

/* ── Submenu (Resources) ── */
.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 180px;
  background: rgba(26, 14, 8, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  pointer-events: none;
}
.nav-dropdown.open .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.submenu a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8125rem;
}
.submenu a:hover { background: rgba(255, 255, 255, 0.05); }

/* ── Mobile Toggle ── */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--wp--preset--color--base);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 0;
  z-index: 201;
  position: relative;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.mobile-toggle:hover,
.mobile-toggle:focus-visible { color: var(--wp--preset--color--primary-light); }
.mobile-toggle:active { opacity: 0.7; }
.hamburger-icon .ham-top,
.hamburger-icon .ham-mid,
.hamburger-icon .ham-bot {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.mobile-toggle.active .ham-top { transform: translateY(6px) rotate(45deg); }
.mobile-toggle.active .ham-mid { opacity: 0; transform: scaleX(0); }
.mobile-toggle.active .ham-bot { transform: translateY(-6px) rotate(-45deg); }

.nav-mobile-header { display: none; }
.nav-close { display: none; }

/* ── Mobile Navigation ── */
@media (max-width: 900px) {
  .mobile-toggle { display: block; }

  .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #100805;
    padding: 0;
    gap: 0;
    z-index: 400;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
  .site-nav.mobile-open {
    transform: translateX(0);
    pointer-events: auto;
  }

  .nav-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: #100805;
    z-index: 1;
  }
  .nav-mobile-header .logo img { height: 26px; width: auto; }
  .nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 0.375rem;
    line-height: 0;
    transition: color 0.2s;
  }
  .nav-close:hover,
  .nav-close:focus-visible { color: rgba(255, 255, 255, 0.9); }
  .nav-close:active { opacity: 0.7; }

  .site-nav > a {
    font-family: var(--wp--preset--font-family--primary);
    font-size: 1.0625rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    padding: 1.0625rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: 0;
    box-sizing: border-box;
  }
  .site-nav > a:hover,
  .site-nav > a.nav-active { color: var(--wp--preset--color--primary-light); }

  .site-nav .nav-cta {
    display: block;
    text-align: center;
    margin: 1.5rem 1.5rem 2rem;
    padding: 0.875rem 1.75rem;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base) !important;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0;
    border-bottom: none;
  }
  .site-nav .nav-cta:hover { background: var(--wp--preset--color--primary-dark); }

  .site-nav .nav-dropdown { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .site-nav .nav-dropdown > a {
    font-family: var(--wp--preset--font-family--primary);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wp--preset--color--neutral-light);
    padding: 1.0625rem 1.5rem;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
    letter-spacing: 0.01em;
    background: none;
    box-sizing: border-box;
  }
  .site-nav .nav-dropdown > a:hover { color: rgba(255, 255, 255, 0.95); }
  .site-nav .nav-dropdown.mobile-expanded > a { color: white; }

  /* Hide the desktop chevron on mobile — the plus/minus below replaces it. */
  .site-nav .nav-dropdown > a .nav-chevron { display: none; }

  .site-nav .nav-dropdown > a .nav-plus {
    display: inline-block;
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.7);
  }
  .site-nav .nav-dropdown > a .nav-plus::before,
  .site-nav .nav-dropdown > a .nav-plus::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  /* Horizontal stroke — always visible. */
  .site-nav .nav-dropdown > a .nav-plus::before {
    left: 0;
    right: 0;
    top: 50%;
    height: 1.75px;
    transform: translateY(-50%);
  }
  /* Vertical stroke — collapses to 0 on expand, leaving a minus. */
  .site-nav .nav-dropdown > a .nav-plus::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1.75px;
    transform: translateX(-50%) scaleY(1);
  }
  .site-nav .nav-dropdown.mobile-expanded > a .nav-plus {
    color: rgba(255, 255, 255, 0.95);
  }
  .site-nav .nav-dropdown.mobile-expanded > a .nav-plus::after {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
  }

  .site-nav .nav-dropdown.open .mega-menu,
  .site-nav .nav-dropdown.open .submenu {
    transform: none !important;
    position: static !important;
    opacity: 1;
    visibility: visible;
  }

  .site-nav .mega-menu,
  .site-nav .submenu {
    position: static;
    transform: none;
    width: 100%;
    background: transparent;
    border: none;
    backdrop-filter: none;
    padding: 0;
    border-radius: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: max-height 0.35s ease;
  }
  .site-nav .nav-dropdown.mobile-expanded .mega-menu,
  .site-nav .nav-dropdown.mobile-expanded .submenu {
    max-height: 1000px;
  }

  .site-nav .mega-menu-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0.875rem 1.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.025);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  /* Reset the desktop subgrid behaviour — each col stacks as a normal block
     so the two-column grid actually wraps instead of forcing four columns
     and overflowing the viewport. */
  .site-nav .mega-col {
    padding: 0 0.75rem 0.5rem 0;
    grid-row: auto;
    grid-template-rows: none;
    display: block;
  }
  .site-nav .mega-label {
    font-size: 0.5625rem;
    padding: 0.625rem 0 0.5rem;
  }
  .site-nav .mega-item {
    display: block;
    padding: 0.3125rem 0;
    background: none !important;
    border-bottom: none;
    border-radius: 0;
    margin: 0;
    gap: 0;
  }
  .site-nav .mega-item img { display: none; }
  .site-nav .mega-item strong {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.35;
  }
  .site-nav .mega-item:hover strong { color: rgba(255, 255, 255, 0.95); }
  .site-nav .mega-item div span { display: none; }

  .site-nav .submenu {
    background: rgba(255, 255, 255, 0.025);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  .site-nav .submenu a {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    padding: 0.75rem 1.5rem;
    border-radius: 0;
  }
  .site-nav .submenu a:hover {
    color: rgba(255, 255, 255, 0.95);
    background: transparent;
  }
}

/* ── Site Footer ── */
.site-footer.site-footer {
  position: relative;
  background: var(--wp--preset--color--dark);
  color: var(--wp--preset--color--base);
  padding: var(--wp--preset--spacing--large) var(--wp--preset--spacing--medium) var(--wp--preset--spacing--medium);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.footer-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
}
.footer-glow img { width: 100%; height: auto; display: block; }
.site-footer .footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: var(--wp--preset--spacing--medium);
}
.footer-brand .logo img { height: 28px; margin-bottom: 1rem; width: auto; }
.footer-brand p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.6;
  max-width: 280px;
}
.footer-col h6 {
  color: var(--wp--preset--color--base);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  font-weight: 600;
}
.footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  transition: color 0.2s;
  text-decoration: none;
}
.footer-col a:hover { color: var(--wp--preset--color--primary-light); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-bottom p {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}
.footer-bottom a {
  color: var(--wp--preset--color--primary-light);
  text-decoration: none;
}
@media (max-width: 768px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }

/* ==========================================================================
   Continuous-section flow
   --------------------------------------------------------------------------
   The home page stacks full-bleed dark sections that butt directly against
   each other. WordPress's auto-injected layout CSS normally inserts a
   vertical gap (`--wp--style--block-gap`) between top-level siblings inside
   post-content. We set `styles.spacing.blockGap: "0"` at the root in
   theme.json, which zeros that variable globally, so no overrides are
   needed here. Groups that want internal spacing declare their own
   blockGap via the block inspector.
   ========================================================================== */

/* ==========================================================================
   Shared utilities (used across patterns)
   ========================================================================== */

.e11-overline {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ==========================================================================
   Hero — e11-group/home-hero
   Variants: combo-*, hero-orient-*, hero-wave-bleed | hero-glow | hero-clean
   ========================================================================== */

.e11-hero {
	position: relative;
	overflow: hidden;
	min-height: 90vh;
	display: flex;
	align-items: center;
}

/* The hero is alignfull but its layout type is "constrained", which adds
   `max-width: var(--wp--style--global--content-size)` + `margin-inline: auto`
   to direct children. The decorative wave is absolute-positioned via a
   dedicated dynamic block (e11-group/hero-decor), so escape the constraint
   on its wrapper so the wave covers the full viewport width. */
.e11-hero__decor,
.e11-cta__bg {
	max-width: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
	inset: 0;
}
.e11-hero__decor {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
	z-index: 0;
}

.e11-hero__glow {
	position: absolute;
	top: -20%;
	right: -15%;
	width: 700px;
	height: 700px;
	background: radial-gradient(circle, rgba(199, 62, 21, 0.15) 0%, transparent 70%);
	display: block;
}
.e11-hero__glow--bottom {
	top: auto;
	bottom: -30%;
	left: -10%;
	right: auto;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(184, 110, 58, 0.10) 0%, transparent 70%);
}

.e11-hero__wave {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 110%;
	height: 100%;
	opacity: 0.6;
	z-index: 1;
	object-fit: cover;
	display: block;
}

/* Hero overflow variants — toggle which decorative layers show */
.e11-hero.is-style-hero-clean .e11-hero__wave,
.e11-hero.is-style-hero-clean .e11-hero__glow { display: none; }
.e11-hero.is-style-hero-glow .e11-hero__wave { display: none; }
.e11-hero.is-style-hero-wave-bleed .e11-hero__glow { /* keep both */ }
.e11-hero.is-style-hero-photo .e11-hero__wave { opacity: 0.3; }

.e11-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* Hero content wrapper — pinned to 1200px, centered, vertically aligned.
   Since WP 6.1 the constrained-layout selectors are wrapped in `:where()`
   (zero specificity), so plain class selectors beat them without
   `!important`. */
.e11-hero__content {
	max-width: 1200px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 2;
}
.e11-hero__text {
	max-width: 680px;
	margin-left: 0;
	margin-right: auto;
}
/* Push the headline / tagline / metrics to the left edge of the text column. */
.e11-hero__text > * {
	margin-left: 0;
	margin-right: 0;
}

.e11-hero__headline mark,
.e11-cta__headline mark,
.e11-work-hero__headline mark,
.e11-about-hero__headline mark,
.e11-service-hero__headline mark,
.e11-faq-hero__headline mark,
.e11-faq-cta__headline mark,
.e11-blog-hero__headline mark,
.e11-blog-cta__headline mark,
.e11-contact-hero__headline mark,
.e11-training-hero__headline mark,
.e11-pricing-cta__headline .e11-pricing-cta__highlight { background: transparent; }

/* Keep the highlighted phrase together on one visual line so phrases
   like "your project" don't break across a wrap point. */
.e11-cta__headline mark { white-space: nowrap; }

.e11-hero__tagline { max-width: 540px; opacity: 0.85; }

/* Hero buttons — the outline/filled size parity fix. WP core ships the
   outline variant with a 2px border and the filled variant with
   border-width:0, so the two render at different heights. Pinning both
   to 2px solid (transparent on filled) makes them the same height when
   sitting side-by-side. Everything else (font, padding, radius, base
   colors) comes from theme.json `styles.elements.button`. */
.e11-hero__buttons .wp-block-button .wp-block-button__link {
	border-width: 2px;
	border-style: solid;
	line-height: 1;
}
.e11-hero__buttons .wp-block-button:not(.is-style-outline):not(.is-style-outline--1):not(.is-style-outline--2) .wp-block-button__link {
	border-color: transparent;
}

/* Outline button interactive states. theme.json `variations.outline` sets
   the base state (transparent bg, base text, 30% alpha border), but WP
   does NOT emit `:hover`/`:focus`/`:active` CSS for block variations, so
   those live here. Specificity 0,3,1 beats the theme.json `:where` rule
   (0,1,0) without `!important`. */
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--dark);
}
.wp-block-button.is-style-outline > .wp-block-button__link:active {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--dark);
	transform: scale(0.98);
}

/* ──────────────────────────────────────────────────────────────────────
   Button transitions + hover polish

   Base state and hover colors live in theme.json
   (`styles.elements.button` + `:hover` for filled;
   `styles.blocks.core/button.variations.outline` for outline).
   theme.json can't express CSS transitions, so we add one global
   transition rule here so every button animates on hover/focus
   consistently. Low specificity — no cascade fights.
   ────────────────────────────────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Hero metrics row — design-matching flex row. The full metric styles
   (typography, colors, responsive gap) live further down in the Hero
   metrics section. */

/* Case study tile slider — absolutely positioned, bleeds off the right edge
   of the viewport. Mirrors the design's .hero-slider exactly. Now rendered
   as a proper e11-group/hero-slider dynamic block, so no wpautop wrapper
   fighting is required. */
.e11-hero__slider {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	left: calc(50% + 160px);
	overflow: visible;
	z-index: 2;
}
.e11-hero__slider-track {
	display: flex;
	gap: 1.25rem;
	padding: 1rem 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}
.e11-hero__slider-track::-webkit-scrollbar { display: none; }
.e11-hero__slide {
	flex: 0 0 300px;
	min-width: 300px;
	max-width: 300px;
	height: 380px;
	object-fit: cover;
	border-radius: 0;
	scroll-snap-align: start;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: block;
}
.e11-hero__slide:hover {
	transform: translateY(-6px);
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.e11-hero__slider-arrows {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.25rem;
	padding-left: 0.25rem;
}
.e11-hero__slider-arrow {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.15);
	background: transparent;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
	padding: 0;
}
.e11-hero__slider-arrow:hover,
.e11-hero__slider-arrow:focus-visible {
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.3);
}
.e11-hero__slider-arrow:active {
	background: rgba(255,255,255,0.15);
	transform: scale(0.96);
}

@media (max-width: 1200px) {
	.e11-hero__slider { display: none; }
	/* Site header is position:fixed (height ~73px). When min-height drops to auto
	   the centered hero content can slide under it on mobile — reserve room. */
	.e11-hero { min-height: auto; padding-top: 100px; padding-bottom: var(--wp--preset--spacing--xx-large); }
}

/* Orientation */
.e11-hero.is-style-hero-orient-center .e11-hero__content { text-align: center; margin-inline: auto; }
.e11-hero.is-style-hero-orient-right .e11-hero__content { margin-left: auto; }

/* ==========================================================================
   Partner Marquee — e11-group/partner-logos-marquee
   ========================================================================== */

/* Section border-tops (matches design) — a 1px hairline between dark sections */
.e11-marquee,
.e11-services,
.e11-work,
.e11-testimonials {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.e11-marquee { border-top-color: rgba(255, 255, 255, 0.05); }

/* Hero metrics — design-matching flex row with orange suffix. Now that
   each metric is a proper e11-group/hero-metric dynamic block, there are
   no stray <p> siblings to fight — WP's flex layout honors the gap
   directly. */
.e11-hero__metrics {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--x-large);
	margin-top: 2rem;
}
.e11-hero__metric {
	display: flex;
	flex-direction: column;
}
.e11-hero__metric-value {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--wp--preset--color--base);
	letter-spacing: -0.02em;
	line-height: 1;
}
.e11-hero__metric-unit {
	color: var(--wp--preset--color--primary);
}
.e11-hero__metric-label {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 0.5rem;
}
@media (max-width: 600px) {
	.e11-hero__metrics { gap: var(--wp--preset--spacing--medium); }
}

.e11-marquee {
	overflow: hidden;
	position: relative;
	/* Edge fade lives on the non-animated wrapper. Applying it to the
	   track (which translates) made the mask slide along with it, so
	   after a while the right-edge fade started drifting into view. */
	-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
	mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.e11-marquee::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 60px;
	background: linear-gradient(to bottom, transparent, rgba(199, 62, 21, 0.06));
	pointer-events: none;
}

.e11-marquee__track {
	display: flex;
	/* Width is the sum of both copies; translating by -50% moves by
	   exactly one copy's width for a seamless infinite loop. Duration
	   comes from an inline CSS custom property emitted by render.php
	   (scales with logo count); fallback covers editor previews where
	   the inline style may not be present yet. */
	width: max-content;
	animation: e11-marquee var(--e11-marquee-duration, 45s) linear infinite;
}
/* Respect reduced-motion preferences — no animation at all. */
@media (prefers-reduced-motion: reduce) {
	.e11-marquee__track {
		animation: none;
	}
}
.e11-marquee__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--x-large);
	padding-right: var(--wp--preset--spacing--x-large);
	flex-shrink: 0;
}
.e11-marquee__inner img,
.e11-marquee .launchpad-marquee img,
.e11-marquee .launchpad-marquee__content img,
.e11-marquee figure.wp-block-image img {
	height: 22px;
	width: auto;
	filter: grayscale(1) brightness(3) contrast(0.8);
	opacity: 1;
	flex-shrink: 0;
}
/* Parent marquee uses figures inside the content track — kill any margin/padding
   the parent might add so logos sit flush in the row. */
.e11-marquee .launchpad-marquee__content figure,
.e11-marquee .launchpad-marquee__content .wp-block-image {
	margin: 0;
	display: inline-flex;
	align-items: center;
}
@keyframes e11-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Static grid alternate */
.e11-marquee.is-style-partner-grid .e11-marquee__track {
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--large);
	padding: 1rem var(--wp--preset--spacing--medium);
	mask-image: none;
	-webkit-mask-image: none;
}
.e11-marquee.is-style-partner-grid .e11-marquee__inner {
	animation: none;
	padding-right: 0;
}
.e11-marquee.is-style-partner-grid .e11-marquee__inner ~ .e11-marquee__inner { display: none; }

/* ==========================================================================
   Service Bento — e11-group/service-bento
   ========================================================================== */

.e11-services { position: relative; overflow: hidden; }
.e11-services::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 80px;
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3));
	pointer-events: none;
	z-index: 0;
}
.e11-services > * { position: relative; z-index: 1; }
.e11-services__header h2 { color: inherit; }

.e11-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: auto;
	gap: 1rem;
}

.e11-svc-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 1.75rem;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: background 0.25s ease, transform 0.25s ease;
}
/* Reset block paragraph margins inside service cards, then add back
   targeted spacing so headings don't touch descriptions. */
.e11-svc-card > p,
.e11-svc-card .wp-block-heading {
	margin: 0;
}
.e11-svc-card .wp-block-heading + p {
	margin-top: 0.5rem;
}
.e11-svc-card > p:not(.e11-svc-card__tag) {
	margin: 0;
}
.e11-svc-card .wp-block-heading {
	transition: color 0.2s ease;
}
.e11-svc-card:hover,
.e11-svc-card:focus-visible {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.16);
	transform: translateY(-3px);
}
.e11-services__grid a.e11-svc-card:hover .wp-block-heading {
	color: var(--wp--preset--color--primary-light);
}
.e11-services__grid a.e11-svc-card:active {
	transform: translateY(-1px);
	background: rgba(255, 255, 255, 0.09);
}

/* When the wp:group renders as an <a> (via render_block filter), strip the
   default link styling and keep the card visual identical. WordPress core
   wraps content links in a `.wp-block-group :where(a)` rule via theme.json;
   nesting our anchor inside `.e11-services` and adding a `:not(:hover)` or
   tag prefix doesn't beat that selector. Bumping specificity with the
   `.e11-services__grid` parent is enough to win cleanly without `!important`. */
.e11-services__grid a.e11-svc-card,
.e11-services__grid a.e11-svc-card:hover,
.e11-services__grid a.e11-svc-card:focus,
.e11-services__grid a.e11-svc-card:visited {
	color: inherit;
	text-decoration: none;
	/* Theme.json sets `text-decoration-line: underline` longhand on links,
	   which beats our `text-decoration: none` shorthand. Set the longhand. */
	text-decoration-line: none;
}
.e11-services__grid a.e11-svc-card * {
	color: inherit;
}
/* Children inherit the parent anchor's text-decoration, but only via CSS
   value `inherit`. Neutralize per-child as well so any wp:paragraph rule
   that sets its own text-decoration doesn't bleed into card text. */
.e11-services__grid a.e11-svc-card h4,
.e11-services__grid a.e11-svc-card p,
.e11-services__grid a.e11-svc-card ul,
.e11-services__grid a.e11-svc-card li {
	text-decoration: none;
}
.e11-services__grid a.e11-svc-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Card tag pill. Pattern emits this as a wp:paragraph so we have to override
   the default paragraph block margins/font-size to land at design spec. */
.e11-svc-card p.e11-svc-card__tag {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.2;
	color: var(--wp--preset--color--primary-light);
	background: rgba(199, 62, 21, 0.15);
	padding: 0.25rem 0.65rem;
	border-radius: 100px;
	margin: 0 0 1rem 0;
	width: fit-content;
}
/* Pattern-specific h4/p overrides only — size and a muted card-body
   color. font-family, font-weight, and heading color come from
   theme.json `styles.elements.heading` + `h4`. */
.e11-svc-card h4 {
	font-size: 1.125rem;
	margin: 0 0 0.5rem;
}
.e11-svc-card p {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	line-height: 1.6;
}
.e11-svc-card__visual {
	margin-top: auto;
	padding-top: 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
}
.e11-svc-card__visual--column { flex-direction: column; align-items: flex-start; }

/* Any visual that leads with a stat row (PM, PPC, Ad Grants) stacks the
   stat above the chart/meter/dots, matching design .card-visual style. */
.e11-svc-card__visual.has-stat {
	flex-direction: column;
	align-items: flex-start;
}

/* icons-sparkline: icons row + sparkline side-by-side (AI & Local Search) */
.e11-svc-card__visual.is-kind-icons-sparkline {
	flex-direction: row;
	align-items: center;
	gap: var(--wp--preset--spacing--medium);
}
.e11-svc-card__visual.is-kind-icons-sparkline .e11-svc-card__sparkline {
	flex: 1;
}

/* icons-meter: icons row above a full-width meter (Hosting) */
.e11-svc-card__visual.is-kind-icons-meter {
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}
.e11-svc-card__visual.is-kind-icons-meter .e11-svc-card__meter {
	margin-top: 0;
}

/* Stat label shouldn't wrap ("/MO FREE" and "AVG. ROAS" stay on one line) */
.e11-svc-card__stat-label {
	white-space: nowrap;
}

.e11-svc-card__stat-row { display: flex; align-items: baseline; gap: 0.5rem; }
.e11-svc-card__stat {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
	line-height: 1;
}
.e11-svc-card__stat-label {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.e11-svc-card__bars {
	display: flex; align-items: flex-end; gap: 4px;
	height: 64px; padding-top: 0.5rem;
	width: 100%;
}
.e11-svc-card__bars--small { height: 40px; }
.e11-svc-card__bars span {
	width: 12px;
	border-radius: 3px 3px 0 0;
	background: var(--wp--preset--color--primary);
	opacity: 0.7;
	display: block;
}
.e11-svc-card__bars span:nth-child(even) { background: var(--wp--preset--color--accent); opacity: 0.5; }

.e11-svc-card__meter {
	width: 100%;
	height: 8px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	overflow: hidden;
	margin-top: 0.5rem;
}
.e11-svc-card__meter span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--accent));
}

.e11-svc-card__dots {
	display: flex; gap: 6px; flex-wrap: wrap; padding-top: 0.5rem;
}
.e11-svc-card__dots span {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--wp--preset--color--primary); opacity: 0.5;
	display: block;
}
.e11-svc-card__dots span:nth-child(3n) { background: var(--wp--preset--color--accent); opacity: 0.6; }
.e11-svc-card__dots span:nth-child(5n) { background: var(--wp--preset--color--primary-light); opacity: 0.4; }

.e11-svc-card__color-dots {
	display: flex; gap: 8px; flex-wrap: wrap; padding-top: 0.5rem;
}
.e11-svc-card__color-dots span {
	width: 24px; height: 24px; border-radius: 4px; display: block;
}

.e11-svc-card__sparkline {
	display: flex; align-items: flex-end; gap: 2px; height: 48px;
}
.e11-svc-card__sparkline span {
	width: 4px;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
	opacity: 0.6;
	display: block;
}

.e11-svc-card__icons {
	display: flex; gap: 0.5rem; padding-top: 0.5rem;
}
.e11-svc-card__icons span {
	width: 36px; height: 36px;
	border-radius: 8px;
	background: rgba(199, 62, 21, 0.10);
	border: 1px solid rgba(199, 62, 21, 0.20);
	display: flex; align-items: center; justify-content: center;
	color: var(--wp--preset--color--primary-light);
	font-size: 1rem;
}

/* Hero card spans 2 cols x 2 rows */
.e11-svc-card--hero {
	grid-column: span 2;
	grid-row: span 2;
	background: rgba(199, 62, 21, 0.08);
	border-color: rgba(199, 62, 21, 0.20);
}
/* 3px gradient stripe along the top edge (matches design .card-hero::before) */
.e11-svc-card--hero::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--primary),
		var(--wp--preset--color--accent),
		var(--wp--preset--color--primary-dark));
	z-index: 1;
	pointer-events: none;
}
/* Subtle radial glow in the bottom-right (matches design .card-hero::after) */
.e11-svc-card--hero::after {
	content: '';
	position: absolute;
	bottom: -20%; right: -10%;
	width: 300px; height: 300px;
	background: radial-gradient(circle, rgba(199, 62, 21, 0.15) 0%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}
.e11-svc-card--hero > * { position: relative; z-index: 1; }
.e11-svc-card--hero h4 { font-size: 1.5rem; }
.e11-svc-card--hero p { font-size: 1rem; color: rgba(255, 255, 255, 0.75); }
.e11-svc-card--hero .e11-svc-card__checklist {
	list-style: none; padding: 0; margin: 1rem 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
}
.e11-svc-card--hero .e11-svc-card__checklist li::before {
	content: '✓'; color: var(--wp--preset--color--primary); margin-right: 0.5rem; font-weight: 700;
}
.e11-svc-card--hero .e11-svc-card__cta { margin: 1rem 0 1.5rem; }
/* No button styles here — the button inside this wrapper is a
   wp-block-button and picks up all colors/typography/padding from
   theme.json `styles.elements.button`. Pattern-specific font-size and
   padding tweaks are expressed as block attributes in service-bento.php,
   not as per-pattern CSS overrides. */

/* Browser mock visual — matches design .card-browser-mock exactly */
.e11-svc-card__browser {
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	overflow: hidden;
	width: 100%;
}
.e11-svc-card__browser-bar {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.3);
}
.e11-svc-card__browser-bar span {
	width: 8px; height: 8px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.20);
}
.e11-svc-card__browser-body {
	display: flex;
	gap: 0.75rem;
	padding: 1rem;
}
.e11-svc-card__browser-side {
	width: 30%;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.e11-svc-card__browser-side span {
	height: 6px; border-radius: 3px;
	background: rgba(255, 255, 255, 0.10);
	display: block;
}
.e11-svc-card__browser-side span:nth-child(1) { width: 80%; }
.e11-svc-card__browser-side span:nth-child(2) { width: 60%; }
.e11-svc-card__browser-side span:nth-child(3) { width: 70%; }
.e11-svc-card__browser-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.e11-svc-card__browser-main span {
	height: 6px; border-radius: 3px;
	background: rgba(255, 255, 255, 0.08);
	display: block;
}
.e11-svc-card__browser-main span.is-feature {
	height: 40px;
	background: rgba(199, 62, 21, 0.2);
	border-radius: 4px;
}
.e11-svc-card__browser-main span:nth-child(2) { width: 90%; }
.e11-svc-card__browser-main span:nth-child(3) { width: 70%; }

/* Wide card spans 2 cols */
.e11-svc-card--wide { grid-column: span 2; }

@media (max-width: 900px) {
	.e11-services__grid { grid-template-columns: repeat(2, 1fr); }
	.e11-svc-card--hero, .e11-svc-card--wide { grid-column: span 2; }
	.e11-svc-card--hero { grid-row: auto; }
}
@media (max-width: 600px) {
	.e11-services__grid { grid-template-columns: 1fr; }
	.e11-svc-card--hero, .e11-svc-card--wide { grid-column: auto; }
	.e11-svc-card--hero .e11-svc-card__checklist { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Work Grid — e11-group/work-grid
   ========================================================================== */

.e11-work { position: relative; }
.e11-work::before {
	content: '';
	position: absolute;
	top: -15%; left: -15%;
	width: 70%; height: 80%;
	background: radial-gradient(ellipse at center, rgba(199, 62, 21, 0.15) 0%, rgba(199, 62, 21, 0.06) 40%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}
.e11-work::after {
	content: '';
	position: absolute;
	bottom: -15%; right: -10%;
	width: 65%; height: 70%;
	background: radial-gradient(ellipse at center, rgba(201, 149, 46, 0.12) 0%, rgba(201, 149, 46, 0.04) 40%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.e11-work > * { position: relative; z-index: 1; }

.e11-work__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--wp--preset--spacing--medium);
}
.e11-work__card,
a.e11-work__card,
a.e11-work__card:link,
a.e11-work__card:visited {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	text-decoration: none;
	color: inherit;
	display: block;
}
.e11-work__card * { text-decoration: none; }
.e11-work__card:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.15);
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.e11-work__card:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 10px;
}
.e11-work__card:active {
	transform: translateY(-1px);
	background: rgba(255, 255, 255, 0.12);
}
.e11-work__card img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	max-height: none;
}
.e11-work__body { padding: 1.25rem 1.5rem; }
.e11-work__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--primary-light);
	margin: 0 0 0.375rem;
}
/* Pattern-specific h4 overrides only — tighter size and line-height
   for the card footer. Color and font-family come from theme.json. */
.e11-work__body h4 {
	font-size: 1rem;
	margin: 0 0 0.75rem;
	line-height: 1.35;
}
/* Case-study card metrics. Previously laid out 3-up horizontally with
   flex, which squashed long labels (e.g. AMWA's "Years serving women in
   medicine" crammed next to the adjacent metric). Switched to a 2-column
   grid where every value sits in a max-content column and every label
   flows in the second column with full width to wrap. All values align
   vertically across rows, and long labels get all the horizontal room
   they need. `display: contents` on each .e11-work__metric wrapper lets
   its child value + label participate directly in the grid. */
.e11-work__metrics {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 0.875rem;
	row-gap: 0.4rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.e11-work__metric {
	display: contents;
}
.e11-work__metric-value {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-light);
	line-height: 1.1;
	white-space: nowrap;
}
.e11-work__metric-label {
	font-size: 0.75rem;
	/* Previously var(--wp--preset--color--muted) (#7A6A5E). On the dark
	   site background that measured ~3.8:1 contrast — below WCAG AA's
	   4.5:1 requirement for normal-size text. Bumped to a lighter value
	   that measures ~5.3:1 on the same background so the metric labels
	   pass AA everywhere they appear. */
	color: rgba(255, 255, 255, 0.78);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.35;
	align-self: center;
}
.e11-work__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.e11-work__tags span {
	font-size: 0.6875rem;
	font-weight: 500;
	padding: 0.2rem 0.6rem;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: var(--wp--preset--color--neutral-light);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Industry chip replaces the old multi-service tag row on archive cards.
   Renders as a small muted category pill above the title so the card stays
   scannable (the previous layout dumped 7–9 service terms per card which
   was visually noisy and hard to scan). Service filtering still works —
   slugs live in a `data-services` attribute on the card and drive the
   filter bar above the grid. */
.e11-work__industry {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 600;
	padding: 0.2rem 0.65rem;
	border-radius: 100px;
	background: rgba(199, 62, 21, 0.1);
	border: 1px solid rgba(199, 62, 21, 0.2);
	color: var(--wp--preset--color--primary-light);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 0.75rem;
	width: fit-content;
}
.e11-work__excerpt {
	font-size: 0.875rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 1rem;
}

/* ==========================================================================
   Testimonials — e11-group/testimonials
   ========================================================================== */

.e11-testimonials { position: relative; overflow: hidden; }
.e11-testimonials::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 80px;
	background: linear-gradient(to bottom, var(--wp--preset--color--dark), transparent);
	pointer-events: none;
	z-index: 1;
}
.e11-testimonials > * { position: relative; z-index: 2; }
.e11-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--wp--preset--spacing--medium);
}
/* Columns inside the grid stretch to the row height by default, but their
   .e11-testimonial child is content-sized. Make each column a flex container
   so the card can fill the full row height and distribute its contents. */
.e11-testimonials__grid > .wp-block-column {
	display: flex;
}
.e11-testimonial {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 1.75rem;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	width: 100%;
}
/* The card pattern uses WP's constrained layout, which applies a max-width
   and `margin-inline: auto !important` to direct children — that centers
   the quote icon and narrows the tag row. Reset to full-width, left-aligned
   flow so the flex column behaves as expected. The !important is required
   to beat WP core's own !important on the constrained layout rule. */
.e11-testimonial.is-layout-constrained > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.e11-testimonial > .e11-testimonial__quote,
.e11-testimonial > blockquote,
.e11-testimonial > .wp-block-quote,
.e11-testimonial > .e11-testimonial__author,
.e11-testimonial > .e11-testimonial__tags { align-self: stretch; }
/* Tags flow naturally after the author row. Cards stretch to the row's
   tallest height via `flex: 1` on `.e11-testimonial`, so any slack at the
   bottom of a shorter card becomes empty space — no artificial pinning. */
.e11-testimonial .e11-testimonial__tags {
	margin-top: 1.25rem;
}
.e11-testimonial > * { margin-top: 0; margin-bottom: 0; }
.e11-testimonial__icon,
.e11-testimonial img.e11-testimonial__icon {
	width: 32px;
	height: 32px;
	margin: 0 0 1rem 0;
	display: block;
}
/* The testimonial pattern uses core's wp:quote block so the copy is editable
   in the block editor. Core ships `.wp-block-quote` with a left-border bar
   and its own padding/margin — we reset those here so the card matches the
   original static design (italic text, no border, no indent). The inner
   <p> generated by wp:quote also needs explicit styling because core's quote
   typography cascades through the paragraph, not the blockquote. */
.e11-testimonial__quote,
.e11-testimonial blockquote,
.e11-testimonial .wp-block-quote {
	margin: 0 0 var(--wp--preset--spacing--medium) 0;
	padding: 0;
	border: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.65);
	font-style: italic;
	font-weight: 400;
}
.e11-testimonial .wp-block-quote p,
.e11-testimonial blockquote p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	font-style: inherit;
}
.e11-testimonial__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0;
}
.e11-testimonial__author img,
.e11-testimonial__avatar img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.e11-testimonial__avatar { margin: 0; flex-shrink: 0; }
.e11-testimonial__name,
.e11-testimonial p.e11-testimonial__name {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--base);
	margin: 0;
	line-height: 1.3;
}
.e11-testimonial__role,
.e11-testimonial p.e11-testimonial__role {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.50);
	margin: 2px 0 0 0;
	line-height: 1.3;
}
.e11-testimonial__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: 1rem;
}
.e11-testimonial__tags span,
.e11-testimonial__tags p {
	font-size: 0.6875rem;
	font-weight: 500;
	padding: 0.2rem 0.6rem;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.50);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0;
	line-height: 1.5;
}

/* ==========================================================================
   CTA Band — e11-group/cta-band
   ========================================================================== */

.e11-cta { position: relative; text-align: center; }
.e11-cta__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.e11-cta__bg img {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: auto;
	display: block;
}
/* When the .e11-cta__bg comes through wp:html it's wrapped in a <p> by the
   block parser. Reset that wrapper so absolute positioning still works. */
.e11-cta > p:has(> .e11-cta__bg),
.e11-cta p .e11-cta__bg {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
}
.e11-cta.is-style-cta-clean .e11-cta__bg { display: none; }
.e11-cta.is-style-cta-mask .e11-cta__bg img:first-child { display: none; }
/* Default (cta-waves) matches the design: BOTH accent gradient and mask
   wave image render layered on top of each other. Earlier revisions hid
   the mask here, which is why the orange wave was nearly invisible. */

.e11-cta__content {
	position: relative; z-index: 2;
	margin: 0 auto;
}

/* CTA split: text left, form right */
.e11-cta.is-style-cta-split .e11-cta__content { max-width: 1100px; text-align: left; }
.e11-cta.is-style-cta-split .e11-cta__content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }

/* ==========================================================================
   Density variants — apply to any pattern with density-* class
   ========================================================================== */
.is-style-density-tight   { padding-top: var(--wp--preset--spacing--large) !important; padding-bottom: var(--wp--preset--spacing--large) !important; }
.is-style-density-roomy   { padding-top: clamp(5rem, 10vw, 10rem) !important; padding-bottom: clamp(5rem, 10vw, 10rem) !important; }

/* ==========================================================================
   Combo color variants — let any group/cover swap palette
   ========================================================================== */
.is-style-combo-light {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast);
}
.is-style-combo-light h1, .is-style-combo-light h2, .is-style-combo-light h3,
.is-style-combo-light h4, .is-style-combo-light h5, .is-style-combo-light h6 {
	color: var(--wp--preset--color--contrast);
}
.is-style-combo-surface {
	background-color: var(--wp--preset--color--surface) !important;
	color: var(--wp--preset--color--contrast);
}
.is-style-combo-brand {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base);
}
.is-style-combo-brand h1, .is-style-combo-brand h2, .is-style-combo-brand h3,
.is-style-combo-brand h4, .is-style-combo-brand h5, .is-style-combo-brand h6 {
	color: var(--wp--preset--color--base);
}
/* combo-dark is the default for sections that target it; no overrides needed */

/* ==========================================================================
   Scroll-reveal animations (toggled by assets/js/e11.js IntersectionObserver)
   ========================================================================== */

.reveal-fade-up {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	/* will-change removed — browser auto-promotes opacity/transform during transition */
}
.reveal-fade-up.in-view {
	opacity: 1;
	transform: translateY(0);
}

.e11-work__card,
.e11-testimonial {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.e11-work__card.in-view,
.e11-testimonial.in-view {
	opacity: 1;
	transform: translateY(0);
}
.e11-work__card:nth-child(2)        { transition-delay: 0.10s; }
.e11-work__card:nth-child(3)        { transition-delay: 0.20s; }
.e11-testimonial:nth-child(2)       { transition-delay: 0.10s; }
.e11-testimonial:nth-child(3)       { transition-delay: 0.20s; }

/* Hero glow & wave parallax need a smoothing transition */
.e11-hero__glow {
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Service-card visual entrance animations (toggled by .animated class)
   ========================================================================== */

.e11-svc-card__bars span,
.e11-svc-card__sparkline span {
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.e11-svc-card__visual.animated .e11-svc-card__bars span,
.e11-svc-card__visual.animated .e11-svc-card__sparkline span { transform: scaleY(1); }

.e11-svc-card__bars span:nth-child(1)  { transition-delay: 0.05s; }
.e11-svc-card__bars span:nth-child(2)  { transition-delay: 0.10s; }
.e11-svc-card__bars span:nth-child(3)  { transition-delay: 0.15s; }
.e11-svc-card__bars span:nth-child(4)  { transition-delay: 0.20s; }
.e11-svc-card__bars span:nth-child(5)  { transition-delay: 0.25s; }
.e11-svc-card__bars span:nth-child(6)  { transition-delay: 0.30s; }
.e11-svc-card__bars span:nth-child(7)  { transition-delay: 0.35s; }
.e11-svc-card__bars span:nth-child(8)  { transition-delay: 0.40s; }
.e11-svc-card__bars span:nth-child(9)  { transition-delay: 0.45s; }
.e11-svc-card__bars span:nth-child(10) { transition-delay: 0.50s; }
.e11-svc-card__bars span:nth-child(11) { transition-delay: 0.55s; }
.e11-svc-card__bars span:nth-child(12) { transition-delay: 0.60s; }

.e11-svc-card__sparkline span:nth-child(1)  { transition-delay: 0.02s; }
.e11-svc-card__sparkline span:nth-child(2)  { transition-delay: 0.04s; }
.e11-svc-card__sparkline span:nth-child(3)  { transition-delay: 0.06s; }
.e11-svc-card__sparkline span:nth-child(4)  { transition-delay: 0.08s; }
.e11-svc-card__sparkline span:nth-child(5)  { transition-delay: 0.10s; }
.e11-svc-card__sparkline span:nth-child(6)  { transition-delay: 0.12s; }
.e11-svc-card__sparkline span:nth-child(7)  { transition-delay: 0.14s; }
.e11-svc-card__sparkline span:nth-child(8)  { transition-delay: 0.16s; }
.e11-svc-card__sparkline span:nth-child(9)  { transition-delay: 0.18s; }
.e11-svc-card__sparkline span:nth-child(10) { transition-delay: 0.20s; }
.e11-svc-card__sparkline span:nth-child(11) { transition-delay: 0.22s; }
.e11-svc-card__sparkline span:nth-child(12) { transition-delay: 0.24s; }
.e11-svc-card__sparkline span:nth-child(13) { transition-delay: 0.26s; }
.e11-svc-card__sparkline span:nth-child(14) { transition-delay: 0.28s; }
.e11-svc-card__sparkline span:nth-child(15) { transition-delay: 0.30s; }
.e11-svc-card__sparkline span:nth-child(16) { transition-delay: 0.32s; }
.e11-svc-card__sparkline span:nth-child(17) { transition-delay: 0.34s; }
.e11-svc-card__sparkline span:nth-child(18) { transition-delay: 0.36s; }

.e11-svc-card__meter span {
	width: 0 !important;
	transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.e11-svc-card__visual.animated .e11-svc-card__meter span {
	width: 99.9% !important;
}
.e11-svc-card__visual.animated .e11-svc-card__meter span[style*="100%"] {
	width: 100% !important;
}

.e11-svc-card__dots span {
	transform: scale(0);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.e11-svc-card__visual.animated .e11-svc-card__dots span { transform: scale(1); }
.e11-svc-card__dots span:nth-child(1)  { transition-delay: 0.05s; }
.e11-svc-card__dots span:nth-child(2)  { transition-delay: 0.10s; }
.e11-svc-card__dots span:nth-child(3)  { transition-delay: 0.15s; }
.e11-svc-card__dots span:nth-child(4)  { transition-delay: 0.20s; }
.e11-svc-card__dots span:nth-child(5)  { transition-delay: 0.25s; }
.e11-svc-card__dots span:nth-child(6)  { transition-delay: 0.30s; }
.e11-svc-card__dots span:nth-child(7)  { transition-delay: 0.35s; }
.e11-svc-card__dots span:nth-child(8)  { transition-delay: 0.40s; }
.e11-svc-card__dots span:nth-child(9)  { transition-delay: 0.45s; }
.e11-svc-card__dots span:nth-child(10) { transition-delay: 0.50s; }

.e11-svc-card__icons span {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.e11-svc-card__visual.animated .e11-svc-card__icons span {
	opacity: 1;
	transform: translateY(0);
}
.e11-svc-card__icons span:nth-child(1) { transition-delay: 0.10s; }
.e11-svc-card__icons span:nth-child(2) { transition-delay: 0.20s; }
.e11-svc-card__icons span:nth-child(3) { transition-delay: 0.30s; }
.e11-svc-card__icons span:nth-child(4) { transition-delay: 0.40s; }

.e11-svc-card__browser {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.e11-svc-card__visual.animated .e11-svc-card__browser {
	opacity: 1;
	transform: translateY(0);
}

.e11-svc-card__stat {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.e11-svc-card__visual.animated .e11-svc-card__stat {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   PRICING PAGE
   --------------------------------------------------------------------------
   Ported from projects/e11-group/designs/pricing.html. The pattern wrappers
   use e11-pricing-* class names; the hero animation block uses short ha-*
   names from the design scoped under .e11-pricing-hero__anim so they can't
   collide with anything else.

   Sections:
     1. Pricing hero (overline, headline, CTA, animation grid)
     2. Hero animation block (fake browser + 5 floating quality layers)
     3. Featured card (Website Projects starting at $X)
     4. Enterprise support strip
     5. Add-ons section header + card row
     6. Add-on card styling (shared with featured card's check list)
     7. Pricing CTA band (bottom of page)
   ========================================================================== */

/* ── 1. Pricing hero layout ── */
.e11-pricing-hero {
}
/* Dim the native background-image so it stays subtle against the dark
   base colour.  The image URL and position are set inline by the block
   attributes; this overlay just reduces visual weight. */
.e11-pricing-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--dark);
	opacity: 0.3;
	z-index: 0;
	pointer-events: none;
}
.e11-pricing-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--large);
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}
.e11-pricing-hero__headline {
	color: var(--wp--preset--color--base);
	max-width: 760px;
}
.e11-pricing-hero__headline em {
	font-style: italic;
	color: var(--wp--preset--color--primary);
}
.e11-pricing-hero__desc {
	max-width: 520px;
}
.e11-pricing-hero__cta-wrap.wp-block-group {
	align-items: center;
	gap: 1rem;
}
.e11-pricing-hero__cta-sub {
	white-space: nowrap;
}

@media (max-width: 900px) {
	.e11-pricing-hero__inner { grid-template-columns: 1fr; }
	.e11-pricing-hero__anim  { display: none; }
}

/* ── 2. Hero animation block ── */
.e11-pricing-hero__anim {
	width: 100%;
	max-width: 400px;
	justify-self: center;
}
.e11-pricing-hero__anim .ha-browser {
	background: #1e1e1e;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
	position: relative;
	z-index: 5;
}
.e11-pricing-hero__anim .ha-bar {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	background: #161616;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.e11-pricing-hero__anim .ha-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}
.e11-pricing-hero__anim .ha-url {
	margin-left: 10px;
	background: rgba(255,255,255,0.06);
	border-radius: 5px;
	padding: 3px 10px;
	font-size: 10px;
	color: rgba(255,255,255,0.3);
	flex: 1;
}
.e11-pricing-hero__anim .ha-site { padding: 16px; }
.e11-pricing-hero__anim .ha-nav {
	display: flex;
	gap: 12px;
	margin-bottom: 14px;
	align-items: center;
}
.e11-pricing-hero__anim .ha-logo {
	width: 22px;
	height: 22px;
	background: var(--wp--preset--color--primary);
	border-radius: 5px;
}
.e11-pricing-hero__anim .ha-nl {
	width: 32px;
	height: 5px;
	background: rgba(255,255,255,0.1);
	border-radius: 3px;
}
.e11-pricing-hero__anim .ha-nl--cta {
	width: 44px;
	height: 16px;
	background: var(--wp--preset--color--primary);
	border-radius: 4px;
}
.e11-pricing-hero__anim .ha-hero-block {
	background: linear-gradient(135deg, rgba(199,62,21,0.12), rgba(201,149,46,0.08));
	border-radius: 6px;
	padding: 18px 16px;
	margin-bottom: 12px;
}
.e11-pricing-hero__anim .ha-h {
	width: 65%;
	height: 8px;
	background: rgba(255,255,255,0.6);
	border-radius: 4px;
	margin-bottom: 6px;
}
.e11-pricing-hero__anim .ha-p {
	width: 85%;
	height: 5px;
	background: rgba(255,255,255,0.12);
	border-radius: 3px;
	margin-bottom: 4px;
}
.e11-pricing-hero__anim .ha-btn {
	width: 64px;
	height: 20px;
	background: var(--wp--preset--color--primary);
	border-radius: 5px;
	margin-top: 10px;
}
.e11-pricing-hero__anim .ha-cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
}
.e11-pricing-hero__anim .ha-card {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 5px;
	padding: 10px 8px;
}
.e11-pricing-hero__anim .ha-ci {
	width: 100%;
	height: 22px;
	background: rgba(255,255,255,0.05);
	border-radius: 3px;
	margin-bottom: 6px;
}
.e11-pricing-hero__anim .ha-ct {
	width: 55%;
	height: 4px;
	background: rgba(255,255,255,0.15);
	border-radius: 2px;
	margin-bottom: 4px;
}
.e11-pricing-hero__anim .ha-cs {
	width: 75%;
	height: 3px;
	background: rgba(255,255,255,0.07);
	border-radius: 2px;
}
.e11-pricing-hero__anim .ha-layers {
	position: relative;
	margin-top: -6px;
	z-index: 4;
}
.e11-pricing-hero__anim .ha-layer {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 0 0 8px 8px;
	margin: 0 auto;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	border: 1px solid transparent;
	border-top: none;
}
.e11-pricing-hero__anim .ha-layer.visible {
	opacity: 1;
	transform: translateY(0);
}
.e11-pricing-hero__anim .ha-li {
	width: 22px;
	height: 22px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	flex-shrink: 0;
}
.e11-pricing-hero__anim .ha-lt { flex: 1; }
.e11-pricing-hero__anim .ha-lv {
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: 10px;
	font-weight: 700;
}
.e11-pricing-hero__anim .ha-speed {
	width: 90%;
	background: rgba(40,200,64,0.06);
	border-color: rgba(40,200,64,0.12);
	color: rgba(40,200,64,0.9);
}
.e11-pricing-hero__anim .ha-speed .ha-li { background: rgba(40,200,64,0.12); }
.e11-pricing-hero__anim .ha-speed .ha-lv { color: #28c840; }
.e11-pricing-hero__anim .ha-a11y {
	width: 82%;
	background: rgba(88,130,255,0.06);
	border-color: rgba(88,130,255,0.12);
	color: rgba(88,130,255,0.9);
}
.e11-pricing-hero__anim .ha-a11y .ha-li { background: rgba(88,130,255,0.12); }
.e11-pricing-hero__anim .ha-a11y .ha-lv { color: #5882ff; }
.e11-pricing-hero__anim .ha-sec {
	width: 74%;
	background: rgba(199,62,21,0.06);
	border-color: rgba(199,62,21,0.12);
	color: rgba(199,62,21,0.9);
}
.e11-pricing-hero__anim .ha-sec .ha-li { background: rgba(199,62,21,0.12); }
.e11-pricing-hero__anim .ha-track {
	width: 66%;
	background: rgba(201,149,46,0.06);
	border-color: rgba(201,149,46,0.12);
	color: rgba(201,149,46,0.9);
}
.e11-pricing-hero__anim .ha-track .ha-li { background: rgba(201,149,46,0.12); }
.e11-pricing-hero__anim .ha-track .ha-lv { color: #C9952E; }
.e11-pricing-hero__anim .ha-up {
	width: 58%;
	background: rgba(160,100,255,0.06);
	border-color: rgba(160,100,255,0.12);
	color: rgba(160,100,255,0.9);
}
.e11-pricing-hero__anim .ha-up .ha-li { background: rgba(160,100,255,0.12); }
.e11-pricing-hero__anim .ha-up .ha-lv { color: #a064ff; }

/* ── Pricing Featured "Learn more" link ──
   The parent theme's `.entry-content a:not(.wp-block-button__link)`
   (specificity 0,2,1) forces text-decoration: underline on every non-
   button link inside post_content. Fighting it with `text-decoration:
   none` + a custom `border-bottom` produced a visible double underline.
   Instead: scope under `.e11-pricing-featured` (bumps specificity to
   0,3,1 so we win without !important), keep WP's native underline, and
   style it via long-hand `text-decoration-*` properties.
*/
.e11-pricing-featured .e11-pricing-featured__learn a {
	color: var(--wp--preset--color--primary-light);
	text-decoration-color: rgba(212, 104, 62, 0.35);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.e11-pricing-featured .e11-pricing-featured__learn a:hover {
	color: var(--wp--preset--color--base);
	text-decoration-color: var(--wp--preset--color--base);
}
.e11-pricing-featured .e11-pricing-featured__learn a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Hidden until /launchpad/ page is built out — re-enable by removing this rule. */
.e11-pricing-featured__learn { display: none; }

/* ── 3. Featured pricing card ── */
.e11-pricing-section { position: relative; z-index: 1; }

/* wp:html blocks don't inherit the parent section's `layout: constrained`
   content-size, so the raw HTML we emit for the featured card and the
   enterprise support strip would otherwise stretch to the section's
   padding edges (1232px at 1280vw) and visually mis-align with the 1200px
   header column. Pin them explicitly so they share the header grid.
   box-sizing:border-box is required because the featured card has its
   own padding — without it, max-width: 1200px caps only the content
   width and the outer box grows with padding to 1278px. */
.e11-pricing-featured,
.e11-pricing-enterprise,
.e11-pricing-cards {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.e11-pricing-featured {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--large);
	align-items: start;
	margin-bottom: var(--wp--preset--spacing--large);
	position: relative;
	overflow: hidden;
}
.e11-pricing-featured > * {
	margin-block-start: 0;
}
.e11-pricing-featured::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--accent));
}
/* Per-element margins must beat WP's `:root :where(.is-layout-flow) > *`
   reset (specificity 0,1,0) which loads from `global-styles-inline-css` AFTER
   this stylesheet. Scope each rule with `.e11-pricing-featured` to reach
   specificity (0,2,0) so our spacing actually applies. */
.e11-pricing-featured .e11-pricing-featured__label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary-light);
	margin-bottom: 0.75rem;
}
.e11-pricing-featured .e11-pricing-featured__starting {
	display: block;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 0.25rem;
}
.e11-pricing-featured .e11-pricing-featured__price {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: clamp(3rem, 2.5rem + 2vw, 4.5rem);
	font-weight: 800;
	color: var(--wp--preset--color--base);
	letter-spacing: -0.04em;
	line-height: 1;
	margin-bottom: 0.5rem;
}
.e11-pricing-featured .e11-pricing-featured__price-note {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--primary-light);
	font-weight: 600;
	margin-bottom: 1.25rem;
}
.e11-pricing-featured .e11-pricing-featured__desc {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.7;
	margin-bottom: 1.75rem;
}
.e11-pricing-featured__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.e11-pricing-featured .e11-pricing-featured__subhead {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--base);
	margin-bottom: 0.5rem;
}
.e11-pricing-featured .e11-pricing-featured__sublead {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 1rem;
	line-height: 1.6;
}
.e11-pricing-featured .e11-pricing-featured__hosting {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.e11-pricing-featured .e11-pricing-featured__hosting-head {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}
.e11-pricing-featured .e11-pricing-featured__hosting-head p {
	margin: 0;
}
.e11-pricing-featured .e11-pricing-featured__hosting-name {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--base);
}
.e11-pricing-featured .e11-pricing-featured__hosting-price {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}
.e11-pricing-featured .e11-pricing-featured__hosting-desc {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.6;
	margin: 0;
}

/* ── Shared pricing check list (featured card + add-on cards) ── */
.e11-pricing-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
}
.e11-pricing-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.75);
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.e11-pricing-checklist li:last-child { border-bottom: none; }
.e11-pricing-checklist li::before {
	content: "✓";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background: rgba(199, 62, 21, 0.2);
	border: 1px solid rgba(199, 62, 21, 0.35);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--primary-light);
	font-size: 0.6875rem;
	margin-top: 2px;
}

@media (max-width: 768px) {
	.e11-pricing-featured { grid-template-columns: 1fr; }
}

/* ── 4. Enterprise support strip ── */
.e11-pricing-section .e11-pricing-enterprise {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: var(--wp--preset--spacing--large);
	padding: 1.25rem 1.75rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	flex-wrap: wrap;
}
.e11-pricing-enterprise__copy {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	flex: 1;
}
.e11-pricing-enterprise .e11-pricing-enterprise__label {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	/* Primary (#C73E15) on dark measured ~3.2:1 — failed AA. Switched
	   to primary-light (#D4683E) which measures ~4.9:1. */
	color: var(--wp--preset--color--primary-light);
	white-space: nowrap;
	padding-right: 1rem;
	margin-right: 1rem;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: 0;
	margin-bottom: 0;
}
.e11-pricing-enterprise__desc {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	padding-left: 0;
	line-height: 1.5;
}
.e11-pricing-enterprise p {
	margin: 0;
}
/* Only zero the block-start on paragraphs in these cards so WP's layout-flow
   doesn't inject top margins. Leave margin-block-end alone so the per-element
   rules above (e.g. .e11-pricing-featured__starting { margin-bottom: 0.25rem })
   can create the intended vertical rhythm. */
.e11-pricing-featured__headline p,
.e11-pricing-featured__details p {
	margin-block-start: 0;
}
.e11-pricing-card p,
.e11-pricing-card h4 {
	margin-block-start: 0;
}
.e11-pricing-enterprise .e11-enterprise-cta .wp-block-button__link {
	font-family: var(--wp--preset--font-family--primary);
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.5rem 1rem;
	background: rgba(199, 62, 21, 0.15);
	/* Was primary-light (#D4683E) which measured 4.35:1 on the tinted
	   button bg — one step under WCAG AA. Switched to base (white) which
	   measures >13:1 and keeps the chip aesthetic via the orange border +
	   subtle orange bg. */
	color: var(--wp--preset--color--base);
	border: 1px solid rgba(199, 62, 21, 0.3);
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.e11-pricing-enterprise .e11-enterprise-cta .wp-block-button__link:hover,
.e11-pricing-enterprise .e11-enterprise-cta .wp-block-button__link:focus-visible {
	background: rgba(199, 62, 21, 0.25);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/* Mobile: the enterprise strip is a flex row of [label | desc] + CTA at
   desktop. At narrow widths, label + desc + CTA can't fit horizontally;
   stack everything vertically, drop the label's inline divider (which only
   reads correctly next to the desc), and let the CTA sit full-width under
   the copy so it remains a comfortable tap target. */
@media (max-width: 640px) {
	.e11-pricing-section .e11-pricing-enterprise {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		padding: 1rem 1.25rem;
	}
	.e11-pricing-section .e11-pricing-enterprise__copy {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	.e11-pricing-section .e11-pricing-enterprise__label {
		padding-right: 0;
		border-right: 0;
	}
	.e11-pricing-section .e11-pricing-enterprise .e11-enterprise-cta {
		align-self: flex-start;
	}
}

/* ── 5. Add-ons section header + grid ── */
.e11-pricing-addons__headline { color: var(--wp--preset--color--base); }
.e11-pricing-addons__subhead { color: rgba(255, 255, 255, 0.55); }

.e11-pricing-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
.e11-pricing-cards > * {
	margin-block-start: 0;
}
@media (max-width: 900px) {
	.e11-pricing-cards { grid-template-columns: 1fr; }
}

/* ── 6. Individual pricing card ── */
.e11-pricing-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	display: flex;
	flex-direction: column;
	position: relative;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.e11-pricing-card:hover {
	border-color: rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.06);
}
.e11-pricing-card .e11-pricing-card__label {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary-light);
	margin-bottom: 0.5rem;
}
.e11-pricing-card .e11-pricing-card__name {
	color: var(--wp--preset--color--base);
	font-size: 1.1875rem;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 0.75rem;
}
.e11-pricing-card .e11-pricing-card__starting {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
	display: block;
	margin-bottom: 0.375rem;
}
.e11-pricing-card .e11-pricing-card__price {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--wp--preset--color--base);
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: 1.5rem;
}
.e11-pricing-card__price span {
	font-size: 1rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0;
}
.e11-pricing-card .e11-pricing-checklist { flex: 1; }
.e11-pricing-card__note {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.4);
	font-style: italic;
	line-height: 1.5;
	padding-top: 0.5rem;
	margin: 0.75rem 0 0;
}

/* ── 7. Pricing CTA band ── */
.e11-pricing-cta {
	position: relative;
	overflow: hidden;
	background-image: url("assets/images/footer-brand-cta.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.e11-pricing-cta__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}
.e11-pricing-cta__highlight { color: var(--wp--preset--color--primary); }
.e11-pricing-cta__inner .e11-pricing-cta__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}
.e11-pricing-cta__trust-item {
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 0.4rem 1rem;
	border-radius: 999px;
}
.e11-pricing-cta__trust-dot { display: none; }

/* =============================================================================
 * SERVICE PAGE PATTERNS
 * Shared styles for service-hero, service-features, service-process,
 * service-results, and service-cta.
 * ============================================================================= */

/* ── 1. Service Hero ── */
.e11-service-hero {
	text-align: left;
	--hero-bg-position: top center;
}
.e11-service-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--xx-large);
	align-items: center;
}
@media (max-width: 860px) {
	.e11-service-hero__inner {
		grid-template-columns: 1fr;
	}
	.e11-service-hero__visual {
		order: -1;
		max-width: 480px;
		margin: 0 auto;
	}
}
.e11-service-hero__copy {
	max-width: 560px;
}
.e11-service-hero__headline {
	color: var(--wp--preset--color--base);
}
.e11-service-hero__desc {
	max-width: 520px;
}

/* ── 2. Service Features Grid ── */
.e11-service-features__header {
	text-align: center;
}
.e11-service-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.e11-service-features__grid > * {
	margin-block-start: 0;
}
@media (max-width: 900px) {
	.e11-service-features__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.e11-service-features__grid {
		grid-template-columns: 1fr;
	}
}

/* Service "vitals" card row — used on /services/performance-monitoring/ to
   show Core Web Vitals (LCP, CLS, INP, etc.). The container renders as a
   flow-layout wp-block-group with no gap by default, so the cards stack
   flush against each other. Turn it into a grid with breathing room. */
.e11-service-vitals {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}
.e11-service-vitals > * {
	margin-block-start: 0;
}
@media (max-width: 900px) {
	.e11-service-vitals {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.e11-service-vitals {
		grid-template-columns: 1fr;
	}
}

.e11-service-feat-card {
	background: rgba(255, 255, 255, 0.04);
	transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.e11-service-feat-card:hover {
	border-color: rgba(199, 62, 21, 0.35);
	background: rgba(199, 62, 21, 0.04);
	transform: translateY(-3px);
}
.e11-service-feat-card__title {
	color: var(--wp--preset--color--base);
}
.e11-service-feat-card__desc {
	color: rgba(255, 255, 255, 0.55);
}

/* ── 3. Service Process Steps ── */
.e11-service-process__header {
	text-align: center;
}
.e11-service-process__steps {
	display: grid;
	/* auto-fit with min width lets 3-card and 4-card variations both fill the row */
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	counter-reset: none;
}
.e11-service-process__steps > * {
	margin-block-start: 0;
}
@media (max-width: 1024px) {
	.e11-service-process__steps {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}
@media (max-width: 600px) {
	.e11-service-process__steps {
		grid-template-columns: 1fr;
	}
}

.e11-service-step {
	position: relative;
	padding-left: 0;
}
.e11-service-step__num {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	background: rgba(199, 62, 21, 0.12);
	border: 1px solid rgba(199, 62, 21, 0.25);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	line-height: 1;
	letter-spacing: 0;
}
.e11-service-step__title {
	color: var(--wp--preset--color--base);
}
.e11-service-step__desc {
	color: rgba(255, 255, 255, 0.55);
}

/* ── 4. Service Results (two-column) ── */
.e11-service-results__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.e11-service-results__inner > * {
	margin-block-start: 0;
}
@media (max-width: 768px) {
	.e11-service-results__inner {
		grid-template-columns: 1fr;
	}
}

.e11-service-results__headline {
	color: var(--wp--preset--color--base);
}
.e11-service-results__desc {
	color: rgba(255, 255, 255, 0.6);
}
.e11-service-results__checklist-wrap {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
}
.e11-service-results__checklist-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 1.25rem;
}
.e11-service-results__checklist {
	margin-top: 0;
}

/* ── 5. Service Overview (label + body two-column) ── */
.e11-service-overview {
	border-top: 1px solid rgba(255,255,255,0.07);
}
.e11-service-overview__inner {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: var(--wp--preset--spacing--x-large);
	align-items: start;
}
@media (max-width: 720px) {
	.e11-service-overview__inner { grid-template-columns: 1fr; }
}
.e11-service-overview__label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
	padding-top: 0.25rem;
}
.e11-service-overview__body h2 {
	font-size: clamp(1.4rem, 1rem + 1.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 1rem;
}
.e11-service-overview__body p {
	font-size: 1.0625rem;
	color: rgba(252,252,252,0.72);
	line-height: 1.75;
	margin-bottom: 1.25rem;
}
.e11-service-overview__body p:last-child { margin-bottom: 0; }

/* ── 6. Service FAQ ── */
.e11-service-faq {
	border-top: 1px solid rgba(255,255,255,0.07);
}
.e11-service-faq__item {
	border-top: 1px solid rgba(255,255,255,0.09);
	padding: 1.25rem 0;
}
.e11-service-faq__item:last-child {
	border-bottom: 1px solid rgba(255,255,255,0.09);
}
.e11-service-faq__q {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.6rem;
}
.e11-service-faq__a {
	font-size: 0.9375rem;
	color: rgba(252,252,252,0.6);
	line-height: 1.65;
}

/* Hero visual SVG sizing */
.e11-service-hero__visual svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

/* ── 8. Feature card — SVG icon support ── */
.e11-service-feat-card__icon {
	width: 88px;
	height: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}
.e11-service-feat-card__icon svg {
	width: 88px;
	height: 88px;
	overflow: visible;
}

/* =============================================================================
   WORK PAGE — hero, featured, grid, filters, tags
   ============================================================================= */

/* ── Hero background image system ──────────────────────────────────────
   Every hero embeds a wp:e11-group/hero-background block that renders a
   <div class="e11-hero-bg-wrap"> with an <img class="e11-hero-bg"> inside.
   Per-instance controls (image, position, fit, height, opacity, and wrap
   overflow) are set as inline styles on those two elements by the block.

   The hero section sets `position: relative` so the absolutely-positioned
   wrap can anchor to it. The hero itself does NOT set `overflow` — that
   was a dead knob because CSS custom properties don't inherit upward from
   a descendant block to its parent. The wrap's own overflow (controlled
   by the block's "Clip image to hero" toggle) is the effective boundary
   since the wrap sits at `inset: 0` inside the hero.
*/

/* Shared hero base */
.e11-about-hero,
.e11-work-hero,
.e11-service-hero,
.e11-pricing-hero,
.e11-blog-hero,
.e11-contact-hero,
.e11-faq-hero,
.e11-training-hero,
.e11-case-hero {
	position: relative;
}

/* Content above the bg image */
.e11-about-hero > *,
.e11-work-hero > *,
.e11-service-hero > *,
.e11-pricing-hero > *,
.e11-blog-hero > *,
.e11-contact-hero > *,
.e11-faq-hero > *,
.e11-training-hero > *,
.e11-case-hero > *,
.e11-home-hero > * {
	position: relative;
	z-index: 1;
}

/* The bg image — base styles for all heroes. When rendered by the
   hero-background block, inline styles on the <img> handle position/fit/
   height/opacity per-instance. These base rules handle layout concerns
   (absolute positioning, stripping WP layout interference). */
.e11-hero-bg.e11-hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--hero-bg-height, 100%);
	object-fit: var(--hero-bg-fit, cover);
	object-position: var(--hero-bg-position, center top);
	opacity: var(--hero-bg-opacity, 0.7);
	pointer-events: none;
	z-index: 0;
	max-width: none;
	margin: 0;
	padding: 0;
}
/* The hero-background block wrapper — passes CSS custom properties to
   the parent hero section and positions itself out of flow.

   SCOPED under hero parent classes to bump specificity to (0,2,0). This
   beats WP's `.is-layout-constrained > *` and `.is-layout-flow > *` rules
   (both 0,1,0) that would otherwise cap the wrapper at contentSize and
   add auto margins — a particular problem when the hero group uses
   constrained layout with contentSize 900–1200px, which would make the
   absolute-positioned wrapper narrower than the full hero. See MEMORY
   note: WP global-styles cascade gotcha. */
.e11-about-hero > .e11-hero-bg-wrap,
.e11-work-hero > .e11-hero-bg-wrap,
.e11-service-hero > .e11-hero-bg-wrap,
.e11-pricing-hero > .e11-hero-bg-wrap,
.e11-blog-hero > .e11-hero-bg-wrap,
.e11-contact-hero > .e11-hero-bg-wrap,
.e11-faq-hero > .e11-hero-bg-wrap,
.e11-training-hero > .e11-hero-bg-wrap,
.e11-training-detail-hero > .e11-hero-bg-wrap,
.e11-case-hero > .e11-hero-bg-wrap,
.e11-hero > .e11-hero-bg-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
	max-width: none;
	margin: 0;
	padding: 0;
}
.e11-about-hero > .e11-hero-bg-wrap .e11-hero-bg,
.e11-work-hero > .e11-hero-bg-wrap .e11-hero-bg,
.e11-service-hero > .e11-hero-bg-wrap .e11-hero-bg,
.e11-pricing-hero > .e11-hero-bg-wrap .e11-hero-bg,
.e11-blog-hero > .e11-hero-bg-wrap .e11-hero-bg,
.e11-contact-hero > .e11-hero-bg-wrap .e11-hero-bg,
.e11-faq-hero > .e11-hero-bg-wrap .e11-hero-bg,
.e11-training-hero > .e11-hero-bg-wrap .e11-hero-bg,
.e11-training-detail-hero > .e11-hero-bg-wrap .e11-hero-bg,
.e11-case-hero > .e11-hero-bg-wrap .e11-hero-bg,
.e11-hero > .e11-hero-bg-wrap .e11-hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	z-index: 0;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ── Work Featured Case Study ── */
.e11-work-featured {
	position: relative;
}

.e11-work-featured__inner {
	gap: var(--wp--preset--spacing--large);
}

.e11-work-featured__image-wrap {
	border-radius: 12px;
	overflow: hidden;
}

.e11-work-featured__image-wrap img {
	width: 100%;
	height: 480px;
	object-fit: cover;
	display: block;
}

.e11-work-badge {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: rgba(199, 62, 21, 0.2);
	color: var(--wp--preset--color--primary-light);
	border: 1px solid rgba(199, 62, 21, 0.3);
	margin-bottom: 1.25rem;
}

.e11-work-featured__stat-number {
	font-family: var(--wp--preset--font-family--secondary);
	color: var(--wp--preset--color--base);
}

.e11-work-featured__stats {
	gap: var(--wp--preset--spacing--large);
}

/* ── Work tag pills ── */
.e11-work-tag {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.75);
}

.e11-work-featured__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
}

/* ── Work grid header ── */
.e11-work-grid-header {
	gap: var(--wp--preset--spacing--medium);
}

/* ── Work filter dropdowns (Services + Industries, multi-select) ──
 * Two native <details> elements, each containing a column of checkbox
 * options plus a Clear button. Disclosure is handled by the browser so
 * keyboard + screen-reader support comes free; filter state lives in a
 * JS module (initWorkFilters) that listens for checkbox changes and
 * toggles cards via their data-services / data-industries attributes.
 */
.e11-work-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.e11-work-filterdrop {
	position: relative;
	min-width: 13rem;
}

.e11-work-filterdrop__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.7rem 1rem;
	border-radius: 8px;
	/* Stronger contrast than the previous near-transparent background so
	   the filter bar actually reads as an interactive control on the dark
	   page theme. */
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	list-style: none;
	transition: background 0.15s ease, border-color 0.15s ease;
	-webkit-user-select: none;
	user-select: none;
}
/* Kill the default triangle marker across browsers */
.e11-work-filterdrop__trigger::-webkit-details-marker { display: none; }
.e11-work-filterdrop__trigger::marker { content: ''; }

.e11-work-filterdrop__trigger:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.4);
}
.e11-work-filterdrop[open] .e11-work-filterdrop__trigger,
.e11-work-filterdrop.has-selection .e11-work-filterdrop__trigger {
	background: rgba(199, 62, 21, 0.1);
	border-color: rgba(199, 62, 21, 0.45);
	color: var(--wp--preset--color--primary-light);
}
.e11-work-filterdrop__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.e11-work-filterdrop__label { flex: 1; }
.e11-work-filterdrop__count {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-light);
	min-width: 1.5rem;
	text-align: right;
}
.e11-work-filterdrop__caret {
	/* CSS border triangle instead of the ▾ unicode character which renders
	   inconsistently across font stacks. */
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 0.15s ease;
	flex-shrink: 0;
	margin-top: 1px;
}
.e11-work-filterdrop[open] .e11-work-filterdrop__caret { transform: rotate(180deg); }

.e11-work-filterdrop__panel {
	position: absolute;
	top: calc(100% + 0.35rem);
	left: 0;
	right: 0;
	z-index: 200;
	padding: 0.75rem;
	background: #1A0E08;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	max-height: 60vh;
	overflow-y: auto;
}

.e11-work-filterdrop__options {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin-bottom: 0.5rem;
}
.e11-work-filterdrop__option {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.5rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.8);
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.e11-work-filterdrop__option:hover { background: rgba(255, 255, 255, 0.04); }
.e11-work-filterdrop__option input[type=checkbox] {
	width: 16px;
	height: 16px;
	accent-color: var(--wp--preset--color--primary);
	cursor: pointer;
	flex-shrink: 0;
}
.e11-work-filterdrop__option input[type=checkbox]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.e11-work-filterdrop__clear {
	display: inline-block;
	width: 100%;
	padding: 0.4rem 0.5rem;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: transparent;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
	cursor: pointer;
	transition: color 0.15s ease;
}
.e11-work-filterdrop__clear:hover { color: var(--wp--preset--color--primary-light); }
.e11-work-filterdrop__clear:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (max-width: 640px) {
	.e11-work-filterdrop { flex: 1; min-width: 0; }
}

.e11-work-no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--wp--preset--spacing--x-large) 0;
}

.e11-work-no-results p {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.5);
}

/* ── Work card grid ── */
/* Strip the background from the showcase section — it should be
   transparent so the page bg shows through. WP applies .has-dark-background-color
   and combo-dark variant styles from the saved block attributes. */

.e11-work-showcase__grid .e11-case-grid,
.wp-block-e11-group-case-study-grid.e11-work-showcase__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.e11-work-showcase__grid .e11-case-grid,
	.wp-block-e11-group-case-study-grid.e11-work-showcase__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.e11-work-showcase__grid .e11-case-grid,
	.wp-block-e11-group-case-study-grid.e11-work-showcase__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.e11-work-featured__image-wrap img {
		height: 480px;
	}
}

@media (max-width: 899px) {
	.e11-work-featured__image-wrap img {
		height: 300px;
	}
}

/* ── Work CTA trust strip ── */
.e11-cta__trust {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.e11-cta__trust-item {
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 0.4rem 1rem;
	border-radius: 999px;
}

.e11-cta__trust-dot {
	display: none;
}


/* =============================================================================
   CASE STUDY DETAIL — hero, stats bar, article, sidebar, pagination
   ============================================================================= */

/* ── Case study hero (rendered by e11-group/case-study-hero block) ──
   Compact, text-only hero. The featured image is intentionally not
   shown here — the visual payoff is the stats bar below and the body
   images inside the article. Keeps the top of the page focused on
   "what this project is" and "what happened" instead of decoration.
*/
.e11-case-hero {
	background: var(--wp--preset--color--dark);
	padding: calc(96px + var(--wp--preset--spacing--large)) var(--wp--preset--spacing--medium) var(--wp--preset--spacing--large);
}

.e11-case-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.e11-case-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	margin-bottom: var(--wp--preset--spacing--medium);
	transition: color 0.2s ease;
}

.e11-case-hero__back:hover {
	color: var(--wp--preset--color--base);
}

.e11-case-hero__back:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

.e11-case-hero__tags {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.e11-case-hero__tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: rgba(199, 62, 21, 0.2);
	border: 1px solid rgba(199, 62, 21, 0.4);
	/* Primary-light (#D4683E) on the subtly-tinted orange chip background
	   measured ~3.1:1 — below AA (4.5:1 needed for small text). Switched
	   to near-white which measures >12:1 and keeps the warm chip identity
	   in the border/background. */
	color: rgba(255, 255, 255, 0.95);
}

.e11-case-hero__client {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-light);
	margin: 0 0 0.5rem;
}

.e11-case-hero__title {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	font-weight: 800;
	color: var(--wp--preset--color--base);
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0;
}

/* ── Case study showcase ──
   Split-layout section that sits below the text-only case-study hero.
   Featured image on one side (so Suman's beautiful hero art gets the
   prominence it deserves), vertically-stacked metric rows on the other.
   Stacking metrics vertically instead of columning them means long
   labels never get squashed. Each metric has a full row with a big
   number and a legible label.
*/
.e11-case-showcase {
	background: var(--wp--preset--color--tertiary);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding: var(--wp--preset--spacing--x-large) var(--wp--preset--spacing--medium);
}

.e11-case-showcase__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--large);
	align-items: stretch;
}

@media (min-width: 960px) {
	.e11-case-showcase__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--x-large);
	}
}

/* Media — the featured image panel. Rounded, shadowed, aspect-ratio
   locked so the grid doesn't collapse when the image is still loading. */
.e11-case-showcase__media {
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.25);
	aspect-ratio: 4 / 3;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

@media (min-width: 960px) {
	.e11-case-showcase__media {
		aspect-ratio: auto;
		height: 100%;
		min-height: 380px;
	}
}

.e11-case-showcase__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Stats column — vertical list of metric rows. Each row has top/bottom
   hairlines so they read as a tidy data list without needing a card
   treatment per metric. Numbers are big; labels breathe because the
   row is the full column width. */
.e11-case-showcase__stats {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.e11-case-showcase__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--medium);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-light);
}

.e11-case-showcase__grid {
	display: flex;
	flex-direction: column;
}

.e11-case-showcase__metric {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding: var(--wp--preset--spacing--medium) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.e11-case-showcase__metric:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.e11-case-showcase__number {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
	font-weight: 800;
	color: var(--wp--preset--color--base);
	letter-spacing: -0.035em;
	line-height: 1;
}

.e11-case-showcase__label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.45;
}

/* ── Body — two-column grid (article + sidebar) ── */
.e11-case-body__grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: var(--wp--preset--spacing--large);
	align-items: start;
}

@media (max-width: 900px) {
	.e11-case-body__grid {
		grid-template-columns: 1fr;
	}
}

/* ── Body — fallback styles for basic post content ── */
.e11-case-body p,
.e11-case-article p {
	font-size: 1rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.72);
}

.e11-case-body h2,
.e11-case-article h2 {
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	display: inline-block;
	font-size: clamp(1.375rem, 1.25rem + 0.75vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	margin-top: var(--wp--preset--spacing--large);
}

.e11-case-body h2:first-child,
.e11-case-article h2:first-child {
	margin-top: 0;
}

/* ── Body two-column layout (pattern-based fallback) ── */
.e11-case-body__inner {
	align-items: start;
}

/* ── Article sections ── */
.e11-case-article__section {
	margin-bottom: var(--wp--preset--spacing--large);
}

.e11-case-article__section:last-child {
	margin-bottom: 0;
}

.e11-case-article__heading {
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	display: inline-block;
}

.e11-case-article__image {
	border-radius: 12px;
	overflow: hidden;
}

/* ── Case Gallery (e11-group/case-gallery block) ──
   Horizontal scroll-snap carousel for case study body content. CSS is
   the primary mechanism; e11.js adds prev/next buttons and disables
   them at the track edges.

   The track is a flex row that overflow-scrolls horizontally. Each
   slide has `flex: 0 0 <share-of-track>` sized from --per-view, so
   the user always sees N slides per view on desktop (default 3).
   Mobile collapses to 1 per view; tablet to 2.
*/
.e11-case-gallery {
	position: relative;
	margin: var(--wp--preset--spacing--large) 0;
	--per-view: 3;
	--gap: 1rem;
}
.e11-case-gallery[data-per-view="2"] { --per-view: 2; }
.e11-case-gallery[data-per-view="3"] { --per-view: 3; }
.e11-case-gallery[data-per-view="4"] { --per-view: 4; }

.e11-case-gallery__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* breathing room so the first/last slide isn't flush against the
	   prev/next buttons when they're visible */
	padding-bottom: 0.25rem;
}
.e11-case-gallery__track::-webkit-scrollbar { display: none; }

.e11-case-gallery__slide {
	flex: 0 0 calc(100% - var(--gap) + (var(--gap) / var(--per-view)));
	scroll-snap-align: start;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
}
@media (min-width: 640px) {
	.e11-case-gallery__slide {
		flex: 0 0 calc((100% - var(--gap)) / 2);
	}
}
@media (min-width: 900px) {
	.e11-case-gallery__slide {
		flex: 0 0 calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view));
	}
}

.e11-case-gallery__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

/* Prev/next buttons — overlay the track edges */
.e11-case-gallery__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(26, 14, 8, 0.85);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
	backdrop-filter: blur(8px);
}
.e11-case-gallery__btn:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}
.e11-case-gallery__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.e11-case-gallery__btn:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}
.e11-case-gallery__btn--prev { left: -0.5rem; }
.e11-case-gallery__btn--next { right: -0.5rem; }

/* Hide buttons when there's nothing to scroll — small galleries just
   show the grid instead. The JS toggles disabled; we also hide on very
   narrow viewports where the native touch-scroll is nicer. */
@media (max-width: 639px) {
	.e11-case-gallery__btn { display: none; }
}

/* Editor state — Gutenberg wraps each block in its own editor chrome
   so prev/next buttons don't appear (no render.php running). Just show
   the track as a scrollable row so editors can preview the slides. */
.e11-case-gallery--empty {
	min-height: 200px;
}

/* ── Sidebar ── */
.e11-case-sidebar {
	position: sticky;
	top: 96px;
}

.e11-case-sidebar__card {
	background: var(--wp--preset--color--tertiary);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--large);
}

.e11-case-sidebar__heading {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--base);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 1.25rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.e11-case-sidebar__list {
	margin: 0;
	padding: 0;
}

.e11-case-sidebar__row {
	display: flex;
	flex-direction: column;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.e11-case-sidebar__row--last,
.e11-case-sidebar__row:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.e11-case-sidebar__term {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Muted (#7A6A5E) on the sidebar card's --tertiary background
	   measured ~3.9:1 — below AA. Swapped to a lighter tint that
	   measures >5:1 while keeping the term less prominent than
	   the detail value that follows. */
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 0.25rem;
}

.e11-case-sidebar__detail {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--neutral-light);
	margin: 0;
}

.e11-case-sidebar__link {
	color: var(--wp--preset--color--primary-light);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	transition: color 0.2s ease;
}

.e11-case-sidebar__link::after {
	content: '\2197';
	font-size: 0.875em;
}

.e11-case-sidebar__link:hover {
	color: var(--wp--preset--color--base);
}

.e11-case-sidebar__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── Related work grid ── */
.e11-case-related__header {
	gap: var(--wp--preset--spacing--medium);
}

/* ── Case study pagination ── */
.e11-case-pagination__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--medium);
}

.e11-case-pagination__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.e11-case-pagination__item:hover {
	opacity: 0.75;
}

.e11-case-pagination__item:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
	border-radius: 2px;
}

.e11-case-pagination__item--next {
	text-align: right;
}

.e11-case-pagination__dir {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.e11-case-pagination__item--next .e11-case-pagination__dir {
	justify-content: flex-end;
}

.e11-case-pagination__title {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--base);
	letter-spacing: -0.01em;
}

.e11-case-pagination__all {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	white-space: nowrap;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.e11-case-pagination__all:hover {
	color: var(--wp--preset--color--base);
	border-color: rgba(255, 255, 255, 0.3);
}

.e11-case-pagination__all:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 999px;
}

@media (max-width: 600px) {
	.e11-case-pagination__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.e11-case-pagination__item--next {
		text-align: center;
	}

	.e11-case-pagination__item--next .e11-case-pagination__dir {
		justify-content: center;
	}
}

/* ============================================================
   ABOUT PAGE
   Patterns: about-hero, about-why, about-mission,
             about-values, about-team, about-cta
   All classes prefixed with .e11-about-
============================================================ */

/* ── Keyframes ── */
@keyframes e11-fade-in-up {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes e11-count-up {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes e11-bar-grow {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
@keyframes e11-pulse-dot {
	0%   { transform: scale(1); opacity: 1; }
	70%  { transform: scale(2.2); opacity: 0; }
	100% { transform: scale(1); opacity: 0; }
}
@keyframes e11-float-slow {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-9px); }
}
@keyframes float-slow {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-9px); }
}
@keyframes e11-float-mid {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-6px); }
}
@keyframes float-mid {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-6px); }
}
@keyframes e11-float-fast {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-4px); }
}
@keyframes float-fast {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-4px); }
}
@keyframes e11-eye-blink {
	0%, 88%, 100% { transform: scaleY(1); }
	92%            { transform: scaleY(0.1); }
}
@keyframes e11-iris-pulse {
	0%, 100% { r: 6; opacity: 1; }
	50%       { r: 8; opacity: 0.6; }
}
@keyframes e11-star-rise {
	0%, 100% { transform: translateY(0) scale(1); opacity: 0.9; }
	50%       { transform: translateY(-4px) scale(1.1); opacity: 1; }
}
@keyframes e11-ray-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@keyframes e11-spark-float {
	0%, 100% { opacity: 0.3; transform: translateY(0); }
	50%       { opacity: 1; transform: translateY(-3px); }
}

/* ─────────────────────────────────────────────
   1. Hero
───────────────────────────────────────────── */
.e11-about-hero {
	text-align: center;
}
.e11-about-hero .e11-overline {
	display: block;
	text-align: center;
}
.e11-about-hero__inner {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	animation: e11-fade-in-up 0.7s ease both;
}

/* ─────────────────────────────────────────────
   2. Impact Stats
───────────────────────────────────────────── */
.e11-about-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--medium);
}
@media (min-width: 768px) {
	.e11-about-stats__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.e11-about-stats__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--wp--preset--spacing--medium) 0;
	animation: e11-count-up 0.6s ease both;
}
.e11-about-stats__item:nth-child(2) { animation-delay: 0.1s; }
.e11-about-stats__item:nth-child(3) { animation-delay: 0.2s; }
.e11-about-stats__item:nth-child(4) { animation-delay: 0.3s; }

/* Pulse dot */
.e11-about-stat-pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	position: relative;
	flex-shrink: 0;
	margin-bottom: 0.5rem;
}
.e11-about-stat-pulse::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	animation: e11-pulse-dot 2s ease-out infinite;
}
.e11-about-stats__item--accent .e11-about-stat-pulse {
	background: var(--wp--preset--color--accent);
}
.e11-about-stats__item--accent .e11-about-stat-pulse::after {
	background: var(--wp--preset--color--accent);
	animation-delay: 0.5s;
}
.e11-about-stats__item--primary-light .e11-about-stat-pulse {
	background: var(--wp--preset--color--primary-light);
}
.e11-about-stats__item--primary-light .e11-about-stat-pulse::after {
	background: var(--wp--preset--color--primary-light);
	animation-delay: 1s;
}

/* Stat number & suffix */
.e11-about-stats__value {
	font-family: var(--wp--preset--font-family--secondary);
	color: var(--wp--preset--color--base);
}
.e11-about-stats__value .e11-about-stats__suffix {
	color: var(--wp--preset--color--primary);
}
.e11-about-stats__item--accent .e11-about-stats__suffix {
	color: var(--wp--preset--color--accent);
}
.e11-about-stats__item--primary-light .e11-about-stats__suffix {
	color: var(--wp--preset--color--primary-light);
}

/* Progress bar — rendered via pseudo-elements so the pattern needs zero wp:html.
   ::before is the track, ::after is the filled portion. Width per-item is
   assigned by nth-child so editors don't manage class variants. */
.e11-about-stats__item {
	position: relative;
	padding-bottom: 0.875rem;
}
.e11-about-stats__item::before,
.e11-about-stats__item::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2px;
	border-radius: 2px;
}
.e11-about-stats__item::before {
	right: 0;
	background: rgba(255, 255, 255, 0.08);
}
.e11-about-stats__item::after {
	background: var(--wp--preset--color--primary);
	transform-origin: left center;
	animation: e11-bar-grow 1.2s 0.5s cubic-bezier(.22,.68,0,1.2) both;
}
.e11-about-stats__item:nth-child(1)::after { width: 98%; }
.e11-about-stats__item:nth-child(2)::after { width: 100%; animation-delay: 0.65s; }
.e11-about-stats__item:nth-child(3)::after { width: 90%; animation-delay: 0.8s; }
.e11-about-stats__item:nth-child(4)::after { width: 80%; animation-delay: 0.95s; }
.e11-about-stats__item--accent::after {
	background: var(--wp--preset--color--accent);
}
.e11-about-stats__item--primary-light::after {
	background: var(--wp--preset--color--primary-light);
}

/* ─────────────────────────────────────────────
   3. Why E11 — Pillars
───────────────────────────────────────────── */
/* Background images — applied via CSS because WP's block attribute
   rendering doesn't always output background-image from saved content.
   These match the original design specs exactly. */
.e11-about-why {
	background-image: url("assets/images/brand-body-bg.svg");
	background-size: 100% auto;
	background-position: center center;
	background-repeat: no-repeat;
}
.e11-about-values {
	background-image: url("assets/images/brand-bg-11.svg");
	background-size: auto 100%;
	background-position: center right;
	background-repeat: no-repeat;
}
@media (max-width: 768px) {
	.e11-about-values {
		background-size: auto 40%;
		background-position: bottom right;
	}
}

.e11-about-why__intro {
	max-width: 800px;
	margin-bottom: var(--wp--preset--spacing--xx-large);
}

.e11-about-why__pillars {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xx-large);
}

.e11-about-pillar {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--x-large);
	align-items: center;
}
@media (min-width: 900px) {
	.e11-about-pillar {
		grid-template-columns: 1fr 1fr;
	}
	.e11-about-pillar--reverse .e11-about-pillar__visual {
		order: -1;
	}
}

.e11-about-pillar__content {
	/* inherits default flow */
}

.e11-about-pillar__visual {
	border-radius: 1rem;
	overflow: hidden;
}
.e11-about-pillar__visual .wp-block-image img,
.e11-about-pillar__img img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	display: block;
}
@media (max-width: 899px) {
	.e11-about-pillar__visual .wp-block-image img,
	.e11-about-pillar__img img {
		height: 280px;
	}
}

.e11-about-pillar__visual--svg {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	aspect-ratio: 4 / 3;
	border-radius: 1rem;
}
.e11-about-pillar__diagram {
	width: 80%;
	max-width: 360px;
	height: auto;
}

.e11-about-pillar__callout {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	background: rgba(199, 62, 21, 0.08);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 0 0.5rem 0.5rem 0;
}

/* Diagram float animations (referenced inline in SVG) */
.e11-about-pillar__visual--svg svg [style*="float-slow"] { animation: e11-float-slow 6s ease-in-out infinite; }
.e11-about-pillar__visual--svg svg [style*="float-mid"]  { animation: e11-float-mid 7s ease-in-out infinite; }
.e11-about-pillar__visual--svg svg [style*="float-fast"] { animation: e11-float-fast 5.5s ease-in-out infinite; }

/* ─────────────────────────────────────────────
   4. Mission Statement
───────────────────────────────────────────── */
.e11-about-mission {
	position: relative;
	overflow: hidden;
}
.e11-about-mission::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("assets/images/child-hands-heart.jpg") center / cover no-repeat;
	z-index: 0;
}
.e11-about-mission::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		135deg,
		rgba(26, 14, 8, 0.88) 0%,
		rgba(26, 14, 8, 0.82) 50%,
		rgba(26, 14, 8, 0.92) 100%
	);
}
.e11-about-mission__inner {
	position: relative;
	z-index: 1;
	text-align: center;
}
.e11-about-mission__text mark {
	background-color: transparent;
}

/* ─────────────────────────────────────────────
   5. Values
───────────────────────────────────────────── */
.e11-about-values__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--medium);
}
@media (min-width: 640px) {
	.e11-about-values__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.e11-about-value-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1rem;
	padding: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--large);
	position: relative;
	overflow: hidden;
	transition: border-color 0.3s ease, transform 0.3s ease;
}
.e11-about-value-card:hover {
	border-color: rgba(199, 62, 21, 0.3);
	transform: translateY(-3px);
}
.e11-about-value-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--accent));
	opacity: 0;
	transition: opacity 0.3s ease;
}
.e11-about-value-card:hover::before {
	opacity: 1;
}

.e11-about-value-card__icon {
	width: 88px;
	height: 88px;
	margin-bottom: 1.25rem;
}

/* Value card SVG animations */
.e11-eye-lid {
	transform-origin: center;
	animation: e11-eye-blink 4s ease-in-out infinite;
}
.e11-eye-iris {
	animation: e11-iris-pulse 3s ease-in-out infinite;
}
.e11-kindness-star {
	transform-origin: center;
	animation: e11-star-rise 3s ease-in-out infinite;
}
.e11-kindness-ray {
	transform-origin: 44px 38px;
	animation: e11-ray-spin 8s linear infinite;
}
.e11-spark-a { animation: e11-spark-float 2.5s ease-in-out infinite; }
.e11-spark-b { animation: e11-spark-float 2.5s 0.8s ease-in-out infinite; }
.e11-spark-c { animation: e11-spark-float 2.5s 1.6s ease-in-out infinite; }

/* ─────────────────────────────────────────────
   6. Team
───────────────────────────────────────────── */
.e11-about-team__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--large);
}
@media (min-width: 900px) {
	.e11-about-team__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.e11-about-team__member {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: var(--wp--preset--spacing--medium);
	align-items: start;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 1rem;
	padding: var(--wp--preset--spacing--medium);
	transition: border-color 0.3s ease, transform 0.3s ease;
}
.e11-about-team__member:hover {
	border-color: rgba(199, 62, 21, 0.2);
	transform: translateY(-2px);
}
.e11-about-team__member:focus-within {
	border-color: rgba(199, 62, 21, 0.4);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.e11-about-team__avatar {
	width: 100%;
}
.e11-about-team__avatar .wp-block-image,
.e11-about-team__avatar figure {
	margin: 0;
}
.e11-about-team__photo img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: top center;
	display: block;
	border-radius: 0.75rem;
	transition: transform 0.4s ease;
}
.e11-about-team__member:hover .e11-about-team__photo img {
	transform: scale(1.04);
}

.e11-about-team__info {
	padding-top: 0.25rem;
}

@media (max-width: 559px) {
	.e11-about-team__member {
		grid-template-columns: 1fr;
	}
	.e11-about-team__photo img {
		aspect-ratio: 4 / 3;
		max-height: 280px;
	}
}

/* ─────────────────────────────────────────────
   7. About CTA
───────────────────────────────────────────── */
.e11-about-cta__trust {
	gap: 0.5rem;
}

/* ═════════════════════════════════════════════
   FAQ PAGE
   Sections: Hero, Body, Category, Item/Accordion, CTA
═════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. FAQ Hero
───────────────────────────────────────────── */
.e11-faq-hero .e11-overline {
	display: block;
}

/* ─────────────────────────────────────────────
   2. FAQ Body
───────────────────────────────────────────── */
.e11-faq-body {
	background-color: var(--wp--preset--color--dark);
}

/* ─────────────────────────────────────────────
   3. FAQ Category
───────────────────────────────────────────── */
.e11-faq-category__title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-family: var(--wp--preset--font-family--secondary);
}

.e11-faq-category__title::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 1em;
	background: var(--wp--preset--color--primary);
	border-radius: 2px;
	flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   4. FAQ Item / Accordion (wp:details)
───────────────────────────────────────────── */
.e11-faq-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	margin-top: 0;
	margin-bottom: 0;
}

.e11-faq-item.e11-faq-item--last,
.e11-faq-category--last .e11-faq-item--last {
	border-bottom: none;
}

/* summary — the clickable trigger row */
.e11-faq-item summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--medium);
	width: 100%;
	padding: 1.25rem 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--base);
	transition: color 0.2s ease;
}

.e11-faq-item summary::-webkit-details-marker {
	display: none;
}

/* +/- icon via pseudo-element */
.e11-faq-item summary::after {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--primary);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='9' width='14' height='2' rx='1'/%3E%3Crect x='9' y='3' width='2' height='14' rx='1'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	transition: mask-image 0.2s ease, transform 0.2s ease;
}

.e11-faq-item[open] summary::after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='9' width='14' height='2' rx='1'/%3E%3C/svg%3E");
}

/* Hover state */
.e11-faq-item summary:hover {
	color: var(--wp--preset--color--primary-light);
}

/* Focus-visible state */
.e11-faq-item summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 2px;
	color: var(--wp--preset--color--primary-light);
}

/* Active (pressed) state */
.e11-faq-item summary:active {
	color: var(--wp--preset--color--primary);
}

/* Open state — summary text color shift */
.e11-faq-item[open] summary {
	color: var(--wp--preset--color--primary-light);
}

/* Answer panel */
.e11-faq-item .e11-faq-answer {
	padding-bottom: 1.375rem;
}

.e11-faq-item[open] .e11-faq-answer {
	animation: accordion-reveal 0.2s ease;
}

/* ─────────────────────────────────────────────
   5. FAQ CTA trust row
───────────────────────────────────────────── */
.e11-faq-cta__trust {
	gap: 0.5rem;
}

.e11-faq-cta__trust-item {
	color: rgba(255, 255, 255, 0.65);
}

/* Dot separators between trust items — no markup needed */
.e11-faq-cta__trust .e11-faq-cta__trust-item + .e11-faq-cta__trust-item::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	margin-right: 0.75rem;
	margin-bottom: 2px;
	vertical-align: middle;
	flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   6. Responsive
───────────────────────────────────────────── */
@media (min-width: 640px) {
	.e11-faq-item summary {
		font-size: 1.0625rem;
	}
}

/* ==========================================================================
   Training Library
   Styles for the training archive and single-training page templates.
   BEM namespace: e11-training-*
   ========================================================================== */

/* ─────────────────────────────────────────────
   1. Training Hero (archive)
───────────────────────────────────────────── */
.e11-training-hero {
	position: relative;
}

/* ─────────────────────────────────────────────
   2. Training Grid (archive)
───────────────────────────────────────────── */
.e11-training-grid-section {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Training toolbar (search + filters + count) ── */

.e11-training-toolbar {
	max-width: 1200px;
	margin: 0 auto;
	background: var(--wp--preset--color--dark);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding: var(--wp--preset--spacing--medium) 0 var(--wp--preset--spacing--small);
	position: sticky;
	top: 72px;
	z-index: 40;
}

.e11-training-toolbar__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--small);
}

.e11-training-toolbar__row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--small);
	flex-wrap: wrap;
}

/* Search input */
.e11-training-search-wrap {
	position: relative;
	flex: 1;
	min-width: 200px;
	max-width: 400px;
}

.e11-training-search-icon {
	position: absolute;
	left: 0.875rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--muted);
	pointer-events: none;
}

.e11-training-search {
	width: 100%;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0.5rem;
	padding: 0.625rem 1rem 0.625rem 2.5rem;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 0.875rem;
	color: var(--wp--preset--color--base);
	transition: border-color 0.2s, background 0.2s;
}

.e11-training-search::placeholder {
	color: var(--wp--preset--color--muted);
}

.e11-training-search:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	background: rgba(255, 255, 255, 0.1);
}

/* Results info */
.e11-training-results-info {
	font-family: var(--wp--preset--font-family--primary);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	margin-left: auto;
}

.e11-training-results-info strong {
	color: var(--wp--preset--color--neutral-light);
}

/* ── Taxonomy filter bar ── */
.e11-training-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.e11-training-filter {
	display: inline-block;
	padding: 0.4375rem 1rem;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.6);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 100px;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.e11-training-filter:hover {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary-light);
}

.e11-training-filter:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.e11-training-filter.is-active {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* Constrain query + grid to content width */
.e11-training-query {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--wp--preset--spacing--large);
}

/* The post-template block renders as the grid container */
.e11-training-query .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--medium);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1024px) {
	.e11-training-query .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.e11-training-query .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* Hidden card (filtered out by search/category) */
.e11-training-card-wrap.is-hidden {
	display: none;
}

/* Client-side empty state shown by JS */
.e11-training-no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--wp--preset--spacing--xx-large) var(--wp--preset--spacing--medium);
}

.e11-training-no-results p {
	color: rgba(255, 255, 255, 0.55);
	font-size: 1.0625rem;
}

/* Card wrapper (li) — stretch to fill grid row */
.e11-training-query .wp-block-post-template > li {
	display: flex;
}

/* Card */
.e11-training-card {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.e11-training-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	background-color: rgba(255, 255, 255, 0.06);
}

.e11-training-card:focus-within {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
}

/* Thumbnail */
.e11-training-card .e11-training-card__thumb {
	position: relative;
	flex-shrink: 0;
}

.e11-training-card .wp-block-post-featured-image {
	margin: 0;
}

.e11-training-card .wp-block-post-featured-image img,
.e11-training-card .wp-block-post-featured-image a {
	display: block;
	width: 100%;
}

.e11-training-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Card body */
.e11-training-card__content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Category tag */
.e11-training-card .wp-block-post-terms {
	display: block;
}

.e11-training-card .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

/* Title */
.e11-training-card .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.e11-training-card .wp-block-post-title a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: color 0.15s;
}

.e11-training-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-light);
}

.e11-training-card .wp-block-post-title a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Excerpt */
.e11-training-card .wp-block-post-excerpt {
	flex: 1;
}

.e11-training-card .e11-training-card__excerpt .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Meta footer row */
.e11-training-card__meta {
	margin-top: auto;
}

.e11-training-card__meta .wp-block-post-date {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.45);
}

.e11-training-card__meta .wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

/* Pagination */
.e11-training-pagination {
	margin-top: var(--wp--preset--spacing--x-large);
}

.e11-training-pagination .wp-block-query-pagination-numbers .page-numbers,
.e11-training-pagination .wp-block-query-pagination-previous,
.e11-training-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.09);
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.e11-training-pagination .wp-block-query-pagination-numbers .page-numbers:hover,
.e11-training-pagination .wp-block-query-pagination-previous:hover,
.e11-training-pagination .wp-block-query-pagination-next:hover {
	background: rgba(255, 255, 255, 0.09);
	color: var(--wp--preset--color--base);
	border-color: rgba(255, 255, 255, 0.18);
}

.e11-training-pagination .wp-block-query-pagination-numbers .page-numbers:focus-visible,
.e11-training-pagination .wp-block-query-pagination-previous:focus-visible,
.e11-training-pagination .wp-block-query-pagination-next:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
}

.e11-training-pagination .wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
}

/* ─────────────────────────────────────────────
   3. Training Detail Hero (single)
───────────────────────────────────────────── */
.e11-training-detail-hero {
	position: relative;
}

/* Breadcrumb back-link */
.e11-training-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.45);
	text-decoration: none;
	transition: color 0.2s;
}

.e11-training-breadcrumb:hover {
	color: var(--wp--preset--color--base);
}

.e11-training-breadcrumb:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 3px;
	border-radius: 3px;
	color: var(--wp--preset--color--base);
}

.e11-training-breadcrumb:active {
	color: var(--wp--preset--color--primary-light);
}

/* Category tag pill */
.e11-training-detail-hero__badges .wp-block-post-terms a {
	text-decoration: none;
	color: inherit;
	transition: opacity 0.15s;
}

.e11-training-detail-hero__badges .wp-block-post-terms a:hover {
	opacity: 0.8;
}

.e11-training-detail-hero__badges .wp-block-post-terms a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Meta row */
.e11-training-detail-hero__meta .wp-block-post-date,
.e11-training-detail-hero__meta .wp-block-post-date a {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.875rem;
	text-decoration: none;
}

/* ─────────────────────────────────────────────
   4. Training Detail Content (single)
───────────────────────────────────────────── */
.e11-training-body {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Main article content */
.e11-training-article__content {
	color: rgba(255, 255, 255, 0.72);
}

.e11-training-article__content h2 {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--base);
	letter-spacing: -0.015em;
	margin-top: var(--wp--preset--spacing--medium);
	margin-bottom: 0.875rem;
}

.e11-training-article__content h3 {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--base);
	letter-spacing: -0.01em;
	margin-top: var(--wp--preset--spacing--medium);
	margin-bottom: 0.75rem;
}

.e11-training-article__content h4 {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--base);
	letter-spacing: -0.01em;
	margin-top: var(--wp--preset--spacing--small);
	margin-bottom: 0.625rem;
}

.e11-training-article__content p,
.e11-training-article__content li {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 1rem;
}

.e11-training-article__content > p:first-child {
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.75;
	margin-bottom: var(--wp--preset--spacing--medium);
}

.e11-training-article__content a {
	color: var(--wp--preset--color--primary-light);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.15s;
}

.e11-training-article__content a:hover {
	color: var(--wp--preset--color--base);
}

.e11-training-article__content a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 3px;
	border-radius: 2px;
}

.e11-training-article__content img {
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.07);
}

.e11-training-article__content ol,
.e11-training-article__content ul {
	padding-left: 1.5rem;
	margin-bottom: 1rem;
}

.e11-training-article__content li {
	margin-bottom: 0.375rem;
}

.e11-training-article__content code {
	font-size: 0.875em;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
	padding: 0.15em 0.4em;
}

.e11-training-article__content pre {
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	overflow-x: auto;
}

.e11-training-article__content pre code {
	background: transparent;
	border: none;
	padding: 0;
	font-size: 0.875rem;
}

/* Sidebar */
.e11-training-sidebar {
	position: sticky;
	top: 96px;
	align-self: start;
}

/* Sidebar heading label */
.e11-training-sidebar__heading {
	display: block;
}

/* Sidebar terms link */
.e11-training-sidebar__value .wp-block-post-terms a,
.e11-training-sidebar .wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

/* Related items */
.e11-training-related-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.e11-training-related-item .wp-block-post-featured-image {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 8px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
}

.e11-training-related-item .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.e11-training-related-item .wp-block-post-title a {
	color: var(--wp--preset--color--neutral-light);
	text-decoration: none;
	transition: opacity 0.15s;
}

.e11-training-related-item .wp-block-post-title a:hover {
	opacity: 0.75;
}

.e11-training-related-item .wp-block-post-title a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
	border-radius: 3px;
}

.e11-training-related-item .wp-block-post-title a:active {
	opacity: 0.6;
}

/* Support link */
.e11-training-support-link {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-light);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	transition: color 0.15s;
}

.e11-training-support-link:hover {
	color: var(--wp--preset--color--base);
}

.e11-training-support-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 3px;
	border-radius: 3px;
}

.e11-training-support-link:active {
	color: var(--wp--preset--color--primary);
}

/* Collapse sidebar on small screens */
@media (max-width: 960px) {
	.e11-training-sidebar {
		display: none;
	}

	.e11-training-body .wp-block-columns {
		display: block;
	}
}

/* ==========================================================================
   404 Error Page
   BEM namespace: e11-404
   ========================================================================== */

.e11-404 {
	background-color: var(--wp--preset--color--dark);
	min-height: calc(100vh - 72px);
	display: flex;
	align-items: center;
}

.e11-404__inner {
	width: 100%;
	text-align: center;
}

.e11-404__code {
	display: block;
	color: var(--wp--preset--color--muted);
	opacity: 0.35;
	line-height: 1;
	margin-bottom: -0.15em;
}

.e11-404__heading {
	color: var(--wp--preset--color--base);
}

.e11-404__text {
	color: var(--wp--preset--color--muted);
}

@media (min-width: 640px) {
	.e11-404__code {
		margin-bottom: -0.2em;
	}
}
/* ==========================================================================
   Contact Page
   BEM namespace: e11-contact
   ========================================================================== */

/* ── Hero ── */

.e11-contact-hero {
}

.e11-contact-hero__headline mark {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
}

/* ── Body ── */

.e11-contact-body {
	background-color: var(--wp--preset--color--dark);
}

/* ── Grid ── */

.e11-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--large);
	align-items: start;
}

/* ── Contact Info sidebar ── */

.e11-contact-info__heading {
	color: var(--wp--preset--color--base);
}

.e11-contact-info-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--x-large);
}

.e11-contact-info-item {
	padding: 1.25rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.e11-contact-info-item:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.e11-contact-info-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--primary-light);
	margin-bottom: 0.35rem;
}

.e11-contact-info-value {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: color 0.2s ease;
}

.e11-contact-info-value:hover {
	color: var(--wp--preset--color--primary-light);
}

.e11-contact-info-value:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 3px;
	border-radius: 3px;
}

.e11-contact-info-value:active {
	color: var(--wp--preset--color--primary);
}

/* ── Quick-response callout ── */

.e11-contact-callout {
	background: rgba(199, 62, 21, 0.1);
	border: 1px solid rgba(199, 62, 21, 0.2);
	border-radius: 1rem;
	padding: var(--wp--preset--spacing--medium);
}

.e11-contact-callout__heading {
	color: var(--wp--preset--color--base);
}

.e11-contact-callout__body {
	line-height: 1.6;
}

/* ── Form card ── */

.e11-contact-form-wrap {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 1rem;
	padding: var(--wp--preset--spacing--medium);
}

.e11-contact-form-wrap__heading {
	color: var(--wp--preset--color--base);
}

/* ── Form fields ── */

.e11-form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}

.e11-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.e11-form-row .e11-form-field {
	margin-bottom: 0;
}

.e11-form-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
	display: flex;
	gap: 0.3rem;
}

.e11-form-required {
	color: var(--wp--preset--color--primary-light);
}

.e11-form-input {
	font-family: var(--wp--preset--font-family--primary);
	font-size: 1rem;
	padding: 0.875rem 1rem;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0.5rem;
	color: var(--wp--preset--color--base);
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
	box-sizing: border-box;
}

.e11-form-input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.e11-form-input:hover {
	border-color: rgba(255, 255, 255, 0.22);
}

.e11-form-input:focus-visible,
.e11-form-input:focus {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--primary);
	background: rgba(255, 255, 255, 0.07);
	box-shadow: 0 0 0 3px rgba(199, 62, 21, 0.15);
}

.e11-form-textarea {
	min-height: 140px;
	resize: vertical;
}

.e11-form-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--primary);
	font-size: 1rem;
	font-weight: 600;
	padding: 1rem 2rem;
	border-radius: 0.5rem;
	border: none;
	cursor: pointer;
	letter-spacing: 0.01em;
	margin-top: 1.75rem;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.e11-form-submit:hover {
	background: var(--wp--preset--color--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(199, 62, 21, 0.35);
}

.e11-form-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 3px;
}

.e11-form-submit:active {
	transform: translateY(0);
	box-shadow: none;
}

.e11-form-note {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.35);
	margin-top: 1rem;
	margin-bottom: 0;
}

/* ── Gravity Forms dark-theme overrides ── */

.e11-contact-form-wrap .gform_wrapper {
	--gf-color-primary: var(--wp--preset--color--primary);
	--gf-color-primary-rgb: 199, 62, 21;
	--gf-color-secondary: rgba(255, 255, 255, 0.03);
	--gf-color-secondary-contrast: var(--wp--preset--color--base);
	--gf-color-in-ctrl: rgba(255, 255, 255, 0.05);
	--gf-color-in-ctrl-contrast: var(--wp--preset--color--base);
	--gf-color-out-ctrl-dark: rgba(255, 255, 255, 0.75);
	--gf-color-out-ctrl-light: rgba(255, 255, 255, 0.12);
}

.e11-contact-form-wrap .gform_wrapper .gfield_label {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.875rem;
	font-weight: 600;
}

.e11-contact-form-wrap .gform_wrapper .gfield_required {
	color: var(--wp--preset--color--primary-light);
}

.e11-contact-form-wrap .gform_wrapper input[type="text"],
.e11-contact-form-wrap .gform_wrapper input[type="email"],
.e11-contact-form-wrap .gform_wrapper input[type="tel"],
.e11-contact-form-wrap .gform_wrapper textarea {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0.5rem;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--primary);
	font-size: 1rem;
	padding: 0.875rem 1rem;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.e11-contact-form-wrap .gform_wrapper input::placeholder,
.e11-contact-form-wrap .gform_wrapper textarea::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.e11-contact-form-wrap .gform_wrapper input:hover,
.e11-contact-form-wrap .gform_wrapper textarea:hover {
	border-color: rgba(255, 255, 255, 0.22);
}

.e11-contact-form-wrap .gform_wrapper input:focus,
.e11-contact-form-wrap .gform_wrapper textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--primary);
	background: rgba(255, 255, 255, 0.07);
	box-shadow: 0 0 0 3px rgba(199, 62, 21, 0.15);
}

.e11-contact-form-wrap .gform_wrapper .gform_footer input[type="submit"],
.e11-contact-form-wrap .gform_wrapper .gform_button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--primary);
	font-size: 1rem;
	font-weight: 600;
	padding: 1rem 2rem;
	border-radius: 0.5rem;
	border: none;
	cursor: pointer;
	letter-spacing: 0.01em;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.e11-contact-form-wrap .gform_wrapper .gform_button:hover {
	background: var(--wp--preset--color--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(199, 62, 21, 0.35);
}

.e11-contact-form-wrap .gform_wrapper .gform_button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 3px;
}

.e11-contact-form-wrap .gform_wrapper .gfield_description,
.e11-contact-form-wrap .gform_wrapper .gf_progressbar_title {
	color: rgba(255, 255, 255, 0.5);
}

.e11-contact-form-wrap .gform_wrapper .ginput_complex label,
.e11-contact-form-wrap .gform_wrapper .gfield .gfield_label_before_complex {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.8125rem;
}

/* ── FAQ strip ── */

.e11-contact-faq {
	background-color: var(--wp--preset--color--neutral);
}

.e11-contact-faq__head {
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--large);
}

.e11-contact-faq__heading {
	color: var(--wp--preset--color--base);
}

.e11-contact-faq__list {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}

/* ── FAQ items (wp:details) ── */

.e11-contact-faq-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	overflow: hidden;
}

.e11-contact-faq-item:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.e11-contact-faq-item > summary {
	list-style: none;
	width: 100%;
	padding: 1.25rem 0;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	transition: color 0.2s ease;
}

.e11-contact-faq-item > summary::-webkit-details-marker {
	display: none;
}

.e11-contact-faq-item > summary::after {
	content: '\276F';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.65rem;
	rotate: 90deg;
	transition: rotate 0.3s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.e11-contact-faq-item[open] > summary::after {
	rotate: -90deg;
	background: rgba(199, 62, 21, 0.2);
	border-color: rgba(199, 62, 21, 0.3);
	color: var(--wp--preset--color--primary-light);
}

.e11-contact-faq-item > summary:hover {
	color: var(--wp--preset--color--primary-light);
}

.e11-contact-faq-item > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 3px;
	border-radius: 3px;
}

.e11-contact-faq-item__answer {
	padding-bottom: 1.25rem;
}

.e11-contact-faq-item[open] .e11-contact-faq-item__answer {
	animation: accordion-reveal 0.2s ease;
}

@keyframes accordion-reveal {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive: 2-col grid at 900px+ ── */

@media (min-width: 900px) {
	.e11-contact-grid {
		grid-template-columns: 360px 1fr;
	}

	.e11-contact-info {
		position: sticky;
		top: 100px;
	}

	.e11-contact-form-wrap {
		padding: var(--wp--preset--spacing--x-large);
	}
}

/* ── Responsive: 2-col form rows at 600px+ ── */

@media (min-width: 600px) {
	.e11-form-row {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   Blog Archive & Single Post
   BEM namespace: e11-blog
   Covers: blog-hero, blog-grid, blog-card, blog-single, blog-prose,
           blog-sidebar, blog-pagination, blog-cta trust items
   ========================================================================== */

/* ─────────────────────────────────────────────
   1. Blog Hero
───────────────────────────────────────────── */
.e11-blog-hero {
	background-color: var(--wp--preset--color--dark);
}

/* ─────────────────────────────────────────────
   1b. Blog Featured Section
───────────────────────────────────────────── */
.e11-blog-featured {
	background-color: var(--wp--preset--color--dark);
}

/* Featured grid — 1-col mobile, 2-col at 861px+ */
.e11-blog-featured-grid.wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--medium);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 861px) {
	.e11-blog-featured-grid.wp-block-post-template {
		grid-template-columns: 1fr 1fr;
	}
}

/* Equal-height featured cards — stretch li wrappers */
.e11-blog-featured-grid.wp-block-post-template > li {
	display: flex;
}

/* Featured card */
.e11-featured-card {
	background: rgba(255, 255, 255, 0.04);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex: 1;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.e11-featured-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Featured card — thumbnail */
.e11-featured-card__thumb,
.e11-featured-card .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	flex-shrink: 0;
}

.e11-featured-card__thumb img,
.e11-featured-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.e11-featured-card:hover .e11-featured-card__thumb img,
.e11-featured-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* Featured card — content */
.e11-featured-card__content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Featured card — category */
.e11-featured-card__category.wp-block-post-terms .wp-block-post-terms__separator {
	color: rgba(255, 255, 255, 0.35);
}

.e11-featured-card__category.wp-block-post-terms a {
	color: var(--wp--preset--color--primary-light);
	text-decoration: none;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color 0.15s ease;
}

.e11-featured-card__category.wp-block-post-terms a:hover {
	color: var(--wp--preset--color--base);
}

.e11-featured-card__category.wp-block-post-terms a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Featured card — title */
.e11-featured-card__title.wp-block-post-title a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: color 0.15s ease;
}

.e11-featured-card__title.wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-light);
}

.e11-featured-card__title.wp-block-post-title a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
	border-radius: 2px;
}

.e11-featured-card__title.wp-block-post-title a:active {
	opacity: 0.85;
}

/* Featured card — excerpt */
.e11-featured-card__excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Featured card — read more */
.e11-featured-card__read-more.wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	text-decoration: none;
	transition: gap 0.2s ease, color 0.15s ease;
	margin-top: auto;
}

.e11-featured-card__read-more.wp-block-read-more::after {
	content: '\2192';
}

.e11-featured-card__read-more.wp-block-read-more:hover {
	gap: 0.6rem;
	color: var(--wp--preset--color--base);
}

.e11-featured-card__read-more.wp-block-read-more:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
	border-radius: 2px;
}

.e11-featured-card__read-more.wp-block-read-more:active {
	opacity: 0.85;
}

/* ─────────────────────────────────────────────
   1c. Blog Toolbar (search + filters)
───────────────────────────────────────────── */
.e11-blog-toolbar {
	max-width: 1200px;
	margin: 0 auto;
	background: var(--wp--preset--color--dark);
	padding: var(--wp--preset--spacing--medium) 0 var(--wp--preset--spacing--small);
}

.e11-blog-toolbar__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--small);
}

.e11-blog-toolbar__row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--small);
	flex-wrap: wrap;
}

.e11-blog-search-wrap {
	position: relative;
	flex: 1;
	min-width: 200px;
	max-width: 400px;
}

.e11-blog-search-icon {
	position: absolute;
	left: 0.875rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--muted);
	pointer-events: none;
}

.e11-blog-search {
	width: 100%;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 0.5rem;
	padding: 0.625rem 1rem 0.625rem 2.5rem;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 0.875rem;
	color: var(--wp--preset--color--base);
	transition: border-color 0.2s, background 0.2s;
}

.e11-blog-search::placeholder {
	color: var(--wp--preset--color--muted);
}

.e11-blog-search:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	background: rgba(255, 255, 255, 0.1);
}

.e11-blog-results-info {
	font-family: var(--wp--preset--font-family--primary);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	margin-left: auto;
}

.e11-blog-results-info strong {
	color: var(--wp--preset--color--neutral-light);
}

.e11-blog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.e11-blog-filter {
	display: inline-block;
	padding: 0.4375rem 1rem;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.6);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 100px;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.e11-blog-filter:hover {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary-light);
}

.e11-blog-filter:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.e11-blog-filter.is-active {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.e11-blog-no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--wp--preset--spacing--xx-large) 0;
}

.e11-blog-no-results p {
	color: rgba(255, 255, 255, 0.55);
	font-size: 1.0625rem;
}

/* ─────────────────────────────────────────────
   2. Blog Grid Section
───────────────────────────────────────────── */
.e11-blog-grid-section {
	background-color: var(--wp--preset--color--dark);
}

/* Grid layout — mobile-first, single column base */
.e11-blog-grid.wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--medium);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 601px) {
	.e11-blog-grid.wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.e11-blog-grid.wp-block-post-template {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Blog query container — constrained width */
.e11-blog-query {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Equal-height cards — stretch li wrappers */
.e11-blog-query .wp-block-post-template > li {
	display: flex;
}

/* ─────────────────────────────────────────────
   3. Blog Card
───────────────────────────────────────────── */
.e11-blog-card {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex: 1;
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.e11-blog-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	background: rgba(255, 255, 255, 0.06);
}

/* Featured image — zoom on card hover */
.e11-blog-card__thumb,
.e11-blog-card .wp-block-post-featured-image {
	overflow: hidden;
	flex-shrink: 0;
}

.e11-blog-card__thumb img,
.e11-blog-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
	display: block;
}

.e11-blog-card:hover .e11-blog-card__thumb img,
.e11-blog-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* Card body */
.e11-blog-card__content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Category label */
.e11-blog-card__category.wp-block-post-terms .wp-block-post-terms__separator {
	color: rgba(255, 255, 255, 0.35);
}

.e11-blog-card__category.wp-block-post-terms a {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-light);
	text-decoration: none;
	transition: color 0.15s;
}

.e11-blog-card__category.wp-block-post-terms a:hover {
	color: var(--wp--preset--color--base);
}

.e11-blog-card__category.wp-block-post-terms a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Card title */
.e11-blog-card__title.wp-block-post-title a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: color 0.15s;
}

.e11-blog-card__title.wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-light);
}

.e11-blog-card__title.wp-block-post-title a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
	border-radius: 3px;
}

.e11-blog-card__title.wp-block-post-title a:active {
	color: var(--wp--preset--color--primary);
}

/* Card excerpt */
.e11-blog-card__excerpt .wp-block-post-excerpt__excerpt {
	color: rgba(255, 255, 255, 0.6);
}

/* Read more link */
.e11-blog-card__read-more.wp-block-read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-light);
	text-decoration: none;
	transition: gap 0.2s ease, color 0.2s ease;
	align-self: flex-start;
	margin-top: auto;
}

.e11-blog-card__read-more.wp-block-read-more::after {
	content: '\2192';
}

.e11-blog-card__read-more.wp-block-read-more:hover {
	gap: 0.6rem;
	color: var(--wp--preset--color--base);
}

.e11-blog-card__read-more.wp-block-read-more:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 3px;
	border-radius: 3px;
}

.e11-blog-card__read-more.wp-block-read-more:active {
	color: var(--wp--preset--color--primary);
}

/* ─────────────────────────────────────────────
   4. Blog Pagination
───────────────────────────────────────────── */
.e11-blog-pagination.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--x-large);
}

.e11-blog-pagination .wp-block-query-pagination-numbers .page-numbers,
.e11-blog-pagination .wp-block-query-pagination-previous,
.e11-blog-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.875rem;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.e11-blog-pagination .wp-block-query-pagination-numbers .page-numbers:hover,
.e11-blog-pagination .wp-block-query-pagination-previous:hover,
.e11-blog-pagination .wp-block-query-pagination-next:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--base);
	border-color: rgba(255, 255, 255, 0.15);
}

.e11-blog-pagination .wp-block-query-pagination-numbers .page-numbers:focus-visible,
.e11-blog-pagination .wp-block-query-pagination-previous:focus-visible,
.e11-blog-pagination .wp-block-query-pagination-next:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
}

.e11-blog-pagination .wp-block-query-pagination-numbers .page-numbers:active,
.e11-blog-pagination .wp-block-query-pagination-previous:active,
.e11-blog-pagination .wp-block-query-pagination-next:active {
	background: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--base);
}

.e11-blog-pagination .wp-block-query-pagination-numbers .current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
}

/* ─────────────────────────────────────────────
   5. Blog Single — Layout
───────────────────────────────────────────── */
.e11-blog-single {
	background-color: var(--wp--preset--color--dark);
}

/* Back link */
.e11-blog-single__back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	transition: color 0.2s;
}

.e11-blog-single__back-link:hover {
	color: var(--wp--preset--color--base);
}

.e11-blog-single__back-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 3px;
	border-radius: 3px;
}

.e11-blog-single__back-link:active {
	color: var(--wp--preset--color--primary-light);
}

/* Category term */
.e11-blog-single__category.wp-block-post-terms a {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-light);
	text-decoration: none;
	transition: color 0.15s;
}

.e11-blog-single__category.wp-block-post-terms a:hover {
	color: var(--wp--preset--color--base);
}

.e11-blog-single__category.wp-block-post-terms a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Post title */
.e11-blog-single__title.wp-block-post-title {
	color: var(--wp--preset--color--base);
}

/* Meta row */
.e11-blog-single__meta {
	gap: 0.625rem;
	flex-wrap: wrap;
}

.e11-blog-single__meta .wp-block-separator.e11-blog-single__meta-sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	flex-shrink: 0;
	border: none;
	margin: 0;
	min-width: 3px;
	max-width: 3px;
	align-self: center;
}

.e11-blog-single__avatar .wp-block-avatar img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

/* Featured image */
.e11-blog-single__image.wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

/* Sidebar — hidden on mobile, shown at 960px+ */
.e11-blog-sidebar {
	display: none;
}

@media (min-width: 960px) {
	.e11-blog-sidebar {
		display: block;
		position: sticky;
		top: 96px;
		align-self: start;
	}
}

/* ─────────────────────────────────────────────
   6. Blog Prose — Post content typography
───────────────────────────────────────────── */
.e11-blog-prose.wp-block-post-content p {
	font-size: 1rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.68);
	margin-bottom: 1.25rem;
}

.e11-blog-prose.wp-block-post-content h2 {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
	font-weight: 700;
	color: var(--wp--preset--color--base);
	letter-spacing: -0.015em;
	margin-top: 2rem;
	margin-bottom: 0.875rem;
}

.e11-blog-prose.wp-block-post-content h3 {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: clamp(1.0625rem, 1rem + 0.375vw, 1.25rem);
	font-weight: 700;
	color: var(--wp--preset--color--base);
	letter-spacing: -0.01em;
	margin-top: 1.75rem;
	margin-bottom: 0.75rem;
}

.e11-blog-prose.wp-block-post-content ul,
.e11-blog-prose.wp-block-post-content ol {
	color: rgba(255, 255, 255, 0.68);
	line-height: 1.75;
	padding-left: 1.5rem;
	margin-bottom: 1.25rem;
}

.e11-blog-prose.wp-block-post-content li {
	margin-bottom: 0.375rem;
}

.e11-blog-prose.wp-block-post-content blockquote {
	margin: 1.75rem 0;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--wp--preset--color--primary);
	background: rgba(199, 62, 21, 0.06);
	border-radius: 0 8px 8px 0;
}

.e11-blog-prose.wp-block-post-content blockquote p {
	font-size: 1.125rem;
	font-style: italic;
	color: var(--wp--preset--color--neutral-light);
	margin: 0;
	line-height: 1.7;
}

.e11-blog-prose.wp-block-post-content a {
	color: var(--wp--preset--color--primary-light);
	text-underline-offset: 3px;
	transition: color 0.15s;
}

.e11-blog-prose.wp-block-post-content a:hover {
	color: var(--wp--preset--color--base);
}

.e11-blog-prose.wp-block-post-content a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
	border-radius: 2px;
}

.e11-blog-prose.wp-block-post-content a:active {
	color: var(--wp--preset--color--primary);
}

.e11-blog-prose.wp-block-post-content figure {
	margin: 1.75rem 0;
	border-radius: 12px;
	overflow: hidden;
}

.e11-blog-prose.wp-block-post-content figure img {
	width: 100%;
	height: auto;
	display: block;
}

.e11-blog-prose.wp-block-post-content figcaption {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.4);
	margin-top: 0.625rem;
	font-style: italic;
	padding: 0 0.25rem;
}

.e11-blog-prose.wp-block-post-content strong {
	color: var(--wp--preset--color--base);
	font-weight: 700;
}

.e11-blog-prose.wp-block-post-content code {
	font-size: 0.875em;
	background: rgba(255, 255, 255, 0.07);
	border-radius: 4px;
	padding: 0.125em 0.375em;
	color: var(--wp--preset--color--primary-light);
}

.e11-blog-prose.wp-block-post-content pre {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 1.25rem 1.5rem;
	overflow-x: auto;
	margin: 1.75rem 0;
}

.e11-blog-prose.wp-block-post-content hr {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	margin: 2rem 0;
}

/* ─────────────────────────────────────────────
   7. Blog Single — Tags
───────────────────────────────────────────── */
.e11-blog-single__tags.wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.e11-blog-single__tags.wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

.e11-blog-single__tags.wp-block-post-terms a {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.3125rem 0.875rem;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
}

.e11-blog-single__tags.wp-block-post-terms a:hover {
	border-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--base);
}

.e11-blog-single__tags.wp-block-post-terms a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
	border-radius: 9999px;
}

.e11-blog-single__tags.wp-block-post-terms a:active {
	color: var(--wp--preset--color--primary-light);
	border-color: var(--wp--preset--color--primary-light);
}

/* ─────────────────────────────────────────────
   8. Blog Sidebar
───────────────────────────────────────────── */
.e11-blog-sidebar__card {
	background: var(--wp--preset--color--tertiary);
}

.e11-blog-related-item {
	gap: 0.75rem;
}

.e11-blog-related-item__thumb.wp-block-post-featured-image img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}

.e11-blog-related-item .wp-block-post-title a {
	color: var(--wp--preset--color--neutral-light);
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	transition: color 0.15s;
}

.e11-blog-related-item .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary-light);
}

.e11-blog-related-item .wp-block-post-title a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-light);
	outline-offset: 2px;
	border-radius: 3px;
}

.e11-blog-related-item .wp-block-post-title a:active {
	opacity: 0.75;
}

/* ─────────────────────────────────────────────
   9. Blog CTA — Trust items
───────────────────────────────────────────── */
.e11-blog-cta__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
}

.e11-blog-cta__trust-item {
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
}

.e11-blog-cta__trust-sep {
	color: rgba(255, 255, 255, 0.2);
	font-size: 0.8125rem;
}

/* ────────────────────────────────────────────────────────────────────────
 *  Reduced Motion
 * ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.e11-marquee__inner,
	.e11-svc-card__visual *,
	.e11-about-values__pillar,
	.reveal-fade-up {
		animation: none;
		transition: none;
	}
	.reveal-fade-up {
		opacity: 1;
		transform: none;
	}
}

/* ─────────────────────────────────────────────
   Service Callout Split — two-up card section
   Used on AIO "Two Disciplines, One Strategy" and similar service pages.
   ───────────────────────────────────────────── */
.e11-service-callout-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--medium);
}
@media (min-width: 768px) {
	.e11-service-callout-split {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--large);
	}
}

/* Remove the default block-gap that stacks group children vertically; the
   grid above handles spacing. */
.e11-service-callout-split > .e11-service-callout-card {
	margin: 0;
}

/* ─────────────────────────────────────────────
   Spot Illustration Block — e11-group/illustration
   Inline SVG container; sizes the rendered SVG and provides scope so theme
   keyframes (.e11-eye-blink, .e11-spark-float, etc.) can target SVG internals.
───────────────────────────────────────────── */
.e11-illustration {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.e11-illustration svg {
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Sizing presets */
.e11-illustration--size-sm { width: 64px; }
.e11-illustration--size-md { width: 88px; }
.e11-illustration--size-lg { width: 200px; }
.e11-illustration--size-xl { width: 100%; max-width: 480px; }

/* Variant-specific tweaks */
.e11-illustration--ai-amplified { width: 100%; max-width: 400px; }
.e11-illustration--honesty,
.e11-illustration--kindness,
.e11-illustration--relationships { width: 88px; }

/* ─────────────────────────────────────────────
   Featured Case Study block — e11-group/case-study-featured
   Two-column anchor card matching the original work.html design:
   - 480px image on the left with corner radius + subtle gradient overlay
   - Pill badge → client eyebrow → headline → description → simple stat row
     (no boxes, just numbers + uppercase labels) → tag pills → primary button
───────────────────────────────────────────── */
.e11-work-featured-block { margin-bottom: var(--wp--preset--spacing--xx-large); }

a.e11-work-featured {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--large);
	color: inherit;
	text-decoration: none;
	transition: transform 0.25s ease;
}
a.e11-work-featured:hover { transform: translateY(-3px); }
a.e11-work-featured:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
	border-radius: 12px;
}
@media (min-width: 900px) {
	a.e11-work-featured {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}

/* Image: fixed-aspect cover with subtle gradient overlay (matches design) */
.e11-work-featured__media {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
}
.e11-work-featured__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top right, rgba(26, 14, 8, 0.5) 0%, transparent 60%);
	pointer-events: none;
}
.e11-work-featured__media img {
	width: 100%;
	height: 480px;
	object-fit: cover;
	display: block;
}
@media (max-width: 768px) {
	.e11-work-featured__media img { height: 320px; }
}

.e11-work-featured__content { display: flex; flex-direction: column; }

/* Pill-style "Featured" badge — rgba primary tint + border */
.e11-work-featured__badge {
	display: inline-block;
	width: fit-content;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-light);
	background: rgba(199, 62, 21, 0.2);
	border: 1px solid rgba(199, 62, 21, 0.3);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	margin: 0 0 1.25rem;
}
.e11-work-featured__client {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--primary-light);
	margin: 0 0 0.5rem;
}
.e11-work-featured__heading {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 1rem;
	color: var(--wp--preset--color--base);
}
.e11-work-featured__desc {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.65);
	margin: 0 0 1.75rem;
}

/* Stat row — flat, no boxes. Inline labels under big numbers. */
.e11-work-featured__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--large);
	margin-bottom: 1.75rem;
}
.e11-work-featured__stat {
	display: flex;
	flex-direction: column;
}
.e11-work-featured__stat-number {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 2rem;
	font-weight: 800;
	color: var(--wp--preset--color--base);
	letter-spacing: -0.02em;
	line-height: 1;
}
.e11-work-featured__stat-label {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-top: 0.35rem;
}

.e11-work-featured__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
}

.e11-work-featured__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-radius: 0.5rem;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.01em;
	width: fit-content;
	transition: background 0.2s ease, transform 0.2s ease;
}
a.e11-work-featured:hover .e11-work-featured__cta {
	background: var(--wp--preset--color--primary-dark, var(--wp--preset--color--primary));
	transform: translateX(2px);
}

/* Editor-only empty state */
.e11-work-featured-block__empty {
	padding: var(--wp--preset--spacing--large);
	border: 1px dashed rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
	font-size: 0.9375rem;
	margin: 0;
}

/* Old button-row filter CSS removed — replaced by dropdown-based filter
   UI defined earlier in this file (search "Work filter dropdowns"). */

/* Spacing between filters and the grid below */
.wp-block-e11-group-case-study-grid {
	margin-top: var(--wp--preset--spacing--large);
}

/* ============================================================================
   LAUNCHPAD LANDING PAGE
   ============================================================================
   Styles for the /launchpad/ landing page patterns:
     - launchpad-hero
     - launchpad-pillars
     - launchpad-fse
     - launchpad-included
     - launchpad-faq
   Naming follows BEM with `.e11-launchpad-*` roots.
   ========================================================================= */

/* ── Hero ── */
.e11-launchpad-hero {
	position: relative;
	overflow: hidden;
}
.e11-launchpad-hero__headline mark {
	background: transparent;
}

/* ── Pillars ── */
.e11-launchpad-pillars__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--large);
}
@media (min-width: 960px) {
	.e11-launchpad-pillars__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.e11-launchpad-pillars__grid {
		grid-template-columns: 1fr;
	}
}
.e11-launchpad-pillar {
	padding: var(--wp--preset--spacing--medium);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.e11-launchpad-pillar:hover {
	border-color: rgba(199, 62, 21, 0.45);
	background: rgba(199, 62, 21, 0.05);
	transform: translateY(-2px);
}
.e11-launchpad-pillar__num {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--primary-light);
	margin: 0 0 0.75rem;
}
.e11-launchpad-pillar__title {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--base);
	margin: 0 0 0.5rem;
	letter-spacing: -0.01em;
}
.e11-launchpad-pillar__desc {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

/* ── FSE narrative ── */
.e11-launchpad-fse__lead {
	font-weight: 500;
}

/* ── Included (membership perks) ── */
.e11-launchpad-included__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--medium);
}
@media (max-width: 900px) {
	.e11-launchpad-included__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.e11-launchpad-included__grid {
		grid-template-columns: 1fr;
	}
}
.e11-launchpad-included__item {
	padding: var(--wp--preset--spacing--small) 0 var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
	border-left: 2px solid var(--wp--preset--color--primary);
}
.e11-launchpad-included__item h3 {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--base);
	margin: 0 0 0.375rem;
}
.e11-launchpad-included__item p {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

/* ── FAQ ── */
.e11-launchpad-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.e11-launchpad-faq__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding: var(--wp--preset--spacing--medium) 0;
}
.e11-launchpad-faq__item:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.e11-launchpad-faq__item summary {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2rem;
	letter-spacing: -0.005em;
}
.e11-launchpad-faq__item summary::-webkit-details-marker {
	display: none;
}
.e11-launchpad-faq__item summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--wp--preset--color--primary-light);
	transition: transform 0.2s ease, color 0.2s ease;
}
.e11-launchpad-faq__item[open] summary::after {
	content: '−';
	color: var(--wp--preset--color--primary);
}
.e11-launchpad-faq__item summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
	border-radius: 2px;
}
.e11-launchpad-faq__item p {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.72);
	max-width: 65ch;
}

/* ============================================================================
   ACCESSIBILITY FIXES
   Post-audit corrections from the Lighthouse accessibility pass.
   ============================================================================ */

/* Footer column headings were <h6>, flagged as heading-order violations
   (h1 → h2 → h6 skips 3 levels). Changed to <h2> in the footer pattern;
   here we restyle them to visually match the old h6 weight/size so the
   footer layout doesn't suddenly grow a bold megahead per column. */
.footer-col__heading {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	margin: 0 0 1rem;
}

/* Work card title was <h4>, again skipping from page <h2>. Bumped to
   <h3>. Keep the visual size/style matching the previous h4 treatment.
   The parent theme's card styles target the card container, not the
   heading element directly, so this is a minimal targeted rule. */
.e11-work__card-title {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--base);
	margin: 0 0 0.5rem;
	letter-spacing: -0.01em;
}

/* Site-main landmark — added to templates so Lighthouse's
   landmark-one-main audit passes and the parent theme's skip-link
   (#main-content) has a real target to jump to. */
.site-main {
	display: block;
}

/* ============================================================================
   ACCESSIBILITY — ROUND 2 CONTRAST FIXES
   Elements Lighthouse flagged as color-contrast failures. Each override is
   scoped so it doesn't regress other uses of the same preset class.
   ============================================================================ */

/* The "overline" eyebrow text uses `has-primary-color` (#C73E15 Orange).
   On the dark site background that measures ~3.2:1 — below AA. Force the
   lighter brand orange (primary-light #D4683E, ~4.9:1 on dark) whenever
   the overline sits on a dark-combo section, which is everywhere it's
   used in this theme. */
.is-style-combo-dark .e11-overline.has-primary-color,
.e11-overline.has-primary-color {
	color: var(--wp--preset--color--primary-light) !important;
}

/* `has-muted-color` (#7A6A5E) on the dark bg measures ~3.9:1 — below AA.
   In every dark-combo context it appears, we want a lighter, more
   legible tint. */
.is-style-combo-dark .has-muted-color,
[class*="is-style-combo-dark"] .has-muted-color,
section[class*="has-dark-background-color"] .has-muted-color {
	color: rgba(255, 255, 255, 0.72) !important;
}

/* Pricing Enterprise tile — the label ("Enterprise & Custom Work") inherited
   a muted/low-contrast color from its preset. Force a readable color. */
.e11-pricing-enterprise__label {
	color: var(--wp--preset--color--primary-light);
}

/* Enterprise CTA button — the default button variant on the enterprise
   tile was hitting contrast failures on its background color combo.
   Pin text to near-white so it passes regardless of button surface. */
.e11-enterprise-cta .wp-block-button__link {
	color: rgba(255, 255, 255, 0.98);
}

/* Pricing card price suffix span (e.g. " / mo") was using a faint
   secondary color. */
.e11-pricing-card__price span {
	color: rgba(255, 255, 255, 0.78);
}

/* Contact info-label fields had color rgba(255,255,255,0.45) — WAY below
   AA. Raise to 0.72 to match the rest of the site's muted small text. */
.e11-contact-info-label {
	color: rgba(255, 255, 255, 0.72) !important;
}

/* Case study pagination "Previous" / "Next" directional label. */
.e11-case-pagination__dir {
	color: rgba(255, 255, 255, 0.72);
}

/* Blog toolbar results count ("Showing X of Y"). */
.e11-blog-results-info {
	color: rgba(255, 255, 255, 0.78);
}

/* Links inside body copy need a perceptible underline + color contrast.
   Scope explicitly to the content anchors — NOT buttons, NOT avatars,
   NOT any wrapping link that turns a card/block into a clickable surface.
   Hitting `a.wp-block-button__link` here would break button contrast
   (we'd be painting primary-light text on primary background = 1.4:1). */
.is-style-combo-dark p a:not(.wp-block-button__link),
[class*="has-dark-background-color"] p a:not(.wp-block-button__link),
.is-style-combo-dark li a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--primary-light);
	text-decoration-color: rgba(212, 104, 62, 0.55);
}
.is-style-combo-dark p a:not(.wp-block-button__link):hover,
[class*="has-dark-background-color"] p a:not(.wp-block-button__link):hover,
.is-style-combo-dark li a:not(.wp-block-button__link):hover {
	color: rgba(255, 255, 255, 0.98);
	text-decoration-color: currentColor;
}

/* ── A11y round 5: targeted contrast fixes ────────────────────────────────
   The `has-muted-color` preset (#7A6A5E) flags below AA on dark page
   backgrounds. My earlier override only caught `is-style-combo-dark`
   ancestors; the legal-page wrapper uses `has-dark-background-color`
   without the combo-* class. Broaden the net. */
.has-dark-background-color .has-muted-color,
.wp-block-group.has-dark-background-color .has-muted-color,
main#main-content .has-muted-color {
	color: rgba(255, 255, 255, 0.72) !important;
}

/* Pricing card note/subtext (e.g. "Billed monthly, cancel anytime") used
   a muted token that measured 3.78:1 against the card background. */
.e11-pricing-card__note {
	color: rgba(255, 255, 255, 0.78) !important;
}

/* Service "step number" badge used primary (#C73E15) which failed AA on
   the darker step card background. Primary-light passes. */
.e11-service-step__num {
	color: var(--wp--preset--color--primary-light) !important;
}