/* ========================================
   GLOBAL STYLES & CSS VARIABLES
======================================== */

:root {
  /* Brand Colors */
  --accent: #9EFB00;        /* Lime green */
  --light: #F1F1F1;         /* Off-white */
  --dark: #221A10;          /* Deep brown */
  --secondary: #050549;     /* Deep navy (hero background) */
  --variant: #0A0A6D;       /* Purple navy (shape fill) */
  --text-light: #F2F2F2;    /* White text */

  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-medium: 0.5s ease;
}

/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Fluid scaling: 16px at 1512px viewport, scales proportionally down to 393px */
  /* Formula: 100vw / 94.5 = 100vw * 16 / 1512 */
  font-size: clamp(4.16px, calc(100vw / 94.5), 16px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Mobile breakpoint - reset to fixed size for mobile layout */
@media (max-width: 393px) {
  html {
    font-size: 16px;
  }
}

body {
  font-family: 'Funnel Display', sans-serif;
  background-color: var(--secondary);
  color: var(--text-light);
  line-height: 1.5;
  overflow-x: hidden;
}

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

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* ========================================
   TYPOGRAPHY CLASSES
======================================== */

/* Main Titles - 78px bold */
.main_title {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 4.875rem;      /* 78/16 */
  line-height: 100%;
  letter-spacing: 0%;
}

/* Titles - 40px regular */
.title {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: 2.5rem;        /* 40/16 */
  line-height: 1;
  letter-spacing: 0%;
}

/* Middle - 25px regular */
.middle {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: 1.5625rem;     /* 25/16 */
  line-height: 115%;
  letter-spacing: 0%;
}

/* Hits - 80px italic serif */
.hits {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 5rem;          /* 80/16 */
  line-height: 80%;
  letter-spacing: 0%;
}

/* Text - 17px regular */
.text {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;     /* 17/16 */
  line-height: 1.4;
  letter-spacing: 0%;
}

/* Results Number - 102px italic serif */
.results_number {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 6.375rem;      /* 102/16 */
  line-height: 80%;
  letter-spacing: 0%;
}

/* Results Unit - 64px italic serif */
.results_unit {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 4rem;          /* 64/16 */
  line-height: 80%;
  letter-spacing: 0%;
}

/* Results Unit Small - 48px italic serif (for "confidence rate") */
.results_unit_small {
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 3rem;          /* 48/16 */
  line-height: 79%;
  letter-spacing: 0%;
}

/* ========================================
   LAYOUT UTILITIES
======================================== */

.container {
  max-width: 94.5rem;       /* 1512/16 */
  margin: 0 auto;
  width: 100%;
}

/* ========================================
   NAVIGATION BAR
======================================== */

.navbar {
  position: fixed;
  top: 1.25rem;                       /* 20/16 - Small offset from top */
  left: 3.75rem;                      /* 60/16 - Side padding */
  right: 3.75rem;                     /* 60/16 - Side padding */
  z-index: 1000;                      /* Above all content */
  opacity: 1;
  transition: opacity 400ms ease-out;
}

.navbar_hidden {
  opacity: 0;
  pointer-events: none;
}

.navbar_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 5.625rem;                   /* 90/16 */
  padding: 0 2.5rem;                  /* 40/16 - Internal logo padding */
  background-color: var(--variant);   /* #0A0A6D */
  border-radius: 1.375rem;            /* 22/16 */
}

.navbar_logo_left {
  height: 1.9375rem;                  /* 31/16 */
  width: auto;
}

.navbar_logo_right {
  height: 3.0625rem;                  /* 49/16 */
  width: auto;
}

/* ========================================
   SECTION: HERO
======================================== */

.hero {
  position: relative;
  width: 100%;
  min-height: 61.375rem;              /* 982/16 */
  background-color: var(--secondary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero_container {
  position: relative;
  max-width: 94.5rem;                 /* 1512/16 */
  width: 100%;
  min-height: 61.375rem;              /* 982/16 */
  margin: 0 auto;
  padding: 3.75rem;                   /* 60/16 */
  display: flex;
  flex-direction: column;
}

/* Hero State 1 - Initial View */
.hero_state_1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity var(--transition-medium);
}

.hero_state_1.hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ========================================
   HERO MAIN TITLE / LOGO CONTAINER
   ======================================== */
/* This styles the wrapper that holds the layered animation images */
.logo-animation-wrapper {
  position: relative;       /* Creates a positioning context for the absolutely positioned layers inside */
  width: 100%;              /* Take up the full width of its parent container */
  max-width: 75rem;         /* 1200/16 - But never get wider than 1200 pixels (keeps it from being too big on huge screens) */
  aspect-ratio: 16 / 9;     /* Maintain 16:9 ratio (the frame boundary from original SVGs) */
  cursor: pointer;          /* Show a hand cursor when you hover over it (indicates it's clickable) */
  transition: opacity var(--transition-fast);  /* Smooth fade effect when opacity changes */
  user-select: none;        /* Prevent users from accidentally selecting/highlighting the images */
  margin: 0 auto;           /* Center horizontally */
  overflow: hidden;         /* Clip content when it slides out of frame */
}

/* What happens when you hover your mouse over the logo wrapper */
/* Removed hover effect - no longer darkens on hover */

/* ========================================
   LOGO ANIMATION LAYER STYLES
   ======================================== */
/* Base styles for both animation layers (base and overlay) */
/* Think of these as transparent sheets that stack on top of each other */
.logo-animation-layer {
  position: absolute;       /* Position absolutely so both layers occupy the same space */
  top: 0;                   /* Align to top of wrapper */
  left: 0;                  /* Align to left of wrapper */
  width: 100%;              /* Fill the full width of the wrapper */
  height: 100%;             /* Fill the full height of the wrapper */
  object-fit: contain;      /* Make sure the entire image fits inside without cropping */
  object-position: center;  /* Center the SVG shapes within the frame boundary */
                            /* Since the new SVGs don't have backgrounds, this keeps them centered */
  display: block;           /* Display as block to avoid inline spacing issues */
}

/* Overlay layer specific styles */
/* This layer sits on top of the base layer (higher z-index) */
.logo-overlay {
  z-index: 2;               /* Stack above the base layer (base layer is z-index: 1 by default) */
  opacity: 0;               /* Start hidden (JavaScript will show it when needed) */
  pointer-events: none;     /* Don't block clicks - let them pass through to base layer */
  /* No transition by default - overlay appears instantly */
}

/* When the overlay is visible (controlled by JavaScript) */
.logo-overlay.visible {
  opacity: 1;               /* Fully visible - appears instantly (no transition) */
}

/* Fade-out transition for 9b overlay */
/* Applied when overlay needs to fade out smoothly */
.logo-overlay.fade-out {
  transition: opacity 200ms ease-in;  /* 200ms fade-out with ease-in curve */
                                      /* ease-in = starts slow, speeds up (gentle fade start) */
}

/* Smooth transition effect for frame 10 (and any future special transitions) */
/* This creates the ease-in animation effect (starts slow, ends fast) */
#logo-animation.frame-transition,
#logo-animation-overlay.frame-transition {
  transition: opacity 200ms ease-in;  /* Smooth fade with ease-in curve over 200 milliseconds */
                                      /* ease-in = starts slow, speeds up at the end */
                                      /* This matches the Figma "smart animate" effect */
}

/* ========================================
   ISOLATED SHAPE - SPRING ANIMATION
   ======================================== */
/* The isolated shape allows smooth spring animation from frame 10 → 11 position */
/* Instead of swapping large 2560x1440 frames, we animate this small shape element */

/* Isolated shape positioning */
/* Positions the shape at frame 10 coordinates, scaled to container */
.logo-shape {
  position: absolute;
  /* Starting position (frame 10): X=278, Y=608 out of 2560x1440 */
  /* Using percentages so it scales with the container */
  left: calc(278 / 2560 * 100%);    /* 10.86% from left */
  top: calc(608 / 1440 * 100%);     /* 42.22% from top */
  /* Shape size: 220x220 out of 2560 width (matches animation/shape.svg) */
  width: calc(220 / 2560 * 100%);   /* 8.59% of container width */
  height: auto;                      /* Maintain aspect ratio */
  opacity: 0;                        /* Hidden by default */
  pointer-events: none;              /* Don't block clicks */
  z-index: 3;                        /* Above base and overlay layers */
}

/* Make shape visible when needed */
.logo-shape.visible {
  opacity: 1;
}

/* Spring slide animation - moves shape from X=278 to X=1825 (1547px travel) */
/* Approximates Figma spring: 937ms, stiffness 128, damping 12.8, mass 1 */
/* Using 'left' property animation for reliable cross-browser positioning */
@keyframes spring-slide-shape {
  0% {
    left: calc(278 / 2560 * 100%);   /* Start at frame 10 position (X=278) */
  }
  40% {
    left: calc(1825 / 2560 * 100%);  /* Main movement to target (X=1825) */
  }
  55% {
    left: calc(1900 / 2560 * 100%);  /* Overshoot past target */
  }
  70% {
    left: calc(1780 / 2560 * 100%);  /* Bounce back before target */
  }
  85% {
    left: calc(1840 / 2560 * 100%);  /* Small oscillation past target */
  }
  100% {
    left: calc(1825 / 2560 * 100%);  /* Settle at final position (X=1825) */
  }
}

/* Apply the spring animation */
.logo-shape.spring-animate {
  animation: spring-slide-shape 937ms ease-out forwards;
  /* forwards = keeps the final position after animation completes */
}

/* ========================================
   TEXT LOGO - SLIDE-IN ANIMATION
   ======================================== */
/* Text logo ("Zachs AI") slides in from left after shape settles */

.logo-text {
  position: absolute;
  /* Final position: X=390, Y=604 out of 2560x1440 */
  left: calc(390 / 2560 * 100%);
  top: calc(604 / 1440 * 100%);
  /* Logo size: 1269x231 out of 2560 width */
  width: calc(1269 / 2560 * 100%);
  height: auto;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.logo-text.visible {
  opacity: 1;
}

/* Spring slide-in from left for text logo */
/* Same spring parameters: 937ms, stiffness 128, damping 12.8 */
@keyframes spring-slide-in-text {
  0% {
    left: calc(-1269 / 2560 * 100%);  /* Start off-screen left (full width of logo) */
  }
  40% {
    left: calc(390 / 2560 * 100%);    /* Main movement to target (X=390) */
  }
  55% {
    left: calc(450 / 2560 * 100%);    /* Overshoot right */
  }
  70% {
    left: calc(360 / 2560 * 100%);    /* Bounce back left */
  }
  85% {
    left: calc(400 / 2560 * 100%);    /* Small oscillation */
  }
  100% {
    left: calc(390 / 2560 * 100%);    /* Settle at final position */
  }
}

.logo-text.spring-animate {
  animation: spring-slide-in-text 937ms ease-out forwards;
}

/* ========================================
   LOGO FINAL CONTAINER
   ======================================== */
/* Container for shape and text - moves as one unit during slide-up */

.logo-final-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;               /* Above base and overlay layers */
}

/* ========================================
   SLIDE UP AND OUT ANIMATION
   ======================================== */
/* After logo animation completes, container slides up out of view */

@keyframes slide-up-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100vh);  /* Slide completely off viewport */
  }
}

.logo-final-container.slide-up-out {
  animation: slide-up-out 600ms ease-in-out forwards;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */
/*
  Note: Previous media queries at 1024px, 768px, 480px have been removed.
  Fluid scaling via rem units now handles proportional sizing automatically.
  Only the 393px mobile breakpoint remains (see html selector above).
*/

/* Hero State 2 - Expanded View */
.hero_state_2 {
  flex: 1;
  display: none;
  opacity: 0;
  transition: opacity var(--transition-medium);
  padding-top: 5rem;                  /* 80/16 */
}

.hero_state_2.visible {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.75rem;                       /* 60/16 */
  opacity: 1;
}

/* State 2 - Left Column */
.hero_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 2.5rem;                /* 40/16 */
}

.hero_headline {
  color: var(--accent);
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 4.5rem;                  /* 72/16 */
  line-height: 1.05;
}

/* State 2 - Right Column */
.hero_right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 1.875rem;                      /* 30/16 */
  padding-top: 3.75rem;               /* 60/16 */
}

.hero_shape {
  width: 16.6875rem;                  /* 267/16 */
  height: 16.6875rem;                 /* 267/16 */
  transition: transform var(--transition-medium);
}

.hero_shape:hover {
  transform: rotate(90deg);
}

.hero_body_text {
  text-align: right;
  max-width: 23.75rem;                /* 380/16 */
  font-size: 1rem;                    /* 16/16 */
  line-height: 1.5;
}

.hero_body_text .highlight {
  font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;             /* 4/16 */
}

/* Hero CTAs */
.hero_ctas {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 2.5rem;             /* 40/16 */
  margin-top: auto;
  transition: opacity 400ms ease-out;  /* Smooth fade-in when revealed */
}

/* Hidden until animation completes */
.hero_ctas_hidden {
  opacity: 0;
  pointer-events: none;  /* Can't click while hidden */
}

.hero_cta {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 4.875rem;                /* 78/16 */
  line-height: 100%;
  letter-spacing: 0%;
  color: var(--accent);
  transition: color var(--transition-fast);
}

.hero_cta:hover {
  color: var(--text-light);
}

/* ========================================
   SECTION: CREDENTIALS (Frame 2)
======================================== */

.credentials {
  position: relative;
  width: 100%;
  min-height: 47.5rem;                /* 760/16 */
  background-color: var(--text-light); /* #F2F2F2 */
  overflow: hidden;
}

.credentials_container {
  position: relative;
  max-width: 94.5rem;                 /* 1512/16 */
  width: 100%;
  min-height: 47.5rem;                /* 760/16 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 split - responsive */
}

/* Petal Grid */
.credentials_petals {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Responsive instead of 379px 379px */
  grid-template-rows: 1fr 1fr;    /* Responsive instead of 380px 380px */
  width: 100%;
  max-width: 47.375rem;               /* 758/16 - Cap at original size */
  height: auto;
  max-height: 47.5rem;                /* 760/16 - Cap at original size */
  aspect-ratio: 758 / 760; /* Maintain proportions when scaling */
}

/* Individual Petals */
.petal {
  color: var(--accent); /* Default: lime green */
  cursor: pointer;
  transition: color var(--transition-fast);
}

.petal svg {
  display: block;
  width: 100%;
  height: 100%;
}

.petal.petal_active {
  color: var(--secondary); /* Active: dark navy */
}

/* Petal positioning */
.petal_top_left {
  grid-column: 1;
  grid-row: 1;
}

.petal_top_right {
  grid-column: 2;
  grid-row: 1;
}

/* Wrapper for bottom-left petal + gradient (unified hover area) */
.petal_bottom_left_wrapper {
  grid-column: 1;
  grid-row: 2;
  position: relative;
  cursor: pointer;
  overflow: visible; /* Allow SVG to extend beyond grid cell */
}

/* When inside wrapper, petal fills the wrapper */
.petal_bottom_left_wrapper .petal_bottom_left {
  position: absolute;
  top: 0;
  right: 0; /* Align right edge with wrapper */
  width: 281.3125rem;                 /* 4501/16 */
  height: 23.75rem;                   /* 380/16 */
  pointer-events: none; /* Let wrapper handle all events */
  /* Note: Base color and transition defined in .petal_bottom_left below */
}

/* Bottom-left petal base styles (independent from .petal) */
.petal_bottom_left {
  color: var(--accent); /* Default: lime green #9EFB00 */
  cursor: pointer;
  transition: color var(--transition-fast); /* Explicit 0.3s ease */
}

.petal_bottom_left svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Bottom-left petal active state (independent from .petal_active) */
.petal_bottom_left.petal_active {
  color: var(--secondary); /* Active: dark navy #050549 */
}

.petal_bottom_right {
  grid-column: 2;
  grid-row: 2;
}

/* Content Area (Right Side) */
.credentials_content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 3.75rem;              /* 60/16 */
}

.credentials_gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 47.5rem;                /* 760/16 - Cap at petal grid max height */
  background: linear-gradient(to right, rgba(158, 251, 0, 1) 0%, rgba(158, 251, 0, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

.credentials_text_container {
  position: relative;
  z-index: 1;
}

/* Text Styling */
.credentials_text {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 700;
  font-size: 4.875rem;                /* 78/16 */
  line-height: 100%;
  letter-spacing: 0%;
  color: var(--secondary); /* Dark navy */
  opacity: 0;
  position: absolute;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.credentials_text.text_active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
}

/* ========================================
   SECTION: RESULTS (Frame 3)
======================================== */

.results {
  position: relative;
  width: 100%;
  height: 36.0625rem;              /* 577/16 */
  background-color: var(--text-light); /* #F2F2F2 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Marquee Banner */
.results_marquee {
  width: 100%;
  overflow: hidden;
  padding: 1.25rem 0;              /* 20/16 */
  position: relative;
}

.results_marquee_track {
  display: flex;
  gap: 3.75rem;                    /* 60/16 */
  animation: marquee-scroll 40s linear infinite;
  width: fit-content;
  will-change: transform;
}

.results_marquee_text {
  color: var(--secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

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

/* Results Container */
.results_container {
  max-width: 94.5rem;              /* 1512/16 */
  width: 100%;
  margin: 0 auto;
  padding: 0 3.75rem;              /* 60/16 */
  flex: 1;
  display: flex;
  align-items: center;
}

/* Cards Grid */
.results_cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;                     /* 24/16 */
  width: 100%;
}

/* Individual Card */
.results_card {
  border: 0.125rem solid var(--secondary);  /* 2/16 */
  border-radius: 1.875rem;         /* 30/16 */
  padding: 1.875rem;               /* 30/16 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
  min-height: 0;
}

/* Card Label */
.results_label {
  color: var(--secondary);
  margin-bottom: 1.25rem;          /* 20/16 */
  flex-shrink: 0;
}

/* Card Number (uses .results_number class from typography) */
.results_card .results_number {
  color: var(--secondary);
  display: block;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Card Unit (uses .results_unit class from typography) */
.results_card .results_unit {
  color: var(--secondary);
  display: block;
  margin-bottom: 3.375rem;         /* 54/16 */
  flex-shrink: 0;
}

/* Card Unit Small (uses .results_unit_small class) */
.results_card .results_unit_small {
  color: var(--secondary);
  display: block;
  margin-bottom: 2.875rem;         /* 46/16 */
  flex-shrink: 0;
}

/* Card Description - aligned to top within remaining space */
.results_description {
  color: var(--secondary);
  margin-top: auto;
  flex-shrink: 1;
}

/* ========================================
   SECTION: WHY CHOOSE US (Frame 4)
======================================== */

.why_choose_us {
  position: relative;
  width: 100%;
  background-color: var(--text-light); /* #F2F2F2 */
  padding: 3.75rem 0;              /* 60/16 */
  overflow: visible;
}

.why_choose_us_container {
  max-width: 94.5rem;              /* 1512/16 */
  width: 100%;
  margin: 0 auto;
  padding: 0 3.75rem;              /* 60/16 */
}

.why_choose_us_title {
  color: var(--secondary);
  margin-bottom: 2.5rem;           /* 40/16 */
  font-weight: 700;
}

/* Cards Container */
.why_choose_us_cards {
  display: flex;
  gap: 1.5rem;                     /* 24/16 */
  justify-content: center;
  align-items: flex-start;
}

/* Individual Card - Collapsed State */
.why_card {
  width: 12.375rem;                /* 198/16 */
  height: 12.5rem;                 /* 200/16 */
  border: 0.125rem solid var(--secondary);  /* 2/16 */
  border-radius: 1.875rem;         /* 30/16 */
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.6s ease-in-out;
  overflow: hidden;
  flex-shrink: 0;
}

/* Card Icon */
.why_card_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  transition: all 0.6s ease-in-out;
}

.why_card_icon svg {
  width: 4.9375rem;                /* 79/16 */
  height: 4.9375rem;               /* 79/16 */
  transition: all 0.6s ease-in-out;
}

/* Card Content */
.why_card_content {
  text-align: center;
  padding: 0 1.875rem;             /* 30/16 */
  transition: all 0.6s ease-in-out;
}

.why_card_title {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;            /* 17/16 */
  color: var(--secondary);
  margin-bottom: 0;
  margin-top: 0.75rem;             /* 12/16 */
  transition: all 0.6s ease-in-out;
  opacity: 1;
  line-height: 1.4;
}

.why_card.card_expanded .why_card_title {
  margin-bottom: 1rem;             /* 16/16 */
}

.why_card_description {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 400;
  font-size: 1.125rem;             /* 18/16 */
  color: var(--secondary);
  line-height: 1.4;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.6s ease-in-out;
}

/* Card - Expanded State */
.why_card.card_expanded {
  width: 33.6875rem;               /* 539/16 */
  height: 27.5rem;                 /* 440/16 */
  justify-content: flex-start;
  padding-top: 3.75rem;            /* 60/16 */
}

.why_card.card_expanded .why_card_icon {
  margin-bottom: 2.5rem;           /* 40/16 */
}

.why_card.card_expanded .why_card_icon svg {
  width: 11.3125rem;               /* 181/16 */
  height: 11.3125rem;              /* 181/16 */
}

.why_card.card_expanded .why_card_title {
  font-size: 1.5625rem;            /* 25/16 */
  font-weight: 700;
  line-height: 115%;
}

.why_card.card_expanded .why_card_description {
  opacity: 1;
  max-height: 12.5rem;             /* 200/16 */
}

/* ========================================
   SECTION: GUMLOOP (Frame 5)
======================================== */

.gumloop {
  width: 100vw;
  height: 47.25rem;                /* 756/16 */
  margin-left: calc(-50vw + 50%);
  background: linear-gradient(to right, var(--accent) 50%, var(--secondary) 50%);
  display: flex;
  align-items: stretch;
}

.gumloop_container {
  max-width: 94.5rem;              /* 1512/16 */
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Logo Area (Left) */
.gumloop_logo_area {
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  padding-right: 9.1875rem;        /* 147/16 */
}

.gumloop_logo {
  height: 66.66%;
  width: auto;
  max-height: 31.5rem;             /* 504/16 */
  color: black;
}

/* Content Area (Right) */
.gumloop_content {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 9.1875rem;         /* 147/16 */
}

.gumloop_title {
  color: var(--text-light);
  margin-bottom: 2.5rem;           /* 40/16 */
}

.gumloop_description {
  color: var(--text-light);
  margin-bottom: 3.75rem;          /* 60/16 */
  max-width: 30rem;                /* 480/16 */
  line-height: 1.6;
}

/* Pill Button */
.gumloop_pill {
  /* Fixed dimensions - text doesn't affect size */
  display: inline-flex;
  align-items: center;
  justify-content: left;
  height: 3.25rem;                 /* 52/16 */
  border: 0.125rem solid var(--text-light);  /* 2/16 */
  border-radius: 999px;
  padding: 0 1.5rem;               /* 24/16 */
  color: var(--text-light);
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.0625rem;            /* 17/16 */
  text-align: left;
  transition: all var(--transition-fast);
}

.gumloop_pill:hover {
  background-color: var(--text-light);
  color: var(--secondary);
}

/* ========================================
   SECTION: HOW IT WORKS (Frame 6)
======================================== */

.how_it_works {
  position: relative;
  width: 100%;
  height: 47.25rem;                /* 756/16 */
  background-color: var(--text-light); /* #F2F2F2 */
  overflow: visible; /* Allow quarter circle to extend */
}

.how_it_works_container {
  max-width: 94.5rem;              /* 1512/16 */
  width: 100%;
  height: 47.25rem;                /* 756/16 */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* No padding on container - applied to left column only */
}

/* Left Column */
.how_it_works_left {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  padding: 3.75rem;                /* 60/16 */
  padding-right: 0;
}

.how_it_works_title {
  color: var(--secondary);
  margin-bottom: 2.5rem;           /* 40/16 */
}

/* Quarter Circle Shape Wrapper */
.how_it_works_shape_wrapper {
  position: absolute;
  bottom: -1px; /* Slight overlap to prevent sub-pixel gaps */
  left: -15.5625rem;               /* -249/16 */
  width: 23.625rem;                /* 378/16 */
  height: calc(23.625rem + 1px);   /* 378/16 + 1px overlap */
}

/* Rectangular extension extending to left edge of screen */
.how_it_works_shape_wrapper::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 100%; /* Start where the wrapper ends on the left */
  width: 100vw; /* Extend all the way to left edge of viewport */
  height: calc(23.625rem + 1px);   /* 378/16 + 1px overlap */
  background-color: var(--variant); /* #0A0A6D - same color */
}

/* Quarter Circle Shape SVG */
.how_it_works_shape {
  width: 100%;
  height: 100%;
  color: var(--variant); /* #0A0A6D */
}

/* Week Grid (Right Column) */
.how_it_works_weeks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 23.625rem 23.625rem; /* 378/16 x 2 = 756px total */
  gap: 0; /* NO gap - circles touch each other */
  height: 47.25rem;                /* 756/16 */
  justify-items: center;
  align-items: center;
}

/* Week Item - Base State */
.week_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 23.625rem;                /* 378/16 */
  height: 23.625rem;               /* 378/16 */
  padding: 2.5rem;                 /* 40/16 */
  cursor: pointer;
  transition: all 0.4s ease;
  border-radius: 50%;
  background-color: transparent;
}

/* Week Item - Inactive State */
.week_item .week_title {
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.5625rem;            /* 25/16 */
  font-weight: 700;
  line-height: 115%;
  color: var(--secondary);
  transition: color 0.4s ease;
}

.week_item .week_description {
  color: var(--text-light); /* Same as background - invisible */
  margin-top: 1rem;                /* 16/16 */
  transition: color 0.4s ease;
}

/* Week Item - Active State */
.week_item.week_active {
  background-color: var(--secondary);
}

.week_item.week_active .week_title {
  color: var(--text-light);
}

.week_item.week_active .week_description {
  color: var(--text-light); /* Now visible against navy circle */
}

/* ========================================
   SECTION: PRICING (Frame 7)
======================================== */

.pricing {
  position: relative;
  width: 100%;
  background-color: var(--secondary); /* #050549 */
  padding: 5rem 0 6.25rem 0;       /* 80/16 top, 100/16 bottom */
  overflow: hidden;
}

/* Shape Wrapper - centers shape with container */
.pricing_shape_wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 94.5rem;              /* 1512/16 */
  height: 23.625rem;               /* 378/16 */
  pointer-events: none;
}

/* Decorative Shape (top-left, aligned with container) */
.pricing_shape {
  position: absolute;
  top: 0;
  left: -15.5625rem;               /* -249/16 */
  width: 47.25rem;                 /* 756/16 */
  height: 23.625rem;               /* 378/16 */
  color: var(--variant); /* #0A0A6D */
}

/* Section Title */
.pricing_section_title {
  color: var(--text-light);
  margin-bottom: 3.75rem;          /* 60/16 */
}

/* Container */
.pricing_container {
  position: relative;
  max-width: 94.5rem;              /* 1512/16 */
  width: 100%;
  margin: 0 auto;
  padding: 0 3.75rem;              /* 60/16 */
  z-index: 1;
}

/* Cards Row */
.pricing_cards {
  display: flex;
  justify-content: flex-start; /* Align with left edge (title "C") */
  align-items: stretch;
  gap: 2.5rem;                     /* 40/16 */
}

/* Individual Card */
.pricing_card {
  flex: 0 0 26.25rem;              /* 420/16 */
  min-height: 36.125rem;           /* 578/16 */
  background-color: var(--text-light); /* #F2F2F2 */
  border: 0.125rem solid var(--accent);  /* 2/16 */
  border-radius: 1.875rem;         /* 30/16 */
  padding: 4.25rem 2.5rem 3.75rem 2.5rem;  /* 68/16 40/16 60/16 40/16 */
  display: flex;
  flex-direction: column;
}

/* Card Title Wrapper - Fixed height to match 2-line title (all cards same) */
.pricing_card_title_wrapper {
  height: 6.75rem;                 /* 108/16 */
  margin-bottom: 3.75rem;          /* 60/16 */
  display: flex;
  align-items: flex-start;
}

/* Card Title - Instrument Serif Italic */
.pricing_card_title {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 3rem;                 /* 48/16 */
  line-height: 112%;
  color: var(--secondary);
  margin: 0;
}

/* Features List */
.pricing_features {
  list-style: none;
  padding: 0 0 0 0.9375rem;        /* 15/16 */
  margin: 0 0 auto 0;
}

.pricing_features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;                    /* 12/16 */
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.0625rem;            /* 17/16 */
  line-height: 140%;
  color: var(--secondary);
  margin-bottom: 0.75rem;          /* 12/16 */
}

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

/* Bullet Point Shape */
.pricing_bullet {
  flex-shrink: 0;
  width: 0.625rem;                 /* 10/16 */
  height: 0.625rem;                /* 10/16 */
  margin-top: 0.375rem;            /* 6/16 */
  color: var(--secondary);
}

/* Pill Button */
.pricing_pill {
  /* Fixed dimensions - text doesn't affect size */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%; /* Full width of card */
  height: 3.25rem;                 /* 52/16 */
  border: 0.125rem solid var(--secondary);  /* 2/16 */
  border-radius: 4.625rem;         /* 74/16 */
  padding: 0 1.25rem;              /* 20/16 */
  background-color: transparent;
  color: var(--secondary);
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.0625rem;            /* 17/16 */
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: auto; /* Push to bottom, stays at same level */
  align-self: center; /* Center aligned within card */
}

.pricing_pill:hover {
  background-color: var(--secondary);
  color: var(--text-light);
}

/* ========================================
   CTA SECTION (Frame 8 - Top)
======================================== */

.cta_section {
  position: relative;
  width: 100%;
  background-color: var(--text-light); /* #F2F2F2 */
}

.cta_container {
  max-width: 94.5rem;              /* 1512/16 */
  width: 100%;
  margin: 0 auto;
  padding: 5rem 3.75rem;           /* 80/16 60/16 */
}

/* Two-Column Layout */
.cta_columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.75rem;                    /* 60/16 */
  position: relative;
}

.cta_column {
  position: relative;
  z-index: 1;
}

/* Column Titles */
.cta_column_title {
  color: var(--secondary); /* #050549 - Navy */
  margin-bottom: 2rem;             /* 32/16 */
  margin-left: -0.625rem;          /* -10/16 */
}

/* Checkbox List */
.cta_checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cta_checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;                    /* 12/16 */
  margin-bottom: 1rem;             /* 16/16 */
  color: var(--secondary); /* #050549 */
}

.cta_checkbox {
  width: 1.125rem;                 /* 18/16 */
  height: 1.125rem;                /* 18/16 */
  flex-shrink: 0;
  color: var(--secondary);
  margin-top: 0.1875rem;           /* 3/16 */
}

/* Eclipse Decorations */
.cta_eclipse {
  position: absolute;
  width: 15.5rem;                  /* 248/16 */
  height: 15.5rem;                 /* 248/16 */
  pointer-events: none;
  z-index: 0;
}

.cta_eclipse_left {
  /* Anchored to the "s" in "is" from "Who this is for?" */
  top: 1.25rem;                    /* 20/16 */
  left: 17.5rem;                   /* 280/16 */
}

.cta_eclipse_right {
  /* Anchored to the "u" in "you" from "What you get" */
  top: 1.25rem;                    /* 20/16 */
  left: 12.5rem;                   /* 200/16 */
}

/* Transformation Text */
.cta_transformation {
  text-align: center;
  color: var(--secondary); /* #050549 - Navy */
  margin-top: 3.75rem;             /* 60/16 */
}

/* ========================================
   FOOTER SECTION (Frame 8 - Bottom)
======================================== */

.footer {
  position: relative;
  width: 100%;
  height: 64.25rem;                /* 1028/16 */
  background-color: #F2F2F2; /* Background color for gradient area */
  padding: 5rem 0 3.75rem 0;       /* 80/16 60/16 */
  display: flex;
  align-items: center;
}

/* Gradient overlay */
.footer::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #9EFB00 0%, rgba(158, 251, 0, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Footer wrapper - contains footer_container, spacer, and logo */
.footer_wrapper {
  max-width: 94.5rem;              /* 1512/16 */
  width: 100%;
  margin: 0 auto;
  padding: 0 3.75rem;              /* 60/16 */
  text-align: center;
  position: relative;
  z-index: 1;
}

.footer_container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

/* Centered content box */
.footer_content_box {
  width: 82rem;                    /* 1312/16 */
  height: 24.3125rem;              /* 389/16 */
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Footer CTA Text */
.footer_cta_text {
  color: var(--secondary); /* #050549 */
  max-width: 58.625rem;            /* 938/16 */
  width: 100%;
  margin-bottom: 0;
  text-align: left;
  align-self: flex-start; /* Align to left of flex container */
}

/* Footer Buttons */
.footer_buttons {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  gap: 1.5rem;                     /* 24/16 */
}

.footer_pill {
  /* Fixed dimensions - text doesn't affect size */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11.25rem;             /* 180/16 */
  height: 3.25rem;                 /* 52/16 */
  border: 0.125rem solid var(--secondary);  /* 2/16 */
  border-radius: 999px;
  padding: 0 2rem;                 /* 32/16 */
  background-color: transparent;
  color: var(--secondary);
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.0625rem;            /* 17/16 */
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.footer_pill:hover {
  background-color: var(--secondary);
  color: var(--text-light);
}

/* Footer Spacer - Customize vertical spacing */
.footer_spacer {
  width: 100%;
  padding-top: 3.75rem;            /* 60/16 */
  padding-bottom: 3.75rem;         /* 60/16 */
}

/* Footer Logo SVG */
.footer_logo {
  width: 100%;
  max-width: 103.4375rem;          /* 1655/16 */
  height: auto;
  color: var(--secondary); /* Navy color via currentColor in SVG */
  display: block;
  margin: 0 auto;
}

/* ========================================
   MOBILE STYLES - Hero Section (Frame 1)
   Breakpoint: 768px and below
======================================== */

/* Hide mobile elements on desktop */
.hero_state_2_mobile {
  display: none;
}

.credentials_mobile {
  display: none;
}

.results_cards_mobile {
  display: none;
}

.why_choose_us_mobile {
  display: none;
}

.gumloop_mobile {
  display: none;
}

.how_mobile {
  display: none;
}

.pricing_mobile {
  display: none;
}

.cta_mobile {
  display: none;
}

.transformation_mobile {
  display: none;
}

@media (max-width: 768px) {
  /* Adjust html font-size for mobile */
  html {
    font-size: 16px;
  }

  /* Body background matches gradient bottom - prevents gap at page end */
  body {
    background-color: #9EFB00;
  }

  /* ========================================
     HIDE ALL SECTIONS EXCEPT HERO ON MOBILE
     (Unhide sections as we implement them)
  ======================================== */
  .footer {
    display: none !important;
  }

  /* Hide desktop credentials, show mobile version */
  .credentials .credentials_container {
    display: none !important;
  }

  /* Override desktop credentials section styling on mobile */
  .credentials {
    min-height: auto;
    /* background-color stays as var(--text-light) */
    overflow: visible;
  }

  /* ========================================
     HERO - Mobile Adjustments
     All values in vw for proportional scaling
     Base viewport: 393px (Figma design)
     Formula: vw = (px / 393) × 100
  ======================================== */

  .hero_container {
    padding: 5.09vw; /* 20px / 393px */
  }

  /* Hide desktop state 2 on mobile */
  .hero_state_2 {
    display: none !important;
  }

  /* Hide desktop CTAs on mobile */
  .hero_ctas_desktop {
    display: none !important;
  }

  /* Hide navbar on mobile (use icon instead) */
  .navbar {
    display: none;
  }

  /* ========================================
     HERO STATE 2 - Mobile Layout
     Uses flexbox for natural height flow
     Icon & petal stay absolute, text & CTAs flow
  ======================================== */
  .hero_state_2_mobile {
    display: none; /* Hidden by default, shown via JS */
    position: relative;
    width: 100%;
    min-height: 100vh; /* Fallback minimum */
    opacity: 0;
    transition: opacity var(--transition-medium);
  }

  .hero_state_2_mobile.visible {
    display: flex;
    flex-direction: column;
    opacity: 1;
  }

  /* ----------------------------------------
     Z Symbol Icon (top right)
     48×49px at 393px viewport
  ---------------------------------------- */
  .hero_mobile_icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 12.21vw;  /* 48px / 393px */
    height: 12.47vw; /* 49px / 393px */
  }

  /* ----------------------------------------
     Petal Wrapper (upper left)
     135×135px at 393px viewport
     Top: 117px from container, minus 20px padding = 97px
  ---------------------------------------- */
  .hero_mobile_petal_wrapper {
    position: absolute;
    top: 24.68vw;    /* 97px / 393px */
    left: 0;
    width: 34.35vw;  /* 135px / 393px */
    height: 34.35vw; /* 135px / 393px */
    cursor: pointer;
  }

  /* Petal Shape */
  .hero_mobile_petal {
    width: 100%;
    height: 100%;
    color: var(--variant); /* #0A0A6D */
    transition: transform 0.6s ease-in-out;
  }

  /* Petal rotation states (2 states) */
  .hero_mobile_petal.rotate-0 {
    transform: rotate(0deg);
  }

  .hero_mobile_petal.rotate-1 {
    transform: rotate(180deg);
  }

  /* ----------------------------------------
     Text Container
     Uses margin-top for spacing (not absolute)
     Top: 260px from container top
     Gap: 24px between text elements
  ---------------------------------------- */
  .hero_mobile_text_container {
    position: relative;
    margin-top: 66.16vw; /* 260px / 393px - push down from top */
    display: flex;
    flex-direction: column;
    gap: 6.11vw;         /* 24px / 393px */
  }

  /* ----------------------------------------
     Text 1: Green headline
     Font: 72px, max-width: 336px
  ---------------------------------------- */
  .hero_mobile_text_green {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 11vw;  /* 72px / 393px */
    line-height: 1;
    color: var(--accent); /* #9EFB00 */
    max-width: 85.5vw;   /* 336px / 393px */
  }

  /* ----------------------------------------
     Text 2: White body text
     Font: 20px, max-width: 336px (same as green)
  ---------------------------------------- */
  .hero_mobile_text_white {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.0vw;   /* 20px / 393px */
    line-height: 1.2;
    color: var(--text-light); /* #F2F2F2 */
    max-width: 85.5vw;   /* 336px / 393px - match green headline */
  }

  .hero_mobile_text_bold {
    font-weight: 700;
  }

  /* ----------------------------------------
     Mobile CTAs
     Font: 54px
     Uses margin-top: auto to push to bottom
     Bottom padding: 20px
  ---------------------------------------- */
  .hero_ctas_mobile {
    position: relative;
    margin-top: auto;    /* Push to bottom of flex container */
    padding-top: 10.18vw;    /* 40px / 393px - space above CTAs */
    padding-bottom: 10.0vw;  /* 20px / 393px */
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .hero_cta_mobile {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 13.74vw;  /* 54px / 393px */
    line-height: 100%;
    color: var(--accent);
    transition: color var(--transition-fast);
  }

  /* Individual CTA max-widths */
  .hero_cta_mobile:nth-child(1) {
    max-width: 71vw;     /* "Book a call": 279px / 393px */
  }

  .hero_cta_mobile:nth-child(2) {
    max-width: 52.9vw;   /* "Contact": 208px / 393px */
  }

  .hero_cta_mobile:hover,
  .hero_cta_mobile:active {
    color: var(--text-light);
  }

  /* Animation wrapper adjustments for mobile */
  .logo-animation-wrapper {
    max-width: 100%;
    overflow: visible; /* Allow slide-up animation to exit container bounds */
  }

  /* ----------------------------------------
     Slide-up animation - longer duration for mobile
     Mobile screens are taller, needs more time to exit
  ---------------------------------------- */
  .logo-final-container.slide-up-out {
    animation: slide-up-out 1200ms ease-in-out forwards; /* 1200ms vs 600ms desktop */
  }

  /* ========================================
     CREDENTIALS - Mobile Version (Frame 2)
     All values in vw for proportional scaling
     Base viewport: 393px (Figma design)
     Formula: vw = (px / 393) × 100
  ======================================== */

  /* Show mobile credentials */
  .credentials_mobile {
    display: block;
    position: relative;
    width: 100%;
  }

  /* Background gradient - contains all content */
  .credentials_mobile_bg {
    position: relative;
    width: 100%;
    min-height: 194.4vw;  /* 764px / 393px */
    background: linear-gradient(to right, #9EFB00, rgba(158, 251, 0, 0));
    padding: 0 5.09vw;    /* 20px / 393px */
    padding-bottom: 8.14vw; /* 32px / 393px - extra bottom spacing */
  }

  /* ----------------------------------------
     Rows container
     Gap: 15px between petal and text
     Margin-bottom: 32px between rows
  ---------------------------------------- */
  .credentials_mobile_row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 3.82vw;          /* 15px / 393px */
    padding-left: 0;
    margin-bottom: 8.14vw; /* 32px / 393px */
  }

  /* First row top spacing */
  .credentials_mobile_row:first-child {
    padding-top: 11.96vw; /* 47px / 393px */
  }

  /* ----------------------------------------
     Petal images
     49×49px at 393px viewport
     margin-top aligns petal with first line of text
  ---------------------------------------- */
  .credentials_mobile_petal {
    width: 12.47vw;   /* 49px / 393px */
    height: 12.47vw;
    flex-shrink: 0;   /* Don't shrink petal */
    margin-top: 1.53vw; /* 6px / 393px - adjust to align with text */
  }

  /* Petal rotations for correct orientation */
  .credentials_mobile_row:nth-child(1) .credentials_mobile_petal {
    transform: rotate(90deg); /* Petal 1: rounded bottom-left */
  }

  .credentials_mobile_row:nth-child(2) .credentials_mobile_petal {
    transform: rotate(-180deg); /* Petal 2: rounded top-left */
  }

  .credentials_mobile_row:nth-child(3) .credentials_mobile_petal {
    transform: rotate(270deg); /* Petal 3: rounded top-right */
  }

  .credentials_mobile_row:nth-child(4) .credentials_mobile_petal {
    transform: rotate(0deg); /* Petal 4: rounded bottom-right */
  }

  /* ----------------------------------------
     Text styling
     Font: 32px, fills remaining space
  ---------------------------------------- */
  .credentials_mobile_text {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 8.14vw;    /* 32px / 393px */
    line-height: 1.1;
    color: #050549;
    flex: 1;              /* Take remaining space */
    width: 100%;          /* Fill available width */
    padding-right: 7.63vw; /* 30px / 393px */
  }

  /* ========================================
     RESULTS SECTION - Mobile Marquee Only
     Shows just the "REAL RESULTS" scrolling banner
     All values in vw for proportional scaling
  ======================================== */

  /* Show results section on mobile */
  .results {
    display: flex !important;
    height: auto;
    background-color: var(--text-light); /* #F2F2F2 */
  }

  /* Hide the cards container - only show marquee */
  .results_container {
    display: none !important;
  }

  /* Mobile marquee styling */
  .results_marquee {
    padding: 5.09vw 0; /* 20px / 393px */
  }

  /* Mobile marquee text - 25px */
  .results_marquee_text {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 6.36vw; /* 25px / 393px */
    color: var(--secondary); /* #050549 */
  }

  /* Keep gap proportional */
  .results_marquee_track {
    gap: 10.18vw; /* 40px / 393px - slightly tighter than desktop */
  }

  /* ========================================
     RESULTS CARDS - Mobile Version
     Vertical stack of 4 cards
     All values in vw for proportional scaling
  ======================================== */

  /* Cards container */
  .results_cards_mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7.63vw;           /* 30px / 393px */
    padding: 7.63vw 0;     /* 30px top/bottom */
    width: 100%;
  }

  /* Individual card */
  .results_card_mobile {
    width: 78.88vw;        /* 310px / 393px */
    height: 109.16vw;      /* 429px / 393px */
    background-color: var(--text-light); /* #F2F2F2 */
    border: 0.51vw solid var(--secondary); /* 2px / 393px */
    border-radius: 7.63vw; /* 30px / 393px */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5.09vw;       /* 20px / 393px */
  }

  /* Label (Before/After/ROI/Accuracy) */
  .results_card_mobile_label {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 6.36vw;     /* 25px / 393px */
    line-height: 1.15;
    color: var(--secondary);
    margin-bottom: 2.54vw; /* 10px / 393px */
  }

  /* Main number */
  .results_card_mobile_number {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 25.95vw;    /* 102px / 393px */
    line-height: 0.8;
    color: var(--secondary);
  }

  /* Unit (hours/minutes/dollars) */
  .results_card_mobile_unit {
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 16.28vw;    /* 64px / 393px */
    line-height: 0.8;
    color: var(--secondary);
    margin-bottom: 5.09vw; /* 20px / 393px */
  }

  /* Description text */
  .results_card_mobile_desc {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.33vw;     /* 17px / 393px */
    line-height: 1.4;
    color: var(--secondary);
    max-width: 56.74vw;    /* 223px / 393px */
  }

  /* Accuracy card - smaller number and unit */
  .results_card_mobile_accuracy .results_card_mobile_number {
    font-size: 21.88vw;    /* 86px / 393px */
    line-height: 0.9;
  }

  .results_card_mobile_accuracy .results_card_mobile_unit {
    font-size: 12.21vw;    /* 48px / 393px */
    line-height: 0.79;
  }

  /* ========================================
     WHY CHOOSE US - Mobile Version
     2×3 grid that reflows when card expands
     All values in vw for proportional scaling
  ======================================== */

  /* Hide desktop version on mobile */
  .why_choose_us_cards {
    display: none !important;
  }

  .why_choose_us_title {
    display: none !important;
  }

  /* Show mobile version */
  .why_choose_us_mobile {
    display: block;
    padding: 5.09vw;           /* 20px */
    background-color: var(--text-light);
  }

  /* Section container adjustments */
  .why_choose_us {
    min-height: auto;
    padding: 0;
  }

  .why_choose_us_container {
    padding: 0;
  }

  /* Title */
  .why_choose_us_mobile_title {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 13.74vw;        /* 54px / 393px */
    line-height: 1;
    color: var(--secondary);
    margin-bottom: 5.09vw;     /* 20px */
  }

  /* Grid container - 2 columns */
  .why_cards_mobile_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4.58vw;               /* 18px / 393px */
  }

  /* Individual card - collapsed state */
  .why_card_mobile {
    width: 43vw;               /* ~170px at 393px viewport - fits 2 per row with gap */
    height: 43.5vw;            /* Explicit height for animation (aspect ~150:151) */
    background-color: var(--text-light);
    border: 0.51vw solid var(--secondary); /* 2px / 393px */
    border-radius: 7.63vw;     /* 30px / 393px */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    padding: 3.82vw;           /* 15px / 393px - inner padding for text breathing room */
    overflow: hidden;
    /* No order property - use natural DOM order so cards expand in place */
    /* Animate width and height directly - these CAN be animated */
    transition: width 3s cubic-bezier(0.25, 0.1, 0.25, 1),
                height 3s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: width, height;
  }

  /* Close button - hidden by default */
  .why_card_mobile_close {
    display: none;
    position: absolute;
    top: 4.07vw;               /* 16px / 393px */
    right: 4.07vw;
    width: 7.12vw;             /* 28px / 393px */
    height: 7.12vw;
    border-radius: 50%;
    background-color: var(--secondary);
    color: var(--text-light);
    border: none;
    font-size: 5.09vw;         /* 20px / 393px */
    cursor: pointer;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    z-index: 10;
  }

  /* Icon - collapsed */
  .why_card_mobile_icon {
    width: 15.01vw;            /* 59px / 393px */
    height: 15.01vw;
    margin-bottom: 2.54vw;     /* 10px / 393px */
    /* Slower transitions to match card expansion */
    transition: width 3s cubic-bezier(0.25, 0.1, 0.25, 1),
                height 3s cubic-bezier(0.25, 0.1, 0.25, 1),
                margin-bottom 3s ease-in-out;
    will-change: width, height;
  }

  .why_card_mobile_icon svg {
    width: 100%;
    height: 100%;
    color: var(--secondary);
  }

  /* Label - collapsed */
  .why_card_mobile_label {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.33vw;         /* 17px / 393px */
    line-height: 1.15;         /* Better for two-line text */
    color: var(--secondary);
    text-align: center;
    max-width: 80%;            /* Force long labels like "Strategic Innovator" to wrap */
    /* Slower transitions to match card expansion */
    transition: font-size 3s ease-in-out,
                font-weight 3s ease-in-out;
  }

  /* Description - hidden by default */
  .why_card_mobile_desc {
    display: none;
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.33vw;         /* 17px / 393px */
    line-height: 1.2;
    color: var(--secondary);
    text-align: center;
    max-width: 49.11vw;        /* 193px / 393px */
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Fade in halfway through card expansion */
  }

  /* ========================================
     EXPANDED STATE
  ======================================== */

  /* Expanded card */
  .why_card_mobile.card_expanded {
    grid-column: 1 / -1;       /* Span full width - layout positioning */
    width: 90vw;               /* Explicit width that CAN be animated */
    height: 94vw;              /* Explicit height for proper proportions (~319:334) */
    padding: 5.09vw;           /* 20px */
    /* No order property - stays in its DOM position */
  }

  .why_card_mobile.card_expanded .why_card_mobile_close {
    display: flex;
  }

  .why_card_mobile.card_expanded .why_card_mobile_icon {
    width: 35.88vw;            /* 141px / 393px */
    height: 35.88vw;
    margin-bottom: 3.82vw;     /* 15px */
  }

  .why_card_mobile.card_expanded .why_card_mobile_label {
    font-weight: 700;
    font-size: 6.36vw;         /* 25px / 393px */
    line-height: 1.15;
    margin-bottom: 2.54vw;     /* 10px */
  }

  .why_card_mobile.card_expanded .why_card_mobile_desc {
    display: block;
    opacity: 1;
  }

  /* ----------------------------------------
     Pair Card (alone on its row below expanded)
     Spans full row for layout, but visually left-aligned
  ---------------------------------------- */
  .why_card_mobile.card_pair {
    grid-column: 1 / -1;      /* Span full row (pushes next cards down) */
    justify-self: start;      /* Align to left side visually */
  }

  /* ========================================
     GUMLOOP SECTION - Mobile Version (Frame 6)
     "Our Secret Weapon" section
     All values in vw for proportional scaling
  ======================================== */

  /* Show gumloop section on mobile */
  .gumloop {
    display: block !important;
    min-height: auto;
    height: auto;                        /* Override fixed 47.25rem height */
    padding: 0;
    background: var(--secondary);        /* Override gradient - solid navy */
    margin-left: 0;                      /* Override negative margin */
    width: 100%;                         /* Override 100vw */
  }

  /* Hide desktop gumloop content */
  .gumloop_container {
    display: none !important;
  }

  /* Show mobile gumloop */
  .gumloop_mobile {
    display: flex;
    flex-direction: column;
    background-color: var(--secondary); /* #050549 */
    padding: 13.49vw 10.97vw 19.59vw 10.97vw; /* top right bottom left */
    width: 100%;
  }

  /* Title */
  .gumloop_mobile_title {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 13.74vw;        /* 54px / 393px */
    line-height: 1;
    color: var(--text-light);  /* #F2F2F2 */
    max-width: 70.66vw;        /* 277.707px / 393px */
    margin-bottom: 10.18vw;    /* ~40px gap */
  }

  /* Body text */
  .gumloop_mobile_text {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.33vw;         /* 17px / 393px */
    line-height: 1.4;
    color: var(--text-light);  /* #F2F2F2 */
    max-width: 68.11vw;        /* 267.681px / 393px */
    margin-bottom: 10.18vw;    /* ~40px gap */
  }

  /* CTA Button - pill outline style */
  .gumloop_mobile_cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 73.47vw;            /* 288.735px / 393px */
    height: 10.94vw;           /* 43px / 393px */
    border: 0.51vw solid var(--text-light); /* 2px / 393px */
    border-radius: 18.83vw;    /* 74px / 393px - pill shape */
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.33vw;         /* 17px / 393px */
    color: var(--text-light);  /* #F2F2F2 */
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .gumloop_mobile_cta:hover,
  .gumloop_mobile_cta:active {
    background-color: var(--text-light);
    color: var(--secondary);
  }

  /* ========================================
     HOW IT WORKS - Mobile Version (Frame 7)
     Expandable week circles
     All values in vw for proportional scaling
  ======================================== */

  /* Show how it works section on mobile */
  .how_it_works {
    display: block !important;
    min-height: auto;
    height: auto;              /* Override fixed 47.25rem height from desktop */
    padding: 5.09vw;           /* 20px / 393px */
    background-color: var(--text-light); /* #F2F2F2 */
  }

  /* Hide desktop content */
  .how_it_works_container {
    display: none !important;
  }

  /* Show mobile version */
  .how_mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* Title */
  .how_mobile_title {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 13.74vw;        /* 54px / 393px */
    line-height: 1;
    color: var(--secondary);   /* Navy */
    align-self: flex-start;
    margin-bottom: 5.09vw;     /* 20px */
  }

  /* Circle container */
  .how_mobile_circle {
    width: 96.18vw;            /* 378px / 393px */
    height: 96.18vw;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--text-light);  /* Light gray - matches section background */
    transition: background-color 0.3s ease;
    margin-bottom: 5.09vw;     /* Gap between circles */
  }

  /* Active circle - navy background */
  .how_mobile_circle.active {
    background-color: var(--secondary); /* Navy */
  }

  /* Week title - always visible */
  .how_mobile_week_title {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 6.36vw;         /* 25px / 393px */
    line-height: 1.15;
    color: var(--secondary);   /* Navy - inactive state */
    transition: color 0.3s ease;
  }

  /* Active state - white title */
  .how_mobile_circle.active .how_mobile_week_title {
    color: var(--text-light);  /* White */
  }

  /* Week subtitle - hidden when inactive (light text on light bg) */
  .how_mobile_week_subtitle {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.33vw;         /* 17px / 393px */
    line-height: 1.4;
    text-align: center;
    max-width: 50.38vw;        /* ~198px / 393px */
    color: var(--text-light);  /* Light - invisible on light bg */
    transition: color 0.3s ease;
    margin-top: 3.82vw;        /* 15px / 393px */
  }

  /* Active state - subtitle visible (white on navy) */
  .how_mobile_circle.active .how_mobile_week_subtitle {
    color: var(--text-light);  /* White - visible on navy */
  }

  /* ========================================
     PRICING - Mobile Version (Frame 7)
     Vertically stacked pricing cards
     All values in vw for proportional scaling
     Base viewport: 393px (Figma design)
     Formula: vw = (px / 393) × 100
  ======================================== */

  /* Show pricing section on mobile */
  .pricing {
    display: block !important;
    min-height: auto;
    padding: 0;
    background-color: var(--secondary); /* Navy #050549 */
  }

  /* Hide desktop content */
  .pricing_container {
    display: none !important;
  }

  .pricing_shape_wrapper {
    display: none !important;
  }

  /* Show mobile version */
  .pricing_mobile {
    display: block;
    width: 100%;
    padding: 16.54vw 0 10.18vw 0; /* 65px top, 40px bottom */
  }

  /* Title */
  .pricing_mobile_title {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 13.74vw;        /* 54px / 393px */
    line-height: 1;
    color: var(--text-light);  /* White #F2F2F2 */
    padding: 0 8.40vw;         /* 33px / 393px - left padding to match cards */
    margin-bottom: 12.72vw;    /* 50px / 393px - gap before first card */
  }

  /* Cards container */
  .pricing_cards_mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7.63vw;               /* 30px / 393px */
    width: 100%;
  }

  /* Individual card */
  .pricing_card_mobile {
    width: 83.46vw;            /* 328px / 393px */
    min-height: 111.96vw;      /* 440px / 393px */
    background-color: var(--text-light); /* #F2F2F2 */
    border: 0.51vw solid var(--accent);  /* 2px / 393px, green #9EFB00 */
    border-radius: 7.63vw;     /* 30px / 393px */
    padding: 17.30vw 7.63vw 10.18vw 7.63vw; /* 68px 30px 40px 30px */
    display: flex;
    flex-direction: column;
  }

  /* Bubble Gum Blast card - taller for 2-line title */
  .pricing_card_mobile.pricing_card_mobile_tall {
    min-height: 133.59vw;      /* 525px / 393px */
  }

  /* Card title wrapper */
  .pricing_card_mobile_title_wrapper {
    margin-bottom: 8.91vw;     /* 35px / 393px */
  }

  /* Card title */
  .pricing_card_mobile_title {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 12.21vw;        /* 48px / 393px */
    line-height: 112%;
    color: var(--secondary);   /* Navy #050549 */
    margin: 0;
  }

  /* Features list */
  .pricing_features_mobile {
    list-style: none;
    padding: 0;
    margin: 0 0 auto 0;        /* Push button to bottom */
  }

  .pricing_features_mobile li {
    display: flex;
    align-items: flex-start;
    gap: 3.82vw;               /* 15px / 393px */
    font-family: 'Funnel Display', sans-serif;
    font-size: 4.33vw;         /* 17px / 393px */
    line-height: 200%;         /* Double line height for spacing */
    color: var(--secondary);   /* Navy */
  }

  /* Quarter circle bullet */
  .pricing_bullet_mobile {
    flex-shrink: 0;
    width: 2.54vw;             /* 10px / 393px */
    height: 2.54vw;
    margin-top: 3.05vw;        /* 12px / 393px - align with text top */
    color: var(--secondary);
    /* No rotation - curves to bottom-right */
  }

  /* CTA pill button */
  .pricing_pill_mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 50.64vw;        /* ~199px / 393px */
    height: 10.18vw;           /* 40px / 393px */
    border: 0.25vw solid var(--secondary); /* 1px / 393px */
    border-radius: 18.83vw;    /* 74px / 393px */
    padding: 0 5.09vw;         /* 20px / 393px */
    background-color: transparent;
    color: var(--secondary);
    font-family: 'Funnel Display', sans-serif;
    font-size: 4.33vw;         /* 17px / 393px */
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 7.63vw;        /* 30px / 393px */
    align-self: center;
  }

  /* Bubble Gum Blast taller button */
  .pricing_card_mobile_tall .pricing_pill_mobile {
    height: 14.25vw;           /* 56px / 393px */
  }

  .pricing_pill_mobile:hover,
  .pricing_pill_mobile:active {
    background-color: var(--secondary);
    color: var(--text-light);
  }

  /* ========================================
     CTA "WHO THIS IS FOR" - Mobile Version
     Layered design: white bg → eclipse → content
     All values in vw for proportional scaling
     Base viewport: 393px (Figma design)
     Formula: vw = (px / 393) × 100
  ======================================== */

  /* Show CTA section on mobile */
  .cta_section {
    display: block !important;
    min-height: auto;
    padding: 0;
    margin: 0;
    background-color: var(--text-light); /* White #F2F2F2 */
  }

  /* Hide desktop content */
  .cta_container {
    display: none !important;
  }

  /* Show mobile version */
  .cta_mobile {
    display: block;
    position: relative;
    width: 100%;
    min-height: 100vw;         /* Roughly match content height */
    padding: 8.91vw 4.07vw;    /* 35px 16px */
    overflow: hidden;
  }

  /* Eclipse gradient - Layer 2 */
  .cta_mobile_eclipse {
    position: absolute;
    width: 63.10vw;            /* 248px / 393px */
    height: 63.10vw;
    left: 29.77vw;             /* 117px / 393px */
    top: 0;
    background: radial-gradient(circle, #9EFB00 0%, rgba(158, 251, 0, 0) 70%);
    pointer-events: none;
    z-index: 0;
  }

  /* Title */
  .cta_mobile_title {
    position: relative;
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 13.74vw;        /* 54px / 393px */
    line-height: 1;
    color: var(--secondary);   /* Navy #050549 */
    margin-bottom: 10.18vw;    /* 40px / 393px */
    z-index: 1;
  }

  /* Checklist container */
  .cta_mobile_checklist {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1;
  }

  /* Checklist item */
  .cta_mobile_item {
    display: flex;
    align-items: flex-start;
    gap: 3.05vw;               /* 12px / 393px */
    margin-bottom: 5.09vw;     /* 20px / 393px */
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 4.33vw;         /* 17px / 393px */
    line-height: 1.4;
    color: var(--secondary);   /* Navy */
  }

  .cta_mobile_item:last-child {
    margin-bottom: 0;
  }

  /* Checkbox */
  .cta_mobile_checkbox {
    flex-shrink: 0;
    width: 4.58vw;             /* 18px / 393px */
    height: 4.58vw;
    margin-top: 0.51vw;        /* 2px - align with text */
    color: var(--secondary);   /* Navy fill */
  }

  /* Second section (What you get) - eclipse positioning */
  .cta_mobile_checklist + .cta_mobile_eclipse {
    top: auto;                 /* Remove fixed top */
    position: relative;        /* Flow with document */
    margin-bottom: -63.10vw;   /* Full height negative margin - eclipse takes no vertical space */
  }

  /* SPACING: Gap between "Value speed and transparency" and "What you get" title */
  .cta_mobile_checklist + .cta_mobile_eclipse + .cta_mobile_title {
    position: relative;
    z-index: 1;
    margin-top: 10.0vw;        /* <-- ADJUST THIS VALUE (currently 20px) */
  }

  /* ========================================
     MOBILE: Start Your Transformation Section
  ======================================== */
  .transformation_mobile {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 8.91vw 0 0 0;     /* 35px top only */
    margin: 0;
    background-color: var(--text-light); /* White #F2F2F2 */
    overflow: hidden;          /* Clip any overflow */
  }

  /* Gradient overlay - green from bottom fading up */
  .transformation_mobile::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 102.54vw;          /* 403px / 393px */
    background: linear-gradient(to top, #9EFB00 0%, rgba(158, 251, 0, 0) 100%);
    pointer-events: none;
    z-index: 0;
  }

  /* Title - Instrument Serif Italic */
  .transformation_mobile_title {
    position: relative;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 13.74vw;        /* 54px / 393px */
    line-height: 0.8;
    text-align: center;
    color: var(--secondary);   /* Navy #050549 */
    margin: 0 0 8.40vw 0;      /* 33px bottom margin */
    z-index: 1;
  }

  /* Body text */
  .transformation_mobile_body {
    position: relative;
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 8.14vw;         /* 32px / 393px */
    line-height: 1;
    color: var(--secondary);
    padding: 0 11.20vw;        /* 44px left padding */
    margin: 0 0 10.18vw 0;     /* 40px bottom margin */
    z-index: 1;
  }

  /* Buttons container */
  .transformation_mobile_buttons {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.82vw;               /* 15px gap between buttons */
    z-index: 1;
  }

  /* Pill outline button */
  .transformation_mobile_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 53.69vw;            /* 211px / 393px */
    height: 10.18vw;           /* 40px / 393px */
    border: 0.51vw solid var(--secondary); /* 2px border */
    border-radius: 18.83vw;    /* 74px / 393px */
    background: transparent;
    font-family: 'Funnel Display', sans-serif;
    font-weight: 400;
    font-size: 4.33vw;         /* 17px / 393px */
    color: var(--secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .transformation_mobile_btn:hover {
    background-color: var(--secondary);
    color: var(--text-light);
  }

  /* Logo at bottom - MUST be flush with section bottom */
  .transformation_mobile_logo {
    position: relative;
    display: block;
    margin-top: 15.27vw;       /* 60px spacing */
    margin-bottom: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
    text-align: center;
    z-index: 1;
  }

  .transformation_mobile_logo img {
    width: 100.25vw;           /* 394px / 393px - full width */
    height: auto;
  }

  .transformation_mobile_logo svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--secondary);   /* Navy #050549 */
    margin: 0 0 -2.4vw 0;        /* Negative margin - overflow hidden will clip */
    padding: 0;
  }

}

/* ========================================
   CONTACT MODAL
======================================== */
.contact_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact_modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact_modal.visible {
  opacity: 1;
}

/* Dark overlay */
.contact_modal_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(5, 5, 73, 0.8); /* Navy with opacity */
  cursor: pointer;
}

/* Modal content box */
.contact_modal_content {
  position: relative;
  width: 90%;
  max-width: 500px;
  background-color: var(--text-light);
  border-radius: 1.5rem;
  padding: 3rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  z-index: 1;
}

.contact_modal.visible .contact_modal_content {
  transform: translateY(0);
}

/* Close button */
.contact_modal_close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--secondary);
  cursor: pointer;
  line-height: 1;
  padding: 0.5rem;
  transition: opacity 0.2s ease;
}

.contact_modal_close:hover {
  opacity: 0.7;
}

/* Modal title */
.contact_modal_title {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.5rem;
  color: var(--secondary);
  margin: 0 0 2rem 0;
  text-align: center;
}

/* Form styles */
.contact_form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact_form_input,
.contact_form_textarea {
  width: 100%;
  padding: 1rem 1.25rem;
  font-family: 'Funnel Display', sans-serif;
  font-size: 1rem;
  color: var(--secondary);
  background-color: transparent;
  border: 2px solid var(--secondary);
  border-radius: 0.75rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact_form_input::placeholder,
.contact_form_textarea::placeholder {
  color: rgba(5, 5, 73, 0.5);
}

.contact_form_input:focus,
.contact_form_textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(158, 251, 0, 0.2);
}

.contact_form_textarea {
  min-height: 120px;
  resize: vertical;
}

/* Submit button */
.contact_form_submit {
  margin-top: 0.5rem;
  padding: 1rem 2rem;
  font-family: 'Funnel Display', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-light);
  background-color: var(--secondary);
  border: 2px solid var(--secondary);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.contact_form_submit:hover {
  background-color: transparent;
  color: var(--secondary);
}

/* Honeypot field - hidden from users, catches bots */
.contact_form_honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  pointer-events: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .contact_modal {
    height: 100dvh; /* Dynamic viewport height - shrinks when keyboard appears */
  }

  .contact_modal_content {
    width: 95%;
    max-height: 85dvh;
    overflow-y: auto;
    padding: 2rem 1.5rem;
    border-radius: 1rem;
  }

  .contact_modal_title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .contact_form_input,
  .contact_form_textarea {
    padding: 0.875rem 1rem;
    font-size: 16px; /* Prevents zoom on iOS */
  }
}