/* ==========================================================================
   Starter Website Packages - Page Styles
   ========================================================================== */

/**
 * Page-specific styles for the Starter Website Packages landing page.
 * Uses CSS custom properties from site.css for all colors and spacing.
 * Follows CUBE CSS methodology: Composition, Utility, Block, Exception.
 *
 * Semi-transparent colors — tokenized (defined in site.css :root); call sites use var():
 *   Borders → --border-hairline / --border-hairline-light
 *   Shadows → --shadow-1…6 (ink elevation ladder) ;  brand tints → --tint-primary-* ; focus → --focus
 *   Remaining raw literals (one-offs / decorative black, not tokenized):
 *     #1a1b1c0f ~6% duration-badge bg ; #0000004d ~30% inset/drop-shadow ; #00000080 ~50% inset
 *
 * Responsive Breakpoints (Desktop-First):
 * - Desktop: 1025px+ (base styles, no media query)
 * - Laptop: max-width 1024px
 * - Tablet: max-width 768px
 * - Mobile: max-width 480px
 */

/* ==========================================================================
   Composition - Layout Structure
   ========================================================================== */

/* ==========================================================================
   Utility - Single-Purpose Classes
   ========================================================================== */

/* Page-specific utility classes for spacing, visibility, and alignment */

/* Rounded section modifier - adds rounded corners to any section */
.section--rounded {
  border-radius: 100px;
}

/* Rounded + margin section modifier - adds rounded corners and margin to any section */
.section--rounded-margin {
  margin-left: 4rem;
  margin-right: 4rem;
  border-radius: 150px;
}

/* Offset accent modifier - adds decorative green rectangle behind content */
.section--offset-accent {
  position: relative;
  min-height: 65rem;
  overflow: hidden;
}

.section--offset-accent::before {
  content: '';
  position: absolute;
  top: 6rem;
  left: 25%;
  width: 70%;
  height: 40rem;
  background-color: #005623;
  z-index: 0;
  pointer-events: none;
  box-shadow: inset 0 0 30px #00000080,
              inset 0 0 60px #0000004d;
}

.section--offset-accent .section__container {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Block - Landing Page Header
   ========================================================================== */

/**
 * Wordmark-only header for this focused landing page.
 * No navigation — keeps visitor attention on the conversion path.
 * Uses the same dark background as the hero so they flow together visually.
 */

.lp-header {
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 2.5rem var(--space-md);
  display: flex;
  justify-content: center;
  align-items: center;
}

.lp-header a {
  text-decoration: none;
  border-radius: 2px;
}

.lp-header a:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}

/* Wordmark color on dark background */
.lp-header__wordmark {
  margin: 0;
  color: var(--color-text-light);
  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lp-header a:hover .lp-header__wordmark {
  color: var(--color-primary);
}

/* ==========================================================================
   Block - Hero Section
   ========================================================================== */

/* Hero section layout - 100vh min-height, centered content */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 2rem;
  background-color: var(--color-bg-dark);
  position: relative;
  overflow: hidden;
}

/* Subtle radial gradient overlay for visual interest */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    var(--tint-primary-soft) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* Hero container - constrains content width and centers */
.hero__container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Hero heading - dramatic typography */
.hero__heading {
  font-size: var(--font-size-8xl);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--color-text-light);
  margin-bottom: 2rem;
  max-width: 14ch;
  margin-left: auto;
  margin-right: auto;
}

/* Orange accent word within heading */
.hero__heading-accent {
  color: var(--color-primary);
}

/* Hero tagline - eyebrow text above heading */
.hero__tagline {
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

/* Hero subheading - supporting text below heading */
.hero__subheading {
  font-size: var(--font-size-xl);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-muted-dark);
  max-width: 60ch;
  margin: 0 auto 3rem;
}

/* Hero CTA button group - flex layout with gap */
.hero__cta-group {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   Block - Service Cards
   ========================================================================== */

/* Service card - light background variant */
.service-card {
  background-color: var(--color-surface-light);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  padding: 3rem;
  margin-top: 2rem;
  box-shadow: var(--shadow-1);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-6);
}

/* Service card - dark background variant */
.service-card--dark {
  background-color: var(--color-surface-secondary);
  border: 1px solid var(--border-hairline-light);
  border-radius: 8px;
  padding: 3rem;
  margin-top: 2rem;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Service card title */
.service-card__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: var(--color-text-dark);
}

/* Service card list */
.service-card__list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 2rem 0;
}

.service-card__list li {
  padding-left: 2rem;
  margin-bottom: 1rem;
  position: relative;
  line-height: 1.6;
  font-size: var(--font-size-base);
}

.service-card__list li:last-child {
  margin-bottom: 0;
}

/* Custom bullet point using checkmark */
.service-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.6rem;
}

/* Service card price */
.service-card__price {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  margin: 2rem 0;
  color: var(--color-text-dark);
  text-align: center;
}

.service-card__price .price {
  color: var(--color-primary);
}

/* Service card note */
.service-card__note {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  margin: 1rem 0 2rem 0;
}

.service-card--dark:hover {
  transform: translateY(-6px);
  background-color: var(--color-surface-secondary-hover);
  border-color: var(--tint-primary-edge);
}

/* Pricing card - prominent styling with accent bar */
.pricing-card {
  background-color: var(--color-surface-light);
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  padding: 3rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--color-primary);
}

.pricing-card__price {
  font-family: var(--font-typewriter, var(--font-primary));
  font-size: var(--font-size-5xl);
  font-weight: 800;
  color: var(--color-text-dark);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.pricing-card__label {
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}

/* Feature card - icon with content layout */
.feature-card {
  display: flex;
  gap: 1.5rem;
  padding: 2rem;
  background-color: transparent;
  border-radius: 8px;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
  background-color: var(--tint-primary-faint);
}

.feature-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  border-radius: 8px;
  color: var(--color-white);
}

.feature-card__content {
  flex: 1;
}

/* Card grid layout - responsive columns */
.card-grid {
  display: grid;
  gap: 2rem;
}

/* 3-column grid: desktop default */
.card-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 2-column grid: desktop default */
.card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}


/* ==========================================================================
   Block - Typography (Page-Specific)
   ========================================================================== */

/* Section headings (h2) - extra bottom space variant */
.section__heading-xspace {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2xl);
}

/* Transition heading - hero-style typography for transition sections */
.transition-heading {
  font-size: var(--font-size-8xl);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--color-text-dark);
  margin: 0;
  text-align: center;
}

/* Primary accent word - orange */
.transition-heading-accent-primary {
  color: var(--color-primary);
}

/* Secondary accent word - green */
.transition-heading-accent-secondary {
  color: var(--color-secondary);
}

/* ==========================================================================
   Block - Problem Section Illustration
   ========================================================================== */

/* Illustration wrapper - centers and constrains width */
.problem-illustration-wrapper {
  max-width: 1160px;
  margin: 0 auto 4rem auto;
  text-align: center;
}

/* Illustration image - responsive and styled */
.problem-illustration {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 30px #0000004d);
}

/* ==========================================================================
   Block - Final CTA Section
   ========================================================================== */

/* Gradient accent bar — centered decorative element beneath the heading */
.final-cta__accent {
  width: 200px;
  height: 4px;
  background: linear-gradient(to right, transparent, var(--color-primary), transparent);
  border-radius: 2px;
  margin: 2rem auto;
  box-shadow: 0 0 12px var(--tint-primary-glow);
}

/* Scale from center instead of slide up */
.final-cta__accent.fade-in-on-scroll {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.final-cta__accent.fade-in-on-scroll.is-visible {
  opacity: 1;
  transform: scaleX(1);
}

/* Supporting note — reassures visitor before the form */
.final-cta__note {
  font-size: var(--font-size-base);
  color: var(--color-text-muted-dark);
  margin: 0;
}

/* ==========================================================================
   Block - Footer
   ========================================================================== */

/* Center content vertically — no nav-grid on this page so justify instead of relying on margins */
.lp-footer .footer__container {
  justify-content: center;
  padding-top: var(--space-4xl);
}

/* Override the site.css top margin that was sized for the nav-grid above it */
.lp-footer .footer__wordmark {
  margin-top: 0;
}

/* Push copyright to the bottom of the nebula section */
.lp-footer .footer__bottom {
  margin-top: auto;
}

/* ==========================================================================
   Exception - Animations
   ========================================================================== */

/* Scroll-triggered animations and hero entrance effects */

/* Smooth scroll behavior for anchor links */
html {
  scroll-behavior: smooth;
}

/* Fade-in on scroll animation - initial state */
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fade-in on scroll - visible state (added by JavaScript) */
.fade-in-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation for grouped elements */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Staggered delays for child elements */
.stagger-children.is-visible > *:nth-child(1) {
  transition-delay: 0ms;
}

.stagger-children.is-visible > *:nth-child(2) {
  transition-delay: 100ms;
}

.stagger-children.is-visible > *:nth-child(3) {
  transition-delay: 200ms;
}

.stagger-children.is-visible > *:nth-child(4) {
  transition-delay: 300ms;
}

.stagger-children.is-visible > *:nth-child(5) {
  transition-delay: 400ms;
}

.stagger-children.is-visible > *:nth-child(6) {
  transition-delay: 500ms;
}

/* Staggered visible state */
.stagger-children.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Hero entrance animation sequence */
.hero__tagline {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeIn 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 100ms;
}

.hero__heading {
  opacity: 0;
  transform: translateY(40px);
  animation: heroFadeIn 800ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 200ms;
}

.hero__subheading {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeIn 800ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 400ms;
}

.hero__cta-group {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeIn 800ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 600ms;
}

/* Hero fade-in keyframes */
@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Optional accent line animation */
.accent-line {
  width: 0;
  height: 3px;
  background-color: var(--color-primary);
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accent-line.is-visible {
  width: 80px;
}

/* ==========================================================================
   Block - Process Timeline
   ========================================================================== */

/* Timeline container - vertical layout with connecting line */
.process-timeline {
  position: relative;
  margin: 4rem 0;
  padding-left: 0;
}

/* Vertical connecting line between steps */
.process-timeline::before {
  content: '';
  position: absolute;
  left: 2.4rem; /* Center of number circle (4.8rem / 2) */
  top: 6rem;
  bottom: 6rem;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-primary) 0%,
    var(--color-primary) 100%
  );
  opacity: 0.2;
}

/* Individual process step */
.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  margin-bottom: 4rem;
  position: relative;
}

.process-step:last-child {
  margin-bottom: 0;
}

/* Step marker column (number circle) */
.process-step__marker {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.5rem;
  position: relative;
  z-index: 2;
}

/* Number circle */
.process-step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-xl);
  font-weight: 700;
  box-shadow: 0 4px 12px var(--tint-primary-edge);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Number circle hover effect */
.process-step:hover .process-step__number {
  transform: scale(1.1);
  box-shadow: 0 6px 16px var(--tint-primary-glow);
}

/* Step content card */
.process-step__content {
  background-color: var(--color-surface-light);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  padding: 2.5rem;
  box-shadow: var(--shadow-1);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Content card hover effect */
.process-step:hover .process-step__content {
  transform: translateY(-4px);
  box-shadow: var(--shadow-5);
  border-color: var(--tint-primary-edge);
}

/* Header row with title and meta info */
.process-step__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Step title */
.process-step__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text-dark);
  margin: 0;
  line-height: 1.2;
}

/* Meta information container */
.process-step__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Duration badge */
.process-step__duration {
  display: inline-block;
  padding: 0.4rem 1rem;
  background-color: #1a1b1c0f;
  border-radius: 4px;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text-dark);
}

/* Price badge (FREE) */
.process-step__price {
  display: inline-block;
  padding: 0.4rem 1rem;
  background-color: var(--color-primary);
  border-radius: 4px;
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Status badge (Recommended, Optional) */
.process-step__badge {
  display: inline-block;
  padding: 0.4rem 1rem;
  background-color: var(--tint-primary-soft);
  border: 1px solid var(--tint-primary-edge);
  border-radius: 4px;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-primary);
}

/* Main description paragraph */
.process-step__description {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
}

/* Details list */
.process-step__details {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0;
}

.process-step__details li {
  padding-left: 2rem;
  margin-bottom: 0.8rem;
  position: relative;
  line-height: 1.6;
  font-size: var(--font-size-base);
  color: var(--color-text-dark);
}

.process-step__details li:last-child {
  margin-bottom: 0;
}

/* Custom bullet using checkmark */
.process-step__details li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.6rem;
}

/* Note paragraph (smaller, italicized) */
.process-step__note {
  font-size: var(--font-size-small);
  line-height: 1.6;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 1.5rem;
  margin-bottom: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-hairline);
}

/* Timeline paragraph (additional info) */
.process-step__timeline {
  font-size: var(--font-size-small);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-top: 1.5rem;
  margin-bottom: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-hairline);
}

/* End note after timeline */
.process-note {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 3rem;
  padding: 2rem;
  background-color: var(--tint-primary-faint);
  border-left: 4px solid var(--color-primary);
  border-radius: 4px;
}

/* ==========================================================================
   Block - Split Disclosure
   ========================================================================== */

/* Split-screen progressive disclosure for "What I Do" section */
/* Desktop: 35% navigation, 65% content */
/* Tablet: Stacked with horizontal tabs */
/* Mobile: Vertical cards */

/* Grid container - 35/65 split on desktop */
.split-disclosure {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 3rem;
  margin-top: 3rem;
}

/* Navigation panel - left side */
.split-disclosure__nav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Navigation item - card button */
.split-disclosure__nav-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 2rem;
  background-color: var(--color-surface-light);
  border: 2px solid transparent;
  border-left: 4px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-primary);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
              border-left-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.split-disclosure__nav-item:hover {
  background-color: var(--tint-primary-faint);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.split-disclosure__nav-item:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Active navigation state */
.split-disclosure__nav-item[aria-selected="true"] {
  border-left-color: var(--color-primary);
  background-color: var(--tint-primary-soft);
  box-shadow: var(--shadow-4);
  transform: translateY(-3px);
}

/* Number badge - circular */
.split-disclosure__nav-number {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--border-hairline);
  color: var(--color-text-dark);
  border-radius: 50%;
  font-size: var(--font-size-xl);
  font-weight: 700;
  flex-shrink: 0;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active number badge - orange background */
.split-disclosure__nav-item[aria-selected="true"] .split-disclosure__nav-number {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Navigation content wrapper */
.split-disclosure__nav-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Navigation title (h3) */
.split-disclosure__nav-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.2;
}

/* Navigation tagline */
.split-disclosure__nav-tagline {
  margin: 0;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Detail panel - right side */
/* Fixed height prevents layout shift during content transitions */
/* All three panels (Build, Explain, Support) have similar content length */
.split-disclosure__detail {
  position: relative;
  height: 600px; /* Fixed height - tall enough for longest panel + padding (3rem top + 3rem bottom) */
  background-color: var(--color-surface-light);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  padding: 3rem;
  overflow: hidden; /* Prevent content overflow during slide transitions */
}

/* Content panel - absolute positioning for crossfade */
/* Slide-out time: 400ms */
.split-disclosure__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 3rem;
  opacity: 0;
  transform: translateX(-30px);
  pointer-events: none;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active panel - slide in from right */
.split-disclosure__panel--active {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Panel entering - slide in from right */
/* Slide-in time: 700ms (slower than slide-out for smoother entrance) */
.split-disclosure__panel--entering {
  transform: translateX(30px);
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Panel title */
.split-disclosure__panel-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text-dark);
  margin: 0 0 1.5rem 0;
  line-height: 1.2;
}

/* Panel paragraphs */
.split-disclosure__panel p {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text-dark);
  margin-bottom: 1.5rem;
}

.split-disclosure__panel p:last-child {
  margin-bottom: 0;
}

/* Panel lists */
.split-disclosure__panel ul {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0;
}

.split-disclosure__panel li {
  padding-left: 2rem;
  margin-bottom: 1rem;
  position: relative;
  line-height: 1.6;
  font-size: var(--font-size-base);
  color: var(--color-text-dark);
}

.split-disclosure__panel li:last-child {
  margin-bottom: 0;
}

/* Custom bullet - orange checkmark */
.split-disclosure__panel li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.6rem;
}

/* ==========================================================================
   Responsive Design - Media Queries
   ========================================================================== */

/*
 * Desktop-First Approach:
 * - Base styles apply to desktop (1025px+)
 * - Media queries override for smaller viewports
 * - Breakpoint order: Laptop → Tablet → Mobile → Accessibility
 */

/* ==========================================================================
   Responsive - Laptop (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
  /* Typography */
  .hero__heading {
    font-size: var(--font-size-6xl);
  }

  .transition-heading {
    font-size: var(--font-size-6xl);
  }

  /* Components */
  .card-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Split Disclosure - What I Do */
  .split-disclosure__detail {
    height: 700px;
  }
}

/* ==========================================================================
   Responsive - Tablet (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
  /* Landing Page Header */
  .lp-header {
    padding: 2rem var(--space-md);
  }

  /* Layout & Spacing */
  .section {
    padding-top: var(--section-padding-tablet);
    padding-bottom: var(--section-padding-tablet);
  }

  .section__container {
    max-width: 720px;
  }

  /* Hero Section */
  .hero {
    min-height: auto;
    padding: 6rem 1.5rem;
  }

  .hero__heading {
    font-size: var(--font-size-5xl);
    max-width: none;
  }

  .hero__subheading {
    font-size: var(--font-size-large);
  }

  /* Typography */
  .transition-heading {
    font-size: var(--font-size-5xl);
  }

  /* Components */
  .card-grid--3,
  .card-grid--2 {
    grid-template-columns: 1fr;
  }

  /* Section Modifiers */
  .section--offset-accent {
    min-height: 55rem;
  }

  .section--offset-accent::before {
    top: 2rem;
    left: 15%;
    width: 80%;
    height: 45rem;
    box-shadow: inset 0 0 25px #00000080,
                inset 0 0 50px #0000004d;
  }

  /* Split Disclosure - What I Do */
  .split-disclosure {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .split-disclosure__nav {
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0.85rem 1rem; /* Prevent tabs from being cut off on all sides */
  }

  .split-disclosure__nav-item {
    min-width: 200px;
    scroll-snap-align: start;
    padding: 1.5rem;
    gap: 1rem;
  }

  .split-disclosure__nav-number {
    width: 3rem;
    height: 3rem;
    font-size: var(--font-size-large);
  }

  .split-disclosure__nav-tagline {
    display: none; /* Hidden on tablet for compact display */
  }

  .split-disclosure__detail {
    height: 500px; /* Fixed height prevents layout shift on tablet */
    padding: 2.5rem;
  }

  .split-disclosure__panel {
    padding: 2.5rem;
  }

  .split-disclosure__panel-title {
    font-size: var(--font-size-xl);
  }

  /* Process Timeline - How It Works */
  .process-step {
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
  }

  .process-timeline::before {
    left: 2rem; /* Adjusted for smaller circles (4rem / 2) */
  }

  .process-step__number {
    width: 4rem;
    height: 4rem;
    font-size: var(--font-size-large);
  }

  .process-step__content {
    padding: 2rem;
  }

  .process-step__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .process-step__title {
    font-size: var(--font-size-xl);
  }

  /* Problem Section Illustration */
  .problem-illustration-wrapper {
    margin-bottom: 3rem;
  }
}

/* ==========================================================================
   Responsive - Mobile (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
  /* Layout & Spacing — section__container override: full-bleed with tighter gutter */
  .section__container {
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Typography */
  .hero__heading {
    font-size: var(--font-size-4xl);
  }

  .transition-heading {
    font-size: var(--font-size-4xl);
  }

  /* Hero CTA */
  .hero__cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta-group .btn {
    width: 100%;
    text-align: center;
  }

  /* Section Modifiers */
  .section--offset-accent::before {
    display: none; /* Hidden on mobile for cleaner layout */
  }

  /* Split Disclosure - What I Do */
  .split-disclosure__nav {
    flex-direction: column;
    overflow-x: visible;
  }

  .split-disclosure__nav-item {
    min-width: auto;
    padding: 1.5rem;
  }

  .split-disclosure__nav-tagline {
    display: block; /* Show taglines again on mobile */
  }

  .split-disclosure__detail {
    height: 450px; /* Fixed height prevents layout shift */
    padding: 2rem;
  }

  .split-disclosure__panel {
    padding: 2rem;
  }

  .split-disclosure__panel-title {
    font-size: var(--font-size-large);
  }

  /* Process Timeline - How It Works */
  .process-step {
    gap: 1rem;
    margin-bottom: 3rem;
  }

  .process-timeline::before {
    left: 1.5rem; /* Adjusted for smaller circles (3rem / 2) */
  }

  .process-step__number {
    width: 3rem;
    height: 3rem;
    font-size: var(--font-size-base);
  }

  .process-step__content {
    padding: 1.5rem;
  }

  .process-step__title {
    font-size: var(--font-size-large);
  }

  .process-step__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Problem Section Illustration */
  .problem-illustration-wrapper {
    margin-bottom: 2rem;
  }
}

/* ==========================================================================
   Accessibility - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Disable animations for users who prefer reduced motion */

  /* Disable smooth scroll */
  html {
    scroll-behavior: auto;
  }

  /* Disable all transitions and animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Make fade-in elements immediately visible */
  .fade-in-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Accent bar — override scaleX initial state */
  .final-cta__accent.fade-in-on-scroll {
    transform: none;
  }

  /* Make staggered elements immediately visible */
  .stagger-children > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Make hero elements immediately visible */
  .hero__tagline,
  .hero__heading,
  .hero__subheading,
  .hero__cta-group {
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* Make accent line immediately visible */
  .accent-line {
    width: 80px;
    transition: none;
  }

  /* Disable card lift effects */
  .service-card:hover,
  .service-card--dark:hover {
    transform: none;
  }

  /* Disable expandable content animations */
  .expandable__content {
    transition: none;
  }

  /* Disable process timeline hover effects */
  .process-step:hover .process-step__number,
  .process-step:hover .process-step__content {
    transform: none;
  }

  /* Disable split-disclosure transitions */
  .split-disclosure__panel {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .split-disclosure__nav-item:hover,
  .split-disclosure__nav-item[aria-selected="true"] {
    transform: none;
  }
}