/* ==========================================================================
   TINTADOT — BRAND DESIGN SYSTEM & TOKENS
   ========================================================================== */
:root {
  /* Surfaces & Background */
  --td-paper: #FFFFFD;
  --td-ink: #111111;
  --td-logo-wordmark: #101A26;
  --td-text-muted: #6B6B67;
  --td-text-subtle: #8E8D88;
  --td-border: #DDDCD6;
  --td-border-light: #EBEAE5;
  --td-surface-card: #FFFFFF;

  /* Canonical 8-Dot Brand Palette */
  --td-dot-1-blue: #035DE5;
  --td-dot-2-purple: #6B44FD;
  --td-dot-3-pink: #E558B9;
  --td-dot-4-orange: #EF7A2D;
  --td-dot-5-deepblue: #0250C7;
  --td-dot-6-teal: #0596A6;
  --td-dot-7-cyan: #04A2A4;
  --td-dot-8-aqua: #0CACAD;

  /* Active Selection Tint (matches teal blob #7 by default) */
  --selection-color: var(--td-dot-7-cyan);
  --selection-text: #FFFFFF;

  /* Typography */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   RESET & GLOBAL
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-family-base);
  background-color: var(--td-paper);
  color: var(--td-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--td-paper);
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

/* Disable default browser tap highlight color globally */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Dynamic text selection matching brand blobs */
::selection {
  background-color: var(--selection-color);
  color: var(--selection-text);
}

::-moz-selection {
  background-color: var(--selection-color);
  color: var(--selection-text);
}

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

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

/* ==========================================================================
   HEADER / NAVIGATION BAR
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 253, 0.80);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(16, 26, 38, 0.05);
  z-index: 1000;
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.site-header.is-scrolled {
  background-color: rgba(255, 255, 253, 0.88);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border-bottom: 1px solid rgba(16, 26, 38, 0.08);
  box-shadow: 0 4px 20px -2px rgba(16, 26, 38, 0.05), 0 1px 3px rgba(16, 26, 38, 0.02);
}

.header-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px clamp(20px, 4.5vw, 64px) 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-scrolled .header-container {
  padding: 14px clamp(20px, 4.5vw, 64px) 13px;
}

.brand-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: transparent !important;
  transition: opacity var(--transition-fast);
}

.brand-logo:hover {
  opacity: 0.88;
}

.brand-logo-img {
  width: auto;
  height: 32px;
  max-width: 175px;
  display: block;
  object-fit: contain;
  transition: opacity 0.25s ease;
}

.brand-logo-img.logo-dark {
  display: none !important;
}

/* Dark Mode Navigation Bar when takeover is active */
body.takeover-active {
  touch-action: none !important;
}

body.takeover-active .site-header {
  background-color: rgba(16, 26, 38, 0.92) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.45) !important;
}

body.takeover-active .brand-logo-img.logo-light {
  display: none !important;
}

body.takeover-active .brand-logo-img.logo-dark {
  display: block !important;
}

body.takeover-active .nav-link {
  color: #D6D5CF;
}

body.takeover-active .nav-link:hover {
  color: #FFFFFF;
}

body.takeover-active .header-divider {
  background-color: rgba(255, 255, 255, 0.16);
}

body.takeover-active .header-badge {
  color: #8C8B85;
}

body.takeover-active .hamburger-bar {
  background-color: #FFFFFF;
}

body.takeover-active .morphing-footer-badge {
  opacity: 0 !important;
  pointer-events: none;
}

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 34px;
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: #1A1A1A;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--td-dot-6-teal);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.btn-prelaunch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--td-dot-6-teal);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 9999px;
  white-space: nowrap;
  transition: all var(--transition-smooth);
  box-shadow: 0 1px 2px rgba(5, 150, 166, 0.12);
}

.btn-prelaunch:hover {
  background-color: #048290;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(5, 150, 166, 0.25);
}

.btn-arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.btn-prelaunch:hover .btn-arrow {
  transform: translateX(3px);
}

.header-divider {
  width: 1px;
  height: 38px;
  background-color: var(--td-border);
  margin: 0 18px 0 22px;
}

.header-badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.85px;
  color: #9A9A95;
  text-transform: uppercase;
  user-select: none;
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 20px;
  padding: 0;
  margin-left: 12px;
  z-index: 60;
}

.hamburger-bar {
  display: block;
  width: 100%;
  height: 2.5px;
  background-color: var(--td-ink);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

.mobile-toggle.active .hamburger-bar:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}

.mobile-toggle.active .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.mobile-toggle.active .hamburger-bar:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

.mobile-nav-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--td-paper);
  border-bottom: 1px solid var(--td-border);
  padding: 24px 32px 32px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}

.mobile-nav-drawer.open {
  display: block;
  animation: drawerSlideDown 0.25s ease-out forwards;
}

@keyframes drawerSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mobile-nav-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--td-ink);
  display: block;
  padding: 6px 0;
}

.mobile-drawer-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--td-border-light);
}

.mobile-btn {
  width: 100%;
}

/* ==========================================================================
   SECTION 1: HERO SECTION & BRAND GRAPHIC ATMOSPHERE (STICKY SCROLL CHOREOGRAPHY)
   ========================================================================== */
.hero-scroll-track {
  position: relative;
  width: 100%;
  height: 220vh; /* Generous runway so centering glides smoothly and naturally */
}

.hero-section-wrapper {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--td-paper);
  overflow: hidden;
  z-index: 10;
}

.hero-bg-parallax {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.22; /* Soft, subtle, non-distracting atmospheric tint */
  filter: saturate(0.82) brightness(1.02);
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  display: block;
}

.hero-main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  padding: 84px 0 20px;
  background-color: transparent;
  overflow: hidden;
}

.hero-container {
  max-width: 1440px;
  width: 100%;
  margin: auto auto;
  padding-left: clamp(20px, 4.5vw, 64px);
  padding-right: clamp(16px, 3.5vw, 52px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 36px;
  position: relative;
  z-index: 5;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 620px;
  z-index: 10;
}

.hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.25px;
  color: #4A4A45;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeIn 0.6s ease-out 0.1s forwards;
}

.hero-headline {
  font-size: clamp(2.85rem, 4.6vw, 4.45rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--td-ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 24px;
  user-select: text;
  cursor: pointer;
}

.highlight-purple { color: var(--td-dot-2-purple); }
.highlight-teal { color: var(--td-dot-7-cyan); }
.highlight-orange { color: var(--td-dot-4-orange); }

/* Sweep Reveal Animations */
.sweep-line-box {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 1px 4px 3px 0;
  margin-bottom: 1px;
  white-space: nowrap;
}

.sweep-text {
  display: inline-block;
  opacity: 0;
  will-change: opacity;
}

.sweep-curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  transform: scaleX(0);
  will-change: transform;
}

.curtain-purple { background-color: var(--td-dot-2-purple); }
.curtain-teal { background-color: var(--td-dot-7-cyan); }
.curtain-orange { background-color: var(--td-dot-4-orange); }
.curtain-ink { background-color: #101A26; }

.animating .sweep-curtain {
  animation: sweepWipe 0.68s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.animating .sweep-text {
  animation: textReveal 0.68s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.animating .line-1 .sweep-curtain, .animating .line-1 .sweep-text { animation-delay: 0.18s; }
.animating .line-2 .sweep-curtain, .animating .line-2 .sweep-text { animation-delay: 0.44s; }
.animating .line-3 .sweep-curtain, .animating .line-3 .sweep-text { animation-delay: 0.70s; }
.animating .line-4 .sweep-curtain, .animating .line-4 .sweep-text { animation-delay: 0.96s; }

@keyframes sweepWipe {
  0% { transform: scaleX(0); transform-origin: left center; }
  48% { transform: scaleX(1); transform-origin: left center; }
  51% { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

@keyframes textReveal {
  0%, 48% { opacity: 0; }
  49%, 100% { opacity: 1; }
}

.animation-completed .sweep-text { opacity: 1 !important; }
.animation-completed .sweep-curtain { transform: scaleX(0) !important; }

.hero-description {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #1A1A1A;
  max-width: 430px;
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeIn 0.8s ease-out 1.25s forwards;
}

/* ==========================================================================
   HERO LEFT TEXT: LINE-BY-LINE STAGGERED DRAWER EXIT & RETURN
   Triggered on single scroll down so text smoothly slides out like a drawer
   ========================================================================== */
.hero-eyebrow,
.sweep-line-box,
.hero-description {
  will-change: transform, opacity;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Returning from drawer exit when scrolled back to top */
.hero-content:not(.drawer-exited) .hero-eyebrow {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-delay: 0.12s;
}
.hero-content:not(.drawer-exited) .line-1 {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-delay: 0.09s;
}
.hero-content:not(.drawer-exited) .line-2 {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-delay: 0.06s;
}
.hero-content:not(.drawer-exited) .line-3 {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-delay: 0.03s;
}
.hero-content:not(.drawer-exited) .line-4 {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-delay: 0s;
}
.hero-content:not(.drawer-exited) .hero-description {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-delay: 0.15s;
}

/* Drawer Exited: Soft Staggered Slide to the Left */
.hero-content.drawer-exited .hero-eyebrow {
  transform: translate3d(-140px, 0, 0) !important;
  opacity: 0 !important;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.84, 0) 0s,
              opacity 0.4s ease 0s !important;
}
.hero-content.drawer-exited .line-1 {
  transform: translate3d(-180px, 0, 0) !important;
  opacity: 0 !important;
  transition: transform 0.52s cubic-bezier(0.7, 0, 0.84, 0) 0.04s,
              opacity 0.42s ease 0.04s !important;
}
.hero-content.drawer-exited .line-2 {
  transform: translate3d(-200px, 0, 0) !important;
  opacity: 0 !important;
  transition: transform 0.54s cubic-bezier(0.7, 0, 0.84, 0) 0.08s,
              opacity 0.44s ease 0.08s !important;
}
.hero-content.drawer-exited .line-3 {
  transform: translate3d(-220px, 0, 0) !important;
  opacity: 0 !important;
  transition: transform 0.56s cubic-bezier(0.7, 0, 0.84, 0) 0.12s,
              opacity 0.46s ease 0.12s !important;
}
.hero-content.drawer-exited .line-4 {
  transform: translate3d(-240px, 0, 0) !important;
  opacity: 0 !important;
  transition: transform 0.58s cubic-bezier(0.7, 0, 0.84, 0) 0.16s,
              opacity 0.48s ease 0.16s !important;
}
.hero-content.drawer-exited .hero-description {
  transform: translate3d(-160px, 0, 0) !important;
  opacity: 0 !important;
  transition: transform 0.55s cubic-bezier(0.7, 0, 0.84, 0) 0.20s,
              opacity 0.45s ease 0.20s !important;
}

/* Right Column: Hero Media (8-Dot Cluster Masked Workshop Photography) */
.hero-media {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  width: 100%;
  opacity: 0;
  animation: imageFadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.hero-image-frame {
  position: relative;
  width: 100%;
  max-width: 530px;
  background-color: transparent;
  cursor: default;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-radius: 0;
  overflow: visible !important;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.hero-cluster-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible !important;
  filter: drop-shadow(0 14px 28px rgba(16, 26, 38, 0.08));
  transition: filter 0.4s ease;
}

/* 8-Dot Cluster Merge and Split Physics */
.cluster-circle {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

/* Smooth inward convergence when merging into single ball (smooth, visible 0.85s ease-in-out) */
.cluster-merged .cluster-circle {
  transition: transform 0.85s cubic-bezier(0.45, 0.05, 0.55, 0.95) !important;
}

/* 8 dots converge to dead-center (263, 193) and expand by scale 2.05 to fuse into one round ball */
.cluster-merged .dot-1 { transform: translate(0px, 140px) scale(2.05) !important; }
.cluster-merged .dot-2 { transform: translate(-140px, 140px) scale(2.05) !important; }
.cluster-merged .dot-3 { transform: translate(210px, 0px) scale(2.05) !important; }
.cluster-merged .dot-4 { transform: translate(70px, 0px) scale(2.05) !important; }
.cluster-merged .dot-5 { transform: translate(-70px, 0px) scale(2.05) !important; }
.cluster-merged .dot-6 { transform: translate(-210px, 0px) scale(2.05) !important; }
.cluster-merged .dot-7 { transform: translate(140px, -140px) scale(2.05) !important; }
.cluster-merged .dot-8 { transform: translate(0px, -140px) scale(2.05) !important; }

/* ==========================================================================
   WAVEY IDLE ANIMATION FOR THE 8-DOT BRAND CONSTELLATION
   A gentle, organic fluid wave undulating across the circles when resting.
   Separated onto .dot-wave-group so it NEVER interferes with circle transitions.
   ========================================================================== */
@keyframes clusterWave {
  0%, 100% {
    transform: translateY(0px);
  }
  30% {
    transform: translateY(-10px);
  }
  65% {
    transform: translateY(7px);
  }
}

.cluster-idle .cluster-circle {
  animation: clusterWave 3.2s ease-in-out infinite;
}

/* Stagger each dot from left to right to create an organic liquid wave */
.cluster-idle .dot-3 { animation-delay: 0s; }
.cluster-idle .dot-7 { animation-delay: 0.25s; }
.cluster-idle .dot-4 { animation-delay: 0.50s; }
.cluster-idle .dot-1 { animation-delay: 0.75s; }
.cluster-idle .dot-8 { animation-delay: 1.00s; }
.cluster-idle .dot-5 { animation-delay: 1.25s; }
.cluster-idle .dot-2 { animation-delay: 1.50s; }
.cluster-idle .dot-6 { animation-delay: 1.75s; }

/* ==========================================================================
   WORKSHOP CLUSTER EXPANSION & FRAME 2 TAKEOVER PORTAL
   ========================================================================== */
.hero-takeover-portal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 900;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  will-change: clip-path;
  background-color: #0E1217;
}

.hero-takeover-portal.portal-animating,
.hero-takeover-portal.portal-expanded {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.takeover-media-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0E1217;
}

.takeover-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 36%;
  display: block;
}

.takeover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(12, 15, 20, 0.96) 0%,
    rgba(12, 15, 20, 0.88) 38%,
    rgba(12, 15, 20, 0.62) 65%,
    rgba(12, 15, 20, 0.28) 100%
  );
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
  pointer-events: none;
}

.portal-expanded .takeover-scrim {
  opacity: 1;
}

.takeover-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 80px clamp(28px, 6.5vw, 120px) 0;
  z-index: 10;
  pointer-events: none;
}

.portal-expanded .takeover-content-wrapper {
  pointer-events: auto;
}

.takeover-content-inner {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  pointer-events: auto;
}

.takeover-headline {
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
}

.takeover-headline .highlight-orange {
  color: #EF7A2D;
}

/* Individual line item for entrance and sequential exit */
.takeover-exit-item {
  display: block;
  opacity: 0;
  transform: translate3d(-36px, 0, 0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

/* Staggered entrance when expanded */
.portal-expanded .takeover-line-1 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.16s;
}
.portal-expanded .takeover-line-2 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.23s;
}
.portal-expanded .takeover-line-3 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.30s;
}
.portal-expanded .takeover-line-4 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.38s;
}
.portal-expanded .takeover-line-5 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.46s;
}

/* Sequential razor-sharp slide to the left when user presses X or dismisses */
.portal-exiting-text .takeover-line-1 {
  transform: translate3d(-200px, 0, 0) !important;
  opacity: 0 !important;
  transition: transform 0.32s cubic-bezier(0.7, 0, 0.84, 0) 0s,
              opacity 0.26s ease 0s !important;
}

.portal-exiting-text .takeover-line-2 {
  transform: translate3d(-200px, 0, 0) !important;
  opacity: 0 !important;
  transition: transform 0.32s cubic-bezier(0.7, 0, 0.84, 0) 0.07s,
              opacity 0.26s ease 0.07s !important;
}

.portal-exiting-text .takeover-line-3 {
  transform: translate3d(-200px, 0, 0) !important;
  opacity: 0 !important;
  transition: transform 0.32s cubic-bezier(0.7, 0, 0.84, 0) 0.14s,
              opacity 0.26s ease 0.14s !important;
}

.portal-exiting-text .takeover-line-4 {
  transform: translate3d(-200px, 0, 0) !important;
  opacity: 0 !important;
  transition: transform 0.32s cubic-bezier(0.7, 0, 0.84, 0) 0.21s,
              opacity 0.26s ease 0.21s !important;
}

.portal-exiting-text .takeover-line-5 {
  transform: translate3d(-200px, 0, 0) !important;
  opacity: 0 !important;
  transition: transform 0.32s cubic-bezier(0.7, 0, 0.84, 0) 0.28s,
              opacity 0.26s ease 0.28s !important;
}

.portal-exiting-text .takeover-dismiss-btn {
  opacity: 0 !important;
  transform: scale(0.75) !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
}

.takeover-description {
  font-size: 14.5px;
  line-height: 1.55;
  color: #C8C7C2;
  max-width: 450px;
}

.takeover-explore-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: #EF7A2D;
  text-decoration: none;
  border-bottom: 1.5px solid #EF7A2D;
  padding-bottom: 3px;
  width: fit-content;
  margin-top: 6px;
  cursor: pointer;
  transition: gap 0.25s ease, opacity 0.2s ease, border-color 0.2s ease;
}

.takeover-explore-cta:hover {
  gap: 13px;
  opacity: 0.92;
}

.takeover-explore-cta .cta-arrow-icon {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.takeover-explore-cta:hover .cta-arrow-icon {
  transform: translateX(4px);
}

/* Close / Dismiss Button - Hidden to enforce "Explore the flow" gateway button */
.takeover-dismiss-btn {
  display: none !important;
}

/* Prevent any background scroll leak or layout shift while takeover is active */
body.takeover-active {
  touch-action: none !important;
}

/* Hero Footer Slot (where badge initially sits) */
.hero-footer-anchor {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

/* ==========================================================================
   SECTION 2: THE WORKFLOW
   ========================================================================== */
.workflow-section {
  position: relative;
  width: 100%;
  padding: 108px 0 0;
  background-color: var(--td-paper);
  border-top: 1px solid var(--td-border-light);
  overflow: hidden;
  scroll-margin-top: 0;
}

.workflow-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.5vw, 64px) 56px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  position: relative;
  z-index: 5;
}

/* Header */
.workflow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.workflow-title-group {
  max-width: 580px;
}

.workflow-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--td-text-subtle);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.workflow-headline {
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  display: flex;
  flex-direction: column;
}

.workflow-line-main {
  color: var(--td-ink);
}

.workflow-line-sub {
  color: #92918B;
}

.workflow-intro-text {
  max-width: 440px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #4A4A45;
  padding-top: 28px;
}

/* ==========================================================================
   5-STEP TIMELINE WITH TRAVELING RAZOR-SHARP POINT
   ========================================================================== */
.workflow-timeline-wrapper {
  position: relative;
  width: 100%;
  margin-top: 12px;
}

/* Mobile-only workflow carousel components (Hidden on desktop) */
.mobile-workflow-stepper,
.mobile-carousel-controls {
  display: none;
}

/* The Horizontal Timeline Track */
.timeline-track-bar {
  position: absolute;
  top: 9px; /* Centered through the 18px step dots */
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  z-index: 2;
}

.timeline-base-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: #E2E1DC;
}

/* The Animated Traveling Point with Luminous Ripple */
.timeline-traveling-point {
  position: absolute;
  top: 1px;
  left: 0%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10;
  will-change: transform, left;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.point-core {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--td-ink);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4), 0 0 2px #FFFFFF;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.point-ripple {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 26, 38, 0.3) 0%, rgba(16, 26, 38, 0) 70%);
  animation: pulseRipple 1.2s infinite ease-out;
}

@keyframes pulseRipple {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Steps Grid */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  position: relative;
  z-index: 3;
}

.step-card-col {
  display: flex;
  flex-direction: column;
}

.step-header {
  margin-bottom: 16px;
  padding-right: 8px;
}

.step-dot-wrap {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
}

.step-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: block;
  background-color: var(--dot-color, #111111);
  border: 2px solid var(--td-paper);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: transform 0.16s var(--transition-bounce), box-shadow 0.16s ease;
  will-change: transform;
}

.dot-purple { --dot-color: var(--td-dot-2-purple); }
.dot-teal { --dot-color: var(--td-dot-7-cyan); }
.dot-orange { --dot-color: var(--td-dot-4-orange); }
.dot-blue { --dot-color: var(--td-dot-1-blue); }
.dot-pink { --dot-color: var(--td-dot-3-pink); }

/* Snappy Action Pulse on the solid point only */
.step-dot.active-hit {
  transform: scale(1.68);
  box-shadow: 0 0 18px var(--dot-color), 0 0 3px var(--td-paper);
}

.step-num {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--td-text-muted);
  display: block;
  margin-bottom: 2px;
}

.step-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--td-ink);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.step-subtitle {
  font-size: 12px;
  line-height: 1.4;
  color: var(--td-text-muted);
  min-height: 34px;
}

/* ==========================================================================
   CARDS UI MOCKUPS (Fixed & Stationary, No Movement/Scaling)
   ========================================================================== */
.step-card {
  background-color: var(--td-surface-card);
  border: 1px solid var(--td-border-light);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);
  display: flex;
  flex-direction: column;
  height: 236px;
  overflow: hidden;
}

/* Card 1: Intake */
.card-intake {
  padding: 16px;
  justify-content: space-between;
}

.intake-sender-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-square {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mail-icon-sq {
  background-color: #F1F0EC;
  color: #333333;
}

.sender-info {
  overflow: hidden;
}

.sender-subject {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--td-ink);
  line-height: 1.25;
}

.sender-email {
  font-size: 10.5px;
  color: var(--td-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intake-quote-bubble {
  background-color: #F6F5F2;
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #262624;
}

.intake-footer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--td-text-muted);
}

/* Card 2: Quote */
.card-quote {
  padding: 16px;
  justify-content: space-between;
}

.quote-product-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.quote-tshirt-thumb {
  width: 44px;
  height: 48px;
  background-color: #F6F5F2;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tshirt-img {
  width: 32px;
  height: 32px;
}

.quote-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quote-code {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--td-ink);
}

.quote-item-spec {
  font-size: 10.5px;
  font-weight: 500;
  color: #555550;
  line-height: 1.3;
}

.quote-item-color {
  font-size: 10.5px;
  color: var(--td-text-muted);
}

.quote-placeholder-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.p-line {
  height: 4px;
  background-color: #ECEBE6;
  border-radius: 2px;
}

.line-short { width: 32px; }
.line-med { width: 48px; }

.quote-badge-approved {
  background-color: #E8F7F0;
  color: #17855C;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Card 3: Production Readiness */
.card-readiness {
  padding: 14px;
  justify-content: space-between;
}

.blocker-box {
  background-color: #FAF4E8;
  border: 1px solid #F2E8D2;
  border-radius: 10px;
  padding: 10px 12px;
}

.blocker-header-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.box-icon-sq {
  background-color: #F1E5CB;
  color: #8C5D19;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.blocker-title-group {
  overflow: hidden;
}

.blocker-title {
  font-size: 12px;
  font-weight: 700;
  color: #2D271E;
  line-height: 1.3;
}

.blocker-eta {
  font-size: 10.5px;
  color: #7A6F60;
  margin-top: 2px;
}

.readiness-progress-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.readiness-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
}

.readiness-lbl {
  font-weight: 700;
  color: var(--td-ink);
}

.readiness-stat {
  font-weight: 600;
  color: var(--td-text-muted);
}

.readiness-track {
  width: 100%;
  height: 7px;
  background-color: #ECEBE6;
  border-radius: 9999px;
  overflow: hidden;
}

.readiness-fill {
  height: 100%;
  background-color: #0E6862;
  border-radius: 9999px;
}

/* Card 4: Production */
.card-production {
  padding: 8px 8px 12px;
  justify-content: space-between;
}

.production-photo-wrap {
  width: 100%;
  height: 145px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #E2E1DC;
}

.prod-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 36%;
  display: block;
}

.production-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 0;
  font-size: 11.5px;
}

.press-left {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--td-ink);
}

.online-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #10B981;
  display: inline-block;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.press-job-id {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--td-text-muted);
}

/* Card 5: Reorder */
.card-reorder {
  padding: 8px 8px 12px;
  justify-content: space-between;
}

.reorder-graphic-wrap {
  width: 100%;
  height: 145px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #18191D;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reorder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reorder-btn-wrap {
  padding: 4px 6px 0;
}

.btn-create-reorder {
  width: 100%;
  padding: 8px 12px;
  border-radius: 9999px;
  border: 1px solid var(--td-border);
  background-color: #FFFFFF;
  color: var(--td-ink);
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

.btn-create-reorder:hover {
  background-color: var(--td-ink);
  color: #FFFFFF;
  border-color: var(--td-ink);
}

/* ==========================================================================
   WHY SHOPS CHOOSE TINTADOT (4 FEATURES ROW)
   ========================================================================== */
.why-section {
  width: 100%;
  margin-top: 18px;
}

.why-divider-bar {
  position: relative;
  width: 100%;
  border-top: 1px solid var(--td-border-light);
  margin-bottom: 28px;
}

.why-label {
  position: absolute;
  top: -10px;
  left: 0;
  background-color: var(--td-paper);
  padding-right: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--td-text-subtle);
  text-transform: uppercase;
}

.why-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.why-card {
  display: flex;
  flex-direction: column;
}

.why-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.box-purple { background-color: #F3EFFF; }
.box-teal { background-color: #E6F7F7; }
.box-orange { background-color: #FCF6EA; }
.box-pink { background-color: #FCEEF7; }

.why-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--td-ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.why-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: #555550;
}

/* ==========================================================================
   WORKFLOW BOTTOM BAR (Full-width Denim Tag + Quote + Morph Dock)
   ========================================================================== */
.workflow-bottom-bar {
  width: 100%;
  position: relative;
  display: flex;
  align-items: stretch;
  background-color: #FAFAF8;
  border-top: 1px solid var(--td-border-light);
  overflow: hidden;
  height: 130px;
}

.bottom-fabric-banner {
  flex: 0 0 clamp(240px, 31vw, 460px);
  position: relative;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, calc(100% - 48px) 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 48px) 100%, 0 100%);
  overflow: hidden;
  background-color: #2F3238;
}

.fabric-tag-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.bottom-bar-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(20px, 3.5vw, 56px) 20px clamp(24px, 3vw, 48px);
  gap: clamp(20px, 2.5vw, 44px);
  min-width: 0;
}

.bottom-quote-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.quote-headline {
  font-size: clamp(1.15rem, 1.6vw, 1.65rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--td-ink);
  letter-spacing: -0.025em;
}

.quote-teal-highlight {
  color: var(--td-dot-6-teal);
  display: block;
}

.quote-source {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--td-text-subtle);
  text-transform: uppercase;
}

.bottom-bar-divider {
  width: 1px;
  height: 48px;
  background-color: var(--td-border-light);
  flex-shrink: 0;
}

/* Docking slot on the right side of workflow bottom bar */
.bottom-badge-dock {
  min-height: 48px;
  min-width: 335px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}

/* ==========================================================================
   THE GLOBAL MORPHING FOOTER BADGE
   "Built for small US print shops, typically 2-10 staff"
   ========================================================================== */
.morphing-footer-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.morphing-badge-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background-color: transparent;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.morph-shop-icon {
  width: 0;
  height: 20px;
  opacity: 0;
  margin-right: 0;
  color: var(--td-ink);
  flex-shrink: 0;
  transition: width 0.35s ease, opacity 0.35s ease, margin-right 0.35s ease;
}

.morph-text {
  font-size: 13.5px;
  font-weight: 500;
  color: #7A7A75;
  letter-spacing: -0.01em;
  transition: color 0.3s ease, font-size 0.3s ease;
}

/* STATE B: When docked in workflow bottom bar */
.morphing-footer-badge.in-workflow .morph-shop-icon {
  width: 20px;
  opacity: 1;
  margin-right: 8px;
}

.morphing-footer-badge.in-workflow .morph-text {
  font-size: 12.5px;
  font-weight: 500;
  color: #383834;
}

/* ==========================================================================
   GENERIC ANIMATIONS & RESPONSIVE RULES
   ========================================================================== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes imageFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Large screens (>= 1280px) */
@media (min-width: 1280px) {
  .hero-container { gap: 48px; }
  .hero-headline { font-size: 4rem; }
}

/* Standard Desktops / Laptops (1025px - 1279px) */
@media (max-width: 1279px) {
  .header-container { padding: 22px 32px 14px; }
  .hero-container { padding: 0 32px; gap: 28px; }
  .workflow-container { padding: 0 32px; }
  .nav-links { gap: 22px; }
  .hero-headline { font-size: 3.4rem; }
  .steps-grid { gap: 14px; }
  .step-card { height: 242px; }
}

/* Tablet Screens (769px - 1024px) */
@media (max-width: 1024px) {
  .header-container { padding: 18px 24px 14px; }
  .nav-menu { display: none; }
  .mobile-toggle { display: flex; }
  .hero-container { padding: 0 24px; grid-template-columns: 1fr; gap: 36px; }
  .workflow-container { padding: 0 24px 44px; }
  .hero-content { max-width: 100%; }
  .hero-media { justify-content: center; }
  .hero-image-frame {
    max-width: 100%;
    aspect-ratio: auto;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    overflow: visible !important;
  }
  .hero-headline { font-size: clamp(2.4rem, 6vw, 3.8rem); }
  .steps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .timeline-track-bar { display: none; }
  .why-features-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .bottom-bar-content {
    padding: 20px clamp(16px, 2.5vw, 24px);
    gap: 20px;
  }
  .bottom-badge-dock {
    min-width: 335px;
  }
}

/* Small Tablets / Large Phones (<= 860px) */
@media (max-width: 860px) {
  .workflow-bottom-bar {
    flex-direction: column;
    height: auto;
    min-height: auto;
  }
  .bottom-fabric-banner {
    flex: none;
    width: 100%;
    height: 130px;
    min-height: 130px;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  }
  .bottom-bar-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 28px 30px;
  }
  .bottom-bar-divider { display: none; }
  .bottom-badge-dock { min-width: 0; width: 100%; }
}

/* Mobile Screens (<= 768px) */
@media (max-width: 768px) {
  /* Strict Horizontal Overflow Containment & Touch Direction Lock */
  html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
    touch-action: pan-y;
  }

  .site-header,
  .hero-section-wrapper,
  .workflow-section,
  .problem-section,
  .floor-section,
  .faq-section,
  .prelaunch-section,
  .site-footer {
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-container { padding: 16px 20px 12px; }
  .site-header.is-scrolled .header-container { padding: 12px 20px 10px; }
  .brand-logo-img { height: 28px; }
  .header-actions .btn-prelaunch,
  .header-actions .header-divider,
  .header-actions .header-badge { display: none; }
  .mobile-toggle { display: flex; }
  
  /* Hero Section on Mobile: Left-aligned Headers, Centered Unclipped Dots */
  .hero-main {
    padding: 68px 0 16px;
    overflow: visible !important;
  }
  .hero-container {
    padding: 0 20px;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 0 auto !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible !important;
  }
  .hero-content {
    align-items: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 540px !important;
    overflow: hidden;
  }
  .hero-eyebrow {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 16px;
  }
  .hero-headline {
    text-align: left !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .sweep-line-box {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-description {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Drawer exit on mobile: slide left with clean fade inside hero-content */
  .hero-content.drawer-exited .hero-eyebrow {
    transform: translate3d(-100px, 0, 0) !important;
    opacity: 0 !important;
  }
  .hero-content.drawer-exited .line-1 {
    transform: translate3d(-120px, 0, 0) !important;
    opacity: 0 !important;
  }
  .hero-content.drawer-exited .line-2 {
    transform: translate3d(-130px, 0, 0) !important;
    opacity: 0 !important;
  }
  .hero-content.drawer-exited .line-3 {
    transform: translate3d(-140px, 0, 0) !important;
    opacity: 0 !important;
  }
  .hero-content.drawer-exited .line-4 {
    transform: translate3d(-150px, 0, 0) !important;
    opacity: 0 !important;
  }
  .hero-content.drawer-exited .hero-description {
    transform: translate3d(-110px, 0, 0) !important;
    opacity: 0 !important;
  }

  .hero-media {
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }
  .hero-image-frame {
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    aspect-ratio: auto;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    overflow: visible !important;
  }
  .hero-cluster-svg {
    margin: 0 auto !important;
    display: block !important;
    max-width: 360px !important;
    width: 100% !important;
    overflow: visible !important;
    filter: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  /* Workflow Section: Original Left-Aligned Header, Centered & Contained Carousel */
  .workflow-container {
    padding: 0 20px 48px;
    gap: 28px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .workflow-header {
    flex-direction: column;
    gap: 14px;
    text-align: left !important;
    align-items: flex-start !important;
    margin: 0 !important;
    width: 100%;
  }
  .workflow-title-group {
    align-items: flex-start !important;
    text-align: left !important;
    width: 100%;
  }
  .workflow-eyebrow {
    justify-content: flex-start !important;
    margin: 0 0 14px 0 !important;
  }
  .workflow-headline {
    text-align: left !important;
  }
  .workflow-intro-text {
    padding-top: 0;
    max-width: 100%;
    text-align: left !important;
    margin: 0 !important;
  }
  .timeline-track-bar { display: none !important; }

  /* Mobile Workflow Step Carousel */
  .mobile-workflow-stepper {
    display: flex !important;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    padding: 4px 0 16px;
    margin-bottom: 4px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .mobile-workflow-stepper::-webkit-scrollbar {
    display: none;
  }

  .workflow-timeline-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .mobile-stepper-track {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: max-content;
  }

  .mobile-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid #E2E0D8;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #555550;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-step-pill:active {
    transform: scale(0.96);
  }

  .mobile-step-pill.is-active {
    background: #101A26;
    color: #FFFFFF;
    border-color: #101A26;
    box-shadow: 0 4px 12px rgba(16, 26, 38, 0.18);
  }

  .mobile-step-pill .step-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
  }

  .mobile-step-pill.is-active .step-pill-dot {
    box-shadow: 0 0 8px currentColor;
  }

  /* Carousel Grid Container */
  .steps-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 16px !important;
    padding: 4px 20px 18px !important;
    margin: 0 -20px !important;
  }

  .steps-grid::-webkit-scrollbar {
    display: none !important;
  }

  .step-card-col {
    flex: 0 0 84vw !important;
    max-width: 340px !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .step-card-col .step-dot-wrap {
    display: none !important;
  }

  .step-card-col .step-header {
    margin-bottom: 12px !important;
    padding-right: 0 !important;
  }

  .step-card-col .step-num {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #8C8C85 !important;
    letter-spacing: 0.05em !important;
  }

  .step-card-col .step-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 2px !important;
  }

  .step-card-col .step-subtitle {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #6A6A64 !important;
  }

  .step-card-col .step-card {
    min-height: 275px !important;
    height: 275px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 16px rgba(16, 26, 38, 0.05) !important;
    border-radius: 18px !important;
  }

  /* Controls below carousel */
  .mobile-carousel-controls {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 0;
    margin-top: 0;
  }

  .carousel-arrow-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E2E0D8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #101A26;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(16, 26, 38, 0.05);
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .carousel-arrow-btn:active {
    transform: scale(0.92);
    background: #F8F7F2;
  }

  .carousel-indicators {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D8D6CF;
    border: none;
    padding: 0;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .carousel-dot.is-active {
    width: 24px;
    border-radius: 12px;
    background-color: var(--dot-color, #101A26);
    box-shadow: 0 0 8px rgba(16, 26, 38, 0.15);
  }

  .carousel-step-counter {
    font-size: 12px;
    font-weight: 700;
    color: #7A7A75;
    letter-spacing: 0.04em;
  }

  .why-features-grid { grid-template-columns: 1fr; gap: 20px; }
  .bottom-fabric-banner {
    flex: none;
    height: 130px;
    min-height: 130px;
  }
  .bottom-bar-content {
    padding: 20px 20px 28px;
  }
  .hero-eyebrow { font-size: 10.5px; margin-bottom: 16px; }
  .hero-headline { font-size: clamp(2rem, 8.5vw, 2.75rem); line-height: 1.12; margin-bottom: 20px; }
  .sweep-line-box { white-space: normal; display: block; margin-bottom: 4px; }
  .hero-description { font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
  .hero-image-frame {
    aspect-ratio: auto;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    overflow: visible !important;
  }
  .takeover-content-wrapper {
    padding: 0 24px;
  }
  .takeover-headline {
    font-size: clamp(2rem, 8vw, 2.7rem);
  }
  .takeover-description {
    font-size: 13.5px;
  }
  .takeover-dismiss-btn {
    top: 16px;
    right: 16px;
  }
}

/* Compact Mobile (<= 400px) */
@media (max-width: 400px) {
  .header-container { padding: 14px 16px 10px; }
  .brand-logo-img { height: 24px; }
  .hero-main { padding: 64px 0 12px; }
  .hero-container { padding: 0 16px; gap: 12px; }
  .hero-eyebrow { font-size: 10px; margin-bottom: 8px; }
  .hero-headline { font-size: 1.8rem; line-height: 1.14; margin-bottom: 12px; }
  .hero-description { font-size: 13.5px; line-height: 1.42; margin-bottom: 12px; }
  .hero-footer-anchor { height: 36px; margin-top: 4px; }
}

/* ==========================================================================
   SECTION 3: WHERE WORK FALLS APART (PROBLEM BREAKDOWN)
   ========================================================================== */
.problem-section {
  position: relative;
  width: 100%;
  padding: 104px 0 64px;
  background-color: #F6F3EE;
  border-top: 1px solid var(--td-border-light);
  overflow: hidden;
}

.problem-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Header */
.problem-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.problem-title-group {
  max-width: 680px;
}

.problem-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--td-text-subtle);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.problem-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--td-dot-4-orange);
}

.problem-headline {
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--td-ink);
}

.problem-headline .word-teal {
  color: var(--td-dot-6-teal); /* Canonical brand teal */
}

.problem-headline .word-purple {
  color: var(--td-dot-2-purple); /* Canonical brand purple */
}

.problem-headline .word-orange {
  color: var(--td-dot-4-orange); /* Canonical brand orange */
}

.problem-intro-text {
  max-width: 440px;
  font-size: 15px;
  line-height: 1.62;
  color: #555550;
  padding-top: 36px;
}

/* 4 Cards Grid */
.problem-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Base Problem Card */
.problem-card {
  position: relative;
  min-height: 470px;
  perspective: 1200px;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  outline: none !important;
  border: none !important;
  padding: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  user-select: none;
  -webkit-user-select: none;
}

.problem-card:focus,
.problem-card:focus-visible,
.problem-card:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Hover / Active: Levitate Upward */
.problem-card:hover,
.problem-card.is-hovered {
  transform: translateY(-8px);
}

/* 3D Flipper Container */
.card-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 470px;
  border-radius: 4px;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none;
  -webkit-user-select: none;
}

.problem-card.is-flipped .card-flipper {
  transform: rotateY(180deg);
}

/* Card Faces */
.card-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 470px;
  border-radius: 4px;
  padding: 34px 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 4px 20px rgba(16, 26, 38, 0.06);
  transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none;
  -webkit-user-select: none;
}

.card-face-front {
  transform: rotateY(0deg);
  z-index: 2;
}

.card-face-back {
  transform: rotateY(180deg);
  z-index: 1;
}

/* CARD 1: ORANGE */
.problem-card.card-orange .card-face {
  background-color: var(--td-dot-4-orange);
  color: #FFFFFF;
}
.problem-card.card-orange:hover .card-face,
.problem-card.card-orange.is-hovered .card-face,
.problem-card.card-orange:focus-visible .card-face {
  box-shadow: 0 24px 48px -12px rgba(239, 122, 45, 0.45);
}

/* CARD 2: BLUE */
.problem-card.card-blue .card-face {
  background-color: #0E64D4;
  color: #FFFFFF;
}
.problem-card.card-blue:hover .card-face,
.problem-card.card-blue.is-hovered .card-face,
.problem-card.card-blue:focus-visible .card-face {
  box-shadow: 0 24px 48px -12px rgba(14, 100, 212, 0.45);
}

/* CARD 3: WHITE */
.problem-card.card-white .card-face {
  background-color: #FFFDF8;
  border: 1px solid rgba(16, 26, 38, 0.08);
  color: var(--td-ink);
}
.problem-card.card-white:hover .card-face,
.problem-card.card-white.is-hovered .card-face,
.problem-card.card-white:focus-visible .card-face {
  box-shadow: 0 24px 48px -12px rgba(16, 26, 38, 0.14);
}

/* CARD 4: DARK TEAL */
.problem-card.card-darkteal .card-face {
  background-color: #0B5C57;
  color: #FFFFFF;
}
.problem-card.card-darkteal:hover .card-face,
.problem-card.card-darkteal.is-hovered .card-face,
.problem-card.card-darkteal:focus-visible .card-face {
  box-shadow: 0 24px 48px -12px rgba(11, 92, 87, 0.45);
}

/* Card Top Row */
.card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.card-step-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.88;
}

.card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
}

/* Card Body */
.card-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  margin-bottom: 24px;
}

.card-title {
  font-size: clamp(1.2rem, 1.4vw, 1.38rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: 0;
}

.card-face-back .card-body {
  margin-top: auto;
  margin-bottom: auto;
}

.card-back-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 12px;
}

.card-subtext {
  font-size: 14.5px;
  line-height: 1.62;
  opacity: 0.92;
}

.card-white .card-subtext {
  color: #555550;
  opacity: 1;
}

.card-arrow-return svg {
  transition: transform 0.25s ease;
}

.problem-card:hover .card-arrow-return svg,
.problem-card.is-hovered .card-arrow-return svg,
.problem-card:focus-visible .card-arrow-return svg {
  transform: translateX(-3px);
}

/* Card Bottom Row & Arrow Button */
.card-bottom-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}

.card-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  background: transparent;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-white .card-arrow-btn {
  border-color: rgba(17, 17, 17, 0.22);
  color: var(--td-ink);
}

.problem-card:hover .card-arrow-btn,
.problem-card.is-hovered .card-arrow-btn,
.problem-card:focus-visible .card-arrow-btn {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.06);
}

.card-white:hover .card-arrow-btn,
.card-white.is-hovered .card-arrow-btn,
.card-white:focus-visible .card-arrow-btn {
  background-color: rgba(17, 17, 17, 0.06);
  border-color: var(--td-ink);
}

.card-arrow-btn svg {
  transition: transform 0.25s ease;
}

.problem-card:hover .card-arrow-btn svg,
.problem-card.is-hovered .card-arrow-btn svg,
.problem-card:focus-visible .card-arrow-btn svg {
  transform: translateX(3px);
}

/* The signature thin circle arc in the corner that expands slightly on hover */
.card-thin-circle {
  position: absolute;
  bottom: -28px;
  right: -28px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  pointer-events: none;
  z-index: 1;
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.card-white .card-thin-circle {
  border-color: rgba(17, 17, 17, 0.11);
}

.problem-card:hover .card-thin-circle,
.problem-card.is-hovered .card-thin-circle,
.problem-card:focus-visible .card-thin-circle {
  transform: scale(1.18);
  border-color: rgba(255, 255, 255, 0.45);
}

.card-white:hover .card-thin-circle,
.card-white.is-hovered .card-thin-circle,
.card-white:focus-visible .card-thin-circle {
  transform: scale(1.18);
  border-color: rgba(17, 17, 17, 0.25);
}

/* ==========================================================================
   PROBLEM SECTION RIBBON STRIP
   Monospace technical ribbon inspired by print shop engineering & workflow.
   Scroll-accelerated bidirectional continuous stream.
   ========================================================================== */
.problem-ribbon-strip {
  width: 100%;
  position: relative;
  margin-top: 64px;
  border-top: 1px solid rgba(16, 26, 38, 0.12);
  border-bottom: 1px solid rgba(16, 26, 38, 0.12);
  background-color: #FAF9F5;
  padding: 18px 0;
  overflow: hidden;
  user-select: none;
  cursor: default;
}

.ribbon-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.ribbon-group {
  display: flex;
  align-items: center;
  gap: 36px;
  padding-right: 36px;
  flex-shrink: 0;
  white-space: nowrap;
}

.ribbon-item {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4A4A46;
  transition: color 0.2s ease;
}

.ribbon-item:hover {
  color: var(--td-ink, #111111);
}

.ribbon-separator {
  font-size: 8px;
  color: rgba(16, 26, 38, 0.28);
  display: inline-flex;
  align-items: center;
}

/* Responsive Media Queries for Problem Section */
@media (max-width: 1024px) {
  .problem-section {
    padding: 72px 0 80px;
  }
  .problem-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .problem-header {
    flex-direction: column;
    gap: 16px;
  }
  .problem-intro-text {
    padding-top: 0;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .problem-section {
    padding: 72px 0 80px;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .problem-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
  .problem-header {
    flex-direction: column;
    gap: 16px;
    text-align: left !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .problem-title-group {
    align-items: flex-start !important;
    text-align: left !important;
    width: 100%;
  }
  .problem-eyebrow {
    justify-content: flex-start !important;
    margin: 0 0 14px 0 !important;
  }
  .problem-headline {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .problem-intro-text {
    padding-top: 0;
    max-width: 100%;
    text-align: left !important;
    margin: 0 !important;
  }
  .problem-cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }
  .problem-card {
    margin: 0 auto;
    width: 100%;
  }
  .problem-ribbon-strip {
    overflow: hidden !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 640px) {
  .problem-card {
    min-height: 390px;
    padding: 28px 24px 24px;
  }
}

/* =========================================================================
   SECTION 4: THE WORKFLOW INTERFACE (FLOOR SECTION & DECK SPREAD)
   ========================================================================= */

.floor-section {
  position: relative;
  background-color: #FAF9F5;
  padding: 120px 0 140px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--td-border-light, #E6E4DD);
  border-bottom: 1px solid var(--td-border-light, #E6E4DD);
  overflow: hidden;
  z-index: 2;
}

.floor-bg-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.22; /* Same transparency as hero section */
  filter: saturate(0.82) brightness(1.02);
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.floor-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  display: block;
}

.floor-container {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* Section Header */
.floor-header {
  text-align: center;
  margin-bottom: 38px;
  width: 100%;
}

.floor-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(239, 122, 45, 0.08);
  border: 1px solid rgba(239, 122, 45, 0.2);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: #EF7A2D;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.floor-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #EF7A2D;
  display: inline-block;
}

.floor-headline {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--td-ink, #111111);
  margin: 0 0 16px;
}

.highlight-purple {
  color: #6355FF;
  position: relative;
  display: inline-block;
}

.floor-intro-text {
  max-width: 640px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
  color: #6E6E68;
  font-weight: 400;
}

/* Steps Process Bar */
.floor-steps-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 50px;
}

.floor-steps-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid rgba(16, 26, 38, 0.08);
  border-radius: 9999px;
  padding: 8px 24px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.floor-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-icon-orange {
  background: rgba(239, 122, 45, 0.12);
  color: #EF7A2D;
}

.step-icon-purple {
  background: rgba(99, 85, 255, 0.12);
  color: #6355FF;
}

.step-icon-teal {
  background: rgba(14, 100, 212, 0.12);
  color: #0E64D4;
}

.step-text-col {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.step-num-title {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #111111;
  display: flex;
  align-items: center;
  gap: 5px;
}

.step-num-orange { color: #EF7A2D; }
.step-num-purple { color: #6355FF; }
.step-num-teal { color: #0E64D4; }

.step-sub {
  font-size: 11px;
  color: #8C8C85;
  font-weight: 400;
}

.step-arrow-divider {
  color: #D2D0C8;
  display: flex;
  align-items: center;
  margin: 0 4px;
}

/* Floor Deck Stage & Spreading Animation */
.floor-deck-stage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  width: 100%;
}

.floor-card-wrapper {
  position: relative;
  will-change: transform;
  transform: translate3d(var(--deck-offset-x, 0), var(--deck-offset-y, 0), 0) rotate(var(--deck-init-rot, 0deg)) scale(0.96);
  opacity: 0.85;
  transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

.floor-deck-stage.deck-spread .floor-card-wrapper {
  transform: translate3d(0, 0, 0) rotate(var(--deck-rot, 0deg)) scale(1);
  opacity: 1;
}

.deck-card-1 { transition-delay: 0.04s; }
.deck-card-2 { transition-delay: 0.12s; }
.deck-card-3 { transition-delay: 0.20s; }
.deck-card-4 { transition-delay: 0.28s; }

/* Very Slow Floating Animation for Cards (Arrows remain static) */
@keyframes floorCardFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(0.4deg);
  }
}

.floor-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  will-change: transform;
}

.floor-deck-stage.deck-spread .deck-card-1 .floor-card-inner {
  animation: floorCardFloat 7.5s ease-in-out infinite;
}

.floor-deck-stage.deck-spread .deck-card-2 .floor-card-inner {
  animation: floorCardFloat 8.8s ease-in-out infinite 1.4s;
}

.floor-deck-stage.deck-spread .deck-card-3 .floor-card-inner {
  animation: floorCardFloat 7.9s ease-in-out infinite 2.8s;
}

.floor-deck-stage.deck-spread .deck-card-4 .floor-card-inner {
  animation: floorCardFloat 9.4s ease-in-out infinite 0.8s;
}

/* Floor Cards Common Styling */
.floor-card {
  width: 100%;
  height: 386px;
  background: #FFFFFF;
  border: 1px solid rgba(16, 26, 38, 0.08);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none;
  -webkit-user-select: none;
}

/* Bottom Pill Label */
.floor-pill-label {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: #FFFFFF;
  border: 1px solid rgba(16, 26, 38, 0.08);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #4A4A46;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.dot-orange { background-color: #EF7A2D; }
.dot-purple { background-color: #6355FF; }
.dot-blue   { background-color: #0E64D4; }
.dot-teal   { background-color: #059669; }

/* Subtle Sketch Art Flow Arrows */
.sketch-arrow {
  position: absolute;
  top: 14%;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85) translateY(4px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.75s;
}

.floor-deck-stage.deck-spread .sketch-arrow {
  opacity: 0.95;
  transform: scale(1) translateY(0);
}

.sketch-arrow-1 { left: calc(25% - 38px); }
.sketch-arrow-2 { left: calc(50% - 38px); }
.sketch-arrow-3 { left: calc(75% - 38px); }

/* Floor Section Mobile Carousel Dots (Hidden on Desktop) */
.floor-carousel-dots {
  display: none;
}

/* --- CARD 1: CUSTOMER REQUEST (EMAIL) --- */
.fcard-header-email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #F0EFEA;
  background: #FAF9F6;
}

.fcard-email-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fcard-email-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #111111;
}

.fcard-inbox-pill {
  font-size: 9.5px;
  padding: 2px 6px;
  background: #E8F0FE;
  color: #1A73E8;
  border-radius: 4px;
  font-weight: 600;
}

.fcard-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #8C8C85;
}

.fcard-sender-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 8px;
}

.fcard-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #EF7A2D;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fcard-sender-info {
  display: flex;
  flex-direction: column;
}

.fcard-sender-name {
  font-size: 12px;
  font-weight: 700;
  color: #111111;
}

.fcard-sender-sub {
  font-size: 10px;
  color: #8C8C85;
}

.fcard-email-body {
  padding: 6px 14px 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #333330;
  flex: 1;
}

.fcard-email-body p {
  margin: 0 0 6px;
}

.fcard-attachment-box {
  margin: 0 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #F6F5F0;
  border: 1px solid #ECEAE4;
}

.fcard-attachment-thumb {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border: 1px solid #E2E0D8;
  flex-shrink: 0;
}

.fcard-logo-preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.fcard-attachment-info {
  display: flex;
  flex-direction: column;
}

.fcard-attach-name {
  font-size: 11px;
  font-weight: 600;
  color: #111111;
}

.fcard-attach-size {
  font-size: 9.5px;
  color: #8C8C85;
}

/* --- CARD 2: EXACT PROOF APPROVAL --- */
.fcard-proof-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #F0EFEA;
  background: #FAF9F6;
}

.fcard-proof-code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 700;
  color: #6355FF;
}

.fcard-proof-tabs {
  display: flex;
  gap: 4px;
}

.proof-tab {
  font-size: 8.5px;
  padding: 2px 6px;
  border-radius: 4px;
}

.tab-superseded {
  background: #F0EFEA;
  color: #8C8C85;
  text-decoration: line-through;
}

.tab-locked {
  background: rgba(99, 85, 255, 0.12);
  color: #6355FF;
  font-weight: 700;
}

.fcard-proof-display {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  flex: 1;
  align-items: center;
  justify-content: center;
  background: #FBFBFA;
}

.fcard-mockup-main {
  flex: 1;
  height: 184px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fcard-tshirt-img {
  max-height: 174px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.1));
}

.fcard-thumbs-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fcard-mini-thumb {
  width: 32px;
  height: 32px;
  border: 1px solid #E2E0D8;
  border-radius: 6px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  box-sizing: border-box;
}

.fcard-mini-thumb.active {
  border-color: #6355FF;
  box-shadow: 0 0 0 1px #6355FF;
}

.fcard-mini-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.thumb-faint {
  opacity: 0.45;
}

.thumb-back-shirt {
  width: 18px;
  height: 20px;
  background: #222222;
  border-radius: 2px;
}

.fcard-proof-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #F0EFEA;
  background: #FAF9F6;
  padding: 8px 10px;
  gap: 6px;
}

.spec-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spec-label {
  font-size: 8px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: #8C8C85;
  letter-spacing: 0.05em;
}

.spec-val {
  font-size: 10px;
  font-weight: 700;
  color: #111111;
}

.highlight-orange {
  color: #EF7A2D;
}

.color-spec {
  display: flex;
  align-items: center;
  gap: 4px;
}

.color-swatch-pms {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #00843D;
}

/* --- CARD 3: APPROVED ARTWORK --- */
.fcard-artwork-top {
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid #F0EFEA;
  background: #FAF9F6;
}

.fcard-approved-badge {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  font-weight: 700;
  color: #0E64D4;
  letter-spacing: 0.08em;
  background: rgba(14, 100, 212, 0.08);
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid rgba(14, 100, 212, 0.2);
  display: inline-block;
}

.fcard-artboard {
  margin: 14px 16px;
  flex: 1;
  border: 1px dashed #D2D0C8;
  background: #FFFFFF;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: 6px;
}

.crop-mark {
  position: absolute;
  width: 10px;
  height: 10px;
}

.crop-tl {
  top: 5px;
  left: 5px;
  border-top: 1.5px solid #8C8C85;
  border-left: 1.5px solid #8C8C85;
}

.crop-tr {
  top: 5px;
  right: 5px;
  border-top: 1.5px solid #8C8C85;
  border-right: 1.5px solid #8C8C85;
}

.crop-bl {
  bottom: 5px;
  left: 5px;
  border-bottom: 1.5px solid #8C8C85;
  border-left: 1.5px solid #8C8C85;
}

.crop-br {
  bottom: 5px;
  right: 5px;
  border-bottom: 1.5px solid #8C8C85;
  border-right: 1.5px solid #8C8C85;
}

.fcard-vector-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fcard-art-img {
  max-width: 90%;
  max-height: 110px;
  object-fit: contain;
}

.fcard-artwork-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid #F0EFEA;
  background: #FAF9F6;
  font-size: 10px;
  font-weight: 600;
  color: #4A4A46;
}

.art-meta-code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 700;
}

.art-meta-pms {
  display: flex;
  align-items: center;
  gap: 4px;
}

.art-meta-dim {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 9px;
  text-align: right;
  line-height: 1.25;
  color: #6E6E68;
}

/* --- CARD 4: PRESS-READY WORK ORDER --- */
.fcard-wo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #F0EFEA;
  background: #FAF9F6;
}

.wo-title-col {
  display: flex;
  flex-direction: column;
}

.wo-eyebrow {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 8.5px;
  color: #8C8C85;
  letter-spacing: 0.08em;
}

.wo-code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  font-weight: 700;
  color: #111111;
}

.wo-status-pill {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 9px;
  font-weight: 700;
  color: #0E64D4;
  background: rgba(14, 100, 212, 0.09);
  border: 1px solid rgba(14, 100, 212, 0.25);
  padding: 3px 8px;
  border-radius: 9999px;
}

.fcard-wo-table {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  justify-content: center;
}

.wo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  border-bottom: 1px dashed #ECEAE4;
  padding-bottom: 3.5px;
}

.wo-row:last-child {
  border-bottom: none;
}

.wo-label {
  color: #8C8C85;
  font-size: 9.5px;
}

.wo-value {
  font-weight: 600;
  color: #111111;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Floor Section Responsive Media Queries */
@media (max-width: 1080px) {
  .floor-deck-stage {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
  .sketch-arrow {
    display: none;
  }
  .floor-steps-bar {
    flex-wrap: wrap;
    border-radius: 16px;
    padding: 12px 18px;
  }
}

@media (max-width: 768px) {
  .floor-section {
    padding: 70px 0 90px;
    overflow: hidden;
  }
  .floor-container {
    padding: 0;
  }
  .floor-header,
  .floor-steps-wrapper {
    padding: 0 24px;
    box-sizing: border-box;
  }
  .floor-steps-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .step-arrow-divider {
    display: none;
  }

  /* 3D Mobile Swipable Carousel for Section 4 Floor Cards */
  .floor-deck-stage {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    perspective: 1000px !important;
    perspective-origin: center center !important;
    gap: 16px !important;
    padding: 24px calc(50vw - 145px) 30px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .floor-deck-stage::-webkit-scrollbar {
    display: none !important;
  }

  .floor-card-wrapper {
    --deck-offset-x: 0px !important;
    --deck-offset-y: 0px !important;
    --deck-init-rot: 0deg !important;
    --deck-rot: 0deg !important;
    flex: 0 0 290px !important;
    width: 290px !important;
    max-width: 82vw !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    transform-style: preserve-3d !important;
    will-change: transform, opacity !important;
    transition: transform 0.12s ease-out, opacity 0.12s ease-out !important;
  }

  .floor-deck-stage.deck-spread .floor-card-inner {
    animation: none !important;
    transform: none !important;
  }

  .sketch-arrow {
    display: none !important;
  }

  /* 3D Mobile Carousel Pagination Dots */
  .floor-carousel-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 0 20px;
  }

  .floor-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: rgba(16, 26, 38, 0.18);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, box-shadow 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }

  .floor-carousel-dot.is-active {
    width: 26px;
    background: #0CACAD;
    box-shadow: 0 2px 8px rgba(12, 172, 173, 0.35);
  }
}

/* =========================================================================
   SECTION 5: FAQ ACCORDION SECTION
   Two-column editorial layout matching reference design:
   - Left: Sticky title with 'need to know.' editorial italic serif accent
   - Right: Accordion items with orange toggle indicators and smooth grid expansion
   ========================================================================= */

.faq-section {
  position: relative;
  background-color: #FAF9F5;
  padding: 130px 0 150px;
  border-top: 1px solid var(--td-border-light, #E6E4DD);
  border-bottom: 1px solid var(--td-border-light, #E6E4DD);
  overflow: hidden;
  z-index: 2;
}

.faq-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 36px;
  width: 100%;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 72px;
  align-items: start;
  box-sizing: border-box;
}

/* Left Column: Sticky Sidebar */
.faq-sidebar {
  position: sticky;
  top: 130px;
}

.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: #EF7A2D;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.faq-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #EF7A2D;
  display: inline-block;
}

.faq-headline {
  font-family: var(--font-family-base, 'Inter', sans-serif);
  font-size: clamp(40px, 4.8vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--td-ink, #111111);
  margin-bottom: 24px;
}

.faq-italic-serif {
  font-family: 'Instrument Serif', Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: #EF7A2D;
  letter-spacing: normal;
  display: inline-block;
}

.faq-intro-text {
  font-size: 15px;
  line-height: 1.6;
  color: #6E6E68;
  max-width: 320px;
  margin-bottom: 32px;
}

.faq-ask-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--td-ink, #111111);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.faq-ask-link:hover {
  color: #EF7A2D;
  transform: translateX(3px);
}

/* Right Column: Accordion List */
.faq-accordion-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.faq-item {
  border-bottom: 1px solid rgba(16, 26, 38, 0.12);
  transition: border-color 0.2s ease;
}

.faq-item:first-child {
  border-top: 1px solid rgba(16, 26, 38, 0.12);
}

.faq-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 24px 0;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  outline: none;
  user-select: none;
}

.faq-question-text {
  font-family: var(--font-family-base, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--td-ink, #111111);
  transition: color 0.2s ease;
}

.faq-trigger:hover .faq-question-text {
  color: #111111;
}

.faq-icon-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #71716D;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

/* Open State: Chevron rotates 180° & turns Brand Orange */
.faq-item.is-open .faq-icon-arrow {
  transform: rotate(180deg);
  color: #EF7A2D;
}

/* Accordion Smooth Height Transition via CSS Grid */
.faq-answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
  opacity: 0;
}

.faq-item.is-open .faq-answer-wrapper {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-answer-inner {
  overflow: hidden;
}

.faq-answer-text {
  font-size: 14.5px;
  line-height: 1.68;
  color: #555550;
  padding-bottom: 24px;
  max-width: 680px;
  font-weight: 400;
}

/* Responsive Media Queries */
@media (max-width: 960px) {
  .faq-container {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 0 24px;
  }
  .faq-sidebar {
    position: static;
  }
  .faq-intro-text {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .faq-section {
    padding: 80px 0 100px;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .faq-container {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .faq-sidebar {
    text-align: left !important;
    align-items: flex-start !important;
    width: 100% !important;
  }
  .faq-eyebrow {
    margin: 0 0 18px 0 !important;
    justify-content: flex-start !important;
  }
  .faq-headline {
    text-align: left !important;
  }
  .faq-intro-text {
    text-align: left !important;
    margin: 0 0 24px 0 !important;
  }
  .faq-ask-link {
    justify-content: flex-start !important;
    margin: 0 !important;
  }
}

@media (max-width: 640px) {
  .faq-section {
    padding: 80px 0 100px;
  }
  .faq-trigger {
    padding: 20px 0;
  }
  .faq-question-text {
    font-size: 15px;
  }
}

/* ==========================================================================
   SECTION 6: JOIN THE PRE-LAUNCH LIST
   ========================================================================== */
.prelaunch-section {
  position: relative;
  background-color: #F8F7F2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0 140px;
  border-top: 1px solid var(--td-border-light, #E6E4DD);
  box-sizing: border-box;
  overflow: hidden;
  z-index: 2;
  scroll-margin-top: 70px;
}

.prelaunch-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* Left Column: Headline & Subtext */
.prelaunch-content-col {
  display: flex;
  flex-direction: column;
}

.prelaunch-headline {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: #101A26;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
}

.prelaunch-title-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.prelaunch-title-line .highlight-teal {
  color: #0CACAD;
}

.prelaunch-title-line.highlight-orange {
  color: #EF7A2D;
}

/* Sweep Wipe Box on Logo */
.prelaunch-logo-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding: 2px 4px;
  vertical-align: middle;
  border-radius: 4px;
  cursor: pointer;
}

.prelaunch-logo-box .sweep-curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  transform: scaleX(0);
  will-change: transform;
  background-color: var(--td-dot-7-cyan, #04A2A4);
}

.prelaunch-logo-box .sweep-text {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  will-change: opacity;
}

.prelaunch-logo-box.animating .sweep-curtain {
  animation: sweepWipe 0.68s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.prelaunch-logo-box.animating .sweep-text {
  animation: textReveal 0.68s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.prelaunch-logo-box.animation-completed .sweep-text {
  opacity: 1 !important;
}

.prelaunch-logo-box.animation-completed .sweep-curtain {
  transform: scaleX(0) !important;
}

.prelaunch-inline-wordmark {
  height: clamp(34px, 4vw, 42px);
  width: auto;
  display: block;
  object-fit: contain;
  vertical-align: middle;
}

.prelaunch-subtext {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.55;
  color: #5A5A55;
  max-width: 440px;
  margin: 0;
}

/* Right Column: Pre-Launch Form Card */
.prelaunch-card-col {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.prelaunch-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 42px 38px 36px;
  box-shadow: 0 24px 64px -12px rgba(16, 26, 38, 0.08), 0 2px 10px rgba(16, 26, 38, 0.03);
  border: 1px solid rgba(16, 26, 38, 0.06);
  max-width: 480px;
  width: 100%;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.prelaunch-card:hover {
  box-shadow: 0 30px 72px -12px rgba(16, 26, 38, 0.11), 0 4px 14px rgba(16, 26, 38, 0.04);
}

.prelaunch-card-header {
  margin-bottom: 24px;
}

.prelaunch-card-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #101A26;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.prelaunch-card-subtitle {
  font-size: 13.5px;
  font-weight: 400;
  color: #767670;
  line-height: 1.45;
  margin: 0;
}

/* Form Styles */
.prelaunch-form {
  display: flex;
  flex-direction: column;
}

.prelaunch-form .form-group {
  margin-bottom: 18px;
}

.prelaunch-form .form-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #101A26;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.prelaunch-form .input-field-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #F8F7F2;
  border: 1px solid #E2E0D8;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.prelaunch-form .input-field-wrapper:focus-within {
  border-color: #EF7A2D;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(239, 122, 45, 0.15);
}

.prelaunch-form .input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px 0 14px;
  color: #4A4A46;
  flex-shrink: 0;
}

.prelaunch-form .form-input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  color: #101A26;
  padding: 13px 14px 13px 0;
  outline: none;
}

.prelaunch-form .form-input::placeholder {
  color: #92928B;
  opacity: 1;
}

/* Custom Animated Dropdown Menu */
.custom-select-group {
  position: relative;
}

.custom-dropdown-wrapper {
  position: relative;
  width: 100%;
}

.custom-dropdown-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  background: #F8F7F2;
  border: 1px solid #E2E0D8;
  border-radius: 10px;
  padding: 13px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  text-align: left;
  outline: none;
  box-sizing: border-box;
}

.custom-dropdown-wrapper:hover .custom-dropdown-trigger {
  border-color: #D2CFCE;
}

.custom-dropdown-wrapper.is-open .custom-dropdown-trigger {
  border-color: #EF7A2D;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(239, 122, 45, 0.15);
}

.custom-dropdown-trigger .input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4A4A46;
  margin-right: 12px;
  flex-shrink: 0;
}

.custom-trigger-text {
  flex: 1;
  font-size: 13.5px;
  color: #101A26;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-chevron-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4A4A46;
  margin-left: 10px;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.custom-dropdown-wrapper.is-open .custom-chevron-icon {
  transform: rotate(180deg);
  color: #EF7A2D;
}

/* Dropdown Menu Box with Dropping & Folding Up Animation */
.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E2E0D8;
  border-radius: 12px;
  box-shadow: 0 12px 36px -4px rgba(16, 26, 38, 0.14), 0 2px 8px rgba(16, 26, 38, 0.04);
  padding: 6px;
  margin: 0;
  list-style: none;
  z-index: 80;
  box-sizing: border-box;
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scaleY(0.92);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, visibility 0.24s;
  pointer-events: none;
}

.custom-dropdown-wrapper.is-open .custom-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}

.custom-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: #2D3748;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.custom-dropdown-item:hover {
  background: rgba(239, 122, 45, 0.08);
  color: #EF7A2D;
}

.custom-dropdown-item.is-selected {
  background: #EF7A2D;
  color: #FFFFFF;
  font-weight: 600;
}

.custom-dropdown-item .item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-dropdown-item .item-check {
  display: none;
  align-items: center;
  flex-shrink: 0;
}

.custom-dropdown-item.is-selected .item-check {
  display: flex;
}

/* Submit Button */
.prelaunch-submit-btn {
  width: 100%;
  height: 48px;
  background: #EF7A2D;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(239, 122, 45, 0.28);
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prelaunch-submit-btn:hover {
  background: #E06A1D;
  box-shadow: 0 6px 20px rgba(239, 122, 45, 0.38);
  transform: translateY(-1px);
}

.prelaunch-submit-btn:active {
  background: #CE5B12;
  transform: translateY(0);
}

/* Disclaimer Notice */
.prelaunch-disclaimer {
  text-align: center;
  font-size: 11px;
  color: #8C8C85;
  line-height: 1.45;
  margin: 0;
}

/* Success Confirmation State */
.prelaunch-success-state {
  display: none;
  text-align: center;
  padding: 16px 8px 8px;
}

.prelaunch-card.is-submitted .prelaunch-form {
  display: none;
}

.prelaunch-card.is-submitted .prelaunch-success-state {
  display: block;
  animation: prelaunchFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.success-icon-badge {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(5, 150, 166, 0.10);
  border: 1px solid rgba(5, 150, 166, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.success-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #101A26;
  margin: 0 0 10px;
}

.success-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #555550;
  margin: 0 0 24px;
}

.success-desc strong,
.success-desc span {
  color: #101A26;
  font-weight: 600;
}

.btn-reset-form {
  background: transparent;
  border: 1px solid #D5D3CC;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #4A4A46;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-reset-form:hover {
  border-color: #101A26;
  color: #101A26;
  background-color: #FAF9F5;
}

@keyframes prelaunchFadeIn {
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

/* Pre-Launch Responsive Queries */
@media (max-width: 992px) {
  .prelaunch-section {
    padding: 100px 0 120px;
    min-height: auto;
  }
  .prelaunch-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .prelaunch-card-col {
    justify-content: center;
  }
  .prelaunch-card {
    max-width: 520px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .prelaunch-section {
    padding: 80px 0 120px;
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .prelaunch-container {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
    padding: 0 20px 28px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .prelaunch-content-col {
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .prelaunch-headline {
    align-items: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .prelaunch-title-line {
    justify-content: flex-start !important;
  }
  .prelaunch-subtext {
    text-align: left !important;
    margin: 0 !important;
  }
  .prelaunch-card-col {
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .prelaunch-card {
    padding: 30px 22px 26px;
    border-radius: 20px;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }
}

@media (max-width: 640px) {
  .prelaunch-headline {
    font-size: clamp(2rem, 7.5vw, 2.5rem);
  }
  .prelaunch-inline-wordmark {
    height: 32px;
  }
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  background-color: #101a26;
  color: #FFFFFF;
  padding: 84px 0 76px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 2;
}

/* Ambient Orbit Background */
.footer-ambient-orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.orbit-wrap {
  position: absolute;
  width: 500px;
  height: 500px;
  pointer-events: none;
}

.orbit-wrap-left {
  left: -60px;
  bottom: -180px;
}

.orbit-wrap-right {
  right: -60px;
  bottom: -180px;
}

.orbit-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.orbit-spinner {
  will-change: transform;
}

.orbit-spinner-teal {
  transform-box: view-box;
  transform-origin: 150px 450px;
  animation: rotateOrbitCW 55s linear infinite;
}

.orbit-spinner-orange {
  transform-box: view-box;
  transform-origin: 350px 450px;
  animation: rotateOrbitCCW 70s linear infinite;
}

@keyframes rotateOrbitCW {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

.footer-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  position: relative;
  z-index: 3;
  gap: 32px;
}

/* Left Column: Scope & Copyright */
.footer-col-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-self: start;
  padding-bottom: 2px;
}

.footer-scope-text {
  font-size: 11.5px;
  line-height: 1.55;
  color: #7B8B9D;
  margin: 0;
  max-width: 330px;
}

.footer-copyright-text {
  font-size: 11.5px;
  color: #7B8B9D;
  margin: 0;
}

/* Center Column: Logo, Slogan, and 8-Dots Formation */
.footer-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-dots-cluster {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 36px;
}

.footer-dots-cluster svg {
  display: block;
  overflow: visible;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-dots-cluster:hover svg {
  transform: scale(1.06);
}

.footer-slogan {
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 600;
  line-height: 1.25;
  color: #FFFFFF;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
}

.footer-highlight-teal {
  color: #0CACAD;
}

.footer-brand-logo {
  display: inline-block;
  margin-bottom: 0;
  margin-top: 2px;
  transition: opacity 0.2s ease;
}

.footer-brand-logo:hover {
  opacity: 0.88;
}

.footer-wordmark-img {
  height: 35px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Right Column: Social Media Links & Contact */
.footer-col-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 2px;
}

.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #D2D8E2;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.footer-contact-btn:hover {
  background: rgba(4, 162, 164, 0.16);
  border-color: rgba(4, 162, 164, 0.45);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.footer-contact-icon {
  display: block;
  flex-shrink: 0;
  color: #0CACAD;
  transition: transform 0.2s ease;
}

.footer-contact-btn:hover .footer-contact-icon {
  transform: scale(1.1);
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D2D8E2;
  transition: color 0.2s ease, transform 0.2s ease;
  padding: 6px;
}

.footer-social-link:hover {
  color: #FFFFFF;
  transform: translateY(-2px);
}

.footer-social-link svg {
  display: block;
}

/* Footer Responsive Breakpoints */
@media (max-width: 960px) {
  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 36px;
    align-items: center;
  }
  .footer-col-left {
    order: 2;
    align-items: center;
    justify-self: center;
    text-align: center;
  }
  .footer-col-center {
    order: 1;
  }
  .footer-col-right {
    order: 3;
    justify-self: center;
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .site-footer {
    overflow: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  .footer-ambient-orbits {
    overflow: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  .orbit-wrap {
    max-width: 100vw !important;
  }
  .orbit-svg {
    overflow: hidden !important;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding: 64px 0 56px;
  }
  .footer-slogan {
    font-size: 1.35rem;
  }
  .footer-wordmark-img {
    height: 32px;
  }
}