/* ============================================
   Components
   ============================================ */

/* ----- Custom Fonts ----- */
@font-face {
  font-family: 'ElCaminoSoftEdgesCaps';
  src: url('../assets/fonts/ElCamino-SoftEdgesCaps.otf') format('opentype'),
       url('../assets/fonts/ElCaminoSoftEdgesCaps.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ----- Section Label ("// " markers) ----- */

.label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--color-accent-dark);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.label--light {
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.label--light::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent), transparent);
}

.label--dark {
  color: var(--color-primary);
}

/* ----- Header (Floating Pill) ----- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: var(--space-sm) var(--container-padding);
  transition: padding var(--transition-normal);
}

.header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  padding-inline: var(--container-padding);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background var(--transition-normal),
              border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}

.header__icon {
  flex-shrink: 0;
}

.header__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  white-space: nowrap;
}

.header__wordmark-main {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-white);
  letter-spacing: 0.04em;
}

.header__wordmark-sep {
  width: 28px;
  height: 1.5px;
  background: linear-gradient(90deg, #C9993A, #FFDA8E);
  margin: 4px 0;
}

.header__wordmark-sub {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.625rem;
  margin-top: 0.20rem;
  color: var(--color-white);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
}

.header--scrolled .header__wordmark-main {
  color: var(--color-dark);
}

.header--scrolled .header__wordmark-sub {
  color: var(--color-dark);
  opacity: 0.5;
}

@media (min-width: 1024px) {
  .header__wordmark-main {
    font-size: 1.375rem;
  }

  .header__wordmark-sub {
    font-size: 0.6875rem;
  }
}

.header__nav {
  display: none;
  gap: var(--space-lg);
  align-items: center;
}

.header__link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  transition: color var(--transition-fast);
  letter-spacing: 0.01em;
}

.header__link:hover,
.header__link--active {
  color: var(--color-white);
}

.header__link--active {
  position: relative;
}

.header__link--active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent);
  border-radius: 1px;
}

.header__actions {
  display: none;
  gap: var(--space-sm);
  align-items: center;
}

/* Scrolled — solid white pill */
.header--scrolled {
  padding-top: 0.5rem;
}

.header--scrolled .header__inner {
  background: var(--color-white);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.header--scrolled .header__link {
  color: var(--color-dark);
}

.header--scrolled .header__link:hover,
.header--scrolled .header__link--active {
  color: var(--color-primary);
}

/* Hamburger */

.header__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 200;
}

.header__burger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
  border-radius: 2px;
  transition: transform var(--transition-normal),
              opacity var(--transition-normal);
}

.header--scrolled .header__burger span {
  background-color: var(--color-dark);
}

.header__burger--open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__burger--open span:nth-child(2) {
  opacity: 0;
}

.header__burger--open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.header__burger--open span {
  background-color: var(--color-white) !important;
}

/* ----- Mobile Menu ----- */

.mobile-menu {
  position: fixed;
  inset: 0;
  background-color: var(--color-primary);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.mobile-menu--open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.mobile-menu__link {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mobile-menu__link:hover {
  color: var(--color-accent);
}

.mobile-menu__footer {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* ----- Buttons ----- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 1.0625rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  border: 2px solid transparent;
  line-height: 1;
  letter-spacing: 0.01em;
}

.btn svg {
  flex-shrink: 0;
}

.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-dark);
  border-color: var(--color-accent);
}

.btn--accent:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn--ghost:hover {
  border-color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.08);
}

.btn--dark {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn--dark:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn--outline-dark {
  background-color: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.btn--outline-dark:hover {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.btn--charcoal {
  background-color: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.btn--charcoal:hover {
  background-color: var(--color-darker);
  border-color: var(--color-darker);
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--fs-small);
}

/* ----- Hero (Full-screen BG Image) ----- */

.hero-group {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
}

.hero {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  background-image: url('../assets/hero-bg.jpg');
  background-color: var(--color-darker);
  background-size: auto 105%;
  background-position: right top;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(26, 23, 20, 0.5) 0%,
      transparent 15%,
      transparent 85%,
      rgba(26, 23, 20, 0.4) 100%
    ),
    linear-gradient(
      90deg,
      var(--color-darker) 0%,
      var(--color-darker) 30%,
      rgba(26, 23, 20, 0.85) 45%,
      rgba(26, 23, 20, 0.4) 60%,
      rgba(26, 23, 20, 0.1) 75%,
      transparent 100%
    );
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  width: 100%;
}

.hero__title {
  font-size: var(--fs-display);
  color: var(--color-white);
  margin-bottom: var(--space-lg);
  text-wrap: balance;
  line-height: 1.08;
  max-width: 820px;
  font-weight: var(--fw-bold);
}

.hero__title em {
  font-style: normal;
  color: var(--color-accent);
}

.hero__subtitle {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-xl);
  line-height: 1.75;
  max-width: 500px;
  font-weight: var(--fw-light);
  letter-spacing: 0.01em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* ----- Attorneys hero variant ----- */
.hero--attorneys {
  background-image: url('../assets/hero-attorneys.jpg');
  background-size: cover;
  background-position: center right;
}

.hero--attorneys::before {
  background:
    linear-gradient(
      180deg,
      rgba(26, 23, 20, 0.55) 0%,
      transparent 18%,
      transparent 82%,
      rgba(26, 23, 20, 0.5) 100%
    ),
    linear-gradient(
      90deg,
      var(--color-darker) 0%,
      var(--color-darker) 34%,
      rgba(26, 23, 20, 0.9) 50%,
      rgba(26, 23, 20, 0.45) 66%,
      rgba(26, 23, 20, 0.15) 82%,
      transparent 100%
    );
}

.hero__signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0;
}

.hero__signals li {
  position: relative;
  padding-left: 1.15rem;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.01em;
}

.hero__signals li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  transform: translateY(-50%);
}

/* ----- Image Placeholders ----- */

.image-placeholder {
  width: 100%;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--color-primary-light) 0%,
    var(--color-primary) 50%,
    var(--color-primary-dark) 100%
  );
}

.image-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    rgba(255, 255, 255, 0.02) 20px,
    rgba(255, 255, 255, 0.02) 40px
  );
}

.image-placeholder--hero {
  aspect-ratio: 3 / 4;
}



/* ----- Marquee ----- */

.marquee {
  background-color: var(--color-darker);
  padding-block: var(--space-sm);
  overflow: hidden;
}

.marquee__track {
  display: flex;
  gap: var(--space-lg);
  animation: marquee-scroll 40s linear infinite;
  white-space: nowrap;
  will-change: transform;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.marquee__sep {
  opacity: 0.35;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

/* ----- About ----- */

#about.section {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--space-lg);
}

.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: 100%;
}

.about__header {
  max-width: 820px;
}

.about__header .label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-accent-dark);
  justify-content: center;
}

.about__header .label::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent-dark), transparent);
}

.about__heading {
  margin-bottom: var(--space-xs);
  font-size: clamp(1.5rem, 2.75vw, 2.25rem);
  line-height: 1.25;
  text-wrap: balance;
}

.about__subtitle {
  color: var(--color-gray-600);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.7;
  font-style: italic;
}

.about__subtitle strong {
  color: var(--color-dark);
  font-weight: var(--fw-semibold);
}

.about__visual {
  position: relative;
  width: 100%;
}

.about__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.about__photo {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

/* Spinning badge */
.about__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 4px 24px rgba(212, 168, 83, 0.35);
}

.about__badge-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: badge-spin 20s linear infinite;
}

.about__badge-text {
  font-size: 11px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 3px;
  fill: var(--color-dark);
}

.about__badge-logo {
  position: relative;
  z-index: 1;
  filter: brightness(0);
}

@keyframes badge-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.about__cta .btn {
  border-radius: var(--radius-full);
  padding: 0.875rem 2.5rem;
  font-size: 0.9375rem;
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  width: 100%;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-gray-200);
}

.about__stat {
  text-align: left;
}

.about__stat-label {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-gray-600);
  margin-bottom: var(--space-xs);
  font-weight: var(--fw-regular);
}

.about__stat-value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* About — dark accents on warm background */

#about .about__heading em {
  font-style: normal;
  color: var(--color-accent-dark);
}


/* ----- Link Arrow ----- */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-decoration: none;
  font-size: 1.0625rem;
  transition: gap var(--transition-normal);
  margin-top: var(--space-sm);
}

.link-arrow:hover {
  gap: 0.85rem;
}

.link-arrow svg {
  flex-shrink: 0;
}

/* ----- Services ----- */

#services {
  background: var(--color-darker);
}

.services__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.services__header h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.15;
}

.services__header h2 em {
  font-style: normal;
  color: var(--color-accent);
}

.services__header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: var(--space-md);
}

.services__header-sub {
  color: rgba(255, 255, 255, 0.55);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.75;
}

.btn--inline {
  width: auto;
}

.services__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.service-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: var(--space-xl);
  align-items: start;
  background: var(--color-dark);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 218, 142, 0.06);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  will-change: transform, opacity;
  transform-origin: 50% 0;
}

.service-item__highlight {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.service-item__title {
  font-family: var(--font-heading);
  font-size: clamp(1.1875rem, 2vw, 1.5rem);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.service-item__desc {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.0625rem;
  line-height: 1.8;
  margin-bottom: var(--space-md);
  max-width: 620px;
}

.service-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.tag {
  display: inline-block;
  padding: 0.3125rem 0.875rem;
  border: 1px solid rgba(255, 218, 142, 0.15);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  color: var(--color-accent);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 218, 142, 0.04);
}

.service-item__visual {
  display: none;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255, 218, 142, 0.08);
  align-self: center;
}

.service-item__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.services__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
}

/* ----- Audience / Who it's for ----- */

/* -- Audience: top row (header + intro) -- */

.audience__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.audience__header .label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-accent-dark);
}

.audience__header .label::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent-dark), transparent);
}

.audience__header h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.15;
}

.audience__header h2 em {
  font-style: normal;
  color: var(--color-accent-dark);
}

.audience__header-sub {
  color: var(--color-gray-600);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.75;
  margin-top: var(--space-sm);
}

.audience__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-md);
}

.audience__intro .btn--inline {
  width: auto;
}

/* -- Audience: carousel -- */

.audience__sticky-wrapper {
  height: 250vh;
  position: relative;
  padding-block: 0;
  background: linear-gradient(to bottom, #fff, var(--color-warm));
}


.audience__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}


.audience__carousel {
  position: relative;
  width: calc(100% + ((100vw - 100%) / 2));
}

.audience__track {
  display: flex;
  gap: var(--space-lg);
  overflow-x: hidden;
  scrollbar-width: none;
  padding-bottom: var(--space-sm);
  padding-right: calc((100vw - 100%));
}

.audience__track::-webkit-scrollbar {
  display: none;
}


.audience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  min-width: 85%;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  scroll-snap-align: start;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform var(--transition-normal),
              box-shadow var(--transition-normal);
}

/* -- Card color variants -- */

.audience-card--dark {
  background-color: var(--color-dark);
  color: #fff;
}

.audience-card--dark .audience-card__title {
  color: var(--color-accent);
}

.audience-card--dark .audience-card__badge {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
}

.audience-card--warm {
  background-color: var(--color-accent);
  color: var(--color-dark);
}

.audience-card--warm .audience-card__title {
  color: var(--color-primary);
}

.audience-card--warm .audience-card__badge {
  background: rgba(0, 0, 0, 0.1);
  color: var(--color-dark);
}

.audience-card--light {
  background-color: var(--color-primary);
  color: #fff;
}

.audience-card--light .audience-card__badge {
  background: rgba(255, 255, 255, 0.15);
}

/* -- Card image (bottom-right) -- */

.audience-card__img {
  width: 280px;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  align-self: flex-end;
}

/* -- Top bar (link + badge) -- */

.audience-card__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  margin-bottom: auto;
}

.audience-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  color: inherit;
  text-decoration: none;
  transition: background var(--transition-normal), color var(--transition-normal);
  flex-shrink: 0;
}

.audience-card--dark .audience-card__link {
  background: var(--color-accent);
  color: var(--color-dark);
}

.audience-card--dark .audience-card__link:hover {
  background: var(--color-accent-dark);
  color: var(--color-dark);
}

.audience-card--warm .audience-card__link {
  background: var(--color-primary);
  color: var(--color-accent);
}

.audience-card--warm .audience-card__link:hover {
  background: var(--color-primary-dark);
  color: var(--color-accent);
}

.audience-card--light .audience-card__link {
  background: var(--color-accent);
  color: var(--color-dark);
}

.audience-card--light .audience-card__link:hover {
  background: var(--color-accent-dark);
  color: var(--color-dark);
}

.audience-card--light .audience-card__title {
  color: var(--color-accent);
}

.audience-card__badge {
  padding: 0.375rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 100px;
  color: inherit;
  white-space: nowrap;
}

/* -- Card body -- */

.audience-card__body {
  position: relative;
  z-index: 2;
  color: inherit;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl);
}

.audience-card__text {
  flex: 1;
  min-width: 0;
}

.audience-card__tags {
  margin-top: auto;
}

.audience-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: inherit;
  text-shadow: none;
}

.audience-card p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: inherit;
  opacity: 0.85;
  margin-bottom: var(--space-md);
  max-width: 380px;
}

/* -- Card tags -- */

.audience-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.audience-card__tags span {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  color: inherit;
  border: 1.5px solid currentColor;
  opacity: 0.6;
  border-radius: 100px;
}


/* ----- How to Start (stacking cards) ----- */

.steps__wrapper {
  background: var(--color-warm);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.steps__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-xl);
}

/* -- Left: sticky heading -- */

.steps__left {
  position: sticky;
  top: 30vh;
  align-self: start;
}

.steps__left .label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-accent-dark);
}

.steps__left .label::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent-dark), transparent);
}

.steps__heading {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--color-dark);
  margin-top: var(--space-sm);
  text-transform: uppercase;
}

.steps__heading em {
  font-style: normal;
  color: var(--color-accent-dark);
}

.steps__sub {
  margin-top: var(--space-md);
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.75;
  color: var(--color-gray-600);
  max-width: 100%;
}

/* -- Right: stacking cards -- */

.steps__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.steps__card {
  position: sticky;
  top: 15vh;
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.3s ease;
}

/* Card 1 — white bg */
.steps__card--1 {
  background: var(--color-white);
  color: var(--color-dark);
}
.steps__card--1 .steps__title { color: var(--color-dark); }

/* Card 2 — light aqua bg */
.steps__card--2 {
  background: #ddf0f0;
  color: var(--color-dark);
}
.steps__card--2 .steps__title { color: var(--color-primary); }

/* Card 3 — yellow bg */
.steps__card--3 {
  background: var(--color-accent);
  color: var(--color-dark);
}
.steps__card--3 .steps__title { color: var(--color-primary); }

/* Card 4 — dark bg */
.steps__card--4 {
  background: var(--color-dark);
  color: #fff;
}
.steps__card--4 .steps__title { color: var(--color-accent); }

/* Card 5 — teal bg */
.steps__card--5 {
  background: var(--color-primary);
  color: #fff;
}
.steps__card--5 .steps__title { color: var(--color-accent); }

.steps__num {
  display: none;
}

.steps__icon {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-xl);
  width: 80px;
  height: 80px;
  opacity: 0.12;
}

.steps__icon svg {
  width: 100%;
  height: 100%;
}

.steps__title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-sm);
}

.steps__desc {
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.75;
  opacity: 0.8;
  max-width: 480px;
}

.steps__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-lg);
  padding: 0.75rem 1.75rem;
  background: var(--color-accent);
  color: var(--color-dark);
  font-weight: var(--fw-semibold);
  font-size: 0.9375rem;
  border-radius: 100px;
  text-decoration: none;
  transition: background var(--transition-normal);
}

.steps__cta:hover {
  background: var(--color-accent-dark);
}

.steps__meta {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.steps__meta-label {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.steps__meta-value {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
}

@media (min-width: 1024px) {
  .steps__layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }
}

/* ----- CTA / Get Started ----- */

.cta {
  background: linear-gradient(135deg, #FFDA8E 0%, #F0C560 50%, #D4A853 100%);
  padding-block: clamp(2.5rem, 5vw, 5rem);
  min-height: 35vh;
  display: flex;
  align-items: center;
}

.cta__inner {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  text-align: center;
  width: 100%;
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -- Intro state -- */

.cta__intro {
  text-align: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.cta__intro.is-hidden {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  position: absolute;
}

.cta .label--dark {
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cta .label--dark::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
}

.cta__title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
  line-height: 1.15;
}

.cta__title em {
  font-style: normal;
  color: var(--color-primary);
}

.cta__text {
  color: var(--color-dark);
  opacity: 0.75;
  margin-bottom: var(--space-xl);
  max-width: 540px;
  margin-inline: auto;
  line-height: 1.75;
  font-size: 1.0625rem;
}

.cta__start {
  font-size: 1.0625rem;
  padding: 0.875rem 2.5rem;
  gap: 0.5rem;
}

/* -- Wizard -- */

.cta__wizard {
  display: none;
  position: relative;
  width: 100%;
}

.cta__wizard.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: ctaFadeIn 0.5s ease;
}

@keyframes ctaFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Progress */
.cta__progress {
  width: 100%;
  max-width: 400px;
  height: 3px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  margin-bottom: var(--space-xl);
  margin-inline: auto;
}

.cta__progress-fill {
  height: 100%;
  width: 20%;
  background: var(--color-dark);
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* Steps */
.cta__step {
  display: none;
  text-align: center;
}

.cta__step.is-active {
  display: block;
  animation: ctaFadeIn 0.4s ease;
}

.cta__step-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.cta__step-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--fw-bold);
  color: var(--color-dark);
  margin-bottom: var(--space-xl);
  line-height: 1.15;
}

/* Options (horizontal) */
.cta__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-inline: auto;
}

.cta__option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(4px);
}

.cta__option:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--color-dark);
}

.cta__option.is-selected {
  background: var(--color-dark);
  color: var(--color-accent);
  border-color: var(--color-dark);
}

/* Input fields */
.cta__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 600px;
  margin-inline: auto;
  width: 100%;
}

.cta__fields--inline {
  flex-direction: row;
  align-items: flex-start;
  max-width: 600px;
}

.cta__field-row {
  display: flex;
  gap: 0.75rem;
}

.cta__field-group {
  flex: 1;
  text-align: left;
}

.cta__input {
  width: 100%;
  padding: 1.25rem 1.25rem 0.75rem;
  font-size: 1rem;
  font-family: var(--font-body);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-dark);
  transition: border-color 0.3s ease, background 0.3s ease;
  backdrop-filter: blur(4px);
}

.cta__input:focus {
  outline: none;
  border-color: var(--color-dark);
  background: rgba(255, 255, 255, 0.9);
}

/* Floating label inside input */
.cta__field-group {
  position: relative;
}

.cta__float-label {
  position: absolute;
  top: 50%;
  left: 1.25rem;
  transform: translateY(-50%);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  color: var(--color-dark);
  opacity: 0.45;
  pointer-events: none;
  transition: all 0.2s ease;
}

.cta__input:focus + .cta__float-label,
.cta__input:not(:placeholder-shown) + .cta__float-label {
  top: 0.45rem;
  transform: translateY(0);
  font-size: 0.7rem;
  opacity: 0.6;
}

/* Navigation bar (Back + Continue) */
.cta__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.cta__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.cta__nav-btn:hover { opacity: 1; }

.cta__nav-btn--next.is-disabled {
  opacity: 0.2;
  pointer-events: none;
}

.cta__nav-btn--next:not(.is-disabled) {
  opacity: 0.8;
  color: var(--color-primary);
}

.cta__nav-btn--next:not(.is-disabled):hover {
  opacity: 1;
}

/* Done state */
.cta__done { text-align: center; }

.cta__done-check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
}

.cta__done-text {
  color: var(--color-dark);
  opacity: 0.75;
  line-height: 1.75;
  font-size: 1.0625rem;
  margin-bottom: var(--space-xl);
}

.cta__done-actions {
  display: flex;
  justify-content: center;
}

/* ----- Footer ----- */

.footer {
  background-color: var(--color-dark);
  color: rgba(255, 255, 255, 0.65);
  padding-top: var(--space-3xl);
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: 570px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1249 1370'%3E%3Cg transform='matrix(1,0,0,1,-29.21,-74.86)'%3E%3Cg transform='matrix(4.1667,0,0,4.1667,0,0)'%3E%3Cg transform='matrix(1,0,0,1,218.61,255.01)'%3E%3Cpath d='M0,-145.44C0.157,-145.949 0.731,-147.85 1.552,-150.572L3.375,-138.214C3.759,-135.609 3.954,-132.95 3.954,-130.313C3.954,-120.37 1.194,-110.67 -4.028,-102.261L-12.12,-89.23L-2.366,-77.392C4.833,-68.655 9.006,-58.1 9.702,-46.865L9.708,-46.77L9.715,-46.676C9.73,-46.455 9.739,-46.235 9.749,-46.014C9.79,-45.135 9.807,-44.325 9.807,-43.507C9.807,-43.208 9.805,-42.909 9.8,-42.611C6.521,-46.501 2.92,-50.151 -0.977,-53.517C-18.635,-68.766 -41.26,-77.165 -64.682,-77.165C-73.062,-77.165 -81.366,-76.08 -89.384,-73.983C-82.066,-84.484 -71.337,-92.033 -58.885,-95.374L-58.65,-95.436C-57.409,-95.705 -54.433,-96.305 -52.031,-96.776L-51.433,-96.893L-50.842,-97.045C-47.879,-97.803 -44.99,-98.742 -42.185,-99.854L-39.921,-100.794C-22.304,-108.476 -8.321,-122.975 -1.455,-141.181L-0.08,-144.827L-0.08,-145.19C-0.054,-145.269 -0.028,-145.353 -0.001,-145.44L0,-145.44ZM27.169,-237.043L-9.211,-227.712C-17.164,-225.673 -24.857,-222.689 -32.079,-218.844C-34.795,-217.401 -37.466,-215.825 -39.996,-214.171C-54.79,-204.538 -66.682,-191.526 -74.818,-176.163C-92.077,-170.538 -107.981,-161.158 -121.297,-148.683C-129.344,-141.156 -136.354,-132.582 -142.122,-123.21C-145.192,-118.231 -147.923,-112.996 -150.232,-107.66L-151.99,-103.598L-151.99,-103.376C-153.578,-99.291 -154.953,-95.098 -156.097,-90.857L-156.119,-90.798L-156.37,-89.83L-156.372,-89.825L-156.393,-89.74C-159.587,-77.428 -192.557,-37.66 -201.268,-29.454C-208.218,-23.737 -212.054,-15.031 -211.558,-6.018C-211.045,3.299 -205.988,11.792 -198.031,16.7C-196.138,17.868 -194.415,19.262 -192.891,20.861C-191.122,24.009 -188.968,26.915 -186.465,29.527C-186.045,30.008 -185.618,30.483 -185.179,30.954C-181.326,35.103 -176.904,38.692 -172.077,41.615C-167.265,55.284 -154.61,66.489 -143.623,74.068C-137.662,78.182 -116.893,91.603 -99.931,91.603C-89.2,91.603 -82.882,86.377 -80.07,83.262C-69.5,71.548 -54.349,64.658 -38.502,64.36C-38.143,64.353 -37.764,64.349 -37.386,64.349C-36.75,64.349 -36.114,64.36 -35.482,64.381L-35.129,64.392L-34.643,64.392L-34.491,64.391C-15.535,64.155 2.623,59.782 19.48,51.393C55.461,33.505 80.587,-0.691 86.685,-40.076C87.645,-46.293 88.13,-52.638 88.13,-58.941C88.13,-60.674 88.092,-62.453 88.018,-64.237L88.018,-64.276L87.994,-64.783C87.232,-80.945 83.359,-96.545 76.482,-111.15C67.782,-129.618 54.473,-145.794 37.957,-157.986L10.983,-181.907C11.75,-184.459 12.263,-186.162 12.356,-186.473L12.379,-186.546L12.4,-186.62L16.612,-200.999L27.169,-237.043ZM-3.901,-207.008L-8.113,-192.628C-8.113,-192.628 -19.662,-154.221 -20.431,-151.719C-20.431,-151.714 -21.132,-149.727 -21.454,-148.729L-21.454,-148.724C-27.18,-133.542 -40.122,-121.852 -56.142,-117.751C-56.142,-117.751 -64.444,-116.124 -64.424,-116.017C-83.244,-110.969 -99.156,-98.908 -109.138,-82.835C-114.962,-73.456 -118.764,-62.705 -119.947,-51.19L-119.947,-51.186C-120.142,-48.994 -120.429,-46.832 -120.794,-44.694C-122.43,-35.19 -130.367,-18.148 -130.362,-18.129C-127.334,-23.343 -123.687,-28.163 -119.528,-32.492C-117.396,-34.713 -115.127,-36.801 -112.736,-38.749C-99.663,-49.398 -82.927,-55.791 -64.682,-55.791C-26.615,-55.791 4.893,-27.955 10.268,8.312C23.23,-5.162 31.182,-23.416 31.182,-43.507C31.182,-44.66 31.157,-45.804 31.103,-46.944C31.084,-47.358 31.065,-47.772 31.036,-48.186C30.032,-64.375 23.858,-79.178 14.13,-90.985C21.234,-102.424 25.329,-115.896 25.329,-130.313C25.329,-134.057 25.051,-137.734 24.52,-141.333C24.554,-141.303 24.594,-141.28 24.627,-141.255C38.529,-131.156 49.777,-117.683 57.144,-102.044C62.66,-90.329 66.001,-77.405 66.643,-63.776L66.643,-63.772C66.716,-62.17 66.755,-60.558 66.755,-58.941C66.755,-53.64 66.346,-48.429 65.562,-43.346C60.426,-10.168 39.162,17.737 9.957,32.257C-3.526,38.967 -18.698,42.818 -34.756,43.018L-34.776,43.018C-35.643,42.989 -36.514,42.975 -37.386,42.975C-37.892,42.975 -38.399,42.98 -38.905,42.989C-61.561,43.416 -81.87,53.351 -95.939,68.941C-96.734,69.822 -98.114,70.229 -99.931,70.229C-113.718,70.229 -152.697,46.869 -152.697,30.285C-152.697,29.239 -152.658,28.201 -152.576,27.179C-159.144,25.07 -164.967,21.307 -169.539,16.384C-169.939,15.955 -170.323,15.522 -170.703,15.075L-170.708,15.069C-172.347,13.431 -173.71,11.539 -174.746,9.466L-175.134,8.691C-178.425,4.693 -182.372,1.245 -186.81,-1.492C-191.004,-4.079 -191.437,-10.024 -187.552,-13.056C-183.181,-16.467 -141.079,-63.65 -135.704,-84.373C-135.699,-84.393 -135.694,-84.412 -135.689,-84.427C-134.369,-89.5 -132.67,-94.428 -130.615,-99.166L-130.615,-99.171C-128.687,-103.626 -126.448,-107.906 -123.92,-112.006C-119.134,-119.781 -113.325,-126.872 -106.684,-133.084C-93.717,-145.233 -77.561,-154.07 -59.599,-158.233C-53.337,-173.893 -42.313,-187.156 -28.3,-196.281C-26.275,-197.606 -24.181,-198.837 -22.033,-199.977C-16.356,-203 -10.28,-205.372 -3.901,-207.008' fill='%23FFDA8E'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.footer > .container {
  position: relative;
  z-index: 1;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.footer__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.footer__wordmark-main {
  font-family: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-white);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.footer__wordmark-sub {
  font-family: 'Raleway', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

.footer__brand p {
  font-size: 1rem;
  line-height: 1.75;
  max-width: 340px;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.footer__contact h4 {
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-xs);
}

.footer__contact a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 1rem;
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer__contact a:hover {
  color: var(--color-accent);
}

.footer__contact a svg {
  flex-shrink: 0;
  opacity: 0.5;
}

/* Subscribe (inside footer__top) */

.footer__subscribe h4 {
  color: var(--color-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-xs);
}

.footer__form-group {
  display: flex;
  gap: var(--space-xs);
}

.footer__input {
  flex: 1;
  padding: 0.5rem 0.875rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-small);
}

.footer__input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.footer__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Bottom row */

.footer__bottom {
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
}

.footer__disclaimer {
  font-size: 0.6875rem;
  line-height: 1.7;
  opacity: 0.3;
  margin-bottom: var(--space-md);
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.footer__bar p {
  font-size: 0.75rem;
  opacity: 0.4;
}

.footer__links {
  display: flex;
  gap: var(--space-md);
}

.footer__links a {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  font-size: 0.75rem;
  transition: color var(--transition-fast);
}

.footer__links a:hover {
  color: var(--color-accent);
}

/* ----- Language Toggle ----- */

.lang-toggle {
  display: inline-flex;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  padding: 2px;
  gap: 2px;
}

.lang-toggle__btn {
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.6875rem;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.5);
  transition: all var(--transition-fast);
  letter-spacing: 0.05em;
}

.lang-toggle__btn--active {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}

.header--scrolled .lang-toggle {
  background-color: var(--color-gray-100);
}

.header--scrolled .lang-toggle__btn {
  color: var(--color-gray-600);
}

.header--scrolled .lang-toggle__btn--active {
  background-color: var(--color-white);
  color: var(--color-dark);
  box-shadow: var(--shadow-sm);
}

/* ----- Bilingual Text Toggle ----- */

[data-lang="es"] {
  display: none;
}

html[lang="es"] [data-lang="es"] {
  display: revert;
}

html[lang="es"] [data-lang="en"] {
  display: none;
}

/* ===== For Attorneys page ===== */

.atty-pullquote {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  font-weight: var(--fw-medium);
  color: var(--color-white);
  margin: 0;
}

.atty-pullquote em {
  color: var(--color-accent);
  font-style: italic;
}

.atty-pullquote--warm {
  color: var(--color-dark);
  max-width: 20ch;
  margin: var(--space-xl) 0;
}

.atty-pullquote--warm em {
  color: var(--color-accent-dark);
}

/* Editorial intro band: title left, argument callout right */
.atty-intro {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-3xl);
  align-items: start;
  margin-bottom: var(--space-3xl);
}

.atty-intro__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  margin: var(--space-sm) 0 0;
}

.atty-intro__title em {
  color: var(--color-primary);
  font-style: italic;
}

.atty-intro__aside {
  padding-left: var(--space-xl);
  border-left: 2px solid var(--color-accent-dark);
}

.atty-intro__aside .atty-pullquote--warm {
  margin: 0 0 var(--space-md);
  max-width: none;
}

.atty-intro__support {
  font-size: 1.05rem;
  line-height: var(--lh-normal);
  color: var(--color-gray-600);
  margin: 0;
}

@media (max-width: 1023px) {
  .atty-intro {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .atty-intro__aside {
    padding-left: var(--space-lg);
  }
}

/* Shared section head */
.atty-head {
  max-width: 760px;
  margin-bottom: var(--space-2xl);
}

.atty-head--center {
  margin-inline: auto;
  text-align: center;
}

.atty-head__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  margin: var(--space-sm) 0 var(--space-md);
}

.atty-head__title em {
  color: var(--color-primary);
  font-style: italic;
}

.section--dark .atty-head__title em {
  color: var(--color-accent);
}

.atty-head__sub {
  font-size: 1.05rem;
  line-height: var(--lh-normal);
  color: var(--color-gray-600);
}

.section--dark .atty-head__sub {
  color: rgba(255, 255, 255, 0.75);
}

.atty-note {
  margin-top: var(--space-xl);
  font-style: italic;
  color: var(--color-gray-600);
  text-align: center;
}

/* Scope columns */
/* Scope section fits within one viewport minus the floating header */
#scope.section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(5.5rem, 9vh, 7rem) clamp(2rem, 5vh, 4rem);
}

/* Full-width split: intro left, deliverable panels right */
.atty-scope {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
}

.atty-scope__intro {
  align-self: center;
}

.atty-scope__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  margin-block: var(--space-xs) var(--space-sm);
}

.atty-scope__title em {
  color: var(--color-accent);
  font-style: italic;
}

.atty-scope__lead {
  font-size: 1.05rem;
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.7);
  max-width: 38ch;
}

.atty-scope__panels {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vh, 2rem);
}

/* Included: the star — light cream card that pops off the dark ground */
.atty-scope__col--yes {
  background: var(--color-warm);
  color: var(--color-dark);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vh, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.55);
}

.atty-scope__col-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
  padding-bottom: var(--space-sm);
}

.atty-scope__col--yes .atty-scope__col-title {
  color: var(--color-dark);
  border-bottom: 1px solid rgba(36, 32, 30, 0.12);
}

.atty-scope__count {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  background: var(--color-accent);
  border-radius: var(--radius-full);
  padding: 0.15rem 0.7rem;
}

.atty-scope__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.atty-scope__item {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: var(--space-sm);
  align-items: start;
  line-height: var(--lh-normal);
}

/* Included items: two-column grid to fill the width */
.atty-scope__col--yes .atty-scope__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 1.4vh, 0.9rem) clamp(1.5rem, 2.5vw, 2.5rem);
}

.atty-scope__col--yes .atty-scope__item {
  color: var(--color-dark);
  font-size: 0.95rem;
}

/* Not included: quiet guardrail as an inline row on the dark ground */
.atty-scope__col--no .atty-scope__col-title {
  font-size: 1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding-left: var(--space-xs);
}

.atty-scope__col--no .atty-scope__list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1.4vh, 0.9rem) clamp(1rem, 2vw, 1.75rem);
  padding-left: var(--space-xs);
}

.atty-scope__col--no .atty-scope__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-small);
}

.atty-scope__col--no .atty-scope__icon {
  margin-top: 0;
}

.atty-scope__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  margin-top: 0.1rem;
}

/* Solid gold check = high value */
.atty-scope__icon--yes {
  background: var(--color-primary);
  color: var(--color-accent);
}

/* Hollow × = guardrail */
.atty-scope__icon--no {
  width: 1.1rem;
  height: 1.1rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.65rem;
}

/* Final cards + CTA */
.atty-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

.atty-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.atty-card__icon {
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.atty-card__icon svg {
  width: 32px;
  height: 32px;
}

.atty-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-sm);
  color: var(--color-white);
}

.atty-card__text {
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-small);
}

.atty-cta {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.atty-cta__lead {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: var(--lh-normal);
  color: var(--color-white);
  margin-bottom: var(--space-lg);
}

.atty-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

/* Button variant used on dark sections */
.btn--outline-light {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
}

.btn--outline-light:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}

/* Responsive */
@media (max-width: 1023px) {
  #scope.section {
    min-height: 0;
  }

  .atty-scope {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: start;
  }

  .atty-scope__lead {
    max-width: none;
  }

  .atty-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .atty-scope__col--yes .atty-scope__list {
    grid-template-columns: 1fr;
  }
}


/* ----- Reveal on Scroll ----- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}