/**
 * components.css — Wolliq Theme
 *
 * All component and section styles. Must be loaded after style.css.
 * Every value references a token from style.css :root. No hardcoded hex.
 *
 * Token source: style.css Section 3.3–3.5
 * Breakpoints:  480px | 768px | 1024px | 1280px | 1440px
 * Architecture: mobile-first BEM. No !important except documented exceptions.
 *
 * Index:
 *   00  Foundations    — container, section shells, shared header, type helpers
 *   01  Buttons        — 5 variants × 3 sizes, all states
 *   02  Accessibility  — skip link, focus ring, sr-only
 *   03  Navigation     — sticky header, desktop nav, mega dropdown, mobile overlay
 *   04  Hero           — dark-grid full-bleed, display H1, CTAs, trust row
 *   05  Proof Bar      — client name strip
 *   06  What We Do     — 2-col intro + capability highlights
 *   07  Service Grid   — 3+2 card grid (CPT / fallback)
 *   08  Why Wolliq     — 4 differentiator cards
 *   09  How It Works   — 3-step numbered process
 *   10  Stats Band     — dark animated counters
 *   11  Industry Grid  — 3-col CPT cards
 *   12  Testimonials   — grid variant + featured dark variant
 *   13  Case Study Strip
 *   14  CTA Banner + CTA Strip
 *   15  FAQ Accordion
 *   16  Contact Form   — 2-col sidebar + form panel
 *   17  Footer
 *   18  Blog Preview
 *
 * @package Wolliq
 */

/* ============================================================================
   00 — FOUNDATIONS
   ============================================================================ */

/* Container ----------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--content-max);   /* 1100px */
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--gutter-mobile);  /* 20px */
  padding-left: var(--gutter-mobile);
}

@media (min-width: 768px) {
  .container {
    padding-right: var(--sp-8);    /* 32px */
    padding-left: var(--sp-8);
  }
}

@media (min-width: 1280px) {
  .container {
    padding-right: var(--sp-6);    /* 24px — contained within max-width */
    padding-left: var(--sp-6);
  }
}

.container--wide {
  max-width: var(--container-max); /* 1280px */
}

/* Section shell — vertical rhythm ------------------------------------------ */

.section {
  width: 100%;
  padding-top: var(--section-pad-mob);    /* 48px */
  padding-bottom: var(--section-pad-mob);
}

@media (min-width: 1024px) {
  .section {
    padding-top: var(--section-pad-desk);   /* 80px */
    padding-bottom: var(--section-pad-desk);
  }
}

/* Section background variants ---------------------------------------------- */

.section--white {
  background-color: var(--color-surface);
}

.section--light {
  background-color: var(--color-bg);
}

.section--dark {
  background-color: var(--color-primary);
  color: var(--color-surface);
}

/* Dark section with subtle CSS grid overlay (hero only) */
.section--dark-grid {
  background-color: var(--color-primary);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  color: var(--color-surface);
}

/* Secondary-light (CTA strip) */
.section--secondary-light {
  background-color: var(--secondary-light);
  color: var(--color-text);
}

/* Shared section header — centered, max-width constrained ------------------ */

.section__header {
  text-align: center;
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: var(--sp-12);
}

.section__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.5vw, var(--text-h2)); /* 24px → 30px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-text);
  margin-top: var(--sp-3);
}

.section--dark .section__title,
.section--dark-grid .section__title {
  color: var(--color-surface);
}

.section__sub {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-top: var(--sp-4);
}

.section--dark .section__sub,
.section--dark-grid .section__sub {
  color: rgba(255, 255, 255, 0.65);
}

/* Typography helpers -------------------------------------------------------- */

/* Eyebrow — from wolliq_eyebrow() → <span class="eyebrow"> */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-secondary);
}

.section--dark .eyebrow,
.section--dark-grid .eyebrow {
  color: var(--color-accent);
}

.section--secondary-light .eyebrow {
  color: var(--color-secondary);
}

/* Eyebrow badge — hero pill */
.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background-color: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.3);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Display heading (hero H1 utility class) */
.display {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, var(--text-display)); /* 32px → 56px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

/* Body-lg utility */
.body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
}

/* ============================================================================
   01 — BUTTONS
   5 variants (primary, ghost, outline, dark, accent) × 3 sizes (sm, md, lg)
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-6);             /* default = md */
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-semi);
  line-height: 1;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  -webkit-user-select: none;
  user-select: none;
}

.btn:active { transform: scale(0.97); }

.btn:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

/* Sizes */
.btn--sm {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-body-sm);
}

.btn--lg {
  padding: 14px var(--sp-8);
  font-size: var(--text-body-lg);
}

/* Primary — filled blue */
.btn--primary {
  background-color: var(--color-secondary);
  color: var(--color-surface);
  border-color: var(--color-secondary);
}

.btn--primary:hover {
  background-color: color-mix(in srgb, var(--color-secondary) 85%, black);
  border-color: color-mix(in srgb, var(--color-secondary) 85%, black);
  color: var(--color-surface);
  text-decoration: none;
}

.btn--primary:focus-visible {
  outline-color: var(--color-secondary);
  box-shadow: 0 0 0 4px var(--secondary-mid);
}

.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Ghost — transparent, white border (use on dark sections) */
.btn--ghost {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-surface);
  text-decoration: none;
}

.btn--ghost:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}

/* Outline — transparent, blue border (use on light/white sections) */
.btn--outline {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn--outline:hover {
  background-color: var(--secondary-light);
  text-decoration: none;
}

.btn--outline:focus-visible {
  box-shadow: 0 0 0 4px var(--secondary-mid);
}

/* Dark — filled navy (alternative CTA) */
.btn--dark {
  background-color: var(--color-primary);
  color: var(--color-surface);
  border-color: var(--color-primary);
}

.btn--dark:hover {
  background-color: color-mix(in srgb, var(--color-primary) 80%, black);
  color: var(--color-surface);
  text-decoration: none;
}

/* Accent — cyan fill */
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-accent);
}

.btn--accent:hover {
  background-color: color-mix(in srgb, var(--color-accent) 85%, black);
  color: var(--color-surface);
  text-decoration: none;
}

/* ============================================================================
   02 — ACCESSIBILITY
   ============================================================================ */

/* Skip link — keyboard navigation shortcut */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: calc(var(--z-nav) + 100);
  padding: var(--sp-3) var(--sp-6);
  background-color: var(--color-secondary);
  color: var(--color-surface);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semi);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--sp-4);
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Global focus ring (keyboard users) */
:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Prevent outline on mouse/touch (supported browsers) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Body scroll lock when mobile nav is open */
body.mobile-nav-open {
  overflow: hidden;
}

/* ============================================================================
   03 — C01: NAVIGATION
   Sticky dark header, desktop nav + mega dropdown, mobile overlay
   ============================================================================ */

/* Header -------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  /* background/color come from .section--dark */
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: box-shadow var(--transition-normal);
}

.site-header--scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* Nav inner — flex row inside container */
.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--sp-6);
}

/* Logo ---------------------------------------------------------------------- */

.site-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.site-nav__logo img {
  height: 36px;
  width: auto;
  display: block;
}

.site-nav__logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-h3);
  color: var(--color-surface);
  line-height: 1;
}

/* Desktop primary nav — hidden below 1024px --------------------------------- */

.site-nav__primary {
  display: none;
  flex: 1;
}

@media (min-width: 1024px) {
  .site-nav__primary {
    display: flex;
    justify-content: center;
  }
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__item {
  position: static; /* Ensure dropdown escapes to header */
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border-radius: var(--r-md);
  border: none;
  background: transparent;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
  white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-surface);
  background-color: rgba(255, 255, 255, 0.07);
}

.site-nav__link--active {
  color: var(--color-surface);
  background-color: rgba(255, 255, 255, 0.08);
}

/* Chevron inside Solutions button */
.site-nav__chevron {
  transition: transform var(--transition-normal);
  flex-shrink: 0;
}

.site-nav__dropdown-trigger[aria-expanded="true"] .site-nav__chevron {
  transform: rotate(180deg);
}

/* Desktop action buttons — hidden below 1024px */
.site-nav__actions {
  display: none;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .site-nav__actions {
    display: flex;
  }
}

/* Mega Dropdown ------------------------------------------------------------- */

.site-nav__dropdown {
  position: fixed;
  top: 64px;                    /* Height of nav bar */
  left: 0;
  right: 0;
  width: 100%;
  background-color: #111827;    /* Slightly lighter than --color-primary for depth */
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: calc(var(--z-nav) - 1);
  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity var(--transition-dropdown),
    transform var(--transition-dropdown),
    visibility 0s var(--transition-dropdown);
}

.site-nav__dropdown--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity var(--transition-dropdown),
    transform var(--transition-dropdown),
    visibility 0s 0s;
}

.site-nav__dropdown-inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-8);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}

/* 3 pillar columns */
.site-nav__dropdown-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.site-nav__dropdown-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.site-nav__dropdown-pillar-title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: color var(--transition-fast);
}

.site-nav__dropdown-pillar-title:hover {
  color: var(--color-accent);
}

a.site-nav__dropdown-pillar-title {
  cursor: pointer;
}

.site-nav__dropdown-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__dropdown-link {
  display: block;
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.site-nav__dropdown-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}

.site-nav__dropdown-link:focus-visible {
  outline-offset: 1px;
}

/* Featured panel — right column */
.site-nav__dropdown-featured {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(6, 182, 212, 0.08) 100%);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.site-nav__dropdown-featured .eyebrow {
  color: var(--color-accent);
}

.site-nav__dropdown-featured-heading {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--fw-semi);
  line-height: var(--lh-h3);
  color: #FFFFFF;
  letter-spacing: var(--ls-h3);
}

.site-nav__dropdown-featured-sub {
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.55);
  line-height: var(--lh-body);
}

.site-nav__dropdown-featured-trust {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.4);
  margin-top: auto;
}

.site-nav__dropdown-all-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.site-nav__dropdown-all-link:hover {
  gap: var(--sp-3);
}

/* Mobile hamburger button — shown below 1024px ------------------------------ */

.site-nav__mobile-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--sp-2);
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-md);
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.site-nav__mobile-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.site-nav__mobile-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .site-nav__mobile-btn {
    display: none;
  }
}

.site-nav__burger-line {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-surface);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform var(--transition-normal),
    opacity var(--transition-normal);
}

.site-nav__mobile-btn[aria-expanded="true"] .site-nav__burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-nav__mobile-btn[aria-expanded="true"] .site-nav__burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.site-nav__mobile-btn[aria-expanded="true"] .site-nav__burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile overlay panel ------------------------------------------------------ */

.site-nav__mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  background-color: var(--color-primary);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition:
    transform var(--transition-normal),
    opacity var(--transition-normal),
    visibility 0s var(--transition-normal);
}

.site-nav__mobile--open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition:
    transform var(--transition-normal),
    opacity var(--transition-normal),
    visibility 0s 0s;
}

@media (min-width: 1024px) {
  .site-nav__mobile {
    display: none; /* Never shown on desktop regardless of JS state */
  }
}

/* Mobile overlay header (logo + close button) */
.site-nav__mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--gutter-mobile);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: 64px;
}

.site-nav__mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-md);
  color: var(--color-surface);
  transition: background-color var(--transition-fast);
}

.site-nav__mobile-close:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.site-nav__mobile-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* Mobile nav links */
.site-nav__mobile-links {
  list-style: none;
  margin: 0;
  padding: var(--sp-4) var(--gutter-mobile);
}

.site-nav__mobile-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-nav__mobile-link {
  display: block;
  padding: var(--sp-4) 0;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-nav__mobile-link:hover,
.site-nav__mobile-link:focus-visible {
  color: var(--color-surface);
}

/* Mobile Solutions accordion (native <details>/<summary>) */
.site-nav__mobile-accordion {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-nav__mobile-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-4) 0;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.8);
  list-style: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.site-nav__mobile-accordion-trigger::-webkit-details-marker { display: none; }

.site-nav__mobile-accordion[open] .site-nav__mobile-accordion-trigger {
  color: var(--color-surface);
}

.site-nav__mobile-accordion-chevron {
  transition: transform var(--transition-normal);
  opacity: 0.6;
}

.site-nav__mobile-accordion[open] .site-nav__mobile-accordion-chevron {
  transform: rotate(180deg);
}

/* Mobile pillar columns */
.site-nav__mobile-pillars {
  padding-bottom: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.site-nav__mobile-pillar-title {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semi);
  color: var(--color-accent);
  text-decoration: none;
  margin-bottom: var(--sp-2);
  letter-spacing: var(--ls-h3);
}

.site-nav__mobile-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.site-nav__mobile-sub-link {
  display: block;
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  padding: var(--sp-1) 0;
  transition: color var(--transition-fast);
}

.site-nav__mobile-sub-link:hover {
  color: var(--color-surface);
}

.site-nav__mobile-view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-secondary);
  text-decoration: none;
  margin-top: var(--sp-3);
}

/* Mobile CTA section at bottom of overlay */
.site-nav__mobile-cta {
  padding: var(--sp-6) var(--gutter-mobile) var(--sp-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ============================================================================
   04 — C02: HERO
   Dark full-bleed section. Display H1 has no reveal class (LCP element).
   ============================================================================ */

.section--hero {
  padding-top: var(--sp-32);    /* 128px desktop top */
  padding-bottom: var(--sp-32);
  min-height: 80vh;
  display: flex;
  align-items: center;
}

@media (min-width: 1024px) {
  .section--hero {
    min-height: 85vh;
  }
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  align-items: center;
  width: 100%;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* When no visual slot, center content */
.hero__inner > .hero__content:only-child {
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.hero__eyebrow-wrap {
  margin-bottom: var(--sp-4);
}

.hero__heading {
  margin-top: var(--sp-4);
  margin-bottom: 0;
  color: var(--color-surface);
}

.hero__subtext {
  margin-top: var(--sp-6);
  color: rgba(255, 255, 255, 0.75);
  max-width: 600px;
}

.hero__inner > .hero__content:only-child .hero__subtext {
  margin-right: auto;
  margin-left: auto;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.hero__inner > .hero__content:only-child .hero__actions {
  justify-content: center;
}

/* Trust signal row */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.55);
}

.hero__inner > .hero__content:only-child .hero__trust {
  justify-content: center;
}

.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: rgba(255, 255, 255, 0.6);
}

.hero__trust-icon {
  color: var(--color-accent);
  flex-shrink: 0;
}

.hero__trust-divider {
  color: rgba(255, 255, 255, 0.25);
}

/* Secondary CTA text link variant (cta_secondary_style: 'link' in hero args)
   Used on focused conversion pages where a ghost button would dilute the
   primary CTA. Renders as a muted underline link beside the primary button. */
.hero__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.hero__cta-link:hover {
  color: rgba(255, 255, 255, 0.92);
  text-decoration-color: rgba(255, 255, 255, 0.55);
}

/* Visual slot (optional right column) */
.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================================
   05 — S03: PROOF BAR
   Client name strip. Scrolls on mobile, wraps on desktop.
   ============================================================================ */

.proof-bar {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.proof-bar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .proof-bar__inner {
    flex-direction: row;
    gap: var(--sp-8);
  }
}

.proof-bar__label {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-subtle);
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-size: var(--text-eyebrow);
}

.proof-bar__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.proof-bar__logos::-webkit-scrollbar { display: none; }

.proof-bar__logo-item {
  flex-shrink: 0;
}

/* Text placeholder — replaced with <img> once logo assets exist */
.proof-bar__logo-name {
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semi);
  color: var(--color-border-strong);
  letter-spacing: var(--ls-h3);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.proof-bar__logo-item:hover .proof-bar__logo-name {
  color: var(--color-text-muted);
}

/* ============================================================================
   06 — S04: WHAT WE DO
   Two-column intro: text left, capability grid right.
   ============================================================================ */

.what-we-do__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  align-items: start;
}

@media (min-width: 1024px) {
  .what-we-do__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.what-we-do__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, var(--text-h1)); /* 24px → 40px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-text);
  margin-top: var(--sp-3);
}

.what-we-do__body {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-top: var(--sp-6);
}

.what-we-do__link {
  margin-top: var(--sp-8);
}

/* 2×2 capability grid */
.what-we-do__capabilities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 479px) {
  .what-we-do__capabilities {
    grid-template-columns: 1fr;
  }
}

.what-we-do__capability {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-6);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.what-we-do__capability:hover {
  border-color: var(--secondary-mid);
  box-shadow: var(--shadow-card);
}

.what-we-do__cap-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--color-secondary);
  background-color: var(--secondary-light);
  border-radius: var(--r-md);
}

/* Text column: fills remaining flex space beside the icon */
.what-we-do__cap-text {
  flex: 1;
  min-width: 0; /* Prevents flex child from overflowing on long words */
}

.what-we-do__cap-title {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
  margin-bottom: var(--sp-1);
}

.what-we-do__cap-desc {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-text-muted);
}

/* ============================================================================
   07 — C04/S05: SERVICE GRID
   3+2 card layout at desktop: 6-column grid, cards span 2 cols each.
   ============================================================================ */

.service-grid__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .service-grid__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop 3+2 layout using 6 equal columns */
@media (min-width: 1024px) {
  .service-grid__cards {
    grid-template-columns: repeat(6, 1fr);
  }

  .service-grid__card:nth-child(1) { grid-column: 1 / span 2; }
  .service-grid__card:nth-child(2) { grid-column: 3 / span 2; }
  .service-grid__card:nth-child(3) { grid-column: 5 / span 2; }
  .service-grid__card:nth-child(4) { grid-column: 2 / span 2; }
  .service-grid__card:nth-child(5) { grid-column: 4 / span 2; }
}

.service-grid__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

/* Animated bottom accent line */
.service-grid__card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-secondary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-normal);
}

.service-grid__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--secondary-mid);
}

.service-grid__card:hover::after {
  transform: scaleX(1);
}

/* First card highlight variant */
.service-grid__card--highlight {
  border-color: var(--secondary-mid);
  background: linear-gradient(
    135deg,
    var(--color-surface) 0%,
    var(--secondary-light) 100%
  );
}

.service-grid__card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--secondary-light);
  border-radius: var(--r-lg);
  color: var(--color-secondary);
  flex-shrink: 0;
}

.service-grid__card--highlight .service-grid__card-icon {
  background-color: var(--color-secondary);
  color: var(--color-surface);
}

.service-grid__card-pillar {
  color: var(--color-accent);
}

.service-grid__card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
  margin-top: var(--sp-2);
}

.service-grid__card-desc {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-text-muted);
  flex: 1;
}

.service-grid__card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semi);
  color: var(--color-secondary);
  text-decoration: none;
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.service-grid__card-link:hover {
  gap: var(--sp-3);
  color: color-mix(in srgb, var(--color-secondary) 85%, black);
}

.service-grid__card-link:focus-visible {
  outline-offset: 3px;
}

.service-grid__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-12);
}

/* ============================================================================
   08 — S06: WHY WOLLIQ
   4 differentiator cards in a 2×2 (tablet) / 4-col (desktop) grid.
   ============================================================================ */

.why-wolliq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .why-wolliq__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .why-wolliq__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.why-wolliq__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.why-wolliq__card:hover {
  border-color: var(--secondary-mid);
  box-shadow: var(--shadow-card);
}

.why-wolliq__card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  background-color: var(--accent-light);
  color: var(--color-accent);
  flex-shrink: 0;
}

.why-wolliq__card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.why-wolliq__card-desc {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  flex: 1;
}

/* ============================================================================
   09 — S07: HOW IT WORKS
   3-step numbered process. Numbered step circles with connector line.
   ============================================================================ */

.how-it-works__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .how-it-works__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
  }

  /* Connecting rule between steps */
  .how-it-works__steps::before {
    content: '';
    position: absolute;
    top: 28px;                  /* Center of number circle */
    left: calc(100% / 6);      /* Start from center of step 1 */
    width: calc(100% * 2 / 3); /* Span between step 1 and step 3 centers */
    height: 1px;
    background: linear-gradient(
      90deg,
      var(--color-border) 0%,
      var(--secondary-mid) 50%,
      var(--color-border) 100%
    );
    z-index: 0;
  }
}

.how-it-works__step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .how-it-works__step {
    align-items: flex-start;
  }
}

.how-it-works__step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-secondary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  border: 4px solid var(--color-bg); /* Creates separation from connector line */
}

.how-it-works__step-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.how-it-works__step-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.how-it-works__step-desc {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.how-it-works__step-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-secondary);
  text-decoration: none;
  margin-top: var(--sp-2);
  transition: gap var(--transition-fast);
}

.how-it-works__step-link:hover {
  gap: var(--sp-3);
}

/* ============================================================================
   10 — S08: STATS BAND
   Dark section with 4 animated counters. counter.js targets data-counter-to.
   ============================================================================ */

.stats-band__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
  text-align: center;
}

@media (min-width: 1024px) {
  .stats-band__inner {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
  }
}

.stats-band__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-xl);
  background-color: rgba(255, 255, 255, 0.03);
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.stats-band__stat:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

.stats-band__number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, var(--text-display)); /* 32px → 56px */
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--color-surface);
  display: flex;
  align-items: baseline;
  gap: 0;
  margin: 0;
}

.stats-band__digit {
  color: var(--color-surface);
}

.stats-band__suffix {
  color: var(--color-accent);
  font-size: 0.6em;
  font-weight: var(--fw-bold);
}

.stats-band__label {
  font-size: var(--text-body);
  font-weight: var(--fw-semi);
  color: var(--color-surface);
  margin: 0;
}

.stats-band__sub {
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

/* ============================================================================
   11 — C05/S09: INDUSTRY GRID
   3-column card grid. Arrow animates right on hover (CSS only).
   ============================================================================ */

.industry-grid__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .industry-grid__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .industry-grid__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.industry-grid__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

.industry-grid__card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-light), var(--shadow-hover);
  transform: translateY(-2px);
}

.industry-grid__card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-light);
  border-radius: var(--r-lg);
  color: var(--color-accent);
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.industry-grid__card:hover .industry-grid__card-icon {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

.industry-grid__card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.industry-grid__card-desc {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-text-muted);
  flex: 1;
}

/* Service pills */
.industry-grid__card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.industry-grid__card-pill {
  padding: var(--sp-1) var(--sp-3);
  background-color: var(--accent-light);
  border: 1px solid var(--accent-mid);
  border-radius: var(--r-pill);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-accent) 80%, black);
}

/* Animated arrow link */
.industry-grid__card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semi);
  color: var(--color-secondary);
  text-decoration: none;
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.industry-grid__card-link:hover {
  gap: var(--sp-3);
}

.industry-grid__card-arrow {
  transition: transform var(--transition-fast);
}

.industry-grid__card-link:hover .industry-grid__card-arrow {
  transform: translateX(4px);
}

/* ============================================================================
   12 — C06: TESTIMONIALS
   Grid variant (3 cards) + Featured variant (single dark panel).
   ============================================================================ */

/* Grid variant -------------------------------------------------------------- */

.testimonials__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .testimonials__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .testimonials__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonials__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  transition: box-shadow var(--transition-normal);
}

.testimonials__card:hover {
  box-shadow: var(--shadow-hover);
}

/* Star ratings */
.testimonials__stars {
  display: flex;
  gap: 2px;
}

.testimonials__star {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.testimonials__star--filled {
  color: var(--color-warning);
}

.testimonials__star--empty {
  color: var(--color-border-strong);
}

/* Quote */
.testimonials__quote {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  flex: 1;
}

.testimonials__quote p {
  margin: 0;
}

/* Person block */
.testimonials__person {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
}

.testimonials__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonials__avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--secondary-mid);
  color: color-mix(in srgb, var(--color-secondary) 85%, black);
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}

.testimonials__person-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonials__name {
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  font-style: normal;
}

.testimonials__role {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

/* Featured variant — dark panel + metric boxes ------------------------------ */

.testimonials--featured {
  /* .section--dark provides background */
}

.testimonials__featured-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .testimonials__featured-inner {
    grid-template-columns: 3fr 2fr;
  }
}

.testimonials__featured-mark {
  color: var(--color-surface);
  margin-bottom: var(--sp-4);
}

.testimonials__featured-blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, var(--text-h2)); /* 20px → 30px */
  font-weight: var(--fw-medium);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-surface);
  margin: var(--sp-6) 0;
}

.testimonials__featured-blockquote p {
  margin: 0;
}

.testimonials--featured .testimonials__person {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.testimonials--featured .testimonials__name {
  color: var(--color-surface);
}

.testimonials--featured .testimonials__role {
  color: rgba(255, 255, 255, 0.6);
}

/* Metric boxes */
.testimonials__featured-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

@media (min-width: 1024px) {
  .testimonials__featured-metrics {
    grid-template-columns: 1fr;
  }
}

.testimonials__metric-box {
  padding: var(--sp-6);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.testimonials__metric-num {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, var(--text-display));
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--color-accent);
}

.testimonials__metric-label {
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.65);
}

/* ============================================================================
   13 — S11: CASE STUDY STRIP
   2-column: metric box left, quote block right.
   ============================================================================ */

.case-strip__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .case-strip__inner {
    grid-template-columns: 280px 1fr;
  }
}

.case-strip__metric {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-2xl);
  text-align: center;
}

@media (min-width: 1024px) {
  .case-strip__metric {
    text-align: left;
  }
}

.case-strip__metric-number {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, var(--text-display));
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--color-secondary);
}

.case-strip__metric-label {
  font-size: var(--text-body);
  font-weight: var(--fw-semi);
  color: var(--color-text-muted);
}

.case-strip__client {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-body-sm);
  color: var(--color-text-subtle);
}

.case-strip__client strong {
  color: var(--color-text);
}

.case-strip__quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.case-strip__quote-mark {
  color: var(--color-secondary);
}

.case-strip__blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2.5vw, var(--text-h2));
  font-weight: var(--fw-medium);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-text);
}

.case-strip__blockquote p {
  margin: 0;
}

.case-strip__person {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.case-strip__name {
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  font-style: normal;
}

.case-strip__role {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

.case-strip__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-secondary);
  text-decoration: none;
  align-self: flex-start;
  transition: gap var(--transition-fast);
}

.case-strip__link:hover {
  gap: var(--sp-3);
}

/* ============================================================================
   14 — C03: CTA BANNER & CTA STRIP
   ============================================================================ */

/* CTA Banner ---------------------------------------------------------------- */

.cta-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  text-align: center;
}

@media (min-width: 1024px) {
  .cta-banner__inner {
    gap: var(--sp-12);
  }
}

.cta-banner__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
}

.cta-banner__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.625rem, 3.5vw, var(--text-h1)); /* 26px → 40px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-surface);
  max-width: 700px;
}

.cta-banner__sub {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.7);
  max-width: 560px;
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}

.cta-banner__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--sp-4);
}

.cta-banner__trust svg {
  color: var(--color-accent);
  flex-shrink: 0;
}

/* CTA Strip ----------------------------------------------------------------- */

.cta-strip {
  /* .section--secondary-light provides bg */
}

.cta-strip__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  text-align: center;
}

@media (min-width: 768px) {
  .cta-strip__inner {
    flex-direction: row;
    text-align: left;
    gap: var(--sp-8);
  }
}

.cta-strip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-xl);
  background-color: var(--secondary-mid);
  color: var(--color-secondary);
  flex-shrink: 0;
}

.cta-strip__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cta-strip__heading {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.cta-strip__sub {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

.cta-strip__action {
  flex-shrink: 0;
}

/* ============================================================================
   15 — C07: FAQ ACCORDION
   Override UA [hidden] to enable max-height transition.
   Author styles always beat UA stylesheet — no !important needed.
   ============================================================================ */

.faq__list {
  max-width: 800px;
  margin: 0 auto;
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__item:first-child {
  border-top: 1px solid var(--color-border);
}

/* Panel transition — override UA [hidden] = display:none without !important */
[data-faq-item] .faq__panel {
  display: block;   /* Author style beats UA [hidden] stylesheet rule */
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition:
    max-height var(--transition-faq),
    visibility 0s var(--transition-faq);
}

[data-faq-item] .faq__panel:not([hidden]) {
  max-height: 600px;
  visibility: visible;
  transition:
    max-height var(--transition-faq),
    visibility 0s 0s;
}

/* Active item background */
.faq__item--open {
  background-color: var(--secondary-light);
  border-color: var(--secondary-mid);
  border-radius: var(--r-md);
  margin: var(--sp-2) 0;
}

.faq__item--open + .faq__item {
  border-top: 1px solid transparent;
}

/* Trigger button */
.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-6) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  gap: var(--sp-4);
  transition: color var(--transition-fast);
  border-radius: var(--r-md);
}

.faq__trigger:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: -2px;
}

.faq__item--open .faq__trigger {
  color: var(--color-secondary);
}

.faq__trigger-text {
  flex: 1;
  line-height: var(--lh-body);
}

.faq__trigger-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-border);
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition:
    transform var(--transition-faq),
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.faq__item--open .faq__trigger-icon {
  transform: rotate(45deg);
  background-color: var(--color-secondary);
  color: var(--color-surface);
}

.faq__panel-inner {
  padding: 0 var(--sp-4) var(--sp-6);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.faq__panel-inner p { margin-bottom: var(--sp-4); }
.faq__panel-inner p:last-child { margin-bottom: 0; }

/* ============================================================================
   16 — C08: CONTACT FORM
   Two-column layout: dark sidebar + white form panel.
   ============================================================================ */

.contact-form__section-header {
  margin-bottom: var(--sp-12);
}

.contact-form__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-form__inner {
    grid-template-columns: 320px 1fr;
    gap: 0;
  }
}

/* Dark sidebar -------------------------------------------------------------- */

.contact-form__sidebar {
  /* .section--dark provides background/color */
  padding: var(--sp-8);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

@media (min-width: 1024px) {
  .contact-form__sidebar {
    border-radius: var(--r-2xl) 0 0 var(--r-2xl);
    min-height: 100%;
  }
}

.contact-form__sidebar-intro {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--sp-8);
}

.contact-form__sidebar-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-form__sidebar-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.contact-form__sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-accent);
  flex-shrink: 0;
}

.contact-form__sidebar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-form__sidebar-label {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semi);
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-size: var(--text-eyebrow);
}

.contact-form__sidebar-value {
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a.contact-form__sidebar-value:hover {
  color: var(--color-accent);
}

.contact-form__sidebar-promise {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding: var(--sp-4);
  background-color: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: var(--r-lg);
  font-size: var(--text-body-sm);
  color: var(--color-accent);
}

/* Form panel ---------------------------------------------------------------- */

.contact-form__panel {
  padding: var(--sp-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

@media (min-width: 1024px) {
  .contact-form__panel {
    border-radius: 0 var(--r-2xl) var(--r-2xl) 0;
    border-left: none;
  }
}

/* Success / error notices */
.contact-form__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-6);
}

.contact-form__notice p { margin: 0; font-size: var(--text-body-sm); }

.contact-form__notice--success {
  background-color: var(--success-light);
  border: 1px solid var(--color-success);
  color: color-mix(in srgb, var(--color-success) 70%, black);
}

.contact-form__notice--error {
  background-color: var(--danger-light);
  border: 1px solid var(--color-danger);
  color: color-mix(in srgb, var(--color-danger) 70%, black);
}

/* CF7 wrapper (let plugin handle its own styles) */
.contact-form__cf7-wrap {
  min-height: 200px;
}

/* Native form */
.contact-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Honeypot — hidden from all users */
.contact-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 640px) {
  .contact-form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form__field--full {
  grid-column: 1 / -1;
}

/* Field label */
.contact-form__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin-bottom: var(--sp-2);
}

.contact-form__required {
  color: var(--color-danger);
}

.contact-form__optional {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-subtle);
}

/* Form inputs */
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  padding: 10px var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--r-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--color-text-subtle);
}

.contact-form__input:hover,
.contact-form__select:hover,
.contact-form__textarea:hover {
  border-color: var(--color-secondary);
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--secondary-mid);
  outline: none;
}

.contact-form__input:invalid:not(:placeholder-shown),
.contact-form__textarea:invalid:not(:placeholder-shown) {
  border-color: var(--color-danger);
}

.contact-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-12);
  cursor: pointer;
}

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

/* Form footer: privacy note + submit */
.contact-form__footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.contact-form__privacy {
  font-size: var(--text-body-sm);
  color: var(--color-text-subtle);
  line-height: var(--lh-body-sm);
}

.contact-form__privacy a {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-form__submit {
  align-self: flex-start;
}

/* ============================================================================
   17 — C09: SITE FOOTER
   Dark 4-column grid + legal bar.
   ============================================================================ */

.site-footer {
  /* .section--dark / background from section shell */
  padding-top: var(--sp-20);
  padding-bottom: 0;
}

.site-footer__inner {
  /* container provides max-width */
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.75fr;
    gap: var(--sp-8);
  }
}

/* Brand column */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.site-footer__logo {
  display: inline-flex;
  text-decoration: none;
}

.site-footer__logo img {
  height: 32px;
  width: auto;
}

.site-footer__logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-h3);
  color: var(--color-surface);
}

.site-footer__tagline {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.55);
  max-width: 280px;
}

.site-footer__social {
  display: flex;
  gap: var(--sp-3);
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.site-footer__social-link:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-surface);
}

.site-footer__social-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* Nav columns */
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.site-footer__col-title {
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--sp-2);
}

/* WP nav_menu renders a <ul> directly */
.site-footer__links,
.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__link,
.site-footer__col ul a {
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: inline-block;
}

.site-footer__link:hover,
.site-footer__col ul a:hover {
  color: var(--color-surface);
}

/* CTA column */
.site-footer__cta-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.site-footer__cta-heading {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-h3);
  color: var(--color-surface);
}

.site-footer__cta-sub {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.45);
}

.site-footer__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.site-footer__trust-item svg {
  color: var(--color-warning);
}

.site-footer__trust-sep {
  color: rgba(255, 255, 255, 0.2);
}

/* Divider + legal bar */
.site-footer__divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.07);
  margin-top: var(--sp-20);
}

.site-footer__legal-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-8);
}

@media (min-width: 768px) {
  .site-footer__legal-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
  }
}

.site-footer__copyright {
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.4);
}

.site-footer__legal-nav {
  /* Let wp_nav_menu render its own ul */
}

.site-footer__legal-links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__legal-link,
.site-footer__legal-links a {
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__legal-link:hover,
.site-footer__legal-links a:hover {
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================================
   18 — BLOG PREVIEW
   3-column card grid with image, category, title, excerpt, date, read more.
   ============================================================================ */

.blog-preview__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .blog-preview__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.blog-preview__card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.blog-preview__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--secondary-mid);
}

.blog-preview__card-image-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.blog-preview__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.blog-preview__card:hover .blog-preview__card-img {
  transform: scale(1.04);
}

.blog-preview__card-image-placeholder {
  aspect-ratio: 16 / 9;
  background: linear-gradient(
    135deg,
    var(--color-bg) 0%,
    var(--secondary-light) 100%
  );
}

.blog-preview__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  flex: 1;
}

.blog-preview__card-cat {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--sp-1) var(--sp-3);
  background-color: var(--accent-light);
  border-radius: var(--r-pill);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent) 80%, black);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.blog-preview__card-cat:hover {
  background-color: var(--accent-mid);
}

.blog-preview__card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  margin: 0;
}

.blog-preview__card-title-link {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.blog-preview__card-title-link:hover {
  color: var(--color-secondary);
}

.blog-preview__card-excerpt {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-text-muted);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-preview__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
}

.blog-preview__card-date {
  font-size: var(--text-body-sm);
  color: var(--color-text-subtle);
}

.blog-preview__card-read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: gap var(--transition-fast);
}

.blog-preview__card-read-more:hover {
  gap: var(--sp-2);
}

.blog-preview__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-12);
}

/* Empty state */
.blog-preview__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-20) var(--sp-8);
  text-align: center;
  background-color: var(--color-bg);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--r-xl);
}

.blog-preview__empty-text {
  font-size: var(--text-body);
  color: var(--color-text-muted);
}

/* ============================================================================
   19 — CONSULTATION PAGE / BOOKING TEMPLATE
   S05 success metrics (.consult-metrics) and S07 booking form (.book-consult).
   Benefits (S02) reuse .why-wolliq__grid + .why-wolliq__card (§ 08).
   Process (S03) reuses .how-it-works__steps + .how-it-works__step (§ 09).
   Form inputs reuse .contact-form__* field classes (§ 16).
   ============================================================================ */

/* ── S05 Consultation Metrics ──────────────────────────────────────────────── */

.consult-metrics__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .consult-metrics__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.consult-metrics__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  text-align: center;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.consult-metrics__item:hover {
  border-color: var(--secondary-mid);
  box-shadow: var(--shadow-card);
}

.consult-metrics__value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, var(--text-h1));
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--color-secondary);
  margin: 0;
}

.consult-metrics__unit {
  font-size: 0.65em;
  font-weight: var(--fw-semi);
}

.consult-metrics__unit--star {
  color: var(--color-warning);
}

.consult-metrics__label {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ── S07 Booking Form Layout ───────────────────────────────────────────────── */

/* Outer 2-col grid: dark sidebar left, white panel right */
.book-consult__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  .book-consult__inner {
    grid-template-columns: 360px 1fr;
  }
}

/* Dark sidebar ---------------------------------------------------------------- */

.book-consult__sidebar {
  /* .section--dark provides background-color + color */
  padding: var(--sp-8);
  /*
   * Mobile: sidebar appears BELOW the form panel in the visual stack
   * (panel has order:-1 so it renders first on mobile, see below).
   * Round the bottom corners to close the card shape.
   */
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
}

@media (min-width: 1024px) {
  .book-consult__sidebar {
    border-radius: var(--r-2xl) 0 0 var(--r-2xl);
    min-height: 100%;
    position: sticky;
    top: calc(64px + var(--sp-6)); /* header height + breathing room */
    align-self: start;
  }
}

.book-consult__sidebar-heading {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-surface);
  margin-bottom: var(--sp-6);
}

/* "What's included" checklist */
.book-consult__checklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.book-consult__checklist-item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: rgba(255, 255, 255, 0.82);
}

.book-consult__checklist-icon {
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 1px;
}

/* NDA guarantee badge */
.book-consult__guarantee {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding: var(--sp-4);
  background-color: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: var(--r-lg);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: rgba(255, 255, 255, 0.78);
}

.book-consult__guarantee strong {
  display: block;
  color: var(--color-accent);
  margin-bottom: var(--sp-1);
}

.book-consult__guarantee-icon {
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 1px;
}

/* Sidebar testimonial snippet */
.book-consult__testimonial {
  margin: var(--sp-8) 0 0;
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.book-consult__testimonial-quote {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.68);
  font-style: italic;
  margin: 0 0 var(--sp-3);
}

.book-consult__testimonial-cite {
  font-size: var(--text-body-sm);
  font-style: normal;
  color: rgba(255, 255, 255, 0.42);
  display: block;
}

/* Form panel ---------------------------------------------------------------- */

.book-consult__panel {
  padding: var(--sp-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  /*
   * CRO: on mobile, the form panel must appear ABOVE the sidebar so a visitor
   * who taps "Reserve My Free Spot" lands directly at the first form field,
   * not at 500px of sidebar checklist content.
   * order: -1 moves the panel before the sidebar in single-column flow.
   * DOM order remains sidebar-first so screen readers encounter the form in the
   * same sequence as sighted users on desktop (sidebar left, panel right).
   */
  order: -1;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0; /* rounded top, open bottom (abuts sidebar below) */
}

@media (min-width: 1024px) {
  .book-consult__panel {
    order: 0; /* restore DOM order in 2-col grid — sidebar left, panel right */
    border-radius: 0 var(--r-2xl) var(--r-2xl) 0;
    border-left: none;
  }
}

/* Honeypot — visually hidden, removed from tab order via tabindex="-1" */
.book-consult__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Form fieldset groups */
.book-consult__group {
  border: none;
  margin: 0 0 var(--sp-8);
  padding: 0;
}

.book-consult__group:last-of-type {
  margin-bottom: 0;
}

.book-consult__group-title {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

/* Newsletter consent checkbox row */
.book-consult__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

.book-consult__consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--color-secondary);
  cursor: pointer;
}

/* Privacy note below consent */
.book-consult__privacy {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-text-subtle);
}

.book-consult__privacy a {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Submit button + disclaimer row */
.book-consult__submit {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.book-consult__disclaimer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-subtle);
}

/* "What Happens Next" — 3-step mini-sequence above the submit button */
.book-consult__next-steps {
  padding: var(--sp-4) var(--sp-6);
  background-color: var(--secondary-light);
  border: 1px solid var(--secondary-mid);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-6);
}

.book-consult__next-steps-heading {
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-secondary);
  margin: 0 0 var(--sp-3);
}

.book-consult__next-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.book-consult__next-steps-item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-text);
}

.book-consult__next-steps-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-secondary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
  margin-top: 1px;
}

/* Success state — shown after form is submitted successfully */
.book-consult__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-8);
  gap: var(--sp-4);
}

.book-consult__success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--success-light);
  color: var(--color-success);
  flex-shrink: 0;
}

.book-consult__success-heading {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-text);
}

.book-consult__success-body {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  max-width: 400px;
}

/* ============================================================================
   §20 — SERVICE PILLAR PAGE (template-solutions.php)
   .page-breadcrumb  — dark breadcrumb strip above hero (merges visually)
   .service-audience — Who It's For persona cards (S03)
   .service-tools    — Tools We Use pill-badge grid (S05, dark bg)
   ============================================================================ */

/* §20.1 — Page breadcrumb nav strip
   Dark-background strip that sits flush above the hero section.
   CSS ::before separators are screen-reader–silent — no aria needed on items.
   ─────────────────────────────────────────────────────────────────────────── */

.page-breadcrumb {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.page-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.page-breadcrumb__item {
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.55);
}

.page-breadcrumb__item + .page-breadcrumb__item::before {
  content: '/';
  margin: 0 var(--sp-2);
  color: rgba(255, 255, 255, 0.2);
  speak: never;
}

.page-breadcrumb__link {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.page-breadcrumb__link:hover,
.page-breadcrumb__link:focus-visible {
  color: rgba(255, 255, 255, 0.88);
}

.page-breadcrumb__item[aria-current='page'] {
  color: rgba(255, 255, 255, 0.78);
}

/* §20.2 — Who It's For persona cards (S03 — section--light)
   Three-column grid on ≥768px; stacks on mobile.
   ─────────────────────────────────────────────────────────────────────────── */

.service-audience__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-12);
}

@media (min-width: 768px) {
  .service-audience__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-audience__card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.service-audience__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-lg);
  background-color: var(--secondary-light);
  color: var(--color-secondary);
  flex-shrink: 0;
  margin-bottom: var(--sp-1);
}

.service-audience__role {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--color-text);
  margin: 0;
}

.service-audience__company {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-secondary);
  margin: 0;
}

.service-audience__desc {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin: 0;
}

/* §20.3 — Tools We Use pill-badge grid (S05 — section--dark)
   Wrapping flexbox of ghost pill badges on dark background.
   ─────────────────────────────────────────────────────────────────────────── */

.service-tools__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-10);
}

.service-tools__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-5);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-full);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.78);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
  cursor: default;
}

.service-tools__badge:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.95);
}

/* ============================================================================
   §21 — CONTACT PAGE (template-contact.php)
   .contact-header    — compact dark page header (H1 + subtext, no hero CTAs)
   .contact-page      — two-column layout wrapper
   .contact-form      — the form, its fields, and its success/error states
   .contact-sidebar   — info + consultation upsell column
   ============================================================================ */

/* §21.1 — Compact dark page header
   Shorter than the full hero component — keeps the form high in the viewport.
   ─────────────────────────────────────────────────────────────────────────── */

.contact-header {
  padding-block: var(--sp-14) var(--sp-12);
  text-align: center;
}

.contact-header__inner {
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.contact-header__eyebrow {
  display: flex;
  justify-content: center;
}

.contact-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-text-invert);
  margin: 0;
}

.contact-header__sub {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 560px;
}

/* §21.2 — Two-column page layout
   Mobile: single column (form, then sidebar).
   ≥1024px: form takes 1fr, sidebar is fixed 360px.
   ─────────────────────────────────────────────────────────────────────────── */

.contact-page__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-page__inner {
    grid-template-columns: 1fr 360px;
    gap: var(--sp-16);
  }
}

/* §21.3 — Contact form
   Field layout, inputs, select, textarea, checkbox, footer row.
   ─────────────────────────────────────────────────────────────────────────── */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Honeypot — screen readers and humans never interact with this */
.contact-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  pointer-events: none;
}

/* 2-col field grid on ≥540px */
.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

@media (min-width: 540px) {
  .contact-form__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.contact-form__field--full {
  /* Full-width — used for textarea outside a .contact-form__grid */
}

.contact-form__field--checkbox {
  flex-direction: row;
  align-items: flex-start;
}

.contact-form__label {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.contact-form__req {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.contact-form__optional {
  font-size: 11px;
  font-weight: var(--fw-regular, 400);
  color: var(--color-text-muted);
  text-transform: lowercase;
  letter-spacing: 0;
}

/* Shared input, select, textarea base */
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-lg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  appearance: none;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--color-text-muted);
}

.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--secondary-light);
}

/* Select wrapper — positions the custom chevron icon */
.contact-form__select-wrap {
  position: relative;
}

.contact-form__select {
  padding-right: var(--sp-10);
  cursor: pointer;
}

.contact-form__select-icon {
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

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

/* Checkbox */
.contact-form__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
}

.contact-form__checkbox {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-sm);
  appearance: none;
  background-color: var(--color-surface);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.contact-form__checkbox:checked {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 7l3 3 6-6' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
}

.contact-form__checkbox:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.contact-form__checkbox-text {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* Footer row — submit button + privacy note */
.contact-form__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.contact-form__privacy {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.contact-form__privacy-link {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* §21.4 — Success state
   Replaces the form on ?contact=success.
   ─────────────────────────────────────────────────────────────────────────── */

.contact-form__success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-10) var(--sp-8);
  background-color: var(--success-light);
  border: 1px solid var(--color-success);
  border-radius: var(--r-2xl);
}

.contact-form__success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--color-success);
  color: var(--color-surface);
  flex-shrink: 0;
}

.contact-form__success-heading {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--color-text);
  margin: 0;
}

.contact-form__success-body {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 440px;
}

.contact-form__success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
}

/* §21.5 — Error notice
   Shown above the form (form remains visible for retry).
   ─────────────────────────────────────────────────────────────────────────── */

.contact-form__error-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background-color: var(--error-light, #fef2f2);
  border: 1px solid var(--color-error, #ef4444);
  border-radius: var(--r-lg);
  color: var(--color-error, #ef4444);
  margin-bottom: var(--sp-2);
}

.contact-form__error-notice p {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text);
  margin: 0;
}

.contact-form__error-notice a {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* §21.6 — Contact sidebar
   Info card + consultation upsell block.
   Sticky on desktop (top = header height + spacing).
   ─────────────────────────────────────────────────────────────────────────── */

.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

@media (min-width: 1024px) {
  .contact-sidebar {
    position: sticky;
    top: calc(64px + var(--sp-6));
    align-self: start;
  }
}

.contact-sidebar__card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.contact-sidebar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.contact-sidebar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-lg);
  background-color: var(--secondary-light);
  color: var(--color-secondary);
  flex-shrink: 0;
}

.contact-sidebar__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.contact-sidebar__label {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.contact-sidebar__value {
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.contact-sidebar__link {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-sidebar__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Consultation upsell block */
.contact-sidebar__cta {
  background-color: var(--color-primary);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.contact-sidebar__cta-heading {
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-invert);
  margin: 0;
}

.contact-sidebar__cta-text {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Full-width button utility used in sidebar */
.btn--block {
  width: 100%;
  justify-content: center;
}

/* ============================================================================
   §22  SOLUTIONS HUB — /solutions/ (template-solutions-archive.php)

   §22.1  .solutions-hub__grid  — 3-col pillar card grid
   §22.2  .solutions-hub__card  — individual pillar card (position: relative
                                  establishes containing block for §22.6)
   §22.3  .solutions-hub__card-icon
   §22.4  .solutions-hub__card-title
   §22.5  .solutions-hub__card-desc
   §22.6  .solutions-hub__card-link — stretched-link pattern

   Stretched-link pattern:
     The card is position: relative. The <a> inside has no position set,
     so its ::after (position: absolute; inset: 0) is positioned relative
     to the card — covering the full card surface. Clicking anywhere on the
     card triggers the anchor while the DOM has a single focusable element.
     The card uses :has() to surface a card-level focus ring for keyboard
     users. The link retains its own focus ring as a fallback.
   ============================================================================ */

/* §22.1 — Pillar card grid
   1-col on mobile, 3-col at ≥ 768px. Equal-height cards via flex children.
   ─────────────────────────────────────────────────────────────────────────── */

.solutions-hub__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .solutions-hub__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
  }
}

/* §22.2 — Individual pillar card
   ─────────────────────────────────────────────────────────────────────────── */

.solutions-hub__card {
  position: relative;             /* containing block for stretched ::after */
  display: flex;
  flex-direction: column;
  padding: var(--sp-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-2xl);
  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

.solutions-hub__card:hover {
  border-color: var(--secondary-mid);
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}

/* Card-level focus ring when inner link is keyboard-focused.
   Requires :has() support (Chrome 105+, Firefox 121+, Safari 15.4+).
   The link's own default outline acts as a fallback for older browsers. */
.solutions-hub__card:has(.solutions-hub__card-link:focus-visible) {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px var(--secondary-light);
  transform: translateY(-3px);
}

/* §22.3 — Icon container
   56×56 px badge with secondary-light tint, matching .contact-sidebar__icon.
   ─────────────────────────────────────────────────────────────────────────── */

.solutions-hub__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background-color: var(--secondary-light);
  color: var(--color-secondary);
  flex-shrink: 0;
  margin-bottom: var(--sp-5);
}

/* §22.4 — Pillar title (H3)
   ─────────────────────────────────────────────────────────────────────────── */

.solutions-hub__card-title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
  margin-bottom: var(--sp-3);
}

/* §22.5 — Description
   flex: 1 pushes the CTA link to the card bottom for equal-height grids.
   ─────────────────────────────────────────────────────────────────────────── */

.solutions-hub__card-desc {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  flex: 1;
  margin-bottom: var(--sp-6);
}

/* §22.6 — Stretched-link CTA
   The <a> has no position set so its ::after is positioned relative to
   the card (.solutions-hub__card { position: relative }).
   inset: 0 on ::after covers the full card surface.
   The link itself keeps z-index: 1 so its visible text/border sits above
   the overlay; the ::after has z-index: 0 (implicit).
   ─────────────────────────────────────────────────────────────────────────── */

.solutions-hub__card-link {
  align-self: flex-start;
  position: relative;            /* stacks link label above ::after overlay */
  z-index: 1;
}

.solutions-hub__card-link::after {
  content: '';
  position: absolute;            /* relative to .solutions-hub__card */
  inset: 0;
  /* Expand beyond the link's own bounds to cover the full card padding area */
  top: calc(-1 * var(--sp-8));
  right: calc(-1 * var(--sp-8));
  bottom: calc(-1 * var(--sp-8));
  left: calc(-1 * var(--sp-8));
  border-radius: var(--r-2xl);
}

/* Suppress the browser's default focus ring on the link itself —
   the card-level :has() rule above provides the visible indicator.
   The link's own ring remains active as a fallback for older browsers
   that do not support :has(). */
@supports selector(:has(*)) {
  .solutions-hub__card-link:focus-visible {
    outline: none;
  }
}

/* ============================================================================
   §23 — PROCESS STEPS COMPONENT (components/process-steps)

   §23.1  .process-steps--numbered  — forward-compat hook; §09 handles visuals
   §23.2  .process-steps--timeline  — vertical stacked layout, all breakpoints
   §23.3  .process-steps__marker    — numbered circle in timeline variant
   §23.4  .process-steps__body      — content column in timeline variant
   §23.5  .process-steps__title / __desc / __link — typography in timeline variant
   §23.6  icon variant              — planned; see comment block at end of §23

   Numbered variant:
     The component outputs .how-it-works__steps alongside .process-steps--numbered
     so §09 CSS applies unchanged. .process-steps--numbered is a forward-compat
     hook with no visual effect today.

   Timeline variant:
     Two-column grid (48px marker | 1fr body) with a ::after pseudo-element
     connector line running between markers. Constrained to 680px for readability.
     Vertical at every breakpoint — does not reflow to horizontal on desktop.

   Dark-section support:
     Both variants adapt when placed inside .section--dark.
   ============================================================================ */

/* §23.1 — Numbered variant: forward-compatibility hook
   No visual styles — §09 .how-it-works__* governs all rendering.
   This class exists for future per-variant overrides and data-* JS targeting. */
.process-steps--numbered {
  /* intentionally empty */
}

/* ─────────────────────────────────────────────────────────────────────────────
   §23.2 — Timeline variant: list shell
───────────────────────────────────────────────────────────────────────────── */

.process-steps--timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 680px; /* Same as .section__header — keeps reading line comfortable */
}

/* §23.2a — Each step: two-column grid */
.process-steps--timeline .process-steps__step {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--sp-6);
  position: relative;
  padding-bottom: var(--sp-10);
}

.process-steps--timeline .process-steps__step:last-child {
  padding-bottom: 0;
}

/* §23.2b — Vertical connector line between markers
   ::after on each step except the last spans from the base of the marker
   circle (top: 48px) to the bottom of the step's padding area, bridging the
   gap to the next marker cleanly. */
.process-steps--timeline .process-steps__step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 23px;          /* ( 48px marker width / 2 ) - ( 2px line / 2 ) */
  top: 48px;           /* Bottom edge of the 48px marker circle */
  bottom: 0;
  width: 2px;
  background-color: var(--color-border);
  z-index: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   §23.3 — Marker (numbered circle, left column)
───────────────────────────────────────────────────────────────────────────── */

.process-steps--timeline .process-steps__marker {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-secondary);
  color: var(--color-surface);
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1; /* Renders above the ::after connector line */
}

/* SVG icon inside marker — centres a 22×22 icon within the 48px circle */
.process-steps--timeline .process-steps__marker svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   §23.4 — Body (content column, right)
───────────────────────────────────────────────────────────────────────────── */

.process-steps--timeline .process-steps__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-2); /* Optically aligns text cap-height with marker centre */
}

/* ─────────────────────────────────────────────────────────────────────────────
   §23.5 — Typography (title / desc / link)
   Matches §09 how-it-works typography for visual parity between variants.
───────────────────────────────────────────────────────────────────────────── */

.process-steps--timeline .process-steps__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
  margin: 0;
}

.process-steps--timeline .process-steps__desc {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin: 0;
}

.process-steps--timeline .process-steps__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-secondary);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.process-steps--timeline .process-steps__link:hover {
  gap: var(--sp-3);
}

.process-steps--timeline .process-steps__link:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Dark-section adaptations — both variants */
.section--dark .process-steps--timeline .process-steps__step:not(:last-child)::after {
  background-color: rgba(255, 255, 255, 0.15);
}

.section--dark .process-steps--timeline .process-steps__marker {
  /* Subtle white ring separates the marker from dark bg
     (mirrors how-it-works__step-number border: 4px solid var(--color-bg) on light) */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.section--dark .process-steps--timeline .process-steps__title {
  color: var(--color-surface);
}

.section--dark .process-steps--timeline .process-steps__desc {
  color: rgba(255, 255, 255, 0.7);
}

.section--dark .process-steps--timeline .process-steps__link {
  color: var(--secondary-light);
}

/* §23.6 — Icon variant (planned)
   ─────────────────────────────────────────────────────────────────────────────
   When implemented, the icon variant will follow the numbered variant's 3-col
   horizontal grid layout (reusing .how-it-works__steps) but replace the
   numbered circles with SVG icons in accent-coloured square containers.

   Planned class shape:
     .process-steps--icon          — variant modifier on the <ol>
     .process-steps__icon-wrap     — 56×56 container; accent-light bg, accent text
                                     border-radius: var(--r-lg)
     .process-steps__icon-wrap svg — 28×28 icon

   Caller supplies each step's icon as raw SVG via the 'icon' step key.
   The numbered circle (.how-it-works__step-number) is omitted in this variant.
   No CSS is generated here — this comment is a build note for the implementor.
   ─────────────────────────────────────────────────────────────────────────────
*/

/* ============================================================================
   §24 — INLINE CTA COMPONENT (components/inline-cta)

   A boxed, centred conversion panel placed between content sections.
   Not a full-bleed section — visually contained within the .container grid.

   §24.1  .inline-cta            — section shell, reduced padding
   §24.2  .inline-cta__box       — card: border-radius, padding, text-align
   §24.3  .inline-cta__box--light   — white card, border, card shadow
   §24.4  .inline-cta__box--primary — dark navy card, accent ring border
   §24.5  .inline-cta__eyebrow   — wrapper for wolliq_eyebrow() output
   §24.6  .inline-cta__content   — text column: heading + body text
   §24.7  .inline-cta__heading   — responsive heading typography
   §24.8  .inline-cta__text      — body sentence below the heading
   §24.9  .inline-cta__action    — button wrapper

   Eyebrow colour on primary variant:
     .inline-cta__box--primary .eyebrow inherits var(--color-accent),
     matching the .section--dark .eyebrow rule in the global section CSS.
   ============================================================================ */

/* §24.1 — Section shell
   Reduced padding vs .section (48px/80px) keeps visual weight proportional
   to the component's role as an in-flow accent rather than a major section. */
.inline-cta {
  padding-block: var(--sp-12);
}

/* §24.2 — Card box */
.inline-cta__box {
  border-radius: var(--r-2xl);
  padding: var(--sp-10) var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  text-align: center;
}

@media (min-width: 768px) {
  .inline-cta__box {
    padding: var(--sp-12) var(--sp-16);
  }
}

/* §24.3 — Light variant */
.inline-cta__box--light {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

/* §24.4 — Primary (dark navy) variant */
.inline-cta__box--primary {
  background-color: var(--color-primary);
  /* Subtle ring separates card from any dark section that might surround it */
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Eyebrow colour on primary box matches section--dark eyebrow rule */
.inline-cta__box--primary .eyebrow {
  color: var(--color-accent);
}

/* §24.5 — Eyebrow wrapper
   Margin managed by the flex gap on .inline-cta__box.
   No extra spacing needed. */
.inline-cta__eyebrow {
  /* intentionally empty — layout handled by flex gap */
}

/* §24.6 — Content column (heading + body text) */
.inline-cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  max-width: 560px; /* Comfortable reading width for heading + short sentence */
}

/* §24.7 — Heading
   Mobile uses H3 scale to avoid competing with page H1 at small sizes.
   Desktop steps up to H2 scale for impact. */
.inline-cta__heading {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
  margin: 0;
}

@media (min-width: 768px) {
  .inline-cta__heading {
    font-size: clamp(1.5rem, 3vw, var(--text-h2));
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
  }
}

/* Primary variant: heading on dark background */
.inline-cta__box--primary .inline-cta__heading {
  color: var(--color-surface);
}

/* §24.8 — Supporting text */
.inline-cta__text {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin: 0;
}

/* Primary variant: body text on dark background */
.inline-cta__box--primary .inline-cta__text {
  color: rgba(255, 255, 255, 0.72);
}

/* §24.9 — Button wrapper
   flex-shrink: 0 prevents the button compressing on narrower containers. */
.inline-cta__action {
  flex-shrink: 0;
}

/* ============================================================================
   §25 — SERVICE PILLAR PAGE — ADDITIONS (template-solutions.php v1)

   §25.1  .service-outcomes   — S07 Quantified Outcomes stat grid (section--white)
   §25.2  .service-resources  — S11 Related Resources card-link grid (section--white)
   ============================================================================ */

/* §25.1 — Quantified Outcomes stat grid
   ─────────────────────────────────────────────────────────────────────────────
   Light-background complement to the homepage .stats-band (which is dark).
   2-col on mobile, 4-col on ≥768px. Counter.js reads data-counter-to /
   data-counter-suffix to animate the .service-outcomes__digit value on scroll.
   ─────────────────────────────────────────────────────────────────────────────
*/

.service-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-10) var(--sp-6);
  margin-top: var(--sp-14);
}

@media (min-width: 768px) {
  .service-outcomes__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-8);
  }
}

.service-outcomes__stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

/* Animated counter — colour matches .stats-band__number but on a light bg */
.service-outcomes__number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-secondary);
  margin: 0;
  /* Prevent layout shift while counter.js rewrites the text node */
  min-width: 4ch;
}

.service-outcomes__digit {
  /* Isolated so counter.js can target just the numeric value node */
}

.service-outcomes__suffix {
  /* Displayed inline immediately after the digit */
}

.service-outcomes__label {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--fw-semi);
  color: var(--color-text);
  margin: 0;
  max-width: 16ch;
}

.service-outcomes__sub {
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 20ch;
}

/* Separator rule between stat cells on ≥768px */
@media (min-width: 768px) {
  .service-outcomes__stat + .service-outcomes__stat {
    border-left: 1px solid var(--color-border);
    padding-left: var(--sp-8);
  }
}

/* §25.2 — Related Resources card-link grid
   ─────────────────────────────────────────────────────────────────────────────
   1-col mobile → 2-col tablet → 3-col desktop.
   Each card is an <a> so the entire surface is clickable (keyboard + pointer).
   Type label uses the same eyebrow-style treatment as .eyebrow but inline.
   Arrow nudges right on hover to reinforce the link affordance.
   ─────────────────────────────────────────────────────────────────────────────
*/

.service-resources__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-12);
}

@media (min-width: 640px) {
  .service-resources__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .service-resources__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-resources__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: var(--sp-7) var(--sp-6);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
  /* Arrow child transitions independently */
}

.service-resources__card:hover,
.service-resources__card:focus-visible {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
  outline: none;
}

.service-resources__card:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

/* Content type label — eyebrow treatment */
.service-resources__type {
  display: block;
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-secondary);
}

/* Card title */
.service-resources__title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-body);
  font-weight: var(--fw-semi);
  line-height: var(--lh-body);
  color: var(--color-text);
  flex-grow: 1; /* Push arrow to the bottom */
}

/* Optional supporting sentence */
.service-resources__desc {
  display: block;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* Arrow icon at bottom-right of card */
.service-resources__arrow {
  display: flex;
  align-items: center;
  color: var(--color-secondary);
  margin-top: var(--sp-2);
  transition: transform var(--transition-fast);
}

.service-resources__card:hover .service-resources__arrow,
.service-resources__card:focus-visible .service-resources__arrow {
  transform: translateX(4px);
}