/* ==========================================================================
   CIVICC — SCROLLTELLING CASE STUDY STYLESHEET
   Typography: GT Walsheim (Everywhere)
   Color Palette:
     - Primary Text:    #141B34
     - Secondary Text:  #757575
     - Page Background: #FAFAFA
     - Containers:      #FFFFFF
     - Borders:         #EBEBEB
     - Accent Colour:   #5496FD (Buttons, Highlights, Progress)
   ========================================================================== */

/* --- Font Face Declarations: GT Walsheim --- */
@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GT-Walsheim-Medium-Trial.woff2') format('woff2'),
       url('font/GT-Walsheim-Medium-Trial.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GT-Walsheim-Medium-Trial.woff2') format('woff2'),
       url('font/GT-Walsheim-Medium-Trial.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GT-Walsheim-Medium-Oblique-Trial.woff2') format('woff2'),
       url('font/GT-Walsheim-Medium-Oblique-Trial.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GT-Walsheim-Medium-Oblique-Trial.woff2') format('woff2'),
       url('font/GT-Walsheim-Medium-Oblique-Trial.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GT-Walsheim-Bold-Trial.woff2') format('woff2'),
       url('font/GT-Walsheim-Bold-Trial.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GT-Walsheim-Bold-Trial.woff2') format('woff2'),
       url('font/GT-Walsheim-Bold-Trial.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GT-Walsheim-Bold-Oblique-Trial.woff2') format('woff2'),
       url('font/GT-Walsheim-Bold-Oblique-Trial.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'GT Walsheim';
  src: url('fonts/GT-Walsheim-Bold-Oblique-Trial.woff2') format('woff2'),
       url('font/GT-Walsheim-Bold-Oblique-Trial.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* --- Design Tokens --- */
:root {
  /* Strict User Palette */
  --color-primary-text: #141B34;
  --color-secondary-text: #757575;
  --bg-page: #FAFAFA;
  --bg-container: #FFFFFF;
  --color-border: #EBEBEB;
  --color-accent: #5496FD;

  /* Accent Alpha Variants */
  --accent-glow: rgba(84, 150, 253, 0.16);
  --accent-subtle: rgba(84, 150, 253, 0.08);
  --accent-border: rgba(84, 150, 253, 0.35);

  /* Typography */
  --font-family: 'GT Walsheim', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4.5rem;
  --space-xxl: 7.5rem;
  --space-section: clamp(5rem, 12vh, 10rem);

  /* Animation & Transitions */
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-slow: 750ms;
  --duration-medium: 450ms;
  --duration-fast: 250ms;

  /* Devices & Mockups */
  --phone-radius: 44px;
  --phone-inner-radius: 34px;
}

/* --- Base & Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-family) !important;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-page);
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-page);
  color: var(--color-primary-text);
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
}

::selection {
  background-color: var(--color-accent);
  color: #FFFFFF;
}

/* --- Scroll Progress Bar --- */
.scroll-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1000;
  background: transparent;
  pointer-events: none;
}

.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width 0.1s linear;
}

/* --- Floating Editorial Navigation --- */
.floating-story-nav {
  position: fixed;
  top: 1.5rem;
  right: 2rem;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.6rem 1.15rem;
  border-radius: 100px;
  border: 1px solid var(--color-border);
  box-shadow: none;
  transition: all var(--duration-fast) ease;
}

.story-nav-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.story-nav-logo {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-accent);
}

.story-nav-divider {
  color: var(--color-border);
}

.story-nav-current {
  color: var(--color-secondary-text);
  transition: color var(--duration-fast) ease;
}

.story-nav-dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
}

.story-nav-dots .dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-border);
  transition: all var(--duration-medium) var(--ease-cinematic);
  position: relative;
  text-decoration: none;
}

.story-nav-dots .dot:hover,
.story-nav-dots .dot.active {
  background-color: var(--color-accent);
  transform: scale(1.4);
}

.story-nav-dots .tooltip {
  display: none;
  position: absolute;
  top: 1.6rem;
  right: 0;
  white-space: nowrap;
  font-size: 0.72rem;
  background: var(--color-primary-text);
  color: #FFFFFF;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  pointer-events: none;
  font-weight: 500;
}

.story-nav-dots .dot:hover .tooltip {
  display: block;
}

/* --- Layout Containers --- */
.editorial-container {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 2rem;
}

.editorial-split-container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(3rem, 6vw, 6rem);
}

.editorial-split-container.reversed {
  grid-template-columns: 1fr 1fr;
}

.story-section {
  padding: var(--space-section) 0;
  position: relative;
}

.story-section.section-opening {
  padding-top: clamp(6rem, 15vh, 12rem);
  padding-bottom: clamp(4rem, 10vh, 8rem);
  min-height: 90vh;
  display: flex;
  align-items: center;
}

/* --- Typography Scale --- */
.editorial-kicker {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-secondary-text);
  margin-bottom: 1.25rem;
}

.editorial-kicker.kicker-blue {
  color: var(--color-accent);
}

.story-headline-xl {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--color-primary-text);
  margin-bottom: 1rem;
}

.story-headline-lg {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--color-primary-text);
  margin-bottom: 1rem;
}

.story-headline-md {
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: var(--color-primary-text);
  margin-bottom: 1rem;
}

.story-subtext {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 400;
  color: var(--color-secondary-text);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 620px;
}

.story-subtext-left {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  font-weight: 400;
  color: var(--color-secondary-text);
  line-height: 1.6;
}

.story-body-muted {
  font-size: 1.05rem;
  color: var(--color-secondary-text);
  line-height: 1.65;
  margin: 0 auto;
}

.story-quote {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--color-primary-text);
}

.story-punchline {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary-text);
}

.text-center { text-align: center; }
.text-muted-charcoal { color: var(--color-primary-text); }
.mt-sm { margin-top: var(--space-xs); }
.mt-md { margin-top: var(--space-sm); }
.mt-lg { margin-top: var(--space-md); }
.mt-xl { margin-top: var(--space-lg); }
.mt-xxl { margin-top: var(--space-xl); }
.mb-xl { margin-bottom: var(--space-lg); }
.max-w-600 { max-width: 600px; margin-left: auto; margin-right: auto; }
.max-w-700 { max-width: 700px; margin-left: auto; margin-right: auto; }

/* --- Illustration Stage --- */
.illustration-stage {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.illustration-frame {
  width: 100%;
  max-width: 820px;
  background: var(--bg-container);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.storyboard-frame {
  max-width: 920px;
}

.story-illustration {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: var(--bg-container);
}

.illustration-caption {
  font-size: 0.85rem;
  color: var(--color-secondary-text);
  letter-spacing: 0.02em;
  margin-top: 1rem;
}

/* --- Section 04: The Usual Way Grid --- */
.editorial-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.step-card {
  background: var(--bg-container);
  padding: 2rem 1.5rem;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  text-align: left;
}

.step-num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.75rem;
}

.step-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary-text);
  margin-bottom: 0.5rem;
}

.step-desc {
  font-size: 0.92rem;
  color: var(--color-secondary-text);
  line-height: 1.5;
}

/* --- Section 05: Time Sequence Grid --- */
.time-sequence-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.time-card {
  flex: 1;
  background: var(--bg-container);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  transition: all var(--duration-medium) ease;
}

.time-separator {
  font-size: 1.5rem;
  color: var(--color-border);
}

.time-card.active-time-card {
  border-color: var(--color-border);
  box-shadow: none;
}

.time-day {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary-text);
  display: block;
  margin-bottom: 0.5rem;
}

.time-status {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-secondary-text);
  margin-bottom: 0.25rem;
}

.time-status.emphasis {
  color: var(--color-accent);
  font-weight: 700;
}

.time-detail {
  font-size: 0.8rem;
  color: var(--color-secondary-text);
}

/* --- Section 06: Frustration Dialogue --- */
.frustration-dialogue {
  margin: 3rem auto 1.5rem;
}

.dialogue-spacer {
  height: 1.5rem;
}

.highlight-frustration {
  color: var(--color-accent);
}

/* --- Section 07: Progressive Questions Stack --- */
.section-questions {
  background: var(--bg-container);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.questions-stack {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.question-row {
  display: flex;
  align-items: baseline;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}

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

.question-num {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  flex-shrink: 0;
}

.question-text {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--color-primary-text);
}

/* --- Section 08: Product Reveal --- */
.section-reveal {
  background: var(--bg-container);
  position: relative;
  overflow: hidden;
  padding: clamp(7rem, 16vh, 12rem) 0;
}

.civicc-ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--accent-glow) 0%, rgba(84, 150, 253, 0.03) 45%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
}

.reveal-pretitle {
  display: block;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-secondary-text);
  margin-bottom: 0.5rem;
}

.civicc-brand-title {
  font-size: clamp(4.5rem, 11vw, 9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--color-accent);
  display: inline-block;
  position: relative;
}

.brand-dot {
  color: var(--color-primary-text);
}

.civicc-triptych-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  flex-wrap: wrap;
}

.value-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.value-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

.value-text {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-primary-text);
}

.civicc-lead-descriptor {
  font-size: 1.15rem;
  color: var(--color-secondary-text);
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

/* ==========================================================================
   UI MOCKUP PLACEHOLDER SYSTEM
   Containers: #FFFFFF, Borders: #EBEBEB, Text: #141B34 / #757575
   ========================================================================== */

/* Universal Drop-in Image replacement support */
.ui-placeholder img,
.phone-frame > img,
.phone-frame img,
.ui-screen-img,
img.ui-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--phone-inner-radius);
  display: block;
  background: var(--bg-page);
}

.phone-screen-scrollable {
  width: 100%;
  height: 100%;
  border-radius: var(--phone-inner-radius);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--bg-page);
}

.phone-screen-scrollable::-webkit-scrollbar {
  display: none;
}

.phone-screen-scrollable img {
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: contain;
  object-position: top;
  border-radius: 0;
  display: block;
}

.mockup-showcase-single {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

/* Phone Frame Device Container */
.phone-frame {
  width: 320px;
  max-width: 100%;
  aspect-ratio: 9 / 19.5;
  margin: 0 auto;
  background: var(--bg-container);
  border-radius: var(--phone-radius);
  border: 1px solid var(--color-border);
  padding: 10px;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.phone-frame.hero-phone {
  width: 360px;
}

.phone-frame.compact-phone {
  width: 290px;
}

.split-mockup.dual-mockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.split-mockup.dual-mockup .phone-frame {
  width: 220px;
  padding: 8px;
}

/* Editorial Placeholder Interior */
.ui-placeholder {
  width: 100%;
  height: 100%;
  border-radius: var(--phone-inner-radius);
  background: var(--bg-page);
  border: 1.5px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem 1.1rem;
  position: relative;
  overflow: hidden;
}

/* Status Bar */
.placeholder-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-secondary-text);
  padding: 0 0.5rem;
}

.placeholder-sensor {
  width: 70px;
  height: 18px;
  background: var(--color-primary-text);
  border-radius: 20px;
  display: inline-block;
}

/* Placeholder Body */
.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0;
  flex: 1;
  justify-content: center;
}

.placeholder-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  background: var(--accent-subtle);
  border: none;
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  margin-bottom: 0.75rem;
}

.placeholder-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary-text);
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.placeholder-specs {
  font-size: 0.75rem;
  color: var(--color-secondary-text);
  margin-bottom: 1.25rem;
}

.placeholder-instructions {
  font-size: 0.72rem;
  color: var(--color-secondary-text);
  text-align: center;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-border);
  letter-spacing: 0.01em;
}

/* Wireframe Sketches */
.placeholder-wireframe-lines {
  width: 100%;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.wireframe-camera-crosshair {
  width: 60px;
  height: 60px;
  border: 1.5px dashed var(--color-border);
  border-radius: 50%;
  position: relative;
}

.wireframe-camera-crosshair::before,
.wireframe-camera-crosshair::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
}

.wireframe-camera-crosshair::before {
  top: 50%;
  left: 15px;
  right: 15px;
  height: 1px;
}

.wireframe-camera-crosshair::after {
  left: 50%;
  top: 15px;
  bottom: 15px;
  width: 1px;
}

.wireframe-bottom-sheet-hint {
  width: 100%;
  height: 40px;
  background: var(--bg-container);
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6px;
  gap: 6px;
}

.sheet-pill {
  width: 30px;
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
}

.sheet-line {
  width: 60%;
  height: 4px;
  background: var(--bg-page);
  border-radius: 2px;
}

.wireframe-camera-brackets {
  width: 70px;
  height: 70px;
  border: 2px solid var(--color-primary-text);
  border-style: solid none solid none;
  position: relative;
}

.wireframe-shutter-circle {
  width: 38px;
  height: 38px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  margin-top: 10px;
}

.wireframe-waveform {
  width: 120px;
  height: 24px;
  background: repeating-linear-gradient(90deg, var(--color-accent) 0px, var(--color-accent) 3px, transparent 3px, transparent 8px);
  opacity: 0.7;
}

/* --- Section Feature Badges & Annotations --- */
.step-indicator-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  background: var(--accent-subtle);
  border: none;
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}

.feature-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-container);
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
}

.tag-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: none;
}

.tag-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-text);
}

.editorial-annotation {
  font-size: 0.95rem;
  color: var(--color-secondary-text);
  line-height: 1.6;
  max-width: 480px;
}

/* Evidence Pills Stack */
.evidence-pills-stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 440px;
}

.evidence-pill {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--bg-container);
  border: 1px solid var(--color-border);
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
}

.pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.pill-text {
  display: flex;
  flex-direction: column;
}

.pill-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-primary-text);
}

.pill-subtitle {
  font-size: 0.82rem;
  color: var(--color-secondary-text);
}

/* AI Synthesis Moment */
.ai-moment-callout {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: var(--bg-container);
  border: 1px solid var(--color-border);
  box-shadow: none;
  padding: 1.5rem;
  border-radius: 14px;
  max-width: 480px;
}

.ai-mic-indicator {
  font-size: 1.4rem;
  background: var(--accent-subtle);
  padding: 0.6rem;
  border-radius: 50%;
  line-height: 1;
}

.ai-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.25rem;
}

.ai-quote {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary-text);
  margin-bottom: 0.25rem;
}

.ai-sub {
  font-size: 0.85rem;
  color: var(--color-secondary-text);
}

/* Classification Capsule */
.transition-capsule {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--bg-container);
  border: 1px solid var(--color-border);
  padding: 0.6rem 1.2rem;
  border-radius: 100px;
}

.capsule-from {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-secondary-text);
}

.capsule-arrow {
  color: var(--color-accent);
  font-weight: 700;
}

.capsule-to {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-accent);
}

/* --- Section 15: Ownership Department Card --- */
.owner-reveal-card {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--bg-container);
  border: 1px solid var(--color-border);
  box-shadow: none;
  padding: 1.25rem 2rem;
  border-radius: 100px;
  text-align: left;
  flex-wrap: wrap;
  justify-content: center;
}

.owner-icon {
  font-size: 1.6rem;
}

.owner-info {
  display: flex;
  flex-direction: column;
}

.owner-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-secondary-text);
}

.owner-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary-text);
  letter-spacing: -0.01em;
}

.owner-zone {
  font-size: 0.8rem;
  color: var(--color-secondary-text);
}

.owner-status-tag {
  font-size: 0.78rem;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--color-accent);
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
}

/* --- Section 16: Tracking Living Thread --- */
.thread-timeline-wrapper {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 0;
}

.timeline-nodes-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  position: relative;
  z-index: 2;
}

.timeline-node {
  background: var(--bg-container);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.25rem 0.75rem;
  text-align: center;
  transition: all var(--duration-medium) var(--ease-cinematic);
}

.timeline-node.active {
  border-color: var(--color-border);
  box-shadow: none;
}

.timeline-node.pulse-node {
  border-color: var(--color-border);
  background: var(--bg-container);
}

.node-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-page);
  color: var(--color-secondary-text);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}

.timeline-node.active .node-marker {
  background: var(--color-accent);
  color: #FFFFFF;
}

.node-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary-text);
  margin-bottom: 0.2rem;
}

.node-time {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-secondary-text);
  margin-bottom: 0.4rem;
}

.node-desc {
  font-size: 0.75rem;
  color: var(--color-secondary-text);
  line-height: 1.35;
}

/* --- Section 17: Verification Highlight --- */
.highlight-verification {
  color: var(--color-accent);
}

/* --- Section 18: Payoff Statements --- */
.payoff-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-primary-text);
  margin-bottom: 0.5rem;
}

.payoff-subtitle {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--color-secondary-text);
  font-weight: 400;
}

/* --- Section 19: The Visual Loop --- */
.section-loop {
  background: var(--bg-container);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.loop-nodes-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.loop-node {
  background: var(--bg-page);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  min-width: 140px;
  text-align: center;
  transition: all var(--duration-medium) var(--ease-cinematic);
}

.loop-node.active-loop-node {
  border-color: var(--color-border);
  background: var(--bg-container);
  box-shadow: none;
  transform: none;
}

.loop-node-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}

.loop-node-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary-text);
  display: block;
  margin-bottom: 0.25rem;
}

.loop-node-sub {
  font-size: 0.75rem;
  color: var(--color-secondary-text);
  display: block;
}

.loop-arrow {
  font-size: 1.4rem;
  color: var(--color-accent);
}

/* --- Section 20: Impact Pillars Grid --- */
.impact-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.pillar-card {
  background: var(--bg-container);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2.25rem 2rem;
}

.pillar-card.span-two-cols {
  grid-column: span 2;
}

.pillar-num {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.75rem;
}

.pillar-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary-text);
  margin-bottom: 0.5rem;
}

.pillar-text {
  font-size: 1rem;
  color: var(--color-secondary-text);
  line-height: 1.6;
}

/* --- Section 21: Success Metrics --- */
.disclaimer-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-secondary-text);
  background: var(--bg-container);
  border: 1px solid var(--color-border);
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  margin-top: 1rem;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
}

.metric-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: left;
  box-shadow: none;
}

.metric-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.5rem;
}

.metric-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary-text);
  margin-bottom: 0.45rem;
  line-height: 1.3;
}

.metric-desc {
  font-size: 0.92rem;
  color: var(--color-secondary-text);
  line-height: 1.6;
}

.north-star-container {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 3.5rem 1rem 0;
  text-align: center;
  box-shadow: none;
}

.north-star-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  background: transparent;
  padding: 0;
  margin-bottom: 1rem;
}

.north-star-statement {
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-primary-text);
  margin-bottom: 0.75rem;
}

.north-star-rationale {
  font-size: 1.05rem;
  color: var(--color-secondary-text);
  max-width: 620px;
  margin: 0 auto;
}

/* --- Section 22: Behind the Interface Decisions --- */
.decision-block {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 4rem;
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.decision-block:last-child {
  border-bottom: none;
}

.decision-block.reversed {
  grid-template-columns: 0.8fr 1.2fr;
}

.decision-block.reversed .decision-text {
  order: 2;
}

.decision-block.reversed .decision-visual {
  order: 1;
}

.decision-num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.5rem;
}

.decision-title {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-primary-text);
  margin-bottom: 1rem;
}

blockquote,
.decision-quote {
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 500;
  color: var(--color-primary-text);
  border: none;
  border-left: none;
  background: rgba(84, 150, 253, 0.08);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  line-height: 1.55;
  box-shadow: none;
}

.decision-body {
  font-size: 0.98rem;
  color: var(--color-secondary-text);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.decision-flow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-container);
  border: 1px solid var(--color-border);
  padding: 0.45rem 0.9rem;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary-text);
}

.decision-visual {
  display: flex;
  justify-content: center;
}

/* --- Section 23: Complete Showcase Gallery & Overlapping Stage --- */
.overlapping-phones-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 3rem 0 2rem;
  max-width: 960px;
  margin: 0 auto;
}

.overlapping-phone-wrapper {
  transition: all var(--duration-slow) var(--ease-cinematic);
  position: relative;
}

.overlapping-phone-wrapper.phone-left {
  transform: translateX(45px) rotate(-6deg) scale(0.92);
  z-index: 1;
}

.overlapping-phone-wrapper.phone-center {
  z-index: 3;
  transform: scale(1.04);
}

.overlapping-phone-wrapper.phone-right {
  transform: translateX(-45px) rotate(6deg) scale(0.92);
  z-index: 1;
}

.showcase-divider-label {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 4.5rem auto 2.5rem;
}

.showcase-divider-label::before,
.showcase-divider-label::after {
  content: "";
  flex: 1;
  max-width: 180px;
  height: 1px;
  background: var(--color-border);
}

.showcase-divider-label span {
  padding: 0 1.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-secondary-text);
}

.showcase-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-secondary-text);
  margin-bottom: 1rem;
}

/* --- Section 24: Closing Statement & CTA --- */
.section-closing {
  padding: clamp(7rem, 15vh, 12rem) 0 4rem;
  background: var(--bg-container);
  border-top: 1px solid var(--color-border);
}

.closing-brand {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-primary-text);
  margin-bottom: 0.5rem;
}

.closing-trinity {
  display: flex;
  flex-direction: column;
}

.closing-line {
  font-size: 3rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-primary-text);
}

.closing-line.highlight-blue {
  color: var(--color-accent);
}

.closing-subtext {
  font-size: 1.25rem;
  color: var(--color-secondary-text);
}

.closing-cta-wrapper {
  margin: 3.5rem auto 1rem;
}

.civicc-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-accent);
  color: #FFFFFF !important;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 1.1rem 2.4rem;
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 10px 30px var(--accent-glow);
  transition: all var(--duration-medium) var(--ease-cinematic);
}

.civicc-cta-btn-2 {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 2px solid var(--color-accent);
  color: var(--color-accent) !important;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 1.1rem 2.4rem;
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 10px 30px var(--accent-glow);
  transition: all var(--duration-medium) var(--ease-cinematic);
}

.civicc-cta-btn:hover {
  filter: brightness(0.92);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 40px rgba(84, 150, 253, 0.35);
}

.cta-arrow {
  transition: transform var(--duration-fast) ease;
  color: #FFFFFF !important;
}

.civicc-cta-btn:hover .cta-arrow {
  transform: translateX(4px);
}

.cta-hint {
  font-size: 0.82rem;
  color: var(--color-secondary-text);
}

.case-study-footer {
  margin-top: 6rem;
}

.footer-divider {
  width: 100%;
  max-width: 240px;
  height: 1px;
  background: var(--color-border);
  margin: 0 auto 1.5rem;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--color-secondary-text);
  flex-wrap: wrap;
}

/* ==========================================================================
   SCROLL ANIMATIONS & INTERACTIVE STORY REVEALS
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-slow) var(--ease-cinematic), transform var(--duration-slow) var(--ease-cinematic);
  will-change: opacity, transform;
}

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

.delay-1 { transition-delay: 150ms; }
.delay-2 { transition-delay: 300ms; }
.delay-3 { transition-delay: 450ms; }

/* ==========================================================================
   RESPONSIVE DESIGN (Desktop -> Clean Mobile)
   ========================================================================== */
@media (max-width: 1024px) {
  .showcase-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .timeline-nodes-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .decision-block,
  .decision-block.reversed {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .decision-block.reversed .decision-text {
    order: 1;
  }

  .decision-block.reversed .decision-visual {
    order: 2;
  }
}

@media (max-width: 768px) {
  .editorial-split-container,
  .editorial-split-container.reversed {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .editorial-split-container.reversed .split-mockup {
    order: 2;
  }

  .editorial-split-container.reversed .split-narrative {
    order: 1;
  }

  .editorial-steps-grid {
    grid-template-columns: 1fr;
  }

  .time-sequence-grid {
    flex-direction: column;
    gap: 1rem;
  }

  .time-separator {
    transform: rotate(90deg);
  }

  .loop-nodes-wrapper {
    flex-direction: column;
  }

  .loop-arrow {
    transform: rotate(90deg);
  }

  .impact-pillars-grid {
    grid-template-columns: 1fr;
  }

  .pillar-card.span-two-cols {
    grid-column: span 1;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .showcase-gallery-grid {
    grid-template-columns: 1fr;
  }

  .timeline-nodes-grid {
    grid-template-columns: 1fr;
  }

  .floating-story-nav {
    display: none;
  }

  .owner-reveal-card {
    border-radius: 20px;
    padding: 1.25rem 1rem;
  }

  .overlapping-phones-stage {
    flex-direction: column;
    gap: 2rem;
  }

  .overlapping-phone-wrapper.phone-left,
  .overlapping-phone-wrapper.phone-center,
  .overlapping-phone-wrapper.phone-right {
    transform: none !important;
  }

  .split-mockup.dual-mockup {
    flex-direction: column;
    gap: 1.5rem;
  }

  .split-mockup.dual-mockup .phone-frame {
    width: 280px;
    max-width: 90%;
  }
}

/* ==========================================================================
   MOBILE NOTICE (Hidden by default on Desktop & Tablet)
   ========================================================================== */
.mobile-notice {
  display: none;
}

/* ==========================================================================
   MOBILE-ONLY OVERRIDE (Phones)
   The whole content is visible on desktop and tablet.
   When opening on mobile (phone), hide the entire body content and show
   plain text in the middle of the screen.
   ========================================================================== */
@media (max-width: 767.98px), (max-height: 500px) and (max-width: 950px) and (orientation: landscape) {
  html, body {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--bg-page) !important;
  }

  .desktop-content,
  .scroll-progress-container,
  .floating-story-nav,
  #main-content {
    display: none !important;
  }

  .mobile-notice {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    padding: 2rem 1.5rem;
    background-color: var(--bg-page);
  }

  .mobile-notice-text {
    font-family: var(--font-family);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-primary-text);
    line-height: 1.6;
    letter-spacing: -0.01em;
    max-width: 320px;
    margin: 0;
  }
}