/* ==========================================================================
   YASSINE ZIDANE - PORTFOLIO DESIGN SYSTEM
   Modern, Clean, Enterprise-Grade UI/UX
   ========================================================================== */

:root {
  /* Colors */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-tertiary: #F1F5F9;
  --bg-card: #FFFFFF;
  --bg-dark-bar: #0B1120;
  --bg-dark-surface: #111927;
  --bg-dark-card: #182234;
  --bg-dark-section: #0A0F1D;
  --bg-footer: #060B14;
  --bg-ink: #0A1120;        /* primary buttons and active states */
  --bg-ink-hover: #1E293B;

  --text-primary: #0F172A;
  --text-secondary: #26323F;
  --text-muted: #44526A;
  --text-light: #F8FAFC;
  --text-light-secondary: #CBD5E1;
  --text-light-muted: #94A3B8;
  --text-light-subtle: #7C8BA1; /* smallest text on dark, still >= 4.5:1 on the footer */

  --accent-purple: #571899;
  --accent-purple-hover: #45127A;
  --accent-purple-light: rgba(87, 24, 153, 0.08);
  --accent-purple-on-dark: #C084FC;
  --accent-blue: #2563EB;
  --accent-teal: #0D9488;
  --accent-teal-text: #0B6B61; /* teal for small text, passes AA on white */
  --accent-rose: #E11D48;
  --success: #10B981;
  --success-on-dark: #34D399;
  --brand-linkedin: #0A66C2;

  --border-light: #E2E8F0;
  --border-hover: #CBD5E1;
  --border-subtle: #F1F5F9;
  --border-dark: #1E293B;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
  --shadow-glow: 0 0 40px -10px rgba(87, 24, 153, 0.25);

  /* Typography */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale */
  --fs-caption: 12px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-body: 17px;
  --fs-lead: 19px;
  --fs-h3: 22px;
  --fs-display: 32px;
  --lh-body: 1.75;
  --measure: 68ch;
  --measure-lead: 62ch;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Container */
  --max-width: 1240px;
  --nav-height: 74px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
}

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

html {
  font-family: var(--font-family);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-size: var(--fs-body);
  line-height: 1.6;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button,
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.section-spacing {
  padding-top: 96px;
  padding-bottom: 96px;
}

.section-title-wrapper {
  margin-bottom: 56px;
}

.section-badge {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  margin-bottom: 12px;
  border-radius: 100px;
  color: var(--accent-purple);
  background-color: var(--accent-purple-light);
}

/* Badge Contextual Overrides for Dark Backgrounds */
.specialization-section .section-badge,
.bg-dark .section-badge {
  color: var(--accent-purple-on-dark);
  background-color: rgba(192, 132, 252, 0.12);
  border: 1px solid rgba(192, 132, 252, 0.2);
}

.section-title {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text-primary);
}

.section-description {
  font-size: var(--fs-lead);
  color: var(--text-secondary);
  max-width: 640px;
  margin-top: 14px;
}

/* ==========================================================================
   NAVIGATION HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  transition: all var(--transition-normal);
}

.site-header.scrolled {
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.96);
}

.header-container {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  transition: transform var(--transition-fast);
}

.brand-logo:hover {
  transform: translateY(-1px);
}

.sparkle-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-purple);
  flex-shrink: 0;
  transition: transform var(--transition-normal);
}

.brand-logo:hover .sparkle-icon {
  transform: rotate(45deg) scale(1.15);
}

/* Nav Menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-link {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  padding: 6px 0;
  transition: color var(--transition-fast);
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-link.active {
  color: var(--text-primary);
  font-weight: 600;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent-purple);
  border-radius: 2px;
}

/* Header CTA Button */
.btn-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  background-color: var(--bg-ink);
  color: #FFFFFF;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: 8px;
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.btn-header-cta:hover {
  background-color: var(--bg-ink-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(10, 17, 32, 0.25);
  color: #FFFFFF;
}

.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.mobile-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--text-primary);
  transition: all var(--transition-normal);
  border-radius: 2px;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
  position: relative;
  background-color: #FFFFFF;
  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 0;
  box-sizing: border-box;
}

/* Subtle Technical Grid Overlay for Light Hero */
.hero-section::before,
.hero-decor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* Slate lines for light mode */
  background-image: 
    linear-gradient(to right, rgba(15, 23, 42, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  
  /* Radial mask centered behind your portrait on the right */
  mask-image: radial-gradient(circle at 75% 50%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 80%);
  -webkit-mask-image: radial-gradient(circle at 75% 50%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 80%);
  
  pointer-events: none;
  z-index: 0;
}

/* Ambient Backlight Glow */
/* Same grid on lighter page heroes (contact, blog); content sits above it */
.hero-decor {
  position: relative;
  overflow: hidden;
}

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

.hero-ambient-glow {
  position: absolute;
  right: 5%;
  top: 15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.08) 0%, rgba(236, 72, 153, 0.04) 45%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  filter: blur(40px);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: end;
  gap: 32px;
  position: relative;
  z-index: 2;
  padding-top: 40px; /* Guarantees top clearance inside grid container */
}

.hero-content {
  padding-top: 16px;
  padding-bottom: 56px;
}

.hero-greeting {
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.hero-headline {
  font-size: clamp(38px, 4.2vw, 56px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 28px;
}

.hero-headline span {
  display: block;
}

.hero-description {
  font-size: var(--fs-lead);
  line-height: 1.68;
  color: var(--text-secondary);
  max-width: 540px;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  background-color: var(--bg-ink);
  color: #FFFFFF;
  font-size: var(--fs-md);
  font-weight: 600;
  border-radius: 10px;
  transition: all var(--transition-normal);
  box-shadow: 0 4px 12px rgba(10, 17, 32, 0.15);
}

.btn-primary:hover {
  background-color: var(--accent-purple);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(87, 24, 153, 0.25);
  color: #FFFFFF;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
}

.btn-secondary:hover {
  background-color: var(--bg-tertiary);
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

/* Hero Portrait Image (Right side) */
.hero-image-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
  margin-bottom: -4px;
  /* Ensure seamless flush to dark bottom bar */
}

.hero-portrait {
  width: 100%;
  max-width: 480px;
  height: auto;
  object-fit: contain;
  object-position: bottom right;
  /* Subtle muted tones blending seamlessly with the clean aesthetic */
  filter: saturate(0.8) contrast(1.02) brightness(0.98);
  transition: filter var(--transition-normal), transform var(--transition-slow);
}

.hero-image-wrapper:hover .hero-portrait {
  /* Full vibrant natural color on hover */
  filter: saturate(1) contrast(1.02) brightness(1);
  transform: scale(1.015);
}

/* ==========================================================================
   TRUSTED CLIENTS / COMPANY LOGOS BOTTOM BAR (Matches Reference Mockup)
   ========================================================================== */
.client-logos-bar {
  background-color: var(--bg-dark-bar);
  padding: 30px 0;
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.client-logos-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 36px 90px;
}

.client-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.82;
  transition: all var(--transition-normal);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.client-logo-item:hover {
  opacity: 1;
  transform: translateY(-2px) scale(1.05);
}

.client-logo-item img,
.client-logo-item svg {
  height: auto;
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

/* Individual logo size adjustments to match exact optical balance */
.logo-fifa {
  max-height: 20px !important;
}

.logo-qpr {
  max-height: 22px !important;
}

.logo-tec {
  max-height: 32px !important;
}

.logo-aisoft {
  max-height: 30px !important;
}

.logo-biat {
  max-height: 26px !important;
}

.logo-themar {
  max-height: 30px !important;
}

.logo-value {
  max-height: 30px !important;
}

/* ==========================================================================
   FEATURED WORK SECTION
   ========================================================================== */
.featured-work-section {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.project-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-slow);
  position: relative;
  box-shadow: var(--shadow-sm);
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: rgba(87, 24, 153, 0.3);
  box-shadow: var(--shadow-xl), var(--shadow-glow);
}

.project-thumbnail-wrapper {
  position: relative;
  height: 280px;
  background: var(--bg-dark-bar);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-visual {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-slow);
}

.project-card:hover .project-visual {
  transform: scale(1.03);
}

.project-badge-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: var(--fs-caption);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.15);
  letter-spacing: 0.04em;
  z-index: 5;
}

.project-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.tag {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--accent-purple);
  background-color: var(--accent-purple-light);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.project-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.project-summary {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
  flex-grow: 1;
}

.project-metrics-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
  margin-bottom: 20px;
}

.metric-item {
  display: flex;
  flex-direction: column;
}

.metric-val {
  font-size: var(--fs-lead);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.metric-lbl {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-weight: 500;
}

.btn-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.btn-card-link:hover {
  color: var(--accent-purple);
  gap: 12px;
}



/* ==========================================================================
   SPECIALIZATION SECTION (#0A0F1D Dark Mode with Grid Pattern)
   ========================================================================== */
.specialization-section {
  position: relative;
  padding: 96px 0;
  background-color: var(--bg-dark-section);
  color: #FFFFFF;
  overflow: hidden;
}

/* Subtle Technical Grid Overlay */
.specialization-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 40px 40px;
  
  /* Radial mask so the grid fades smoothly toward section edges */
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 85%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 85%);
  
  pointer-events: none;
  z-index: 0;
}

/* Ensure inner container content stays above the grid */
.specialization-section .container {
  position: relative;
  z-index: 1;
}

.specialization-section .section-title {
  color: #FFFFFF;
}

.specialization-section .section-description {
  color: var(--text-light-muted);
}

/* Two-column layout with equal height stretching */
.specialization-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  align-items: stretch;
}

/* LEFT: Image Card */
.spec-image-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  min-height: 480px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.spec-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.spec-image-card:hover img {
  transform: scale(1.03);
}

.spec-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 15, 29, 0) 30%, rgba(10, 15, 29, 0.9) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 28px;
}

.spec-image-tag {
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-purple-on-dark);
  margin-bottom: 8px;
}

.spec-image-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
  margin: 0;
}

/* RIGHT: 2x2 Grid */
.spec-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  height: 100%;
}

.spec-card {
  background-color: var(--bg-dark-surface); /* Solid dark background blocks grid lines completely */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.spec-card:hover {
  transform: translateY(-4px);
  background-color: var(--bg-dark-card); /* Slightly lighter solid dark on hover */
  border-color: rgba(192, 132, 252, 0.3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.spec-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: rgba(181, 56, 248, 0.1);
  color: var(--accent-purple-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.spec-card-title {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 10px;
  line-height: 1.3;
}

.spec-card-desc {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-light-muted);
  margin: 0;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .specialization-grid {
    grid-template-columns: 1fr;
  }
  
  .spec-image-card {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  .spec-cards-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}
/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */
.testimonials-section {
  background-color: var(--bg-secondary); /* Subtle background contrast */
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

@media (max-width: 992px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

.testimonial-card {
  background: #FFFFFF; /* Pure white card to stand out against #F9FAFC */
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg, 16px);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}

.testimonial-content {
  margin-bottom: 24px;
}

.testimonial-quote {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.testimonial-quote-arabic {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
  font-family: system-ui, -apple-system, sans-serif;
  margin-top: 8px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 20px;
}

.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border-subtle);
}

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

.author-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.author-name:hover {
  color: var(--brand-linkedin);
}

.linkedin-icon {
  width: 14px;
  height: 14px;
  fill: var(--brand-linkedin);
}

.author-role {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}
/* ==========================================================================
   ARTICLES / BLOG SECTION (Equal Height Match)
   ========================================================================== */

   .articles-section {
  padding: 96px 0;
}

.articles-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 48px; /* Adds clear separation from the section header */
}

@media (max-width: 992px) {
  .articles-grid {
    grid-template-columns: 1fr;
  }
}

/* Base Card Styling */
.article-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  border-color: var(--border-hover);
}

/* Featured Card (Left Side) */
.article-card-featured {
  flex-direction: column;
  height: 100%;
}

.featured-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background-color: var(--bg-ink);
}

.featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.article-card-featured:hover .featured-media img {
  transform: scale(1.03);
}

.featured-content {
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
}

.article-date {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.featured-title {
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.featured-excerpt {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stacked Column (Right Side) - Matches Left Height Perfectly */
.articles-stack {
  display: grid;
  grid-template-rows: repeat(3, 1fr); /* Divides available height into 3 equal rows */
  gap: 20px;
  height: 100%;
}

.article-card-horizontal {
  flex-direction: row;
  align-items: stretch;
  height: 100%;
}

.horizontal-media {
  width: 180px; /* Consistent thumbnail width */
  flex-shrink: 0;
  align-self: stretch;
  overflow: hidden;
  background-color: var(--bg-ink);
}

.horizontal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.article-card-horizontal:hover .horizontal-media img {
  transform: scale(1.04);
}

.horizontal-content {
  padding: 24px 24px; /* Roomy padding to increase card presence */
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
}

.horizontal-title {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin-top: 6px;
}

/* Mobile Responsiveness */
@media (max-width: 576px) {
  .articles-stack {
    grid-template-rows: auto;
  }
  
  .article-card-horizontal {
    flex-direction: column;
  }
  
  .horizontal-media {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}
/* ==========================================================================
   CALL TO ACTION BANNER
   ========================================================================== */
.cta-banner {
  background: linear-gradient(135deg, var(--bg-ink) 0%, #1E1B4B 100%);
  border-radius: var(--radius-xl);
  padding: 64px 48px;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.cta-banner-content {
  max-width: 600px;
}

.cta-banner h2 {
  font-size: clamp(30px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.025em;
}

.cta-banner p {
  font-size: var(--fs-body);
  color: var(--text-light-secondary);
  line-height: 1.6;
}

.cta-banner .btn-primary {
  background: #FFFFFF;
  color: var(--text-primary);
  font-size: 16px;
  padding: 16px 32px;
}

.cta-banner .btn-primary:hover {
  background: var(--accent-purple);
  color: #FFFFFF;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--bg-footer);
  color: var(--text-light-muted);
  padding-top: 80px;
  padding-bottom: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand p {
  font-size: var(--fs-md);
  line-height: 1.6;
  margin-top: 16px;
  max-width: 320px;
  color: var(--text-light-subtle);
}

.footer-col-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-size: var(--fs-sm);
  color: var(--text-light-muted);
  transition: color var(--transition-fast);
}

.site-footer .brand-logo {
  color: var(--text-light);
}

.site-footer .sparkle-icon {
  color: var(--accent-purple-on-dark);
}

.footer-meta {
  font-size: var(--fs-sm);
  color: var(--text-light-muted);
  margin-bottom: 8px;
}

.footer-meta-sm {
  font-size: var(--fs-caption);
  color: var(--text-light-subtle);
  margin-top: 8px;
}

.live-time-display {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-purple-on-dark);
}

.footer-links a:hover {
  color: #FFFFFF;
}

.footer-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--success-on-dark);
  margin-top: 14px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: var(--success);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 36px;
  font-size: var(--fs-sm);
  color: var(--text-light-subtle);
  flex-wrap: wrap;
  gap: 16px;
}

.footer-socials {
  display: flex;
  gap: 20px;
}

.footer-socials a {
  color: var(--text-light-muted);
  transition: color var(--transition-fast);
}

.footer-socials a:hover {
  color: #FFFFFF;
}

/* ==========================================================================
   WORK PAGE STYLES
   ========================================================================== */
.page-hero {
  padding-top: 64px;
  padding-bottom: 56px;
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--border-light);
}

.filter-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.filter-btn {
  padding: 8px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  transition: all var(--transition-fast);
}

.filter-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.filter-btn.active {
  background: var(--bg-ink);
  color: #FFFFFF;
  border-color: var(--bg-ink);
}

/* ==========================================================================
   ABOUT PAGE STYLES
   ========================================================================== */
.about-hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.about-portrait-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-ink);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xl);
}

.about-portrait-card img {
  width: 100%;
  height: auto;
  filter: grayscale(100%) contrast(1.05);
  display: block;
}

.about-portrait-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.timeline {
  position: relative;
  padding-left: 36px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border-light);
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-bullet {
  position: absolute;
  left: -36px;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid var(--accent-purple);
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-bullet::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-purple);
}

.timeline-date {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-purple);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.timeline-title {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.timeline-org {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.timeline-desc {
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: 1.6;
}

.skills-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.skill-category {
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}

.skill-category h3 {
  font-size: var(--fs-lead);
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.skill-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skill-list li {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.skill-list li::before {
  content: '✦';
  color: var(--accent-purple);
  font-size: var(--fs-caption);
}

/* ==========================================================================
   CONTACT PAGE STYLES
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: start;
}

.contact-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 44px;
  box-shadow: var(--shadow-sm);
}

.form-group {
  margin-bottom: 22px;
}

.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 13px 16px;
  font-size: var(--fs-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--accent-purple);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px var(--accent-purple-light);
}

.form-textarea {
  min-height: 130px;
  resize: vertical;
}

.radio-chips-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip-label {
  cursor: pointer;
}

.chip-label input {
  display: none;
}

.chip-text {
  display: inline-block;
  padding: 8px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.chip-label input:checked+.chip-text {
  background: var(--bg-ink);
  color: #FFFFFF;
  border-color: var(--bg-ink);
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.info-card {
  padding: 28px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}

.info-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--text-primary);
}

.copy-email-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-purple);
  margin-top: 10px;
  padding: 6px 12px;
  background: var(--accent-purple-light);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.copy-email-btn.is-copied {
  background: rgba(13, 148, 136, 0.1);
  color: var(--accent-teal-text);
}

.copy-email-btn:hover {
  background: rgba(87, 24, 153, 0.15);
}

.faq-accordion {
  margin-top: 48px;
}

.faq-item {
  border-bottom: 1px solid var(--border-light);
  padding: 20px 0;
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--text-primary);
  text-align: left;
}

.faq-answer {
  margin-top: 12px;
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.6;
  display: none;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

/* ==========================================================================
   RESPONSIVE DESIGN (Tablets & Mobile)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    min-height: auto;
    gap: 0;
  }

  .hero-content {
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-image-wrapper {
    justify-content: center;
    margin-top: 16px;
  }

  .hero-portrait {
    max-width: 380px;
  }

  .projects-grid,
  .about-hero-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

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

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

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 72px;
  }

  .nav-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background: #FFFFFF;
    flex-direction: column;
    padding: 24px;
    gap: 20px;
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-lg);
    display: none;
  }

  .nav-menu.active {
    display: flex;
  }

  .mobile-nav-toggle {
    display: flex;
  }

  .client-logos-grid {
    justify-content: center;
    gap: 28px;
  }

  .client-logo-item {
    flex: 0 0 30%;
  }

  .capabilities-grid,
  .skills-matrix,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 40px 24px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .contact-card {
    padding: 24px;
  }
}


/* ==========================================================================
   PROJECT DETAIL PAGE (project.html)
   Accent colours come from each case study's own theme, set by
   project-detail.js. Projects with no theme fall back to the site purple.
   ========================================================================== */

/* ---------- Back to work link ---------- */
.back-to-work-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.back-to-work-link:hover {
  color: var(--cs-accent, var(--accent-purple));
}

/* ---------- Tags (scoped so other pages are untouched) ---------- */
#projectTags .tag {
  background: var(--cs-accent-soft, rgba(87, 24, 153, 0.1));
  color: var(--cs-accent, var(--accent-purple));
}

/* ---------- Hero image ---------- */
.case-study-hero-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 44px;
  border: 1px solid var(--border-light);
  box-shadow: 0 14px 34px -24px rgba(15, 23, 42, 0.22);
}

.case-study-hero-image img {
  width: 100%;
  display: block;
}

/* ---------- Stats band ---------- */
.case-study-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin: 4px 0 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-secondary);
}

.case-study-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 30px 20px;
  border-right: 1px solid var(--border-light);
}

.case-study-stat:last-child {
  border-right: none;
}

.case-study-stat .metric-val {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--cs-accent, var(--accent-purple));
}

.case-study-stat .metric-lbl {
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ---------- Body column ---------- */
/* The whole case study reads in one narrower column, article style.
   Only the hero image stays wider than the text. */
.case-study-main > .container {
  max-width: 1120px;
}

.case-study-body {
  display: flex;
  flex-direction: column;
  gap: 96px;
  max-width: 860px;
  margin: 0 auto;
}

/* The insight blocks are nested one level down, so they need the rhythm
   restated or they stack flush against each other. */
#projectInsights {
  display: flex;
  flex-direction: column;
  gap: 96px;
}

/* Section heading: the five top-level sections */
.case-study-block h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 22px;
}

.case-study-block p {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ---------- Intro (lead paragraph) ---------- */
.case-study-intro {
  font-size: 20px;
  line-height: 1.75;
  color: var(--text-secondary);
}

/* ---------- Project meta strip ---------- */
.project-meta-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-bottom: 28px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--border-light);
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meta-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--cs-accent-soft, rgba(87, 24, 153, 0.1));
  color: var(--cs-accent, var(--accent-purple));
}

.meta-icon svg {
  width: 17px;
  height: 17px;
}

.meta-label {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.meta-value {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
}

/* ---------- The Ask: soft statement panel ---------- */
.ask-card {
  border-radius: var(--radius-md);
  padding: 32px 34px;
  background: var(--cs-accent-soft, rgba(87, 24, 153, 0.08));
  border: 1px solid var(--border-light);
}

.ask-chip {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-accent, var(--accent-purple));
  margin-bottom: 14px;
}

.ask-chip svg {
  display: none;
}

.ask-card p {
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.65;
  color: var(--text-primary);
}

/* ---------- Challenge cards ---------- */
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.challenge-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 26px 24px;
}

.challenge-card-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border-light);
  color: var(--cs-accent, var(--text-primary));
  margin-bottom: 16px;
}

.challenge-card-icon svg {
  width: 20px;
  height: 20px;
}

.challenge-card h4 {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.challenge-card p {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- Process steps ---------- */
.process-steps {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.process-step {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.process-step-num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--cs-accent, var(--accent-purple));
  padding-top: 5px;
  min-width: 34px;
}

/* Step heading: one clear level below the section heading */
.process-step h4 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.process-step p {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0 0 10px;
}

.process-step-why {
  color: var(--text-muted) !important;
}

.process-step-why strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ---------- Takeaways / retrospective lists ---------- */
.takeaway-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.takeaway-list li {
  position: relative;
  padding-left: 28px;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--text-secondary);
}

.takeaway-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cs-accent, var(--accent-purple));
  font-weight: 700;
}

/* ---------- Hi-fi design gallery: full-bleed dark band ---------- */
/* Breaks out of the reading column on purpose, so the page changes gear
   when the finished screens arrive. */
.case-study-block.cs-band {
  margin-inline: calc(50% - 50vw);
  padding: 104px 0 108px;
  background: #0b1423;
}

/* The board runs wider than the rest of the page. Exports are @2x, so
   showing 1016pt of artwork at ~1256px stays sharp. */
.cs-band-inner {
  --gal-gap: min(30px, 2.4vw);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}

.cs-band h3 {
  color: #ffffff;
}

.cs-band p {
  color: rgba(255, 255, 255, 0.72);
}

/* Two stacks of different heights, then the full-width pieces.
   Column widths and gaps match the Figma board: 646 / 24 / 346. */
.cs-gallery {
  display: grid;
  grid-template-columns: 646fr 346fr;
  gap: var(--gal-gap, 24px);
  margin-top: 38px;
  align-items: start;
}

.cs-col-a,
.cs-col-b {
  display: flex;
  flex-direction: column;
  gap: var(--gal-gap, 24px);
  min-width: 0;
}

/* the last two pieces run the full 1016 */
.cs-gallery > .cs-shot {
  grid-column: 1 / -1;
}

/* Each export already carries its own stroke and corners, so the frame
   here stays out of the way. */
.cs-shot {
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
}

.cs-shot img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-shot figcaption {
  display: none;
}

.cs-gallery-note {
  margin: 24px 0 0;
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ---------- Bottom CTA ---------- */
.case-study-cta {
  max-width: 860px;
  margin: 80px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.case-study-cta span {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .project-meta-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 20px;
  }
}

@media (max-width: 720px) {
  .case-study-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-study-stat {
    padding: 24px 16px;
    border-bottom: 1px solid var(--border-light);
  }

  .case-study-stat:nth-child(even) {
    border-right: none;
  }

  .case-study-stat:nth-last-child(-n + 2) {
    border-bottom: none;
  }

  .case-study-stat .metric-val {
    font-size: 24px;
  }

  .project-meta-strip {
    grid-template-columns: 1fr;
  }

  .ask-card {
    padding: 24px 22px;
  }

  .ask-card p {
    font-size: 17px;
  }

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

  /* one stack on a phone, in the order the items are listed */
  .cs-gallery {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .cs-col-a,
  .cs-col-b {
    gap: 18px;
  }

  .case-study-block.cs-band {
    padding: 64px 0 68px;
  }

  .cs-band-inner {
    --gal-gap: 18px;
    padding: 0 20px;
  }

  .process-step {
    gap: 14px;
  }

  .case-study-body {
    gap: 52px;
  }

  .case-study-block h3 {
    font-size: 23px;
  }

  .process-step h4 {
    font-size: 19px;
  }

  .process-steps {
    gap: 44px;
  }
}
/* ---------- Immersive hero (projects that declare a heroBg) ---------- */
.case-study-main {
  padding-top: 40px;
}

.hero-bg,
.hero-scrim,
.hero-scrim-bottom {
  display: none;
}

#projectContent.immersive .case-study-main {
  padding-top: 0;
}

#projectContent.immersive .page-hero {
  position: relative;
  overflow: hidden;
  padding: 54px 0 160px;
  border-bottom: none;
  background: var(--cs-dark-1, #081422);
}

#projectContent.immersive .hero-bg {
  display: block;
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 32%;
  background-repeat: no-repeat;
}

#projectContent.immersive .hero-scrim {
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(6, 16, 30, 0.94) 0%,
    rgba(6, 16, 30, 0.8) 32%,
    rgba(6, 16, 30, 0.34) 66%,
    rgba(6, 16, 30, 0.08) 100%
  );
}

#projectContent.immersive .hero-scrim-bottom {
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 16, 30, 0.35) 0%,
    transparent 30%,
    transparent 62%,
    rgba(6, 16, 30, 0.55) 100%
  );
}

#projectContent.immersive .hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

#projectContent.immersive .back-to-work-link {
  color: rgba(255, 255, 255, 0.65);
}

#projectContent.immersive .back-to-work-link:hover {
  color: var(--cs-accent-bright, #00aeef);
}

#projectContent.immersive #projectTags .tag {
  color: var(--cs-accent-bright, #00aeef);
  background: rgba(0, 174, 239, 0.12);
  border: 1px solid rgba(0, 174, 239, 0.25);
}

#projectContent.immersive .page-hero .section-title {
  max-width: 880px;
  color: #ffffff;
  text-shadow: 0 2px 24px rgba(6, 16, 30, 0.5);
}

/* Hero image straddles the dark/light boundary */
#projectContent.immersive .case-study-hero-image {
  position: relative;
  z-index: 3;
  margin-top: -130px;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 44px -30px rgba(8, 20, 34, 0.45);
}

@media (max-width: 900px) {
  #projectContent.immersive .page-hero {
    padding: 40px 0 115px;
  }

  #projectContent.immersive .hero-bg {
    background-position: 72% center;
  }

  #projectContent.immersive .hero-scrim {
    background: linear-gradient(
      180deg,
      rgba(6, 16, 30, 0.86) 0%,
      rgba(6, 16, 30, 0.72) 55%,
      rgba(6, 16, 30, 0.8) 100%
    );
  }

  #projectContent.immersive .case-study-hero-image {
    margin-top: -95px;
  }
  
}
/* ==========================================================================
   PROCESS STEP VISUALS
   Optional visual under any process step. Steps without one are unaffected.
   ========================================================================== */

.step-viz {
  margin-top: 26px;
  padding: 24px 26px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}

.step-viz.is-dark {
  border-color: transparent;
  background: linear-gradient(165deg, var(--cs-dark-1, #1e1b4b), var(--cs-dark-2, #312e81));
}

.step-viz.is-wide {
  width: 100%;
}

/* only break out of the reading column when the window can hold it */
@media (min-width: 1160px) {
  .step-viz.is-wide {
    width: calc(100% + 260px);
    margin-inline: -130px;
  }
}

.step-viz.is-bare {
  padding: 0;
  border: none;
  background: none;
}

.step-viz-cap {
  margin-bottom: 18px;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.step-viz.is-dark .step-viz-cap {
  color: rgba(255, 255, 255, 0.55);
}

.step-viz.is-dark .viz-caption {
  color: rgba(255, 255, 255, 0.58);
}

.viz-caption {
  margin: 24px 0 0;
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: none;
}

/* ---------- plain image ---------- */
.viz-figure {
  margin: 0;
}

.viz-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.viz-figure figcaption {
  margin-top: 14px;
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---------- wireframe / shipped comparison ---------- */
.cmp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: start;
}

.cmp-col {
  min-width: 0;
}

.cmp-lbl {
  display: block;
  margin-bottom: 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cmp-shot {
  width: 100%;
  height: auto;
  display: block;
}

.wf-pair {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 88%;
  margin: 0 auto;
  padding-bottom: 4px;
}

/* ---------- skeleton phone (sizes in cqw so it scales with the phone) ---------- */
.wf-phone {
  flex: 1;
  min-width: 0;
  container-type: inline-size;
  aspect-ratio: 540 / 1100;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid var(--border-hover, #cbd5e1);
  border-radius: 22px;
  background: var(--bg-primary, #ffffff);
}

/* second phone sits lower, like the shipped pair */
.wf-phone + .wf-phone {
  margin-top: 7%;
}

.wf-phone i {
  display: block;
}

.wf-notch {
  position: absolute;
  top: 2.6cqw;
  left: 35cqw;
  width: 30cqw;
  height: 2.2cqw;
  border-radius: 99px;
  background: var(--border-hover, #cbd5e1);
  z-index: 2;
}

/* hero: nav, sponsor, figure, copy */
.wf-hero {
  position: relative;
  flex: 0 0 57%;
  display: flex;
  flex-direction: column;
  padding: 9cqw 6cqw 6cqw;
  background: var(--bg-tertiary, #f1f5f9);
  overflow: hidden;
}

.wf-nav {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.wf-menu {
  justify-self: start;
  width: 8.5cqw;
  height: 8.5cqw;
  border-radius: 50%;
  background: var(--border-hover, #cbd5e1);
}

.wf-logo {
  width: 22cqw;
  height: 4.6cqw;
  border-radius: 1.2cqw;
  background: #94a3b8;
}

.wf-icons {
  justify-self: end;
  display: flex;
  gap: 3.4cqw;
}

.wf-icons i {
  width: 5.6cqw;
  height: 5.6cqw;
  border-radius: 1.4cqw;
  border: 1.5px solid #94a3b8;
}

.wf-sponsor {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  width: 15cqw;
  height: 3.4cqw;
  margin-top: 4cqw;
  border-radius: 1.5cqw;
  background: var(--border-hover, #cbd5e1);
}

/* the player, a soft silhouette on the far side */
.wf-figure {
  position: absolute;
  top: 17cqw;
  inset-inline-end: -8cqw;
  width: 64cqw;
  height: 100%;
}

.wf-head {
  width: 34cqw;
  height: 42cqw;
  margin-inline-start: 6cqw;
  border-radius: 50%;
  background: var(--border-light, #e2e8f0);
}

.wf-body {
  width: 76cqw;
  height: 60cqw;
  margin-top: -3cqw;
  margin-inline-start: -15cqw;
  border-radius: 38cqw 38cqw 0 0 / 30cqw 30cqw 0 0;
  background: var(--border-light, #e2e8f0);
}

.wf-copy {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wf-title {
  height: 5.6cqw;
  border-radius: 1.6cqw;
  background: #94a3b8;
}

.wf-title + .wf-title {
  margin-top: 3cqw;
}

.wf-title.t1 { width: 50cqw; }
.wf-title.t2 { width: 58cqw; }

.wf-meta {
  display: flex;
  align-items: center;
  gap: 3.4cqw;
  margin-top: 5cqw;
}

.wf-meta i {
  height: 2.6cqw;
  border-radius: 99px;
  background: var(--cs-accent-bright, var(--accent-purple));
  opacity: 0.45;
}

.wf-meta i:nth-child(1) { width: 13cqw; }
.wf-meta i:nth-child(2) { width: 14cqw; }
.wf-meta i:nth-child(3) { width: 7cqw; }

.wf-meta i.wf-badge {
  width: 4.4cqw;
  height: 4.4cqw;
  border-radius: 50%;
  background: #fdba74;
  opacity: 1;
}

.wf-btns {
  display: flex;
  gap: 4cqw;
  margin-top: 7cqw;
}

.wf-phone .wf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25cqw;
  height: 9cqw;
  border-radius: 99px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)),
    var(--cs-accent-bright, var(--accent-purple));
}

.wf-btn::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.5cqw 0 1.5cqw 2.4cqw;
  border-color: transparent transparent transparent #ffffff;
}

.wf-btn.is-ghost {
  width: 29cqw;
  background: none;
  border: 1.5px solid #94a3b8;
  opacity: 1;
}

.wf-btn.is-ghost::before {
  display: none;
}

/* creators carousel, last one cut off at the edge */
.wf-avatars {
  display: flex;
  gap: 4.5cqw;
  padding: 6cqw 0 0;
  padding-inline-start: 6cqw;
  overflow: hidden;
}

.wf-av {
  flex-shrink: 0;
  width: 20cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2cqw;
}

.wf-av i:first-child {
  width: 20cqw;
  height: 20cqw;
  border-radius: 50%;
  border: 1.5px solid var(--border-hover, #cbd5e1);
  background: var(--bg-tertiary, #f1f5f9);
  margin-bottom: 0.6cqw;
}

.wf-av i + i {
  width: 16cqw;
  height: 2.4cqw;
  border-radius: 99px;
  background: var(--border-light, #e2e8f0);
}

.wf-av i + i + i {
  width: 10cqw;
}

/* latest news */
.wf-secHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 7cqw 6cqw 3.6cqw;
}

.wf-secHead i:first-child {
  width: 27cqw;
  height: 3.6cqw;
  border-radius: 99px;
  background: #94a3b8;
}

.wf-secHead i + i {
  width: 10cqw;
  height: 2.6cqw;
  border-radius: 99px;
  background: var(--border-hover, #cbd5e1);
}

.wf-tile {
  flex: 1;
  margin: 0 6cqw;
  border-radius: 2.4cqw 2.4cqw 0 0;
  background: var(--bg-tertiary, #f1f5f9);
}

/* ---------- benchmark cards ---------- */
.bench-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bench-card {
  position: relative;
  overflow: hidden;
  padding: 24px 20px 22px;
  border-radius: var(--radius-md);
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.bench-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin-bottom: 15px;
}

.bench-logo img {
  width: auto;
  max-width: 100%;
  display: block;
}

.bench-card h5 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.bench-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  max-width: none;
}

/* ---------- library tree ---------- */
.lib-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
  margin: 0 auto;
}

/* Figma file cards: dark cover plus the file bar, like the real library */
.lib-card {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border-light);
  box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.5);
}

.lib-card.is-top {
  width: calc((100% - 32px) / 3);
}

.lib-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

.lib-cover.is-drawn {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: 15px 14px 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(0, 174, 239, 0.16), transparent 58%),
    linear-gradient(160deg, var(--cs-dark-2, #10344f) 0%, var(--cs-dark-1, #081422) 72%);
}

.lib-cover-brand {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.lib-cover-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
}

.lib-card.is-top .lib-cover-title {
  font-size: 13px;
}

.lib-cover-sub {
  font-size: 9.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}

.lib-file {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-primary, #ffffff);
}

.lib-file-ico {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: var(--bg-tertiary, #f1f5f9);
  color: var(--text-muted);
}

.lib-file-ico svg {
  width: 13px;
  height: 13px;
}

.lib-file-txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lib-file-txt b {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.lib-file-txt i {
  font-size: 10px;
  font-style: normal;
  color: var(--text-muted);
}

/* connectors: stem from the top box, bar across, drop into each foundation */
.lib-stem {
  width: 1.5px;
  height: 22px;
  background: var(--border-hover, #cbd5e1);
}

.lib-connect {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  height: 18px;
}

.lib-connect span {
  position: relative;
}

.lib-connect span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--border-hover, #cbd5e1);
  transform: translateX(-50%);
}

.lib-connect span::after {
  content: "";
  position: absolute;
  top: 0;
  height: 1.5px;
  background: var(--border-hover, #cbd5e1);
}

.lib-connect span:first-child::after {
  left: 50%;
  right: -8px;
}

.lib-connect span:nth-child(2)::after {
  left: -8px;
  right: -8px;
}

.lib-connect span:last-child::after {
  left: -8px;
  right: 50%;
}

.lib-feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

/* ---------- figma component chips ---------- */
.lib-chips {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--border-light);
}

.lib-chips-lbl {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.lib-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.lib-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 9px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid rgba(151, 71, 255, 0.28);
  background: rgba(151, 71, 255, 0.07);
  font-size: 12px;
  font-weight: 600;
  color: #7c33e0;
}

.lib-chip-ico {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #9747ff;
}

/* ---------- type specimen ---------- */
.spec-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 12px 24px;
  align-items: center;
}

.spec-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.spec-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary, #ffffff);
}

.spec-lat {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-primary);
}

.spec-ara {
  font-family: "Geeza Pro", "Noto Naskh Arabic", "Arabic Typesetting", serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--text-primary);
}

.spec-ara.is-up {
  font-size: 33px;
}

.spec-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: none;
}

.spec-kash {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--border-light);
}

.spec-kash > div {
  flex: 1;
  min-width: 200px;
}

.spec-kash .spec-cell {
  margin-top: 7px;
}

.spec-kash .spec-ara {
  font-size: 27px;
}

/* the elongation itself, so the eye sees what kashida does */
.spec-ara .kash {
  color: var(--cs-accent, var(--accent-purple));
}

/* ---------- contextual glyph engine ---------- */
.glyph-block {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--border-light);
}

.glyph-stage {
  margin-top: 10px;
  padding: 22px 20px 20px;
  border: 1px solid var(--border-light);
  border-bottom: 3px solid var(--cs-accent-bright, var(--accent-purple));
  border-radius: var(--radius-md);
  background: var(--bg-primary, #ffffff);
  text-align: center;
}

.glyph-word {
  display: block;
  margin-bottom: 18px;
  font-family: "Geeza Pro", "Noto Naskh Arabic", "Arabic Typesetting", serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.glyph-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.glyph-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.glyph-form {
  font-family: "Geeza Pro", "Noto Naskh Arabic", "Arabic Typesetting", serif;
  font-size: 30px;
  line-height: 1.3;
  color: var(--cs-accent, var(--accent-purple));
}

.glyph-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---------- RTL platform standards band ---------- */
.rtl-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  width: 100%;
}

.rtl-col {
  padding: 0 18px;
  text-align: center;
  border-left: 1px solid var(--border-light);
}

.rtl-col:first-child {
  border-left: none;
  padding-left: 0;
}

.rtl-col:last-child {
  padding-right: 0;
}

.rtl-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 78px;
  margin-bottom: 18px;
}

.rtl-col h5 {
  margin: 0 0 9px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.rtl-col p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: none;
}

.rtl-chip {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cs-accent-soft, rgba(87, 24, 153, 0.1));
  color: var(--cs-accent, var(--accent-purple));
}

.rtl-chip svg {
  width: 19px;
  height: 19px;
}

.rtl-ico {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border-light);
  background: var(--bg-primary, #ffffff);
  color: var(--text-primary);
}

.rtl-ico svg {
  width: 17px;
  height: 17px;
}

.rtl-code {
  display: block;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text-primary);
}

.rtl-code .tg {
  color: var(--cs-accent, var(--accent-purple));
}

.rtl-sample {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.rtl-sample.is-block {
  font-size: 15px;
}

.rtl-sample .lat {
  color: var(--cs-accent, var(--accent-purple));
  font-weight: 600;
}

.rtl-num {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* ---------- competitive landscape table ---------- */
.lnd-wrap {
  margin-top: 28px;
}

.lnd-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary, #ffffff);
}

.lnd-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}

.lnd-table th,
.lnd-table td {
  padding: 14px 16px;
  vertical-align: top;
  border-bottom: 1px solid var(--border-light);
}

.lnd-table tbody tr:last-child th,
.lnd-table tbody tr:last-child td {
  border-bottom: none;
}

.lnd-table thead th {
  padding-top: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-hover, #cbd5e1);
  background: var(--bg-secondary);
}

.lnd-logo {
  display: flex;
  align-items: center;
  height: 44px;
  margin-bottom: 6px;
}

.lnd-logo img {
  height: 26px;
  max-width: 100%;
  width: auto;
  display: block;
  object-fit: contain;
  object-position: left center;
}

/* the logo carries the name, and its alt text carries it for screen readers */
.lnd-co[hidden] {
  display: none;
}

.lnd-co {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
}

.lnd-cn {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
}

.lnd-table tbody th {
  width: 150px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: var(--bg-secondary);
}

.lnd-table td {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* the column for the work being described */
.lnd-table th.is-mine,
.lnd-table td.is-mine {
  background: var(--cs-accent-soft, rgba(87, 24, 153, 0.08));
}

.lnd-table thead th.is-mine {
  border-bottom-color: var(--cs-accent-bright, var(--accent-purple));
}

.lnd-table thead th.is-mine .lnd-co {
  color: var(--cs-accent, var(--accent-purple));
}

.lnd-note {
  margin-top: 16px !important;
  font-size: var(--fs-caption) !important;
  line-height: 1.55;
  color: var(--text-muted) !important;
}

/* ---------- brand foundations ---------- */
.bru-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.bru-sw {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bru-chip {
  display: block;
  height: 62px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  margin-bottom: 6px;
}

.bru-hex {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.bru-role {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}

.bru-faces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--border-light);
}

.bru-face {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary, #ffffff);
}

.bru-spec {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
}

.bru-spec.is-ar {
  font-family: "Geeza Pro", "Noto Naskh Arabic", "Arabic Typesetting", serif;
  font-size: 32px;
}

.bru-fname {
  font-size: 13px;
  font-weight: 700;
  color: var(--cs-accent, var(--accent-purple));
}

.bru-fnote {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---------- journey walkthroughs ---------- */
.jrn-grid {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 26px;
  align-items: start;
}

.jrn-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jrn-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: left;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.jrn-tab:hover {
  color: #ffffff;
}

.jrn-tab.is-on {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
}

.jrn-dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 2px;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.22);
}

.jrn-tab.is-on .jrn-dot {
  background: var(--cs-accent-bright, var(--accent-purple));
}

.jrn-stage {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
}

.jrn-pane {
  display: none;
  margin: 0;
}

.jrn-pane.is-on {
  display: block;
}

.jrn-cap {
  display: block;
  margin-bottom: 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.jrn-pane img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm, 6px);
}

/* ---------- regulated flow, shown as the real diagram ---------- */
.fmp {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.fmp img {
  width: 100%;
  height: auto;
  display: block;
}

.fmp-cap {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}

.fmp-tags {
  margin-top: 22px;
}

.fmp-tags-k {
  display: block;
  margin-bottom: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.fmp-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fmp-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
}

.fmp-tag svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: var(--cs-accent-bright, var(--accent-purple));
}

.fmp-tag-t {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #ffffff;
}

.fmp-tag-n {
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.58);
}

.fmp-tag.is-locked {
  border-color: rgba(38, 176, 149, 0.4);
  background: rgba(38, 176, 149, 0.1);
}

/* ---------- information architecture: many in, five out ---------- */
.ia-map {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ia-lbl {
  display: block;
  margin-bottom: 12px;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ia-lbl.is-mid {
  text-align: center;
}

.ia-srcs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 760px;
}

.ia-src {
  padding: 8px 14px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-pill);
  background: var(--bg-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.ia-funnel {
  width: 100%;
  max-width: 820px;
  height: 86px;
  display: block;
}

/* the real tab bar, the pivot of the whole diagram */
.ia-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ia-bar-clip {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 26px -12px rgba(29, 46, 91, 0.35);
}

.ia-bar img {
  width: 375px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: -24px;
}

.ia-bar-note {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-muted);
}

/* bar fans back out into the five sections */
.ia-fan {
  position: relative;
  width: 100%;
  height: 58px;
}

.ia-stem {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 26px;
  background: var(--border-hover);
}

.ia-rail {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 26px;
  height: 1px;
  background: var(--border-hover);
}

.ia-drop {
  position: absolute;
  top: 26px;
  width: 1px;
  height: 32px;
  background: var(--border-hover);
}

.ia-drop::after {
  content: '';
  position: absolute;
  left: -3.5px;
  bottom: 0;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--border-hover);
  border-bottom: 1px solid var(--border-hover);
  transform: rotate(45deg);
}

.ia-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  width: 100%;
}

.ia-tab {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 15px 14px 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
}

.ia-tab.is-active {
  border-color: rgba(38, 176, 149, 0.5);
  box-shadow: 0 4px 14px -6px rgba(38, 176, 149, 0.4);
}

.ia-tab-ar {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5;
  color: var(--cs-accent, var(--accent-purple));
}

.ia-tab-name {
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.ia-tab ul {
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ia-tab li {
  position: relative;
  padding-left: 13px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-muted);
}

.ia-tab li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-hover);
}

/* ---------- fixed sequence flow ---------- */
.flw {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.flw::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 14px;
  bottom: 14px;
  width: 1.5px;
  background: var(--border-light);
}

.flw-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 9px 0;
}

.flw-n {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: var(--bg-primary, #ffffff);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.flw-step.is-locked .flw-n {
  border-color: var(--cs-accent, var(--accent-purple));
  color: var(--cs-accent, var(--accent-purple));
  background: var(--cs-accent-soft, rgba(87, 24, 153, 0.08));
}

.flw-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}

.flw-t {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
}

.flw-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

.flw-tag {
  flex-shrink: 0;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill, 9999px);
  background: var(--cs-accent-soft, rgba(87, 24, 153, 0.08));
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-accent, var(--accent-purple));
}

/* ---------- cultural profile ---------- */
.cult-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 34px;
  align-items: start;
  margin-top: 30px;
}

.cult-photos {
  display: flex;
  gap: 12px;
  padding-bottom: 22px;
}

.cult-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* the right column sits a little lower, so the left pair reads first */
.cult-col:last-child {
  transform: translateY(22px);
}

.cult-photos figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary, #f1f5f9);
}

.cult-photos img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.cult-col:first-child figure:first-child { aspect-ratio: 4 / 5; }
.cult-col:first-child figure:last-child { aspect-ratio: 1 / 1; }
.cult-col:last-child figure:first-child { aspect-ratio: 1 / 1; }
.cult-col:last-child figure:last-child { aspect-ratio: 4 / 5; }

.cult-points h4 {
  margin: 0 0 20px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.cult-points p {
  margin: 0 0 18px;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-secondary);
}

.cult-points p:last-child {
  margin-bottom: 0;
}

.cult-points strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* ---------- token pipeline ---------- */
.tok-flow {
  display: grid;
  grid-template-columns: 190px 1fr 210px;
  align-items: stretch;
}

.tok-src {
  align-self: center;
  padding: 18px 14px;
  text-align: center;
  border: 1px solid var(--cs-accent, var(--accent-purple));
  border-radius: var(--radius-md);
  background: var(--cs-accent-soft, rgba(87, 24, 153, 0.08));
}

.tok-t {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.3;
}

.tok-src .tok-t {
  margin-bottom: 3px;
  color: var(--cs-accent, var(--accent-purple));
  opacity: 0.75;
}

.tok-srcn {
  font-size: 13px;
  font-weight: 700;
  color: var(--cs-accent, var(--accent-purple));
}

.tok-srcnote {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.tok-mid {
  position: relative;
  text-align: center;
}

.tok-ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.tok-midlbl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

 /* three equal rows, so each row centre sits at 1/6, 1/2 and 5/6 of the
    column height, which is exactly where the ribbons land */
.tok-outs {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

.tok-node {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 5px 0;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary, #ffffff);
}

.tok-logo {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tok-logo img {
  width: 22px;
  height: 22px;
  display: block;
}

.tok-n {
  font-size: 13px;
  font-weight: 600;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cmp-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .rtl-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 0;
  }

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

  .ia-fan,
  .ia-funnel {
    display: none;
  }

  .ia-srcs,
  .ia-bar {
    margin-bottom: 26px;
  }

  .jrn-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .jrn-tabs {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .rtl-col:nth-child(odd) {
    border-left: none;
    padding-left: 0;
  }

  .cult-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cult-photos {
    max-width: 420px;
  }

  .tok-flow {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .tok-mid {
    display: none;
  }
}

@media (max-width: 760px) {
  .step-viz {
    padding: 20px 18px;
  }

  .step-viz.is-bare {
    padding: 0;
  }

  .lnd-table tbody th {
    width: 120px;
  }

  .bench-grid,
  .spec-grid,
  .bru-faces {
    grid-template-columns: 1fr;
  }

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

  .ia-tabs {
    grid-template-columns: 1fr;
  }

  .lib-feed,
  .lib-connect {
    grid-template-columns: 1fr;
  }

  .lib-card.is-top {
    width: 100%;
  }

  .rtl-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .rtl-col {
    border-left: none;
    padding: 0;
  }

  .lib-connect {
    display: none;
  }

  .lib-feed {
    gap: 10px;
    margin-top: 10px;
  }

  .spec-lat,
  .spec-ara {
    font-size: 25px;
  }

  .glyph-word {
    font-size: 34px;
  }

  .glyph-form {
    font-size: 25px;
  }

  .spec-ara.is-up {
    font-size: 27px;
  }
}
/* ==========================================================================
   INSIGHT BLOCKS
   Reusable sections between the Ask and the challenge: a heading, prose,
   an optional figure row, an optional visual and an optional point list.
   ========================================================================== */
.ins-p + .ins-p {
  margin-top: 20px;
}

.ins-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 30px 0 4px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--border-light);
  overflow: hidden;
}

.ins-fig {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  background: var(--bg-primary);
}

.ins-fig-v {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cs-accent, var(--accent-purple));
}

.ins-fig-l {
  font-size: var(--fs-caption);
  line-height: 1.55;
  font-weight: 500;
  color: var(--text-muted);
}

.ins-points-t {
  margin: 34px 0 0;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.ins-points {
  display: grid;
  gap: 2px;
  margin-top: 16px;
}

.ins-point {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 22px;
  padding: 16px 0;
  border-top: 1px solid var(--border-light);
}

.ins-point:last-child {
  border-bottom: 1px solid var(--border-light);
}

.ins-point-t {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-primary);
}

.ins-point-x {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-secondary);
}

.ins-note {
  margin-top: 22px;
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--text-muted);
}

/* ==========================================================================
   ECOSYSTEM RING: a closed four-party cycle
   One 760x630 coordinate space. The SVG carries the circle and the four
   arcs; the cards and labels are positioned as percentages of the same box,
   so the whole diagram scales with the reading column. Below 860px the ring
   is dropped and the same markup stacks in DOM order.
   ========================================================================== */
.eco-ring {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 6px auto 0;
  aspect-ratio: 760 / 630;
}

.eco-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.eco-node {
  position: absolute;
  width: 25.8%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.eco-node.is-0 { left: 50%; top: 12.7%; }
.eco-node.is-1 { left: 80.92%; top: 50%; }
.eco-node.is-2 { left: 50%; top: 87.3%; }
.eco-node.is-3 { left: 19.08%; top: 50%; }

/* the licensed platform, called out */
.eco-node.is-hl {
  border: 1.5px solid var(--cs-dark-2, #1D2E5B);
  background: var(--cs-dark-2, #1D2E5B);
  box-shadow: 0 8px 22px -8px rgba(29, 46, 91, 0.45);
}

.eco-ico {
  display: flex;
  align-items: center;
  height: 28px;
  color: var(--cs-accent, var(--accent-purple));
}

.eco-ico svg { width: 23px; height: 23px; }
.eco-ico img { height: 27px; width: auto; display: block; }

.eco-node-k {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-accent, var(--accent-purple));
}

.eco-node-n {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.eco-node-d {
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--text-muted);
}

.eco-node.is-hl .eco-node-k { color: #5EC9B1; }
.eco-node.is-hl .eco-node-n { color: #ffffff; }
.eco-node.is-hl .eco-node-d { color: rgba(255, 255, 255, 0.72); }

/* leg labels sit on the ring and break the line */
.eco-leg {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  color: var(--text-muted);
}

.eco-leg.is-0 { left: 71.87%; top: 23.62%; }
.eco-leg.is-1 { left: 71.87%; top: 76.38%; }
.eco-leg.is-2 { left: 28.13%; top: 76.38%; }
.eco-leg.is-3 { left: 27.10%; top: 23.33%; }

.eco-leg.is-return {
  background: #E6F6F2;
  color: #0E7A66;
}

.eco-leg-l,
.eco-leg-m { display: none; }

.eco-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 27%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.eco-core-k {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.eco-core-v {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
}

.eco-core-d {
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--text-muted);
}

/* ==========================================================================
   MODEL: the financing model, stated once
   ========================================================================== */
.mdl { text-align: center; }

.mdl-eyebrow {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mdl-ar {
  display: block;
  margin-top: 14px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cs-accent, var(--accent-purple));
}

.mdl-t {
  margin: 4px 0 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
}

.mdl-sub {
  margin: 12px auto 0;
  max-width: 58ch;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-secondary);
}

.mdl-rule {
  display: block;
  width: 56px;
  height: 2px;
  margin: 28px auto 0;
  border-radius: 2px;
  background: var(--cs-accent-bright, var(--accent-purple));
}

.mdl-pts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 30px;
}

.mdl-pt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  border-left: 1px solid var(--border-light);
}

.mdl-pt:first-child { border-left: none; }

.mdl-pt-i {
  display: block;
  color: var(--cs-accent, var(--accent-purple));
}

.mdl-pt-i svg { width: 26px; height: 26px; }

.mdl-pt-v {
  margin-top: 4px;
  font-size: var(--fs-lead);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.mdl-pt-l {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.viz-caption.is-mid {
  max-width: 74ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- ring collapses to a stack ---------- */
@media (max-width: 860px) {
  .eco-ring {
    position: static;
    aspect-ratio: auto;
    max-width: none;
    display: flex;
    flex-direction: column;
  }

  .eco-svg { display: none; }

  .eco-node,
  .eco-leg,
  .eco-core {
    position: static;
    width: auto;
    transform: none;
  }

  .eco-leg {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 2px;
    border-radius: 0;
    background: none;
    text-align: left;
    white-space: normal;
  }

  .eco-leg-l {
    position: relative;
    display: block;
    width: 26px;
    height: 1px;
    flex-shrink: 0;
    background: var(--border-hover);
  }

  .eco-leg-l::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--border-hover);
    border-right: 1px solid var(--border-hover);
    transform: rotate(45deg);
  }

  .eco-leg.is-return .eco-leg-l,
  .eco-leg.is-return .eco-leg-l::after {
    background: #0E7A66;
    border-color: #0E7A66;
  }

  .eco-leg.is-return .eco-leg-l::after { background: none; }

  .eco-leg.is-return {
    padding: 13px 14px;
    border-radius: var(--radius-sm);
  }

  .eco-leg-m { display: inline; }

  .eco-core {
    align-items: flex-start;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
    text-align: left;
  }
}

@media (max-width: 760px) {
  .mdl-pts {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .mdl-pt {
    padding: 0;
    border-left: none;
  }

  .mdl-t { font-size: 28px; }
}

/* ==========================================================================
   DISCLOSE: everything shown before money is committed
   ========================================================================== */
.dsc-lead {
  margin: 0 0 22px;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: none;
}

.dsc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.dsc-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid var(--border-light);
  border-left: 2px solid var(--cs-accent-bright, var(--accent-purple));
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.dsc-ar {
  align-self: flex-start;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.6;
  color: var(--cs-accent, var(--accent-purple));
}

.dsc-en {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text-primary);
}

.dsc-tx {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-muted);
}

/* ==========================================================================
   GRID: layout decisions drawn on a phone
   ========================================================================== */
.grd-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 40px;
  align-items: start;
}

.grd-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.grd-phone {
  position: relative;
  width: 210px;
  height: 400px;
  padding: 14px;
  border: 1px solid var(--border-hover);
  border-radius: 22px;
  background: var(--bg-primary);
  overflow: hidden;
}

.grd-cols {
  position: absolute;
  inset: 0 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.grd-cols span {
  background: var(--cs-accent-soft, rgba(87, 24, 153, 0.09));
  border-left: 1px solid rgba(31, 103, 167, 0.18);
  border-right: 1px solid rgba(31, 103, 167, 0.18);
}

.grd-chrome {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.grd-bar {
  display: block;
  border-radius: 4px;
  background: var(--border-hover);
}

.grd-bar-a {
  height: 30px;
}

.grd-bar-b {
  height: 12px;
  width: 62%;
}

.grd-card {
  display: block;
  height: 86px;
  border-radius: 8px;
  border: 1px solid var(--border-hover);
  background: var(--bg-tertiary);
}

.grd-cta {
  display: block;
  height: 44px;
  margin-top: auto;
  border-radius: 8px;
  background: var(--cs-accent-bright, var(--accent-purple));
}

.grd-reach {
  position: absolute;
  left: 50%;
  bottom: -104px;
  width: 260px;
  height: 260px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px dashed rgba(31, 103, 167, 0.45);
  pointer-events: none;
}

.grd-stage-cap {
  font-size: var(--fs-caption);
  line-height: 1.5;
  text-align: center;
  color: var(--text-muted);
}

.grd-rules {
  display: grid;
  gap: 2px;
}

.grd-rule {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--border-light);
}

.grd-rule:last-child {
  border-bottom: 1px solid var(--border-light);
}

.grd-rule-v {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--cs-accent, var(--accent-purple));
}

.grd-rule-b {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.grd-rule-t {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-primary);
}

.grd-rule-n {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-muted);
}

/* ==========================================================================
   JOURNEYS: a shared path spine with one leg lit at a time
   ========================================================================== */
.jrn-path {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.jrn-node {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  transition: opacity var(--transition-normal), border-color var(--transition-normal);
}

.jrn-node.is-off {
  opacity: 0.3;
}

.jrn-node.is-on {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

.jrn-node-n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cs-accent-bright, var(--accent-purple));
}

.jrn-node-t {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.4;
  color: #ffffff;
}

.jrn-node-d {
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.jrn-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   OUTCOME POSTSCRIPT
   ========================================================================== */
.cs-postscript {
  margin-top: 20px;
  padding: 16px 20px;
  border-left: 2px solid var(--cs-accent, var(--accent-purple));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-secondary);
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .grd-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

@media (max-width: 760px) {
  .ins-point,
  .grd-rule {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .dsc-grid,
  .jrn-path {
    grid-template-columns: 1fr;
  }

  .ins-fig-v {
    font-size: 22px;
  }
}

/* ==========================================================================
   CAPTION AND NOTE SPECIFICITY
   `.case-study-block p` and `.process-step p` both set the body size, and
   both outrank a single caption class. Captions were therefore rendering
   as body copy everywhere inside the reading column. These restate the
   intended size at a specificity that wins.
   ========================================================================== */
.case-study-block p.viz-caption,
.process-step p.viz-caption,
.step-viz p.viz-caption {
  margin: 24px 0 0;
  font-size: var(--fs-caption);
  line-height: 1.55;
}

.case-study-block p.ins-note {
  font-size: var(--fs-caption);
  line-height: 1.6;
}

.case-study-block p.cs-postscript {
  font-size: var(--fs-md);
  line-height: 1.7;
}

.case-study-block p.cs-gallery-note {
  font-size: var(--fs-caption);
  line-height: 1.55;
}

.step-viz p.dsc-lead,
.step-viz p.mdl-sub {
  font-size: var(--fs-md);
  line-height: 1.7;
}
/* ==========================================================================
   FRAME, the board convention: a named container for a working artefact
   ========================================================================== */
.frm-name {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.frm-name svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.frm-body {
  padding: 26px;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  background-color: var(--bg-secondary);
  background-image: radial-gradient(circle at 1px 1px, rgba(100, 116, 139, 0.13) 1px, transparent 0);
  background-size: 18px 18px;
}

/* ==========================================================================
   INVESTOR ELIGIBILITY: one photo, two classes, the market underneath
   ========================================================================== */
.elg {
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 30px;
  align-items: stretch;
}

.elg-fig {
  position: relative;
  align-self: stretch;
  min-height: 356px;
  padding: 34px 20px 0;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #EDF3F8, #E2EBF4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.elg-fig img {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  margin-bottom: -1px;
}

.elg-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.elg-k {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-accent, var(--accent-purple));
}

.elg-k::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

.elg-t {
  margin: 7px 0 0;
  font-size: var(--fs-lead);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.step-viz p.elg-c {
  margin: 7px 0 0;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-secondary);
}

.elg-c b { font-weight: 800; color: var(--text-primary); }

.elg-sep {
  color: var(--border-hover);
  padding: 0 6px;
}

.step-viz p.elg-cap {
  margin: 9px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.elg-cap b { font-weight: 800; color: var(--cs-accent, var(--accent-purple)); }

.elg-foot {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-light);
}

.elg-foot svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cs-accent, var(--accent-purple));
}

.elg-foot span {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-secondary);
}

.elg-nums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border-light);
}

.elg-num b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cs-accent, var(--accent-purple));
}

.elg-num span {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ==========================================================================
   RESEARCH BAND: the page changes gear from research to design
   ========================================================================== */
.ins-eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-accent-bright, var(--accent-purple));
}

.is-research .cs-band-inner {
  max-width: 1040px;
}

.case-study-block.cs-band.is-research {
  padding: 74px 0 80px;
  background: linear-gradient(165deg, var(--cs-dark-1, #121D3A), var(--cs-dark-2, #1D2E5B));
}

.is-research h3 { color: #ffffff; }

.is-research .case-study-block p,
.is-research > .cs-band-inner > p {
  color: rgba(255, 255, 255, 0.66);
}

.is-research .led-row {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.is-research .led-n { color: rgba(255, 255, 255, 0.4); }

.is-research .led-chip.c-biz { background: rgba(96, 165, 250, 0.16); color: #93C5FD; }
.is-research .led-chip.c-inv { background: rgba(38, 176, 149, 0.18); color: #5EC9B1; }
.is-research .led-chip.c-ben { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.62); }

.is-research .led-row p.led-find { color: rgba(255, 255, 255, 0.72); }

.is-research .led-mid {
  background: rgba(255, 255, 255, 0.04);
  border-left-color: rgba(255, 255, 255, 0.1);
  border-right-color: rgba(255, 255, 255, 0.1);
}

.is-research .led-b { background: rgba(255, 255, 255, 0.055); }
.is-research .led-out-k { color: rgba(255, 255, 255, 0.45); }
.is-research .led-out-t { color: #ffffff; }
.is-research .step-viz.is-bare { padding: 0; }

@media (max-width: 860px) {
  .elg { grid-template-columns: 1fr; gap: 22px; }
  .elg-fig { min-height: 0; max-width: 300px; margin: 0 auto; }
  .elg-nums { grid-template-columns: 1fr; gap: 18px; }
  .case-study-block.cs-band.is-research { padding: 52px 0 56px; }
}

/* ==========================================================================
   DECISION LEDGER
   ========================================================================== */
.led {
  display: grid;
  gap: 10px;
}

.led-row {
  display: grid;
  grid-template-columns: 1fr 34px 1fr;
  align-items: stretch;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  overflow: hidden;
}

.led-a { padding: 15px 17px; }

.led-n {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.led-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 9px;
}

.led-chip {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.led-chip.c-biz { background: #EEF4FA; color: #1F67A7; }
.led-chip.c-inv { background: #E6F6F2; color: #0E7A66; }
.led-chip.c-ben { background: #EEF1F5; color: var(--text-muted); }

.led-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
}

.led-mid svg {
  width: 15px;
  height: 15px;
  color: var(--cs-accent-bright, var(--accent-purple));
}

.led-b {
  display: flex;
  gap: 10px;
  padding: 15px 17px;
  background: #FBFDFE;
}

.led-b svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cs-accent-bright, var(--accent-purple));
}

.led-out-k {
  display: block;
  margin-bottom: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.led-out-t {
  display: block;
  font-size: var(--fs-md);
  line-height: 1.6;
  font-weight: 600;
  color: var(--text-primary);
}

.step-viz p.led-find,
.led p.led-find {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-muted);
}

/* ==========================================================================
   UX LAWS, as cards rather than a paragraph
   ========================================================================== */
.laws {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.law {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px;
  border: 1px solid var(--border-light);
  border-left: 2px solid var(--cs-accent, var(--accent-purple));
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.law-i { display: block; color: var(--cs-accent, var(--accent-purple)); }
.law-i svg { width: 21px; height: 21px; }

.law-n {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--text-primary);
}

.law-s {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

.law-d {
  margin-top: 4px;
  padding-top: 11px;
  border-top: 1px solid var(--border-light);
  font-size: var(--fs-sm);
  line-height: 1.6;
  font-weight: 600;
  color: var(--text-secondary);
}

.law-d-k {
  display: inline-block;
  margin-right: 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cs-accent, var(--accent-purple));
}

/* ---------- the Why line, a marked strip rather than a paragraph ---------- */
.process-step p.process-step-why {
  display: block;
  margin-top: 14px;
  padding: 11px 14px;
  border-left: 2px solid var(--cs-accent-bright, var(--accent-purple));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-secondary);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text-secondary);
}

.process-step p.process-step-why strong {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cs-accent, var(--accent-purple));
  margin-right: 8px;
}

@media (max-width: 860px) {
  .frm-body { padding: 18px; }
  .laws { grid-template-columns: 1fr; }
  .led-row { grid-template-columns: 1fr; }
  .led-mid {
    height: 30px;
    border: none;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
  }
  .led-mid svg { transform: rotate(90deg); }
}
/* ==========================================================================
   COURSE PAGE — "Product Design A to Z" (formation.html)
   All classes are prefixed fp- so they don't affect other pages.
   ========================================================================== */

.fp-page, .fp-sticky { --fp-ink: #0A1120; --fp-line-dark: #1E293B; --fp-purple: var(--accent-purple); --fp-purple-soft: var(--accent-purple-on-dark); }
.fp-page img { display: block; max-width: 100%; }

/* ---------- shared ---------- */
.fp-kicker { display: block; margin-bottom: 14px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-purple); }
.fp-h2 { margin: 0; font-size: clamp(30px, 4.4vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--text-primary); }
.fp-section { padding: 72px 0; }
.fp-section--tight { padding-top: 0; }
.fp-alt { background: var(--bg-secondary); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.fp-split-head { display: grid; gap: 14px; margin-bottom: 32px; }
.fp-intro { margin: 0; max-width: 42ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--text-muted); }

.fp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 22px; border-radius: 10px; font-size: var(--fs-md); font-weight: 600; line-height: 1; transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); cursor: pointer; border: 0; }
.fp-btn-primary { background: var(--fp-purple); color: #fff; box-shadow: 0 10px 30px -10px rgba(87, 24, 153, .7); }
.fp-btn-primary:hover { background: var(--accent-purple-hover); color: #fff; transform: translateY(-1px); }
.fp-btn-ghost { color: var(--text-light); border: 1px solid #334155; }
.fp-btn-ghost:hover { border-color: var(--fp-purple-soft); color: #fff; }
.fp-btn-dark { background: var(--fp-ink); color: #fff; }
.fp-btn-dark:hover { background: var(--fp-purple); color: #fff; }

/* ---------- 1. hero ---------- */
.fp-hero { position: relative; overflow: hidden; padding: 40px 0 0; background: var(--fp-ink); color: var(--text-light); }
.fp-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 48px 48px; -webkit-mask: radial-gradient(80% 90% at 70% 30%, #000 30%, transparent 80%); mask: radial-gradient(80% 90% at 70% 30%, #000 30%, transparent 80%); pointer-events: none; }
.fp-hero::after { content: ""; position: absolute; width: 700px; height: 700px; right: -120px; top: -200px; background: radial-gradient(circle, rgba(192,132,252,.22), transparent 65%); pointer-events: none; }
.fp-hero .container { position: relative; z-index: 1; }
.fp-hero-grid { display: grid; gap: 32px; }
.fp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--radius-pill); border: 1px solid rgba(192,132,252,.25); background: rgba(192,132,252,.1); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--fp-purple-soft); }
.fp-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success-on-dark); box-shadow: 0 0 0 4px rgba(52,211,153,.18); }
.fp-h1 { margin: 22px 0 18px; font-size: clamp(48px, 8vw, 84px); font-weight: 800; line-height: .98; letter-spacing: -.045em; color: #fff; }
.fp-h1 em { font-style: normal; background: linear-gradient(90deg, #C084FC, #E9D5FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fp-lead { margin: 0; max-width: 30ch; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--text-light-secondary); }
.fp-lead span { color: var(--text-light-muted); }
.fp-ctas { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.fp-assure { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-light-muted); }
.fp-assure li::before { content: "✓ "; font-weight: 700; color: var(--success-on-dark); }

.fp-hero-visual { position: relative; }
.fp-photo { position: relative; height: 260px; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 80px -30px #000; }
.fp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.fp-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,17,32,.55)); }
.fp-note { position: absolute; z-index: 2; padding: 14px 14px 16px; font-size: 13px; font-weight: 700; line-height: 1.25; box-shadow: 0 18px 30px -12px rgba(0,0,0,.5); }
.fp-note-pink { width: 140px; right: -4px; top: -14px; background: #FFB4A8; color: #3B1410; transform: rotate(-5deg); }
.fp-note-yellow { display: none; width: 150px; left: -6px; top: -22px; background: #FDE68A; color: #3D2C05; transform: rotate(4deg); }
.fp-ticket { position: relative; z-index: 3; margin-top: -40px; overflow: hidden; border-radius: 16px; background: #fff; color: var(--text-primary); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.fp-ticket-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 18px 14px; }
.fp-ticket-top small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-purple); }
.fp-ticket-top b { font-size: 20px; letter-spacing: -.02em; }
.fp-ticket-tag { padding: 4px 8px; border-radius: 6px; background: #ECFDF5; color: #047857; font-size: 11px; font-weight: 700; }
.fp-ticket-perf { position: relative; height: 0; margin: 0 14px; border-top: 2px dashed var(--border-light); }
.fp-ticket-perf::before, .fp-ticket-perf::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--fp-ink); }
.fp-ticket-perf::before { left: -25px; }
.fp-ticket-perf::after { right: -25px; }
.fp-ticket-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; padding: 14px 18px 4px; }
.fp-ticket-body dt { font-size: 11px; color: var(--text-muted); }
.fp-ticket-body dd { margin: 0; font-size: 13px; font-weight: 700; }
.fp-seats { display: flex; align-items: center; gap: 6px; padding: 8px 18px 16px; }
.fp-seats i { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--fp-purple); background: var(--accent-purple-light); }
.fp-seats span { margin-left: 6px; font-size: 12px; color: var(--text-muted); }

.fp-facts { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; border-top: 1px solid var(--fp-line-dark); }
.fp-facts div { padding: 20px 0; border-bottom: 1px solid var(--fp-line-dark); }
.fp-facts b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.fp-facts span { font-size: 13px; color: var(--text-light-muted); }

/* ---------- 2. who it's for ---------- */
.fp-who { display: grid; gap: 18px; }
.fp-who-card { padding: 14px 14px 24px; border: 1px solid var(--border-light); border-radius: 20px; background: #fff; }
.fp-ill { height: 180px; padding: 16px 14px; margin-bottom: 20px; border-radius: 14px; background: var(--ill-bg, var(--bg-secondary)); }
.fp-ill img { width: 100%; height: 100%; object-fit: contain; }
.fp-who-card h3 { margin: 0 8px 8px; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--text-primary); }
.fp-who-card p { margin: 0 8px; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }

/* ---------- 3. what's different ---------- */
.fp-split-head--cta .fp-btn { display: none; }
.fp-compare { display: grid; overflow: hidden; border-radius: 22px; box-shadow: 0 20px 50px -30px rgba(15,23,42,.25); }
.fp-compare-col { padding: 24px; }
.fp-compare-col h3 { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.fp-compare-col ul { margin: 0; padding: 0; list-style: none; }
.fp-compare-col li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--border-light); font-size: 15px; line-height: 1.45; }
.fp-compare-old { background: #fff; border: 1px solid var(--border-light); border-bottom: 0; border-radius: 22px 22px 0 0; }
.fp-compare-old li { color: var(--text-muted); }
.fp-compare-old s { text-decoration-color: var(--border-hover); }
.fp-compare-new { background: var(--fp-ink); color: var(--text-light-secondary); border-radius: 0 0 22px 22px; }
.fp-compare-new h3 { color: var(--fp-purple-soft); }
.fp-compare-new li { border-color: var(--fp-line-dark); }
.fp-compare-new b { color: #fff; }
.fp-x, .fp-v { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: 800; }
.fp-x { background: var(--bg-tertiary); color: #94A3B8; }
.fp-v { background: var(--fp-purple); color: #fff; }

/* ---------- 4. program ---------- */
.fp-timeline { position: relative; display: grid; margin: 32px 0 0; padding: 0; list-style: none; }
.fp-timeline::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 40px; width: 2px; background: linear-gradient(180deg, var(--border-light), var(--fp-purple)); }
.fp-timeline li { position: relative; display: grid; grid-template-columns: 56px 1fr; padding-bottom: 26px; }
.fp-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border-light); background: #fff; font-size: 14px; font-weight: 700; color: var(--text-muted); }
.fp-timeline small { display: block; margin: 2px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fp-purple); }
.fp-timeline b { display: block; margin-bottom: 6px; font-size: 20px; letter-spacing: -.02em; color: var(--text-primary); }
.fp-timeline p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.fp-tag { display: inline-block; margin-top: 12px; padding: 4px 8px; border-radius: 6px; background: var(--bg-tertiary); font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.fp-timeline .is-last .fp-dot { border-color: var(--fp-purple); background: var(--fp-purple); color: #fff; box-shadow: 0 0 0 6px var(--accent-purple-light); }
.fp-timeline .is-last .fp-tag { background: var(--fp-purple); color: #fff; }

/* ---------- 5. what you leave with ---------- */
.fp-bento { display: grid; gap: 18px; margin-top: 40px; }
.fp-tile { position: relative; overflow: hidden; padding: 28px; border: 1px solid var(--border-light); border-radius: 22px; background: #fff; }
.fp-tile h3 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.02em; color: var(--text-primary); }
.fp-tile p { margin: 0; max-width: 36ch; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.fp-tile-case { display: flex; flex-direction: column; background: var(--bg-secondary); }
.fp-mock-case { display: flex; flex-direction: column; flex: 1; margin-top: 28px; padding: 18px; border: 1px solid var(--border-light); border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -24px rgba(15,23,42,.35); }
.fp-mc-dots { display: flex; gap: 6px; margin-bottom: 14px; }
.fp-mc-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-light); }
.fp-mc-k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fp-purple); }
.fp-mc-t { margin: 6px 0 12px; font-size: 19px; letter-spacing: -.02em; color: var(--text-primary); }
.fp-bar { display: block; height: 8px; margin: 7px 0; border-radius: 4px; background: var(--bg-tertiary); }
.fp-mc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; margin: 14px 0; }
.fp-mc-row i { min-height: 70px; border-radius: 8px; border: 1px solid #E9D5FF; background: linear-gradient(135deg, #EDE9FE, #F5F3FF); }
.fp-mc-row i:nth-child(2) { border-color: var(--border-light); background: var(--bg-tertiary); }
.fp-mc-stats { display: flex; gap: 20px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.fp-mc-stats b { display: block; font-size: 16px; color: var(--text-primary); }
.fp-mc-stats span { font-size: 10.5px; color: var(--text-muted); }
.fp-layers { margin-top: 20px; padding: 12px; border-radius: 12px; background: #2C2C2C; font-size: 12px; color: #E5E5E5; }
.fp-layers div { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; }
.fp-layers div.is-on { background: #0C8CE9; }
.fp-layers div.is-ind { padding-left: 26px; }
.fp-layers i { width: 10px; height: 10px; border: 1.5px solid #AAA; border-radius: 2px; }
.fp-avatars { display: flex; margin-top: 18px; }
.fp-avatars i { width: 36px; height: 36px; margin-left: -8px; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(135deg, #C4B5FD, #818CF8); }
.fp-avatars i:first-child { margin-left: 0; }
.fp-avatars i:nth-child(2) { background: linear-gradient(135deg, #FCA5A5, #FDBA74); }
.fp-avatars i:nth-child(3) { background: linear-gradient(135deg, #6EE7B7, #5EEAD4); }
.fp-avatars i:nth-child(4) { background: linear-gradient(135deg, #FDE68A, #FCD34D); }
.fp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.fp-chips span { padding: 7px 11px; border: 1px solid var(--border-light); border-radius: var(--radius-pill); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.fp-chips span.is-on { border-color: var(--fp-purple); background: var(--fp-purple); color: #fff; }
.fp-tile-dark { display: grid; gap: 24px; align-items: center; border-color: var(--fp-ink); background: var(--fp-ink); }
.fp-tile-dark h3 { color: #fff; }
.fp-tile-dark p { color: var(--text-light-muted); }
.fp-cert { position: relative; margin-top: 20px; padding: 14px 16px; border-radius: 10px; background: #fff; }
.fp-cert small { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fp-purple); }
.fp-cert b { display: block; margin-top: 4px; font-size: 15px; color: var(--text-primary); }
.fp-cert span { font-size: 12px; color: var(--text-muted); }
.fp-cert .fp-seal { position: absolute; right: 14px; top: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--fp-purple); font-size: 11px; font-weight: 800; color: var(--fp-purple); }
.fp-chat { padding: 14px; border: 1px solid var(--fp-line-dark); border-radius: 14px; background: #0F1A24; }
.fp-chat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 700; color: #fff; }
.fp-chat-head i { width: 24px; height: 24px; border-radius: 50%; background: #25D366; }
.fp-bubble { max-width: 90%; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: #1F2C34; font-size: 12.5px; line-height: 1.4; color: #E2E8F0; }
.fp-bubble.is-me { margin-left: auto; background: #005C4B; }

/* ---------- 6. trainer ---------- */
.fp-trainer { display: grid; background: var(--fp-ink); color: var(--text-light); }
.fp-trainer-photo { position: relative; height: 380px; overflow: hidden; }
.fp-trainer-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.fp-trainer-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, var(--fp-ink)); }
.fp-trainer-copy { padding: 8px 24px 64px; }
.fp-trainer-copy .fp-kicker { color: var(--fp-purple-soft); }
.fp-trainer-copy .fp-h2 { margin-bottom: 22px; color: #fff; }
.fp-trainer-copy p { margin: 0 0 14px; max-width: 52ch; font-size: var(--fs-body); line-height: 1.7; color: var(--text-light-secondary); }
.fp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px 0 34px; border-top: 1px solid var(--fp-line-dark); }
.fp-kpis div { padding: 20px 16px 0 0; }
.fp-kpis b { display: block; font-size: clamp(28px, 3vw, 38px); font-weight: 700; letter-spacing: -.03em; color: #fff; }
.fp-kpis span { font-size: 13px; color: var(--text-light-muted); }
.fp-quote { margin: 0; max-width: 30ch; padding-left: 22px; border-left: 3px solid var(--fp-purple-soft); font-size: clamp(19px, 2vw, 24px); font-weight: 600; line-height: 1.35; letter-spacing: -.02em; color: #fff; }

/* ---------- 7. practical info + FAQ ---------- */
.fp-info-faq { display: grid; gap: 36px; margin-top: 40px; }
.fp-info { margin: 0; padding: 10px 24px; border: 1px solid var(--border-light); border-radius: 22px; background: #fff; align-self: start; }
.fp-info div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-light); font-size: 15px; }
.fp-info div:last-child { border-bottom: 0; }
.fp-info dt { padding-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.fp-info dd { margin: 0; color: var(--text-secondary); }
.fp-info dd b { font-weight: 600; color: var(--text-primary); }
.fp-faq { margin-top: 0; }
.fp-faq .faq-item:first-child { padding-top: 0; }
.fp-faq .faq-question { gap: 16px; font-size: 18px; letter-spacing: -.01em; }
.fp-faq .faq-answer { max-width: 56ch; font-size: 15.5px; color: var(--text-muted); }
.fp-faq-icon { position: relative; flex: none; width: 16px; height: 16px; }
.fp-faq-icon::before, .fp-faq-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: var(--text-muted); transition: transform var(--transition-fast); }
.fp-faq-icon::after { transform: rotate(90deg); }
.fp-faq .faq-item.active .fp-faq-icon::before { background: var(--fp-purple); }
.fp-faq .faq-item.active .fp-faq-icon::after { transform: rotate(0); opacity: 0; }

/* ---------- 8. pre-registration ---------- */
.fp-form-card { display: grid; overflow: hidden; border: 1px solid var(--border-light); border-radius: 22px; background: #fff; box-shadow: 0 40px 80px -40px rgba(15,23,42,.35); }
.fp-form-side { position: relative; overflow: hidden; padding: 32px 24px; background: var(--fp-ink); color: var(--text-light); }
.fp-form-side::after { content: ""; position: absolute; width: 420px; height: 420px; left: -140px; bottom: -200px; background: radial-gradient(circle, rgba(192,132,252,.25), transparent 65%); pointer-events: none; }
.fp-form-side .fp-kicker { color: var(--fp-purple-soft); }
.fp-form-side .fp-h2 { font-size: clamp(30px, 3.4vw, 38px); color: #fff; }
.fp-form-sub { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-light-secondary); }
.fp-next { position: relative; z-index: 1; margin: 36px 0 0; padding: 0; list-style: none; }
.fp-next li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 26px; }
.fp-next li::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--fp-line-dark); }
.fp-next li:last-child::before { display: none; }
.fp-next i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--fp-purple-soft); font-size: 13px; font-weight: 700; font-style: normal; color: var(--fp-purple-soft); }
.fp-next b { display: block; margin-bottom: 3px; font-size: 16px; color: #fff; }
.fp-next span { font-size: 14px; line-height: 1.5; color: var(--text-light-muted); }
.fp-seats-dark { position: relative; z-index: 1; margin-top: 10px; padding: 16px; border: 1px solid var(--fp-line-dark); border-radius: 14px; }
.fp-seats-dark i { width: 16px; height: 16px; border-color: var(--fp-purple-soft); background: rgba(192,132,252,.12); }
.fp-seats-dark span { color: var(--text-light-secondary); font-size: 14px; }

.fp-form-main { padding: 28px 22px; }
#fpForm, .fp-page .form-group, .fp-done { scroll-margin-top: calc(var(--nav-height) + 20px); }
.fp-progress { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.fp-progress b { color: var(--text-primary); }
.fp-progress-bar { height: 6px; margin: 12px 0 30px; overflow: hidden; border-radius: 4px; background: var(--bg-tertiary); }
.fp-progress-bar i { display: block; width: 33.33%; height: 100%; border-radius: 4px; background: var(--fp-purple); transition: width var(--transition-normal); }
.fp-step { display: none; min-width: 0; margin: 0; padding: 0; border: 0; }
.fp-step.is-on { display: block; }
.fp-step-title { padding: 0; margin-bottom: 4px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--text-primary); }
.fp-step-sub { margin: 0 0 26px; font-size: 15px; color: var(--text-muted); }
.fp-page .form-group { margin-bottom: 18px; }
.fp-page .form-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.fp-page .form-input, .fp-page .form-select { min-height: 52px; border: 1.5px solid var(--border-light); border-radius: 12px; background: #fff; }
.fp-page .form-textarea { min-height: 110px; }
.fp-req { color: var(--fp-purple); }
.fp-opt { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.fp-count { float: right; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.fp-row2 { display: grid; gap: 0 16px; }
.fp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fp-seg label { cursor: pointer; }
.fp-seg input { position: absolute; opacity: 0; pointer-events: none; }
.fp-seg span { display: grid; place-items: center; min-height: 48px; padding: 8px 10px; border: 1.5px solid var(--border-light); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 600; text-align: center; color: var(--text-secondary); transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); }
.fp-seg label:hover span { border-color: var(--border-hover); }
.fp-seg input:checked + span { border-color: var(--fp-purple); background: var(--accent-purple-light); color: var(--fp-purple); }
.fp-seg input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-purple-light); }
.fp-hint { display: none; margin: 9px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(13,148,136,.08); font-size: 14px; line-height: 1.5; color: var(--accent-teal-text); }
.fp-hint.is-on { display: block; }
.fp-consent { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--text-secondary); cursor: pointer; }
.fp-consent input { flex: none; width: 17px; height: 17px; margin-top: 3px; accent-color: var(--fp-purple); }
.fp-form-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.fp-form-nav .fp-btn { width: 100%; }
.fp-back { order: 3; padding: 6px 0; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.fp-back:hover { color: var(--text-primary); }
.fp-privacy { order: 2; width: 100%; font-size: 13px; color: var(--text-muted); }
.fp-form-nav #stepNext, .fp-form-nav #stepSubmit { order: 1; }
.fp-back[hidden], .fp-form-nav [hidden] { display: none; }
.fp-err { margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: var(--accent-rose); }
.fp-formerr { width: 100%; margin: 0; padding: 12px 14px; border: 1px solid rgba(225,29,72,.25); border-radius: var(--radius-sm); background: rgba(225,29,72,.05); font-size: 14px; line-height: 1.55; color: #9F1239; }
.fp-page .form-input.is-invalid, .fp-page .form-select.is-invalid { border-color: var(--accent-rose); background: rgba(225,29,72,.03); }
.fp-seg.is-invalid span { border-color: rgba(225,29,72,.45); }

.fp-done { display: none; padding: 40px 8px; text-align: center; }
.fp-done.is-on { display: block; }
.fp-done-ico { display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 50%; background: var(--fp-purple); color: #fff; }
.fp-done h3 { margin: 0 0 12px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary); }
.fp-done p { max-width: 44ch; margin: 0 auto; font-size: 16px; line-height: 1.7; color: var(--text-secondary); }
.fp-sig { display: block; margin-top: 16px; font-weight: 700; color: var(--text-primary); }

/* ---------- mobile sticky bar ---------- */
.fp-sticky { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 16px; background: var(--fp-ink); color: #fff; box-shadow: 0 20px 40px -10px rgba(0,0,0,.5); transform: translateY(140%); transition: transform var(--transition-normal); }
.fp-sticky.is-on { transform: translateY(0); }
.fp-sticky-txt small { display: block; font-size: 11px; color: var(--text-light-muted); }
.fp-sticky-txt b { font-size: 14px; }
.fp-sticky .fp-btn { padding: 12px 16px; font-size: 14px; white-space: nowrap; }

/* ---------- tablet & desktop ---------- */
@media (min-width: 600px) {
  .fp-ctas { flex-direction: row; align-items: center; }
  .fp-row2 { grid-template-columns: 1fr 1fr; }
  .fp-seg-3 { grid-template-columns: repeat(3, 1fr); }
  .fp-seg-4 { grid-template-columns: repeat(4, 1fr); }
  .fp-who { grid-template-columns: 1fr 1fr; }
  .fp-form-nav { flex-wrap: nowrap; }
  .fp-form-nav .fp-btn { width: auto; margin-left: auto; }
  .fp-back, .fp-privacy, .fp-form-nav #stepNext, .fp-form-nav #stepSubmit { order: 0; }
  .fp-privacy { width: auto; }
}

@media (min-width: 900px) {
  .fp-section { padding: 120px 0; }
  .fp-section--tight { padding-top: 0; }
  .fp-split-head { grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 44px; }
  .fp-split-head--cta { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; }
  .fp-split-head--cta .fp-h2 { max-width: 16ch; }
  .fp-split-head--cta .fp-btn { display: inline-flex; }

  .fp-hero { padding-top: 72px; }
  .fp-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
  .fp-hero-visual { height: 520px; }
  .fp-photo { position: absolute; inset: 0 0 0 30px; height: auto; border-radius: 24px; }
  .fp-note { font-size: 15px; padding: 16px 16px 18px; }
  .fp-note-pink { width: 170px; right: -14px; top: 34px; }
  .fp-note-yellow { display: block; }
  .fp-ticket { position: absolute; left: -36px; bottom: -30px; width: 330px; margin-top: 0; }
  .fp-facts { grid-template-columns: repeat(4, 1fr); margin-top: 96px; }
  .fp-facts div { padding: 26px 0 30px 28px; border-bottom: 0; border-right: 1px solid var(--fp-line-dark); }
  .fp-facts div:first-child { padding-left: 0; }
  .fp-facts div:last-child { border-right: 0; }
  .fp-facts b { font-size: 30px; }

  .fp-who { grid-template-columns: repeat(4, 1fr); }

  .fp-compare { grid-template-columns: 1fr 1.15fr; border-radius: 24px; }
  .fp-compare-col { padding: 36px 40px; }
  .fp-compare-old { border: 1px solid var(--border-light); border-right: 0; border-radius: 24px 0 0 24px; }
  .fp-compare-new { border-radius: 0; }
  .fp-compare-col li { min-height: 76px; padding: 17px 0; font-size: 17px; }

  .fp-timeline { grid-template-columns: repeat(6, 1fr); margin-top: 56px; }
  .fp-timeline::before { left: 0; right: 8%; top: 19px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--border-light), var(--fp-purple)); }
  .fp-timeline li { display: block; padding: 0 22px 0 0; }
  .fp-timeline small { margin: 22px 0 6px; }

  .fp-bento { grid-template-columns: 1.3fr 1fr 1fr; margin-top: 52px; }
  .fp-tile-case { grid-row: 1 / 3; }
  .fp-tile-dark { grid-column: 2 / 4; grid-template-columns: 1fr 1fr; }

  .fp-trainer { grid-template-columns: .9fr 1.1fr; min-height: 640px; }
  .fp-trainer-photo { height: auto; }
  .fp-trainer-photo::after { background: linear-gradient(90deg, transparent 60%, var(--fp-ink)); }
  .fp-trainer-copy { display: flex; flex-direction: column; padding: 96px 72px 96px 64px; }
  .fp-trainer-copy .fp-h2 { font-size: 52px; }
  .fp-quote { margin-top: auto; }

  .fp-info-faq { grid-template-columns: 1fr 1.2fr; gap: 56px; margin-top: 48px; }

  .fp-form-card { grid-template-columns: .8fr 1.2fr; border-radius: 28px; }
  .fp-form-side { padding: 48px 44px; }
  .fp-form-main { padding: 44px 48px; }
  .fp-sticky { display: none; }
}

/* ==========================================================================
   BLOG (blog.html + blog/*.html) and WORK "in progress" list
   Classes prefixed bl- (listing), ar- (article), wip- (work page).
   ========================================================================== */

/* ---------- shared ---------- */
.bl-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-purple); }
.bl-new { padding: 3px 8px; border-radius: 6px; background: var(--accent-purple); color: #fff; letter-spacing: .04em; }
.bl-meta { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-muted); }
.bl-meta b { font-weight: 600; color: var(--text-primary); }
.bl-meta img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.bl-all-link { display: inline-block; margin-top: 18px; font-weight: 600; font-size: var(--fs-md); color: var(--accent-purple); }
.bl-all-link:hover { color: var(--accent-purple-hover); }

/* ---------- blog listing ---------- */
.bl-hero { padding: 56px 0 36px; background: #fff; border-bottom: 1px solid var(--border-light); }
.bl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.bl-chip { padding: 8px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-pill); background: #fff; font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.bl-chip span { margin-left: 4px; opacity: .6; }
.bl-chip:hover { border-color: var(--border-hover); }
.bl-chip.is-on { border-color: var(--bg-ink); background: var(--bg-ink); color: #fff; }

.bl-list { padding: 40px 0 88px; background: var(--bg-secondary); }
.bl-feature { display: grid; overflow: hidden; border: 1px solid var(--border-light); border-radius: 22px; background: #fff; box-shadow: 0 20px 50px -34px rgba(15,23,42,.35); transition: box-shadow var(--transition-normal), transform var(--transition-normal); }
.bl-feature:hover { transform: translateY(-2px); box-shadow: 0 28px 60px -34px rgba(15,23,42,.45); }
.bl-feature-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-tertiary); }
.bl-feature-img img, .bl-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-feature-body { display: flex; flex-direction: column; padding: 24px; }
.bl-feature h2 { margin: 14px 0 12px; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; letter-spacing: -.03em; color: var(--text-primary); }
.bl-feature p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--text-muted); }
.bl-feature .bl-meta { margin-top: auto; padding-top: 22px; }
.bl-read { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.bl-feature:hover .bl-read { color: var(--accent-purple); }

.bl-grid { display: grid; gap: 22px; margin-top: 22px; }
.bl-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-light); border-radius: 18px; background: #fff; transition: box-shadow var(--transition-normal), transform var(--transition-normal); }
.bl-card:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -28px rgba(15,23,42,.4); }
.bl-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-tertiary); }
.bl-card-body { display: flex; flex: 1; flex-direction: column; padding: 22px 22px 24px; }
.bl-card h3 { margin: 10px 0; font-size: 19px; line-height: 1.3; letter-spacing: -.015em; color: var(--text-primary); }
.bl-card:hover h3 { color: var(--accent-purple); }
.bl-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card .bl-meta { margin-top: auto; padding-top: 18px; font-size: 13px; }
.bl-empty { margin: 32px 0 0; text-align: center; color: var(--text-muted); }
.bl-hidden { display: none !important; }

/* ---------- article ---------- */
.ar-col { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.ar-head { padding: 40px 0 0; background: #fff; }
.ar-back { display: inline-block; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.ar-back:hover { color: var(--text-primary); }
.ar-kicker { display: flex; margin-top: 28px; }
.ar-head h1 { margin: 16px 0; font-size: clamp(32px, 5vw, 50px); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; color: var(--text-primary); }
.ar-dek { margin: 0; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; color: var(--text-muted); }
.ar-by { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 16px 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); font-size: 14px; color: var(--text-muted); }
.ar-by img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.ar-by b { display: block; font-size: 15px; color: var(--text-primary); }
.ar-share { display: flex; gap: 8px; margin-left: auto; }
.ar-share a, .ar-share button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border-light); border-radius: 50%; background: #fff; font-size: 13px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); }
.ar-share a:hover, .ar-share button:hover { border-color: var(--accent-purple); color: var(--accent-purple); }
.ar-share button.is-copied { border-color: var(--success); color: var(--success); }

.ar-cover { max-width: 1040px; margin: 36px auto 0; padding: 0 24px; }
.ar-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; background: var(--bg-tertiary); }

.ar-body { padding-top: 44px; padding-bottom: 8px; }
.ar-body > p, .ar-body li { font-size: 18px; line-height: 1.8; color: var(--text-secondary); }
.ar-body > p { margin: 0 0 22px; }
.ar-body h2 { margin: 48px 0 14px; font-size: clamp(23px, 2.6vw, 28px); line-height: 1.25; letter-spacing: -.02em; color: var(--text-primary); }
.ar-body h3 { margin: 36px 0 10px; font-size: 21px; line-height: 1.3; letter-spacing: -.015em; color: var(--text-primary); }
.ar-body a { color: var(--accent-purple); text-decoration: underline; text-decoration-color: rgba(87,24,153,.3); text-underline-offset: 3px; }
.ar-body a:hover { text-decoration-color: var(--accent-purple); }
.ar-body strong { color: var(--text-primary); font-weight: 700; }
.ar-body ul, .ar-body ol { margin: 0 0 26px; padding-left: 24px; }
.ar-body li { margin-bottom: 12px; padding-left: 4px; }
.ar-body li::marker { color: var(--accent-purple); font-weight: 700; }
.ar-quote { margin: 36px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent-purple); font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; line-height: 1.4; letter-spacing: -.015em; color: var(--text-primary); }
.ar-figure { margin: 32px 0; }
.ar-figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 14px; border: 1px solid var(--border-light); }
.ar-figure figcaption { margin-top: 10px; text-align: center; font-size: 13.5px; color: var(--text-muted); }
.ar-video { position: relative; margin: 28px 0 32px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #000; }
.ar-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ar-origin { margin: 40px 0 0 !important; padding-top: 20px; border-top: 1px solid var(--border-light); font-size: 14px !important; color: var(--text-muted) !important; }
.ar-author { display: grid; grid-template-columns: 64px 1fr; gap: 18px; margin-top: 32px; padding: 24px; border: 1px solid var(--border-light); border-radius: 20px; background: var(--bg-secondary); }
.ar-author img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.ar-author b { font-size: 17px; color: var(--text-primary); }
.ar-author p { margin: 6px 0 12px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.ar-author-links { display: flex; flex-wrap: wrap; gap: 18px; }
.ar-author-links a { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; }
.ar-author-links a:hover { color: var(--accent-purple); }

.ar-more { margin-top: 72px; padding: 64px 0 88px; background: var(--bg-secondary); border-top: 1px solid var(--border-light); }
.ar-more-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.ar-more-head h2 { margin: 0; font-size: clamp(26px, 3vw, 32px); letter-spacing: -.03em; color: var(--text-primary); }
.ar-more-head a { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.ar-course { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; padding: 26px; border-radius: 20px; background: var(--bg-ink); color: #fff; }
.ar-course small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-purple-on-dark); }
.ar-course b { display: block; margin-top: 4px; font-size: 20px; }
.ar-course span:not(.ar-course-btn) { display: block; font-size: 14px; color: var(--text-light-muted); }
.ar-course-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 13px 18px; border-radius: 10px; background: var(--accent-purple); font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; }
.ar-course:hover .ar-course-btn { background: var(--accent-purple-hover); }

/* ---------- work page: in-progress list ---------- */
.wip { margin-top: 48px; overflow: hidden; border: 1px solid var(--border-light); border-radius: 22px; background: #fff; }
.wip-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; border-bottom: 1px solid var(--border-light); }
.wip-head h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; color: var(--text-primary); }
.wip-head p { margin: 6px 0 0; max-width: 56ch; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.wip-btn { padding: 12px 16px; border: 1px solid var(--border-light); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; transition: border-color var(--transition-fast); }
.wip-btn:hover { border-color: var(--accent-purple); color: var(--accent-purple); }
.wip-list { margin: 0; padding: 0; list-style: none; }
.wip-row { display: grid; grid-template-columns: 52px 1fr; gap: 6px 16px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--border-light); }
.wip-row:last-child { border-bottom: 0; }
.wip-logo { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 40px; border-radius: 10px; background: var(--bg-ink); font-size: 14px; font-weight: 800; color: #fff; }
.wip-logo img { max-width: 38px; max-height: 22px; }
.wip-row b { display: block; font-size: 16px; color: var(--text-primary); }
.wip-row small { font-size: 13.5px; color: var(--text-muted); }
.wip-tag { display: none; font-size: 13px; color: var(--text-secondary); }
.wip-status { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: var(--radius-pill); background: #FEF3C7; font-size: 12.5px; font-weight: 600; color: #92400E; }
.wip-status i { width: 7px; height: 7px; border-radius: 50%; background: #F59E0B; }

@media (min-width: 760px) {
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
  .ar-course { flex-direction: row; justify-content: space-between; align-items: center; padding: 26px 30px; }
  .ar-course-btn { align-self: center; }
  .ar-author { grid-template-columns: 76px 1fr; gap: 20px; padding: 28px; }
  .ar-author img { width: 76px; height: 76px; }
  .wip-head { flex-direction: row; justify-content: space-between; align-items: flex-end; padding: 30px 32px 22px; }
  .wip-row { grid-template-columns: 64px 1.3fr 1fr 190px; padding: 18px 32px; }
  .wip-logo { grid-row: auto; width: 56px; }
  .wip-tag { display: block; }
  .wip-status { justify-self: end; }
}
@media (min-width: 1000px) {
  .bl-feature { grid-template-columns: 1.15fr 1fr; }
  .bl-feature-img { aspect-ratio: auto; min-height: 380px; }
  .bl-feature-body { padding: 44px 44px 40px; }
  .bl-grid { grid-template-columns: repeat(3, 1fr); }
  .wk-two .projects-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ar-share { display: none; }
}

.form-label small {
  font-weight: 500;
  color: var(--text-muted);
}