/*
Theme Name: RAZ Digi
Theme URI: https://www.razdigi.com
Author: RAZ Communication
Description: Custom theme for RAZ Communication landing page - AI automation & digital services agency.
Version: 1.0
Text Domain: razdigi
*/

/* ============================================
   0. SELF-HOSTED FONTS
   Space Grotesk (headings) + Inter (body), loaded from /fonts/ instead
   of Google's CDN - see /fonts/README.md if these files are still
   missing, the site falls back to the system font stack below until
   they're added, so nothing breaks either way.

   Each is a single variable font file covering weights 300-700, so the
   browser makes one request per family (not one per weight, the way
   Google's default CSS serves them) and you get every weight in
   between for free - useful once you start refining the type scale.
   ============================================ */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk-variable.woff2') format('woff2-variations'),
       url('fonts/space-grotesk-variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-variable.woff2') format('woff2-variations'),
       url('fonts/inter-variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   1. CSS VARIABLES - your whole color/font system lives here.
   Change a value here and it updates everywhere on the site.
   This is Option F from our design discussion: void black + signal orange + neon green.
   ============================================ */
:root {
  /* Backgrounds */
  --color-base: #080807;      /* page background, near-black warm undertone */
  --color-panel: #131210;     /* alternate section background, one shade up */
  --color-elevated: #1C1A16;  /* cards, forms, featured elements */

  /* Text */
  --color-text: #FFFFFF;      /* main body/heading text - always pure white */
  --color-text-muted: #A8A6A0; /* secondary/supporting text */

  /* Accents */
  --color-accent: #FF5F1F;    /* signal orange - primary CTA, links, headline highlights */
  --color-accent-hover: #E6531A;
  --color-growth: #39FF14;    /* neon green - reserved ONLY for growth/ROI stat numbers */

  /* Text/icon color for anything sitting ON TOP of --color-accent (chat
     bubble/toggle, search submit button, etc). Deliberately NOT tied to
     --color-base: that variable is the PAGE background, which flips to
     near-white in light mode - but the orange accent itself doesn't get
     any brighter, so white text on it would drop from ~8:1 contrast
     (dark theme) to ~2.6:1 (light theme, fails WCAG AA). A fixed
     near-black works against this specific orange in both themes. */
  --color-on-accent: #16150F;

  /* Borders */
  --color-border: rgba(245, 245, 245, 0.1);

  /* Subtle surface tints (card backgrounds, dividers) - a plain RGB
     triplet (no alpha) so it can be dropped into rgba(var(--tint-rgb), X)
     wherever a background/border needs a faint tint of "whatever reads
     as a highlight on the current surface": white flecks on the dark
     theme's near-black surfaces, dark flecks on the light theme's
     near-white ones. Each usage keeps its own alpha value - only the
     base color flips between themes. */
  --tint-rgb: 255, 255, 255;

  /* Fonts - system-font fallback stack kicks in automatically if the
     self-hosted files above are ever missing, so text never falls back
     to a generic serif/sans while you're waiting on font files. */
  --font-heading: 'Space Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* System monospace stack - deliberately NOT a webfont. Used only by the
     Final CTA's terminal-console styling (path label, status line, button).
     Every OS already ships a fast, legible mono font, so this gets the
     "console" feel with zero extra network requests - consistent with
     self-hosting only Space Grotesk/Inter and nothing else. */
  --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
  /* System monospace stack (no font file to load - uses whatever's
     already installed) for the footer's terminal/status-line aesthetic. */
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Spacing scale - use these instead of random px values, keeps rhythm consistent */
  --space-sm: 12px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 96px;

  --radius: 8px;
}

/* ============================================
   1B. LIGHT MODE PALETTE
   The actual color values used to live here as a hardcoded
   `html[data-theme="light"]` block. They're now generated dynamically
   instead, from Appearance > Customize > Header, Logo & Nav Button >
   Light Mode Colors - see razdigi_header_customizer_css() in
   inc/header-customizer.php. That function's inline <style> loads after
   this stylesheet, so it wins the cascade even though the selector is
   identical - one edit location instead of code and wp-admin drifting
   out of sync with each other.
   ============================================ */

/* ============================================
   2. RESET - removes browser default spacing/quirks so your design
   renders the same everywhere.
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* safety net - clips any stray element that overflows the viewport width rather than letting it create horizontal scroll on mobile */
}

body {
  background: var(--color-base);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h2 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Wide/edge-hugging container - used for the header and footer so the
   logo, nav, CTA button, and footer columns sit close to the browser
   edges on large screens, instead of stopping at 1320px like body
   content does. The padding scales with viewport width (clamp), so it
   never touches the raw edge (that would look cramped/unprofessional)
   but gets noticeably closer to it as the screen gets wider. */
.container-edge {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  box-sizing: border-box;
}

/* Alternating section backgrounds - this is what fixes the
   "everything blends together" problem we caught in the audit */
.section-base    { background: var(--color-base); }
.section-panel   { background: var(--color-panel); }
.section-elevated { background: var(--color-elevated); }

.section {
  padding: var(--space-xl) 0;
}

/* Free Audit section (#audit-form) - background color/image/animation
   (set from wp-admin > "Homepage: Free Audit Section" > Background) must
   always run edge-to-edge, full browser width. It already does by default
   (no parent element constrains .section's width - only the .container
   inside it is limited to 1320px), this just makes that explicit and
   guards against any future wrapper accidentally re-introducing a
   max-width or side margin. */
#audit-form {
  width: 100%;
  overflow-x: hidden; /* background-position:center could otherwise create a horizontal scrollbar on some browsers when a custom background image is set */
}

/* Reusable button style */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
/* ==========================================================================
   SITEWIDE CTA SYSTEM - "Signal Lock" (chosen over "Magnetic Pulse" and
   "Circuit Trace" concepts - see chat). Two types, used everywhere on the
   site: .btn-primary (solid, the main action) and .btn-secondary (outline,
   supporting action). Both share the exact same lift/glow recipe and the
   same light-sweep hover flourish below, driven by --btn-glow-color so
   each section can still tint its own glow (see header/audit/hero/pricing
   CSS) without duplicating the recipe itself. This is what makes every
   button on the site feel like one system instead of several unrelated
   ones.
   ========================================================================== */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.btn:hover::before {
  transform: translateX(120%);
}
@media (prefers-reduced-motion: reduce) {
  .btn::before { display: none; }
}

.btn-primary {
  background: var(--color-accent);
  color: #0A0A08;
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--btn-glow-color, var(--color-accent)) 55%, transparent);
}

/* Secondary - outline/ghost. Same lift, same glow recipe, no fill. Used
   for the supporting action next to a Primary (e.g. "Learn more" beside
   "Get Started"), or standalone where a solid button would be too loud. */
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover {
  border-color: var(--btn-glow-color, var(--color-accent));
  background: color-mix(in srgb, var(--btn-glow-color, var(--color-accent)) 8%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--btn-glow-color, var(--color-accent)) 30%, transparent);
}
/* Tactile click feedback - every button (any .btn variant) compresses
   slightly on press and springs back on release. Was entirely missing
   before: buttons had a hover state but felt "dead" under the actual
   click, which is exactly the kind of detail Awwwards judges notice. */
.btn:active {
  transform: scale(0.96) translateY(0) !important;
  transition: transform 0.1s ease;
}
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none !important; }
}

/*
 * Generic hover-lift utility - for card-like blocks that don't have their
 * own dedicated CSS (pricing plans, testimonials: currently just plain
 * divs with inline background/padding). Add class="hover-lift" alongside
 * whatever's already there and it gets the same lift+glow feedback as the
 * service/pain cards, without needing bespoke CSS per section.
 */
.hover-lift {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px -12px rgba(255,95,31,0.3);
}
@media (prefers-reduced-motion: reduce) {
  .hover-lift:hover { transform: none; }
}

/* ==========================================================================
   PRICING CARDS - Homepage "Choose Your Growth Path" + the dedicated
   Pricing page. Colors are all driven by inline styles from wp-admin (see
   page-landing.php); this block handles layout, hierarchy, the badge, the
   feature checkmarks, and the recommended-plan treatment.
   ========================================================================== */
/* ==========================================================================
   DIGITAL SERVICES PAGE - "Layered Depth Stack" Services Overview
   (page-digital-services.php only). Every card is a real <a> to that
   sub-service's own page - the "bring forward" interaction only
   intercepts the click on a card that ISN'T already active (see
   js/main.js); clicking the front card navigates normally, same as any
   other link.
   ========================================================================== */
.services-stack-head {
  max-width: 640px;
  margin: 0 auto clamp(32px, 5vw, 48px);
  text-align: center;
}
.services-stack-eyebrow {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.services-stack-heading {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.services-stack-wrap {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.services-stack-card {
  position: absolute;
  width: min(380px, 82vw);
  padding: var(--space-lg);
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-elevated);
  cursor: pointer;
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  transition: transform 0.45s cubic-bezier(.16,1,.3,1), box-shadow 0.45s ease, opacity 0.3s ease;
}
.services-stack-num {
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.services-stack-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 21px;
  margin-bottom: 10px;
}
.services-stack-blurb {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 18px;
}
.services-stack-link {
  font-size: 13px;
  color: var(--color-accent);
  font-weight: 600;
  margin-top: auto;
}
.services-stack-card.is-active {
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
}
.services-stack-nums {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: var(--space-md);
}
.services-stack-num-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: none;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.services-stack-num-btn.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.services-stack-hint {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .services-stack-card {
    transition: opacity 0.3s ease;
  }
}
@media (max-width: 640px) {
  .services-stack-wrap {
    height: auto;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
  }
  .services-stack-card {
    position: static !important;
    width: 100%;
    transform: none !important;
    opacity: 1 !important;
  }
  .services-stack-nums,
  .services-stack-hint {
    display: none;
  }
}

/* ==========================================================================
   DIGITAL SERVICES PAGE - "Assembly Line" Process section
   (page-digital-services.php only). A glowing pulse continuously travels
   along the track via pure CSS animation; which station is "lit" is
   toggled by JS (js/main.js), purely decorative - every step's text is
   always present and readable regardless of the animation running.
   ========================================================================== */
.ds-process-head {
  max-width: 640px;
  margin: 0 auto clamp(32px, 5vw, 48px);
  text-align: center;
}
.ds-process-eyebrow {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.ds-process-heading {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ds-assembly-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 30px;
}
.ds-assembly-track {
  position: relative;
  height: 2px;
  background: var(--color-border);
  margin: 0 40px 50px;
  overflow: hidden;
}
.ds-assembly-flow {
  position: absolute;
  top: 0;
  left: -20%;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  animation: ds-assembly-flow-move 3.5s linear infinite;
}
@keyframes ds-assembly-flow-move {
  to { left: 120%; }
}
.ds-assembly-stations {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin: 0 40px;
}
.ds-assembly-station {
  text-align: center;
  opacity: 0.55;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ds-assembly-station.is-lit {
  opacity: 1;
  transform: translateY(-4px);
}
.ds-assembly-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-elevated);
  border: 2px solid var(--color-border);
  margin: -37px auto 16px;
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.ds-assembly-station.is-lit .ds-assembly-dot {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: 0 0 14px 2px var(--color-accent);
}
.ds-assembly-num {
  font-family: var(--font-heading);
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.ds-assembly-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}
.ds-assembly-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .ds-assembly-flow {
    animation: none;
    display: none; /* a static gradient smear with nowhere to go reads as a rendering glitch, not a design choice - simplest to just remove it */
  }
  .ds-assembly-station {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 900px) {
  .ds-assembly-track {
    display: none;
  }
  .ds-assembly-stations {
    grid-template-columns: 1fr 1fr;
    margin: 0;
  }
  .ds-assembly-dot {
    margin-top: 0;
  }
  .ds-assembly-station {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 480px) {
  .ds-assembly-stations {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   DIGITAL SERVICES PAGE - "Data Console" Proof section
   (page-digital-services.php only). Uses the system monospace stack
   (--font-mono, defined sitewide) for the dashboard-readout feel - no
   new font file loaded. Each cell's sparkline bars are randomized
   client-side (js/main.js) purely for decoration, not real charting.
   ========================================================================== */
.ds-console-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-growth);
  margin-bottom: var(--space-md);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.ds-console-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-growth);
  flex-shrink: 0;
  animation: ds-console-blink 1.6s ease-in-out infinite;
}
@keyframes ds-console-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
.ds-console-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  max-width: 1080px;
  margin: 0 auto;
}
.ds-console-cell {
  background: var(--color-base);
  padding: var(--space-md);
}
.ds-console-cell-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.ds-console-cell-label::before {
  content: '// ';
  opacity: 0.6;
}
.ds-console-cell-value {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
}
.ds-console-spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
}
.ds-console-spark .ds-console-bar {
  flex: 1;
  background: var(--color-accent);
  opacity: 0.5;
  border-radius: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .ds-console-dot {
    animation: none;
    opacity: 1;
  }
}
@media (max-width: 700px) {
  .ds-console-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 420px) {
  .ds-console-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PRICING PAGE - "The Manifest" (page-pricing.php only)
   Independent from the .pricing-card / .pricing-grid rules just below,
   which belong to the landing page's 3-card featured-deals section and
   are untouched. Built on native <details>/<summary> - no JS needed for
   the expand/collapse mechanic, only the existing sitewide Monthly/Annual
   toggle script (js/main.js) touches this markup, via the same
   .price-monthly / data-monthly / data-annual pattern used elsewhere.
   ========================================================================== */
.pricing-manifest-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.pricing-manifest-head {
  margin-bottom: clamp(32px, 5vw, 48px);
}
.pricing-manifest-eyebrow {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.pricing-manifest-heading {
  font-weight: 600;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.1;
  max-width: 18ch;
}

.pricing-manifest {
  border-top: 1px solid var(--color-border);
}
.pricing-manifest-row {
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.pricing-manifest-row summary {
  list-style: none;
}
.pricing-manifest-row summary::-webkit-details-marker,
.pricing-manifest-row summary::marker {
  display: none;
  content: '';
}
.pricing-manifest-summary {
  cursor: pointer;
  padding: 24px 4px;
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 18px;
}
.pricing-manifest-summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: 4px;
}
.pricing-manifest-idx {
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-text-muted);
}
.pricing-manifest-name-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pricing-manifest-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(19px, 2.4vw, 26px);
}
.pricing-manifest-tag {
  font-size: 11px;
  background: rgba(255, 95, 31, 0.12);
  color: var(--color-accent);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.pricing-manifest-price {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}
.pricing-manifest-price small {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 400;
}
.pricing-manifest-chevron {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  flex-shrink: 0;
}
.pricing-manifest-chevron svg {
  stroke: var(--color-text-muted);
  transition: stroke 0.3s ease;
}
.pricing-manifest-row[open] .pricing-manifest-chevron {
  transform: rotate(180deg);
  border-color: var(--color-accent);
}
.pricing-manifest-row[open] .pricing-manifest-chevron svg {
  stroke: var(--color-accent);
}

.pricing-manifest-panel {
  padding: 0 4px 30px 46px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: start;
}
.pricing-manifest-desc {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 52ch;
  margin-bottom: 14px;
}
.pricing-manifest-features {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 20px;
}
.pricing-manifest-features li {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.pricing-manifest-features li::before {
  content: '—';
  color: var(--color-accent);
  flex-shrink: 0;
}
.pricing-manifest-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: 0 26px;
  border-radius: 999px;
  transition: background 0.25s ease;
}
.pricing-manifest-cta:hover,
.pricing-manifest-cta:focus-visible {
  background: var(--color-accent-hover);
}

@media (max-width: 720px) {
  .pricing-manifest-summary { grid-template-columns: 22px 1fr auto; }
  .pricing-manifest-price { display: none; }
  .pricing-manifest-panel { grid-template-columns: 1fr; padding-left: 22px; }
  .pricing-manifest-features { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-manifest-chevron,
  .pricing-manifest-chevron svg {
    transition: none;
  }
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  align-items: stretch;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border: 1px solid transparent;
  overflow: hidden;
}
/* Thin accent bar along the top of every card - subtle on the base two,
   full-strength on the recommended one (set via its border-color inline
   style, which this bar also reads). */
.pricing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-border);
}
.pricing-card-recommended {
  border-width: 2px;
  transform: scale(1.03);
  box-shadow: 0 20px 50px -20px rgba(255,95,31,0.35);
}
.pricing-card-recommended::before {
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  height: 4px;
}
.pricing-card-recommended.hover-lift:hover {
  transform: scale(1.03) translateY(-6px);
}
.pricing-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--color-accent);
  color: #0A0A08;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 14px -4px rgba(255,95,31,0.6);
}
.pricing-plan-name {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 10px;
}
.pricing-plan-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: -4px 0 14px;
}
.pricing-plan-price {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.pricing-plan-period {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  margin-left: 2px;
}
.pricing-feature-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14px;
  margin-bottom: 26px;
  flex-grow: 1;
}
.pricing-feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.4;
}
.pricing-feature-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.pricing-cta {
  width: 100%;
  text-align: center;
  display: block;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 9999px;
}
.pricing-cta-outline {
  border: 1px solid var(--color-border);
  color: inherit;
  background: transparent;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.pricing-cta-outline:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* Small pill badge used above section headings (e.g. "Pricing") - shared,
   generic version of the same look the Hero's eyebrow badge uses. */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: rgba(var(--tint-rgb),0.03);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.section-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* Monthly/Annual billing toggle (Pricing page) */
.billing-toggle-btn {
  color: var(--color-text-muted);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.billing-toggle-btn.is-active {
  background: var(--color-accent);
  color: #0A0A08;
  box-shadow: 0 4px 16px -4px rgba(255,95,31,0.5);
}

/*
 * CURSOR COMPANION - a small glowing dot that trails the real cursor with
 * a touch of smoothing, and grows into a ring over anything clickable.
 * Deliberately additive, not a replacement: the OS cursor stays fully
 * visible the whole time, so nothing about text selection, drag-and-drop,
 * or basic usability changes - this is pure polish on top. JS in main.js
 * only turns it on for fine-pointer devices (a real mouse/trackpad).
 */
.cursor-companion {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, border 0.2s ease, opacity 0.3s ease;
}
.cursor-companion.is-active {
  opacity: 0.85;
}
.cursor-companion.is-hovering {
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1.5px solid var(--color-accent);
  box-shadow: 0 0 14px 2px rgba(255,95,31,0.35);
}
@media (pointer: coarse) {
  .cursor-companion { display: none; }
}

/* ==========================================================================
   HEADER CTA BUTTON - text/colors/size/hover effect all come from
   Appearance > Customize > Header, Logo & Nav Button (inc/header-customizer.php)
   via the CSS variables below + a .btn-hover-* class on #site-header.
   ========================================================================== */
.btn-header-cta {
  padding: var(--header-btn-padding, 10px 20px);
  font-size: var(--header-btn-font-size, 14px);
  background: var(--header-btn-bg, var(--color-accent));
  color: var(--header-btn-text, #0A0A08);
  border-radius: var(--header-btn-radius, var(--radius));
  display: inline-block;
  transition: transform 0.15s ease-out, background 0.2s ease, box-shadow 0.25s ease;
}
/* Magnetic pull toward the cursor (js/main.js, [data-magnetic]) - desktop
   fine-pointer only, and only while a mouse is actually near the button;
   the transition above keeps every frame of that pull smooth instead of
   jumping straight to each new offset. */
@media (prefers-reduced-motion: reduce) {
  .btn-header-cta { transition: background 0.2s ease, box-shadow 0.25s ease; }
}
.btn-hover-none .btn-header-cta:hover {
  background: var(--header-btn-bg, var(--color-accent));
  transform: none;
  box-shadow: none;
}
.btn-hover-lift .btn-header-cta:hover,
.btn-hover-lift-glow .btn-header-cta:hover {
  background: var(--header-btn-hover-bg, var(--color-accent-hover));
  transform: translateY(-2px);
}
.btn-hover-glow .btn-header-cta:hover,
.btn-hover-lift-glow .btn-header-cta:hover {
  background: var(--header-btn-hover-bg, var(--color-accent-hover));
  box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--header-btn-glow-color, var(--color-accent)) 55%, transparent);
}

/* Trust bar logos - shown muted/grayscale so they don't compete with your
   brand colors, then reveal full color on hover as a nice subtle detail */
/* Site logo (Appearance > Customize > Site Identity) - height-capped so a
   tall/large uploaded image never breaks the sticky header's layout */
.site-branding img.custom-logo {
  max-height: var(--logo-height, 40px);
  width: auto;
  display: block;
  transition: max-height 0.25s ease;
  animation: logo-glow 3.5s ease-in-out infinite;
}
/* Subtle "breathing" glow, color set from Appearance > Customize > Header >
   Logo > Glow color - slow and soft on purpose, so it reads as polish
   rather than a distracting effect. Applies to an uploaded image logo;
   the text fallback gets the same treatment below. Toggle it off entirely
   from the same panel (adds "animation: none" via header-customizer.php). */
@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 0 0px transparent); }
  50%      { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--logo-glow-color, #FF5F1F) 55%, transparent)); }
}
.site-branding > a {
  animation: logo-text-glow 3.5s ease-in-out infinite;
}
@keyframes logo-text-glow {
  0%, 100% { text-shadow: 0 0 0px transparent; }
  50%      { text-shadow: 0 0 8px color-mix(in srgb, var(--logo-glow-color, #FF5F1F) 50%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .site-branding img.custom-logo,
  .site-branding > a {
    animation: none;
  }
}
/* Optional separate mobile logo (Appearance > Customize > Header, Logo &
   Nav Button > Logo) - hidden by default; only shown below 768px when
   enabled + an image is uploaded (visibility toggled in
   razdigi_header_customizer_css() since it depends on those settings). */
.razdigi-mobile-logo {
  display: none;
}
.razdigi-mobile-logo img {
  max-height: var(--logo-height-mobile, 28px);
  width: auto;
  display: block;
}

/* ==========================================================================
   TOP BAR / ANNOUNCEMENT BAR - inc/header-customizer.php
   Sits above the header in normal document flow (not fixed/sticky), so it
   scrolls away naturally rather than competing with the header for space.
   ========================================================================== */
.razdigi-topbar {
  position: relative;
  z-index: 101;
  font-size: 13px;
  line-height: 1.4;
}
.razdigi-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px clamp(20px, 4vw, 56px);
  text-align: center;
}
.razdigi-topbar-text {
  flex: 1 1 auto;
}
.razdigi-topbar-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.75;
}
.razdigi-topbar-close:hover {
  opacity: 1;
}
@media (max-width: 600px) {
  .razdigi-topbar-inner {
    flex-wrap: wrap;
    padding: 8px 16px;
  }
}

/* ==========================================================================
   HEADER SEARCH - toggle button + fullscreen overlay
   inc/header-customizer.php razdigi_render_header_search_toggle() /
   razdigi_render_search_overlay(); toggled by js/main.js.
   ========================================================================== */
.header-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--nav-text-color, var(--color-text-muted));
  cursor: pointer;
  transition: color 0.2s ease;
}
.header-search-toggle:hover {
  color: var(--nav-hover-color, var(--color-text));
}
.razdigi-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
  background: color-mix(in srgb, var(--color-base) 92%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.razdigi-search-overlay.is-active {
  opacity: 1;
  visibility: visible;
}
.razdigi-search-overlay-inner {
  position: relative;
  width: min(560px, 90vw);
}
.razdigi-search-overlay .search-form {
  display: flex;
  gap: 8px;
}
.razdigi-search-overlay .search-field {
  flex: 1 1 auto;
  font-size: 20px;
  padding: 14px 16px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
}
.razdigi-search-overlay .search-submit {
  padding: 14px 20px;
  border-radius: var(--radius);
  border: none;
  background: var(--color-accent);
  color: var(--color-on-accent);
  cursor: pointer;
  font-weight: 600;
}
.razdigi-search-overlay-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* ==========================================================================
   LIGHT / DARK MODE TOGGLE - header.php razdigi_render_theme_toggle_button(),
   toggled by js/main.js. Icon shown = the mode you'd switch TO (sun while
   dark, meaning "go light"; moon while light, meaning "go dark") - not
   the current mode, which is the more common convention for this control.
   ========================================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--nav-text-color, var(--color-text-muted));
  cursor: pointer;
  transition: color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-toggle:hover {
  color: var(--nav-hover-color, var(--color-text));
}
.theme-toggle:active {
  transform: scale(0.88);
}
.theme-toggle-icon {
  display: none;
}
/* Dark mode (default/no attribute yet, or explicitly "dark"): show sun */
html:not([data-theme="light"]) .theme-toggle-icon-sun {
  display: block;
}
/* Light mode: show moon */
html[data-theme="light"] .theme-toggle-icon-moon {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition: color 0.2s ease;
  }
}

.site-footer-branding img.custom-logo {
  max-height: 32px;
  width: auto;
  display: block;
  opacity: 0.85;
}

/* ==========================================================================
   FOOTER - "Terminal Close" - footer.php
   A live status line (with an optional ticking clock) sits above a
   manifest-style column layout, closing with a signature line typed out
   as it scrolls into view. Every custom property here is set from
   Appearance > Customize > Footer - see inc/footer-customizer.php; the
   value after each var()'s comma is only what renders if a field is
   somehow missing, not the real default (the real defaults live in
   razdigi_footer_customizer_defaults()).
   ========================================================================== */
.footer-terminal {
  background: var(--footer-bg, #060605);
  border-top: 1px solid var(--footer-border, var(--color-border));
  font-family: var(--font-mono, monospace);
}
.footer-terminal-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--space-md);
  border-bottom: 1px solid var(--footer-border, var(--color-border));
  font-size: 12px;
  color: var(--footer-status-color, var(--color-growth));
  max-width: 1200px;
  margin: 0 auto;
}
.footer-terminal-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--footer-status-dot-color, var(--color-growth));
  flex-shrink: 0;
  animation: footer-terminal-blink 1.6s ease-in-out infinite;
}
@keyframes footer-terminal-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
.footer-terminal-clock {
  margin-left: auto;
  color: var(--footer-clock-color, var(--color-text-muted));
}
.footer-terminal-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-md);
}
.footer-terminal-manifest {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.9fr 0.9fr 0.7fr 0.7fr 1.1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--footer-border, var(--color-border));
}
.footer-terminal-col {
  border-left: 1px solid var(--footer-border, var(--color-border));
  padding-left: 16px;
}
.footer-terminal-col:first-child {
  border-left: none;
  padding-left: 0;
}
.footer-terminal-col h4 {
  font-family: var(--font-mono, monospace);
  font-size: var(--footer-heading-size, 11px);
  color: var(--footer-heading-color, var(--color-accent));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}
.footer-terminal-col h4::before {
  content: '// ';
  opacity: 0.6;
}
.footer-terminal-col a {
  display: block;
  font-size: var(--footer-link-size, 13px);
  color: var(--footer-link-color, var(--color-text-muted));
  text-decoration: none;
  margin-bottom: 8px;
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.footer-terminal-col a:hover {
  color: var(--footer-link-hover, var(--color-growth));
  padding-left: 4px;
}
.footer-terminal-col a::before {
  content: '> ';
  opacity: 0;
  transition: opacity 0.15s ease;
  color: var(--footer-link-hover, var(--color-growth));
}
.footer-terminal-col a:hover::before {
  opacity: 1;
}
.footer-terminal-brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--footer-brand-name-size, 15px);
  color: var(--color-text);
  margin-bottom: 12px;
}
.footer-terminal-tagline {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--footer-link-color, var(--color-text-muted));
  max-width: 220px;
  line-height: 1.6;
  margin: 0;
}
.footer-terminal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-terminal-prompt {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--footer-border, var(--color-border));
  padding-bottom: 6px;
  transition: border-color 0.2s ease;
}
.footer-terminal-prompt:focus-within {
  border-color: var(--footer-link-hover, var(--color-growth));
}
.footer-terminal-prompt-marker {
  color: var(--footer-heading-color, var(--color-accent));
  font-family: var(--font-mono);
  font-size: 13px;
  flex-shrink: 0;
}
.footer-terminal-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text);
  padding: 2px 0;
}
.footer-terminal-input::placeholder {
  color: var(--footer-link-color, var(--color-text-muted));
  opacity: 0.7;
}
.footer-terminal-submit {
  background: none;
  border: none;
  color: var(--footer-heading-color, var(--color-accent));
  font-size: 15px;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.footer-terminal-submit:hover {
  transform: translateX(3px);
}
.footer-terminal-form-success {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--footer-link-hover, var(--color-growth));
  margin: 0;
}
.footer-terminal-signature {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--footer-signature-size, clamp(22px, 3vw, 34px));
  color: var(--footer-signature-color, var(--color-text));
  margin: var(--space-lg) 0 8px;
  min-height: 1.3em;
}
.footer-terminal-signature .footer-terminal-cursor {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background: var(--footer-cursor-color, var(--color-accent));
  margin-left: 4px;
  vertical-align: middle;
  animation: footer-terminal-cursor-blink 0.9s steps(1) infinite;
}
@keyframes footer-terminal-cursor-blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.footer-terminal-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--footer-bottom-text-color, var(--color-text-muted));
  padding-top: var(--space-md);
}
@media (prefers-reduced-motion: reduce) {
  .footer-terminal-status-dot,
  .footer-terminal-cursor {
    animation: none;
    opacity: 1;
  }
}
@media (max-width: 900px) {
  .footer-terminal-manifest {
    grid-template-columns: 1fr 1fr;
  }
  .footer-terminal-col {
    border-left: none;
    padding-left: 0;
  }
}
@media (max-width: 560px) {
  .footer-terminal-manifest {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   HEADER - header.php
   REQUIRED SITEWIDE: the header must stay edge-to-edge (full viewport
   width, flush to the top) on every page, at every scroll position - see
   inc/header-customizer.php's 'header_sticky_style' default ('docked').
   This is the unconditional base state, not something layered on top via
   a later CSS override - so it holds even if the Customizer's inline
   <style> block were ever missing or delayed. The old "Signal Capsule"
   floating/inset pill look still exists as an explicit opt-in
   (.sticky-floating, added only when that Sticky Style is chosen in
   Appearance > Customize > Header Behavior) - never the default.
   ========================================================================== */
#site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  margin: 0;
  background: var(--header-bg-color, var(--color-base));
  border: 1px solid var(--header-border-color, var(--color-border));
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5);
  transition: box-shadow 0.4s ease;
}

/* Opt-in only - see the doc comment above. Everything here is what used
   to be the unconditional default; it now only applies with .sticky-floating
   explicitly present, and docks (see .is-scrolled below) back to the same
   edge-to-edge state every other sticky style already starts from. */
#site-header.sticky-floating {
  top: clamp(10px, 1.6vw, 18px);
  margin: 0 clamp(12px, 2.4vw, 28px);
  border: 1px solid var(--header-border-color, var(--color-border));
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(var(--tint-rgb),0.03) inset, 0 20px 40px -24px rgba(0,0,0,0.55);
  transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              margin 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}
#site-header.sticky-floating.is-scrolled {
  top: 0;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: 14px;
  padding-bottom: 14px;
  transition: padding 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#site-header.is-scrolled .header-inner {
  padding-top: 10px;
  padding-bottom: 10px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 16px);
}
@media (prefers-reduced-motion: reduce) {
  #site-header,
  #site-header.sticky-floating,
  .header-inner {
    transition: none;
  }
}
#site-header.is-scrolled .site-branding img.custom-logo {
  max-height: 30px;
}
#site-header.is-scrolled .site-branding > a {
  font-size: 15px !important;
}

.trust-logo {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.trust-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Trust fact badges (Trust Bar 1) - small pill-shaped labels */
.trust-fact-badge {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  color: var(--color-text);
  white-space: nowrap;
  flex-shrink: 0;
}

/*
 * Single-row auto-scroll marquee, shared by Trust Bar 1 (facts) and
 * Trust Bar 2 (logos). template-parts/trust-bar.php renders the item
 * list TWICE back-to-back inside .trust-marquee-track; this animation
 * scrolls the track left by exactly 50% of its own width, so the moment
 * the first copy scrolls out of view, the second copy is in the exact
 * start position - the loop is seamless with no visible jump.
 * Edges fade to transparent via mask-image so items don't look clipped.
 */
.trust-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.trust-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--space-lg);
  animation: trust-marquee-scroll 30s linear infinite;
}
.trust-marquee:hover .trust-marquee-track,
.trust-marquee-track.is-paused {
  animation-play-state: paused;
}
@keyframes trust-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Respect users who've asked their OS/browser to reduce motion */
@media (prefers-reduced-motion: reduce) {
  .trust-marquee-track {
    animation: none;
  }
}

/*
 * Explicit pause/play control for the marquee. Hovering already pauses it
 * for mouse users, but that's invisible and unreachable for keyboard-only
 * and touchscreen visitors - this button gives everyone an equal, visible
 * way to stop the motion. Sits in the top-right corner, outside the
 * fade-mask so it's never clipped.
 */
.trust-marquee-toggle {
  position: absolute;
  top: -2px;
  right: 0;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: var(--color-text-muted);
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.trust-marquee-toggle:hover,
.trust-marquee-toggle:focus-visible {
  opacity: 1;
  color: var(--color-text);
}
.trust-marquee-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* If the OS/browser already asked for reduced motion, the track never
   animates in the first place - showing a "pause" control for something
   that isn't moving would be confusing, so hide it. */
@media (prefers-reduced-motion: reduce) {
  .trust-marquee-toggle {
    display: none;
  }
}

/* ==========================================================================
   PARTNER LOGO BANDS ("Powered By & Integrated With") - template-parts/trust-bar.php
   Two rows of pill-framed logos drifting in opposite directions (top row
   left, bottom row right). Falls back to a single still, centered row
   when there are 4 or fewer logos - no motion, nothing to pause. Every
   color/size/speed value is admin-controlled via CSS custom properties
   set on .trust-bands-wrap (inc/homepage-trust-bar.php), with sensible
   defaults baked in here so the section still looks finished untouched.
   ========================================================================== */
/* ==========================================================================
   PARTNER LOGO GRID ("Powered By & Integrated With") - template-parts/trust-bar.php
   Uniform bordered tiles hold each logo - real logos vary wildly in
   aspect ratio (a wide wordmark vs. a square mark), and a fixed tile
   shape absorbs that difference so every partner sits at equal visual
   weight. A slow diagonal light sweep drifts across the whole grid
   (toggleable), and tiles get a subtle 3D tilt on hover (toggleable).
   Every value is admin-controlled via CSS custom properties set on
   .trust-bands-wrap (inc/homepage-trust-bar.php), with sensible defaults
   baked in here so the section still looks finished untouched.
   ========================================================================== */
.trust-bands-wrap {
  --trust-logo-size: 48px;
  --trust-grid-gap: 1px;
  --trust-grid-cols: 4;
  --trust-grid-cols-mobile: 2;
  --trust-tile-aspect: 3 / 2;
  --trust-grid-radius: 12px;
  --trust-tile-bg: var(--color-elevated);
  --trust-tile-border: var(--color-border);
  --trust-sweep-color: var(--color-accent);
  --trust-sweep-speed: 5s;
}
.trust-bands-label {
  text-align: center;
  margin: 0 0 var(--space-md);
}
.trust-bands-subheading {
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  max-width: 560px;
  margin: -8px auto var(--space-md);
}
.trust-bands-demo-note {
  text-align: center;
  font-size: 12px;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius);
  padding: 10px 16px;
  max-width: 520px;
  margin: var(--space-md) auto 0;
}
.trust-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--trust-grid-cols), 1fr);
  gap: var(--trust-grid-gap);
  background: var(--trust-tile-border);
  border: 1px solid var(--trust-tile-border);
  border-radius: var(--trust-grid-radius);
  overflow: hidden;
}
.trust-tile {
  position: relative;
  background: var(--trust-tile-bg);
  aspect-ratio: var(--trust-tile-aspect);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm, 16px);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.trust-tile-logo {
  height: var(--trust-logo-size);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
/* Dim-until-hover is opt-in (default on) - a site that wants every logo
   at full strength all the time can switch it off from the admin box. */
.trust-grid-dim .trust-tile-logo {
  filter: grayscale(60%);
  opacity: 0.7;
}
.trust-grid-dim .trust-tile:hover .trust-tile-logo,
.trust-grid-dim .trust-tile:focus-within .trust-tile-logo {
  filter: grayscale(0%);
  opacity: 1;
}
.trust-grid-tilt .trust-tile:hover,
.trust-grid-tilt .trust-tile:focus-within {
  transform: perspective(600px) rotateX(4deg) rotateY(-4deg) translateY(-4px) scale(1.04);
  z-index: 2;
}
/* The sweep is a single diagonal band of light drifting across the whole
   grid on a loop - deliberately slow and singular (not a busy marquee),
   so it reads as ambient life rather than something demanding attention. */
.trust-grid-sweep::before {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 30%;
  height: 220%;
  background: linear-gradient(115deg, transparent, color-mix(in srgb, var(--trust-sweep-color) 14%, transparent), transparent);
  transform: rotate(12deg);
  pointer-events: none;
  z-index: 1;
  animation: trust-grid-sweep var(--trust-sweep-speed) ease-in-out infinite;
}
@keyframes trust-grid-sweep {
  0%   { left: -40%; }
  40%  { left: 120%; }
  100% { left: 120%; }
}
@media (prefers-reduced-motion: reduce) {
  .trust-grid-sweep::before { display: none; }
  .trust-tile { transition: none; }
  .trust-grid-tilt .trust-tile:hover,
  .trust-grid-tilt .trust-tile:focus-within { transform: none; }
}
@media (max-width: 640px) {
  .trust-grid { grid-template-columns: repeat(var(--trust-grid-cols-mobile), 1fr); }
  .trust-bands-wrap { --trust-grid-gap: 1px; --trust-logo-size: 38px; }
}

/* Growth stat number style - neon green, used for stat numbers (this
   class) and for checkmark icons in value/feature lists (.value-check
   below) - reserved for genuinely positive/affirmative content only, not
   general UI decoration, so it keeps its impact. */
.stat-growth {
  color: var(--color-growth);
  font-family: var(--font-heading);
  font-weight: 500;
}

/* ==========================================================================
   FREE AUDIT SECTION - page-landing.php
   Benefits render as a static checklist grid - deliberately NOT an
   auto-scrolling marquee. Moving text at 12-13px was unreadable at a
   comfortable pace and had no pause control (an accessibility problem);
   this also stops it duplicating the Hero's own scrolling bulletin bar.
   ========================================================================== */
.audit-benefits-panel {
  position: relative;
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius);
}
.audit-benefits-heading {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.audit-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 24px;
}
.audit-benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
}
.audit-benefit-icon {
  color: var(--audit-icon-color, var(--color-growth));
  font-size: var(--audit-icon-size, inherit);
  font-weight: 700;
  flex-shrink: 0;
  display: inline-block;
}
.audit-icon-anim-pulse {
  animation: audit-icon-pulse 1.8s ease-in-out infinite;
}
@keyframes audit-icon-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.15); }
}
.audit-icon-anim-bounce {
  animation: audit-icon-bounce 1.6s ease-in-out infinite;
}
@keyframes audit-icon-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.audit-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--audit-field-gap, 12px);
}
.audit-form-grid .audit-field-full {
  grid-column: 1 / -1;
}
.audit-field {
  width: 100%;
  padding: 10px;
  font-size: var(--audit-field-text-size, 13px);
  font-family: inherit;
  background: var(--audit-field-bg, var(--color-base));
  border: 1px solid var(--audit-field-border-color, var(--color-border));
  border-radius: var(--audit-field-radius, var(--radius));
  color: var(--audit-field-text-color, var(--color-text));
}
.audit-field:focus {
  outline: none;
  border-color: var(--color-accent);
}
.audit-field::placeholder {
  color: var(--audit-field-placeholder-color, var(--color-text-muted));
  opacity: 1;
}
select.audit-field option {
  background: var(--color-elevated);
  color: var(--color-text);
}

/* Form card itself (border/background) - separate from the fields inside
   it, both editable from wp-admin > Homepage: Free Audit Section > Form. */
.audit-form-card {
  background: var(--audit-form-bg-color, var(--color-elevated));
  border: 1px solid var(--audit-form-border-color, transparent);
}

/* CTA (submit) button - color/size/text all editable from the same box.
   Reuses the lift/glow hover-effect pattern from the header button, but
   scoped to this element directly since it isn't inside a container that
   already carries a .btn-hover-* class. */
.audit-cta {
  background: var(--audit-cta-bg, var(--color-accent));
  color: var(--audit-cta-text-color, #0A0A08);
  font-size: var(--audit-cta-text-size, 15px);
  border-radius: var(--radius);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.25s ease;
}
.audit-cta.btn-hover-none:hover {
  transform: none;
  box-shadow: none;
}
.audit-cta.btn-hover-lift:hover,
.audit-cta.btn-hover-lift-glow:hover {
  transform: translateY(-2px);
}
.audit-cta.btn-hover-glow:hover,
.audit-cta.btn-hover-lift-glow:hover {
  box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--audit-cta-bg, var(--color-accent)) 55%, transparent);
}
/* "CTA scroll effect" - a couple of gentle attention pulses once the form
   card scrolls into view (piggybacks on the existing .reveal/.is-visible
   scroll system - no separate observer needed). Runs twice, then stops,
   so it draws the eye without nagging forever. */
.reveal.is-visible .audit-cta-pulse {
  animation: audit-cta-pulse 1.6s ease-in-out 0.4s 2;
}
@keyframes audit-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--audit-cta-bg, var(--color-accent)) 55%, transparent); }
  50%      { box-shadow: 0 0 0 10px color-mix(in srgb, var(--audit-cta-bg, var(--color-accent)) 0%, transparent); }
}

/* Section background image animations - all opt-in from wp-admin, all
   off by default, and all disabled for visitors with reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .audit-bg-anim-pan {
    animation: audit-bg-pan 18s ease-in-out infinite alternate;
  }
  .audit-bg-anim-zoom {
    animation: audit-bg-zoom 14s ease-in-out infinite alternate;
  }
  .audit-bg-anim-pulse {
    animation: audit-bg-pulse 6s ease-in-out infinite;
  }
}
@keyframes audit-bg-pan {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes audit-bg-zoom {
  0%   { background-size: 100%; }
  100% { background-size: 115%; }
}
@keyframes audit-bg-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.85; }
}

/* ==========================================================================
   AUDIT SECTION GRID - wraps the Free Audit content/form columns. Added
   alongside the existing .container class (not instead of it - still
   need that 1320px max-width/centering) so it can (a) grow a third
   column when the Live Wire feed is placed left/right, from wp-admin >
   "Homepage: Live Wire Feed", and (b) actually collapse to one column on
   smaller screens, which the old inline-only version never did.
   ========================================================================== */
.audit-grid {
  display: grid;
  grid-template-columns: var(--audit-grid-cols, 1fr 1fr);
  align-items: start;
}
@media (max-width: 1100px) {
  .audit-grid.audit-grid--with-wire { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .audit-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LIVE WIRE FEED - inc/homepage-live-wire.php (markup) + main.js (the
   cascading-entry behavior, guarded by [data-live-wire] so it costs
   nothing on pages without this panel). Colors/sizes come through the CSS
   custom properties below, all optional - every one has a token-based
   fallback so an untouched site still looks fully designed.
   ========================================================================== */
.live-wire {
  position: relative;
  min-height: var(--live-wire-height, 360px);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 3px),
    var(--live-wire-bg, var(--color-panel));
  border: 1px solid var(--live-wire-border, var(--color-border));
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.live-wire--below { min-height: 0; }

.live-wire-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--live-wire-border, var(--color-border));
}
.live-wire-heading {
  font-size: var(--live-wire-heading-size, 12px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}
.live-wire-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-growth);
  flex-shrink: 0;
}
.live-wire-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-growth);
  animation: live-wire-blip 1.4s ease-in-out infinite;
}
@keyframes live-wire-blip {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

.live-wire-feed {
  flex: 1;
  padding: 8px 0;
  position: relative;
}
.live-wire-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.live-wire-entry:last-child { border-bottom: none; }
.live-wire-entry.is-entering {
  animation: live-wire-enter 0.5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes live-wire-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.live-wire-tag {
  font-family: var(--font-heading);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2.5px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.live-wire-tag--audit {
  background: color-mix(in srgb, var(--live-wire-audit-color, var(--color-growth)) 16%, transparent);
  color: var(--live-wire-audit-color, var(--color-growth));
}
.live-wire-tag--flag {
  background: color-mix(in srgb, var(--live-wire-flag-color, var(--color-accent)) 18%, transparent);
  color: var(--live-wire-flag-color, var(--color-accent));
}
.live-wire-tag--stat {
  background: rgba(255,255,255,.08);
  color: var(--live-wire-stat-color, var(--color-text-muted));
}
.live-wire-body {
  font-size: var(--live-wire-text-size, 14px);
  color: var(--live-wire-text-color, var(--color-text));
  line-height: 1.5;
}
.live-wire-time {
  font-size: var(--live-wire-meta-size, 11px);
  color: var(--live-wire-meta-color, var(--color-text-muted));
  margin-left: auto;
  flex-shrink: 0;
}

/* Ambient scanline sweep - purely decorative, opt-out per instance via
   the "Disable the ambient scanline sweep effect" checkbox, and always
   off for reduced-motion visitors regardless of that setting. */
.live-wire:not(.live-wire--no-scanline)::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 120px;
  top: -120px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .live-wire:not(.live-wire--no-scanline)::after {
    animation: live-wire-sweep 6s linear infinite;
  }
}
@keyframes live-wire-sweep {
  0%   { top: -120px; }
  100% { top: 100%; }
}

/* Static style (no JS cycling at all - PHP-rendered list only) and
   reduced-motion both land here: no entrance animation, no scanline, no
   pulsing dot, nothing to disable via JS because nothing was started. */
.live-wire--static .live-wire-entry,
.live-wire--static .live-wire-dot {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .live-wire-entry.is-entering { animation: none; opacity: 1; transform: none; }
  .live-wire-dot { animation: none; }
  .live-wire::after { animation: none; }
}

/* "Also show on mobile" toggle, defaults to shown - only hides below the
   breakpoint where the audit grid has already collapsed to one column,
   so it never disappears while still sitting in a multi-column row. */
@media (max-width: 860px) {
  .live-wire-hide-mobile { display: none; }
}

/* Full-width "below the form" placement - same panel, sits as its own
   strip after the grid (mirrors how .audit-benefits-panel already sits
   outside the grid rather than being squeezed into a column). */
.live-wire-below-wrap {
  margin-top: var(--space-lg);
}

/* ==========================================================================
   SERVICES SECTION - page-landing.php ("Command Deck")
   A native ARIA tabs pattern: a clickable directory list on the left
   (role="tablist"/"tab") and a single detail panel on the right
   (role="tabpanel") that swaps in per service, with a real link straight
   to that service's own page. #servicesDeck is deliberately NOT wrapped
   in .container/.container-edge, so it always spans the full browser
   width edge-to-edge, on every screen size - only the intro text above it
   (heading/tagline/body) respects the normal container width. Optional
   section background image still gets the same dark overlay for
   readability as before.
   ========================================================================== */
.services-head {
  position: relative;
  z-index: 1;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.services-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}
.services-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  animation: services-pulse 2s ease-out infinite;
}
@keyframes services-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,95,31,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(255,95,31,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,95,31,0); }
}
.services-heading {
  max-width: 26ch;
}
.services-body {
  max-width: 60ch;
  margin-top: 14px;
  line-height: 1.7;
}
.services-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 0;
}

/* Full-bleed deck shell */
#servicesDeck {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 900px) {
  #servicesDeck { grid-template-columns: 1fr; }
}

.deck-list {
  border-right: 1px solid var(--color-border);
  max-height: 640px;
  overflow-y: auto;
}
@media (max-width: 900px) {
  .deck-list { border-right: none; border-bottom: 1px solid var(--color-border); max-height: 320px; }
}

.deck-tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 44px; /* touch target */
  text-align: left;
  padding: 18px clamp(20px, 4vw, 32px);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  background: none;
  font-family: var(--font-body);
  transition: background 0.25s ease;
}
.deck-tab::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--color-accent);
  transform: scaleY(0);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.deck-tab-index {
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-text-muted);
  width: 22px;
  flex-shrink: 0;
}
.deck-tab-label {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--color-text-muted);
  transition: color 0.25s ease;
}
.deck-tab:hover .deck-tab-label { color: var(--color-text); }
.deck-tab.is-active { background: var(--color-panel); }
.deck-tab.is-active .deck-tab-label { color: var(--color-text); font-weight: 600; }
.deck-tab.is-active::before { transform: scaleY(1); }
.deck-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.deck-stage {
  position: relative;
  padding: clamp(32px, 4vw, 56px);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-panel);
  overflow: hidden;
}
.deck-ring {
  position: absolute;
  top: 50%;
  right: clamp(24px, 6vw, 90px);
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  pointer-events: none;
}
.deck-ring::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--color-accent);
  animation: deck-spin 6s linear infinite;
}
@keyframes deck-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .deck-ring { display: none; } }

.stage-panel {
  position: relative;
  z-index: 1;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.stage-panel.is-leaving { opacity: 0; transform: translateY(10px); }
.stage-panel[hidden] { display: none; }

.stage-glyph {
  position: absolute;
  top: clamp(20px, 3vw, 40px);
  right: clamp(24px, 4vw, 56px);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(90px, 10vw, 180px);
  color: transparent;
  -webkit-text-stroke: 1px var(--color-border);
  line-height: 1;
  user-select: none;
}
@media (max-width: 900px) { .stage-glyph { display: none; } }

.stage-icon {
  display: block;
  object-fit: contain;
  margin-bottom: 16px;
}

.stage-eyebrow {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.stage-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 40px);
  margin-bottom: 18px;
  max-width: 16ch;
  color: var(--color-text);
}
.stage-desc {
  color: var(--color-text-muted);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 48ch;
}
.stage-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  min-height: 44px; /* touch target */
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-accent);
  background: var(--color-accent);
  padding: 14px 24px;
  border-radius: 999px;
  width: fit-content;
  transition: background 0.25s ease;
}
.stage-cta:hover, .stage-cta:focus-visible { background: var(--color-accent-hover); }
.stage-cta svg { transition: transform 0.25s ease; }
.stage-cta:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .services-eyebrow-dot,
  .deck-ring::before {
    animation: none;
  }
  .deck-tab::before,
  .deck-tab-label,
  .stage-panel,
  .stage-cta,
  .stage-cta svg {
    transition: none;
  }
}


/* ==========================================================================
   PAIN POINTS SECTION - page-landing.php
   Uses the Hero's background system in its LIGHTER "--light" variant
   (circuit-grid + one soft glow, no animated neural-net SVG) - see
   .hero-automation--light further down. Two identical full-weight animated
   backgrounds back-to-back would dilute both and cost more to render, so
   this section gets its own cheaper visual identity from the same family.
   ========================================================================== */
.pain-points-heading {
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-sm);
}
.pain-points-body {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto var(--space-lg);
}
.pain-constellation-wrap {
  position: relative;
  z-index: 1;
}

/* ---- Reader panel: shows the currently-focused pain point's full text.
   Stays hidden (display:none) until JS both builds the constellation and
   populates this panel in the same synchronous pass, so it never paints
   empty before content is set. ---- */
.pain-reader {
  display: none; /* only relevant once the constellation itself is showing - see .js media rule below */
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: var(--space-md);
  min-height: 200px;
}
.pain-reader-index {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.pain-reader-title {
  font-size: 20px;
  margin: 0 0 10px;
  color: var(--color-text);
}
.pain-reader-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---- Chain list: the real content, always in the DOM. Visible by
   default (mobile-first, and the no-JS/JS-failure fallback for every
   screen size - see the .js-scoped override below). ---- */
.pain-chain {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 640px;
  margin: 0 auto;
}
.pain-chain-item {
  position: relative;
  padding: 18px 0 18px 28px;
  border-left: 2px solid var(--color-border);
  transition: border-color 0.2s ease;
}
.pain-chain-item::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-panel);
  border: 2px solid var(--color-border);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pain-chain-item.is-active {
  border-left-color: var(--color-accent);
}
.pain-chain-item.is-active::before {
  border-color: var(--color-accent);
  background: var(--color-accent);
}
.pain-chain-icon {
  position: absolute;
  left: -34px;
  top: 20px;
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: none; /* only shown once there's room, see min-width rule below */
}
.pain-chain-item h4 {
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--color-text);
}
.pain-chain-item p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}
@media (min-width: 480px) {
  .pain-chain-item { padding-left: 48px; }
  .pain-chain-icon { display: block; }
}

/* ---- The orbiting diagram itself: hidden entirely until JS confirms it
   built one (adds .is-ready), and only ever attempted on wide viewports -
   see js/main.js. On narrower screens / no-JS, the chain list above
   stays the only thing visible - a real, complete, readable fallback,
   not a stripped-down "lite" version. ---- */
.pain-constellation {
  display: none;
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.pain-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--color-panel);
  border: 1px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.3;
  padding: 8px;
  box-shadow: 0 0 24px 2px color-mix(in srgb, var(--color-accent) 18%, transparent);
  z-index: 3;
}
.pain-constellation-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pain-signal-line {
  stroke: var(--color-border);
  stroke-width: 1;
  fill: none;
  transition: stroke 0.3s ease, stroke-width 0.3s ease;
}
.pain-signal-line.is-active {
  stroke: var(--color-accent);
  stroke-width: 1.4;
}
.pain-signal-spark {
  fill: var(--color-accent);
}
.pain-node {
  position: absolute;
  width: 86px;
  height: 86px;
  margin-left: -43px;
  margin-top: -43px;
  border-radius: 50%;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  line-height: 1.25;
  padding: 8px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 2;
}
.pain-node:hover,
.pain-node:focus-visible,
.pain-node.is-active {
  border-color: var(--color-accent);
  color: var(--color-text);
  transform: scale(1.08);
  box-shadow: 0 0 18px 1px color-mix(in srgb, var(--color-accent) 22%, transparent);
  outline: none;
}

/* The stage becomes visible (and therefore measurable by JS) as soon as
   we know JS is running and the viewport is wide enough - .is-ready only
   controls the handoff from the chain-list fallback to the finished
   diagram once nodes actually exist, so there's never a moment where JS
   is stuck trying to measure a display:none element. */
@media (min-width: 900px) {
  .js .pain-constellation {
    display: block;
  }
  .js .pain-constellation.is-ready ~ .pain-chain {
    display: none;
  }
  .js .pain-constellation.is-ready + .pain-reader {
    display: block;
  }
  .js .pain-constellation-wrap {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-lg);
    align-items: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pain-signal-spark { display: none; }
}

/* ==========================================================================
   CLIENT SUCCESS STORIES - "cursor-preview index list" - page-landing.php
   Adapted from the approved concept: a plain list of names + metrics that
   only reveals a floating photo preview once you hover over it. The
   floating-photo interaction needs a real cursor, so it's gated behind
   (hover: hover) and (pointer: fine) - touch devices get a small fixed
   thumbnail inline in each row instead (.index-row-thumb), which needs no
   JS and is always visible. JS for the desktop hover behavior lives in
   js/main.js, guarded by #indexWrap existing on the page.
   ========================================================================== */
.index-list-wrap {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}
.index-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 22px 4px;
  border-top: 1px solid var(--color-border);
  gap: 12px;
}
.index-row:last-child {
  border-bottom: 1px solid var(--color-border);
}
@media (hover: hover) and (pointer: fine) {
  .index-row {
    cursor: default;
    transition: opacity 0.25s ease;
  }
  .index-list-wrap.hovering .index-row {
    opacity: 0.35;
  }
  .index-list-wrap.hovering .index-row.active {
    opacity: 1;
  }
}
.index-row-left {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-width: 0;
}
.index-num {
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.index-name {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 700;
  transition: color 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.index-row.active .index-name {
  color: var(--color-accent);
}
.index-metric {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-growth);
  flex-shrink: 0;
  white-space: nowrap;
}
/* Floating photo preview - desktop/hover only */
.index-float {
  position: absolute;
  width: 160px;
  height: 106px;
  pointer-events: none;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 5;
  border-radius: var(--radius);
  overflow: hidden;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
  background: var(--color-elevated);
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .index-float {
    display: block;
  }
  .index-float.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.index-float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.index-hint {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 20px;
}
@media (hover: hover) and (pointer: fine) {
  /* only makes sense as an instruction if the hover effect actually runs */
}
@media not all and (hover: hover), not all and (pointer: fine) {
  .index-hint { display: none; }
}
/* Inline thumbnail - touch/no-hover fallback, always visible. Hidden on
   real-hover devices since the floating preview covers that job there. */
.index-row-thumb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: none;
}
.index-row-thumb-fallback {
  align-items: center;
  justify-content: center;
  background: var(--color-elevated);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
}
@media not all and (hover: hover), not all and (pointer: fine) {
  .index-row-thumb { display: flex; }
}
@media (hover: hover) and (pointer: fine) {
  .index-row-thumb { display: none !important; }
}

/* ==========================================================================
   TESTIMONIALS - "Orbit Field" - page-landing.php
   Client nodes sit at fixed positions around a ring (computed once in JS
   via plain trigonometry - see js/main.js); a thin ring sweeps slowly
   behind them for texture. Hovering/focusing/clicking a node crossfades
   its quote into the center "core" instead of the whole layout
   rearranging. Every dimension/color below reads a CSS variable set
   inline from wp-admin (Homepage: Testimonials) - the hardcoded fallback
   after each var() is only what renders if a field is left blank.
   ========================================================================== */
.orbit-outer {
  max-width: var(--orbit-diameter, 560px);
  margin: 0 auto;
}
.orbit-wrap {
  position: relative;
  aspect-ratio: 1;
}
.orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed var(--orbit-ring-color, var(--color-border));
}
.orbit-ring--spin {
  animation: orbit-spin var(--orbit-ring-speed, 50s) linear infinite;
}
.orbit-ring::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--orbit-sweep-color, var(--color-accent));
  box-shadow: 0 0 12px 2px var(--orbit-sweep-color, var(--color-accent));
}
.orbit-ring--spin::before {
  opacity: 1;
}
.orbit-ring:not(.orbit-ring--spin)::before {
  opacity: 0; /* a static ring has nothing to mark the position of - the sweep dot only makes sense while moving */
}
@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}
.orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--orbit-core-size, 46%);
  height: var(--orbit-core-size, 46%);
  border-radius: 50%;
  background: var(--orbit-core-bg, var(--color-elevated));
  border: 1px solid var(--orbit-core-border, var(--color-border));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
  gap: 8px;
}
.orbit-core-eyebrow {
  font-family: var(--font-heading);
  font-size: var(--orbit-eyebrow-size, 11px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orbit-eyebrow-color, var(--color-text-muted));
  transition: opacity var(--orbit-swap-speed, 200ms) ease;
}
.orbit-core-quote {
  font-family: var(--orbit-quote-font, var(--font-heading));
  font-weight: var(--orbit-quote-weight, 700);
  font-style: var(--orbit-quote-style, normal);
  font-size: var(--orbit-quote-size, 15px);
  color: var(--orbit-quote-color, var(--color-text));
  line-height: 1.4;
  min-height: 84px;
  display: flex;
  align-items: center;
  transition: opacity var(--orbit-swap-speed, 200ms) ease;
}
.orbit-core-name {
  font-size: var(--orbit-name-size, 12px);
  color: var(--orbit-name-color, var(--color-accent));
  font-weight: 600;
  transition: opacity var(--orbit-swap-speed, 200ms) ease;
}
.orbit-core.swapping .orbit-core-eyebrow,
.orbit-core.swapping .orbit-core-quote,
.orbit-core.swapping .orbit-core-name {
  opacity: 0;
}
.orbit-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--orbit-node-size, 64px);
  height: var(--orbit-node-size, 64px);
  margin: calc(var(--orbit-node-size, 64px) / -2);
  border-radius: 50%;
  background: var(--orbit-node-bg, var(--color-panel));
  border: 1px solid var(--orbit-node-border, var(--color-border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--orbit-node-text, var(--color-text-muted));
  cursor: pointer;
  padding: 0;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.orbit-node:hover,
.orbit-node.active {
  border-color: var(--orbit-node-active, var(--color-accent));
  color: var(--orbit-node-active, var(--color-accent));
  background: color-mix(in srgb, var(--orbit-node-active, var(--color-accent)) 8%, var(--orbit-node-bg, var(--color-panel)));
  transform: scale(1.08);
}
.orbit-node:focus-visible {
  outline: 2px solid var(--orbit-node-active, var(--color-accent));
  outline-offset: 3px;
}
.orbit-hint {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: var(--space-lg);
}
@media (prefers-reduced-motion: reduce) {
  .orbit-ring--spin { animation: none; }
}
@media (max-width: 640px) {
  .orbit-outer { transform: scale(0.86); }
}

/* ==========================================================================
   PROCESS TIMELINE ("How It Works") - page-landing.php
   Vertical alternating timeline: a center line with a dot per step, a
   number badge that sits flush against the line with a small connector
   arrow, and the title/description on the outer edge. Odd steps sit on
   the left, even steps on the right (.align-left / .align-right).
   Collapses to a single left-aligned column on narrow screens.
   ========================================================================== */
.process-timeline {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 4px 0;
}
.process-timeline::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--process-line-color, var(--color-border)) 6%, var(--process-line-color, var(--color-border)) 94%, transparent);
  transform: translateX(-50%);
}
.section-base .process-timeline    { --tl-bg: var(--color-base); }
.section-panel .process-timeline   { --tl-bg: var(--color-panel); }
.section-elevated .process-timeline { --tl-bg: var(--color-elevated); }

.process-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.process-row + .process-row {
  margin-top: var(--space-lg);
}
.process-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--process-dot-color, var(--color-accent));
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px var(--tl-bg, var(--color-base)), 0 0 16px 2px color-mix(in srgb, var(--process-dot-color, var(--color-accent)) 50%, transparent);
  z-index: 2;
}
.process-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.process-row.align-left .process-content {
  grid-column: 1;
  justify-self: end;
  flex-direction: row;
  text-align: right;
}
.process-row.align-right .process-content {
  grid-column: 2;
  justify-self: start;
  flex-direction: row-reverse;
  text-align: left;
}
.process-text {
  max-width: 300px;
}
.process-text h3 {
  font-size: var(--process-title-size, 16px);
  margin-bottom: 6px;
  color: var(--process-title-color, var(--color-text));
}
.process-text p {
  font-size: var(--process-body-size, 13px);
  color: var(--process-body-color, var(--color-text-muted));
  line-height: 1.6;
}
.process-badge {
  position: relative;
  flex: none;
  width: var(--process-badge-size, 68px);
  height: var(--process-badge-size, 68px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--process-badge-bg, rgba(var(--tint-rgb),0.06));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.process-row:hover .process-badge {
  transform: translateY(-5px);
  border-color: var(--color-accent);
  box-shadow: 0 12px 28px -10px rgba(255,95,31,0.4);
}
.process-badge-icon {
  display: block;
  object-fit: contain;
  transition: transform 0.22s ease;
}
.process-row:hover .process-badge-icon {
  transform: scale(1.08);
}
.process-badge-label {
  font-family: var(--font-heading);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 3px;
}
.process-badge-num {
  font-family: var(--font-heading);
  font-size: var(--process-number-size, 20px);
  font-weight: 700;
  line-height: 1;
  color: var(--process-number-color, var(--color-accent));
}
.process-row.align-left .process-badge::after,
.process-row.align-right .process-badge::after {
  content: '';
  position: absolute;
  top: 50%;
  border-style: solid;
  transform: translateY(-50%);
}
.process-row.align-left .process-badge::after {
  left: 100%;
  border-width: 6px 0 6px 7px;
  border-color: transparent transparent transparent var(--process-line-color, var(--color-border));
}
.process-row.align-right .process-badge::after {
  right: 100%;
  border-width: 6px 7px 6px 0;
  border-color: transparent var(--process-line-color, var(--color-border)) transparent transparent;
}

@media (max-width: 860px) {
  .process-timeline::before { left: 20px; }
  .process-row { grid-template-columns: 1fr; }
  .process-row + .process-row { margin-top: var(--space-md); }
  .process-dot { left: 20px; }
  .process-row.align-left .process-content,
  .process-row.align-right .process-content {
    grid-column: 1;
    justify-self: start;
    flex-direction: row-reverse;
    text-align: left;
    padding-left: 46px;
  }
  .process-text { max-width: none; }
  .process-badge {
    width: calc(var(--process-badge-size, 68px) * 0.82);
    height: calc(var(--process-badge-size, 68px) * 0.82);
  }
  .process-badge-num { font-size: calc(var(--process-number-size, 20px) * 0.85); }
  .process-row.align-left .process-badge::after {
    left: auto;
    right: 100%;
    border-width: 6px 7px 6px 0;
    border-color: transparent var(--process-line-color, var(--color-border)) transparent transparent;
  }
}

/* ==========================================================================
   PROCESS CONTINUUM ("How It Works", Cinematic layout) - page-landing.php
   Pinned scroll-driven build: the section holds the viewport for
   data-vh-per-step x data-step-count of scroll while a circuit-trace SVG
   draws itself, a glowing node travels along it, and step panels
   cross-fade in sync. All progress math and the trace path itself are
   computed at runtime by js/process-continuum.js (the path is drawn
   through the section's own rendered geometry - see initTrace() in
   js/trust-stats-deck.js for the sibling technique this borrows from -
   so it always lines up, at any width, without a hardcoded shape).
   Colors/sizes come in as --pc-* custom properties set inline by
   razdigi_render_process_continuum() in inc/homepage-process.php.
   Falls back to a plain static list (see .process-continuum-fallback)
   for prefers-reduced-motion, no-JS, screen readers, and search engines.
   ========================================================================== */
.process-continuum {
  position: relative;
}
.process-continuum-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(48px, 8vw, 88px) 0;
  overflow: hidden;
}
/* Pinning is applied by JS toggling this class once it has measured the
   section (position: sticky needs a definite height on the OUTER
   wrapper, which JS sets via --pc-scroll-height once step count and
   vh-per-step are known). Until JS runs, the section behaves like an
   ordinary block - so it never breaks if JS fails to load. */
.process-continuum.is-pinned {
  height: var(--pc-scroll-height, auto);
}
.process-continuum.is-pinned .process-continuum-inner {
  position: sticky;
  top: 0;
  height: 100vh;
}
.process-continuum-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245,245,245,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,245,245,0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent 75%);
  pointer-events: none;
}
.process-continuum-cue {
  position: absolute;
  top: clamp(8px, 2vh, 20px);
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 0.6;
  z-index: 2;
}
.process-continuum.is-scrolled .process-continuum-cue,
.process-continuum:not(.is-pinned) .process-continuum-cue {
  display: none;
}
.process-continuum-head {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: clamp(12px, 3vw, 28px);
}
.process-continuum-kicker {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 600;
  color: var(--color-text-muted);
}
.process-continuum-stage {
  position: relative;
  z-index: 1;
  height: min(56vh, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.process-continuum-ghost {
  position: absolute;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: min(38vw, 420px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.06);
  user-select: none;
  transition: -webkit-text-stroke-color 0.5s ease;
  z-index: 0;
}
.process-continuum-ghost.is-live {
  -webkit-text-stroke: 1px color-mix(in srgb, var(--pc-ghost-color, var(--color-accent)) 30%, transparent);
}
.process-continuum-panels {
  position: relative;
  z-index: 2;
  width: min(640px, 86vw);
  height: 220px;
}
.process-continuum-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--pc-panel-bg, rgba(255,255,255,0.035));
  border: 1px solid var(--color-border);
  border-radius: 16px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.process-continuum-panel.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.process-continuum-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc-tag-color, var(--color-accent));
  margin-bottom: 12px;
}
.process-continuum-title {
  font-size: var(--pc-title-size, clamp(22px, 3vw, 30px));
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--pc-title-color, var(--color-text));
}
.process-continuum-desc {
  font-size: var(--pc-desc-size, 14px);
  color: var(--pc-desc-color, var(--color-text-muted));
  max-width: 42ch;
  line-height: 1.7;
}
.process-continuum-trace {
  position: relative;
  z-index: 1;
  width: min(1100px, 92vw);
  margin: 0 auto;
  height: clamp(70px, 12vh, 110px);
}
.process-continuum-trace-svg { width: 100%; height: 100%; overflow: visible; }
.process-continuum-trace-bg { fill: none; stroke: var(--color-border); stroke-width: 2; }
.process-continuum-trace-fg {
  fill: none;
  stroke: var(--pc-trace-color, var(--color-accent));
  stroke-width: 2;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pc-trace-color, var(--color-accent)) 70%, transparent));
}
.process-continuum-trace-node {
  fill: var(--color-elevated);
  stroke: var(--color-border);
  stroke-width: 2;
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.process-continuum-trace-node.is-passed {
  fill: var(--pc-trace-color, var(--color-accent));
  stroke: var(--pc-trace-color, var(--color-accent));
}
.process-continuum-trace-live {
  fill: var(--pc-node-color, var(--color-accent));
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pc-node-color, var(--color-accent)) 80%, transparent));
}
.process-continuum-progress {
  position: relative;
  z-index: 1;
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.process-continuum-progress b { color: var(--pc-tag-color, var(--color-accent)); }
.process-continuum-bar {
  width: 120px;
  height: 2px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}
.process-continuum-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--pc-trace-color, var(--color-accent));
}
/* Static fallback list - always in the DOM, always readable by screen
   readers/search engines. Hidden visually only when JS confirms the
   animated stage above is active (see js/process-continuum.js), and is
   the ONLY thing shown when prefers-reduced-motion is set, since the
   stage never activates in that case. */
.process-continuum-fallback {
  counter-reset: pc-step;
}
.process-continuum-fallback li {
  counter-increment: pc-step;
}
@media (prefers-reduced-motion: reduce) {
  .process-continuum-inner { min-height: 0; padding: clamp(32px, 6vw, 56px) 0; }
  .process-continuum.is-pinned { height: auto; }
  .process-continuum.is-pinned .process-continuum-inner { position: static; height: auto; }
  .process-continuum-stage,
  .process-continuum-trace,
  .process-continuum-progress,
  .process-continuum-cue {
    display: none;
  }
  /*
     Compound selector (both classes together) instead of just
     ".process-continuum-fallback" - this is deliberate, not stylistic.
     ".screen-reader-text" alone (see its rule further down this file)
     has the exact same specificity as a single-class override, and
     CSS resolves equal-specificity conflicts by *source order* - since
     ".screen-reader-text" is defined later in this file, a same-
     specificity override placed here would silently lose to it,
     leaving this fallback clipped to 1x1px forever even inside this
     "make it visible" media query. Chaining both classes raises the
     specificity above ".screen-reader-text" alone, so this wins
     regardless of where either rule sits in the file - the same fix
     already used for ".skip-link:focus" elsewhere in this stylesheet. */
  .screen-reader-text.process-continuum-fallback {
    position: static !important;
    width: auto !important; height: auto !important;
    overflow: visible !important; clip: auto !important;
    white-space: normal !important;
    margin: 0 auto;
    max-width: 900px;
    padding: 0 var(--space-md);
  }
  .process-continuum-fallback li {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
    color: var(--color-text-muted);
    text-align: left;
  }
  .process-continuum-fallback li::before {
    content: counter(pc-step, decimal-leading-zero) ' ';
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--pc-tag-color, var(--color-accent));
    margin-right: 8px;
  }
  .process-continuum-fallback li:last-child { border-bottom: none; }
}
@media (max-width: 720px) {
  .process-continuum-ghost { font-size: 46vw; }
  .process-continuum-stage { height: 60vh; }
  .process-continuum-panels { height: 260px; }
}

/* ==========================================================================
   WHY CHOOSE US (value strip under the Hero) - page-landing.php
   A short heading + a grid of checkmark bullet points, immediately
   answering "why this company" right after the hero.
   ========================================================================== */
.value-check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px var(--space-lg);
}
.value-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}
.value-check-icon {
  color: var(--color-growth);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.4;
}

/* ==========================================================================
   TRUST & STATS ROW (merged single row) - page-landing.php
   One flat solid-background row: a heading, then big green numbers with
   labels underneath. Static/centered when there are few; auto-scrolls in
   the shared .trust-marquee loop (see above) when there are more.
   ========================================================================== */
.trust-stats-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  padding: 6px 16px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: rgba(var(--tint-rgb),0.03);
  width: fit-content;
  max-width: 90%;
  text-align: center;
  font-size: clamp(12px, 0.9vw + 8px, 14px);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  /* Glow always matches the heading's own color (including any admin
     override, via currentColor) rather than a fixed hardcoded hue - a
     custom heading color would otherwise clash with a baked-in glow
     tint. Two layers: a tight inner glow + a softer wider halo. */
  text-shadow: 0 0 10px currentColor, 0 0 26px currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  .trust-stats-heading {
    animation: trust-heading-glow-pulse 3.2s ease-in-out infinite;
  }
}
@keyframes trust-heading-glow-pulse {
  0%, 100% { text-shadow: 0 0 8px currentColor, 0 0 22px currentColor; }
  50%      { text-shadow: 0 0 14px currentColor, 0 0 34px currentColor; }
}
/* Optional subheading line - trust_stats_subheading in wp-admin. Sits
   centered directly under the heading badge, above the stats/modules.
   :has() tightens the heading's own bottom margin only when a
   subheading actually follows it, so the gap between badge and
   subheading stays tight while the subheading keeps the original
   space-lg gap above whatever comes next (marquee or the Live Control
   Deck) - no JS, no extra markup needed on the heading itself. */
.trust-stats-heading:has(+ .trust-stats-subheading-row) {
  margin-bottom: 12px;
}
.trust-stats-subheading-row {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.6;
}
.trust-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 140px;
}
.trust-stat-item .stat-growth {
  font-size: 34px;
}
.trust-stat-item span {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
}

/* Pill badge style for Trust & Stats Row items - matches
   .hero-automation-eyebrow's exact visual language (rounded pill,
   bordered, small accent dot) instead of the plain stacked number/label
   block above. Selected via "Item style" in Homepage: Trust & Stats Row -
   default is pill; the stacked style above is what "Plain" falls back to. */
.trust-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 18px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: rgba(var(--tint-rgb), 0.03);
  white-space: nowrap;
}
.trust-stat-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-accent);
  flex-shrink: 0;
}
.trust-stat-pill .stat-growth {
  font-size: 16px;
  font-weight: 700;
}
.trust-stat-pill span:not(.trust-stat-pill-dot) {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   TRUST & STATS ROW - "LIVE CONTROL DECK" layout (default)
   page-landing.php + js/trust-stats-deck.js. A circuit trace runs from a
   pulsing hub through every stat module; each module gets a blinking LIVE
   dot and its number counts up on scroll-into-view. Every color below reads
   a --deck-* custom property first (set inline per-instance from wp-admin -
   see page-landing.php) and falls back to the theme's own accent/growth/
   border/elevated variables, so an untouched install matches the theme
   defaults with zero setup - same convention as .trust-bands-wrap.
   ========================================================================== */
.trust-deck-eyebrow {
  gap: 8px;
}
.trust-deck-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--deck-live-dot-color, var(--color-growth));
  box-shadow: 0 0 8px var(--deck-live-dot-color, var(--color-growth));
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .trust-deck-eyebrow-dot {
    animation: trust-deck-blink 1.6s ease-in-out infinite;
  }
}
@keyframes trust-deck-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

.trust-deck {
  position: relative;
  padding: 20px 0 8px;
}

/* Circuit trace - drawn by JS through the real module centers so it
   always lines up, at any width or wrap. Hidden entirely (JS never adds
   the <svg>/hub markup) when "disable the pulsing hub" is checked. */
.trust-deck-trace-svg {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}
.trust-deck-trace-line {
  stroke: var(--color-border);
  stroke-width: 1;
  fill: none;
}
.trust-deck-trace-pulse {
  stroke: var(--deck-hub-color, var(--color-accent));
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 8 400;
  filter: drop-shadow(0 0 5px var(--deck-hub-color, var(--color-accent)));
}
@media (prefers-reduced-motion: no-preference) {
  .trust-deck-trace-pulse {
    animation: trust-deck-dash 3.6s linear infinite;
  }
}
@keyframes trust-deck-dash {
  to { stroke-dashoffset: -420; }
}

.trust-deck-hub {
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 9999px;
  background: var(--deck-hub-color, var(--color-accent));
  box-shadow: 0 0 20px 3px color-mix(in srgb, var(--deck-hub-color, var(--color-accent)) 60%, transparent);
  z-index: 2;
}
.trust-deck-hub::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  border: 1px solid var(--deck-hub-color, var(--color-accent));
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .trust-deck-hub::before {
    animation: trust-deck-ping 2.4s cubic-bezier(0, .6, .4, 1) infinite;
  }
}
@keyframes trust-deck-ping {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(3.2); opacity: 0; }
}

.trust-deck-modules {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  padding-left: 24px;
}
.trust-deck--no-hub .trust-deck-modules {
  padding-left: 0;
}

.trust-deck-module {
  flex: 1 1 160px;
  min-width: 150px;
  background: var(--deck-module-bg, rgba(19, 18, 16, .6));
  border: 1px solid var(--deck-module-border, var(--color-border));
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.trust-deck-module:hover {
  border-color: var(--deck-module-hover, var(--color-accent));
  box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--deck-module-hover, var(--color-accent)) 40%, transparent);
  transform: translateY(-4px);
}
.trust-deck-module-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.trust-deck-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--deck-live-dot-color, var(--color-growth));
  box-shadow: 0 0 6px var(--deck-live-dot-color, var(--color-growth));
}
@media (prefers-reduced-motion: no-preference) {
  .trust-deck-live-dot {
    animation: trust-deck-blink 1.8s ease-in-out infinite;
  }
}
.trust-deck-module-num {
  font-variant-numeric: tabular-nums;
}
.trust-deck-module-label {
  font-size: 12.5px;
  color: var(--color-text-muted);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .trust-deck-eyebrow-dot,
  .trust-deck-live-dot,
  .trust-deck-hub::before,
  .trust-deck-trace-pulse {
    animation: none;
  }
  .trust-deck-trace-pulse { opacity: .5; }
  .trust-deck-module { transition: none; }
}

@media (max-width: 720px) {
  .trust-deck-modules { padding-left: 0; }
  .trust-deck-trace-svg,
  .trust-deck-hub { display: none; }
}

/* ============================================
   3. SCROLL-REVEAL ANIMATION
   Elements start slightly lower, blurred, and transparent, then animate in
   -focus- when scrolled into view (a step up from a flat fade-up: it reads
   as a camera pulling into focus rather than just sliding up). JS in
   main.js toggles the "is-visible" class.
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out, filter 0.7s ease-out;
  transition-delay: calc(min(var(--reveal-i, 0), 8) * 70ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Respect users who've asked for reduced motion - accessibility basic */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
}

/*
 * SCROLL SIGNAL THREAD - a thin vertical line pinned to the left edge that
 * fills, plus a glowing node that travels down it, as the page scrolls.
 * Ties every section together visually (echoes the hero's circuit/network
 * motif - a signal running through the whole automation pipeline) rather
 * than each section being its own isolated block. Markup lives in
 * header.php; main.js updates --scroll-progress (0-1) on scroll, and both
 * the fill height and the node's position read that same value, so
 * they're always perfectly in sync with each other.
 */
.scroll-signal {
  position: fixed;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  height: 44vh;
  width: 2px;
  z-index: 60;
  pointer-events: none;
}
.scroll-signal-track {
  position: absolute;
  inset: 0;
  background: rgba(var(--tint-rgb), 0.08);
  border-radius: 99px;
}
.scroll-signal-fill {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--scroll-progress, 0) * 100%);
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-hover));
  border-radius: 99px;
}
.scroll-signal-node {
  position: absolute;
  left: 50%;
  top: calc(var(--scroll-progress, 0) * 100%);
  width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px 2px var(--color-accent), 0 0 18px 5px rgba(255,95,31,0.35);
  animation: signal-pulse 1.8s ease-in-out infinite;
}
@keyframes signal-pulse {
  0%, 100% { box-shadow: 0 0 8px 2px var(--color-accent), 0 0 18px 5px rgba(255,95,31,0.35); }
  50%      { box-shadow: 0 0 12px 3px var(--color-accent), 0 0 26px 8px rgba(255,95,31,0.5); }
}
/* Not enough room to show this without crowding the content once things
   get narrower - it's decoration, not a required control, so it just
   isn't there rather than being squeezed in awkwardly. */
@media (max-width: 1100px) {
  .scroll-signal { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* Keep the progress fill/node position (it reflects real page state,
     not just decoration) but stop the pulsing glow animation. */
  .scroll-signal-node {
    animation: none;
  }
}

/* ==========================================================================
   PRIMARY NAVIGATION (with dropdown support)
   Desktop: horizontal list, submenus reveal on hover/focus, positioned
   absolute below the parent item. Mobile rules further down convert this
   into a stacked, tap-to-expand menu instead.
   ========================================================================== */
#primary-nav {
  position: relative;
}
.menu-toggle {
  display: none; /* shown only at the mobile breakpoint below */
  border: none;
  background: none;
  color: var(--color-text);
  cursor: pointer;
}
.primary-menu {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: var(--nav-font-size, 14px);
  color: var(--nav-text-color, var(--color-text-muted));
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-menu li {
  position: relative;
}
.primary-menu a {
  color: inherit;
  display: block;
  padding: 8px 0;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.primary-menu a:hover {
  color: var(--nav-hover-color, var(--color-text));
}

/* Nav hover effect variants - the active one is chosen in wp-admin
   (Appearance > Customize > Header > Nav Menu > Hover effect), applied as
   a class on #site-header. "fade-only" needs no extra rules (that's the
   plain color transition above). */
.nav-indicator {
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 1.5px;
  background: var(--nav-hover-color, var(--color-accent));
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--nav-hover-color, var(--color-accent)) 65%, transparent);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease;
}
/* Only the default "underline" effect uses the traveling indicator - the
   glow/fade-only options (chosen in Appearance > Customize > Header > Nav
   Menu > Hover effect) don't add this element's positioning JS at all, but
   this keeps it invisible either way if markup is ever cached stale. */
#site-header:not(.nav-hover-underline) .nav-indicator {
  display: none;
}
.nav-hover-glow .primary-menu a:hover {
  text-shadow: 0 0 10px color-mix(in srgb, var(--nav-hover-color, var(--color-accent)) 70%, transparent);
}

/* Small dropdown arrow after any item that has a submenu */
.primary-menu .menu-item-has-children > a::after {
  content: '▾';
  font-size: 10px;
  margin-left: 5px;
  opacity: 0.7;
}

/* Mobile submenu toggle button (injected by main.js) - hidden by default.
   This is the fix for dropdown nav items (AI Solutions, Digital Services)
   looking vertically misaligned versus plain items: without this rule,
   the injected <button> had no styling at desktop width and sat inside
   the <li> as a real, unstyled inline element, throwing off its height.
   The mobile media query further down re-enables and positions it. */
.razdigi-submenu-toggle {
  display: none;
}

.primary-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px;
  list-style: none;
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 50;
}
.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.primary-menu .sub-menu a {
  padding: 8px 10px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 13px;
  white-space: nowrap;
}
.primary-menu .sub-menu a:hover {
  background: var(--color-panel);
}

@media (max-width: 768px) {
  .section { padding: var(--space-lg) 0; }

  /* Animated hamburger - 3 fixed lines that rotate/fade into an X.
     main.js toggles .is-active on click; no textContent swap needed. */
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 28px;
    height: 20px;
    padding: 0;
  }
  .menu-toggle-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 1px;
    background: var(--color-text);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, top 0.3s ease;
  }
  .menu-toggle-line:nth-child(1) { top: 0; }
  .menu-toggle-line:nth-child(2) { top: 9px; }
  .menu-toggle-line:nth-child(3) { top: 18px; }
  .menu-toggle.is-active .menu-toggle-line:nth-child(1) { top: 9px; transform: rotate(45deg); }
  .menu-toggle.is-active .menu-toggle-line:nth-child(2) { opacity: 0; }
  .menu-toggle.is-active .menu-toggle-line:nth-child(3) { top: 9px; transform: rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) {
    .menu-toggle-line { transition: opacity 0.15s ease; }
    .menu-toggle.is-active .menu-toggle-line:nth-child(1),
    .menu-toggle.is-active .menu-toggle-line:nth-child(3) {
      top: 9px;
      transform: none; /* skip the rotate animation, just cross-fade to the open state */
    }
  }

  /* MOBILE NAV: fullscreen immersive overlay rather than a plain dropdown
     panel - fills the viewport below the header, links enter with a
     staggered fade+rise (reusing the same --reveal-i choreography pattern
     main.js already assigns to every .reveal grid elsewhere in the theme,
     applied here via nth-child instead since this menu isn't a .reveal
     element - it needs to animate every time it opens, not just once). */
  .nav-indicator { display: none; } /* traveling indicator is a desktop-only concept - nav is vertical here */
  #primary-nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100dvh;
    background: var(--color-base);
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
    z-index: 90;
  }
  #primary-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  #primary-nav ul {
    flex-direction: column !important;
    gap: 4px !important;
    padding: var(--space-md);
    width: 100%;
    max-width: 420px;
    max-height: 82vh;
    overflow-y: auto;
  }
  #primary-nav ul li {
    padding: 0;
    border-bottom: 1px solid var(--color-border);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  /* Staggered entrance: each item's delay increases with its position, but
     only once the menu is actually open - closed state stays instantly
     invisible above so there's nothing to flash before JS adds .is-open. */
  #primary-nav.is-open ul li {
    opacity: 1;
    transform: translateY(0);
  }
  #primary-nav ul li:nth-child(1) { transition-delay: 0.05s; }
  #primary-nav ul li:nth-child(2) { transition-delay: 0.1s; }
  #primary-nav ul li:nth-child(3) { transition-delay: 0.15s; }
  #primary-nav ul li:nth-child(4) { transition-delay: 0.2s; }
  #primary-nav ul li:nth-child(5) { transition-delay: 0.25s; }
  #primary-nav ul li:nth-child(6) { transition-delay: 0.3s; }
  #primary-nav ul li:nth-child(7) { transition-delay: 0.35s; }
  #primary-nav ul li > a {
    padding: 16px 0;
    font-size: 20px;
    font-family: var(--font-heading);
  }
  @media (prefers-reduced-motion: reduce) {
    #primary-nav,
    #primary-nav ul li {
      transition: opacity 0.15s ease, visibility 0s linear 0.15s;
      transform: none;
    }
    #primary-nav.is-open ul li { transition-delay: 0s !important; }
  }
  /* Submenus: no more hover on touch devices - main.js adds/removes
     .sub-menu-open on tap of the parent item's arrow button instead */
  .primary-menu .sub-menu {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border: none;
    background: none;
    padding: 0 0 0 var(--space-sm);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .primary-menu li.sub-menu-open > .sub-menu {
    max-height: 500px;
  }
  .primary-menu .menu-item-has-children {
    position: relative;
  }
  .primary-menu .menu-item-has-children > a::after {
    display: none; /* replaced by the dedicated toggle button below on mobile */
  }
  .razdigi-submenu-toggle {
    display: block;
    position: absolute;
    top: 6px;
    right: 0;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 12px;
    padding: 8px;
    transition: transform 0.2s ease;
  }
  li.sub-menu-open > .razdigi-submenu-toggle {
    transform: rotate(180deg);
  }
  .site-header .header-inner {
    position: relative;
  }
  .faq-columns {
    columns: 1 !important;
  }
}

/* Header CTA: on narrow phones, the full button label ("Book Free AI
   Strategy Call") next to the logo + hamburger has no room and would
   wrap or force the header to overflow. Shrink padding/font first; on
   very narrow screens fall back to a short label so it always fits on
   one line without breaking the header layout. */
@media (max-width: 480px) {
  .site-header .btn-primary {
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  .site-header .btn-primary .btn-label-full { display: none; }
  .site-header .btn-primary .btn-label-short { display: inline; }
}
.site-header .btn-primary .btn-label-short { display: none; }

/* ==========================================================================
   HOMEPAGE HERO (split-screen, lead-capture form) - template-parts/hero-automation.php
   Scoped under .hero-automation. Uses your site's own design-system
   variables (--color-base, --color-accent, etc. defined at the top of this
   file) instead of separate colors, so it matches the rest of the site.
   ========================================================================== */
.hero-automation {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-base);
  padding: var(--space-xl) 0;
  min-height: var(--hero-min-height, auto);
  display: flex;
  flex-direction: column;
}
.hero-automation--light {
  padding: var(--space-lg) 0;
}
.hero-automation--light .hero-automation-circuit-grid {
  opacity: 0.3;
}
.hero-automation--light .hero-automation-glow-cyan {
  opacity: 0.16;
  width: 40vw;
  height: 40vw;
}

/*
 * "Living network" interaction - the circuit grid, glows, and neural net
 * shift very slightly (parallax) as the cursor moves, and a soft light
 * follows the pointer. Driven by main.js (mousemove → translate3d), which
 * only runs on fine-pointer devices with no reduced-motion preference -
 * touch devices and reduced-motion users get the exact same hero, just
 * without the pointer reactivity (the ambient SVG/glow animations still
 * run for everyone). transform-only + will-change keeps this on the GPU
 * so it costs nothing on a 5-year-old Android.
 */
.hero-automation-circuit-grid,
.hero-automation-glow {
  will-change: transform;
  transition: transform 0.2s ease-out;
}
.hero-automation-cursor-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    480px circle at var(--cursor-x, 50%) var(--cursor-y, 50%),
    color-mix(in srgb, var(--hero-cursor-glow-color, var(--color-accent)) 14%, transparent),
    transparent 70%
  );
  transition: opacity 0.4s ease;
}
.hero-automation-cursor-glow.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .hero-automation-cursor-glow {
    display: none;
  }
}
/* Per-layer on/off toggles - Homepage Hero > Design & Animation box */
.hero-automation--no-grid .hero-automation-circuit-grid,
.hero-automation--no-glows .hero-automation-glow,
.hero-automation--no-cursor-glow .hero-automation-cursor-glow {
  display: none;
}
/* Optional background image texture layer - sits furthest back, behind
   the circuit-grid/glows, at whatever opacity is set in wp-admin. */
.hero-automation-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
}

/*
 * Pain Points' background gets the SAME "resolve" language as the Hero -
 * scattered/faded settling into place - but deliberately smaller and
 * quicker, and triggered by scroll-into-view (IntersectionObserver in
 * main.js) instead of page load. This is the "echo", not a repeat: it
 * confirms the site's visual system is consistent without re-running the
 * Hero's full entrance a second time, which would feel repetitive rather
 * than intentional.
 */
.pain-points-bg-resolve {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-origin: 50% 50%;
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s ease-out;
}
.pain-points-bg-resolve.is-resolved {
  transform: scale(1);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .pain-points-bg-resolve {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* Circuit-board style grid overlay - subtle repeating lines that read as
   "tech" without being distracting. Sits behind the glows and neural net. */
.hero-automation-circuit-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hero-grid-color, var(--color-accent)) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hero-grid-color, var(--color-accent)) 7%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
}

/* Ambient background glows - slow drifting blooms for atmosphere, in your
   site's signal-orange accent color at two different opacities/positions.
   Brighter + larger than a typical "ambient" glow on purpose - this is the
   section's signature electric-tech look, not a subtle background detail. */
.hero-automation-glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(110px);
  opacity: 0.34;
  pointer-events: none;
  z-index: 0;
  background: var(--hero-glow-color, var(--color-accent));
}
.hero-automation-glow-cyan {
  width: 48vw; height: 48vw;
  top: -16%; left: -12%;
  animation: hero-auto-drift-1 18s ease-in-out infinite alternate;
}
.hero-automation-glow-indigo {
  width: 52vw; height: 52vw;
  bottom: -22%; right: -14%;
  opacity: 0.24;
  animation: hero-auto-drift-2 22s ease-in-out infinite alternate;
}
@keyframes hero-auto-drift-1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(4%, 6%) scale(1.08); }
}
@keyframes hero-auto-drift-2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-5%, -4%) scale(1.05); }
}

/* The Hero's own neural-network SVG has been retired in favor of the
   sitewide canvas network (see .razdigi-network-canvas below and
   js/network.js) - one shared graph of nodes spanning the whole site
   instead of a Hero-only decoration. */

/* Layout: content left, form right - both pulled toward the screen edges
   via .container-edge (see the template part). Stacks on mobile (form
   below copy). */
.hero-automation-grid {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 1;
  grid-template-columns: 1fr minmax(320px, 420px);
  gap: var(--space-xl);
  align-items: var(--hero-align-items, center);
}
@media (max-width: 900px) {
  .hero-automation-grid {
    grid-template-columns: 1fr;
  }
}

/* Left column - copy. Explicitly left-aligned (not centered/justified -
   ragged-right reads far more cleanly than fully-justified text at this
   size) and given a soft radial scrim behind it so the busier electric
   background never fights with legibility. */
.hero-automation-copy {
  position: relative;
  text-align: left;
  z-index: 2;
}
.hero-automation-copy::before {
  content: '';
  position: absolute;
  inset: -32px -40px;
  background: radial-gradient(ellipse at left center, var(--color-base) 35%, transparent 75%);
  z-index: -1;
  pointer-events: none;
}
.hero-automation-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-sm);
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: rgba(var(--tint-rgb),0.03);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.hero-automation-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--color-accent);
  flex-shrink: 0;
}
.hero-automation-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
/*
 * Word-by-word reveal - each word (see hero-automation.php, split server-
 * side into <span class="word">) fades/lifts in with its own delay based
 * on --i, set inline per word. This is the "crafted" version of the plain
 * fade-in every other section uses: reads as considered, not templated.
 * Pure CSS animation-delay chain, no JS, so there's no flash-of-unstyled
 * text risk even on a slow connection.
 */
.hero-automation-heading .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  animation: hero-word-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * var(--word-stagger-s, 0.06s) + 0.1s);
}
@keyframes hero-word-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-automation-heading .word {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* "None" reveal style (Homepage Hero > Design & Animation) - show the
   heading immediately with no fade and no JS scramble. */
.hero-automation--anim-none .hero-automation-heading .word {
  animation: none;
  opacity: 1;
  transform: none;
}
.hero-automation-sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 0.9rem + 0.3vw, 18px);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: justify;
  /* Justify alone can stretch word-gaps awkwardly on the last few lines of
     a short paragraph - hyphenation lets the browser break a long word
     across lines instead of stretching the whole line to fill the width,
     which keeps the gaps noticeably tighter. */
  hyphens: auto;
  -webkit-hyphens: auto;
  max-width: 100%; /* stretches to the same width as the heading above it (both share .hero-automation-copy's container) */
}

/* Right column - form card. Fixed, designed styling (not wp-admin
   editable) - see inc/homepage-fields.php for why the old per-color
   meta-field version was removed. */
.hero-automation-form-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  /* A visible seat under the card - without this it can read as floating
     flatly on top of the busy hero background rather than sitting on it. */
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
}
.hero-automation-field-label {
  display: block;
}
.hero-automation-field {
  width: 100%;
  padding: 14px 16px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.hero-automation-field::placeholder {
  color: var(--color-text-muted);
  opacity: 0.85;
}
.hero-automation-field:hover {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}
.hero-automation-field:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.hero-automation-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23A8A6A0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.hero-automation-select option {
  background: var(--color-elevated);
  color: var(--color-text);
}
.hero-automation-cta {
  width: 100%;
  padding: 15px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.hero-automation-cta:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -6px color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.hero-automation-cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.hero-automation-footnote {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0;
}
.hero-automation-success {
  font-family: var(--font-body);
  text-align: center;
  color: var(--color-accent);
  font-size: 15px;
}

/* ==========================================================================
   NEWS BULLETIN BAR - bottom of the Hero (template-parts/hero-automation.php)
   A small scrolling ticker: a pinned label on the left, then a continuous
   left-scrolling loop of facts. Every visual property (height, background
   color/transparency, text colors/sizes, loop speed) comes from wp-admin -
   see the "Homepage: News Bulletin Bar" box.
   ========================================================================== */
.hero-bulletin-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 var(--space-md);
  margin-top: var(--space-lg);
  margin-bottom: calc(var(--space-xl) * -1); /* cancels .hero-automation's own bottom padding so this sits flush at the true bottom edge */
  border-top: 1px solid rgba(var(--tint-rgb),0.08);
  overflow: hidden;
}
/*
 * "Live Ledger Feed" treatment - ties the bar into the same visual
 * language as the Hero's neural network (node-pulse, resolve animation)
 * rather than giving it its own disconnected aesthetic. Two purely
 * decorative, CSS-only additions:
 *   ::before - a thin light sweep that crosses the top edge on a slow
 *     loop, like a data readout scanning itself.
 *   ::after  - a near-invisible repeating scanline texture, the kind of
 *     detail that reads as "considered" without anyone consciously
 *     noticing it's there.
 * Both are `background-position`/opacity only (no layout properties), so
 * they're free to animate and never contribute to layout shift.
 */
.hero-bulletin-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0.7;
  animation: hero-bulletin-sweep 5s linear infinite;
  pointer-events: none;
}
@keyframes hero-bulletin-sweep {
  to { left: 130%; }
}
.hero-bulletin-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(var(--tint-rgb),0.025) 0px,
    rgba(var(--tint-rgb),0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-bulletin-bar::before {
    animation: none;
    opacity: 0;
  }
}
/* wp-admin > "Homepage: News Bulletin Bar" > "Disable the decorative
   light-sweep animation" - off by default (sweep is on unless this class
   is present). */
.hero-bulletin-bar--no-sweep::before {
  content: none;
}
.hero-bulletin-label {
  flex-shrink: 0;
  /* Text type (font), text style, size and color all come from wp-admin >
     "Homepage: News Bulletin Bar" as inline styles - no font/weight/
     transform is hardcoded here anymore, so every option in that box
     actually takes effect. */
  white-space: nowrap;
  padding-right: 16px;
  border-right: 1px solid rgba(var(--tint-rgb),0.15);
  position: relative;
  z-index: 1; /* sits above the scanline texture */
}
.hero-bulletin-scroll {
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 1; /* sits above the scanline texture */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.hero-bulletin-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation-name: hero-bulletin-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes hero-bulletin-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* content is duplicated in the markup, so -50% is exactly one full loop */
}
/* "Bulletin ticker animation" = scroll-right in wp-admin - same loop,
   opposite direction. */
.hero-bulletin-track-reverse {
  animation-name: hero-bulletin-scroll-reverse;
}
@keyframes hero-bulletin-scroll-reverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
/* "Bulletin ticker animation" = none (static) in wp-admin - stops the
   loop entirely; the pause/play button is hidden in this mode (see
   template-parts/hero-automation.php) since there's nothing to pause. */
.hero-bulletin-track-static {
  animation: none;
}
/* Pauses on hover AND via the explicit pause/play button (main.js toggles
   .is-paused) - the ticker was missing both of these; Trust Bar already
   had them, this brings the two in line with each other. */
.hero-bulletin-bar:hover .hero-bulletin-track,
.hero-bulletin-track.is-paused {
  animation-play-state: paused;
}
/* wp-admin > "Homepage: News Bulletin Bar" > "Disable pausing the scroll on
   mouse hover" - the manual pause button (.is-paused, toggled by
   js/main.js) still works either way; this only removes the automatic
   hover-to-pause behavior. */
.hero-bulletin-bar--no-hover-pause:hover .hero-bulletin-track {
  animation-play-state: running;
}
.hero-bulletin-bar--no-hover-pause:hover .hero-bulletin-track.is-paused {
  animation-play-state: paused;
}
.hero-bulletin-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 0 20px;
  position: relative;
}
/* Small separator dot between facts, positioned in the existing gap so
   it doesn't double up with the checkmark icon at the front of each item.
   Reuses the same "Divider color" field that already draws the top
   hairline and the label's own divider - one color choice in wp-admin,
   three places it now shows up consistently. */
.hero-bulletin-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--bulletin-divider-color, rgba(255,255,255,0.15));
}
.hero-bulletin-check {
  color: var(--color-growth);
  font-weight: 700;
  display: inline-block;
  animation: hero-bulletin-check-pulse 2.4s ease-in-out infinite;
}
/* Staggers each checkmark's pulse slightly out of phase with its
   neighbors (via nth-child), so the whole row doesn't blink in perfect
   unison - reads as organic/alive rather than a mechanical blink. */
.hero-bulletin-item:nth-child(3n)  .hero-bulletin-check { animation-delay: -0.5s; }
.hero-bulletin-item:nth-child(3n+1) .hero-bulletin-check { animation-delay: -1.3s; }
@keyframes hero-bulletin-check-pulse {
  0%, 100% { text-shadow: 0 0 0px currentColor; opacity: 0.85; }
  50%      { text-shadow: 0 0 6px currentColor;  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bulletin-check {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bulletin-track {
    animation: none;
  }
}
@media (max-width: 640px) {
  .hero-bulletin-label {
    display: none; /* saves space on small screens - the scrolling facts still show */
  }
  /* wp-admin > "Homepage: News Bulletin Bar" > "Show the heading label on
     mobile too" - opts back into showing it. */
  .hero-bulletin-bar--show-label-mobile .hero-bulletin-label {
    display: inline-flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-automation-glow {
    animation: none !important;
  }
}

/* ==========================================================================
   SITEWIDE NETWORK CANVAS (js/network.js)
   One fixed, full-viewport canvas behind... actually ON TOP of every
   section, but rendered with mix-blend-mode so it reads as "behind" the
   dark UI without ever being literally behind it - the whole reason this
   works sitewide is that most sections use solid/opaque backgrounds
   (--color-base/panel/elevated), which would fully hide a layer placed
   underneath them in the stacking order. `screen` blend mode + low-alpha
   strokes solves that: it only ever brightens pixels, so it's invisible
   over pure white/bright UI (buttons, white text stay unaffected) and
   glows softly over this site's near-black backgrounds - which is nearly
   the entire page. pointer-events:none the whole layer never intercepts
   clicks, and aria-hidden keeps it out of the accessibility tree.

   LIGHT MODE: `screen` only brightens - over a near-white page it would
   have nothing left to brighten into, making the whole canvas invisible.
   `multiply` is the mirror-image trick (only darkens), so
   html[data-theme="light"] below swaps the blend mode via a variable
   instead of duplicating this whole rule - js/network.js's setTheme()
   already switches the node/pulse colors to a dark ink to match (see
   ACCENT_SOFT/PULSE_CORE there).
   ========================================================================== */
.razdigi-network-canvas {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: var(--network-blend-mode, screen);
}
@media (prefers-reduced-motion: reduce) {
  /* JS still draws a static (non-animated) network for reduced-motion -
     this only strips the CSS-level opacity fade-in on first paint, the
     canvas itself never runs its scatter->resolve or idle drift loop. */
  .razdigi-network-canvas {
    transition: none !important;
  }
}


/* Visually hides text for screen readers only (standard WP-style utility) */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
/*
 * Skip-to-content link (WCAG 2.4.1) - inherits .screen-reader-text's
 * hidden-by-default styling above, then this override makes it visible
 * and usable the moment a keyboard user tabs to it. Sits above everything
 * (z-index) so it's never obscured by the sticky header.
 */
.skip-link:focus {
  position: fixed !important;
  top: 12px;
  left: 12px;
  width: auto; height: auto;
  clip: auto;
  overflow: visible;
  z-index: 10000;
  padding: 10px 18px;
  background: var(--color-accent);
  color: #0A0A08;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius);
  text-decoration: none;
}
/* Lands just below the sticky header instead of tucked underneath it,
   whether reached via the skip-link, an in-page anchor, or a fragment URL */
#main-content {
  scroll-margin-top: 76px;
}

/* ==========================================================================
   FLOATING CHAT / WHATSAPP WIDGET - footer.php, shown on every page
   Fixed to the bottom-right corner so it stays in view while scrolling.
   Configure under Appearance > Customize > WhatsApp / Chat Widget.
   ========================================================================== */
.razdigi-chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
}
.razdigi-chat-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.5);
  transition: transform 0.2s ease, background 0.2s ease;
}
.razdigi-chat-toggle svg {
  width: 26px;
  height: 26px;
}
.razdigi-chat-toggle:hover {
  transform: scale(1.06);
  background: var(--color-accent-hover);
}
.razdigi-chat-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.razdigi-chat-menu {
  position: absolute;
  bottom: 68px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 240px;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.razdigi-chat-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.razdigi-chat-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 13px;
  color: var(--color-text);
  transition: background 0.15s ease;
}
.razdigi-chat-option:hover {
  background: var(--color-panel);
}
.razdigi-chat-option-icon {
  font-size: 16px;
}

@media (max-width: 600px) {
  .razdigi-chat-widget {
    bottom: 16px;
    right: 16px;
  }
  .razdigi-chat-menu {
    min-width: 200px;
  }
}

/* ==========================================================================
   AI CHAT PANEL (real conversation, when AI is enabled)
   ========================================================================== */
.razdigi-chat-panel {
  position: absolute;
  bottom: 68px;
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  height: 440px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,0.6);
}
.razdigi-chat-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.razdigi-chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.razdigi-chat-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}
.razdigi-chat-close:hover {
  color: var(--color-text);
}

.razdigi-chat-whatsapp-handoff {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--color-accent);
  background: var(--color-panel);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.razdigi-chat-whatsapp-handoff:hover {
  text-decoration: underline;
}

.razdigi-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.razdigi-chat-bubble {
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: calc(var(--radius) - 2px);
  max-width: 85%;
}
.razdigi-chat-bubble-ai {
  align-self: flex-start;
  background: var(--color-panel);
  color: var(--color-text);
}
.razdigi-chat-bubble-user {
  align-self: flex-end;
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.razdigi-chat-bubble-error {
  border: 1px solid var(--color-border);
}
.razdigi-chat-typing {
  opacity: 0.6;
}

.razdigi-chat-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.razdigi-chat-form input {
  flex: 1;
  padding: 10px 12px;
  font-size: 13px;
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
}
.razdigi-chat-form input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.razdigi-chat-form button {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
  cursor: pointer;
  font-size: 14px;
}
.razdigi-chat-form button:hover {
  background: var(--color-accent-hover);
}

@media (max-width: 600px) {
  .razdigi-chat-panel {
    width: calc(100vw - 32px);
  }
}

/* ==========================================================================
   CUSTOM CURSOR - Appearance > Customize > Header > Site-Wide Effects.
   Two elements: a small solid dot that tracks the mouse exactly, and a
   larger ring that trails slightly behind it (animated in main.js) for a
   soft "magnetic" feel. Both are inert/decorative (pointer-events: none)
   and JS only ever adds this body class + activates tracking for visitors
   on a fine-pointer device without prefers-reduced-motion, so touch users
   and anyone needing reduced motion always keep the plain native cursor.
   ========================================================================== */
#razdigi-cursor-dot, #razdigi-cursor-ring {
  display: none;
  position: fixed;
  top: 0; left: 0;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}
#razdigi-cursor-dot {
  width: 6px; height: 6px;
  background: var(--custom-cursor-color, var(--color-accent));
}
#razdigi-cursor-ring {
  width: 34px; height: 34px;
  border: 1.5px solid var(--custom-cursor-color, var(--color-accent));
  opacity: 0.6;
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
body.razdigi-cursor-active {
  cursor: none;
}
body.razdigi-cursor-active a,
body.razdigi-cursor-active button,
body.razdigi-cursor-active input,
body.razdigi-cursor-active select,
body.razdigi-cursor-active textarea,
body.razdigi-cursor-active [role="button"] {
  cursor: none;
}
body.razdigi-cursor-active #razdigi-cursor-dot,
body.razdigi-cursor-active #razdigi-cursor-ring {
  display: block;
}
/* "Magnetized" state - ring grows and softens when hovering anything
   clickable, giving interactive elements a tactile, premium feel. */
#razdigi-cursor-ring.is-hovering {
  width: 54px;
  height: 54px;
  opacity: 0.9;
  background: color-mix(in srgb, var(--custom-cursor-color, var(--color-accent)) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  #razdigi-cursor-dot, #razdigi-cursor-ring { display: none !important; }
  body.razdigi-cursor-active { cursor: auto; }
}

/* ==========================================================================
   LIVING SYSTEM - pulse ring (main.js: razdigiPulseFrom())
   A short expanding ring fired from a card on hover, or from the chat
   button when it opens - the "the system just noticed you" moment. Fixed
   positioning + one element created/destroyed per fire, so it's cheap
   even fired frequently. Skipped entirely for prefers-reduced-motion
   (checked in JS before creating the element at all).
   ========================================================================== */
.razdigi-pulse-ring {
  position: fixed;
  z-index: 300;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 9999px;
  border: 1.5px solid var(--color-accent);
  pointer-events: none;
  /* ease-out-expo-ish: fast initial burst, long soft tail - reads as an
     electric "ping" rather than a generic fade, matching the site's
     signal/pulse identity. --pulse-scale is set per-fire from JS so the
     ring's final size is proportional to the element it came from (a
     14px trust logo shouldn't produce the same ring as a 300px pricing
     card). */
  animation: razdigi-pulse-expand 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes razdigi-pulse-expand {
  from {
    transform: scale(1);
    opacity: 0.75;
  }
  to {
    transform: scale(var(--pulse-scale, 9));
    opacity: 0;
  }
}

/* ==========================================================================
   FINAL CTA - TERMINAL PANEL - page-landing.php
   A console/system-panel styled closing CTA: macOS-style window chrome,
   a blinking status line, a headline typed out character-by-character
   when it scrolls into view (js/cta-terminal.js), and a hover scanline
   sweep across the whole panel. Every color/size here has a sensible
   default baked in via var(..., fallback) and can be overridden from
   wp-admin through the CSS custom properties set on .cta-terminal-panel
   (inc/homepage-fields.php) - same convention as the Process Timeline
   and Partner Logo Bands.
   ========================================================================== */
.cta-terminal-section {
  padding: var(--space-xl) 0;
}
.cta-terminal-panel {
  position: relative;
  width: 100%;
  max-width: var(--cta-panel-max-width, 620px);
  border: 1px solid var(--cta-panel-border, var(--color-border));
  border-radius: var(--radius);
  background: var(--cta-panel-bg, var(--color-elevated));
  overflow: hidden;
}
.cta-terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--cta-bar-bg, rgba(255,255,255,0.02));
}
.cta-terminal-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.cta-terminal-dot.r { background: #FF5F57; }
.cta-terminal-dot.y { background: #FEBC2E; }
.cta-terminal-dot.g { background: #28C840; }
.cta-terminal-path {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cta-path-color, var(--color-text-muted));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cta-terminal-body {
  padding: clamp(28px, 4vw, 40px) clamp(20px, 4vw, 32px) clamp(24px, 4vw, 32px);
  position: relative;
}
.cta-terminal-status {
  font-family: var(--font-mono);
  font-size: var(--cta-status-size, 11px);
  color: var(--cta-status-color, var(--color-growth));
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}
.cta-terminal-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.cta-terminal-pip.is-blinking {
  animation: cta-terminal-blink 1.6s ease-in-out infinite;
}
@keyframes cta-terminal-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
.cta-terminal-heading {
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 20px;
  min-height: 1.3em; /* reserves space before typing starts - avoids layout shift */
}
.cta-terminal-heading .cta-terminal-cursor {
  display: inline-block;
  width: 3px;
  height: 0.95em;
  background: var(--cta-cursor-color, var(--color-accent));
  vertical-align: -0.12em;
  margin-left: 2px;
  animation: cta-terminal-caret 0.9s steps(1) infinite;
}
@keyframes cta-terminal-caret {
  50% { opacity: 0; }
}
.cta-terminal-sub {
  font-size: 14px;
  color: var(--cta-subheading-color, var(--color-text-muted));
  margin: 0 0 28px;
}
.cta-terminal-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 13px 22px;
  border-radius: 4px;
  border: 1px solid var(--cta-btn-border, var(--color-border));
  color: var(--cta-btn-text, var(--color-text));
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cta-terminal-btn:hover,
.cta-terminal-btn:focus-visible {
  border-color: var(--cta-btn-hover, var(--color-accent));
  color: var(--cta-btn-hover, var(--color-accent));
}
.cta-terminal-btn:focus-visible {
  outline: 2px solid var(--cta-btn-hover, var(--color-accent));
  outline-offset: 2px;
}

/* Scanline hover sweep - a soft accent-tinted band that travels down the
   whole panel once per hover. Purely decorative (aria-hidden), GPU-only
   property (transform), skipped entirely for reduced-motion. */
.cta-terminal-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  top: -40px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent);
  pointer-events: none;
}
.cta-terminal-panel.has-scanline:hover .cta-terminal-scanline,
.cta-terminal-panel.has-scanline:focus-within .cta-terminal-scanline {
  animation: cta-terminal-scan 1.1s linear;
}
@keyframes cta-terminal-scan {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(100% + 40px)); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-terminal-pip.is-blinking { animation: none; }
  .cta-terminal-heading .cta-terminal-cursor { animation: none; }
  .cta-terminal-panel.has-scanline:hover .cta-terminal-scanline,
  .cta-terminal-panel.has-scanline:focus-within .cta-terminal-scanline { animation: none; }
}
@media (max-width: 480px) {
  .cta-terminal-path { display: none; } /* window bar keeps just the dots on very narrow screens */
}

/* ==========================================================================
   EXIT-INTENT LEAD MAGNET MODAL - template-parts/lead-magnet-modal.php
   Shared across every page in razdigi_service_page_templates() (see
   inc/helpers.php + inc/automation-lead-magnet.php) via
   template-parts/service-funnel-page.php. Reuses .cta-terminal-* for the
   panel chrome/typography above; everything below is just the
   overlay/backdrop/close button and the single-field form. Hidden via the
   [hidden] attribute until js/lead-magnet-modal.js adds .is-open - so it
   never flashes on load and degrades to simply never appearing if JS
   fails, rather than blocking content.
   ========================================================================== */
.lead-magnet-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.lead-magnet-overlay[hidden] { display: none; }
.lead-magnet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 7, 0.75);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lead-magnet-overlay.is-open .lead-magnet-backdrop { opacity: 1; }

.lead-magnet-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  margin: 0;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lead-magnet-overlay.is-open .lead-magnet-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.lead-magnet-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease;
}
.lead-magnet-close:hover, .lead-magnet-close:focus-visible { color: var(--color-text); }

.lead-magnet-body { padding-bottom: 28px; }
.lead-magnet-form { margin-top: 20px; }
.lead-magnet-field-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lead-magnet-field-row input[type="email"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-base);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
}
.lead-magnet-field-row input[type="email"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.lead-magnet-field-row .cta-terminal-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.lead-magnet-fine-print {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
}
.lead-magnet-error {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--color-accent);
}
@media (prefers-reduced-motion: reduce) {
  .lead-magnet-backdrop, .lead-magnet-panel { transition: none; }
}
@media (max-width: 480px) {
  .lead-magnet-field-row { flex-direction: column; }
  .lead-magnet-field-row .cta-terminal-btn { width: 100%; }
}

/* ==========================================================================
   CONTACT PAGE - "Coordinates" - page-contact.php
   Every admin-editable field behind the colors/sizes/toggles here lives in
   inc/contact-page-fields.php. The coordinate-grid background, pulsing
   pins, and cursor parallax are purely decorative flourishes around the
   Contact Details; the Locations & Map grid below is the separate,
   functional section with real embedded Google Maps.
   ========================================================================== */
.coord-stage {
  position: relative;
  padding: var(--space-xl) 0 var(--space-lg);
  overflow: hidden;
  background: var(--color-base);
}
.coord-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.coord-lede {
  color: var(--coord-lede-color, var(--color-text-muted));
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 560px;
  line-height: 1.6;
  margin: 0 0 var(--space-lg);
}

.coord-map {
  position: relative;
  min-height: 420px;
  margin-bottom: var(--space-lg);
}
@media (max-width: 720px) {
  .coord-map { min-height: 0; display: flex; flex-direction: column; gap: var(--space-md); }
}

/* Contact-detail pins - absolutely positioned within .coord-map on
   desktop (their slot comes from PHP, cycling through a small preset
   list); on small screens they collapse into a plain static stack so
   nothing overlaps or gets clipped regardless of how many an admin adds. */
.coord-pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  z-index: 2;
}
@media (max-width: 720px) {
  .coord-pin { position: static; margin-bottom: var(--coord-pin-mobile-gap, 14px); }
}
.coord-pin-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-panel);
  border: 2px solid var(--coord-pin-color, var(--color-accent));
  position: relative;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.coord-pin:not(.coord-pin--no-pulse) .coord-pin-dot::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--coord-pin-color, var(--color-accent)) 30%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .coord-pin:not(.coord-pin--no-pulse) .coord-pin-dot::after {
    animation: coord-pin-ring 2.4s ease-out infinite;
  }
  .coord-pin:nth-of-type(2) .coord-pin-dot::after { animation-delay: 0.6s; }
  .coord-pin:nth-of-type(3) .coord-pin-dot::after { animation-delay: 1.2s; }
  .coord-pin:nth-of-type(4) .coord-pin-dot::after { animation-delay: 1.8s; }
}
@keyframes coord-pin-ring {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}
.coord-pin:hover .coord-pin-dot,
.coord-pin:focus-visible .coord-pin-dot {
  transform: scale(1.4);
  box-shadow: 0 0 16px color-mix(in srgb, var(--coord-pin-color, var(--color-accent)) 50%, transparent);
  outline: none;
}
.coord-pin-card {
  margin-top: 10px;
  min-width: 190px;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 12px 14px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
@media (max-width: 720px) {
  .coord-pin-card { position: static; opacity: 1; transform: none; pointer-events: auto; margin-top: 8px; min-width: 0; }
}
.coord-pin:hover .coord-pin-card,
.coord-pin:focus-visible .coord-pin-card {
  opacity: 1;
  transform: translateY(0);
}
.coord-pin-k {
  display: block;
  font-family: var(--font-heading);
  font-size: 10px;
  color: var(--coord-pin-label-color, var(--coord-pin-color, var(--color-accent)));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.coord-pin-v {
  display: block;
  font-size: var(--coord-pin-value-size, 13.5px);
  color: var(--coord-pin-value-color, var(--color-text));
}
.coord-pin-v a { color: inherit; }

/* Glass form panel - floats over/beside the pin map. */
.coord-panel {
  position: relative;
  max-width: 480px;
  margin-left: auto;
  background: var(--coord-panel-bg, rgba(28,26,22,.7));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--coord-panel-border, var(--color-border));
  border-radius: 16px;
  padding: var(--space-md);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
}
@media (max-width: 720px) {
  .coord-panel { max-width: none; margin-left: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.coord-readout {
  font-family: 'SF Mono', 'Roboto Mono', Consolas, monospace;
  font-size: 11px;
  color: var(--color-growth);
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}
/* ==========================================================================
   PRICING PAGE - "Request a Custom Deal" form (page-pricing.php only)
   Same visual language as the Contact page's form (.coord-field), but kept
   in its own class namespace so editing one never affects the other. Two
   fields per row on tablet/desktop, stacking to one column on mobile.
   ========================================================================== */
.deal-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
@media (max-width: 560px) {
  .deal-form-row { grid-template-columns: 1fr; }
}
.deal-field { margin-bottom: 18px; }
.deal-field label {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.deal-optional {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--color-text-muted);
}
.deal-field input,
.deal-field select,
.deal-field textarea {
  width: 100%;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 44px; /* touch target */
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14.5px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
}
.deal-field input:focus,
.deal-field select:focus,
.deal-field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(255, 95, 31, 0.15);
}
.deal-submit { width: 100%; }

.coord-field { margin-bottom: 18px; }
.coord-field label {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.coord-field input,
.coord-field textarea {
  width: 100%;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14.5px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  resize: vertical;
}
.coord-field input:focus,
.coord-field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(255,95,31,.15);
}
.coord-submit { width: 100%; }

/* Social row beneath the stage. */
.coord-social {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.coord-social-heading {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.coord-social-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.coord-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.coord-social-icon svg { width: 16px; height: 16px; }
.coord-social-icon:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.coord-social-icon--text {
  width: auto;
  height: auto;
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 13px;
}

/* ==========================================================================
   CONTACT PAGE - Locations & Map grid (real embedded Google Maps, one per
   location). Deliberately separate from the decorative coordinate pins
   above - this section only renders at all once an admin has entered at
   least one real location (see page-contact.php).
   ========================================================================== */
.contact-locations-grid {
  display: grid;
  grid-template-columns: repeat(var(--loc-columns, 2), 1fr);
  gap: var(--space-md);
}
@media (max-width: 900px) {
  .contact-locations-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .contact-locations-grid { grid-template-columns: 1fr; }
}
.location-card {
  background: var(--loc-card-bg, var(--color-elevated));
  border: 1px solid var(--loc-card-border, var(--color-border));
  border-radius: var(--radius);
  padding: var(--space-md);
}
.location-city {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.location-country {
  font-weight: 400;
  color: var(--color-text-muted);
}
.location-address {
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin: 6px 0 14px;
  line-height: 1.5;
}
.location-map-wrap {
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.location-map {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Grayscale-to-color on hover keeps a grid of embedded maps from
     fighting the site's own dark palette until someone actually means
     to interact with one. */
  filter: grayscale(0.4) contrast(1.05) brightness(0.9);
  transition: filter 0.3s ease;
}
.location-map-wrap:hover .location-map,
.location-map-wrap:focus-within .location-map {
  filter: none;
}

/* Base two-column layout for the FAQ Knowledge Base page (page-faq.php).
   break-inside: avoid keeps a card from being sliced across the column
   break - important now that each FAQ is an elevated card rather than a
   plain text row. */
.faq-columns {
  columns: 2;
  column-gap: var(--space-xl);
}
.faq-columns .faq-item {
  break-inside: avoid;
}

/* ==========================================================================
   FAQ ITEM COMPONENT ("Ember Stack") - template-parts/faq-item.php
   One question/answer as an elevated card: a large near-invisible ghost
   number behind the question, and an orange edge that burns down the
   left side as it opens. Built on native <details>/<summary> - fully
   accessible and crawlable with zero JS; js/main.js progressively
   animates the open/close (see the FAQ ITEM SMOOTH OPEN/CLOSE block).
   ========================================================================== */
.faq-item {
  position: relative;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  /* This element also carries .reveal, whose own transition targets
     opacity/transform/filter for the scroll-in fade - listed here
     alongside our own additions so neither rule silently wipes the
     other out (equal-specificity classes fully replace a shorthand,
     they don't merge property-by-property). The hover lift below uses
     the "translate" individual-transform property instead of
     transform itself, so it never fights the reveal entrance
     animation, which still needs transform for its translateY(40px)
     to translateY(0). */
  transition: opacity 0.7s ease-out, transform 0.7s ease-out, filter 0.7s ease-out,
              translate 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease;
}
.faq-item + .faq-item {
  margin-top: 12px;
}
.faq-item:hover {
  translate: 0 -3px;
  border-color: rgba(255, 95, 31, 0.35);
}
.faq-ghost-num {
  position: absolute;
  right: 18px;
  top: 6px;
  font-family: var(--font-heading);
  font-size: 52px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.035);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.faq-edge {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--color-accent), transparent);
  transition: height 0.4s ease;
  pointer-events: none;
}
.faq-item[open] .faq-edge {
  height: 100%;
}
.faq-trigger {
  width: 100%;
  list-style: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.faq-trigger::-webkit-details-marker {
  display: none;
}
.faq-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.faq-question {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}
.faq-plus {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--color-accent);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.faq-item[open] .faq-plus {
  transform: rotate(135deg);
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}
.faq-panel {
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(.2,.8,.2,1);
}
.faq-panel-inner {
  padding: 0 24px 24px 60px;
}
.faq-answer-lead {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 8px;
  line-height: 1.6;
}
.faq-answer-detail {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.faq-answer-detail p {
  margin: 0 0 10px;
}
.faq-answer-detail p:last-child {
  margin-bottom: 0;
}
@media (max-width: 520px) {
  .faq-panel-inner {
    padding-left: 24px;
  }
  .faq-ghost-num {
    font-size: 38px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-edge,
  .faq-plus,
  .faq-panel {
    transition: none !important;
  }
  .faq-item:hover {
    translate: none;
  }
}

/* ==========================================================================
   HOMEPAGE BLOG SECTION - "Archive Stream" - page-landing.php (the
   'insights' output-buffered section). Every color/text/behavior here is
   admin-editable - see inc/homepage-fields.php > 'insights' group.
   No blue anywhere by design: the only accent color used is
   var(--blog-accent) (falls back to the site's signal orange), same as
   every other themed component.
   ========================================================================== */
.blog-stream-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.blog-stream-tag {
  display: block;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--blog-accent, var(--color-accent));
  margin-bottom: 10px;
}
.blog-stream-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--blog-heading-color, var(--color-text));
  margin: 0;
}

.blog-stream {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  align-items: stretch;
}
@media (max-width: 860px) {
  .blog-stream { grid-template-columns: 1fr; }
}

/* Rail */
.blog-rail {
  display: flex;
  flex-direction: column;
}
.blog-rail-item {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid var(--blog-panel-border, var(--color-border));
  padding: 16px 18px 16px 20px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.25s ease;
}
.blog-rail-item:focus-visible {
  outline: 2px solid var(--blog-accent, var(--color-accent));
  outline-offset: -2px;
}
.blog-rail-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--blog-muted-color, var(--color-text-muted));
  transition: color 0.25s ease;
}
.blog-rail-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  margin-top: 4px;
  color: var(--blog-muted-color, var(--color-text-muted));
  transition: color 0.25s ease;
}
.blog-rail-item:hover .blog-rail-title { color: var(--color-text); }
.blog-rail-item.active { border-left-color: var(--blog-accent, var(--color-accent)); }
.blog-rail-item.active .blog-rail-title { color: var(--color-text); }
.blog-rail-item.active .blog-rail-num { color: var(--blog-accent, var(--color-accent)); }

.blog-rail-progress {
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--blog-accent, var(--color-accent));
  transform: scaleY(0);
  transform-origin: top;
}
.blog-rail-item.active.is-autoplaying .blog-rail-progress {
  animation: blog-rail-fill var(--blog-autoplay-duration, 5s) linear forwards;
}
.blog-stream.is-paused .blog-rail-progress {
  animation-play-state: paused;
}
@keyframes blog-rail-fill {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Preview panel */
.blog-preview {
  display: flex;
  flex-direction: column;
  background: var(--blog-panel-bg, var(--color-elevated));
  border: 1px solid var(--blog-panel-border, var(--color-border));
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.blog-preview-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-panel);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
/* Diagonal placeholder pattern shown only when a post has no featured
   image - never a blank gap. */
.blog-preview-thumb:not([style*="background-image"])::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--blog-accent, var(--color-accent)) 8%, transparent) 0 2px, transparent 2px 14px);
}
.blog-preview-body {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blog-preview-cat {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blog-accent, var(--color-accent));
  margin-bottom: 10px;
}
.blog-preview-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.28;
  color: var(--color-text);
  margin: 0 0 12px;
}
.blog-preview-excerpt {
  color: var(--blog-muted-color, var(--color-text-muted));
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 18px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-preview-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--blog-muted-color, var(--color-text-muted));
  margin-bottom: 16px;
}
.blog-preview-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--blog-accent, var(--color-accent));
  align-self: flex-start;
}
.blog-preview-link span { transition: transform 0.25s ease; }
.blog-preview:hover .blog-preview-link span,
.blog-preview:focus-visible .blog-preview-link span { transform: translateX(4px); }

.blog-fade { transition: opacity 0.3s ease; }
.blog-fade.is-fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .blog-rail-item.active.is-autoplaying .blog-rail-progress { animation: none; transform: scaleY(1); }
  .blog-fade { transition: none; }
}
/* ==========================================================================
   INDUSTRIES SHOWCASE - page-industries.php
   A hybrid of two ideas: an accessible fieldset of radio-driven tabs with
   a content panel (the REAL control - zero JS required, works with
   keyboard/screen readers), plus an optional decorative orbital map on
   wide screens whose nodes are ALSO labels for the same radio inputs, so
   clicking a node works identically to clicking a tab. Which panel/tab/
   node is active runs entirely on generated CSS (see the <style> block
   printed per-page in page-industries.php) using :checked + general
   sibling selectors, with :has() as a light progressive enhancement for
   the orbit's hover-preview pulse line.
   ========================================================================== */
.industries-intro {
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}
.industries-eyebrow {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.industries-heading {
  margin: 0 0 12px;
}
.industries-subheading {
  font-size: 14px;
  color: var(--industries-subheading-color, var(--color-text-muted));
  line-height: 1.7;
}

.industries-hybrid {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}
/* The state-holding radios themselves are never visible - only their
   associated <label>s (tabs and, optionally, orbit nodes) are. */
.industries-tab-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---- Tabs (the real, accessible control) ---- */
.industries-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  border: none;
  padding: 0;
  margin: 0 0 28px;
}
.industries-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.industries-tab:hover {
  color: var(--color-text);
}
.industries-tab-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
/* Keyboard focus: since the radio itself is visually hidden, show the
   focus ring on whichever tab's radio currently has it, via :has() (the
   radio is a preceding sibling of .industries-tabs, so a plain ~
   selector can't reach backward into it - :has() can). Browsers without
   :has() still show the native focus outline on the (invisible) radio
   itself, so keyboard users are never left without SOME visible focus
   indicator. */
.industries-tabs:has(.industries-tab-radio:focus-visible) {
  outline: 2px solid var(--industries-tab-active, var(--color-accent));
  outline-offset: 4px;
  border-radius: 999px;
}

/* ---- Content panel ---- */
.industries-panels {
  background: var(--industries-panel-bg, var(--color-elevated));
  border: 1px solid var(--industries-panel-border, var(--color-border));
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 40px);
  min-height: 200px;
}
.industries-panel {
  display: none; /* only the :checked-matched panel is shown - see the generated <style> block */
  animation: industries-panel-in 0.35s ease;
}
@keyframes industries-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.industries-panel-heading {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
}
.industries-panel-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 0 20px;
}
.industries-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.industries-chip {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--industries-chip-color, var(--color-growth));
}
.industries-panel-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}
.industries-panel-link:hover {
  text-decoration: underline;
}

/* ---- Orbital map (decorative, wide screens only) ---- */
.industries-orbit {
  position: relative;
  width: min(420px, 78vw);
  aspect-ratio: 1;
  margin: 0 auto 36px;
  display: none; /* enabled only on wide screens - see the min-width media query below */
}
.industries-hybrid.has-orbit .industries-orbit {
  display: none;
}
@media (min-width: 900px) {
  .industries-hybrid.has-orbit .industries-orbit {
    display: block;
  }
}
.industries-orbit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.industries-orbit-line {
  stroke: var(--industries-tab-active, var(--color-accent));
  stroke-width: 1.5;
  opacity: 0;
  stroke-dasharray: 4 3;
  transition: opacity 0.3s ease;
}
.industries-orbit::before {
  content: '';
  position: absolute;
  inset: 12%;
  border: 1px dashed var(--color-border);
  border-radius: 50%;
}
.industries-orbit-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--industries-panel-bg, var(--color-elevated));
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  z-index: 3;
}
.industries-orbit-node {
  position: absolute;
  width: 92px;
  margin-left: -46px;
  margin-top: -20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  z-index: 4;
}
.industries-orbit-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.industries-orbit-node:hover .industries-orbit-dot {
  background: var(--industries-tab-active, var(--color-accent));
}
.industries-orbit-node-label {
  font-family: var(--font-heading);
  font-size: 10px;
  text-align: center;
  color: var(--color-text-muted);
  line-height: 1.3;
  transition: color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .industries-panel { animation: none; }
  .industries-orbit-dot,
  .industries-orbit-line { transition: none; }
}

/* ==========================================================================
   RELATED CASE STUDIES - page-industries.php
   A horizontal snap-scroll rail of real Client Stories (matched to this
   page's industries - see razdigi_get_client_stories_by_industry() in
   inc/client-stories-cpt.php), each card led by an oversized metric over
   the photo. Deliberately a different presentation from the homepage's
   "Client Success Stories" cursor-preview index list (see template-parts/
   trust-bar.php era work) - same content pool, distinct visual treatment
   so the two pages don't feel like they're repeating themselves.
   ========================================================================== */
.industries-cs-intro {
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}
.industries-cs-heading {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  margin: 0 0 10px;
}
.industries-cs-subheading {
  font-size: 14px;
  color: var(--color-text-muted);
}

.industries-cs-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 12px;
  margin: 0 -4px;
}
.industries-cs-card {
  scroll-snap-align: start;
  flex: 0 0 260px;
  height: 320px;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  text-decoration: none;
  display: block;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.industries-cs-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
}
.industries-cs-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.industries-cs-photo-placeholder {
  background: linear-gradient(135deg, var(--color-elevated), var(--color-panel));
}
.industries-cs-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  background: linear-gradient(to top, rgba(8,8,7,0.94), rgba(8,8,7,0.15) 62%);
}
.industries-cs-metric {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  color: var(--color-growth);
  line-height: 1;
  margin-bottom: 10px;
}
.industries-cs-name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 3px;
}
.industries-cs-tag {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.industries-cs-footer {
  text-align: center;
  margin-top: var(--space-md);
}
.industries-cs-view-all {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}
.industries-cs-view-all:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .industries-cs-card { flex-basis: 220px; height: 280px; }
}

/* ==========================================================================
   BLOG PAGE HEADER - "Signal Index" - index.php (shared by the main Blog
   archive, category archives, and search results). Edge-to-edge by
   default per the site owner's request - .blog-header-edge deliberately
   has no max-width, unlike .container everywhere else on the site.
   Every color/text/toggle here is admin-editable - see
   inc/blog-page-fields.php > 'blog_header' group.
   ========================================================================== */
.blog-header-stage {
  position: relative;
  padding: var(--space-xl) 0 var(--space-lg);
  background: var(--color-base);
}
.blog-header-edge {
  width: 100%;
  padding: 0 clamp(20px, 4vw, 48px);
}

.blog-header-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
.blog-header-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(38px, 5.5vw, 68px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blog-heading-color, var(--color-text));
  margin: 0 0 14px;
}
.blog-header-lede {
  color: var(--blog-muted-color, var(--color-text-muted));
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 560px;
  line-height: 1.6;
  margin: 0;
}

/* Search scanner */
.blog-scanner {
  position: relative;
  flex: 0 1 320px;
  min-width: 260px;
  background: var(--blog-panel-bg, var(--color-elevated));
  border: 1px solid var(--blog-panel-border, var(--color-border));
  border-radius: 14px;
  padding: 16px 18px;
  overflow: hidden;
}
.blog-scanner-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blog-muted-color, var(--color-text-muted));
  margin-bottom: 10px;
}
.blog-scanner-input {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--blog-accent, var(--color-accent));
}
.blog-scanner-input input {
  flex: 1;
  background: none;
  border: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14.5px;
  outline: none;
}
.blog-scanner-input input::placeholder { color: var(--blog-muted-color, var(--color-text-muted)); }
.blog-scan-sweep {
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  top: -60px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--blog-accent, var(--color-accent)) 8%, transparent), transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .blog-header-stage:not(.blog-header-stage--no-scanline) .blog-scan-sweep {
    animation: blog-scan-sweep 4.5s linear infinite;
  }
}
@keyframes blog-scan-sweep {
  0%   { top: -60px; }
  100% { top: 100%; }
}

/* Category filter rail */
.blog-cat-rail {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.blog-cat-node {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px 10px 14px;
  border-radius: 9999px;
  border: 1px solid var(--blog-panel-border, var(--color-border));
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--blog-muted-color, var(--color-text-muted));
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.blog-cat-node:hover { color: var(--color-text); border-color: var(--blog-muted-color, var(--color-text-muted)); }
.blog-cat-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blog-muted-color, var(--color-text-muted));
  position: relative;
  transition: background 0.2s ease;
}
.blog-cat-node.active {
  border-color: var(--blog-accent, var(--color-accent));
  color: var(--color-text);
  background: color-mix(in srgb, var(--blog-accent, var(--color-accent)) 6%, transparent);
}
.blog-cat-node.active .blog-cat-pulse { background: var(--blog-accent, var(--color-accent)); }
.blog-cat-node.active:not(.blog-cat-node--no-pulse) .blog-cat-pulse::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--blog-accent, var(--color-accent)) 40%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .blog-cat-node.active:not(.blog-cat-node--no-pulse) .blog-cat-pulse::after {
    animation: blog-cat-pulsering 2s ease-out infinite;
  }
}
@keyframes blog-cat-pulsering {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

/* Reading-time filter row - deliberately quieter than the category
   rail (smaller, no pulse ring) since it's a secondary, layered-on-top
   filter rather than the primary way to browse. */
.blog-rt-rail {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.blog-rt-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--blog-muted-color, var(--color-text-muted));
  margin-right: 2px;
}
.blog-rt-node {
  padding: 6px 13px;
  border-radius: 9999px;
  border: 1px solid var(--blog-panel-border, var(--color-border));
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--blog-muted-color, var(--color-text-muted));
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.blog-rt-node:hover { color: var(--color-text); border-color: var(--blog-muted-color, var(--color-text-muted)); }
.blog-rt-node.active {
  border-color: var(--blog-accent, var(--color-accent));
  color: var(--color-text);
  background: color-mix(in srgb, var(--blog-accent, var(--color-accent)) 6%, transparent);
}

/* Smart search snippet highlighting - the matched-term <mark> tags
   inside .blog-mosaic-excerpt (see razdigi_relevant_snippet() in
   inc/blog-smart-search.php). Sits on the card's dark gradient overlay,
   so it needs its own contrast treatment rather than a browser default
   yellow highlight. */
.blog-mosaic-excerpt mark {
  background: color-mix(in srgb, var(--blog-grid-accent, var(--color-accent)) 30%, transparent);
  color: #fff;
  border-radius: 3px;
  padding: 0 2px;
}

@media (max-width: 640px) {
  .blog-header-top { flex-direction: column; align-items: stretch; }
  .blog-scanner { flex: 1 1 auto; }
}

/* ==========================================================================
   BLOG PAGE POST GRID - "Mosaic Stream" - index.php. Edge-to-edge by
   default, same as the header above it. A repeating 4-post pattern
   (feature + tall = one 3-row band; small + wide = one 2-row band, both
   summing to 6 columns) means the layout never depends on a specific
   post count - it just keeps cycling. grid-auto-flow: dense backfills
   any small gap at the very end if the post count doesn't divide evenly.
   Every color/toggle here is admin-editable - see
   inc/blog-page-fields.php > 'blog_grid' group.
   ========================================================================== */
.blog-grid-section {
  padding: 0 0 var(--space-xl);
}
.blog-grid-edge {
  width: 100%;
  padding: 0 clamp(20px, 4vw, 48px);
}

.blog-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 130px;
  grid-auto-flow: dense;
  gap: 20px;
}
@media (max-width: 900px) {
  .blog-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
}

.blog-mosaic-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--color-panel);
  border: 1px solid var(--blog-grid-border, var(--color-border));
  opacity: 0;
  transform: translateY(16px);
  animation: blog-mosaic-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: border-color 0.25s ease;
}
.blog-mosaic-card:hover,
.blog-mosaic-card:focus-visible {
  border-color: var(--blog-grid-accent, var(--color-accent));
  outline: none;
}
@keyframes blog-mosaic-enter {
  to { opacity: 1; transform: translateY(0); }
}
.blog-grid-section--no-stagger .blog-mosaic-card {
  animation: none;
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .blog-mosaic-card { animation: none; opacity: 1; transform: none; }
}

.blog-mosaic-card--feature { grid-column: span 4; grid-row: span 3; }
.blog-mosaic-card--tall    { grid-column: span 2; grid-row: span 3; }
.blog-mosaic-card--small   { grid-column: span 2; grid-row: span 2; }
.blog-mosaic-card--wide    { grid-column: span 4; grid-row: span 2; }
@media (max-width: 900px) {
  .blog-mosaic-card--feature,
  .blog-mosaic-card--tall,
  .blog-mosaic-card--small,
  .blog-mosaic-card--wide {
    grid-column: span 2;
    grid-row: span 1;
  }
}

.blog-mosaic-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-mosaic-thumb--placeholder {
  background: linear-gradient(135deg, var(--color-elevated), var(--color-panel));
}
.blog-mosaic-thumb--placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--blog-grid-accent, var(--color-accent)) 6%, transparent) 0 2px, transparent 2px 14px);
}

.blog-mosaic-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 20px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, transparent, rgba(8,8,7,0.92) 70%);
}
.blog-mosaic-cat {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blog-grid-accent, var(--color-accent));
  margin-bottom: 8px;
}
.blog-mosaic-title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 6px;
}
.blog-mosaic-card--feature .blog-mosaic-title { font-size: clamp(20px, 2.2vw, 26px); }
.blog-mosaic-card--tall .blog-mosaic-title { font-size: 18px; }
.blog-mosaic-card--small .blog-mosaic-title,
.blog-mosaic-card--wide .blog-mosaic-title { font-size: 15px; }

.blog-mosaic-excerpt {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
  margin-bottom: 8px;
  max-width: 60ch;
}
.blog-mosaic-meta {
  font-size: 11px;
  color: var(--blog-grid-muted, var(--color-text-muted));
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.25s ease, max-height 0.25s ease;
}
.blog-mosaic-card:hover .blog-mosaic-meta,
.blog-mosaic-card:focus-visible .blog-mosaic-meta {
  opacity: 1;
  max-height: 20px;
}
@media (max-width: 900px) {
  /* No hover on touch - meta stays visible so the info isn't hidden behind an interaction that doesn't exist there. */
  .blog-mosaic-meta { opacity: 1; max-height: 20px; }
}

.blog-empty-message {
  color: var(--blog-grid-muted, var(--color-text-muted));
  font-size: 15px;
  padding: var(--space-lg) 0;
  text-align: center;
}

/* Pagination - styles WordPress's own the_posts_pagination() markup
   (.page-numbers / .current / .prev / .next), not custom markup. */
.blog-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}
.blog-pagination .nav-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.blog-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 9999px;
  border: 1px solid var(--blog-grid-border, var(--color-border));
  color: var(--blog-grid-muted, var(--color-text-muted));
  font-family: var(--font-heading);
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.blog-pagination .page-numbers.current {
  background: var(--blog-grid-accent, var(--color-accent));
  border-color: var(--blog-grid-accent, var(--color-accent));
  color: var(--color-on-accent, #fff);
}
.blog-pagination .page-numbers:hover:not(.current):not(.dots) {
  border-color: var(--blog-grid-accent, var(--color-accent));
  color: var(--color-text);
}
.blog-pagination .page-numbers.dots {
  border: none;
  color: var(--blog-grid-muted, var(--color-text-muted));
}

/* ==========================================================================
   RESOURCE MANAGEMENT PAGE (page-resource-management.php)
   "Resource Constellation" hero - a network of role-nodes connected to a
   central hub, visualizing the service itself (a managed network of
   remote talent) rather than a generic hero graphic. Everything else on
   this page reuses existing sitewide classes (.pricing-card, .hover-lift,
   .section-eyebrow, .btn) - this block only covers what's new.
   ========================================================================== */
.resource-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.resource-hero-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  margin: 14px 0;
}
.resource-hero-sub {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 46ch;
}
.rc-node {
  animation: rc-node-pulse 2.6s ease-in-out infinite;
  animation-delay: calc(var(--rc-i, 0) * 0.35s);
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes rc-node-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.18); }
}
.rc-lines line {
  stroke-dasharray: 6 6;
  animation: rc-line-flow 2.5s linear infinite;
}
@keyframes rc-line-flow {
  to { stroke-dashoffset: -24; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-node, .rc-lines line { animation: none; }
}
@media (max-width: 860px) {
  .resource-hero-grid { grid-template-columns: 1fr; }
  .resource-constellation { max-width: 340px; margin: 0 auto; }
}

.resource-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}
.resource-step {
  padding: var(--space-md);
  background: var(--color-elevated);
  border-radius: var(--radius);
}
.resource-step-num {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}

.resource-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
}
.resource-type-card {
  display: block;
  padding: var(--space-md);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}
.resource-type-card-cta {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.resource-type-card:hover .resource-type-card-cta,
.resource-type-card:focus-visible .resource-type-card-cta {
  opacity: 1;
  transform: translateX(0);
}
.resource-type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* ==========================================================================
   RESOURCE MANAGEMENT PAGE - "Signal Cards" testimonials
   Floating quote cards connected by faint lines to a central node -
   extends the constellation language from this page's own Hero, rather
   than repeating the homepage's separate "Orbit Field" testimonials
   composition. Desktop: absolutely-positioned cluster over an SVG.
   Mobile: a plain stacked column (a fixed-coordinate cluster doesn't
   translate to a narrow single-column layout, so it isn't forced to).
   ========================================================================== */
.rm-signal-cards {
  position: relative;
  min-height: 300px;
}
.rm-signal-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  opacity: 0.35;
  pointer-events: none;
}
.rm-signal-card {
  position: absolute;
  width: 240px;
  margin: 0;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.rm-signal-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 12px;
}
.rm-signal-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text-muted);
}
.rm-signal-card-name {
  font-weight: 600;
  color: var(--color-accent);
}
.rm-signal-card:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: var(--color-accent);
  box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--color-accent) 45%, transparent);
  z-index: 2;
}
.rm-signal-card-0 { top: 0;    left: 2%; }
.rm-signal-card-1 { top: 0;    right: 2%; }
.rm-signal-card-2 { top: 62%;  left: 50%; transform: translateX(-50%); }
.rm-signal-card-2:hover { transform: translateX(-50%) translateY(-4px) scale(1.03); }

@media (prefers-reduced-motion: no-preference) {
  .rm-signal-card-0 { animation: rm-card-float 4.5s ease-in-out infinite; }
  .rm-signal-card-1 { animation: rm-card-float 4.5s ease-in-out infinite 0.5s; }
  .rm-signal-card-2 { animation: rm-card-float-center 4.5s ease-in-out infinite 1s; }
}
@keyframes rm-card-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes rm-card-float-center {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}

@media (max-width: 760px) {
  .rm-signal-lines { display: none; }
  .rm-signal-cards {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .rm-signal-card,
  .rm-signal-card-0, .rm-signal-card-1, .rm-signal-card-2 {
    position: static;
    width: 100%;
    animation: none;
    transform: none;
  }
  .rm-signal-card-2:hover { transform: translateY(-4px) scale(1.02); }
}

/* ==========================================================================
   DIGITAL SERVICES: ONE TEAM, EVERY CHANNEL - page-digital-services.php
   Two-column contrast: fragmented/hiring-separately vs one team. A hard
   gradient divider (vertical on desktop, horizontal on mobile) makes the
   contrast a visual argument, not just two lists side by side.
   ========================================================================== */
.ds-compare-heading {
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.4vw, 38px);
  margin-bottom: var(--space-lg);
}
.ds-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-lg);
  align-items: start;
  max-width: 900px;
  margin: 0 auto;
}
.ds-compare-col-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 var(--space-sm);
}
.ds-compare-col-before .ds-compare-col-title {
  color: var(--color-text-muted);
}
.ds-compare-col-after .ds-compare-col-title {
  color: var(--color-accent);
}
.ds-compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ds-compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.6;
}
.ds-compare-col-before li {
  color: var(--color-text-muted);
}
.ds-compare-col-after li {
  color: var(--color-text);
}
.ds-compare-mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  margin-top: 2px;
}
.ds-compare-col-before .ds-compare-mark {
  background: rgba(245, 245, 245, 0.06);
  color: var(--color-text-muted);
}
.ds-compare-col-after .ds-compare-mark {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.ds-compare-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, var(--color-accent), transparent);
}
@media (max-width: 720px) {
  .ds-compare-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .ds-compare-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  }
}

/* ==========================================================================
   DIGITAL SERVICES: FIND YOUR STARTING POINT - page-digital-services.php
   Pure CSS, no JavaScript - real radio inputs + :checked sibling selectors
   reveal the matching result. Works with the keyboard and screen readers
   with zero script. Per-option reveal rules are generated inline in the
   template (dynamic per current service list); this is only the shared
   layout/visual mechanics. Radios/labels/results are all direct children
   of .ds-finder (a flex-wrap container) so the CSS sibling selectors can
   actually reach across them - don't add a wrapper div around the
   radio/label pairs, or the ~ combinator below stops working.
   ========================================================================== */
.ds-finder {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.ds-finder-legend {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  width: 100%;
  margin-bottom: var(--space-md);
  padding: 0;
}
.ds-finder-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ds-finder-option {
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-elevated);
  color: var(--color-text);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, translate 0.25s ease;
}
.ds-finder-option:hover {
  border-color: rgba(255, 95, 31, 0.4);
}
.ds-finder-radio:focus-visible + .ds-finder-option {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.ds-finder-radio:checked + .ds-finder-option {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  translate: 0 -2px;
}
.ds-finder-results {
  position: relative;
  width: 100%;
  min-height: 140px;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
  margin-top: var(--space-md);
}
.ds-finder-placeholder {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}
.ds-finder-radio:checked ~ .ds-finder-results .ds-finder-placeholder {
  display: none;
}
.ds-finder-result {
  display: none; /* shown per-option by the inline generated rules in page-digital-services.php */
  text-align: center;
  animation: ds-finder-reveal 0.4s ease both;
}
@keyframes ds-finder-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ds-finder-result-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 6px;
}
.ds-finder-result-name {
  font-family: var(--font-heading);
  font-size: 24px;
  margin: 0 0 10px;
}
.ds-finder-result-intro {
  color: var(--color-text-muted);
  font-size: 14px;
  max-width: 480px;
  margin: 0 auto var(--space-md);
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .ds-finder-option,
  .ds-finder-result {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   DIGITAL SERVICES: BUILT TOGETHER - page-digital-services.php
   A distinct card treatment from the Case Studies page's own layout -
   compact, photo-led, built to feel like quick proof rather than the full
   case study experience.
   ========================================================================== */
.ds-built-together-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}
.ds-built-together-card {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
}
.ds-built-together-photo {
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-sm);
  display: block;
}
.ds-built-together-client {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 8px;
}
.ds-built-together-industry {
  font-weight: 400;
  color: var(--color-text-muted);
}
.ds-built-together-result {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 10px;
}
.ds-built-together-stat {
  font-size: 13px;
  color: var(--color-text);
  margin: 0;
}
.ds-built-together-stat strong {
  color: var(--color-accent);
  font-family: var(--font-heading);
}

/* ==========================================================================
   PAGE.PHP - generic page content + service testimonials
   Scoped prose styling for raw the_content() output, since the sitewide
   `a { text-decoration: none }` reset (meant for nav/buttons) would
   otherwise make in-body links invisible - only applied inside
   .page-content, not globally.
   ========================================================================== */
.page-content {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--color-text);
}
.page-content > *:first-child {
  margin-top: 0;
}
.page-content h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  margin: var(--space-lg) 0 var(--space-sm);
}
.page-content h3 {
  font-size: 19px;
  margin: var(--space-md) 0 10px;
}
.page-content p {
  margin: 0 0 var(--space-sm);
}
.page-content ul,
.page-content ol {
  margin: 0 0 var(--space-sm);
  padding-left: 1.4em;
}
.page-content li {
  margin-bottom: 8px;
}
.page-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-content a:hover {
  color: var(--color-accent-hover);
}
.page-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.service-testimonial {
  max-width: 640px;
  margin: 0 auto var(--space-lg);
  padding: var(--space-md);
  background: var(--color-elevated);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
}
.service-testimonial:last-child {
  margin-bottom: 0;
}
.service-testimonial-quote {
  font-family: var(--font-heading);
  font-size: 17px;
  font-style: italic;
  line-height: 1.6;
  margin: 0 0 var(--space-sm);
}
.service-testimonial-attribution {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.service-testimonial-attribution img {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.service-testimonial-attribution strong {
  color: var(--color-text);
}

/* ==========================================================================
   RELATED INDUSTRIES cross-links - template-parts/related-industries.php
   Simple link chips, not full cards - these are secondary navigation
   (a way deeper into the site), not the page's main content, so they
   stay visually quiet next to whatever content sits above them.
   ========================================================================== */
.related-industries-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.related-industry-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.related-industry-link:hover,
.related-industry-link:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}
.related-industry-link span {
  transition: transform 0.2s ease;
}
.related-industry-link:hover span,
.related-industry-link:focus-visible span {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .related-industry-link,
  .related-industry-link span {
    transition: none;
  }
  .related-industry-link:hover,
  .related-industry-link:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   BLOG PAGE NEWSLETTER - "Orbit Subscribe" - template-parts/blog-archive.php.
   Two slow-rotating rings drift behind a centered glass panel, pure CSS
   (no JS needed - the form itself is a real, working WordPress submit,
   handled in inc/forms.php). Every color/text/toggle here is
   admin-editable - see inc/blog-page-fields.php > 'blog_newsletter' group.
   ========================================================================== */
.blog-newsletter-stage {
  position: relative;
  width: 100%;
  padding: clamp(64px, 8vw, 110px) clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.blog-orbit-deco {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.blog-orbit-r2 { width: 360px; height: 360px; }
.blog-orbit-node {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blog-nl-accent, var(--color-accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--blog-nl-accent, var(--color-accent)) 60%, transparent);
}
.blog-orbit-r2 .blog-orbit-node { top: auto; bottom: -4px; left: 30%; }
.blog-orbit-spin { position: absolute; inset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .blog-orbit-spin { animation: blog-orbit-spin 30s linear infinite; }
  .blog-orbit-spin--rev { animation-direction: reverse; animation-duration: 42s; }
}
@keyframes blog-orbit-spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .blog-orbit-deco { display: none; }
}

.blog-newsletter-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  text-align: center;
}
.blog-newsletter-kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blog-nl-accent, var(--color-accent));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.blog-newsletter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-growth);
}
@media (prefers-reduced-motion: no-preference) {
  .blog-newsletter-dot { animation: blog-newsletter-blip 1.4s ease-in-out infinite; }
}
@keyframes blog-newsletter-blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.blog-newsletter-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--color-text);
}
.blog-newsletter-lede {
  color: var(--blog-nl-muted, var(--color-text-muted));
  font-size: 15.5px;
  max-width: 460px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.blog-newsletter-form {
  position: relative;
  display: flex;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.blog-newsletter-form input[type="email"] {
  flex: 1;
  min-width: 220px;
  background: rgba(28, 26, 22, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  padding: 14px 20px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14.5px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.blog-newsletter-form input[type="email"]:focus {
  border-color: var(--blog-nl-accent, var(--color-accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blog-nl-accent, var(--color-accent)) 15%, transparent);
}
.blog-newsletter-form button {
  background: var(--blog-nl-accent, var(--color-accent));
  color: var(--color-on-accent, #fff);
  border: none;
  border-radius: 9999px;
  padding: 14px 26px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  transition: background 0.2s ease, filter 0.2s ease;
  white-space: nowrap;
}
.blog-newsletter-form button:hover { filter: brightness(1.1); }

.blog-newsletter-fine {
  font-size: 12px;
  color: var(--blog-nl-muted, var(--color-text-muted));
  margin: 16px 0 0;
}
.blog-newsletter-status {
  font-size: 14px;
  color: var(--blog-nl-accent, var(--color-accent));
  margin: 0 0 18px;
}
.blog-newsletter-status--error {
  color: var(--blog-nl-muted, var(--color-text-muted));
}

/* ==========================================================================
   SINGLE POST PAGE - "Dispatch Header" - single.php. Every color/size/
   toggle here is set via Appearance > Customize > Single Post Page
   (inc/single-post-customizer.php), not hardcoded - --single-* custom
   properties come from that panel's wp_head CSS output.
   ========================================================================== */
.single-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--single-crumb-color, var(--color-text-muted));
}
.single-crumb a {
  color: inherit;
  text-decoration: none;
}
.single-crumb a:hover { color: var(--color-accent); }
.single-crumb-current { color: var(--color-text); }
.single-crumb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--single-crumb-dot-color, var(--color-growth));
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .single-crumb-dot { animation: single-crumb-blip 1.4s ease-in-out infinite; }
}
@keyframes single-crumb-blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.single-meta-bar {
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px),
    var(--single-meta-bg, var(--color-panel));
  border: 1px solid var(--single-meta-border, var(--color-border));
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--single-meta-size, 11.5px);
  color: var(--single-meta-label-color, var(--color-text-muted));
}
.single-meta-bar b {
  color: var(--single-meta-value-color, var(--color-accent));
  font-weight: 600;
}

.single-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--single-title-size, clamp(30px, 5vw, 44px));
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--single-title-color, var(--color-text));
  margin: 0 0 24px;
}

.single-hero-img {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--single-hero-border, var(--color-border));
}
.single-hero-scan {
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  top: -80px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-accent) 15%, transparent), transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .single-hero-scan { animation: single-hero-sweep 2.2s ease-out 1; }
}
@keyframes single-hero-sweep { to { top: 100%; } }

@media (max-width: 640px) {
  .single-meta-bar { font-size: 10.5px; gap: 10px 14px; }
}

/* ==========================================================================
   RESOURCE MANAGEMENT PAGE - "Request a Resource" form
   ========================================================================== */
.rm-request-form-card {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
}
.rm-request-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.rm-request-field-full {
  grid-column: 1 / -1;
}
.rm-request-field {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  transition: border-color 0.2s ease;
}
.rm-request-field:focus {
  outline: none;
  border-color: var(--color-accent);
}
.rm-request-field::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}
select.rm-request-field option {
  background: var(--color-elevated);
  color: var(--color-text);
}
.rm-request-submit {
  width: 100%;
}

/* ==========================================================================
   RESOURCE MANAGEMENT PAGE - sticky "Request a Resource" bar
   ========================================================================== */
.rm-sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(120%);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  padding: 10px 12px 10px 20px;
  box-shadow: 0 12px 34px -10px rgba(0,0,0,0.5);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: calc(100vw - 32px);
}
.rm-sticky-cta.is-visible {
  transform: translateX(-50%) translateY(0);
}
.rm-sticky-cta p {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.rm-sticky-cta-btn {
  padding: 8px 16px !important;
  font-size: 13px !important;
  white-space: nowrap;
}
.rm-sticky-cta-dismiss {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.2s ease;
}
.rm-sticky-cta-dismiss:hover {
  color: var(--color-text);
}
@media (prefers-reduced-motion: reduce) {
  .rm-sticky-cta {
    transition: opacity 0.2s ease;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
  }
  .rm-sticky-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 600px) {
  .rm-sticky-cta {
    left: 16px;
    right: 16px;
    max-width: none;
    transform: translateY(120%);
  }
  .rm-sticky-cta.is-visible {
    transform: translateY(0);
  }
  .rm-sticky-cta p {
    display: none;
  }
}

/* ==========================================================================
   ABOUT PAGE - HEADER (Variation B, "Split Voltage") - page-about.php,
   template-parts/about-header.php
   Oversized stroked watermark + soft diagonal accent wash behind an
   oversized headline that reveals word-by-word, GPU-cheap (opacity +
   transform only, nothing that triggers layout). Every color/size/
   on-off toggle below has a matching wp-admin field with the same
   fallback value, so this looks identical whether or not anyone's
   touched the admin yet.
   ========================================================================== */
.about-header {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--color-base);
  isolation: isolate;
}

.about-header-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(90px, 22vw, 360px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.05);
  white-space: nowrap;
  letter-spacing: -0.02em;
  z-index: 0;
  pointer-events: none;
}

.about-header-diagonal {
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 60%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 0;
  pointer-events: none;
}

.about-header-content {
  position: relative;
  z-index: 1;
  max-width: 840px;
}

.about-header-eyebrow {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent);
  margin: 0 0 22px;
  opacity: 0;
  animation: about-header-fade-in 0.6s ease 0.05s forwards;
}

.about-header-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--color-text);
  margin: 0 0 28px;
}
.about-header-line { display: block; }
.about-header-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotate(4deg);
  animation: about-header-word-in 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}
.about-header-word--accent { color: var(--color-accent); }
@keyframes about-header-word-in {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes about-header-fade-in {
  to { opacity: 1; }
}

.about-header-sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 46ch;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  animation: about-header-rise 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes about-header-rise {
  to { opacity: 1; transform: translateY(0); }
}

.about-header-scroll-cue {
  position: absolute;
  z-index: 1;
  bottom: 40px;
  left: max(24px, calc((100% - 1140px) / 2));
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 0;
  animation: about-header-fade-in 0.6s ease 1.4s forwards;
}
.about-header-scroll-bar {
  width: 1px;
  height: 28px;
  background: var(--color-border);
  position: relative;
  overflow: hidden;
}
.about-header-scroll-bar::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  animation: about-header-bar-drop 1.8s ease-in-out infinite;
}
@keyframes about-header-bar-drop {
  to { top: 100%; }
}

@media (max-width: 820px) {
  .about-header-diagonal { display: none; }
  .about-header { min-height: 80vh; }
}

@media (prefers-reduced-motion: reduce) {
  .about-header-eyebrow,
  .about-header-word,
  .about-header-sub,
  .about-header-scroll-cue,
  .about-header-scroll-bar::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   WEBSITE DEVELOPMENT PAGE - "Live Render" hero (bespoke, page-specific -
   see THEME-REQUIREMENTS.md "Every page must have its own hero section"
   and template-parts/hero-webdev.php's doc comment for why this isn't the
   shared hero-automation.php component). Two experiences are both in the
   DOM; which one is visible is decided purely by the media query below,
   never by JS, so nothing is left half-built if JS fails to load.
   ========================================================================== */
.webdev-hero { text-align: center; overflow: hidden; }
.webdev-hero-eyebrow {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 18px;
}
.webdev-hero-heading {
  font-weight: 600;
  font-size: clamp(30px, 5.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 18ch;
  margin: 0 auto 16px;
}
.webdev-hero-sub {
  color: var(--color-text-muted);
  font-size: 15.5px;
  max-width: 50ch;
  margin: 0 auto 30px;
  line-height: 1.6;
}
.webdev-hero-cta { margin-bottom: 44px; }

/* ---- Live Render stage (desktop/hover-capable only) ---- */
.webdev-stage {
  display: none; /* shown only for hover-capable pointers, below */
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: clamp(280px, 42vw, 460px);
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-panel);
}
.webdev-stage-hidden,
.webdev-stage-revealed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
}
.webdev-stage-hidden {
  background: repeating-linear-gradient(45deg, var(--color-elevated) 0 2px, transparent 2px 14px);
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.webdev-stage-revealed {
  background: linear-gradient(135deg, var(--color-elevated), color-mix(in srgb, var(--color-accent) 10%, transparent));
  -webkit-mask-image: radial-gradient(circle 160px at var(--mx, 50%) var(--my, 50%), black 60%, transparent 100%);
          mask-image: radial-gradient(circle 160px at var(--mx, 50%) var(--my, 50%), black 60%, transparent 100%);
}
.webdev-device {
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
}
.webdev-device-desktop { width: 46%; height: 70%; padding: 14px; }
.webdev-device-desktop .webdev-row { height: 12%; background: var(--color-elevated); border-radius: 4px; margin-bottom: 10px; }
.webdev-row-accent { background: var(--color-accent); width: 40%; }
.webdev-device-tablet { width: 20%; height: 55%; padding: 10px; }
.webdev-device-mobile { width: 11%; height: 65%; padding: 8px; }
.webdev-device-tablet .webdev-row,
.webdev-device-mobile .webdev-row { height: 10%; background: var(--color-elevated); border-radius: 3px; margin-bottom: 8px; }
.webdev-stage-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}
@media (max-width: 700px) {
  .webdev-device-tablet { display: none; }
  .webdev-device-desktop { width: 64%; }
  .webdev-device-mobile { width: 22%; }
}

/* ---- Build Log terminal (touch devices / fallback - default visible) ---- */
.webdev-terminal {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
}
.webdev-terminal-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--color-border); }
.webdev-terminal-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); }
.webdev-terminal-body { padding: 20px 22px; font-family: monospace; font-size: 12.5px; line-height: 1.9; min-height: 150px; }
.webdev-tline {
  opacity: 0;
  color: var(--color-text-muted);
  animation: webdev-type-in 0.3s ease forwards;
}
.webdev-tok { color: var(--color-growth, #39FF14); }
.webdev-tpath { color: var(--color-accent); }
.webdev-tline:nth-child(1) { animation-delay: 0.2s; }
.webdev-tline:nth-child(2) { animation-delay: 0.9s; }
.webdev-tline:nth-child(3) { animation-delay: 1.6s; }
.webdev-tline:nth-child(4) { animation-delay: 2.3s; }
.webdev-tline-final { animation-delay: 3.0s; font-weight: 600; color: var(--color-text); }
@keyframes webdev-type-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Swap point: only true hover-capable pointers get the Live Render canvas;
   everything else (touch, no pointer capability) keeps the Build Log. */
@media (hover: hover) and (pointer: fine) {
  .webdev-stage { display: block; }
  .webdev-terminal { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .webdev-tline {
    animation: none;
    opacity: 1;
  }
  .webdev-stage-revealed {
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 0.85;
  }
}

/* ==========================================================================
   SERVICE PAGE SECTIONS (aiauto-*)
   Moved here from an inline <style> block in page-ai-automation.php for
   performance - a stylesheet the browser already has cached costs zero
   extra bytes on repeat visits and across pages; an inline block gets
   re-downloaded with every single page load and can't be shared by any
   future service page built on the same pattern (see
   razdigi_service_page_templates() in inc/helpers.php). Powers: Trust
   Strip, Pain Agitation, Services, Mid-Page CTA, Proof, Why Us Comparison.
   Deliberately its own scoped component (not reusing homepage class names)
   - see the file-top note in page-ai-automation.php for why. Accent-color
   glows use color-mix() instead of hardcoded rgba(), matching this theme's
   established Global Colors convention (see THEME-REQUIREMENTS.md).
   ========================================================================== */
.aiauto-trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  text-align: center;
}
.aiauto-trust-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--color-accent);
  line-height: 1.1;
}
.aiauto-trust-label {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.aiauto-pain-list { display: flex; flex-direction: column; gap: 14px; }
.aiauto-pain-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  padding: 14px 16px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.aiauto-pain-x {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.aiauto-cta-banner { text-align: center; }

.aiauto-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-md);
}
@media (max-width: 560px)  { .aiauto-service-grid { grid-template-columns: 1fr; } }

.aiauto-service-card {
  display: flex;
  flex-direction: column;
  background: rgba(var(--tint-rgb), 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.aiauto-service-card:hover {
  transform: translateY(-7px);
  border-color: var(--color-accent);
  box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.aiauto-service-icon {
  display: block;
  margin-bottom: 14px;
  transition: transform 0.22s ease;
}
.aiauto-service-card:hover .aiauto-service-icon { transform: scale(1.1); }
.aiauto-service-card h3 { font-size: 15px; margin-bottom: 8px; color: var(--color-text); }
.aiauto-service-card p  { font-size: 13px; color: var(--color-text-muted); line-height: 1.6; }
.aiauto-service-includes {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.aiauto-service-includes li {
  font-size: 12.5px;
  color: var(--color-text-muted);
  display: flex;
  gap: 8px;
}
.aiauto-service-includes li span { color: var(--color-accent); flex-shrink: 0; }

.aiauto-proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}
.aiauto-proof-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
}
.aiauto-proof-rating { color: var(--color-accent); font-size: 13px; margin-bottom: 10px; }
.aiauto-proof-quote { font-size: 14.5px; line-height: 1.6; margin-bottom: 16px; flex: 1; }
.aiauto-proof-quote::before { content: "\201C"; }
.aiauto-proof-quote::after  { content: "\201D"; }
.aiauto-proof-person { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.aiauto-proof-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--color-accent); flex-shrink: 0;
  overflow: hidden;
}
.aiauto-proof-avatar img { width: 100%; height: 100%; object-fit: cover; }
.aiauto-proof-name { font-size: 13.5px; font-weight: 600; }
.aiauto-proof-role { font-size: 12px; color: var(--color-text-muted); }
.aiauto-proof-metric { font-size: 11px; color: var(--color-accent); font-weight: 700; margin-top: 2px; }

/* "Why Us" Decision Matrix - see inc/automation-comparison-section.php
   and template-parts/service-funnel-page.php section 8. Native ARIA tabs
   pattern: pills select a criterion, .cmp-panel[hidden] swaps which
   3-option comparison shows. */
.cmp-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 28px;
}
.cmp-pill {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 12.5px;
  padding: 9px 16px;
  border-radius: 999px;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.cmp-pill.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
}
.cmp-pill:not(.is-active):hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}
.cmp-pill:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.cmp-matrix {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-panel);
  padding: clamp(24px, 4vw, 40px);
}
.cmp-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cmp-panel[hidden] { display: none; }
@media (max-width: 700px) {
  .cmp-panel { grid-template-columns: 1fr; }
}

.cmp-option {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
}
.cmp-option.you {
  border-color: var(--color-accent);
  background: linear-gradient(160deg, var(--color-elevated), color-mix(in srgb, var(--color-accent) 8%, transparent));
}
.cmp-option-name {
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.cmp-option.you .cmp-option-name { color: var(--color-accent); }
.cmp-option-icon {
  display: flex;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}
.cmp-option-icon.good { background: color-mix(in srgb, var(--color-growth, #39FF14) 14%, transparent); color: var(--color-growth, #39FF14); }
.cmp-option-icon.bad { background: rgba(255, 255, 255, 0.06); color: var(--color-text-muted); }
.cmp-option-icon.neutral { background: rgba(255, 255, 255, 0.04); color: var(--color-text-muted); }
.cmp-option-detail {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .aiauto-service-card, .aiauto-service-icon { transition: none; }
}

/* ==========================================================================
   RESOURCE MANAGEMENT PAGE - "Add more details" progressive disclosure
   (point #4). Native <details>/<summary> - accessible and keyboard-
   operable by default, works identically with JS disabled.
   ========================================================================== */
.rm-request-more {
  margin-top: 4px;
}
.rm-request-more summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  list-style: none;
  padding: 6px 0;
}
.rm-request-more summary::-webkit-details-marker {
  display: none;
}
.rm-request-more[open] summary {
  margin-bottom: 4px;
}

/* ==========================================================================
   RESOURCE MANAGEMENT PAGE - "How It Works" connecting flow (point #3)
   Ties this section back into the network/circuit visual language of the
   page's own Hero constellation.
   ========================================================================== */
.resource-steps-flow {
  position: relative;
}
.resource-steps-flow::before {
  content: '';
  position: absolute;
  top: 34px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent) 15%, var(--color-accent) 85%, transparent);
  opacity: 0.35;
  pointer-events: none;
}
.resource-step {
  position: relative;
}
.resource-step-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-base);
  border: 1.5px solid var(--color-accent);
  z-index: 1;
}
@media (max-width: 860px) {
  .resource-steps-flow::before {
    display: none;
  }
}