@charset "UTF-8";
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--wp--preset--font-family--body);
  font-weight: var(--wp--custom--weight--normal);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text);
  background: var(--wp--preset--color--bg);
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
}

h1 {
  font-size: var(--wp--preset--font-size--hero);
}

h2 {
  font-size: var(--wp--preset--font-size--3-xl);
}

h3 {
  font-size: var(--wp--preset--font-size--2-xl);
}

h4 {
  font-size: var(--wp--preset--font-size--xl);
}

h5 {
  font-size: var(--wp--preset--font-size--lg);
}

h6 {
  font-size: var(--wp--preset--font-size--base);
}

a {
  color: var(--wp--preset--color--accent);
  text-decoration: none;
}
a:hover {
  color: var(--wp--preset--color--accent-hover);
}

.split__text a,
.section-header__text a,
.accordion__text a,
.approach__text a,
.team-featured__bio a,
.testimonial__quote a,
.card__text a,
.bespoke-content a,
.blog-article__body a,
.blog-article__dek a {
  color: var(--wp--preset--color--accent);
  font-weight: var(--wp--custom--weight--semibold);
  text-decoration: none;
  background-color: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
  padding: 0 0.15em;
  border-radius: 2px;
  transition: background-color 200ms ease-out;
}
.split__text a:hover, .split__text a:focus-visible,
.section-header__text a:hover,
.section-header__text a:focus-visible,
.accordion__text a:hover,
.accordion__text a:focus-visible,
.approach__text a:hover,
.approach__text a:focus-visible,
.team-featured__bio a:hover,
.team-featured__bio a:focus-visible,
.testimonial__quote a:hover,
.testimonial__quote a:focus-visible,
.card__text a:hover,
.card__text a:focus-visible,
.bespoke-content a:hover,
.bespoke-content a:focus-visible,
.blog-article__body a:hover,
.blog-article__body a:focus-visible,
.blog-article__dek a:hover,
.blog-article__dek a:focus-visible {
  background-color: color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
  color: var(--wp--preset--color--accent);
}

p,
.wp-block-paragraph {
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
}

figcaption,
.wp-element-caption {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
}

strong {
  font-weight: var(--wp--custom--weight--semibold);
}

small {
  font-size: var(--wp--preset--font-size--sm);
}

/**
 * Component: Motion System
 * File: src/scss/02-base/_motion.scss
 *
 * Universal scroll-reveal animations and hover transitions.
 * All values from --wp--custom--motion--* tokens in theme.json.
 * Fully decoupled from components — any element with .reveal animates.
 *
 * Classes:
 *   .reveal              - Single element fades up on scroll
 *   .reveal--left         - Slides in from the left
 *   .reveal--right        - Slides in from the right
 *   .reveal--scale        - Scales up from scale-from token
 *   .reveal--none         - Opacity only, no transform
 *   .reveal-group         - Parent container for staggered children
 *   .reveal-group__item   - Staggered child element
 *   .is-visible           - Triggered state (added by JS observer)
 *   .page-loaded          - Added to body after DOMContentLoaded
 *
 * Tokens used:
 *   --wp--custom--motion--duration-*
 *   --wp--custom--motion--ease-*
 *   --wp--custom--motion--distance-*
 *   --wp--custom--motion--stagger-step
 *   --wp--custom--motion--scale-from
 *
 * Accessibility: All motion respects prefers-reduced-motion: reduce
 *
 * Created: 2026-03-18
 * Playwright: tests/components/motion.spec.js
 */
.reveal,
.reveal-group__item {
  opacity: 0;
  transform: translateY(var(--wp--custom--motion--distance-md));
  transition: opacity var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--ease-decelerate), transform var(--wp--custom--motion--duration-slow) var(--wp--custom--motion--ease-out);
}
.reveal.is-visible,
.reveal-group__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--left {
  transform: translateX(calc(-1 * var(--wp--custom--motion--distance-lg)));
}
.reveal--left.is-visible {
  transform: translateX(0);
}

.reveal--right {
  transform: translateX(var(--wp--custom--motion--distance-lg));
}
.reveal--right.is-visible {
  transform: translateX(0);
}

.reveal--scale {
  transform: scale(var(--wp--custom--motion--scale-from));
}
.reveal--scale.is-visible {
  transform: scale(1);
}

.reveal--none {
  transform: none;
}
.reveal--none.is-visible {
  transform: none;
}

.reveal-group__item:nth-child(1) {
  transition-delay: calc(0 * var(--wp--custom--motion--stagger-step));
}
.reveal-group__item:nth-child(2) {
  transition-delay: calc(1 * var(--wp--custom--motion--stagger-step));
}
.reveal-group__item:nth-child(3) {
  transition-delay: calc(2 * var(--wp--custom--motion--stagger-step));
}
.reveal-group__item:nth-child(4) {
  transition-delay: calc(3 * var(--wp--custom--motion--stagger-step));
}
.reveal-group__item:nth-child(5) {
  transition-delay: calc(4 * var(--wp--custom--motion--stagger-step));
}
.reveal-group__item:nth-child(6) {
  transition-delay: calc(5 * var(--wp--custom--motion--stagger-step));
}
.reveal-group__item:nth-child(7) {
  transition-delay: calc(6 * var(--wp--custom--motion--stagger-step));
}
.reveal-group__item:nth-child(8) {
  transition-delay: calc(7 * var(--wp--custom--motion--stagger-step));
}
.reveal-group__item:nth-child(9) {
  transition-delay: calc(8 * var(--wp--custom--motion--stagger-step));
}
.reveal-group__item:nth-child(10) {
  transition-delay: calc(9 * var(--wp--custom--motion--stagger-step));
}
.reveal-group__item:nth-child(11) {
  transition-delay: calc(10 * var(--wp--custom--motion--stagger-step));
}
.reveal-group__item:nth-child(12) {
  transition-delay: calc(11 * var(--wp--custom--motion--stagger-step));
}

.hero__eyebrow,
.hero__title,
.hero__subtitle,
.hero__actions,
.hero__proof,
.hero-split__eyebrow,
.hero-split__title,
.hero-split__text,
.hero-split__actions,
.page-hero__eyebrow,
.page-hero__title,
.page-hero__text,
.page-hero__actions,
.page-hero__proof,
.page-hero__stat-bar,
.page-hero__visual {
  opacity: 0;
  transform: translateY(var(--wp--custom--motion--distance-md));
  transition: opacity var(--wp--custom--motion--duration-dramatic) var(--wp--custom--motion--ease-decelerate), transform var(--wp--custom--motion--duration-dramatic) var(--wp--custom--motion--ease-out);
}

.page-loaded .hero__eyebrow,
.page-loaded .hero-split__eyebrow,
.page-loaded .page-hero__eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 100ms;
}
.page-loaded .hero__title,
.page-loaded .hero-split__title,
.page-loaded .page-hero__title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 200ms;
}
.page-loaded .hero__subtitle,
.page-loaded .hero-split__text,
.page-loaded .page-hero__text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 350ms;
}
.page-loaded .hero__actions,
.page-loaded .hero-split__actions,
.page-loaded .page-hero__actions {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 500ms;
}
.page-loaded .hero__proof,
.page-loaded .page-hero__proof,
.page-loaded .page-hero__stat-bar {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 650ms;
}
.page-loaded .page-hero__visual {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 400ms;
}

@media (max-width: 768px) {
  :root {
    --wp--custom--motion--distance-sm: 4px;
    --wp--custom--motion--distance-md: 10px;
    --wp--custom--motion--distance-lg: 16px;
    --wp--custom--motion--distance-xl: 24px;
    --wp--custom--motion--duration-dramatic: 600ms;
    --wp--custom--motion--stagger-step: 40ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-group__item,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--none {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
    opacity: 0;
  }
  .reveal.is-visible,
  .reveal-group__item.is-visible,
  .reveal--left.is-visible,
  .reveal--right.is-visible,
  .reveal--scale.is-visible,
  .reveal--none.is-visible {
    opacity: 1;
  }
  .hero__eyebrow, .hero__title, .hero__subtitle,
  .hero__actions, .hero__proof,
  .hero-split__eyebrow, .hero-split__title,
  .hero-split__text, .hero-split__actions,
  .page-hero__eyebrow, .page-hero__title, .page-hero__text,
  .page-hero__actions, .page-hero__proof, .page-hero__stat-bar,
  .page-hero__visual,
  .hero-ill {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
.container {
  width: 100%;
  max-width: var(--wp--custom--container--max);
  margin: 0 auto;
  padding: 0 var(--wp--custom--container--padding);
}

.container--narrow {
  max-width: var(--wp--custom--container--narrow);
}

.section {
  padding: var(--wp--preset--spacing--section) 0;
  overflow: hidden;
}

.section--alt,
.section--surface-alt {
  background: var(--wp--preset--color--surface-alt);
}

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

.grid {
  display: grid;
  gap: var(--wp--preset--spacing--lg);
}

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

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

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--wp--custom--nav--height);
  background: var(--wp--custom--nav--bg);
  backdrop-filter: blur(var(--wp--custom--nav--blur));
  -webkit-backdrop-filter: blur(var(--wp--custom--nav--blur));
  border-bottom: 1.5px solid var(--wp--custom--nav--border);
  display: flex;
  align-items: center;
}

.nav__inner {
  width: 100%;
  max-width: var(--wp--custom--container--max);
  margin: 0 auto;
  padding: 0 var(--wp--custom--container--padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.nav__logo {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
  letter-spacing: var(--wp--custom--tracking--tight);
  line-height: 1;
}
.nav__logo span {
  color: var(--wp--preset--color--accent);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--lg);
}
@media (max-width: 900px) {
  .nav__links {
    display: none;
  }
}
.nav.is-condensed .nav__links {
  display: none;
}

.nav__link {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--text-secondary);
  transition: color var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: var(--wp--preset--color--accent);
  transition: width var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.nav__link:hover {
  color: var(--wp--preset--color--text);
}
.nav__link:hover::after {
  width: 100%;
}
.nav__link--active {
  color: var(--wp--preset--color--text);
}
.nav__link--active::after {
  width: 100%;
}

.nav__cta {
  margin-left: var(--wp--preset--spacing--sm);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--xs);
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--semibold);
  line-height: 1;
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xl);
  border-radius: var(--wp--custom--btn--radius);
  border: var(--wp--custom--btn--border-width) solid transparent;
  cursor: pointer;
  transition: background var(--wp--custom--duration--fast) var(--wp--custom--ease-out), border-color var(--wp--custom--duration--fast) var(--wp--custom--ease-out), color var(--wp--custom--duration--fast) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration--fast) var(--wp--custom--ease-out), transform var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
  white-space: nowrap;
}
.btn:hover {
  transform: var(--wp--custom--hover--lift-sm);
}
.btn:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.btn.btn--primary {
  background: var(--wp--custom--gradient--accent);
  color: var(--wp--preset--color--accent-text);
  border-color: transparent;
}
.btn.btn--primary:hover {
  background: var(--wp--custom--gradient--accent-hover);
  color: var(--wp--preset--color--accent-text);
  border-color: transparent;
  box-shadow: var(--wp--custom--glow--accent-sm);
}

.btn.btn--secondary {
  background: transparent;
  color: var(--wp--preset--color--text);
  border-color: var(--wp--preset--color--border);
}
.btn.btn--secondary:hover {
  border-color: var(--wp--preset--color--text);
  color: var(--wp--preset--color--text);
  background: var(--wp--preset--color--surface-alt);
}

.btn.btn--ghost {
  background: transparent;
  color: var(--wp--preset--color--accent);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.btn.btn--ghost:hover {
  color: var(--wp--preset--color--accent-hover);
  background: transparent;
  transform: none;
}
.btn.btn--ghost .btn__arrow {
  transition: transform var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}
.btn.btn--ghost:hover .btn__arrow {
  transform: translateX(3px);
}

.btn--lg {
  font-size: var(--wp--preset--font-size--base);
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
  border-radius: var(--wp--custom--btn--radius-lg);
}

.btn--sm {
  font-size: var(--wp--preset--font-size--xs);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
}

.btn--full {
  width: 100%;
}

.hero {
  padding-top: calc(var(--wp--custom--nav--height) + var(--wp--preset--spacing--section));
  padding-bottom: var(--wp--preset--spacing--section);
  background: var(--wp--custom--gradient--hero);
  position: relative;
}

.hero__inner {
  max-width: var(--wp--custom--container--max);
  margin: 0 auto;
  padding: 0 var(--wp--custom--container--padding);
}

.hero__eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: var(--wp--preset--spacing--md);
}

.hero__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--hero);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  max-width: 18ch;
  margin-bottom: var(--wp--preset--spacing--lg);
}

.hero__subtitle {
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text-secondary);
  max-width: 52ch;
  margin-bottom: var(--wp--preset--spacing--xl);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  flex-wrap: wrap;
  margin-bottom: var(--wp--preset--spacing--2-xl);
}

.hero__proof {
  margin-top: var(--wp--preset--spacing--3-xl);
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2-xl);
  flex-wrap: wrap;
}

.hero__proof-item {
  display: flex;
  flex-direction: column;
  position: relative;
}
.hero__proof-item:not(:last-child)::after {
  content: "";
  display: var(--wp--custom--stat--divider-display);
  position: absolute;
  right: calc(var(--wp--preset--spacing--2-xl) / -2);
  top: 10%;
  height: 80%;
  width: 0;
  border-right: var(--wp--custom--stat--divider-width) var(--wp--custom--stat--divider-style) var(--wp--custom--stat--divider-color);
}

.hero__proof-number {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--custom--stat--number-color);
  line-height: var(--wp--custom--leading--tight);
}

.hero__proof-label {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  margin-top: var(--wp--preset--spacing--2-xs);
}

.hero--centered {
  text-align: center;
}
.hero--centered .hero__title {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.hero--centered .hero__subtitle {
  margin-left: auto;
  margin-right: auto;
}
.hero--centered .hero__actions {
  justify-content: center;
}

.hero__logos {
  margin-top: var(--wp--preset--spacing--3-xl);
  padding-top: var(--wp--preset--spacing--2-xl);
  border-top: 1px solid var(--wp--preset--color--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--2-xl);
  flex-wrap: wrap;
}

.hero__logos-label {
  width: 100%;
  text-align: center;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--medium);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  margin-bottom: var(--wp--preset--spacing--2-xs);
}

.hero__logo-item {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--weight--bold);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text-muted);
  opacity: 0.5;
}

.hero-split {
  padding-top: calc(var(--wp--custom--nav--height) + var(--wp--preset--spacing--section));
  padding-bottom: var(--wp--preset--spacing--section);
  position: relative;
}

.hero-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--3-xl);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-split__grid {
    grid-template-columns: 1fr;
  }
}

.hero-split__eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: var(--wp--preset--spacing--md);
}

.hero-split__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--hero);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--md);
}

.hero-split__text {
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
  margin-bottom: var(--wp--preset--spacing--xl);
}

.hero-split__actions {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  flex-wrap: wrap;
}

.hero-split__video {
  position: relative;
  aspect-ratio: var(--img-ratio, 16/10);
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--wp--preset--color--accent), var(--wp--preset--color--accent-hover));
  box-shadow: var(--wp--custom--shadow--lg);
  cursor: pointer;
}

.hero-split__media {
  width: 100%;
  height: 100%;
  object-fit: var(--img-fit, cover);
}

.hero-split__video-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--sm);
}

.hero-split__video-play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  transition: transform var(--wp--custom--duration--fast);
}
.hero-split__video-play-btn svg {
  width: 24px;
  height: 24px;
  fill: var(--wp--preset--color--accent);
  margin-left: 2px;
}

.hero-split__video:hover .hero-split__video-play-btn {
  transform: scale(1.08);
}

.hero-split__video-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--medium);
}

.hero-split__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--img-ratio);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--3-xl);
  align-items: center;
}
.split:has(.split__visual:empty), .split:has(.split__visual:not(:has(*))) {
  grid-template-columns: 1fr;
}
.split:has(.split__visual:empty) .split__visual, .split:has(.split__visual:not(:has(*))) .split__visual {
  display: none;
}
@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--xl);
  }
}

.split--reverse {
  direction: rtl;
}
.split--reverse > * {
  direction: ltr;
}
@media (max-width: 900px) {
  .split--reverse {
    direction: ltr;
  }
}

.split__eyebrow {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: var(--wp--preset--spacing--md);
}

.split__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--lg);
}

.split__text {
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
  margin-bottom: var(--wp--preset--spacing--lg);
}

.split__visual {
  background: var(--wp--preset--color--surface-alt);
  border-radius: var(--wp--custom--stock-img--radius);
  aspect-ratio: var(--img-ratio, 4/3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wp--preset--color--border-light);
  overflow: hidden;
  position: relative;
}

.split__visual--scroll {
  max-height: 500px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  aspect-ratio: unset;
  display: block;
  padding: var(--wp--preset--spacing--md);
  scrollbar-width: none;
}
.split__visual--scroll::-webkit-scrollbar {
  display: none;
}
.split__visual--scroll > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .split__visual--scroll {
    max-height: none;
    overflow-y: visible;
    scroll-snap-type: none;
    overscroll-behavior-y: auto;
  }
}

.split__media {
  width: 100%;
  height: 100%;
  object-fit: var(--img-fit, cover);
  filter: var(--wp--custom--stock-img--filter);
}

.split__visual:has(.split__media)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to left, color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent), transparent 60%);
}
.split--reverse .split__visual:has(.split__media)::after {
  background: linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent), transparent 60%);
}
@media (max-width: 900px) {
  .split__visual:has(.split__media)::after {
    display: none;
  }
}

.split__visual--illustration {
  position: relative;
  min-height: 400px;
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  background: var(--wp--preset--color--bg);
}

.split__visual-label {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
  font-style: italic;
}

.split__visual:has(.showcase) {
  overflow: visible;
  aspect-ratio: unset;
  background: transparent;
  border: none;
}

@media (max-width: 768px) {
  .split__visual:has(.showcase) {
    display: none;
  }
}
.split__list {
  margin-bottom: var(--wp--preset--spacing--lg);
  padding-left: 1.25em;
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text-secondary);
  list-style: disc outside;
}
.split__list li {
  margin-bottom: var(--wp--preset--spacing--xs);
}

.section-header {
  text-align: center;
  max-width: var(--wp--custom--container--narrow);
  margin: 0 auto var(--wp--preset--spacing--2-xl);
}

.section-header--left {
  text-align: left;
  margin-left: 0;
}

.section-header__eyebrow {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: var(--wp--preset--spacing--sm);
}

.section-header__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--md);
}

.section-header__title::after {
  content: "";
  display: var(--wp--custom--section-header--underline-display);
  width: var(--wp--custom--section-header--underline-width);
  height: var(--wp--custom--section-header--underline-height);
  background: var(--wp--custom--section-header--underline-color);
  margin: var(--wp--custom--section-header--underline-offset) auto 0;
}

.section-header--left .section-header__title::after {
  margin-left: 0;
  margin-right: auto;
}

.section-header__text {
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--wp--preset--spacing--lg);
}

.card-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .card-grid--3 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--wp--preset--color--surface);
  border: var(--wp--custom--card-ui--border-width) var(--wp--custom--card-ui--border-style) var(--wp--preset--color--border-light);
  border-left: var(--wp--custom--card-ui--border-left-width) solid var(--wp--custom--card-ui--border-left-color);
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--custom--card-ui--padding);
  box-shadow: var(--wp--custom--card-ui--shadow-rest);
  transition: box-shadow var(--wp--custom--duration--normal) var(--wp--custom--ease-out), border-color var(--wp--custom--duration--normal) var(--wp--custom--ease-out), transform var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
  display: flex;
  flex-direction: column;
}
.card:hover {
  box-shadow: var(--wp--custom--card-ui--hover-shadow);
  border-color: var(--wp--custom--card-ui--hover-border-color);
  transform: var(--wp--custom--hover--lift);
}

.card__icon {
  background: var(--wp--preset--color--accent-light);
  border-radius: var(--wp--custom--card-ui--icon-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--wp--preset--spacing--lg);
  color: var(--wp--preset--color--accent);
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  padding: 0;
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
.card__icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}

.card__eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--accent);
  margin-bottom: var(--wp--preset--spacing--md);
  line-height: 1;
}

.card__number {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--accent);
  line-height: 1;
  margin-bottom: var(--wp--preset--spacing--md);
  opacity: 0.3;
}

.card--with-image {
  padding: 0;
  overflow: hidden;
}
.card--with-image .card__title,
.card--with-image .card__text,
.card--with-image .card__link {
  padding-left: var(--wp--custom--card-ui--padding);
  padding-right: var(--wp--custom--card-ui--padding);
}
.card--with-image .card__title {
  padding-top: var(--wp--preset--spacing--lg);
  min-height: 0;
}
.card--with-image .card__link {
  padding-bottom: var(--wp--preset--spacing--lg);
}

.card__image {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  margin-bottom: var(--wp--preset--spacing--md);
  border-radius: 0;
}
.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--wp--custom--stock-img--filter);
}
.card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent), transparent 60%);
}

.card__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--snug);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--sm);
  min-height: 3.9em;
}

.card__text {
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
}

.card--center {
  text-align: center;
}

.card__meta {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--accent);
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--md);
  transition: gap var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}
.card__link:hover {
  gap: var(--wp--preset--spacing--sm);
}

.card--center {
  text-align: center;
}
.card--center .card__icon {
  margin-left: auto;
  margin-right: auto;
}

.stat-row {
  display: flex;
  justify-content: center;
  gap: var(--wp--preset--spacing--3-xl);
  text-align: center;
}
@media (max-width: 900px) {
  .stat-row {
    flex-wrap: wrap;
  }
}
@media (max-width: 600px) {
  .stat-row {
    flex-direction: column;
    align-items: center;
  }
}

.stat {
  position: relative;
}
.stat:not(:last-child)::after {
  content: "";
  display: var(--wp--custom--stat--divider-display);
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 0;
  border-right: var(--wp--custom--stat--divider-width) var(--wp--custom--stat--divider-style) var(--wp--custom--stat--divider-color);
}
@media (max-width: 900px) {
  .stat:nth-child(2n)::after {
    display: none;
  }
}
@media (max-width: 600px) {
  .stat::after {
    display: none;
  }
}

.stat__number {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--custom--stat--number-color);
  line-height: var(--wp--custom--leading--tight);
}

.stat__label {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
  margin-top: var(--wp--preset--spacing--xs);
}

.stat-row--compact {
  gap: var(--wp--preset--spacing--xl);
}
.stat-row--compact .stat__number {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
}
.stat-row--compact .stat__label {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-secondary);
}
.stat-row--compact .stat::after {
  display: none;
}

.process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--lg);
  counter-reset: process-counter;
}
@media (min-width: 901px) {
  .process:has(> :nth-child(4)) {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 900px) {
  .process {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .process {
    grid-template-columns: 1fr;
  }
}

.process__step {
  counter-increment: process-counter;
  position: relative;
  text-align: center;
}
.process__step::before {
  content: counter(process-counter, decimal-leading-zero);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--accent);
  opacity: var(--wp--custom--process-number-opacity);
  line-height: 1;
  display: block;
  margin-bottom: var(--wp--preset--spacing--md);
}

.process__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--sm);
  line-height: var(--wp--custom--leading--snug);
}

.process__text {
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
}

.testimonial {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--preset--spacing--2-xl);
  max-width: var(--wp--custom--container--narrow);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.testimonial::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: none;
}
.split__visual .testimonial::after {
  background: linear-gradient(to left, color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent), transparent 40%);
}
.split--reverse .split__visual .testimonial::after {
  background: linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent), transparent 40%);
}
.card-grid .testimonial:nth-child(odd)::after {
  background: linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent), transparent 40%);
}
.card-grid .testimonial:nth-child(even)::after {
  background: linear-gradient(to left, color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent), transparent 40%);
}
.testimonial > * {
  position: relative;
  z-index: 1;
}

.testimonial__quote {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-style: italic;
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--lg);
}
.testimonial__quote::before {
  content: "“";
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--2-xl);
  line-height: 0;
  vertical-align: -0.2em;
  margin-right: var(--wp--preset--spacing--2-xs);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
}

.testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--wp--custom--radius--full);
  background: var(--wp--preset--color--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--wp--custom--weight--semibold);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--accent);
  overflow: hidden;
  flex-shrink: 0;
}

.testimonial__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--wp--custom--radius--full);
}

.testimonial__name {
  font-weight: var(--wp--custom--weight--semibold);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text);
}

.testimonial__role {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
}

.testimonial--compact {
  padding: var(--wp--preset--spacing--lg);
  max-width: none;
  margin: 0 0 var(--wp--preset--spacing--md) 0;
}
.testimonial--compact .testimonial__quote {
  font-size: var(--wp--preset--font-size--base);
  margin-bottom: var(--wp--preset--spacing--md);
}
.testimonial--compact .testimonial__avatar {
  width: 36px;
  height: 36px;
  font-size: var(--wp--preset--font-size--xs);
}

.cta-banner {
  background: var(--wp--custom--gradient--cta);
  border-radius: var(--wp--custom--cta--radius);
  padding: 5rem 4rem;
  text-align: center;
  color: var(--wp--preset--color--accent-text);
  position: relative;
  overflow: hidden;
}

.cta-banner__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--accent-text);
  margin-bottom: var(--wp--preset--spacing--md);
}

.cta-banner__text {
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--accent-text);
  opacity: var(--wp--custom--cta--text-opacity);
  max-width: var(--wp--custom--cta--text-max-width);
  margin: 0 auto var(--wp--preset--spacing--xl);
  line-height: var(--wp--custom--leading--normal);
}

.cta-banner__actions {
  display: flex;
  gap: var(--wp--preset--spacing--md);
  justify-content: center;
  flex-wrap: wrap;
}

.cta-banner .btn--primary {
  background: var(--wp--custom--cta-btn--bg);
  color: var(--wp--custom--cta-btn--color);
  border-color: transparent;
}
.cta-banner .btn--primary:hover {
  background: var(--wp--custom--cta-btn--hover-bg);
  color: var(--wp--custom--cta-btn--color);
  box-shadow: var(--wp--custom--cta-btn--hover-glow);
}

.cta-banner .btn:focus-visible {
  outline-color: var(--wp--preset--color--accent-text);
}

.cta-banner .btn--secondary {
  color: var(--wp--preset--color--accent-text);
  border-color: var(--wp--custom--cta-btn--secondary-border);
}
.cta-banner .btn--secondary:hover {
  color: var(--wp--preset--color--accent-text);
  border-color: var(--wp--preset--color--accent-text);
  background: var(--wp--custom--cta-btn--secondary-hover-bg);
}

.cta-banner__voice-tag {
  margin-top: var(--wp--preset--spacing--lg);
  margin-bottom: 0;
  font-size: var(--wp--preset--font-size--sm);
  font-style: italic;
  color: var(--wp--preset--color--accent-text);
  opacity: 0.75;
  letter-spacing: 0.01em;
}

/**
 * Component: Team Card
 * BEM Block: .team-card
 * File: src/scss/04-components/_team-card.scss
 *
 * Elements:
 *   .team-card__photo        - Photo placeholder area (4:3 ratio)
 *   .team-card__photo-label  - Placeholder text in photo area
 *   .team-card__body         - Content wrapper below photo
 *   .team-card__name         - Team member name (h3)
 *   .team-card__role         - Job title
 *   .team-card__bio          - Bio paragraph
 *   .team-card__credentials  - Credential badge container
 *   .team-card__credential   - Individual credential badge
 *
 * Modifiers: (none)
 * States: (none)
 *
 * Tokens used:
 *   $color-surface, $color-border-light, $color-accent-light,
 *   $color-accent, $color-text, $color-text-secondary, $color-text-muted,
 *   $font-display, $heading-weight, $weight-medium, $weight-semibold,
 *   $size-lg, $size-xs, $size-sm,
 *   $space-lg, $space-2xs, $space-sm, $space-md, $space-xs,
 *   $radius-lg, $btn-radius, $leading-snug, $leading-normal,
 *   $card-shadow-rest, $card-hover-shadow, $hover-lift
 *
 * Responsive: Layout-agnostic; parent grid controls columns
 * Accessibility: h3 for names, credential badges are semantic spans
 *
 * Created: 2026-03-09
 * Modified: 2026-03-12 — rebuilt for About Page B (photo-label, body wrapper, h3, credentials)
 * Playwright: tests/components/team-card.spec.js
 */
.team-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  box-shadow: var(--wp--custom--card-ui--shadow-rest);
  transition: transform 0.25s, box-shadow 0.25s;
}
.team-card:hover {
  transform: var(--wp--custom--hover--lift);
  box-shadow: var(--wp--custom--card-ui--hover-shadow);
}
.team-card__photo {
  background: var(--wp--preset--color--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 300px;
  aspect-ratio: 1/1;
  margin: var(--wp--preset--spacing--lg) auto 0;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
.team-card__img {
  width: 100%;
  height: 100%;
  object-fit: var(--img-fit, cover);
}
.team-card__photo-label {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
  font-style: italic;
}
.team-card__body {
  padding: var(--wp--preset--spacing--lg);
}
.team-card__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--2-xs);
  line-height: var(--wp--custom--leading--snug);
}
.team-card__role {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--accent);
  margin-bottom: var(--wp--preset--spacing--sm);
}
.team-card__bio {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  margin-bottom: var(--wp--preset--spacing--md);
}
.team-card__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--xs);
}
.team-card__credential {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--btn--radius);
}

.form__group {
  margin-bottom: var(--wp--preset--spacing--lg);
}

.form__label {
  display: block;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--xs);
}

.form__input,
.form__textarea {
  width: 100%;
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text);
  background: var(--wp--preset--color--surface);
  border: 1.5px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  transition: border-color var(--wp--custom--duration--fast) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
  outline: none;
}
.form__input:focus,
.form__textarea:focus {
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px var(--wp--preset--color--accent-light);
}

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

.form__hint {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  margin-top: var(--wp--preset--spacing--xs);
}

.fcfo-brand-preview {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  padding: var(--wp--preset--spacing--md);
  margin-block: var(--wp--preset--spacing--md);
  background: var(--wp--preset--color--surface-alt);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.5;
  color: var(--wp--preset--color--text);
}

.fcfo-brand-preview__label-row {
  margin: 0 0 var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-secondary);
}

.fcfo-brand-preview__hint {
  margin: var(--wp--preset--spacing--xs) 0 0;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  line-height: var(--wp--custom--leading--normal);
}

.fcfo-brand-preview__picker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
}

.fcfo-brand-preview__color-input {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--sm);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  flex: 0 0 auto;
}
.fcfo-brand-preview__color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}
.fcfo-brand-preview__color-input::-webkit-color-swatch {
  border: none;
  border-radius: var(--wp--custom--radius--sm);
}
.fcfo-brand-preview__color-input::-moz-color-swatch {
  border: none;
  border-radius: var(--wp--custom--radius--sm);
}
.fcfo-brand-preview__color-input:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.fcfo-brand-preview__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 0 0 auto;
}

.fcfo-brand-preview__swatch {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--sm);
  cursor: pointer;
  transition: transform var(--wp--custom--duration--fast) var(--wp--custom--ease-out), border-color var(--wp--custom--duration--fast) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}
.fcfo-brand-preview__swatch:hover {
  transform: scale(1.12);
  border-color: var(--wp--preset--color--text);
}
.fcfo-brand-preview__swatch.is-active {
  border-color: var(--wp--preset--color--text);
  box-shadow: 0 0 0 2px var(--wp--preset--color--bg), 0 0 0 4px var(--wp--preset--color--text);
}
.fcfo-brand-preview__swatch:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.fcfo-brand-preview__hex-input {
  flex: 0 0 auto;
  width: 130px;
  padding: 6px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text);
  background: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--sm);
}
.fcfo-brand-preview__hex-input:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--accent);
}

.fcfo-brand-preview__clear {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 6px var(--wp--preset--spacing--sm);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--text-secondary);
  background: transparent;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--sm);
  cursor: pointer;
  transition: border-color var(--wp--custom--duration--fast) var(--wp--custom--ease-out), color var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}
.fcfo-brand-preview__clear:hover {
  border-color: var(--wp--preset--color--text);
  color: var(--wp--preset--color--text);
}
.fcfo-brand-preview__clear:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.fcfo-brand-color-hidden {
  display: none !important;
}

.fcfo-brand-preview__fonts {
  margin-top: var(--wp--preset--spacing--md);
  padding-top: var(--wp--preset--spacing--md);
  border-top: 1px solid var(--wp--preset--color--border-light);
}

.fcfo-brand-preview__font-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--sm);
  margin-top: var(--wp--preset--spacing--sm);
}
@media (min-width: 480px) {
  .fcfo-brand-preview__font-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.fcfo-brand-preview__font-card {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--2-xs);
  padding: var(--wp--preset--spacing--md);
  background: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color var(--wp--custom--duration--fast) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}
.fcfo-brand-preview__font-card:hover {
  border-color: var(--wp--preset--color--accent);
}
.fcfo-brand-preview__font-card.is-active {
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 2px var(--wp--preset--color--accent);
}
.fcfo-brand-preview__font-card:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.fcfo-brand-preview__font-sample-display {
  font-size: 1.25rem;
  font-weight: var(--wp--custom--weight--semibold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--text);
}

.fcfo-brand-preview__font-sample-body {
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
}

.fcfo-brand-preview__font-card-label {
  margin-top: var(--wp--preset--spacing--2-xs);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--medium);
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--text-muted);
  text-transform: uppercase;
}

.fcfo-font-pair-hidden {
  display: none !important;
}

.portal-gate-message {
  margin-block: var(--wp--preset--spacing--md);
  padding: var(--wp--preset--spacing--md);
  border-left: 3px solid var(--wp--preset--color--accent);
  background: var(--wp--preset--color--surface-alt);
  border-radius: 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0;
  color: var(--wp--preset--color--text);
}
.portal-gate-message h3 {
  margin: 0 0 var(--wp--preset--spacing--sm);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
}
.portal-gate-message p {
  margin: 0 0 var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
}
.portal-gate-message p:last-child {
  margin-bottom: 0;
}
.portal-gate-message a {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.portal-gate-message a:hover {
  color: var(--wp--preset--color--accent-hover);
}
.portal-gate-message--soft {
  border-left-color: var(--wp--preset--color--text-muted);
  background: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--preset--color--border);
  border-left-width: 3px;
}

.footer {
  background: var(--wp--custom--gradient--footer);
  color: var(--wp--preset--color--footer-text);
  padding: var(--wp--preset--spacing--3-xl) 0 var(--wp--preset--spacing--xl);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--3-xl);
}
@media (min-width: 901px) {
  .footer__inner {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .footer__inner:has(> :nth-child(4)) {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  .footer__inner:has(> :nth-child(5)) {
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.footer__brand {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--footer-text);
  margin-bottom: var(--wp--preset--spacing--md);
}

.footer__tagline {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--footer-text);
  opacity: var(--wp--custom--footer-opacity--heading);
  max-width: 35ch;
  line-height: var(--wp--custom--leading--normal);
}

.footer__social {
  display: flex;
  gap: var(--wp--preset--spacing--sm);
  margin-top: var(--wp--preset--spacing--sm);
}

.footer__social-link {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--footer-text);
  opacity: var(--wp--custom--footer-opacity--heading);
  text-decoration: none;
  transition: opacity var(--wp--custom--duration--fast);
}
.footer__social-link:hover {
  opacity: 1;
}

.footer__heading {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--footer-text);
  opacity: var(--wp--custom--footer-opacity--heading);
  margin-bottom: var(--wp--preset--spacing--md);
}

.footer__link {
  display: block;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--footer-text);
  opacity: var(--wp--custom--footer-opacity--link);
  padding: var(--wp--preset--spacing--2-xs) 0;
  transition: opacity var(--wp--custom--duration--fast), color var(--wp--custom--duration--fast);
}
.footer__link:hover {
  color: var(--wp--preset--color--footer-link-hover);
  opacity: 1;
}

.footer__address {
  font-size: var(--wp--preset--font-size--sm);
  font-style: normal;
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--footer-text);
  opacity: var(--wp--custom--footer-opacity--link);
  margin-bottom: var(--wp--preset--spacing--md);
  max-width: 28ch;
}

.footer__firm {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--medium);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--footer-text);
  margin: 0 0 var(--wp--preset--spacing--xs) 0;
  max-width: 28ch;
}

.footer__bottom {
  margin-top: var(--wp--preset--spacing--2-xl);
  padding-top: var(--wp--preset--spacing--lg);
  border-top: 1px solid var(--wp--preset--color--footer-rule);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--footer-text);
  opacity: var(--wp--custom--footer-opacity--link);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 600px) {
  .footer__bottom {
    flex-direction: column;
    gap: var(--wp--preset--spacing--md);
    text-align: center;
  }
}

.footer__location {
  white-space: nowrap;
}

.footer__legal {
  display: flex;
  gap: var(--wp--preset--spacing--lg);
}
.footer__legal .footer__link {
  display: inline;
  padding: 0;
}

.page-header {
  padding-top: calc(var(--wp--custom--nav--height) + var(--wp--preset--spacing--3-xl));
  padding-bottom: var(--wp--preset--spacing--3-xl);
  text-align: center;
  background: var(--wp--custom--gradient--page-header);
  border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.page-header__eyebrow {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: var(--wp--preset--spacing--sm);
}

.page-header__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--md);
}

.page-header__text {
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--text-secondary);
  max-width: 55ch;
  margin: 0 auto;
  line-height: var(--wp--custom--leading--normal);
}

.page-header--enhanced .page-header__title {
  font-size: var(--wp--preset--font-size--hero);
}

.page-header__actions {
  display: flex;
  gap: var(--wp--preset--spacing--md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--wp--preset--spacing--xl);
}

.divider {
  border: none;
  border-top: 1px solid var(--wp--preset--color--border-light);
  margin: var(--wp--preset--spacing--xl) 0;
}

.theme-switcher {
  position: fixed;
  bottom: var(--wp--preset--spacing--lg);
  right: var(--wp--preset--spacing--lg);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--wp--preset--spacing--xs);
}

.theme-switcher__bar {
  display: flex;
  gap: var(--wp--preset--spacing--xs);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--full);
  padding: var(--wp--preset--spacing--xs);
  box-shadow: var(--wp--custom--shadow--lg);
  align-items: center;
}

.theme-switcher__btn {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
  border-radius: var(--wp--custom--radius--full);
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--wp--preset--color--text-secondary);
  transition: all var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
  white-space: nowrap;
}
.theme-switcher__btn:hover {
  background: var(--wp--preset--color--surface-alt);
  color: var(--wp--preset--color--text);
}

.theme-switcher__btn--active {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-text);
}

.theme-switcher__customize-toggle {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--medium);
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
  border-radius: var(--wp--custom--radius--full);
  border: 1px solid var(--wp--preset--color--border);
  cursor: pointer;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--text-muted);
  transition: all var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
  margin-left: var(--wp--preset--spacing--2-xs);
}
.theme-switcher__customize-toggle:hover {
  color: var(--wp--preset--color--text);
  border-color: var(--wp--preset--color--accent);
}
.theme-switcher__customize-toggle[aria-expanded=true] {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-text);
  border-color: var(--wp--preset--color--accent);
}

.theme-switcher__panel {
  display: none;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  padding: var(--wp--preset--spacing--md);
  box-shadow: var(--wp--custom--shadow--lg);
  min-width: 280px;
  max-width: 320px;
}
.theme-switcher__panel--open {
  display: block;
}

.theme-switcher__panel-title {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking--wide);
  margin: 0 0 var(--wp--preset--spacing--sm) 0;
  padding-bottom: var(--wp--preset--spacing--xs);
  border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.theme-switcher__panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--xs) 0;
}
.theme-switcher__panel-row + .theme-switcher__panel-row {
  border-top: 1px solid var(--wp--preset--color--border-light);
}

.theme-switcher__panel-label {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--text-secondary);
  white-space: nowrap;
}

.theme-switcher__panel-input {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--sm);
  cursor: pointer;
  background: transparent;
}
.theme-switcher__panel-input::-webkit-color-swatch-wrapper {
  padding: 2px;
}
.theme-switcher__panel-input::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
}

.theme-switcher__panel-select {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--text);
  cursor: pointer;
  max-width: 160px;
}

.theme-switcher__panel-swatches {
  display: flex;
  gap: var(--wp--preset--spacing--2-xs);
  flex-wrap: wrap;
}

.theme-switcher__swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--wp--custom--radius--full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
  padding: 0;
}
.theme-switcher__swatch:hover {
  border-color: var(--wp--preset--color--text-muted);
}
.theme-switcher__swatch--active {
  border-color: var(--wp--preset--color--text);
  box-shadow: 0 0 0 2px var(--wp--preset--color--surface);
}

.theme-switcher__reset-btn {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--medium);
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
  border-radius: var(--wp--custom--radius--sm);
  border: 1px solid var(--wp--preset--color--border);
  cursor: pointer;
  background: transparent;
  color: var(--wp--preset--color--text-muted);
  width: 100%;
  margin-top: var(--wp--preset--spacing--xs);
  transition: all var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}
.theme-switcher__reset-btn:hover {
  background: var(--wp--preset--color--surface-alt);
  color: var(--wp--preset--color--text);
}

.pricing-card {
  background: var(--wp--preset--color--surface);
  border: var(--wp--custom--card-ui--border-width) var(--wp--custom--card-ui--border-style) var(--wp--preset--color--border-light);
  border-left: var(--wp--custom--card-ui--border-left-width) solid var(--wp--custom--card-ui--border-left-color);
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--preset--spacing--2-xl);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--wp--custom--card-ui--shadow-rest);
  transition: box-shadow var(--wp--custom--duration--normal) var(--wp--custom--ease-out), transform var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.pricing-card:hover {
  box-shadow: var(--wp--custom--card-ui--hover-shadow);
  transform: var(--wp--custom--hover--lift);
}

.pricing-card--featured {
  border-top: 3px solid var(--wp--preset--color--accent);
  background: var(--wp--preset--color--accent-light);
  box-shadow: var(--wp--custom--shadow--lg);
}
.pricing-card--featured:hover {
  box-shadow: var(--wp--custom--shadow--lg);
  transform: var(--wp--custom--hover--lift-lg);
}

.pricing-card__badge {
  display: inline-block;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-text);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
  border-radius: var(--wp--custom--radius--full);
  position: absolute;
  top: calc(-1 * var(--wp--preset--spacing--md));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.pricing-card__name {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--snug);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--sm);
}

.pricing-card__price {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: 1;
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--xs);
}

.pricing-card__period {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
  margin-bottom: var(--wp--preset--spacing--lg);
}

.pricing-card__description {
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
  font-style: italic;
  margin-bottom: var(--wp--preset--spacing--lg);
}

.pricing-card__best-for,
.pricing-card__outcome {
  margin-bottom: var(--wp--preset--spacing--lg);
}

.pricing-card__best-for-label,
.pricing-card__what-changes-label,
.pricing-card__outcome-label {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--text-muted);
  margin-bottom: var(--wp--preset--spacing--xs);
}

.pricing-card__best-for-text,
.pricing-card__outcome-text {
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
  margin: 0;
}

.pricing-card__outcome-text {
  min-height: 6em;
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wp--preset--spacing--lg);
  flex: 1;
}

.pricing-card__feature {
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
  padding: var(--wp--preset--spacing--sm) 0 var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xl);
  position: relative;
  border-bottom: 1px solid var(--wp--preset--color--border-light);
}
.pricing-card__feature::before {
  content: "→";
  position: absolute;
  left: 0;
  top: var(--wp--preset--spacing--sm);
  color: var(--wp--preset--color--accent);
  font-weight: var(--wp--custom--weight--bold);
}
.pricing-card__feature:last-child {
  border-bottom: none;
}

.pricing-card__cta {
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--lg);
}

.accordion {
  background: var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
}

.accordion__item {
  border-bottom: 1px solid var(--wp--preset--color--border-light);
}
.accordion__item:last-child {
  border-bottom: none;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--wp--preset--spacing--lg);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
  text-align: left;
  line-height: var(--wp--custom--leading--normal);
  transition: color var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.accordion__trigger:hover {
  color: var(--wp--preset--color--accent);
}
.accordion__trigger:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: -2px;
}

.accordion__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: var(--wp--preset--spacing--md);
  transition: transform var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.accordion__item--open .accordion__icon {
  transform: rotate(180deg);
}

.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.accordion__item--open .accordion__content {
  max-height: 500px;
}

.accordion__text {
  padding: 0 var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text-secondary);
}

.mobile-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--wp--preset--spacing--xs);
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
@media (max-width: 900px) {
  .mobile-nav__toggle {
    display: flex;
  }
}
.nav.is-condensed .mobile-nav__toggle {
  display: flex;
}
.mobile-nav__toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.mobile-nav__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--wp--preset--color--text);
  border-radius: var(--wp--custom--radius--sm);
  transition: transform var(--wp--custom--duration--normal) var(--wp--custom--ease-out), opacity var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.mobile-nav--open .mobile-nav__bar:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.mobile-nav--open .mobile-nav__bar:nth-child(2) {
  opacity: 0;
}
.mobile-nav--open .mobile-nav__bar:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.mobile-nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--wp--custom--duration--normal) var(--wp--custom--ease-out), visibility var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.mobile-nav--open .mobile-nav__overlay, .mobile-nav__overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav__drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1002;
  width: 280px;
  max-width: 80vw;
  background: var(--wp--preset--color--surface);
  padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--xl);
  padding-top: var(--wp--custom--nav--height);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--wp--custom--duration--slow) var(--wp--custom--ease-out), visibility 0s var(--wp--custom--duration--slow);
}
.mobile-nav--open .mobile-nav__drawer, .mobile-nav__drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--wp--custom--duration--slow) var(--wp--custom--ease-out), visibility 0s;
}

.mobile-nav__close {
  position: absolute;
  top: var(--wp--preset--spacing--lg);
  right: var(--wp--preset--spacing--lg);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  background: none;
  border: none;
  color: var(--wp--preset--color--text);
  cursor: pointer;
  padding: 0;
}
.mobile-nav__close:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav__link {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--text-secondary);
  padding: var(--wp--preset--spacing--md) 0;
  text-decoration: none;
  transition: color var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
  position: relative;
}
.mobile-nav__link:hover {
  color: var(--wp--preset--color--accent);
}
.mobile-nav__link--active {
  color: var(--wp--preset--color--text);
}
.mobile-nav__link--active::before {
  content: "";
  position: absolute;
  left: -var(--wp--preset--spacing--sm);
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--wp--preset--color--accent);
  border-radius: 2px;
}

.mobile-nav__cta {
  margin-top: var(--wp--preset--spacing--xl);
}

.blog-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: var(--wp--custom--stock-img--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--wp--preset--spacing--lg);
  transition: box-shadow var(--wp--custom--duration--normal) var(--wp--custom--ease-out), transform var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.blog-card:hover {
  box-shadow: var(--wp--custom--shadow--card);
  transform: var(--wp--custom--hover--lift);
}

.blog-card__image {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
}
.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--wp--custom--stock-img--filter);
  transition: transform var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.blog-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent), transparent 60%);
}
@media (max-width: 600px) {
  .blog-card__image::after {
    display: none;
  }
}
.blog-card:hover .blog-card__image img {
  transform: var(--wp--custom--hover--img-scale);
}

.blog-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg) 0;
}

.blog-card__date {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  line-height: var(--wp--custom--leading--snug);
}

.blog-card__category {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  line-height: var(--wp--custom--leading--snug);
}

.blog-card__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--snug);
  color: var(--wp--preset--color--text);
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg) 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  box-sizing: content-box;
  min-height: calc(3 * var(--wp--custom--leading--snug) * 1em);
}
@media (max-width: 600px) {
  .blog-card__title {
    min-height: 0;
  }
}
.blog-card__title a {
  color: var(--wp--preset--color--text);
  text-decoration: none;
}
.blog-card__title a:hover {
  color: var(--wp--preset--color--accent);
}

.blog-card__excerpt {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text-muted);
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  box-sizing: content-box;
  min-height: calc(2 * var(--wp--custom--leading--relaxed) * 1em);
}
@media (max-width: 600px) {
  .blog-card__excerpt {
    min-height: 0;
  }
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg) 0;
  margin-top: auto;
  text-decoration: none;
  transition: color var(--wp--custom--duration--normal) var(--wp--custom--ease-out), gap var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
  align-self: flex-start;
}
.blog-card__link::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg) translateY(0.06em);
  transition: transform var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.blog-card__link:hover {
  color: var(--wp--preset--color--accent-hover);
  gap: var(--wp--preset--spacing--sm);
}
.blog-card__link:hover::after {
  transform: rotate(45deg) translate(0.1em, -0.04em);
}

.section:has(> .container > .blog-layout) {
  overflow: visible;
}

.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--wp--preset--spacing--3-xl);
  align-items: start;
}
@media (max-width: 900px) {
  .blog-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--2-xl);
  }
}

.blog-layout__main {
  min-width: 0;
}

.blog-layout__aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xl);
  position: sticky;
  top: calc(var(--wp--custom--nav--height) + var(--wp--preset--spacing--lg));
  align-self: start;
}
@media (max-width: 900px) {
  .blog-layout__aside {
    position: static;
    top: auto;
  }
}

.blog-layout__aside-block {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--md);
}

.blog-layout__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xl);
}
.blog-layout__list > li {
  list-style: none;
}

.blog-archive-top {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  gap: var(--wp--preset--spacing--2-xl);
  align-items: start;
  margin-bottom: var(--wp--preset--spacing--2-xl);
}
@media (max-width: 900px) {
  .blog-archive-top {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--lg);
  }
}

.blog-archive-top__intro {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--md);
}

.blog-archive-top__eyebrow {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin: 0;
}

.blog-archive-top__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--hero);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin: 0;
}
@media (max-width: 900px) {
  .blog-archive-top__title {
    font-size: var(--wp--preset--font-size--3-xl);
  }
}

.blog-archive-top__text {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--normal);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
  margin: 0;
  max-width: 60ch;
}

.blog-archive-intro {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--md);
  max-width: 70ch;
  margin-bottom: var(--wp--preset--spacing--2-xl);
}

.blog-archive-intro__eyebrow {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin: 0;
}

.blog-archive-intro__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--hero);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin: 0;
}
@media (max-width: 900px) {
  .blog-archive-intro__title {
    font-size: var(--wp--preset--font-size--3-xl);
  }
}

.blog-archive-intro__text {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--normal);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
  margin: 0;
}

.blog-archive-bio__container {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: var(--wp--preset--spacing--2-xl);
  align-items: start;
}
@media (max-width: 900px) {
  .blog-archive-bio__container {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--lg);
    text-align: left;
  }
}

.blog-archive-bio__photo {
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--wp--preset--color--surface-alt);
}
.blog-archive-bio__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .blog-archive-bio__photo {
    max-width: 180px;
  }
}

.blog-archive-bio__body {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--sm);
}

.blog-archive-bio__eyebrow {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin: 0;
}

.blog-archive-bio__name {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--snug);
  color: var(--wp--preset--color--text);
  margin: 0;
}

.blog-archive-bio__role {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--text-muted);
  margin: 0 0 var(--wp--preset--spacing--xs);
}

.blog-archive-bio__text {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text);
  margin: 0;
  max-width: 65ch;
}
.blog-archive-bio__text p,
.blog-archive-bio__text .wp-block-paragraph {
  margin: 0 0 var(--wp--preset--spacing--sm);
}
.blog-archive-bio__text p:last-child,
.blog-archive-bio__text .wp-block-paragraph:last-child {
  margin-bottom: 0;
}

.blog-archive-bio__learn-more {
  align-self: flex-start;
  margin-top: var(--wp--preset--spacing--sm);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2-xs);
  transition: color var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.blog-archive-bio__learn-more:hover, .blog-archive-bio__learn-more:focus-visible {
  color: var(--wp--preset--color--accent-hover);
}
.blog-archive-bio__learn-more svg {
  width: 1em;
  height: 1em;
}

.blog-archive-bio__photo-stack {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 280px;
}
@media (max-width: 900px) {
  .blog-archive-bio__photo-stack {
    max-width: 220px;
  }
}

.blog-archive-bio__photo--stack-1,
.blog-archive-bio__photo--stack-2 {
  flex: 0 0 60%;
  aspect-ratio: 1/1;
  box-shadow: 0 0 0 var(--wp--custom--byline--avatar-ring-width-bio, 4px) var(--wp--custom--byline--avatar-ring-color, var(--wp--preset--color--surface));
}
@media (max-width: 900px) {
  .blog-archive-bio__photo--stack-1,
  .blog-archive-bio__photo--stack-2 {
    flex-basis: 55%;
  }
}

.blog-archive-bio__photo--stack-1 {
  position: relative;
  z-index: 2;
}

.blog-archive-bio__photo--stack-2 {
  position: relative;
  z-index: 1;
  margin-left: var(--wp--custom--byline--avatar-overlap-bio, -25%);
}

.blog-archive-services__container {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xl);
}

.blog-archive-services__header {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--xs);
  max-width: 60ch;
}

.blog-archive-services__heading {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--snug);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin: 0;
}
@media (max-width: 900px) {
  .blog-archive-services__heading {
    font-size: var(--wp--preset--font-size--2-xl);
  }
}

.blog-archive-services__lede {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text-muted);
  margin: 0;
}

.blog-archive-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--lg);
}
@media (max-width: 900px) {
  .blog-archive-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .blog-archive-services__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.blog-archive-services__card {
  background: var(--wp--preset--color--bg);
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: var(--wp--custom--stock-img--radius);
  padding: var(--wp--preset--spacing--lg);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--sm);
  transition: transform var(--wp--custom--duration--normal) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.blog-archive-services__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--wp--custom--shadow--card);
}

.blog-archive-services__card-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--snug);
  color: var(--wp--preset--color--text);
  margin: 0;
}

.blog-archive-services__card-text {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-archive-services__footer {
  display: flex;
  justify-content: flex-start;
}

.blog-archive-services__cta {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2-xs);
  transition: color var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.blog-archive-services__cta:hover, .blog-archive-services__cta:focus-visible {
  color: var(--wp--preset--color--accent-hover);
}
.blog-archive-services__cta svg {
  width: 1em;
  height: 1em;
}

.blog-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--md);
  padding: var(--wp--preset--spacing--md) 0;
  border-top: 1px solid var(--wp--preset--color--border-light);
  border-bottom: 1px solid var(--wp--preset--color--border-light);
  flex-wrap: wrap;
}

.blog-byline__name-link {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  text-decoration: none;
  color: inherit;
  transition: color var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.blog-byline__name-link:hover .blog-byline__name, .blog-byline__name-link:focus-visible .blog-byline__name {
  color: var(--wp--preset--color--accent);
}
.blog-byline__name-link:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.blog-byline__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--wp--custom--radius--full);
  overflow: hidden;
  background: var(--wp--preset--color--accent-light);
  flex-shrink: 0;
}
.blog-byline__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--wp--custom--stock-img--filter);
}

.blog-byline__avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--accent);
  line-height: 1;
}

.blog-byline__name {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text);
  transition: color var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}

.blog-byline__reading-time {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
}
.blog-byline__reading-time svg {
  width: 14px;
  height: 14px;
  color: var(--wp--preset--color--text-muted);
}

.blog-byline__avatar-stack {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.blog-byline__avatar--stack-1 {
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 var(--wp--custom--byline--avatar-ring-width, 2px) var(--wp--custom--byline--avatar-ring-color, var(--wp--preset--color--surface));
}

.blog-byline__avatar--stack-2 {
  position: relative;
  z-index: 1;
  margin-left: var(--wp--custom--byline--avatar-overlap, -10px);
  box-shadow: 0 0 0 var(--wp--custom--byline--avatar-ring-width, 2px) var(--wp--custom--byline--avatar-ring-color, var(--wp--preset--color--surface));
}

.blog-article {
  max-width: var(--wp--custom--container--narrow);
}

.blog-article__header {
  margin-bottom: var(--wp--preset--spacing--2-xl);
}

.blog-article__eyebrow {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: var(--wp--preset--spacing--md);
}

.blog-article__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--hero);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--lg);
}
@media (max-width: 900px) {
  .blog-article__title {
    font-size: var(--wp--preset--font-size--3-xl);
  }
}

.blog-article__dek {
  font-family: var(--wp--preset--font-family--display);
  font-style: italic;
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--weight--normal);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
  margin: 0 0 var(--wp--preset--spacing--lg);
  max-width: var(--wp--custom--container--narrow);
}

.blog-article__featured {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--wp--custom--stock-img--radius);
  margin: var(--wp--preset--spacing--xl) 0 var(--wp--preset--spacing--2-xl);
  position: relative;
}
.blog-article__featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--wp--custom--stock-img--filter);
}
.blog-article__featured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent), transparent 55%);
}
@media (max-width: 600px) {
  .blog-article__featured::after {
    display: none;
  }
}

.blog-article__body {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text);
}
.blog-article__body p,
.blog-article__body .wp-block-paragraph {
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--lg);
}
.blog-article__body a {
  color: var(--wp--preset--color--accent);
  font-weight: var(--wp--custom--weight--semibold);
}
.blog-article__body h2 {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--snug);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin-top: var(--wp--preset--spacing--2-xl);
  margin-bottom: var(--wp--preset--spacing--md);
}
.blog-article__body h3 {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--snug);
  color: var(--wp--preset--color--text);
  margin-top: var(--wp--preset--spacing--xl);
  margin-bottom: var(--wp--preset--spacing--sm);
}
.blog-article__body ul,
.blog-article__body ol {
  color: var(--wp--preset--color--text);
  margin: 0 0 var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg);
  padding-left: var(--wp--preset--spacing--md);
}
.blog-article__body ul li,
.blog-article__body ol li {
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--sm);
  line-height: var(--wp--custom--leading--normal);
}
.blog-article__body ul {
  list-style: disc;
}
.blog-article__body ol {
  list-style: decimal;
}
.blog-article__body figure {
  margin: var(--wp--preset--spacing--2-xl) 0;
}
.blog-article__body figcaption {
  color: var(--wp--preset--color--text-muted);
}

.blog-article__body .is-style-agency-pull-quote {
  margin: var(--wp--preset--spacing--2-xl) 0;
  padding: var(--wp--preset--spacing--md) 0 var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
  border-left: 2px solid var(--wp--preset--color--accent);
}
.blog-article__body .is-style-agency-pull-quote p,
.blog-article__body .is-style-agency-pull-quote .wp-block-paragraph {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--normal);
  font-style: italic;
  line-height: var(--wp--custom--leading--snug);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin: 0;
}
.blog-article__body .is-style-agency-pull-quote cite {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--xs);
  font-style: normal;
  font-weight: var(--wp--custom--weight--semibold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
}
@media (max-width: 600px) {
  .blog-article__body .is-style-agency-pull-quote {
    padding-left: var(--wp--preset--spacing--lg);
  }
}

.blog-article__body .blog-article__aside,
.blog-article__body .is-style-agency-article-aside {
  margin: var(--wp--preset--spacing--xl) 0;
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
  background: var(--wp--preset--color--surface-alt);
  border-left: 3px solid var(--wp--preset--color--accent);
  border-radius: 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0;
}
.blog-article__body .blog-article__aside p,
.blog-article__body .blog-article__aside .wp-block-paragraph,
.blog-article__body .is-style-agency-article-aside p,
.blog-article__body .is-style-agency-article-aside .wp-block-paragraph {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--normal);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text);
  margin: 0 0 var(--wp--preset--spacing--sm) 0;
}
.blog-article__body .blog-article__aside p:last-child,
.blog-article__body .is-style-agency-article-aside p:last-child {
  margin-bottom: 0;
}
.blog-article__body .blog-article__aside h3, .blog-article__body .blog-article__aside h4, .blog-article__body .blog-article__aside h5,
.blog-article__body .is-style-agency-article-aside h3,
.blog-article__body .is-style-agency-article-aside h4,
.blog-article__body .is-style-agency-article-aside h5 {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  margin: 0 0 var(--wp--preset--spacing--sm) 0;
}
.blog-article__body .blog-article__aside a,
.blog-article__body .is-style-agency-article-aside a {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.blog-article__body .blog-article__aside a:hover,
.blog-article__body .is-style-agency-article-aside a:hover {
  text-decoration-thickness: 2px;
}
.blog-article__body .blog-article__aside ul, .blog-article__body .blog-article__aside ol,
.blog-article__body .is-style-agency-article-aside ul,
.blog-article__body .is-style-agency-article-aside ol {
  margin: 0 0 var(--wp--preset--spacing--sm) 0;
  padding-left: var(--wp--preset--spacing--lg);
}
.blog-article__body .blog-article__aside ul li, .blog-article__body .blog-article__aside ol li,
.blog-article__body .is-style-agency-article-aside ul li,
.blog-article__body .is-style-agency-article-aside ol li {
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--xs);
}
@media (max-width: 600px) {
  .blog-article__body .blog-article__aside,
  .blog-article__body .is-style-agency-article-aside {
    padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
    margin: var(--wp--preset--spacing--lg) 0;
  }
}

.blog-article__footer {
  margin-top: var(--wp--preset--spacing--3-xl);
  padding-top: var(--wp--preset--spacing--lg);
  border-top: 1px solid var(--wp--preset--color--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--md);
}

.blog-article__footer-date {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
}

.blog-article__copy-link {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--full);
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text);
  cursor: pointer;
  transition: background var(--wp--custom--duration--normal) var(--wp--custom--ease-out), border-color var(--wp--custom--duration--normal) var(--wp--custom--ease-out), color var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.blog-article__copy-link svg {
  width: 14px;
  height: 14px;
  color: var(--wp--preset--color--accent);
}
.blog-article__copy-link:hover {
  background: var(--wp--preset--color--accent-light);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--text);
}
.blog-article__copy-link:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.blog-related {
  padding-top: var(--wp--preset--spacing--2-xl);
  border-top: 1px solid var(--wp--preset--color--border-light);
}

.blog-related__heading {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  margin-bottom: var(--wp--preset--spacing--lg);
}

.blog-related__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--lg);
  align-items: stretch;
}
.blog-related__grid > li {
  list-style: none;
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px) {
  .blog-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .blog-related__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.blog-related__grid .blog-card {
  width: 100%;
  flex: 1;
}

.blog-related__grid .blog-card__title {
  font-size: var(--wp--preset--font-size--lg);
  -webkit-line-clamp: 4;
  line-clamp: 4;
  min-height: calc(4 * var(--wp--custom--leading--snug) * 1em);
}

.blog-related__grid .blog-card__link {
  margin-top: auto;
}

.latest-posts {
  padding-block: var(--wp--preset--spacing--3-xl);
  background: var(--wp--preset--color--bg);
}
.latest-posts__container {
  max-width: var(--wp--custom--container--max);
  margin-inline: auto;
  padding-inline: var(--wp--custom--container--padding);
}
.latest-posts__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--md);
  margin-bottom: var(--wp--preset--spacing--2-xl);
}
@media (max-width: 600px) {
  .latest-posts__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--xs);
  }
}
.latest-posts__heading {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--snug);
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--text);
  margin: 0;
}
.latest-posts__see-all {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  transition: color var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
  white-space: nowrap;
}
.latest-posts__see-all::after {
  content: " →";
  transition: transform var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
  display: inline-block;
}
.latest-posts__see-all:hover, .latest-posts__see-all:focus-visible {
  color: var(--wp--preset--color--accent-hover);
}
.latest-posts__see-all:hover::after, .latest-posts__see-all:focus-visible::after {
  transform: translateX(2px);
}
.latest-posts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--lg);
  align-items: stretch;
}
@media (max-width: 900px) {
  .latest-posts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .latest-posts__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fcfo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--sm);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: var(--wp--custom--stock-img--radius);
  padding: var(--wp--preset--spacing--lg);
  box-shadow: var(--wp--custom--shadow--card);
}

.fcfo-card__photo {
  width: 72px;
  height: 72px;
  border-radius: var(--wp--custom--radius--full);
  overflow: hidden;
  background: var(--wp--preset--color--accent-light);
  flex-shrink: 0;
  margin-bottom: var(--wp--preset--spacing--xs);
}
.fcfo-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--wp--custom--stock-img--filter);
}

.fcfo-card__photo-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--accent);
  line-height: 1;
  letter-spacing: var(--wp--custom--tracking--tight);
}

.fcfo-card__photo-stack {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--wp--preset--spacing--xs);
}

.fcfo-card--partners .fcfo-card__photo--stack-1,
.fcfo-card--partners .fcfo-card__photo--stack-2 {
  width: 72px;
  height: 72px;
  margin-bottom: 0;
  box-shadow: 0 0 0 var(--wp--custom--byline--avatar-ring-width-bio, 4px) var(--wp--custom--byline--avatar-ring-color, var(--wp--preset--color--surface));
}

.fcfo-card--partners .fcfo-card__photo--stack-1 {
  position: relative;
  z-index: 2;
}

.fcfo-card--partners .fcfo-card__photo--stack-2 {
  position: relative;
  z-index: 1;
  margin-left: -22px;
}

.fcfo-card__name {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin: 0;
}

.fcfo-card__role {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin: 0 0 var(--wp--preset--spacing--xs);
}

.fcfo-card__text {
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text-secondary);
  margin: 0 0 var(--wp--preset--spacing--md);
}

.fcfo-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  font-family: var(--wp--preset--font-family--ui);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  padding: var(--wp--preset--spacing--xs) 0;
  transition: color var(--wp--custom--duration--normal) var(--wp--custom--ease-out), gap var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.fcfo-card__cta:hover {
  color: var(--wp--preset--color--accent-hover);
  gap: var(--wp--preset--spacing--sm);
}
.fcfo-card__cta:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}
.fcfo-card__cta svg {
  width: 16px;
  height: 16px;
}

.fluentform .ff-el-group {
  margin-bottom: var(--wp--preset--spacing--lg);
}

.fluentform .ff-el-input--label label {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--xs);
}

.fluentform input[type=text],
.fluentform input[type=email],
.fluentform input[type=tel],
.fluentform input[type=url],
.fluentform input[type=number],
.fluentform select,
.fluentform textarea {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text);
  background: var(--wp--preset--color--surface);
  border: 1.5px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  transition: border-color var(--wp--custom--duration--fast) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}
.fluentform input[type=text]:focus,
.fluentform input[type=email]:focus,
.fluentform input[type=tel]:focus,
.fluentform input[type=url]:focus,
.fluentform input[type=number]:focus,
.fluentform select:focus,
.fluentform textarea:focus {
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px var(--wp--preset--color--accent-light);
  outline: none;
}

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

.fluentform .ff-el-form-check label {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-secondary);
}

.fluentform .ff-el-help-message {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  margin-top: var(--wp--preset--spacing--xs);
}

.form-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--xl);
  align-items: start;
}
@media (max-width: 768px) {
  .form-split {
    grid-template-columns: 1fr;
  }
}

.form-split__copy {
  padding-top: var(--wp--preset--spacing--sm);
}

.form-split__heading {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--2-xl);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--md);
  line-height: var(--wp--custom--leading--snug);
}

.form-split__text {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  margin-bottom: var(--wp--preset--spacing--xl);
}

.form-split__cta {
  display: inline-block;
  margin-bottom: var(--wp--preset--spacing--md);
}

.form-split__divider {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-secondary);
  margin-bottom: var(--wp--preset--spacing--lg);
  font-style: italic;
}

.form-split__trust {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--md);
}

.form-split__trust-item {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
}

.form-split__trust-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--wp--custom--radius--full);
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.form-split__form {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--preset--spacing--lg);
  box-shadow: var(--wp--custom--shadow--sm);
}

.form-split__form .frm-fluent-form {
  max-width: 100%;
}

.fluentform .ff-btn-submit,
.fluentform .ff-btn-submit:not(.ff_btn_no_style) {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--bold);
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
  border-radius: var(--wp--custom--btn--radius);
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-text);
  border: none;
  cursor: pointer;
  width: 100%;
  transition: background var(--wp--custom--duration--fast) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:not(.ff_btn_no_style):hover {
  background: var(--wp--preset--color--accent-hover);
  box-shadow: var(--wp--custom--shadow--md);
}
.fluentform .ff-btn-submit:focus-visible,
.fluentform .ff-btn-submit:not(.ff_btn_no_style):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.fluentform .ff-step-header {
  margin-bottom: var(--wp--preset--spacing--xl);
}

.fluentform .ff-step-titles {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wp--preset--spacing--lg);
  counter-reset: step-counter;
  gap: var(--wp--preset--spacing--xs);
}
.fluentform .ff-step-titles::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  left: 1.5rem;
  right: 1.5rem;
  height: 2px;
  background: var(--wp--preset--color--border);
  z-index: 0;
}
.fluentform .ff-step-titles li {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  counter-increment: step-counter;
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm) !important;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--text-muted);
  background: var(--wp--preset--color--surface);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}
.fluentform .ff-step-titles li::before {
  content: counter(step-counter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--wp--preset--color--surface);
  border: 2px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--text-muted);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  line-height: 1;
  flex: 0 0 auto;
  transition: background var(--wp--custom--duration--fast) var(--wp--custom--ease-out), border-color var(--wp--custom--duration--fast) var(--wp--custom--ease-out), color var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}
.fluentform .ff-step-titles li::after {
  display: none !important;
  content: none !important;
}
.fluentform .ff-step-titles li.ff_active, .fluentform .ff-step-titles li.active {
  color: var(--wp--preset--color--accent);
  font-weight: var(--wp--custom--weight--semibold);
}
.fluentform .ff-step-titles li.ff_active::before, .fluentform .ff-step-titles li.active::before {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-text);
}
.fluentform .ff-step-titles li.ff_completed {
  color: var(--wp--preset--color--text-secondary);
}
.fluentform .ff-step-titles li.ff_completed::before {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-text);
}

.fluentform .step-nav {
  margin-top: var(--wp--preset--spacing--xl);
  padding-top: var(--wp--preset--spacing--lg);
  border-top: 1px solid var(--wp--preset--color--border);
  overflow: hidden;
}

.fluentform .ff-btn.ff-btn-next.ff-btn-secondary {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--bold);
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
  border-radius: var(--wp--custom--btn--radius);
  background: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--accent-text) !important;
  border: none;
  cursor: pointer;
  transition: background var(--wp--custom--duration--fast) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}
.fluentform .ff-btn.ff-btn-next.ff-btn-secondary:hover {
  background: var(--wp--preset--color--accent-hover) !important;
  box-shadow: var(--wp--custom--shadow--md);
}

.fluentform .ff-btn.ff-btn-prev.ff-btn-secondary {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--semibold);
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
  border-radius: var(--wp--custom--btn--radius);
  background: transparent !important;
  color: var(--wp--preset--color--text-secondary) !important;
  border: 1.5px solid var(--wp--preset--color--border) !important;
  cursor: pointer;
  transition: background var(--wp--custom--duration--fast) var(--wp--custom--ease-out), color var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}
.fluentform .ff-btn.ff-btn-prev.ff-btn-secondary:hover {
  background: var(--wp--preset--color--surface-alt) !important;
  color: var(--wp--preset--color--text) !important;
}

.fluentform .ff-custom_html {
  margin-bottom: var(--wp--preset--spacing--lg);
}
.fluentform .ff-custom_html h2, .fluentform .ff-custom_html h3 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  color: var(--wp--preset--color--text);
  margin: 0 0 var(--wp--preset--spacing--sm);
  line-height: var(--wp--custom--leading--snug);
}
.fluentform .ff-custom_html h2 {
  font-size: var(--wp--preset--font-size--xl);
}
.fluentform .ff-custom_html h3 {
  font-size: var(--wp--preset--font-size--lg);
}
.fluentform .ff-custom_html p {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  margin: 0 0 var(--wp--preset--spacing--sm);
}
.fluentform .ff-custom_html ul {
  padding-left: var(--wp--preset--spacing--lg);
  margin: 0 0 var(--wp--preset--spacing--sm);
}
.fluentform .ff-custom_html li {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-secondary);
  margin-bottom: var(--wp--preset--spacing--2-xs);
}
.fluentform .ff-custom_html a {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
}
.fluentform .ff-custom_html a:hover {
  text-decoration: none;
}

.fluentform .ff-el-group.fcfo-narrow .ff-el-input--content {
  max-width: 180px;
}

.fluentform .ff-el-group.fcfo-medium-narrow .ff-el-input--content {
  max-width: 280px;
}

.fluentform .ff-el-group.fcfo-medium .ff-el-input--content {
  max-width: 420px;
}

.logo-bar {
  padding: var(--wp--preset--spacing--lg) 0;
  border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.logo-bar__label {
  text-align: center;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-secondary);
  margin-bottom: var(--wp--preset--spacing--lg);
}

.logo-bar__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--sm);
  flex-wrap: wrap;
}

.logo-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: var(--wp--custom--radius--full);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
  white-space: nowrap;
}

.logo-bar__icon {
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1;
}

.video-embed {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  background: var(--wp--preset--color--surface-alt);
  border: 1px solid var(--wp--preset--color--border);
  box-shadow: var(--wp--custom--shadow--lg);
  cursor: pointer;
}

.video-embed__poster {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--wp--preset--color--accent) 0%, var(--wp--preset--color--accent-hover) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--sm);
  overflow: hidden;
}

.video-embed__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-embed__play {
  width: 72px;
  height: 72px;
  border-radius: var(--wp--custom--radius--full);
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  transition: transform var(--wp--custom--duration--fast) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}

.video-embed:hover .video-embed__play {
  transform: scale(1.08);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.2);
}

.video-embed__play svg {
  width: 28px;
  height: 28px;
  fill: var(--wp--preset--color--accent);
  margin-left: 3px;
}

.video-embed__label {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--medium);
}

.video-embed__caption {
  text-align: center;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  margin-top: var(--wp--preset--spacing--sm);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/**
 * Component: Page Hero
 * BEM Block: .page-hero
 * File: src/scss/04-components/_page-hero.scss
 *
 * Elements:
 *   .page-hero__grid           - 2-col CSS grid (content + visual)
 *   .page-hero__content        - Left column, flex column
 *   .page-hero__eyebrow        - Uppercase accent label
 *   .page-hero__title          - Hero heading (size-hero)
 *   .page-hero__text           - Supporting paragraph
 *   .page-hero__actions        - Button row
 *   .page-hero__proof          - Proof stats row with border-top
 *   .page-hero__proof-number   - Stat value
 *   .page-hero__proof-label    - Stat label
 *   .page-hero__visual         - Right column photo/placeholder
 *   .page-hero__visual-label   - Placeholder text (italic)
 *   .page-hero__image-band     - Full-width image strip (centered variant)
 *   .page-hero__stat-bar       - Inline stats row (stats variant)
 *   .page-hero__stat           - Individual stat in stat-bar
 *   .page-hero__stat-number    - Stat value in stat-bar
 *   .page-hero__stat-label     - Stat label in stat-bar
 *
 * Modifiers:
 *   .page-hero--centered       - Single column, centered text (Page B)
 *   .page-hero--stats          - Single column with stat bar (Page C)
 *
 * Graceful fallback:
 *   Default variant with no image uploaded: visual column collapses,
 *   content expands full-width. Only shows 2-col grid when media exists.
 *   Uses :has() selector — supported in all modern browsers (Chrome 105+,
 *   Safari 15.4+, Firefox 121+).
 *
 * Tokens used:
 *   $gradient-page-header, $color-border-light, $space-section, $space-3xl,
 *   $space-2xl, $space-xl, $space-lg, $space-md, $space-2xs,
 *   $size-xs, $size-sm, $size-lg, $size-xl, $size-hero, $size-2xl,
 *   $font-display, $weight-semibold, $heading-weight,
 *   $tracking-wide, $tracking-tight, $leading-tight, $leading-snug, $leading-normal,
 *   $color-accent, $color-text, $color-text-secondary, $color-text-muted,
 *   $color-accent-light, $stat-number-color
 *
 * Responsive: 768px breakpoint — single column, visual gets 16:9
 * Accessibility: h1 is the page title, proof stats are semantic divs
 *
 * Created: 2026-03-11
 * Modified: 2026-03-18 — Graceful fallback: default variant collapses to
 *   single-column when no media is uploaded. Visual column hidden via :has().
 * Playwright: tests/components/page-hero.spec.js
 */
.page-hero {
  background: var(--wp--custom--gradient--page-header);
  border-bottom: 1px solid var(--wp--preset--color--border-light);
}
.page-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}
.page-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--wp--preset--spacing--section) 0;
  padding-right: var(--wp--preset--spacing--3-xl);
}
.page-hero__eyebrow {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: var(--wp--preset--spacing--md);
}
.page-hero__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--hero);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--lg);
}
.page-hero__text {
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  margin-bottom: var(--wp--preset--spacing--xl);
  max-width: 520px;
}
.page-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  flex-wrap: wrap;
  margin-bottom: var(--wp--preset--spacing--2-xl);
}
.page-hero__proof {
  display: flex;
  gap: var(--wp--preset--spacing--2-xl);
  padding-top: var(--wp--preset--spacing--xl);
  border-top: 1px solid var(--wp--preset--color--border-light);
}
.page-hero__proof-number {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--xl);
  color: var(--wp--custom--stat--number-color);
  line-height: var(--wp--custom--leading--snug);
}
.page-hero__proof-label {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  margin-top: var(--wp--preset--spacing--2-xs);
}
.page-hero__visual {
  background: var(--wp--preset--color--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  overflow: hidden;
  position: relative;
}
.page-hero__visual:has(.hero-ill) {
  background: transparent;
  overflow: visible;
}
.page-hero__visual:has(.hero-ill) .hero-ill {
  width: 100%;
}
.page-hero__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__visual-label {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
  font-style: italic;
}
.page-hero__image-band {
  width: 100%;
  aspect-ratio: 21/7;
  background: var(--wp--preset--color--accent-light);
  border-bottom: 1px solid var(--wp--preset--color--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.page-hero__image-band-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__stat-bar {
  display: flex;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--lg);
  flex-wrap: wrap;
  padding: var(--wp--preset--spacing--xl) 0;
  border-top: 1px solid var(--wp--preset--color--border-light);
  margin-top: var(--wp--preset--spacing--2-xl);
}
.page-hero__stat {
  text-align: center;
  flex: 1;
  min-width: 100px;
}
.page-hero__stat-number {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--2-xl);
  color: var(--wp--custom--stat--number-color);
  line-height: var(--wp--custom--leading--tight);
}
.page-hero__stat-label {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  margin-top: var(--wp--preset--spacing--2-xs);
}
.page-hero:not(.page-hero--centered):not(.page-hero--stats) .page-hero__grid:not(:has(.page-hero__visual)) {
  grid-template-columns: 1fr;
  min-height: auto;
}
.page-hero:not(.page-hero--centered):not(.page-hero--stats) .page-hero__grid:not(:has(.page-hero__visual)) .page-hero__content {
  padding-right: 0;
}
.page-hero:not(.page-hero--centered):not(.page-hero--stats) .page-hero__grid:not(:has(.page-hero__visual)) .page-hero__text {
  max-width: 640px;
}
.page-hero:not(.page-hero--centered):not(.page-hero--stats) .page-hero__grid:has(.page-hero__visual-label) {
  grid-template-columns: 1fr;
  min-height: auto;
}
.page-hero:not(.page-hero--centered):not(.page-hero--stats) .page-hero__grid:has(.page-hero__visual-label) .page-hero__content {
  padding-right: 0;
}
.page-hero:not(.page-hero--centered):not(.page-hero--stats) .page-hero__grid:has(.page-hero__visual-label) .page-hero__text {
  max-width: 640px;
}
.page-hero:not(.page-hero--centered):not(.page-hero--stats) .page-hero__grid:has(.page-hero__visual-label) .page-hero__visual {
  display: none;
}
.page-hero--centered .page-hero__grid {
  grid-template-columns: 1fr;
  text-align: center;
  min-height: auto;
}
.page-hero--centered .page-hero__content {
  padding-right: 0;
  align-items: center;
  max-width: 740px;
  margin: 0 auto;
}
.page-hero--centered .page-hero__text {
  max-width: 600px;
}
.page-hero--centered .page-hero__actions {
  justify-content: center;
}
.page-hero--stats .page-hero__grid {
  grid-template-columns: 1fr;
  min-height: auto;
}
.page-hero--stats .page-hero__content {
  padding-right: 0;
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .page-hero__grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .page-hero__content {
    padding-right: 0;
  }
  .page-hero__visual {
    aspect-ratio: 16/9;
  }
  .page-hero__proof {
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--lg);
  }
  .page-hero__image-band {
    aspect-ratio: 16/7;
  }
  .page-hero__stat-bar {
    justify-content: center;
  }
  .page-hero--centered .page-hero__content {
    max-width: 100%;
  }
}
/**
 * Component: Mission Statement
 * BEM Block: .mission
 * File: src/scss/04-components/_mission.scss
 *
 * Elements:
 *   .mission__icon   - Decorative quotation mark
 *   .mission__quote  - Main mission statement (display font)
 *   .mission__rule   - Centered horizontal rule
 *   .mission__text   - Supporting body text
 *
 * Tokens used:
 *   $size-3xl, $size-base, $space-lg, $color-accent, $color-text,
 *   $color-text-secondary, $color-highlight, $font-display,
 *   $heading-weight, $leading-snug, $leading-normal, $tracking-tight,
 *   $container-narrow
 *
 * Responsive: fluid, no breakpoints
 * Accessibility: semantic p elements for quote and text
 *
 * Created: 2026-03-11
 * Playwright: tests/components/mission.spec.js
 */
.mission {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.mission__icon {
  font-size: var(--wp--preset--font-size--3-xl);
  color: var(--wp--preset--color--accent);
  opacity: 0.2;
  margin-bottom: var(--wp--preset--spacing--lg);
  line-height: 1;
}
.mission__quote {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--3-xl);
  line-height: var(--wp--custom--leading--snug);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--lg);
}
.mission__rule {
  width: 60px;
  height: 2px;
  background: var(--wp--preset--color--highlight);
  margin: 0 auto var(--wp--preset--spacing--lg);
  border: none;
}
.mission__text {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  max-width: 600px;
  margin: 0 auto;
}

/**
 * Component: Team Featured
 * BEM Block: .team-featured
 * File: src/scss/04-components/_team-featured.scss
 *
 * Elements:
 *   .team-featured__photo        - Photo area (left column, 3:4 aspect)
 *   .team-featured__photo-label  - Placeholder text
 *   .team-featured__body         - Content area (right column)
 *   .team-featured__name         - Person name (h3)
 *   .team-featured__role         - Job title
 *   .team-featured__bio          - Bio paragraph(s)
 *   .team-featured__credentials  - Credential badges container
 *   .team-featured__credential   - Individual badge
 *
 * Tokens used:
 *   $color-surface, $color-accent-light, $color-text, $color-text-secondary,
 *   $color-text-muted, $color-accent, $card-border, $card-border-left-color,
 *   $card-border-left-width, $radius-lg, $shadow-card, $shadow-card-hover,
 *   $hover-lift, $space-xl, $space-md, $space-xs, $space-sm, $space-2xs,
 *   $size-xl, $size-xs, $size-sm, $size-base, $font-display, $heading-weight,
 *   $weight-semibold, $leading-snug, $leading-normal, $btn-radius
 *
 * Responsive: 768px — single column
 * Accessibility: h3 for name, semantic structure
 *
 * Created: 2026-03-11
 * Playwright: tests/components/team-featured.spec.js
 */
.team-featured {
  display: grid;
  grid-template-columns: 300px 1fr;
  background: var(--wp--preset--color--surface);
  border: var(--wp--custom--card-ui--border-width) var(--wp--custom--card-ui--border-style) var(--wp--preset--color--border-light);
  border-left: var(--wp--custom--card-ui--border-left-width) solid var(--wp--custom--card-ui--border-left-color);
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  box-shadow: var(--wp--custom--card-ui--shadow-rest);
  transition: transform 0.25s, box-shadow 0.25s;
}
.team-featured:hover {
  transform: var(--wp--custom--hover--lift);
  box-shadow: var(--wp--custom--card-ui--hover-shadow);
}
.team-featured__photo {
  background: var(--wp--preset--color--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--img-ratio, 3/4);
  position: relative;
  overflow: hidden;
}
.team-featured__img {
  width: 100%;
  height: 100%;
  object-fit: var(--img-fit, cover);
}
.team-featured__photo-label {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
  font-style: italic;
}
.team-featured__body {
  padding: var(--wp--preset--spacing--xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.team-featured__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--xl);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--2-xs);
  line-height: var(--wp--custom--leading--snug);
}
.team-featured__role {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--accent);
  margin-bottom: var(--wp--preset--spacing--md);
}
.team-featured__bio {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  margin-bottom: var(--wp--preset--spacing--md);
}
.team-featured__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--xs);
  margin-top: auto;
}
.team-featured__credential {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--btn--radius);
}

@media (max-width: 768px) {
  .team-featured {
    grid-template-columns: 1fr;
  }
}
/**
 * Component: Team Featured Grid
 * BEM Block: .team-featured-grid
 * File: src/scss/04-components/_team-featured-grid.scss
 *
 * Container for multiple .team-featured cards. Used by the team-featured
 * block's render.php when team_mode is 'team' (supporting members below
 * the lead) or 'partners' (side-by-side equal billing).
 *
 * Elements:
 *   (none — the container holds .team-featured cards as direct children)
 *
 * Modifiers:
 *   .team-featured-grid--partners    - Equal-billing layout for 2–3 partners
 *   .team-featured-grid--supporting  - Supporting team members below the lead
 *   .team-featured-grid--count-2     - 2-member grid
 *   .team-featured-grid--count-3     - 3-member grid
 *
 * States:
 *   (none)
 *
 * Tokens used:
 *   $space-lg, $space-xl — gap and top margin
 *
 * Responsive: at <768px all modifiers collapse to a single column.
 * Accessibility: no interactive elements — children handle their own focus states.
 *
 * Created: 2026-04-14
 * Playwright: tests/pattern-pages-compare.spec.js (about page — team/partners modes)
 */
.team-featured-grid {
  display: grid;
  gap: var(--wp--preset--spacing--lg);
  align-items: stretch;
}
.team-featured-grid .team-featured {
  height: 100%;
}
.team-featured-grid .team-featured__body {
  justify-content: flex-start;
}
.team-featured-grid .team-featured__photo {
  aspect-ratio: 3/4;
}
.team-featured-grid--partners.team-featured-grid--count-2 {
  grid-template-columns: 1fr 1fr;
}
.team-featured-grid--partners.team-featured-grid--count-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.team-featured-grid--partners:not(.team-featured-grid--count-2):not(.team-featured-grid--count-3) {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.team-featured-grid--partners .team-featured {
  grid-template-columns: 240px 1fr;
}
.team-featured-grid--supporting {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: var(--wp--preset--spacing--xl);
}
.team-featured-grid--supporting .team-featured {
  grid-template-columns: 140px 1fr;
}

@media (max-width: 768px) {
  .team-featured-grid {
    grid-template-columns: 1fr !important;
    align-items: stretch;
  }
  .team-featured-grid--supporting .team-featured, .team-featured-grid--partners .team-featured {
    grid-template-columns: 1fr;
  }
}
/**
 * Component: Team Grid
 * BEM Block: .team-grid
 * File: src/scss/04-components/_team-grid.scss
 *
 * Elements: (none — wrapper only)
 *
 * Modifiers:
 *   .team-grid--2  - 2-column grid
 *   .team-grid--3  - 3-column grid
 *
 * Tokens used:
 *   $space-xl
 *
 * Responsive: 768px — single column
 *
 * Created: 2026-03-11
 * Playwright: tests/components/team-grid.spec.js
 */
.team-grid {
  display: grid;
  gap: var(--wp--preset--spacing--xl);
}
.team-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.team-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .team-grid--2,
  .team-grid--3 {
    grid-template-columns: 1fr;
  }
}
/**
 * Component: Value Card
 * BEM Block: .value-card
 * File: src/scss/04-components/_value-card.scss
 *
 * Elements:
 *   .value-card__icon   - Icon circle
 *   .value-card__title  - Card heading (h3)
 *   .value-card__text   - Card body text
 *
 * Tokens used:
 *   $color-surface, $color-border-light, $color-text, $color-text-secondary,
 *   $color-accent, $color-accent-light, $card-border-width, $card-border-style,
 *   $card-border-left-width, $card-border-left-color, $radius-lg,
 *   $card-shadow-rest, $card-hover-shadow, $hover-lift, $card-icon-radius,
 *   $space-xl, $space-lg, $space-xs, $space-2xl, $size-xl, $size-lg, $size-sm,
 *   $font-display, $heading-weight, $weight-bold, $leading-snug, $leading-normal
 *
 * Responsive: layout controlled by parent .values-grid
 *
 * Created: 2026-03-11
 * Playwright: tests/components/value-card.spec.js
 */
.value-card {
  background: var(--wp--preset--color--surface);
  border: var(--wp--custom--card-ui--border-width) var(--wp--custom--card-ui--border-style) var(--wp--preset--color--border-light);
  border-left: var(--wp--custom--card-ui--border-left-width) solid var(--wp--custom--card-ui--border-left-color);
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--preset--spacing--xl);
  box-shadow: var(--wp--custom--card-ui--shadow-rest);
  transition: transform 0.25s, box-shadow 0.25s;
}
.value-card:hover {
  transform: var(--wp--custom--hover--lift);
  box-shadow: var(--wp--custom--card-ui--hover-shadow);
}
.value-card__icon {
  width: var(--wp--preset--spacing--2-xl);
  height: var(--wp--preset--spacing--2-xl);
  border-radius: var(--wp--custom--card-ui--icon-radius);
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--bold);
  margin-bottom: var(--wp--preset--spacing--lg);
}
.value-card__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--xs);
  line-height: var(--wp--custom--leading--snug);
}
.value-card__text {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
}

/**
 * Component: Values Grid
 * BEM Block: .values-grid
 * File: src/scss/04-components/_values-grid.scss
 *
 * Elements: (none — wrapper only)
 *
 * Tokens used:
 *   $space-lg
 *
 * Responsive: 768px — single column
 *
 * Created: 2026-03-11
 * Playwright: tests/components/values-grid.spec.js
 */
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--lg);
}

@media (max-width: 768px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}
/**
 * Component: Culture Grid
 * BEM Block: .culture-grid
 * File: src/scss/04-components/_culture-grid.scss
 *
 * Elements:
 *   .culture-grid__item   - Individual grid cell (photo placeholder)
 *   .culture-grid__label  - Placeholder text
 *
 * Modifiers:
 *   .culture-grid__item--tall  - Spans 2 rows
 *
 * Tokens used:
 *   $space-md, $radius-lg, $color-surface-alt, $color-border-light,
 *   $color-text-muted, $size-sm
 *
 * Responsive: 768px — 2 columns, tall items revert to auto row
 *
 * Created: 2026-03-11
 * Playwright: tests/components/culture-grid.spec.js
 */
.culture-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--md);
}
.culture-grid__item {
  aspect-ratio: 4/3;
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--surface-alt);
  border: 1px solid var(--wp--preset--color--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.culture-grid__item--tall {
  grid-row: span 2;
  aspect-ratio: auto;
}
.culture-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.culture-grid__label {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
  font-style: italic;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .culture-grid {
    grid-template-columns: 1fr 1fr;
  }
  .culture-grid__item--tall {
    grid-row: auto;
    aspect-ratio: 4/3;
  }
}
/**
 * Component: Credential Bar
 * BEM Block: .credential-bar
 * File: src/scss/04-components/_credential-bar.scss
 *
 * Pill-badge credential display — same design language as logo-bar.
 * Each credential is a compact pill with inline checkmark + text.
 *
 * Elements:
 *   .credential-bar__label  - Centered uppercase heading
 *   .credential-bar__items  - Flex row of credential pills
 *   .credential-bar__item   - Individual credential pill (icon + text)
 *   .credential-bar__icon   - Inline checkmark
 *
 * Tokens used:
 *   $space-lg, $space-md, $space-sm, $space-xs, $color-border-light,
 *   $color-text, $color-text-secondary, $color-surface, $color-accent,
 *   $font-body, $size-xs, $size-sm, $weight-semibold, $tracking-wide,
 *   $radius-full, $cred-label-font
 *
 * Responsive: Flex-wrap handles all breakpoints naturally
 *
 * Created: 2026-03-11
 * Modified: 2026-03-22 — Redesigned as pill badges matching logo-bar design language
 * Playwright: tests/components/credential-bar.spec.js
 */
.credential-bar {
  padding: var(--wp--preset--spacing--md) 0;
}
.credential-bar__label {
  text-align: center;
  font-family: var(--wp--custom--credential-bar--label-font);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  margin-bottom: var(--wp--preset--spacing--sm);
}
.credential-bar__items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--md);
  flex-wrap: wrap;
}
.credential-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--lg);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: var(--wp--custom--radius--full);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
  white-space: nowrap;
}
.credential-bar__icon {
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1;
}

/**
 * Component: Local Trust
 * BEM Block: .local-trust
 * File: src/scss/04-components/_local-trust.scss
 *
 * Elements:
 *   .local-trust__heading    - Section heading (h2)
 *   .local-trust__nap        - NAP list (ul)
 *   .local-trust__nap-item   - Individual NAP entry (li)
 *   .local-trust__nap-icon   - Icon circle
 *   .local-trust__nap-text   - NAP text with strong label
 *   .local-trust__gbp        - Google Business Profile link
 *   .local-trust__map        - Map embed placeholder
 *   .local-trust__map-label  - Placeholder text
 *
 * Tokens used:
 *   $space-3xl, $space-lg, $space-md, $space-sm, $space-xl, $space-xs,
 *   $space-2xs, $size-2xl, $size-base, $size-xs, $size-sm, $font-display,
 *   $heading-weight, $weight-semibold, $weight-bold, $leading-snug,
 *   $leading-normal, $tracking-tight, $tracking-wide, $color-text,
 *   $color-text-secondary, $color-text-muted, $color-accent,
 *   $color-accent-light, $color-surface-alt, $color-border-light,
 *   $card-icon-radius, $radius-lg
 *
 * Responsive: 768px — single column
 *
 * Created: 2026-03-11
 * Playwright: tests/components/local-trust.spec.js
 */
.local-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--3-xl);
  align-items: start;
}
.local-trust__heading {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--2-xl);
  line-height: var(--wp--custom--leading--snug);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--lg);
}
.local-trust__nap {
  list-style: none;
  margin-bottom: var(--wp--preset--spacing--lg);
}
.local-trust__nap-item {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  margin-bottom: var(--wp--preset--spacing--md);
}
.local-trust__nap-icon {
  width: var(--wp--preset--spacing--xl);
  height: var(--wp--preset--spacing--xl);
  flex-shrink: 0;
  border-radius: var(--wp--custom--card-ui--icon-radius);
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--bold);
}
.local-trust__nap-text {
  color: var(--wp--preset--color--text-secondary);
}
.local-trust__nap-text strong {
  display: block;
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking--wide);
  margin-bottom: var(--wp--preset--spacing--2-xs);
}
.local-trust__nap-text a {
  color: var(--wp--preset--color--accent);
  font-weight: var(--wp--custom--weight--semibold);
}
.local-trust__gbp {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--accent);
  transition: gap 0.2s;
}
.local-trust__gbp:hover {
  gap: var(--wp--preset--spacing--sm);
}
.local-trust__map {
  aspect-ratio: var(--img-ratio, 4/3);
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--surface-alt);
  border: 1px solid var(--wp--preset--color--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.local-trust__map-img {
  width: 100%;
  height: 100%;
  object-fit: var(--img-fit, cover);
}
.local-trust__map-label {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
  font-style: italic;
}

@media (max-width: 768px) {
  .local-trust {
    grid-template-columns: 1fr;
  }
}
/**
 * Component: Narrative
 * BEM Block: .narrative
 * File: src/scss/04-components/_narrative.scss
 *
 * Elements:
 *   .narrative__text       - Body paragraph
 *   .narrative__dropcap    - First paragraph with CSS initial-cap
 *   .narrative__lead       - Concluding emphasis paragraph
 *
 * Modifiers: (none)
 * States: (none)
 *
 * Tokens used:
 *   $size-lg, $size-xl, $size-hero, $font-display, $heading-weight,
 *   $leading-relaxed, $leading-snug, $color-text, $color-accent,
 *   $color-border-light, $space-lg, $space-xl, $space-sm
 *
 * Responsive: fluid, no breakpoints
 * Accessibility: semantic <p> elements, dropcap is decorative
 *
 * Created: 2026-03-12
 * Playwright: tests/components/narrative.spec.js
 */
.narrative {
  max-width: 740px;
  margin: 0 auto;
}
.narrative__text {
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--lg);
}
.narrative__dropcap::first-letter {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--hero);
  float: left;
  line-height: 0.8;
  padding-right: var(--wp--preset--spacing--sm);
  color: var(--wp--preset--color--accent);
  font-weight: var(--wp--custom--heading-weight);
}
.narrative__lead {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
  line-height: var(--wp--custom--leading--snug);
  margin-top: var(--wp--preset--spacing--xl);
  padding-top: var(--wp--preset--spacing--xl);
  border-top: 1px solid var(--wp--preset--color--border-light);
}

/**
 * Component: Timeline
 * BEM Block: .timeline
 * File: src/scss/04-components/_timeline.scss
 *
 * Elements:
 *   .timeline__item   - Individual milestone entry
 *   .timeline__year   - Year marker
 *   .timeline__title  - Milestone heading
 *   .timeline__text   - Description
 *
 * Modifiers: (none)
 * States: (none)
 *
 * Tokens used:
 *   $space-3xl, $space-2xl, $space-2xs, $space-xs, $space-xl,
 *   $color-border-light, $color-accent, $color-surface-alt, $color-text,
 *   $color-text-secondary, $font-display, $heading-weight,
 *   $size-xl, $size-lg, $size-sm, $leading-snug, $leading-normal,
 *   $radius-full
 *
 * Raw values: 2px (border-left width), 10px (dot size), 5px (dot offset)
 *   — structural/decorative, no matching token in scale
 *
 * Responsive: 768px — reduced left padding
 * Accessibility: semantic h3 titles, visual timeline is decorative
 *
 * Created: 2026-03-12
 * Playwright: tests/components/timeline.spec.js
 */
.timeline {
  position: relative;
  padding-left: var(--wp--preset--spacing--3-xl);
  border-left: 2px solid var(--wp--preset--color--border-light);
}
.timeline__item {
  position: relative;
  padding-bottom: var(--wp--preset--spacing--2-xl);
}
.timeline__item:last-child {
  padding-bottom: 0;
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--wp--preset--spacing--3-xl) - 5px);
  top: var(--wp--preset--spacing--2-xs);
  width: 10px;
  height: 10px;
  border-radius: var(--wp--custom--radius--full);
  background: var(--wp--preset--color--accent);
  border: 2px solid var(--wp--preset--color--surface-alt);
}
.timeline__year {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--xl);
  color: var(--wp--preset--color--accent);
  margin-bottom: var(--wp--preset--spacing--2-xs);
  line-height: var(--wp--custom--leading--snug);
}
.timeline__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--xs);
  line-height: var(--wp--custom--leading--snug);
}
.timeline__text {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
}

@media (max-width: 768px) {
  .timeline {
    padding-left: var(--wp--preset--spacing--xl);
  }
}
/**
 * Component: Founder Quote
 * BEM Block: .founder-quote
 * File: src/scss/04-components/_founder-quote.scss
 *
 * Elements:
 *   .founder-quote__text    - Quote text (large, display font)
 *   .founder-quote__author  - Attribution row (avatar + name/role)
 *   .founder-quote__avatar  - Initials circle
 *   .founder-quote__name    - Author name
 *   .founder-quote__role    - Author title/company
 *
 * Modifiers: (none)
 * States: (none)
 *
 * Tokens used:
 *   $font-display, $heading-weight, $weight-semibold, $weight-bold,
 *   $size-2xl, $size-sm, $size-xs, $size-base,
 *   $leading-snug, $color-text, $color-text-muted,
 *   $color-accent, $color-accent-light,
 *   $space-2xl, $space-md, $radius-full
 *
 * Responsive: fluid, no breakpoints
 * Accessibility: semantic <p> for quote, author info in divs
 *
 * Created: 2026-03-12
 * Playwright: tests/components/founder-quote.spec.js
 */
.founder-quote {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
}
.founder-quote__text {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--leading--normal);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--2-xl);
  font-style: italic;
}
.founder-quote__author {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  justify-content: center;
}
.founder-quote__avatar {
  width: var(--wp--preset--spacing--2-xl);
  height: var(--wp--preset--spacing--2-xl);
  border-radius: var(--wp--custom--radius--full);
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--bold);
  flex-shrink: 0;
  overflow: hidden;
}
.founder-quote__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--wp--custom--radius--full);
}
.founder-quote__name {
  font-weight: var(--wp--custom--weight--semibold);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text);
  text-align: left;
}
.founder-quote__role {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  text-align: left;
}

/**
 * Component: Approach
 * BEM Block: .approach
 * File: src/scss/04-components/_approach.scss
 *
 * Elements:
 *   .approach__step     - Individual methodology step card
 *   .approach__number   - CSS counter-generated step number
 *   .approach__title    - Step heading
 *   .approach__text     - Step description
 *   .approach__detail   - Metric detail line with top border
 *
 * Modifiers: none
 *
 * Tokens used:
 *   $color-surface, $color-accent, $color-text, $color-text-secondary,
 *   $color-text-muted, $color-border-light,
 *   $font-display, $heading-weight, $weight-semibold,
 *   $size-3xl, $size-lg, $size-sm, $size-xs,
 *   $space-xl, $space-lg, $space-md, $space-sm,
 *   $radius-lg, $shadow-card, $card-hover-shadow,
 *   $leading-snug, $leading-normal,
 *   $process-number-opacity, $hover-lift,
 *   $card-border-width, $card-border-style, $card-border-left-width,
 *   $card-border-left-color
 *
 * Responsive: 768px breakpoint — single column
 * Accessibility: h3 headings, counter-generated numbers
 *
 * Created: 2026-03-12
 * Playwright: tests/components/approach.spec.js
 */
.approach {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--lg);
  counter-reset: approach-counter;
}
.approach__step {
  counter-increment: approach-counter;
  background: var(--wp--preset--color--surface);
  border: var(--wp--custom--card-ui--border-width) var(--wp--custom--card-ui--border-style) var(--wp--preset--color--border-light);
  border-left: var(--wp--custom--card-ui--border-left-width) solid var(--wp--custom--card-ui--border-left-color);
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--preset--spacing--xl);
  box-shadow: var(--wp--custom--shadow--card);
  transition: transform 0.25s, box-shadow 0.25s;
}
.approach__step:hover {
  transform: var(--wp--custom--hover--lift);
  box-shadow: var(--wp--custom--card-ui--hover-shadow);
}
.approach__number {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--3-xl);
  color: var(--wp--preset--color--accent);
  opacity: var(--wp--custom--process-number-opacity);
  line-height: 1;
  margin-bottom: var(--wp--preset--spacing--md);
}
.approach__number::before {
  content: counter(approach-counter, decimal-leading-zero);
}
.approach__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--sm);
  line-height: var(--wp--custom--leading--snug);
}
.approach__text {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  margin-bottom: var(--wp--preset--spacing--md);
}
.approach__detail {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  line-height: var(--wp--custom--leading--normal);
  padding-top: var(--wp--preset--spacing--sm);
  border-top: 1px solid var(--wp--preset--color--border-light);
}

@media (max-width: 768px) {
  .approach {
    grid-template-columns: 1fr;
  }
}
/**
 * Component: Team Compact
 * BEM Block: .team-compact
 * File: src/scss/04-components/_team-compact.scss
 *
 * Elements:
 *   .team-compact__header       - Flex row with avatar + name/role
 *   .team-compact__avatar       - Circle initials badge
 *   .team-compact__name         - Team member name
 *   .team-compact__role         - Role/title
 *   .team-compact__body         - Card body with bio, specialties, credentials
 *   .team-compact__bio          - Short biography text
 *   .team-compact__specialties  - Flex container for specialty tags
 *   .team-compact__specialty    - Individual specialty tag
 *   .team-compact__credentials  - Flex container for credential badges
 *   .team-compact__credential   - Individual credential badge
 *
 * Modifiers: none
 *
 * Tokens used:
 *   $color-surface, $color-accent, $color-accent-light, $color-text,
 *   $color-text-secondary, $color-text-muted, $color-surface-alt,
 *   $color-border-light,
 *   $font-display, $heading-weight, $weight-bold, $weight-semibold,
 *   $size-lg, $size-base, $size-sm, $size-xs,
 *   $space-2xl, $space-lg, $space-md, $space-xs, $space-2xs,
 *   $radius-lg, $radius-full, $btn-radius,
 *   $shadow-card, $card-hover-shadow, $hover-lift,
 *   $leading-snug, $leading-normal, $tracking-wide,
 *   $card-border-width, $card-border-style, $card-border-left-width,
 *   $card-border-left-color
 *
 * Responsive: inherits team-grid responsive (single column at 768px)
 * Accessibility: h3 for names, semantic role/bio text
 *
 * Created: 2026-03-12
 * Playwright: tests/components/team-compact.spec.js
 */
.team-compact {
  background: var(--wp--preset--color--surface);
  border: var(--wp--custom--card-ui--border-width) var(--wp--custom--card-ui--border-style) var(--wp--preset--color--border-light);
  border-left: var(--wp--custom--card-ui--border-left-width) solid var(--wp--custom--card-ui--border-left-color);
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow--card);
  transition: transform 0.25s, box-shadow 0.25s;
}
.team-compact:hover {
  transform: var(--wp--custom--hover--lift);
  box-shadow: var(--wp--custom--card-ui--hover-shadow);
}
.team-compact__header {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  padding: var(--wp--preset--spacing--lg);
  border-bottom: 1px solid var(--wp--preset--color--border-light);
}
.team-compact__avatar {
  width: var(--wp--preset--spacing--2-xl);
  height: var(--wp--preset--spacing--2-xl);
  border-radius: var(--wp--custom--radius--full);
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--bold);
  flex-shrink: 0;
  overflow: hidden;
}
.team-compact__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--wp--custom--radius--full);
}
.team-compact__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--text);
  line-height: var(--wp--custom--leading--snug);
}
.team-compact__role {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--accent);
  margin-top: var(--wp--preset--spacing--2-xs);
}
.team-compact__body {
  padding: var(--wp--preset--spacing--lg);
}
.team-compact__bio {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  margin-bottom: var(--wp--preset--spacing--md);
}
.team-compact__specialties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--2-xs);
  margin-bottom: var(--wp--preset--spacing--md);
}
.team-compact__specialty {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking--wide);
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
  background: var(--wp--preset--color--surface-alt);
  color: var(--wp--preset--color--text-secondary);
  border-radius: var(--wp--custom--btn--radius);
}
.team-compact__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--xs);
}
.team-compact__credential {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--btn--radius);
}

/**
 * Component: Values Inline
 * BEM Block: .values-inline
 * File: src/scss/04-components/_values-inline.scss
 *
 * Elements:
 *   .values-inline__item   - Individual value item, centered
 *   .values-inline__icon   - Icon badge (character in circle)
 *   .values-inline__title  - Value heading
 *   .values-inline__text   - Short description
 *
 * Modifiers: none
 *
 * Tokens used:
 *   $color-accent, $color-accent-light, $color-text, $color-text-muted,
 *   $font-display, $heading-weight, $weight-bold,
 *   $size-xl, $size-base, $size-xs,
 *   $space-2xl, $space-lg, $space-md, $space-2xs,
 *   $card-icon-radius, $leading-snug, $leading-normal
 *
 * Responsive: 768px breakpoint — 2 columns
 * Accessibility: h3 headings for each value
 *
 * Created: 2026-03-12
 * Playwright: tests/components/values-inline.spec.js
 */
.values-inline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--lg);
}
.values-inline__item {
  text-align: center;
  padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
}
.values-inline__icon {
  width: var(--wp--preset--spacing--2-xl);
  height: var(--wp--preset--spacing--2-xl);
  border-radius: var(--wp--custom--card-ui--icon-radius);
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--bold);
  margin: 0 auto var(--wp--preset--spacing--md);
}
.values-inline__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--2-xs);
  line-height: var(--wp--custom--leading--snug);
}
.values-inline__text {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  line-height: var(--wp--custom--leading--normal);
}

@media (max-width: 768px) {
  .values-inline {
    grid-template-columns: repeat(2, 1fr);
  }
}
/**
 * Component: Showcase
 * BEM Block: .showcase
 * File: src/scss/04-components/_showcase.scss
 *
 * Floating UI card composition for hero sections and feature areas.
 * All values from WordPress design tokens — zero hardcoded colors,
 * radii, shadows, or font values.
 *
 * Elements:
 *   .showcase__scene          - Positioned container with perspective
 *   .showcase__grid           - SVG background grid pattern
 *   .showcase__glow           - Ambient glow orbs
 *   .showcase__card           - Floating card element
 *
 * Card types (separate BEM blocks inside cards):
 *   .showcase-metric          - Single big number with delta
 *   .showcase-chart           - Line chart with header
 *   .showcase-donut           - Donut allocation chart
 *   .showcase-feed            - Activity/client list
 *   .showcase-stat-grid       - 2x2 metric grid
 *   .showcase-spark           - Mini bar sparkline
 *   .showcase-progress        - Progress/compliance bar
 *   .showcase-risk            - Risk histogram bars
 *   .showcase-table           - Small data table
 *   .showcase-badge           - Status dot + text
 *
 * Modifiers:
 *   .showcase__card--elevated - Full shadow, prominent
 *   .showcase__card--recessed - Subtle shadow, reduced opacity
 *
 * Tokens used:
 *   $color-surface, $color-border, $color-border-light, $color-text,
 *   $color-text-secondary, $color-text-muted, $color-accent,
 *   $color-accent-light, $color-highlight, $color-success, $color-warning,
 *   $color-error, $radius-lg, $radius-md, $radius-sm,
 *   $space-sm, $space-md, $space-xs, $space-2xs,
 *   $size-xs, $size-sm, $size-base, $size-xl,
 *   $font-body, $weight-semibold, $weight-bold, $tracking-wide
 *
 * Responsive: 768px (reflow to grid), 1024px (scale)
 * Created: 2026-03-18
 * Playwright: tests/components/showcase.spec.js
 */
.showcase {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}
.showcase--inline {
  width: 100%;
  overflow: visible;
}
.showcase--inline .showcase__frame,
.showcase--inline .showcase__device,
.showcase--inline .showcase__stack,
.showcase--inline .showcase__reveal {
  max-width: 100%;
}
.showcase--inline .showcase__scene--orbital {
  --showcase-height: 380px;
}
@media (max-width: 768px) {
  .showcase--inline {
    display: none;
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .showcase--inline .showcase__scene {
    transform: scale(0.7);
    transform-origin: top left;
  }
}

.showcase__scene {
  position: relative;
  width: 100%;
  height: var(--showcase-height, 680px);
  perspective: 1400px;
}

.showcase__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.15;
}
.showcase__grid line {
  stroke: var(--wp--preset--color--border-light);
  stroke-width: 0.5;
}

.showcase__glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
  filter: blur(70px);
}
.showcase__glow--accent {
  background: var(--wp--preset--color--accent);
}
.showcase__glow--highlight {
  background: var(--wp--preset--color--highlight);
}

.showcase__card {
  position: absolute;
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  font-family: var(--wp--preset--font-family--body);
  padding: var(--wp--preset--spacing--md);
  box-shadow: var(--wp--custom--shadow--xs);
  transform: rotate(var(--card-rotate, 0deg)) scale(var(--card-scale, 1));
  transition: transform var(--wp--custom--motion--duration-normal, 300ms) var(--wp--custom--motion--ease-spring, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow var(--wp--custom--motion--duration-normal, 300ms) var(--wp--custom--motion--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.showcase__card:hover {
  transform: rotate(var(--card-rotate, 0deg)) scale(var(--card-scale, 1)) translateY(-4px);
  box-shadow: var(--wp--custom--shadow--card-hover);
}
.showcase__card--elevated {
  box-shadow: var(--wp--custom--shadow--card-elevated);
}
.showcase__card--elevated::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
.showcase__card--recessed {
  box-shadow: var(--wp--custom--shadow--card-recessed);
  opacity: 0.55;
  pointer-events: none;
}

.showcase-metric__label,
.showcase-chart__label,
.showcase-donut__label,
.showcase-feed__label,
.showcase-stat-grid__label,
.showcase-spark__label,
.showcase-progress__label,
.showcase-risk__label,
.showcase-table__label {
  display: block;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  margin-bottom: var(--wp--preset--spacing--xs);
}

.showcase-metric__value {
  display: block;
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
  letter-spacing: -0.02em;
}

.showcase-chart__value--success,
.showcase-metric__delta-value {
  color: var(--wp--preset--color--success);
}

.showcase-metric__delta {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2-xs);
  margin-top: var(--wp--preset--spacing--2-xs);
}

.showcase-metric__arrow {
  width: 14px;
  height: 14px;
  color: var(--wp--preset--color--success);
}

.showcase-metric__delta-label {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
}

.showcase-chart__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--wp--preset--spacing--xs);
}

.showcase-chart__value {
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--bold);
}

.showcase-chart__sub {
  display: block;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
}

.showcase-chart__badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: var(--wp--custom--weight--semibold);
  padding: 2px var(--wp--preset--spacing--xs);
  border-radius: var(--wp--custom--btn--radius, var(--wp--custom--radius--md));
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
}

.showcase-chart__canvas-wrap {
  position: relative;
  height: 130px;
}

.showcase-donut__canvas-wrap {
  position: relative;
  height: 100px;
}

.showcase-donut__legend {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--2-xs);
  margin-top: var(--wp--preset--spacing--xs);
}

.showcase-donut__legend-item {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2-xs);
  font-size: 0.625rem;
  color: var(--wp--preset--color--text-muted);
}

.showcase-donut__swatch {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  display: inline-block;
}

.showcase-feed__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--wp--preset--spacing--2-xs) 0;
}
.showcase-feed__item + .showcase-feed__item {
  border-top: 1px solid var(--wp--preset--color--border-light);
}

.showcase-feed__left {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
}

.showcase-feed__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--accent);
  flex-shrink: 0;
}

.showcase-feed__name {
  display: block;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
}

.showcase-feed__meta {
  display: block;
  font-size: 0.625rem;
  color: var(--wp--preset--color--text-muted);
}

.showcase-feed__right {
  text-align: right;
}

.showcase-feed__value {
  display: block;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
}

.showcase-feed__delta {
  font-size: 0.625rem;
  color: var(--wp--preset--color--success);
}

.showcase-stat-grid__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--sm);
}

.showcase-stat-grid__value {
  display: block;
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
}
.showcase-stat-grid__value--success {
  color: var(--wp--preset--color--success);
}

.showcase-stat-grid__item-label {
  display: block;
  font-size: 0.625rem;
  color: var(--wp--preset--color--text-muted);
}

.showcase-stat-grid__delta {
  font-size: 0.625rem;
  color: var(--wp--preset--color--success);
}

.showcase-spark__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
}

.showcase-spark__bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--wp--preset--color--accent);
  opacity: 0.7;
}

.showcase-progress__track {
  height: 4px;
  border-radius: 2px;
  background: var(--wp--preset--color--accent-light);
  overflow: hidden;
  margin-bottom: var(--wp--preset--spacing--2-xs);
}

.showcase-progress__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--wp--preset--color--accent);
}

.showcase-progress__detail {
  font-size: 0.625rem;
  color: var(--wp--preset--color--text-muted);
}

.showcase-risk__row {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  margin-bottom: var(--wp--preset--spacing--2-xs);
}

.showcase-risk__row-label {
  font-size: 0.625rem;
  color: var(--wp--preset--color--text-muted);
  width: 45px;
  flex-shrink: 0;
}

.showcase-risk__track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--wp--preset--color--accent-light);
  overflow: hidden;
}

.showcase-risk__fill {
  height: 100%;
  border-radius: 2px;
}
.showcase-risk__fill--success {
  background: var(--wp--preset--color--success);
}
.showcase-risk__fill--warning {
  background: var(--wp--preset--color--warning);
}
.showcase-risk__fill--error {
  background: var(--wp--preset--color--error);
}

.showcase-risk__pct {
  font-size: 0.625rem;
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text-muted);
  width: 30px;
  text-align: right;
  flex-shrink: 0;
}

.showcase-table__grid {
  width: 100%;
  border-collapse: collapse;
}

.showcase-table__th {
  font-size: 0.625rem;
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text-muted);
  text-align: left;
  padding: var(--wp--preset--spacing--2-xs) 0;
  border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.showcase-table__td {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text);
  padding: var(--wp--preset--spacing--2-xs) 0;
}
.showcase-table__td:last-child {
  text-align: right;
  font-weight: var(--wp--custom--weight--semibold);
}

.showcase-badge {
  text-align: center;
}

.showcase-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 auto var(--wp--preset--spacing--2-xs);
}
.showcase-badge__dot--success {
  background: var(--wp--preset--color--success);
}
.showcase-badge__dot--warning {
  background: var(--wp--preset--color--warning);
}
.showcase-badge__dot--error {
  background: var(--wp--preset--color--error);
}

.showcase-badge__label {
  display: block;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
}

.showcase-badge__count {
  display: block;
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
}

.showcase-badge__detail {
  display: block;
  font-size: 0.625rem;
  color: var(--wp--preset--color--text-muted);
}

.showcase__scene--angled {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: var(--perspective, 1800px);
}

.showcase__frame {
  position: relative;
  width: 92%;
  max-width: 640px;
  transform: rotateY(var(--rotate-y)) rotateX(var(--rotate-x)) rotateZ(var(--rotate-z, 0deg));
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform var(--wp--custom--motion--duration-slow, 500ms) var(--wp--custom--motion--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.showcase__frame:hover {
  transform: rotateY(calc(var(--rotate-y) * 0.85)) rotateX(calc(var(--rotate-x) * 0.85)) rotateZ(calc(var(--rotate-z, 0deg) * 0.5));
}
.showcase__frame::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 5%;
  right: 5%;
  height: 40px;
  background: var(--wp--preset--color--text);
  opacity: 0.06;
  filter: blur(20px);
  border-radius: 50%;
  z-index: -1;
}

.showcase__screen {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow--card);
}

.showcase__chrome {
  display: flex;
  align-items: center;
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
  border-bottom: 1px solid var(--wp--preset--color--border-light);
  background: var(--wp--preset--color--surface-alt);
}

.showcase__chrome-dots {
  display: flex;
  gap: var(--wp--preset--spacing--2-xs);
}
.showcase__chrome-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp--preset--color--border);
}

.showcase__chrome-url {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.625rem;
  color: var(--wp--preset--color--text-muted);
  background: var(--wp--preset--color--surface-alt);
  border: 1px solid var(--wp--preset--color--border-light);
  padding: 2px var(--wp--preset--spacing--xs);
  border-radius: var(--wp--custom--radius--sm);
  flex: 1;
  margin: 0 var(--wp--preset--spacing--sm);
  text-align: center;
}

.showcase__screen-body {
  display: flex;
}

.showcase__sidebar {
  width: 140px;
  border-right: 1px solid var(--wp--preset--color--border-light);
  padding: var(--wp--preset--spacing--sm) 0;
  flex-shrink: 0;
}

.showcase__sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.625rem;
  color: var(--wp--preset--color--text-muted);
}
.showcase__sidebar-item--active {
  color: var(--wp--preset--color--accent);
  background: var(--wp--preset--color--accent-light);
  font-weight: var(--wp--custom--weight--semibold);
}

.showcase__screen-main {
  flex: 1;
  padding: var(--wp--preset--spacing--sm);
}

.showcase__reflect {
  position: absolute;
  bottom: -100px;
  left: 0;
  right: 0;
  height: 100px;
  transform: scaleY(-1);
  opacity: 0.04;
  overflow: hidden;
  border-radius: var(--wp--custom--radius--lg);
  pointer-events: none;
  background: var(--wp--preset--color--surface);
}

.showcase__screen-body .dash-display,
.showcase__screen-main .dash-display,
.showcase__layer-body .dash-display {
  width: 100%;
}

.showcase__screen-body .dash-display__screen,
.showcase__screen-main .dash-display__screen,
.showcase__layer-body .dash-display__screen {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.showcase__section {
  margin-bottom: var(--wp--preset--spacing--xs);
}
.showcase__section--grid-4, .showcase__section--grid-3 {
  display: grid;
  gap: var(--wp--preset--spacing--xs);
}
.showcase__section--grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.showcase__section--grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.showcase__section--grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--wp--preset--spacing--xs);
}
.showcase__section--grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--xs);
}
.showcase__section--grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--wp--preset--spacing--xs);
}

.showcase__section .showcase-metric,
.showcase__section .showcase-chart,
.showcase__section .showcase-donut,
.showcase__section .showcase-feed,
.showcase__section .showcase-stat-grid,
.showcase__section .showcase-spark,
.showcase__section .showcase-progress,
.showcase__section .showcase-risk,
.showcase__section .showcase-table,
.showcase__section .showcase-badge {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: var(--wp--custom--radius--md);
  padding: var(--wp--preset--spacing--xs);
}

.showcase__scene--layered {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: var(--perspective, 2000px);
}

.showcase__stack {
  position: relative;
  z-index: 0;
  width: 88%;
  max-width: 600px;
  transform: rotateY(var(--rotate-y, -8deg)) rotateX(var(--rotate-x, 3deg));
  min-height: 380px;
}

.showcase__layer {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  overflow: hidden;
  transform: translate(var(--layer-tx), var(--layer-ty)) scale(var(--layer-scale, 1));
  opacity: var(--layer-opacity, 1);
  box-shadow: var(--wp--custom--shadow--card);
  transition: transform var(--wp--custom--motion--duration-slow, 500ms) var(--wp--custom--motion--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.showcase__layer-body {
  padding: var(--wp--preset--spacing--sm);
}

.showcase__stack:hover .showcase__layer--2 {
  transform: translate(-35px, -25px) scale(var(--layer-scale, 0.96));
}

.showcase__stack:hover .showcase__layer--1 {
  transform: translate(-65px, -45px) scale(var(--layer-scale, 0.92));
}

.showcase__scene--screen-cards {
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase__screen-cards-wrap {
  position: relative;
  width: 88%;
  max-width: 580px;
}

.showcase__screen-cards-frame {
  position: relative;
  z-index: 2;
}
.showcase__screen-cards-frame .showcase__screen {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  box-shadow: var(--wp--custom--shadow--card-elevated);
}

.showcase__screen-cards-card {
  position: absolute;
  z-index: 4;
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  font-family: var(--wp--preset--font-family--body);
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  box-shadow: var(--wp--custom--shadow--card-elevated);
  transition: translate var(--wp--custom--motion--duration-normal, 300ms) var(--wp--custom--motion--ease-spring, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow var(--wp--custom--motion--duration-normal, 300ms) var(--wp--custom--motion--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.showcase__screen-cards-card:hover {
  translate: 0 -5px;
  box-shadow: var(--wp--custom--shadow--card-hover);
}
.showcase__screen-cards-card {
  opacity: 0;
}
.showcase__screen-cards-card.is-visible {
  animation: screencards-enter 0.7s var(--wp--custom--motion--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) both;
}
@media (prefers-reduced-motion: reduce) {
  .showcase__screen-cards-card {
    animation: none;
    opacity: 1;
  }
}
.showcase__screen-cards-card .showcase-metric__label,
.showcase__screen-cards-card .showcase-chart__label,
.showcase__screen-cards-card .showcase-donut__label,
.showcase__screen-cards-card .showcase-feed__label,
.showcase__screen-cards-card .showcase-stat-grid__label {
  font-size: 0.5625rem;
  margin-bottom: var(--wp--preset--spacing--2-xs);
}
.showcase__screen-cards-card .showcase-metric__value {
  font-size: var(--wp--preset--font-size--base);
}
.showcase__screen-cards-card .showcase-stat-grid__value {
  font-size: var(--wp--preset--font-size--sm);
}
.showcase__screen-cards-card .showcase-feed__item {
  padding: 3px 0;
}
.showcase__screen-cards-card .showcase-donut__canvas-wrap {
  height: 70px;
}
.showcase__screen-cards-card .showcase-chart__canvas-wrap {
  height: 90px;
}

@keyframes screencards-enter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(var(--wp--custom--motion--scale-from, 0.97));
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.showcase__scene--split {
  position: relative;
  overflow: hidden;
}

.showcase__reveal {
  position: relative;
  width: 120%;
}
.showcase__reveal--right {
  margin-left: -10%;
}
.showcase__reveal--left {
  margin-right: -10%;
}
.showcase--inline .showcase__reveal {
  width: 110%;
}
.showcase--inline .showcase__reveal--right {
  margin-left: -5%;
}
.showcase--inline .showcase__reveal--left {
  margin-right: -5%;
}

.showcase__scene--orbital {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase__orbital-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
  background: var(--wp--preset--color--surface);
  border: 2px solid var(--wp--preset--color--accent);
  border-radius: 50%;
  width: 170px;
  height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--wp--custom--shadow--card);
}

.showcase__orbital-center-label {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.625rem;
  color: var(--wp--preset--color--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking--wide);
  font-weight: var(--wp--custom--weight--semibold);
}

.showcase__orbital-center-value {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
  letter-spacing: -0.02em;
}

.showcase__orbital-card {
  position: absolute;
}

.showcase__orbital-connectors {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.showcase__orbital-connectors line {
  stroke: var(--wp--preset--color--border);
  stroke-width: 1;
  opacity: 0.15;
}

@media (max-width: 1024px) and (min-width: 769px) {
  .showcase__scene {
    transform: scale(0.8);
    transform-origin: top center;
  }
  .showcase__card--recessed {
    opacity: 0.35;
  }
}
@media (max-width: 768px) {
  .showcase__scene {
    height: auto;
    perspective: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--sm);
    padding: var(--wp--preset--spacing--md);
  }
  .showcase__grid,
  .showcase__glow {
    display: none;
  }
  .showcase__card {
    position: static !important;
    width: 100% !important;
    transform: none !important;
  }
  .showcase__card--recessed {
    display: none;
  }
}
/**
 * Component: Scroll Animation
 * BEM Block: .scroll-animation
 * File: src/scss/04-components/_scroll-animation.scss
 *
 * Scroll-driven video with animated text overlay. --sa-progress (0→1)
 * drives video playback AND text reveal/animation via CSS calc().
 *
 * Text reveal timeline (mapped to --sa-progress):
 *   0.00–0.35 : video plays, no text
 *   0.35–0.55 : line1 rises and sharpens
 *   0.45–0.65 : line2 rises in (accent, hero scale)
 *   0.50–0.70 : accent rule draws width
 *   0.60–0.80 : tagline fades in
 *   0.80–1.00 : hold — everything visible and crisp
 *
 * Elements:
 *   __sticky          - Viewport-pinned container
 *   __video           - Background video (object-fit contain)
 *   __overlay         - Centered text overlay container
 *   __text-group      - Inner wrapper for text elements
 *   __line1           - First heading line (muted, medium weight)
 *   __rule            - Decorative accent line between headings
 *   __line2           - Second heading line (accent, hero scale, bold)
 *   __tagline         - Supporting tagline below headings
 *
 * Tokens used:
 *   $font-display, $font-body
 *   $size-hero, $size-3xl, $size-lg, $size-base
 *   $weight-bold, $weight-medium, $heading-weight
 *   $leading-tight
 *   $tracking-tight, $tracking-wide
 *   $color-text, $color-text-muted, $color-accent
 *   $space-xs, $space-sm, $space-md
 *
 * Responsive: 375, 768, 1024 breakpoints
 * Accessibility: prefers-reduced-motion shows static end state
 *
 * Created: 2026-03-18
 * Modified: 2026-03-23 — frosted glass parallax text overlay (headingLine1,
 *           headingLine2, tagline), lerp smoothing in view.js, #FFF bg,
 *           colorlevels white-lock in video pipeline, margin-block: 0,
 *           full-height video (no 200px reduction)
 * Playwright: tests/components/scroll-animation.spec.js
 */
.scroll-animation {
  height: var(--scroll-animation-height, 200vh);
  position: relative;
  width: 100%;
}
@media (width < 1024px) {
  .scroll-animation {
    height: 175vh;
  }
}
@media (width < 768px) {
  .scroll-animation {
    height: 150vh;
  }
}
.scroll-animation {
  margin-block: 0;
}
.scroll-animation__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-animation__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}
@media (width < 768px) {
  .scroll-animation__video {
    object-fit: cover;
    width: calc(100% - 1rem);
    margin-inline: 0.5rem;
  }
}
.scroll-animation__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transform: translateY(calc(100% - (100% + 120vh) * clamp(0, (var(--sa-progress) - 0.3) / 0.7, 1)));
}
.scroll-animation__text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
  padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--2-xl);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--custom--shadow--card-elevated);
  opacity: clamp(0, (var(--sa-progress) - 0.3) / 0.15, 1);
}
.scroll-animation__line1 {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: var(--wp--custom--heading-weight);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text);
  transform: translateY(calc(30px * (1 - clamp(0, (var(--sa-progress) - 0.35) / 0.2, 1))));
  opacity: clamp(0, (var(--sa-progress) - 0.35) / 0.15, 1);
}
@media (width < 768px) {
  .scroll-animation__line1 {
    font-size: var(--wp--preset--font-size--base);
  }
}
.scroll-animation__rule {
  display: block;
  width: calc(60px * clamp(0, (var(--sa-progress) - 0.45) / 0.2, 1));
  height: 3px;
  background: var(--wp--preset--color--accent);
  margin: var(--wp--preset--spacing--xs) 0;
  opacity: clamp(0, (var(--sa-progress) - 0.45) / 0.1, 1);
}
.scroll-animation__line2 {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--hero);
  font-weight: var(--wp--custom--heading-weight);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  transform: translateY(calc(40px * (1 - clamp(0, (var(--sa-progress) - 0.4) / 0.2, 1))));
  opacity: clamp(0, (var(--sa-progress) - 0.4) / 0.15, 1);
}
@media (width < 768px) {
  .scroll-animation__line2 {
    font-size: var(--wp--preset--font-size--2-xl);
  }
}
@media (width < 480px) {
  .scroll-animation__line2 {
    font-size: var(--wp--preset--font-size--xl);
  }
}
.scroll-animation__tagline {
  display: block;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--text);
  margin: var(--wp--preset--spacing--xs) 0 0;
  max-width: 45ch;
  line-height: 1.5;
  transform: translateY(calc(20px * (1 - clamp(0, (var(--sa-progress) - 0.45) / 0.1, 1))));
  opacity: clamp(0, (var(--sa-progress) - 0.45) / 0.1, 1);
}
@media (width < 768px) {
  .scroll-animation__tagline {
    font-size: var(--wp--preset--font-size--base);
  }
}
@media (width < 768px) {
  .scroll-animation .scroll-animation__text-group {
    opacity: clamp(0, (var(--sa-progress) - 0.1) / 0.18, 1);
  }
  .scroll-animation .scroll-animation__line1 {
    transform: translateY(calc(30px * (1 - clamp(0, (var(--sa-progress) - 0.15) / 0.35, 1))));
    opacity: clamp(0, (var(--sa-progress) - 0.15) / 0.28, 1);
  }
  .scroll-animation .scroll-animation__rule {
    width: calc(60px * clamp(0, (var(--sa-progress) - 0.35) / 0.4, 1));
    opacity: clamp(0, (var(--sa-progress) - 0.35) / 0.2, 1);
  }
  .scroll-animation .scroll-animation__line2 {
    transform: translateY(calc(40px * (1 - clamp(0, (var(--sa-progress) - 0.28) / 0.4, 1))));
    opacity: clamp(0, (var(--sa-progress) - 0.28) / 0.32, 1);
  }
  .scroll-animation .scroll-animation__tagline {
    transform: translateY(calc(20px * (1 - clamp(0, (var(--sa-progress) - 0.48) / 0.4, 1))));
    opacity: clamp(0, (var(--sa-progress) - 0.48) / 0.4, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-animation {
    height: auto;
  }
  .scroll-animation .scroll-animation__sticky {
    position: relative;
    height: auto;
    min-height: 50vh;
  }
  .scroll-animation .scroll-animation__text-group {
    opacity: 1;
  }
  .scroll-animation .scroll-animation__line1,
  .scroll-animation .scroll-animation__line2,
  .scroll-animation .scroll-animation__tagline {
    opacity: 1;
    transform: none;
  }
  .scroll-animation .scroll-animation__rule {
    width: 60px;
    opacity: 1;
  }
}

/**
 * Component: Dashboard Display
 * BEM Block: .dash-display
 * File: src/scss/04-components/_dashboard-display.scss
 *
 * A unified financial dashboard visualization. No monitor frame — just the
 * dashboard UI itself with a subtle border/shadow. Adapts layout based on
 * context modifier (--standalone for full hero, --split for column usage).
 *
 * All animation driven by --dash-progress custom property (0 to 1).
 *
 * Elements:
 *   .dash-display__screen        - Dashboard container
 *   .dash-display__sidebar       - Left nav rail
 *   .dash-display__nav-item      - Nav entry
 *   .dash-display__main          - Content area
 *   .dash-display__topbar        - Header bar
 *   .dash-display__kpi-row       - KPI cards
 *   .dash-display__kpi           - Single KPI
 *   .dash-display__chart-grid    - Chart layout
 *   .dash-display__panel         - Chart/content panel
 *   .dash-display__gauge-row     - Gauges
 *   .dash-display__gauge         - Single gauge
 *
 * Modifiers:
 *   .dash-display--standalone    - Full-size, scroll-animation hero
 *   .dash-display--split         - Compact, hero-split right column
 *   .dash-display--static        - No animation
 *
 * Tokens used:
 *   $color-surface, $color-bg, $color-border, $color-border-light
 *   $color-text, $color-text-secondary, $color-text-muted
 *   $color-accent, $color-accent-light, $color-accent-hover
 *   $color-success, $color-highlight, $color-warning
 *   $font-display, $font-body
 *   $size-xs, $size-sm, $size-base
 *   $space-2xs, $space-xs, $space-sm, $space-md
 *   $radius-sm, $radius-md, $radius-lg
 *   $shadow-sm, $shadow-card
 *
 * Created: 2026-03-18
 * Modified: 2026-03-18 — removed monitor frame, added context modes
 * Playwright: tests/components/dashboard-display.spec.js
 */
.dash-display {
  width: 100%;
}
.dash-display__screen {
  width: 100%;
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  display: flex;
  border: 1px solid var(--wp--preset--color--border);
  box-shadow: var(--wp--custom--shadow--card);
  background: color-mix(in srgb, #0a0a0a calc((1 - clamp(0, (var(--dash-progress, 1) - 0.05) / 0.15, 1)) * 100%), var(--wp--preset--color--bg));
}
.dash-display__sidebar {
  background: var(--wp--preset--color--surface);
  border-right: 1px solid var(--wp--preset--color--border-light);
  display: flex;
  flex-direction: column;
  padding: var(--wp--preset--spacing--xs) 0;
  gap: 2px;
  flex-shrink: 0;
  opacity: clamp(0, (var(--dash-progress, 1) - 0.1) / 0.15, 1);
  transform: translateX(calc(-12px * clamp(0, 1 - (var(--dash-progress, 1) - 0.1) / 0.15, 1)));
}
.dash-display__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--wp--preset--spacing--2-xs);
  margin: 0 var(--wp--preset--spacing--2-xs);
  border-radius: var(--wp--custom--radius--sm);
  color: var(--wp--preset--color--text-muted);
  cursor: default;
}
.dash-display__nav-item svg {
  flex-shrink: 0;
}
.dash-display__nav-item span {
  font-family: var(--wp--preset--font-family--body);
  color: var(--wp--preset--color--text-muted);
}
.dash-display__nav-item--logo {
  margin-bottom: var(--wp--preset--spacing--xs);
  color: var(--wp--preset--color--accent);
}
.dash-display__nav-item--active {
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
}
.dash-display__nav-item--active span {
  color: var(--wp--preset--color--accent);
  font-weight: 600;
}
.dash-display__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--wp--preset--spacing--xs);
  overflow: hidden;
}
.dash-display__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--wp--preset--color--border-light);
  opacity: clamp(0, (var(--dash-progress, 1) - 0.15) / 0.15, 1);
  transform: translateY(calc(-8px * clamp(0, 1 - (var(--dash-progress, 1) - 0.15) / 0.15, 1)));
}
.dash-display__breadcrumb {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  color: var(--wp--preset--color--text);
}
.dash-display__period {
  font-family: var(--wp--preset--font-family--body);
  color: var(--wp--preset--color--text-muted);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: var(--wp--custom--radius--sm);
}
.dash-display__kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.dash-display__kpi {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: var(--wp--custom--radius--md);
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: clamp(0, (var(--dash-progress, 1) - 0.2) / 0.2, 1);
  transform: translateY(calc(10px * clamp(0, 1 - (var(--dash-progress, 1) - 0.2) / 0.2, 1)));
}
.dash-display__kpi:nth-child(2) {
  opacity: clamp(0, (var(--dash-progress, 1) - 0.24) / 0.2, 1);
  transform: translateY(calc(10px * clamp(0, 1 - (var(--dash-progress, 1) - 0.24) / 0.2, 1)));
}
.dash-display__kpi:nth-child(3) {
  opacity: clamp(0, (var(--dash-progress, 1) - 0.28) / 0.2, 1);
  transform: translateY(calc(10px * clamp(0, 1 - (var(--dash-progress, 1) - 0.28) / 0.2, 1)));
}
.dash-display__kpi:nth-child(4) {
  opacity: clamp(0, (var(--dash-progress, 1) - 0.32) / 0.2, 1);
  transform: translateY(calc(10px * clamp(0, 1 - (var(--dash-progress, 1) - 0.32) / 0.2, 1)));
}
.dash-display__kpi-label {
  font-family: var(--wp--preset--font-family--body);
  color: var(--wp--preset--color--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dash-display__kpi-value {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  color: var(--wp--preset--color--text);
  line-height: 1.1;
}
.dash-display__kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
}
.dash-display__kpi-delta svg {
  flex-shrink: 0;
}
.dash-display__kpi-delta--up {
  color: var(--wp--preset--color--success);
}
.dash-display__kpi-delta--down {
  color: var(--wp--preset--color--warning);
}
.dash-display__chart-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  flex: 1;
  min-height: 0;
}
.dash-display__panel {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: var(--wp--custom--radius--md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: clamp(0, (var(--dash-progress, 1) - 0.35) / 0.25, 1);
  transform: translateY(calc(12px * clamp(0, 1 - (var(--dash-progress, 1) - 0.35) / 0.25, 1)));
}
.dash-display__panel--wide {
  grid-column: 1/-1;
}
.dash-display__panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--wp--preset--color--border-light);
}
.dash-display__panel-title {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  color: var(--wp--preset--color--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dash-display__panel-badge {
  font-family: var(--wp--preset--font-family--body);
  color: var(--wp--preset--color--text-muted);
  background: var(--wp--preset--color--bg);
  border-radius: var(--wp--custom--radius--sm);
}
.dash-display__panel-body {
  flex: 1;
  position: relative;
  min-height: 0;
}
.dash-display__panel-body--donut {
  display: flex;
  align-items: center;
}
.dash-display__panel-body--bars {
  display: flex;
  align-items: flex-end;
  min-height: 48px;
}
.dash-display__line-chart {
  width: 100%;
  height: 100%;
  display: block;
}
.dash-display__line-chart-line {
  stroke: var(--wp--preset--color--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dash-display__line-chart-area {
  opacity: clamp(0, (var(--dash-progress, 1) - 0.45) / 0.2, 1);
}
.dash-display__donut {
  flex-shrink: 0;
  transform: rotate(-90deg);
}
.dash-display__donut-bg {
  fill: none;
  stroke: var(--wp--preset--color--border-light);
  stroke-width: 6;
}
.dash-display__donut-seg {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}
.dash-display__donut-seg--1 {
  stroke: var(--wp--preset--color--accent);
}
.dash-display__donut-seg--2 {
  stroke: var(--wp--preset--color--highlight);
}
.dash-display__donut-seg--3 {
  stroke: var(--wp--preset--color--text-muted);
}
.dash-display__donut-legend {
  display: flex;
  flex-direction: column;
}
.dash-display__donut-item {
  font-family: var(--wp--preset--font-family--body);
  color: var(--wp--preset--color--text-secondary);
  display: flex;
  align-items: center;
}
.dash-display__donut-item::before {
  content: "";
  border-radius: 2px;
  flex-shrink: 0;
}
.dash-display__donut-item--1::before {
  background: var(--wp--preset--color--accent);
}
.dash-display__donut-item--2::before {
  background: var(--wp--preset--color--highlight);
}
.dash-display__donut-item--3::before {
  background: var(--wp--preset--color--text-muted);
}
.dash-display__bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6%;
  height: 100%;
  width: 100%;
  min-height: 40px;
}
.dash-display__bar {
  flex: 1;
  max-width: 12px;
  background: linear-gradient(to top, var(--wp--preset--color--accent), var(--wp--preset--color--accent-hover));
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  height: calc(var(--bar-h, 0%) * clamp(0, (var(--dash-progress, 1) - 0.35) / 0.35, 1));
}
.dash-display__gauge-row {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dash-display__gauge {
  position: relative;
  aspect-ratio: 1;
}
.dash-display__gauge svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.dash-display__gauge-bg {
  fill: none;
  stroke: var(--wp--preset--color--border-light);
  stroke-width: 4;
}
.dash-display__gauge-fill {
  fill: none;
  stroke: var(--wp--preset--color--accent);
  stroke-width: 4;
  stroke-linecap: round;
}
.dash-display__gauge-inner {
  position: absolute;
  inset: 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dash-display__gauge-value {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  color: var(--wp--preset--color--text);
  line-height: 1;
}
.dash-display__gauge-label {
  font-family: var(--wp--preset--font-family--body);
  color: var(--wp--preset--color--text-muted);
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
  line-height: 1;
}
.dash-display--standalone {
  max-width: 900px;
  margin: 0 auto;
}
.dash-display--standalone .dash-display__screen {
  aspect-ratio: 16/9;
}
.dash-display--standalone .dash-display__sidebar {
  width: 72px;
}
.dash-display--standalone .dash-display__nav-item svg {
  width: 16px;
  height: 16px;
}
.dash-display--standalone .dash-display__nav-item span {
  font-size: 0.5rem;
}
.dash-display--standalone .dash-display__main {
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
}
.dash-display--standalone .dash-display__topbar {
  padding-bottom: var(--wp--preset--spacing--2-xs);
}
.dash-display--standalone .dash-display__breadcrumb {
  font-size: var(--wp--preset--font-size--xs);
}
.dash-display--standalone .dash-display__period {
  font-size: 0.55rem;
  padding: 1px 6px;
}
.dash-display--standalone .dash-display__kpi-row {
  gap: var(--wp--preset--spacing--xs);
}
.dash-display--standalone .dash-display__kpi {
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
}
.dash-display--standalone .dash-display__kpi-label {
  font-size: 0.5rem;
}
.dash-display--standalone .dash-display__kpi-value {
  font-size: clamp(0.85rem, 1.8vw, 1.3rem);
}
.dash-display--standalone .dash-display__kpi-delta {
  font-size: 0.5rem;
}
.dash-display--standalone .dash-display__chart-grid {
  gap: var(--wp--preset--spacing--xs);
}
.dash-display--standalone .dash-display__panel-header {
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
}
.dash-display--standalone .dash-display__panel-title {
  font-size: 0.55rem;
}
.dash-display--standalone .dash-display__panel-badge {
  font-size: 0.45rem;
  padding: 1px 5px;
}
.dash-display--standalone .dash-display__panel-body {
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm);
}
.dash-display--standalone .dash-display__panel-body--donut {
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
}
.dash-display--standalone .dash-display__panel-body--bars {
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--2-xs);
  gap: 6%;
}
.dash-display--standalone .dash-display__donut {
  width: 60px;
  height: 60px;
}
.dash-display--standalone .dash-display__donut-legend {
  gap: 3px;
}
.dash-display--standalone .dash-display__donut-item {
  gap: 4px;
  font-size: 0.45rem;
}
.dash-display--standalone .dash-display__donut-item::before {
  width: 6px;
  height: 6px;
}
.dash-display--standalone .dash-display__gauge-row {
  gap: var(--wp--preset--spacing--md);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
}
.dash-display--standalone .dash-display__gauge {
  width: 56px;
}
.dash-display--standalone .dash-display__gauge-value {
  font-size: 0.55rem;
}
.dash-display--standalone .dash-display__gauge-label {
  font-size: 0.25rem;
}
@media (width < 768px) {
  .dash-display--standalone .dash-display__sidebar {
    width: 48px;
  }
  .dash-display--standalone .dash-display__nav-item span {
    display: none;
  }
  .dash-display--standalone .dash-display__kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-display--standalone .dash-display__chart-grid {
    grid-template-columns: 1fr;
  }
  .dash-display--standalone .dash-display__gauge-row {
    display: none;
  }
}
@media (width < 375px) {
  .dash-display--standalone .dash-display__sidebar {
    display: none;
  }
}
.dash-display--split .dash-display__screen {
  aspect-ratio: 4/3;
}
.dash-display--split .dash-display__sidebar {
  width: 52px;
}
.dash-display--split .dash-display__nav-item {
  padding: 3px;
}
.dash-display--split .dash-display__nav-item svg {
  width: 13px;
  height: 13px;
}
.dash-display--split .dash-display__nav-item span {
  font-size: 0.4rem;
}
.dash-display--split .dash-display__main {
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
  gap: var(--wp--preset--spacing--2-xs);
}
.dash-display--split .dash-display__topbar {
  padding-bottom: 2px;
}
.dash-display--split .dash-display__breadcrumb {
  font-size: 0.55rem;
}
.dash-display--split .dash-display__period {
  font-size: 0.4rem;
  padding: 0 4px;
}
.dash-display--split .dash-display__kpi-row {
  gap: var(--wp--preset--spacing--2-xs);
}
.dash-display--split .dash-display__kpi {
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
}
.dash-display--split .dash-display__kpi-label {
  font-size: 0.4rem;
}
.dash-display--split .dash-display__kpi-value {
  font-size: clamp(0.7rem, 1.5vw, 1rem);
}
.dash-display--split .dash-display__kpi-delta {
  font-size: 0.4rem;
}
.dash-display--split .dash-display__kpi-delta svg {
  width: 8px;
  height: 8px;
}
.dash-display--split .dash-display__chart-grid {
  gap: var(--wp--preset--spacing--2-xs);
}
.dash-display--split .dash-display__panel-header {
  padding: 2px var(--wp--preset--spacing--xs);
}
.dash-display--split .dash-display__panel-title {
  font-size: 0.45rem;
}
.dash-display--split .dash-display__panel-badge {
  font-size: 0.35rem;
  padding: 0 3px;
}
.dash-display--split .dash-display__panel-body {
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
}
.dash-display--split .dash-display__panel-body--donut {
  gap: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
}
.dash-display--split .dash-display__panel-body--bars {
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
  gap: 5%;
}
.dash-display--split .dash-display__donut {
  width: 40px;
  height: 40px;
}
.dash-display--split .dash-display__donut-legend {
  gap: 2px;
}
.dash-display--split .dash-display__donut-item {
  gap: 3px;
  font-size: 0.35rem;
}
.dash-display--split .dash-display__donut-item::before {
  width: 4px;
  height: 4px;
}
.dash-display--split .dash-display__gauge-row {
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
}
.dash-display--split .dash-display__gauge {
  width: 40px;
}
.dash-display--split .dash-display__gauge-value {
  font-size: 0.4rem;
}
.dash-display--split .dash-display__gauge-label {
  font-size: 0.2rem;
}
@media (width < 768px) {
  .dash-display--split .dash-display__screen {
    aspect-ratio: auto;
    min-height: 360px;
  }
  .dash-display--split .dash-display__kpi-row {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (width < 480px) {
  .dash-display--split .dash-display__sidebar {
    display: none;
  }
  .dash-display--split .dash-display__kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-display--split .dash-display__chart-grid {
    grid-template-columns: 1fr;
  }
  .dash-display--split .dash-display__gauge-row {
    display: none;
  }
}
.dash-display--showcase {
  --dash-progress: 1;
}
.dash-display--showcase .dash-display__screen {
  background: var(--wp--preset--color--bg);
}
.dash-display--showcase .dash-display__sidebar {
  width: 56px;
}
.dash-display--showcase .dash-display__nav-item {
  padding: 3px;
}
.dash-display--showcase .dash-display__nav-item svg {
  width: 14px;
  height: 14px;
}
.dash-display--showcase .dash-display__nav-item span {
  font-size: 0.42rem;
}
.dash-display--showcase .dash-display__main {
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
  gap: var(--wp--preset--spacing--2-xs);
}
.dash-display--showcase .dash-display__topbar {
  padding-bottom: 2px;
}
.dash-display--showcase .dash-display__breadcrumb {
  font-size: 0.6rem;
}
.dash-display--showcase .dash-display__period {
  font-size: 0.42rem;
  padding: 1px 5px;
}
.dash-display--showcase .dash-display__kpi-row {
  gap: var(--wp--preset--spacing--2-xs);
}
.dash-display--showcase .dash-display__kpi {
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
}
.dash-display--showcase .dash-display__kpi-label {
  font-size: 0.42rem;
}
.dash-display--showcase .dash-display__kpi-value {
  font-size: clamp(0.75rem, 1.6vw, 1.1rem);
}
.dash-display--showcase .dash-display__kpi-delta {
  font-size: 0.42rem;
}
.dash-display--showcase .dash-display__kpi-delta svg {
  width: 8px;
  height: 8px;
}
.dash-display--showcase .dash-display__chart-grid {
  gap: var(--wp--preset--spacing--2-xs);
}
.dash-display--showcase .dash-display__panel-header {
  padding: 2px var(--wp--preset--spacing--xs);
}
.dash-display--showcase .dash-display__panel-title {
  font-size: 0.48rem;
}
.dash-display--showcase .dash-display__panel-badge {
  font-size: 0.38rem;
  padding: 1px 4px;
}
.dash-display--showcase .dash-display__panel-body {
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
}
.dash-display--showcase .dash-display__panel-body--donut {
  gap: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
}
.dash-display--showcase .dash-display__panel-body--bars {
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
  gap: 5%;
}
.dash-display--showcase .dash-display__donut {
  width: 48px;
  height: 48px;
}
.dash-display--showcase .dash-display__donut-legend {
  gap: 2px;
}
.dash-display--showcase .dash-display__donut-item {
  gap: 3px;
  font-size: 0.38rem;
}
.dash-display--showcase .dash-display__donut-item::before {
  width: 5px;
  height: 5px;
}
.dash-display--showcase .dash-display__gauge-row {
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
}
.dash-display--showcase .dash-display__gauge {
  width: 46px;
}
.dash-display--showcase .dash-display__gauge-value {
  font-size: 0.48rem;
}
.dash-display--showcase .dash-display__gauge-label {
  font-size: 0.22rem;
}
@media (width < 768px) {
  .dash-display--showcase .dash-display__sidebar {
    display: none;
  }
  .dash-display--showcase .dash-display__kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-display--showcase .dash-display__chart-grid {
    grid-template-columns: 1fr;
  }
  .dash-display--showcase .dash-display__gauge-row {
    display: none;
  }
}
.dash-display--static {
  --dash-progress: 1;
}
@media (prefers-reduced-motion: reduce) {
  .dash-display {
    --dash-progress: 1;
  }
}

/**
 * Component: Hero Illustrations
 * BEM Block: .hero-ill
 * File: src/scss/04-components/_hero-illustrations.scss
 *
 * Six page-specific CSS illustrations for split-hero right columns.
 * Desktop-only (hidden below 768px). Token-driven, animated, labeled.
 *
 * Elements:
 *   .hero-ill__glow        - Ambient glow orbs
 *   .hero-ill__ring        - Orbital rings
 *   .hero-ill__conn        - SVG connection lines
 *   .hero-ill__pulse       - Traveling pulse dots
 *   .hero-ill__node        - Node container (flex column)
 *   .hero-ill__circle      - Concentric circle system (--outer, --mid, --inner, --dot)
 *   .hero-ill__label       - Node text label
 *   .hero-ill__card        - Floating data cards
 *   .hero-ill__sat         - Satellite dots (ambient decoration)
 *
 * Modifiers:
 *   .hero-ill__node--success  - Success-colored node variant
 *   .hero-ill__card-value--accent  - Accent-colored value
 *   .hero-ill__card-value--success - Success-colored value
 *
 * Tokens used:
 *   $color-accent, $color-accent-light, $color-success, $color-highlight,
 *   $color-surface, $color-border, $color-text, $color-text-secondary,
 *   $color-text-muted, $font-body, $weight-bold, $weight-semibold,
 *   $radius-lg, $radius-md, $shadow-sm
 *
 * Responsive: Hidden below 768px (display: none on .hero-ill)
 * Accessibility: prefers-reduced-motion kills all animations
 *
 * Created: 2026-03-19
 * Modified: 2026-03-22 — Added entrance states (opacity/scale), animation-play-state paused until visible, staggered child entrance
 * Playwright: tests/components/hero-illustrations.spec.js
 */
.hero-ill {
  position: relative;
  width: 100%;
  aspect-ratio: 570/500;
  overflow: hidden;
  font-family: var(--wp--preset--font-family--body);
  background: radial-gradient(ellipse 50% 40% at 50% 50%, color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent) 0%, transparent 85%);
}

.hero-ill--services .hero-ill__pulse {
  display: none;
}
.hero-ill--services {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--wp--custom--motion--duration-dramatic) var(--wp--custom--motion--ease-decelerate), transform var(--wp--custom--motion--duration-dramatic) var(--wp--custom--motion--ease-out);
}

.hero-ill.is-visible {
  opacity: 1;
  transform: scale(1);
  transition-delay: 400ms;
}

.hero-ill__glow {
  display: none;
}

.hero-ill__ring {
  position: absolute;
  border: 1px dashed var(--wp--preset--color--accent);
  border-radius: 50%;
  opacity: 0.05;
  pointer-events: none;
  animation: hero-ill-orbit 28s linear infinite;
}

.hero-ill__conn {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-ill__conn line {
  stroke: var(--wp--preset--color--accent);
  stroke-width: 1.5;
  opacity: 0.1;
}

.hero-ill__pulse {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
  opacity: 0.5;
  z-index: 2;
  offset-rotate: 0deg;
  animation: hero-ill-travel calc(var(--wp--custom--motion--duration-dramatic, 800ms) * 5) ease-in-out infinite;
}

.hero-ill__node {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: hero-ill-drift calc(var(--wp--custom--motion--duration-dramatic, 800ms) * 8) ease-in-out infinite;
}

.hero-ill__circle {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-ill__circle--outer {
  width: 100px;
  height: 100px;
  background: var(--wp--preset--color--accent-light);
  border: 1px solid var(--wp--preset--color--border);
}
.hero-ill__circle--mid {
  width: 66px;
  height: 66px;
  background: var(--wp--preset--color--accent);
  opacity: 0.15;
}
.hero-ill__circle--inner {
  width: 36px;
  height: 36px;
  background: var(--wp--preset--color--surface);
  border: 2px solid var(--wp--preset--color--accent);
  box-shadow: var(--wp--custom--shadow--sm);
}
.hero-ill__circle--dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
}

.hero-ill__node--success .hero-ill__circle--outer {
  border-color: var(--wp--preset--color--success);
  background: color-mix(in srgb, var(--wp--preset--color--success) 8%, transparent);
}
.hero-ill__node--success .hero-ill__circle--mid {
  background: var(--wp--preset--color--success);
}
.hero-ill__node--success .hero-ill__circle--inner {
  border-color: var(--wp--preset--color--success);
}
.hero-ill__node--success .hero-ill__circle--dot {
  background: var(--wp--preset--color--success);
}

.hero-ill__label {
  margin-top: 6px;
  text-align: center;
}

.hero-ill__label-title {
  font-size: 13px;
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
}

.hero-ill__label-sub {
  font-size: 10px;
  color: var(--wp--preset--color--text-muted);
  margin-top: 1px;
}

.hero-ill__card {
  position: absolute;
  z-index: 4;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  padding: 12px 16px;
  box-shadow: var(--wp--custom--shadow--sm), 0 8px 20px rgba(0, 0, 0, 0.06);
  animation: hero-ill-drift calc(var(--wp--custom--motion--duration-dramatic, 800ms) * 9) ease-in-out infinite;
}
.hero-ill__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.hero-ill__card-label {
  font-size: 10px;
  color: var(--wp--preset--color--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--wp--custom--weight--semibold);
}

.hero-ill__card-value {
  font-size: 22px;
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--text);
  margin-top: 2px;
}
.hero-ill__card-value--accent {
  color: var(--wp--preset--color--accent);
}
.hero-ill__card-value--success {
  color: var(--wp--preset--color--success);
}

.hero-ill__card-detail {
  font-size: 10px;
  color: var(--wp--preset--color--text-muted);
  margin-top: 2px;
}

.hero-ill__sat {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
  opacity: 0.05;
}

.hero-ill__cred-card {
  position: absolute;
  z-index: 4;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  padding: 12px 16px;
  box-shadow: var(--wp--custom--shadow--sm), 0 8px 20px rgba(0, 0, 0, 0.06);
  animation: hero-ill-drift calc(var(--wp--custom--motion--duration-dramatic, 800ms) * 9) ease-in-out infinite;
}
.hero-ill__cred-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.hero-ill__cred-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 5px;
}

.hero-ill__cred-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-ill__cred-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hero-ill__cred-dot--accent {
  background: var(--wp--preset--color--accent);
}
.hero-ill__cred-dot--success {
  background: var(--wp--preset--color--success);
}

.hero-ill__cred-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--wp--preset--color--text);
}

.hero-ill__hub-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--wp--preset--color--surface);
  border: 2px solid var(--wp--preset--color--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--wp--custom--shadow--sm), 0 8px 24px rgba(0, 0, 0, 0.05);
  animation: hero-ill-center-pulse 5s ease-in-out infinite;
  text-align: center;
}

.hero-ill__hub-title {
  font-size: 11px;
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
  line-height: 1.3;
}

.hero-ill__hub-sub {
  font-size: 9px;
  color: var(--wp--preset--color--text-muted);
  margin-top: 2px;
}

.hero-ill__svc-node {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: hero-ill-drift calc(var(--wp--custom--motion--duration-dramatic, 800ms) * 8) ease-in-out infinite;
}

.hero-ill__svc-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-light);
  border: 1px solid var(--wp--preset--color--border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-ill__svc-dot-inner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
}

.hero-ill__svc-dot--success .hero-ill__svc-dot-inner {
  background: var(--wp--preset--color--success);
}

.hero-ill__svc-dot--warning .hero-ill__svc-dot-inner {
  background: var(--wp--preset--color--highlight);
}

.hero-ill__svc-title {
  font-size: 11px;
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
  margin-top: 6px;
  text-align: center;
}

.hero-ill__svc-stat {
  font-size: 14px;
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--accent);
  margin-top: 2px;
}
.hero-ill__svc-stat--success {
  color: var(--wp--preset--color--success);
}
.hero-ill__svc-stat--warning {
  color: var(--wp--preset--color--highlight);
}

.hero-ill__svc-detail {
  font-size: 9px;
  color: var(--wp--preset--color--text-muted);
  margin-top: 1px;
}

.hero-ill__svg {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-ill__svg-spokes line {
  stroke: var(--wp--preset--color--accent);
  stroke-width: 1.5;
  stroke-opacity: 0.18;
  stroke-linecap: round;
  fill: none;
}

.hero-ill__svg-ball-outer {
  fill: var(--wp--preset--color--accent-light);
  stroke: var(--wp--preset--color--border);
  stroke-width: 1;
}

.hero-ill__svg-ball-inner {
  fill: var(--wp--preset--color--accent);
}

.hero-ill__svg-ball--core .hero-ill__svg-ball-inner {
  fill: var(--wp--preset--color--success);
}

.hero-ill__svg-ball--warn .hero-ill__svg-ball-inner {
  fill: var(--wp--preset--color--highlight);
}

.hero-ill__svg-svc-title {
  fill: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--ui);
  font-size: 11px;
  font-weight: var(--wp--custom--weight--bold);
  text-anchor: middle;
  dominant-baseline: hanging;
}

.hero-ill__svg-hub-circle {
  fill: var(--wp--preset--color--surface);
  stroke: var(--wp--preset--color--accent);
  stroke-width: 2;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.05));
}

.hero-ill__svg-hub-name {
  fill: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--display);
  font-size: 16px;
  font-weight: var(--wp--custom--weight--bold);
  text-anchor: middle;
  dominant-baseline: alphabetic;
}

.hero-ill__svg-hub-sub {
  fill: var(--wp--preset--color--text);
  font-family: var(--wp--preset--font-family--ui);
  font-size: 14px;
  font-weight: var(--wp--custom--weight--semibold);
  text-anchor: middle;
  dominant-baseline: hanging;
  letter-spacing: 0.02em;
}

.hero-ill--contact {
  aspect-ratio: auto;
  height: 500px;
  min-height: 500px;
}

.hero-ill__headshot {
  position: absolute;
  top: 95px;
  right: 30px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: hero-ill-headshot-float 12s ease-in-out infinite;
  will-change: transform;
}

.hero-ill--contact .hero-ill__headshot {
  opacity: 0;
  transform: scale(0.6) translateY(-8px);
  transform-origin: center;
  transition: opacity 500ms var(--wp--custom--motion--ease-decelerate, ease-out), transform 600ms var(--wp--custom--motion--ease-out, ease-out);
}

.hero-ill--contact.is-visible .hero-ill__headshot {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.hero-ill--contact.is-visible .hero-ill__msg,
.hero-ill--contact.is-visible .hero-ill__card,
.hero-ill--contact.is-visible .hero-ill__headshot {
  transition-delay: calc((var(--enter-i, 1) - 1) * 180ms);
}

.hero-ill--contact.is-visible > :nth-child(n) {
  transition-delay: calc((var(--enter-i, 1) - 1) * 180ms);
}

.hero-ill__headshot--partners {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.hero-ill__headshot-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--wp--preset--color--surface);
  border: 4px solid var(--wp--preset--color--accent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-ill__headshot-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hero-ill__headshot-circle--initials {
  background: var(--wp--preset--color--accent-light);
}

.hero-ill__headshot-initials {
  font-family: var(--wp--preset--font-family--display);
  font-size: 40px;
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--accent);
  letter-spacing: 0.02em;
}

.hero-ill__headshot--partners .hero-ill__headshot-circle--partner {
  width: 100px;
  height: 100px;
  border-width: 3px;
}
.hero-ill__headshot--partners .hero-ill__headshot-circle--partner + .hero-ill__headshot-circle--partner {
  margin-left: -20px;
}
.hero-ill__headshot--partners .hero-ill__headshot-circle--partner:nth-child(2) {
  z-index: 2;
}
.hero-ill__headshot--partners .hero-ill__headshot-circle--partner:nth-child(3) {
  z-index: 1;
}
.hero-ill__headshot--partners .hero-ill__headshot-circle--partner .hero-ill__headshot-initials {
  font-size: 28px;
}

.hero-ill__headshot--partners .hero-ill__headshot-circle--lead {
  width: 110px;
  height: 110px;
  z-index: 5;
}

@keyframes hero-ill-headshot-float {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ill__headshot {
    animation: none !important;
  }
}
.hero-ill__svg-ring {
  fill: none;
  stroke: var(--wp--preset--color--accent);
  stroke-width: 2;
  stroke-opacity: 0.22;
  stroke-dasharray: 6 8;
  transform-origin: 285px 250px;
}

.hero-ill__svg-ring--inner {
  animation: hero-ill-svg-ring-spin 32s linear infinite;
}

.hero-ill__svg-ring--mid {
  stroke-opacity: 0.18;
  animation: hero-ill-svg-ring-spin 48s linear infinite reverse;
}

.hero-ill__svg-ring--outer {
  stroke-opacity: 0.16;
  stroke-dasharray: 8 10;
  animation: hero-ill-svg-ring-spin 64s linear infinite;
}

@keyframes hero-ill-svg-ring-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.hero-ill__svg-ball {
  animation: hero-ill-svg-ball-drift 6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

@keyframes hero-ill-svg-ball-drift {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -3px);
  }
}
.hero-ill__svg-ball-inner {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-ill-svg-orb-pulse 3.4s ease-in-out infinite;
  animation-delay: calc(var(--node-i, 0) * -530ms);
}

@keyframes hero-ill-svg-orb-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.7;
  }
}
.hero-ill__svg-hub-circle {
  animation: hero-ill-svg-hub-pulse 7s ease-in-out infinite;
}

@keyframes hero-ill-svg-hub-pulse {
  0%, 100% {
    stroke-opacity: 1;
  }
  50% {
    stroke-opacity: 0.55;
  }
}
.hero-ill--services {
  animation: hero-ill-svg-structure-float 14s ease-in-out infinite;
  will-change: transform;
}

@keyframes hero-ill-svg-structure-float {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(5px, -10px);
  }
  45% {
    transform: translate(-2px, -15px);
  }
  65% {
    transform: translate(-6px, -7px);
  }
  85% {
    transform: translate(3px, -3px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ill__svg-ring,
  .hero-ill__svg-ring--inner,
  .hero-ill__svg-ring--mid,
  .hero-ill__svg-ring--outer,
  .hero-ill__svg-ball,
  .hero-ill__svg-ball-outer,
  .hero-ill__svg-ball-inner,
  .hero-ill__svg-hub-circle,
  .hero-ill--services {
    animation: none !important;
  }
}
.hero-ill--pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.hero-ill__tiers {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  z-index: 3;
}

.hero-ill__tier {
  display: flex;
  flex-direction: column;
  width: 165px;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  padding: 18px 16px;
  box-shadow: var(--wp--custom--shadow--sm), 0 8px 20px rgba(0, 0, 0, 0.06);
  animation: hero-ill-drift calc(var(--wp--custom--motion--duration-dramatic, 800ms) * 8) ease-in-out infinite;
  position: relative;
}
.hero-ill__tier::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.hero-ill__tier:nth-child(1) {
  min-height: 290px;
}
.hero-ill__tier:nth-child(2) {
  min-height: 330px;
}
.hero-ill__tier:nth-child(3) {
  min-height: 370px;
  box-shadow: var(--wp--custom--shadow--sm), 0 12px 28px rgba(0, 0, 0, 0.08);
}

.hero-ill__tier--featured {
  border: 2px solid var(--wp--preset--color--accent);
  animation-duration: calc(var(--wp--custom--motion--duration-dramatic, 800ms) * 10);
}

.hero-ill__tier-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--accent);
  background: var(--wp--preset--color--accent-light);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 8px;
}

.hero-ill__tier-name {
  font-size: 14px;
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
}

.hero-ill__tier-band {
  display: inline-block;
  font-size: 12px;
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
  background: var(--wp--preset--color--border-light);
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 6px;
  white-space: nowrap;
  align-self: flex-start;
}
.hero-ill__tier-band--accent {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-text);
}

.hero-ill__tier-hours {
  font-size: 11px;
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 8px;
  white-space: nowrap;
}
.hero-ill__tier-hours--accent {
  color: var(--wp--preset--color--accent);
}

.hero-ill__tier-tagline {
  font-family: var(--wp--preset--font-family--display);
  font-size: 14px;
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
  line-height: 1.3;
  margin-top: 10px;
}

.hero-ill__tier-features {
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--wp--preset--color--border-light);
}

.hero-ill__tier-feat {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: var(--wp--preset--color--text-secondary);
  line-height: 1.25;
}

.hero-ill__tier-feat-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
}

.hero-ill__tier-cta {
  margin-top: auto;
  font-size: 10px;
  font-weight: var(--wp--custom--weight--semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--accent);
  text-align: center;
  padding-top: 10px;
  border-top: 1px solid var(--wp--preset--color--border-light);
}

.hero-ill__tier--featured .hero-ill__tier-feat-dot {
  background: var(--wp--preset--color--accent);
}

.hero-ill__tier-unit,
.hero-ill__tier-desc {
  display: none;
}

.hero-ill__compare {
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 3;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  padding: 14px 24px;
  box-shadow: var(--wp--custom--shadow--sm);
}

.hero-ill__compare-side {
  text-align: center;
}

.hero-ill__compare-label {
  font-size: 9px;
  color: var(--wp--preset--color--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--wp--custom--weight--semibold);
}

.hero-ill__compare-value {
  font-size: 18px;
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--accent);
  margin-top: 2px;
}
.hero-ill__compare-value--muted {
  color: var(--wp--preset--color--text-muted);
  text-decoration: line-through;
}

.hero-ill__compare-vs {
  font-size: 11px;
  color: var(--wp--preset--color--text-muted);
  font-weight: var(--wp--custom--weight--semibold);
}

.hero-ill__grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-ill__grid-bg line {
  stroke: var(--wp--preset--color--accent);
  opacity: 0.03;
  stroke-width: 1;
}

.hero-ill__path {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-ill__path-track {
  fill: none;
  stroke: var(--wp--preset--color--accent);
  stroke-width: 2.5;
  opacity: 0.07;
}

.hero-ill__path-dash {
  fill: none;
  stroke: var(--wp--preset--color--accent);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  opacity: 0.12;
}

.hero-ill__step {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: hero-ill-drift calc(var(--wp--custom--motion--duration-dramatic, 800ms) * 8) ease-in-out infinite;
}

.hero-ill__step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--wp--preset--color--accent);
  background: var(--wp--preset--color--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--accent);
  flex-shrink: 0;
  box-shadow: var(--wp--custom--shadow--sm);
}
.hero-ill__step-num--success {
  border-color: var(--wp--preset--color--success);
  color: var(--wp--preset--color--success);
}

.hero-ill__step-card {
  max-width: 220px;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  padding: 12px 14px;
  box-shadow: var(--wp--custom--shadow--sm), 0 8px 20px rgba(0, 0, 0, 0.06);
  position: relative;
}
.hero-ill__step-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.hero-ill__step-title {
  font-size: 14px;
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
}

.hero-ill__step-desc {
  font-size: 10px;
  color: var(--wp--preset--color--text-muted);
  line-height: 1.5;
  margin-top: 4px;
}

.hero-ill__step-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--wp--preset--color--border);
}

.hero-ill__step-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
  flex-shrink: 0;
}
.hero-ill__step-meta-dot--success {
  background: var(--wp--preset--color--success);
}

.hero-ill__step-meta-text {
  font-size: 10px;
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
}

.hero-ill--faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px;
}

.hero-ill__faq-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 500px;
  z-index: 3;
}

.hero-ill__faq-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  padding: 12px 14px;
  box-shadow: var(--wp--custom--shadow--sm);
  animation: hero-ill-drift calc(var(--wp--custom--motion--duration-dramatic, 800ms) * 9) ease-in-out infinite;
}

.hero-ill__faq-row--pending {
  opacity: 0.55;
}
.hero-ill__faq-row--pending:last-child {
  opacity: 0.25;
}

.hero-ill__faq-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}
.hero-ill__faq-check--answered {
  background: color-mix(in srgb, var(--wp--preset--color--success) 12%, transparent);
  color: var(--wp--preset--color--success);
}
.hero-ill__faq-check--pending {
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
  opacity: 0.5;
}

.hero-ill__faq-content {
  flex: 1;
  min-width: 0;
}

.hero-ill__faq-q {
  font-size: 13px;
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
  line-height: 1.4;
}

.hero-ill__faq-a {
  font-size: 11px;
  color: var(--wp--preset--color--text-secondary);
  line-height: 1.5;
  margin-top: 3px;
}

.hero-ill__faq-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: var(--wp--custom--weight--semibold);
  padding: 2px 8px;
  border-radius: 100px;
  margin-top: 5px;
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
}
.hero-ill__faq-tag--success {
  background: color-mix(in srgb, var(--wp--preset--color--success) 10%, transparent);
  color: var(--wp--preset--color--success);
}

.hero-ill__faq-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 12px;
  z-index: 3;
}

.hero-ill__faq-stat {
  text-align: center;
}

.hero-ill__faq-stat-value {
  font-size: 20px;
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
}
.hero-ill__faq-stat-value--success {
  color: var(--wp--preset--color--success);
}
.hero-ill__faq-stat-value--accent {
  color: var(--wp--preset--color--accent);
}

.hero-ill__faq-stat-label {
  font-size: 9px;
  color: var(--wp--preset--color--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--wp--custom--weight--semibold);
  margin-top: 2px;
}

.hero-ill__msg {
  position: absolute;
  z-index: 4;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--custom--shadow--sm), 0 8px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  animation: hero-ill-drift calc(var(--wp--custom--motion--duration-dramatic, 800ms) * 8) ease-in-out infinite;
}

.hero-ill__msg-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--wp--preset--color--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-ill__msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--wp--custom--weight--bold);
}
.hero-ill__msg-avatar--you {
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
}
.hero-ill__msg-avatar--partner {
  background: color-mix(in srgb, var(--wp--preset--color--success) 12%, transparent);
  color: var(--wp--preset--color--success);
}

.hero-ill__msg-name {
  font-size: 13px;
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--text);
}

.hero-ill__msg-time {
  font-size: 9px;
  color: var(--wp--preset--color--text-muted);
}

.hero-ill__msg-body {
  padding: 14px 16px;
}

.hero-ill__msg-text {
  font-size: 11px;
  color: var(--wp--preset--color--text-secondary);
  line-height: 1.6;
}

.hero-ill__online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  color: var(--wp--preset--color--success);
  font-weight: var(--wp--custom--weight--semibold);
}

.hero-ill__online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wp--preset--color--success);
  animation: hero-ill-online-dot 2s ease-in-out infinite;
}

.hero-ill__msg-btn {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--wp--custom--weight--semibold);
  padding: 6px 16px;
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--surface);
  margin-top: 10px;
}

.hero-ill__msg-conn {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.hero-ill__msg-conn line {
  stroke: var(--wp--preset--color--accent);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  opacity: 0.1;
}

.hero-ill__node,
.hero-ill__card,
.hero-ill__cred-card,
.hero-ill__step,
.hero-ill__msg,
.hero-ill__tier,
.hero-ill__svc-node,
.hero-ill__hub-center,
.hero-ill__faq-row,
.hero-ill__glow,
.hero-ill__ring,
.hero-ill__pulse {
  animation-play-state: paused;
}

.hero-ill.is-visible .hero-ill__node,
.hero-ill.is-visible .hero-ill__card,
.hero-ill.is-visible .hero-ill__cred-card,
.hero-ill.is-visible .hero-ill__step,
.hero-ill.is-visible .hero-ill__msg,
.hero-ill.is-visible .hero-ill__tier,
.hero-ill.is-visible .hero-ill__svc-node,
.hero-ill.is-visible .hero-ill__hub-center,
.hero-ill.is-visible .hero-ill__faq-row,
.hero-ill.is-visible .hero-ill__glow,
.hero-ill.is-visible .hero-ill__ring,
.hero-ill.is-visible .hero-ill__pulse {
  animation-play-state: running;
}

.hero-ill__node,
.hero-ill__card,
.hero-ill__cred-card,
.hero-ill__step,
.hero-ill__msg,
.hero-ill__tier,
.hero-ill__svc-node,
.hero-ill__faq-row {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--wp--custom--motion--ease-decelerate), transform 500ms var(--wp--custom--motion--ease-out);
}

.hero-ill.is-visible .hero-ill__node,
.hero-ill.is-visible .hero-ill__card,
.hero-ill.is-visible .hero-ill__cred-card,
.hero-ill.is-visible .hero-ill__step,
.hero-ill.is-visible .hero-ill__msg,
.hero-ill.is-visible .hero-ill__tier,
.hero-ill.is-visible .hero-ill__svc-node,
.hero-ill.is-visible .hero-ill__faq-row {
  opacity: 1;
  transform: translateY(0);
}

.hero-ill.is-visible > :nth-child(1) {
  transition-delay: 500ms;
}

.hero-ill.is-visible > :nth-child(2) {
  transition-delay: 600ms;
}

.hero-ill.is-visible > :nth-child(3) {
  transition-delay: 700ms;
}

.hero-ill.is-visible > :nth-child(4) {
  transition-delay: 800ms;
}

.hero-ill.is-visible > :nth-child(5) {
  transition-delay: 900ms;
}

.hero-ill.is-visible > :nth-child(6) {
  transition-delay: 1000ms;
}

.hero-ill.is-visible > :nth-child(7) {
  transition-delay: 1100ms;
}

.hero-ill.is-visible > :nth-child(8) {
  transition-delay: 1200ms;
}

.hero-ill.is-visible > :nth-child(9) {
  transition-delay: 1300ms;
}

.hero-ill.is-visible > :nth-child(10) {
  transition-delay: 1400ms;
}

.hero-ill.is-visible > :nth-child(11) {
  transition-delay: 1500ms;
}

.hero-ill.is-visible > :nth-child(12) {
  transition-delay: 1600ms;
}

@keyframes hero-ill-drift {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -6px);
  }
}
@keyframes hero-ill-glow-pulse {
  0%, 100% {
    opacity: 0.05;
  }
  50% {
    opacity: 0.1;
  }
}
@keyframes hero-ill-orbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes hero-ill-travel {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
@keyframes hero-ill-travel-fade {
  0% {
    offset-distance: 0%;
    opacity: 0.6;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
@keyframes hero-ill-center-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
  }
}
@keyframes hero-ill-online-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ill__node,
  .hero-ill__card,
  .hero-ill__cred-card,
  .hero-ill__glow,
  .hero-ill__pulse,
  .hero-ill__ring,
  .hero-ill__msg,
  .hero-ill__tier,
  .hero-ill__step,
  .hero-ill__hub-center,
  .hero-ill__svc-node,
  .hero-ill__faq-row {
    animation: none !important;
  }
  .hero-ill__pulse,
  .hero-ill__online-dot {
    display: none;
  }
}
@media (max-width: 768px) {
  .hero-ill {
    display: none;
  }
}
/**
 * Component: Onboarding portal hero illustration
 * BEM Block: .hero-ill--onboarding (variant of .hero-ill)
 * File: src/scss/04-components/_hero-ill-onboarding.scss
 *
 * Right-column illustration for the /onboarding/ portal hero. Generic
 * advisor avatar on the left, website mockup centerpiece, newsletter +
 * social cards on the right, with faint dashed connector paths from the
 * advisor to each deliverable. SVG-only, fully self-contained, no
 * per-FCFO data binding (the advisor hasn't uploaded a headshot yet).
 *
 * Elements (per-element drift + entrance hooks):
 *   .hero-ill__svg          - root SVG inside .hero-ill--onboarding
 *   .hero-ill__advisor      - "YOU" avatar group
 *   .hero-ill__website      - website mockup centerpiece group
 *   .hero-ill__newsletter   - newsletter card group
 *   .hero-ill__social       - social card group
 *   .hero-ill__connectors   - dashed advisor → deliverable paths
 *
 * Tokens used:
 *   --wp--preset--color--accent / --accent-light / --text / --border /
 *   --surface / --success
 *   --wp--preset--font-family--ui
 *   --wp--custom--motion--duration-dramatic / --ease-out
 *
 * Depends on:
 *   - .hero-ill base styles in _hero-illustrations.scss (aspect-ratio,
 *     ambient bg)
 *   - .hero-ill.is-visible intersection-observer hook from the platform
 *
 * Responsive: hidden below 768px via base .hero-ill rule
 * Accessibility: SVG has <title>/<desc>; outer wrapper aria-hidden;
 *                prefers-reduced-motion kills drifts + draw-in
 *
 * Created: 2026-04-27
 * Playwright: covered by /onboarding/ smoke (no per-component spec —
 *             illustration is fixed/static composition)
 */
.hero-ill--onboarding .hero-ill__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-ill--onboarding .hero-ill__advisor {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-ill-onboarding-drift-slow calc(var(--wp--custom--motion--duration-dramatic, 800ms) * 12) ease-in-out infinite;
  animation-delay: 0.2s;
}
.hero-ill--onboarding .hero-ill__website {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-ill-drift calc(var(--wp--custom--motion--duration-dramatic, 800ms) * 15) ease-in-out infinite;
  animation-delay: 0s;
}
.hero-ill--onboarding .hero-ill__newsletter {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-ill-drift calc(var(--wp--custom--motion--duration-dramatic, 800ms) * 9) ease-in-out infinite;
  animation-delay: 0.5s;
}
.hero-ill--onboarding .hero-ill__social {
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-ill-drift calc(var(--wp--custom--motion--duration-dramatic, 800ms) * 10) ease-in-out infinite;
  animation-delay: 0.8s;
}
.hero-ill--onboarding .hero-ill__connectors path {
  stroke-dasharray: 3 4;
  stroke-dashoffset: 200;
  animation: hero-ill-onboarding-draw 1.6s var(--wp--custom--motion--ease-out, cubic-bezier(0.23, 1, 0.32, 1)) forwards;
}
.hero-ill--onboarding .hero-ill__connectors path:nth-child(1) {
  animation-delay: 0.4s;
}
.hero-ill--onboarding .hero-ill__connectors path:nth-child(2) {
  animation-delay: 0.55s;
}
.hero-ill--onboarding .hero-ill__connectors path:nth-child(3) {
  animation-delay: 0.7s;
}
.hero-ill--onboarding .hero-ill__advisor,
.hero-ill--onboarding .hero-ill__website,
.hero-ill--onboarding .hero-ill__newsletter,
.hero-ill--onboarding .hero-ill__social {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--wp--custom--motion--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 0.6s var(--wp--custom--motion--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.hero-ill--onboarding.is-visible .hero-ill__advisor {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}
.hero-ill--onboarding.is-visible .hero-ill__website {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
.hero-ill--onboarding.is-visible .hero-ill__newsletter {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}
.hero-ill--onboarding.is-visible .hero-ill__social {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}

@keyframes hero-ill-onboarding-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes hero-ill-onboarding-drift-slow {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ill--onboarding .hero-ill__advisor,
  .hero-ill--onboarding .hero-ill__website,
  .hero-ill--onboarding .hero-ill__newsletter,
  .hero-ill--onboarding .hero-ill__social {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-ill--onboarding .hero-ill__connectors path {
    animation: none;
    stroke-dashoffset: 0;
  }
}
.proof-bar--metric {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wp--preset--spacing--lg);
}
@media (max-width: 900px) {
  .proof-bar--metric {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--md);
  }
}

.proof-bar--metric .proof-bar__item {
  flex: 1 1 0;
  min-width: 140px;
  max-width: 220px;
}
@media (max-width: 900px) {
  .proof-bar--metric .proof-bar__item {
    max-width: none;
    min-width: 0;
  }
}
@media (max-width: 600px) {
  .proof-bar--metric .proof-bar__item {
    padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
  }
}
.proof-bar--metric .proof-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-light);
  border-left: var(--wp--custom--card-ui--border-left-width) solid var(--wp--custom--card-ui--border-left-color);
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
  box-shadow: var(--wp--custom--card-ui--shadow-rest);
  transition: box-shadow var(--wp--custom--duration--normal) var(--wp--custom--ease-out), transform var(--wp--custom--duration--normal) var(--wp--custom--ease-out), border-color var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
}
.proof-bar--metric .proof-bar__item.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--wp--custom--duration--normal) var(--wp--custom--ease-out), transform var(--wp--custom--duration--normal) var(--wp--custom--ease-out), box-shadow var(--wp--custom--duration--normal) var(--wp--custom--ease-out), border-color var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.proof-bar--metric .proof-bar__item:hover {
  box-shadow: var(--wp--custom--card-ui--hover-shadow);
  transform: translateY(-2px);
  border-color: var(--wp--preset--color--accent);
}
.proof-bar--metric .proof-bar__item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--accent-light));
  opacity: 0;
  transition: opacity var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.proof-bar--metric .proof-bar__item:hover::after {
  opacity: 1;
}

.proof-bar__value {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: var(--wp--custom--weight--bold);
  color: var(--wp--preset--color--accent);
  line-height: var(--wp--custom--leading--snug);
  margin-bottom: var(--wp--preset--spacing--xs);
}

.proof-bar__value-prefix {
  color: var(--wp--preset--color--accent);
}

.proof-bar__value-number {
  color: var(--wp--preset--color--accent);
}

.proof-bar__value-suffix {
  font-size: 0.65em;
  color: var(--wp--preset--color--accent);
  opacity: 0.6;
}

.proof-bar__label {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--snug);
}

.proof-bar__item--text {
  text-align: center;
}

.proof-bar__value--text {
  font-size: inherit;
  line-height: 1.1;
}
.proof-bar__value--text .proof-bar__value-number {
  font-size: var(--wp--preset--font-size--2-xl);
  color: var(--wp--preset--color--accent);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

.proof-bar__item--text[data-text-length=medium] .proof-bar__value-number {
  font-size: var(--wp--preset--font-size--xl);
}

.proof-bar__item--text[data-text-length=long] .proof-bar__value-number {
  font-size: var(--wp--preset--font-size--lg);
}

.proof-bar--trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--2-xl);
  flex-wrap: wrap;
  padding: var(--wp--preset--spacing--xl) 0;
  border-top: 1px solid var(--wp--preset--color--border-light);
  border-bottom: 1px solid var(--wp--preset--color--border-light);
}
@media (max-width: 600px) {
  .proof-bar--trust {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--lg);
    padding-left: var(--wp--preset--spacing--lg);
  }
}

.proof-bar--trust .proof-bar__item {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  transition: transform var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.proof-bar--trust .proof-bar__item:hover {
  transform: translateY(-1px);
}

.proof-bar__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--accent-light);
  color: var(--wp--preset--color--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wp--preset--font-size--base);
  flex-shrink: 0;
  transition: background var(--wp--custom--duration--normal) var(--wp--custom--ease-out), color var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}

.proof-bar--trust .proof-bar__item:hover .proof-bar__icon {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-text);
}

.proof-bar--trust .proof-bar__label {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
}

.proof-bar__sublabel {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  margin-top: 1px;
}

.proof-bar--badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--sm);
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .proof-bar--badge {
    justify-content: flex-start;
  }
}

.proof-bar__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border-light);
  border-radius: var(--wp--custom--radius--full);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
  transition: background var(--wp--custom--duration--normal) var(--wp--custom--ease-out), border-color var(--wp--custom--duration--normal) var(--wp--custom--ease-out), transform var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
  white-space: nowrap;
}
.proof-bar__pill:hover {
  background: var(--wp--preset--color--accent-light);
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-1px);
}

.proof-bar__pill-icon {
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1;
}

.proof-bar__pill--accent {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-text);
}
.proof-bar__pill--accent .proof-bar__pill-icon {
  color: var(--wp--preset--color--accent-text);
  opacity: 0.7;
}
.proof-bar__pill--accent:hover {
  background: var(--wp--preset--color--accent-hover);
  border-color: var(--wp--preset--color--accent-hover);
  color: var(--wp--preset--color--accent-text);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .proof-bar--metric .proof-bar__item {
    opacity: 1;
    transform: none;
  }
}
/**
 * Component: Scheduling Embed
 * BEM Block: .scheduling-embed
 * File: src/scss/04-components/_scheduling-embed.scss
 *
 * Inline scheduling calendar embed (Calendly, Acuity) with CTA button fallback.
 *
 * Elements:
 *   .scheduling-embed__header    - Optional heading + description above embed
 *   .scheduling-embed__heading   - Section heading
 *   .scheduling-embed__text      - Description text
 *   .scheduling-embed__calendar  - iframe container with border + shadow
 *   .scheduling-embed__iframe    - The embedded scheduling iframe
 *   .scheduling-embed__fallback  - CTA button fallback (hidden when iframe loads)
 *   .scheduling-embed__btn       - The fallback button element
 *
 * Tokens used:
 *   $font-display, $heading-weight, $size-2xl, $size-base, $color-text,
 *   $color-text-secondary, $leading-snug, $leading-normal, $space-lg, $space-xs, $space-md,
 *   $radius-lg, $color-border-light, $card-border-width, $card-border-style, $card-shadow-rest
 *
 * Responsive: iframe min-height reduced below 768px
 * Accessibility: iframe has title attribute for screen readers
 *
 * Created: 2026-03-25
 * Playwright: tests/components/scheduling-embed.spec.js
 */
.scheduling-embed {
  text-align: center;
}
.scheduling-embed__header {
  margin-bottom: var(--wp--preset--spacing--lg);
}
.scheduling-embed__heading {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--heading-weight);
  font-size: var(--wp--preset--font-size--2-xl);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--xs);
  line-height: var(--wp--custom--leading--snug);
}
.scheduling-embed__text {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.scheduling-embed__calendar {
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  border: var(--wp--custom--card-ui--border-width) var(--wp--custom--card-ui--border-style) var(--wp--preset--color--border-light);
  box-shadow: var(--wp--custom--card-ui--shadow-rest);
}
.scheduling-embed__iframe {
  display: block;
  border: none;
  width: 100%;
  min-height: 600px;
}
.scheduling-embed__fallback {
  margin-top: var(--wp--preset--spacing--md);
}
.scheduling-embed__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  color: var(--wp--preset--color--accent-text);
}

@media (max-width: 768px) {
  .scheduling-embed__iframe {
    min-height: 500px;
  }
}
/**
 * Component: Testimonial Carousel
 * BEM Block: .testimonial-carousel
 * File: src/scss/04-components/_testimonial-carousel.scss
 *
 * Horizontal carousel container for agency/testimonial children.
 * Cards scroll horizontally with snap points. Arrows + dots for navigation.
 * Adjacent cards partially visible to signal more content.
 *
 * Elements:
 *   .testimonial-carousel__header     - Optional eyebrow/title/text
 *   .testimonial-carousel__eyebrow    - Uppercase accent label
 *   .testimonial-carousel__title      - Section heading
 *   .testimonial-carousel__text       - Description paragraph
 *   .testimonial-carousel__track-wrapper - Flex container for arrows + track
 *   .testimonial-carousel__track      - Horizontal scroll container
 *   .testimonial-carousel__arrow      - Prev/next navigation buttons
 *   .testimonial-carousel__dots       - Dot indicator row
 *   .testimonial-carousel__dot        - Individual dot
 *
 * Tokens used:
 *   $color-accent, $color-accent-light, $color-accent-text,
 *   $color-text, $color-text-secondary, $color-text-muted,
 *   $color-surface, $color-border-light,
 *   $font-display, $font-body, $size-sm, $size-lg, $size-2xl,
 *   $weight-bold, $weight-semibold, $tracking-wide,
 *   $leading-tight, $leading-normal,
 *   $space-xs, $space-sm, $space-md, $space-lg, $space-xl, $space-2xl,
 *   $radius-md, $radius-full, $shadow-sm,
 *   $duration-normal, $ease-out
 *
 * Responsive: Cards shrink on tablet, stack-scroll on mobile
 * Accessibility: Arrow buttons have aria-labels, dots have aria-labels
 *
 * Created: 2026-04-09
 * Playwright: tests/components/testimonial-carousel.spec.js
 */
.testimonial-carousel {
  overflow: hidden;
}

.testimonial-carousel__header {
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--xl);
}

.testimonial-carousel__eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--bold);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  margin-bottom: var(--wp--preset--spacing--sm);
}

.testimonial-carousel__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--tight);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--sm);
}

.testimonial-carousel__text {
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-carousel__track-wrapper {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  position: relative;
}

.testimonial-carousel__track {
  display: flex;
  gap: var(--wp--preset--spacing--lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: var(--wp--preset--spacing--sm) 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testimonial-carousel__track::-webkit-scrollbar {
  display: none;
}
.testimonial-carousel__track > .testimonial {
  flex: 0 0 calc(50% - var(--wp--preset--spacing--lg) / 2);
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 900px) {
  .testimonial-carousel__track > .testimonial {
    flex: 0 0 calc(80% - var(--wp--preset--spacing--md));
  }
}
@media (max-width: 600px) {
  .testimonial-carousel__track > .testimonial {
    flex: 0 0 calc(90% - var(--wp--preset--spacing--sm));
  }
}

.testimonial-carousel[data-count="1"] .testimonial-carousel__track {
  justify-content: center;
}
.testimonial-carousel[data-count="1"] .testimonial-carousel__track > .testimonial {
  flex: 0 0 min(70%, 60ch);
}
@media (max-width: 900px) {
  .testimonial-carousel[data-count="1"] .testimonial-carousel__track > .testimonial {
    flex: 0 0 min(85%, 55ch);
  }
}
@media (max-width: 600px) {
  .testimonial-carousel[data-count="1"] .testimonial-carousel__track > .testimonial {
    flex: 0 0 min(95%, 50ch);
  }
}
.testimonial-carousel[data-count="1"] .testimonial-carousel__arrow {
  display: none;
}

.testimonial-carousel__arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--wp--custom--radius--full);
  border: 1px solid var(--wp--preset--color--border-light);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--wp--custom--duration--normal) var(--wp--custom--ease-out), border-color var(--wp--custom--duration--normal) var(--wp--custom--ease-out), color var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
  box-shadow: var(--wp--custom--shadow--sm);
}
.testimonial-carousel__arrow:hover {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-text);
}
@media (max-width: 600px) {
  .testimonial-carousel__arrow {
    display: none;
  }
}

.testimonial-carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--wp--preset--spacing--sm);
  margin-top: var(--wp--preset--spacing--lg);
}

.testimonial-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--wp--custom--radius--full);
  border: none;
  background: var(--wp--preset--color--border-light);
  cursor: pointer;
  padding: 0;
  transition: background var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.testimonial-carousel__dot--active {
  background: var(--wp--preset--color--accent);
}
.testimonial-carousel__dot:hover {
  background: var(--wp--preset--color--accent-light);
}

.bespoke-content {
  max-width: 820px;
  margin-inline: auto;
  background: var(--wp--preset--color--surface-alt);
  border: 1px solid var(--wp--preset--color--border-light);
  border-inline-start: 4px solid var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--preset--spacing--2-xl) var(--wp--preset--spacing--xl);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading--relaxed);
  color: var(--wp--preset--color--text);
}
.bespoke-content h2 {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: var(--wp--custom--weight--bold);
  line-height: var(--wp--custom--leading--tight);
  color: var(--wp--preset--color--accent);
  margin-block-start: var(--wp--preset--spacing--2-xl);
  margin-block-end: var(--wp--preset--spacing--md);
}
.bespoke-content h2:first-child {
  margin-block-start: 0;
}
.bespoke-content h3 {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--semibold);
  line-height: var(--wp--custom--leading--snug);
  color: var(--wp--preset--color--text);
  margin-block-start: var(--wp--preset--spacing--xl);
  margin-block-end: var(--wp--preset--spacing--sm);
}
.bespoke-content p,
.bespoke-content .wp-block-paragraph {
  margin-block: 0 var(--wp--preset--spacing--md);
  color: var(--wp--preset--color--text);
}
.bespoke-content p:last-child,
.bespoke-content .wp-block-paragraph:last-child {
  margin-block-end: 0;
}
.bespoke-content ul, .bespoke-content ol {
  margin-block: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
  padding-inline-start: var(--wp--preset--spacing--lg);
}
.bespoke-content ul {
  list-style: disc;
}
.bespoke-content ol {
  list-style: decimal;
}
.bespoke-content li {
  margin-block-end: var(--wp--preset--spacing--md);
  line-height: var(--wp--custom--leading--relaxed);
}
.bespoke-content li::marker {
  color: var(--wp--preset--color--accent);
}
.bespoke-content li:last-child {
  margin-block-end: 0;
}
.bespoke-content li > strong:first-child {
  color: var(--wp--preset--color--accent);
  font-weight: var(--wp--custom--weight--semibold);
}
.bespoke-content strong {
  color: var(--wp--preset--color--text);
  font-weight: var(--wp--custom--weight--semibold);
}
.bespoke-content em {
  font-style: italic;
}
.bespoke-content a {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 150ms ease;
}
.bespoke-content a:hover {
  color: var(--wp--preset--color--accent-hover);
}
.bespoke-content blockquote {
  margin: var(--wp--preset--spacing--lg) 0;
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
  border-inline-start: 3px solid var(--wp--preset--color--accent);
  background: var(--wp--preset--color--surface);
  border-radius: 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0;
  font-style: italic;
  color: var(--wp--preset--color--text-secondary);
}
.bespoke-content hr {
  border: 0;
  border-top: 1px solid var(--wp--preset--color--border-light);
  margin: var(--wp--preset--spacing--2-xl) 0;
}

@media (max-width: 768px) {
  .bespoke-content {
    padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
    border-radius: var(--wp--custom--radius--md);
  }
  .bespoke-content h2 {
    font-size: var(--wp--preset--font-size--xl);
    margin-block-start: var(--wp--preset--spacing--xl);
  }
  .bespoke-content h3 {
    font-size: var(--wp--preset--font-size--lg);
  }
  .bespoke-content ul, .bespoke-content ol {
    padding-inline-start: var(--wp--preset--spacing--md);
  }
}
body.is-portal-page main {
  padding-top: calc(var(--wp--custom--nav--height) + var(--wp--preset--spacing--lg));
}

.portal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  font-size: var(--wp--preset--font-size--xs);
  font-family: var(--wp--preset--font-family--body);
  font-weight: var(--wp--custom--weight--medium);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  margin-bottom: var(--wp--preset--spacing--md);
}
.portal-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--wp--preset--color--border);
}
.portal-eyebrow__num {
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--text-secondary);
}

.portal-section-title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--3-xl);
  font-weight: var(--wp--custom--weight--semibold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin: 0 0 var(--wp--preset--spacing--md);
  max-width: 56ch;
}

.portal-section-lede {
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  max-width: 64ch;
  margin: 0 0 var(--wp--preset--spacing--2-xl);
}

.portal-anchor {
  display: block;
  position: relative;
  top: -40px;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.portal-hero {
  padding-block: var(--wp--preset--spacing--xl) 0;
  display: grid;
  gap: var(--wp--preset--spacing--2-xl);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (width >= 900px) {
  .portal-hero:has(.portal-hero__visual) {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--wp--preset--spacing--3-xl);
  }
}
.portal-hero__content {
  max-width: 60ch;
}
.portal-hero__visual {
  align-self: center;
  min-width: 0;
}
.portal-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  font-size: var(--wp--preset--font-size--xs);
  font-family: var(--wp--preset--font-family--body);
  font-weight: var(--wp--custom--weight--medium);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  margin-bottom: var(--wp--preset--spacing--md);
}
.portal-hero__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--wp--preset--color--border);
}
.portal-hero__eyebrow-num {
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--text-secondary);
}
.portal-hero__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--hero);
  font-weight: var(--wp--custom--weight--semibold);
  line-height: var(--wp--custom--leading--tight);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
  margin: 0 0 var(--wp--preset--spacing--lg);
}
.portal-hero__title em {
  font-style: normal;
  color: var(--wp--preset--color--accent);
}
.portal-hero__lede {
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  max-width: 52ch;
  margin: 0 0 var(--wp--preset--spacing--xl);
}
.portal-hero__lede--emphasis {
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
  background: color-mix(in srgb, var(--wp--preset--color--accent) 6%, transparent);
  border-left: 3px solid var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius--sm);
  color: var(--wp--preset--color--text);
  font-size: var(--wp--preset--font-size--base);
}
.portal-hero__actions {
  display: flex;
  gap: var(--wp--preset--spacing--sm);
  flex-wrap: wrap;
}

.portal-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--wp--preset--spacing--md);
}
.portal-checklist__item {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--preset--spacing--lg);
  background: var(--wp--preset--color--bg);
}
.portal-checklist__icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--sm);
  display: grid;
  place-items: center;
  margin-bottom: var(--wp--preset--spacing--md);
  color: var(--wp--preset--color--accent);
}
.portal-checklist__icon--no {
  color: var(--wp--preset--color--error);
  border-color: color-mix(in srgb, var(--wp--preset--color--error) 30%, transparent);
}
.portal-checklist__icon--emphasis {
  color: var(--wp--preset--color--accent);
  background: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
}
.portal-checklist__item:has(.portal-checklist__icon--emphasis) {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 4%, var(--wp--preset--color--bg));
  border-color: color-mix(in srgb, var(--wp--preset--color--accent) 25%, var(--wp--preset--color--border));
}
.portal-checklist__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
  margin: 0 0 var(--wp--preset--spacing--2-xs);
}
.portal-checklist__text {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  margin: 0;
}

.portal-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--md);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 900px) {
  .portal-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .portal-steps {
    grid-template-columns: 1fr;
  }
}
.portal-steps__item {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  padding: var(--wp--preset--spacing--lg);
  background: var(--wp--preset--color--bg);
  display: flex;
  flex-direction: column;
}
.portal-steps__num {
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--medium);
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--text-muted);
  letter-spacing: var(--wp--custom--tracking--normal);
  margin-bottom: var(--wp--preset--spacing--md);
}
.portal-steps__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--semibold);
  line-height: var(--wp--custom--leading--tight);
  color: var(--wp--preset--color--text);
  margin: 0 0 var(--wp--preset--spacing--sm);
}
.portal-steps__text {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  margin: 0;
  flex: 1;
}
.portal-steps__time {
  display: inline-block;
  margin-top: var(--wp--preset--spacing--md);
  padding-top: var(--wp--preset--spacing--md);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  border-top: 1px solid var(--wp--preset--color--border);
}

.portal-cta {
  background: var(--wp--preset--color--accent-light);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  padding: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--wp--preset--spacing--lg);
  align-items: center;
}
@media (max-width: 760px) {
  .portal-cta {
    grid-template-columns: 1fr;
  }
}
.portal-cta__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: var(--wp--custom--weight--semibold);
  line-height: var(--wp--custom--leading--tight);
  color: var(--wp--preset--color--text);
  margin: 0 0 var(--wp--preset--spacing--sm);
}
.portal-cta__text {
  color: var(--wp--preset--color--text-secondary);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading--normal);
  max-width: 56ch;
  margin: 0;
}
.portal-cta__action {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 760px) {
  .portal-cta__action {
    justify-content: flex-start;
  }
}
.portal-cta--secondary-track {
  background: var(--wp--preset--color--bg);
}
.portal-cta__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wp--preset--spacing--md);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--sm);
}
.portal-cta__list li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--wp--preset--color--text-secondary);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading--normal);
}
.portal-cta__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent);
}
.portal-cta__list li strong {
  color: var(--wp--preset--color--text);
}
.portal-cta__text--note {
  margin-top: var(--wp--preset--spacing--md);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
}

.portal-steps--three {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .portal-steps--three {
    grid-template-columns: 1fr;
  }
}
.portal-steps__cta {
  margin-top: var(--wp--preset--spacing--md);
}
.portal-steps__cta .btn {
  width: 100%;
  justify-content: center;
}
.portal-steps__item--track .portal-steps__title {
  font-size: var(--wp--preset--font-size--lg);
}

.portal-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--wp--preset--spacing--md);
}

.portal-theme-card {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  background: var(--wp--preset--color--bg);
  display: flex;
  flex-direction: column;
  transition: border-color var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.portal-theme-card:hover {
  border-color: var(--wp--preset--color--text-muted);
}
.portal-theme-card__shot {
  aspect-ratio: 16/10;
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--preset--color--border);
  position: relative;
  overflow: hidden;
}
.portal-theme-card__shot svg {
  width: 100%;
  height: 100%;
  display: block;
}
.portal-theme-card__tag {
  position: absolute;
  top: var(--wp--preset--spacing--sm);
  right: var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--medium);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--wp--custom--radius--sm);
  background: rgba(255, 255, 255, 0.9);
  color: var(--wp--preset--color--text-muted);
  backdrop-filter: blur(6px);
}
.portal-theme-card__body {
  padding: var(--wp--preset--spacing--lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.portal-theme-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--sm);
  margin-bottom: var(--wp--preset--spacing--2-xs);
}
.portal-theme-card__name {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
}
.portal-theme-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--portal-dot, var(--wp--preset--color--accent));
}
.portal-theme-card__desc {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  margin: 0 0 var(--wp--preset--spacing--md);
}
.portal-theme-card__foot {
  margin-top: auto;
}

.portal-link-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xs);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--medium);
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  transition: color var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}
.portal-link-inline:hover {
  color: var(--wp--preset--color--accent-hover);
}
.portal-link-inline .btn__arrow {
  transition: transform var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
}
.portal-link-inline:hover .btn__arrow {
  transform: translateX(3px);
}

.portal-blueprint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--wp--preset--spacing--md);
}

.portal-blueprint-card {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--bg);
  display: flex;
  flex-direction: column;
  transition: border-color var(--wp--custom--duration--normal) var(--wp--custom--ease-out);
  overflow: hidden;
}
.portal-blueprint-card:hover {
  border-color: var(--wp--preset--color--text-muted);
}
.portal-blueprint-card__illus {
  aspect-ratio: 4/3;
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--preset--color--border);
  position: relative;
  overflow: hidden;
}
.portal-blueprint-card__illus img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}
.portal-blueprint-card__illus svg {
  width: 100%;
  height: 100%;
  display: block;
  padding: var(--wp--preset--spacing--lg);
}
@media (max-width: 520px) {
  .portal-blueprint-card__illus {
    aspect-ratio: 16/10;
  }
  .portal-blueprint-card__illus svg {
    padding: var(--wp--preset--spacing--md);
  }
}
.portal-blueprint-card__body {
  padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xl);
  flex: 1;
}
.portal-blueprint-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--sm);
  margin-bottom: var(--wp--preset--spacing--sm);
}
.portal-blueprint-card__name {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--semibold);
  letter-spacing: var(--wp--custom--tracking--tight);
  color: var(--wp--preset--color--text);
}
.portal-blueprint-card__tag {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--medium);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  font-variant-numeric: tabular-nums;
}
.portal-blueprint-card__desc {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--relaxed);
  margin: 0;
}

.portal-email-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--md);
}
@media (max-width: 900px) {
  .portal-email-wrap {
    grid-template-columns: 1fr;
  }
}

.portal-email-card {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  background: var(--wp--preset--color--bg);
}
.portal-email-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
  border-bottom: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
}
.portal-email-card__type {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--weight--medium);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
}
.portal-email-card__dots {
  display: flex;
  gap: 5px;
}
.portal-email-card__dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--wp--preset--color--border);
  display: inline-block;
}

.portal-email-preview {
  padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--xl);
  background: var(--wp--preset--color--bg);
}
.portal-email-preview__meta {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  margin-bottom: var(--wp--preset--spacing--md);
  padding-bottom: var(--wp--preset--spacing--md);
  border-bottom: 1px dashed var(--wp--preset--color--border);
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--wp--preset--spacing--xs);
}
.portal-email-preview__meta span {
  color: var(--wp--preset--color--text);
}
.portal-email-preview__subject {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
  margin-bottom: var(--wp--preset--spacing--md);
  letter-spacing: var(--wp--custom--tracking--tight);
}
.portal-email-preview__body {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--relaxed);
  margin-bottom: var(--wp--preset--spacing--md);
}
.portal-email-preview__body p {
  margin: 0;
  color: var(--wp--preset--color--text-secondary);
}
.portal-email-preview__body p + p {
  margin-top: var(--wp--preset--spacing--sm);
}
.portal-email-preview__body strong {
  color: var(--wp--preset--color--text);
}
.portal-email-preview__btn {
  display: inline-block;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-text);
  padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  border-radius: var(--wp--custom--radius--md);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight--medium);
}
.portal-email-preview__foot {
  margin-top: var(--wp--preset--spacing--lg);
  padding-top: var(--wp--preset--spacing--md);
  border-top: 1px solid var(--wp--preset--color--border);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  display: flex;
  justify-content: space-between;
}

.portal-email-note {
  margin-top: var(--wp--preset--spacing--lg);
  padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
  border-left: 2px solid var(--wp--preset--color--border);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--text-muted);
  line-height: var(--wp--custom--leading--normal);
}

.portal-contact {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--wp--preset--spacing--2-xl);
  align-items: center;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--lg);
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--wp--preset--color--surface);
}
@media (max-width: 860px) {
  .portal-contact {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--xl);
  }
}
.portal-contact__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--2-xl);
  font-weight: var(--wp--custom--weight--semibold);
  line-height: var(--wp--custom--leading--tight);
  color: var(--wp--preset--color--text);
  margin: 0 0 var(--wp--preset--spacing--md);
}
.portal-contact__text {
  color: var(--wp--preset--color--text-secondary);
  line-height: var(--wp--custom--leading--normal);
  margin: 0 0 var(--wp--preset--spacing--lg);
}
.portal-contact__person {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--wp--preset--spacing--md);
  padding: var(--wp--preset--spacing--lg);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--bg);
  align-items: start;
}
.portal-contact__avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-text);
  display: grid;
  place-items: center;
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--weight--semibold);
  font-size: var(--wp--preset--font-size--lg);
  letter-spacing: var(--wp--custom--tracking--normal);
}
.portal-contact__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--weight--semibold);
  color: var(--wp--preset--color--text);
  margin-bottom: 2px;
}
.portal-contact__role {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-muted);
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  margin-bottom: var(--wp--preset--spacing--sm);
}
.portal-contact__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--2-xs);
  font-size: var(--wp--preset--font-size--sm);
}
.portal-contact__links a {
  color: var(--wp--preset--color--text);
  text-decoration: none;
  transition: color var(--wp--custom--duration--fast) var(--wp--custom--ease-out);
}
.portal-contact__links a:hover {
  color: var(--wp--preset--color--accent);
}

.text-accent {
  color: var(--wp--preset--color--accent);
}

.text-highlight {
  color: var(--wp--preset--color--highlight);
}

.text-muted {
  color: var(--wp--preset--color--text-muted);
}

.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;
}

/*# sourceMappingURL=main.css.map */