/* ═══════════════════════════════════════════════
   ABOUT PAGE - merged from story.css + why-us.css + process.css
   (process.css's cosmic-parallax background system excluded - see plan)
═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   STORY PAGE
═══════════════════════════════════════════════ */

/* Story hero layout */
.story-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  background: var(--color-bg);
  background-image: var(--gradient-dark);
  overflow: hidden;
}
@media (min-width: 768px) {
  .story-hero { flex-direction: row; }
}

/* Left content panel */
.story-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 2.5rem 2rem;
  padding-top: calc(var(--nav-h) + 2.5rem);
  z-index: 1;
}
@media (min-width: 768px) {
  .story-content { width: 55%; padding: 3.5rem; padding-top: calc(var(--nav-h) + 3.5rem); }
}
@media (min-width: 1200px) {
  .story-content { width: 60%; padding: 4rem; padding-top: calc(var(--nav-h) + 4rem); }
}

/* Header row */
.story-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 3rem;
}
.story-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.story-back:hover { opacity: 1; color: var(--color-primary); }

.story-logo         { text-align: right; }
.story-logo-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.story-logo-slogan {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-top: 0.2rem;
}

/* Main content */
.story-main { flex: 1; }

.story-title {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}
.story-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--color-ash);
}
.story-divider {
  width: 5rem;
  height: 3px;
  background: linear-gradient(to right, var(--color-ash), transparent);
  margin-bottom: 1.75rem;
  border-radius: 2px;
}
.story-subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--color-muted);
  max-width: 480px;
  margin-bottom: 2.5rem;
}
.story-subtitle strong {
  font-weight: 500;
  color: #FAFAFA;
}
.story-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ash);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.story-cta:hover { color: #FAFAFA; gap: 0.85rem; }
.story-cta:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }

/* Footer row */
.story-footer {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
}
.story-contacts-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-bottom: 1.5rem;
}
.story-contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--color-muted);
}
.story-contact-icon {
  color: var(--color-ash);
  flex-shrink: 0;
}
.story-credit {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 300;
  color: rgba(255,255,255,0.3);
  text-align: left;
  margin-top: 0.5rem;
}
.story-credit a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.story-credit a:hover { color: var(--color-primary); }

/* Right image panel */
.story-image {
  position: relative;
  width: 100%;
  min-height: 280px;
  background-color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  animation: revealImage 1.2s cubic-bezier(0, 0.55, 0.45, 1) 0.3s forwards;
  overflow: hidden;
}
.story-image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  inset: 0;
}
@media (min-width: 768px) {
  .story-image { width: 45%; min-height: unset; }
}
@media (min-width: 1200px) {
  .story-image { width: 40%; }
}

/* ── Hero stagger animations ── */
.anim-item {
  opacity: 0;
  animation: fadeUp 0.55s ease-out forwards;
}
.story-header  { animation-delay: 0.2s; }
/* title splits into 3 groups - each word-group is its own anim-item */
.story-wg--1   { animation-delay: 0.35s; }
.story-wg--2   { animation-delay: 0.48s; }
.story-title-em{ animation-delay: 0.62s; }
.story-divider  { animation-delay: 0.74s; }
.story-subtitle { animation-delay: 0.86s; }
.story-founding { animation-delay: 0.99s; }
.story-cta      { animation-delay: 1.13s; }
.story-footer   { animation-delay: 1.27s; }

/* Word group spans sit inline inside the h1 */
.story-wg {
  display: inline;
}

/* ── Title em underline draw ── */
.story-title-em {
  position: relative;
  display: inline;
}
.story-title-em::after {
  content: '';
  position: absolute;
  bottom: 0.06em;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-ash);
  transform: scaleX(0);
  transform-origin: left center;
  animation: story-underline-draw 0.7s cubic-bezier(0.25, 0, 0, 1) 1.1s forwards;
}

@keyframes story-underline-draw {
  to { transform: scaleX(1); }
}

/* ── Subtitle YOU spark ── */
.story-subtitle strong {
  display: inline-block;
  animation: story-you-spark 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) 1.5s forwards;
}
@keyframes story-you-spark {
  0%   { transform: scale(1)    translateY(0);   letter-spacing: inherit; }
  45%  { transform: scale(1.11) translateY(-2px); letter-spacing: 0.04em; }
  100% { transform: scale(1)    translateY(0);   letter-spacing: inherit; }
}

/* Scroll hint */
.story-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 10;
  pointer-events: none;
}
.story-scroll-hint-text {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232,232,232,0.35);
}
.story-scroll-hint-line {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(to bottom, rgba(250,249,246,0.6), transparent);
  transform-origin: top;
  animation: scrollLineFall 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ═══════════════════════════════════════════════
   TEAM - Profile Carousel (21st.dev translation)
═══════════════════════════════════════════════ */
.team-section {
  background: var(--color-bg);
  background-image: var(--gradient-dark);
  padding: 7rem 2rem;
  overflow: hidden;
}
.team-inner {
  max-width: 1000px;
  margin: 0 auto;
}
.team-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  color: var(--color-ash);
  margin-bottom: 1rem;
}
.team-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}
.team-section .team-founding {
  font-family: var(--font-heading) !important;
  font-style: italic !important;
  font-weight: 300;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.6;
  color: var(--color-ash);
  max-width: 640px;
  margin-bottom: 3.5rem;
  letter-spacing: 0.01em;
}
.team-heading em {
  font-style: italic;
  color: var(--color-ash);
  position: relative;
  display: inline;
}

/* Underline draws in when heading scrolls into view */
.team-heading em::after {
  content: '';
  position: absolute;
  bottom: 0.05em;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-ash);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.75s cubic-bezier(0.25, 0, 0, 1) 0.35s;
}
.team-heading.revealed em::after {
  transform: scaleX(1);
}

/* ── Slides container - side by side ── */
.tc-slides {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .tc-slides { grid-template-columns: 1fr 1fr; }
}

/* ── Individual slide ── */
.tc-slide {
  border-radius: 20px;
  overflow: hidden;
}

/* ── Photo wrap - contains image + badge overlay ── */
.tc-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--color-surface);
  border-radius: 20px;
  overflow: hidden;
}
.tc-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}
/* ── Description overlay ── */
.tc-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
  padding: 2rem 1.75rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.tc-overlay p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.75;
  color: rgba(232, 232, 232, 0.9);
}

/* ── Pill badge overlaid at the bottom ── */
.tc-badge {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ── Hover effects - ONLY on devices that truly support hover ── */
@media (hover: hover) {
  .tc-slide:hover .tc-photo-wrap img {
    transform: scale(1.04);
    filter: blur(3px) brightness(0.45);
  }
  .tc-slide:hover .tc-overlay {
    opacity: 1;
  }
  .tc-slide:hover .tc-badge {
    opacity: 0;
    transform: translateY(6px);
  }
}
.tc-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  line-height: 1.2;
}
.tc-role {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ash);
}

/* ── Touch devices - tap to reveal overlay ── */
@media (hover: none) {
  .tc-overlay {
    opacity: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.30) 100%);
    padding: 1.5rem;
    justify-content: flex-end;
  }
  .tc-overlay p {
    font-size: 0.8rem;
    line-height: 1.6;
  }
  .tc-slide.tc-active .tc-overlay {
    opacity: 1;
  }
  .tc-slide.tc-active .tc-photo-wrap img {
    transform: scale(1.04);
    filter: blur(3px) brightness(0.45);
  }
  .tc-slide.tc-active .tc-badge {
    opacity: 0;
    transform: translateY(6px);
  }
  .tc-photo-wrap {
    cursor: pointer;
  }
}

/* ── Mobile ── */
@media (max-width: 639px) {
  .team-section   { padding: 5rem 1.25rem; }
  .team-heading   { margin-bottom: 1rem; }
  .team-section .team-founding { font-size: 1rem; margin-bottom: 2.5rem; }
}

/* ═══════════════════════════════════════════════
   SELECTED WORK
═══════════════════════════════════════════════ */
.work {
  background: var(--color-bg);
  background-image: var(--gradient-dark);
  padding: 4rem 2rem;
}
.work-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.work-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  color: var(--color-ash);
  margin-bottom: 1.75rem;
}
.work-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 2rem;
}

/* Word-by-word stagger inside the work heading */
.work-word {
  display: inline-block;
  transform: translateY(16px);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-heading.revealed .work-word {
  transform: translateY(0);
}
.work-heading.revealed .work-word--1 { transition-delay: 0s; }
.work-heading.revealed .work-word--2 { transition-delay: 0.08s; }
.work-heading.revealed .work-word--3 { transition-delay: 0.16s; }
.work-heading.revealed .work-word--4 { transition-delay: 0.24s; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .story-image {
    animation-name: none;
    clip-path: none;
    opacity: 0;
    animation: fadeUp 0.6s ease-out 0.4s forwards;
  }
  .story-header {
    flex-direction: column-reverse;
    gap: 1.25rem;
    margin-bottom: 2rem;
  }
  .story-logo   { text-align: left; }
  .story-title  { font-size: clamp(2rem, 8vw, 3rem); }
}
@media (max-width: 480px) {
  .story-content      { padding: 2rem 1.25rem; padding-top: calc(var(--nav-h) + 2rem); }
  .story-title        { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .story-contacts-row { flex-direction: column; gap: 0.75rem; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .story-title-em::after {
    animation: none;
    transform: scaleX(1);
  }
  .story-subtitle strong {
    animation: none;
  }
  .team-heading em::after {
    transition: none;
    transform: scaleX(1);
  }
  .work-word {
    transform: none;
    transition: none;
  }
}

/* ══════════════════════════════════════���════════
   SERVICES PAGE
═══════════════════════════════════════════════ */

/* ── Cinematic spotlight - fixed behind all page content ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    conic-gradient(
      from 198deg at 100% -8%,
      transparent            0deg,
      rgba(255,255,255,0.00)  8deg,
      rgba(255,255,255,0.16) 20deg,
      rgba(255,255,255,0.28) 28deg,
      rgba(255,255,255,0.16) 38deg,
      rgba(255,255,255,0.00) 52deg,
      transparent            64deg,
      transparent           360deg
    ),
    radial-gradient(
      ellipse 55% 38% at 100% 0%,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.05) 45%,
      transparent            72%
    ),
    radial-gradient(
      ellipse 120% 80% at 110% -15%,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0.02) 42%,
      transparent            65%
    );
}

/* Film grain - tiled on top of the light */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Ensure page content sits above the fixed bg layers */
body > * { position: relative; z-index: 1; }

/* ── Hero ── */
.svc-hero {
  position: relative;
  min-height: 78vh;
  min-height: 78svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: #1C1C1C;
  background-image:
    linear-gradient(to bottom,
      rgba(28, 28, 28, 0.45) 0%,
      rgba(28, 28, 28, 0.75) 70%,
      rgba(28, 28, 28, 1.00) 100%),
    url('assets/whyus-hero-bg.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.svc-hero-content {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(5rem, 10vh, 8rem) 2.5rem clamp(4rem, 8vh, 6rem);
}

.svc-hero-eyebrow {
  margin-bottom: 1.75rem;
}

.svc-hero-title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: 1.75rem;
}

/* Hero title em - draws underline on page load */
.svc-hero-title em {
  position: relative;
  display: inline;
  font-style: italic;
}
.svc-hero-title em::after {
  content: '';
  position: absolute;
  bottom: 0.06em;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-ash);
  transform: scaleX(0);
  transform-origin: left center;
  animation: svc-underline-draw 0.75s cubic-bezier(0.25, 0, 0, 1) 0.7s forwards;
}

@keyframes svc-underline-draw {
  to { transform: scaleX(1); }
}

.svc-hero-subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.8;
  color: rgba(250, 249, 246, 0.50);
  max-width: 520px;
  margin-bottom: 2.5rem;
}

.svc-hero-trail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.svc-hero-trail span {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(250, 249, 246, 0.30);
}

.svc-hero-trail-sep {
  color: var(--color-ash) !important;
  font-size: 7px !important;
  letter-spacing: 0 !important;
  opacity: 0.5;
}

/* Scroll indicator - bottom right */
.svc-hero-scroll {
  position: absolute;
  right: 2.5rem;
  bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.svc-hero-scroll-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(250, 249, 246, 0.22);
  writing-mode: vertical-rl;
  rotate: 180deg;
}

.svc-hero-scroll-line {
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, rgba(250, 249, 246, 0.10), rgba(140, 136, 130, 0.45));
  animation: svc-scroll-pulse 2.5s ease-in-out infinite;
}

@keyframes svc-scroll-pulse {
  0%, 100% { opacity: 0.35; transform: scaleY(1); }
  50%       { opacity: 1;    transform: scaleY(1.18); }
}

@media (max-width: 767px) {
  .svc-hero-title    { font-size: clamp(2.75rem, 12vw, 3.5rem); }
  .svc-hero-content  { padding: 5rem 1.5rem 3.5rem; }
  .svc-hero-scroll   { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-hero-title em::after { animation: none; transform: scaleX(1); }
  .svc-hero-scroll-line     { animation: none; }
}

/* ═══════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════ */

/* ── <em> keyword underline draw ──
   Applies to any <em> inside a scroll-reveal-item heading.
   The underline sweeps in from left once the heading is revealed. */
.scroll-reveal-item em {
  position: relative;
  display: inline;
}
.scroll-reveal-item em::after {
  content: '';
  position: absolute;
  bottom: 0.06em;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-ash);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0s; /* no transition until revealed */
}
.scroll-reveal-item.revealed em::after {
  transform: scaleX(1);
  transition: transform 0.75s cubic-bezier(0.25, 0, 0, 1) 0.35s;
}

/* ── Section number counter - flash on completion ── */
.wwb-num,
.sac-num {
  transition: color 0.3s ease, opacity 0.3s ease;
}
.wwb-num.is-counting,
.sac-num.is-counting {
  color: var(--color-ash);
  opacity: 0.5;
}
.wwb-num.is-done,
.sac-num.is-done {
  color: var(--color-ash);
  opacity: 1;
}

/* ── Pricing count-up - flash color as number lands ── */
.pricing-number.is-counting {
  color: var(--color-muted);
}
.pricing-number.is-done {
  color: var(--color-text);
  transition: color 0.3s ease;
}
.pricing-card--featured .pricing-number.is-done {
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-item em::after { transition: none; }
  .wwb-num, .sac-num, .pricing-number { transition: none; }
}

/* Shared heading helpers (.svc-heading, .svc-center-heading, etc.) live in global.css */

/* ═══════════════════════════════════════════════
   DIAMOND DIVIDER - fluid.glass motif
═══════════════════════════════════════════════ */
.diamond-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
}
.diamond-divider::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: var(--color-ash);
  transform: rotate(45deg);
  opacity: 0.5;
}

/* .eyebrow-diamond lives in global.css */

/* ═══════════════════════════════════════════════
   WHAT WE BUILD - Pinned scroll sections
═══════════════════════════════════════════════ */
.svc-scroll-wrap {
  background: var(--color-bg);
  background-image: var(--gradient-dark);
}

.svc-scroll-pin {
  padding: 7rem 2rem;
}

.svc-scroll-inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
}

.svc-scroll-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  color: var(--color-ash);
}

/* Stage - 3-column grid */
.svc-scroll-stage {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  width: 100%;
}
@media (max-width: 767px) {
  .svc-scroll-stage { grid-template-columns: 1fr; gap: 3rem; }
  .svc-scroll-pin   { padding: 5rem 1.25rem; }
}

.svc-scroll-slide {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  text-align: left;
}

.svc-scroll-num {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 300;
  color: rgba(140, 136, 130, 0.20);
  line-height: 1;
  letter-spacing: -0.04em;
}
.svc-scroll-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
}
.svc-scroll-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--color-muted);
}

/* ═══════════════════════════════════════════════
   PROBLEM / SOLUTION
═══════════════════════════════════════════════ */
.ps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .ps-grid {
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: start;
  }
}

.ps-col { display: flex; flex-direction: column; gap: 1.75rem; }

.ps-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  color: var(--color-ash);
}

/* Problem list */
.ps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ps-item {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.6;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.ps-item::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--color-ash);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-top: 0.45em;
  opacity: 0.6;
}
.ps-item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* Solution text */
.ps-solution-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text);
}
.ps-solution-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.85;
}

/* Vertical divider between columns */
.ps-divider {
  display: none;
}
@media (min-width: 768px) {
  .ps-divider {
    display: block;
    width: 1px;
    align-self: stretch;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.10) 20%, rgba(255,255,255,0.10) 80%, transparent);
    margin: 0 3.5rem;
  }
}

/* ═══════════════════════════════════════════════
   FEATURE TILES - frosted glass
═══════════════════════════════════════════════ */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-tile {
  position: relative;
  padding: 3rem 2.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition:
    border-color 0.3s ease,
    background   0.3s ease,
    transform    0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
/* Inner top highlight */
.feature-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  pointer-events: none;
}
.feature-tile:hover {
  border-color: rgba(140, 136, 130, 0.30);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-3px);
}

.feature-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: 3rem;
  color: rgba(250,249,246,0.07);
  line-height: 1;
  margin-bottom: 1.5rem;
  transition: color 0.3s ease;
}
.feature-tile:hover .feature-num {
  color: rgba(140,136,130,0.3);
}

.feature-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--color-text);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.feature-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════
   STEPS ACCORDION
═══════════════════════════════════════════════ */
.sac {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

.sac-item:first-child {
  border-top: 1px solid var(--color-border);
}

.sac-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem 0;
  color: var(--color-text);
  font-family: var(--font-body);
}

.sac-num {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(250,249,246,0.25);
  min-width: 2rem;
  flex-shrink: 0;
}

.sac-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  flex: 1;
  letter-spacing: 0.01em;
}

.sac-footer {
  text-align: center;
  margin-top: 3rem;
}
.sac-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sac-link:hover {
  color: var(--color-ash);
  gap: 0.85rem;
}

/* ═══════════════════════════════════════════════
   CLIENTS STRIP
═══════════════════════════════════════════════ */
.clients-strip {
  padding: 5rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.clients-eyebrow {
  margin-bottom: 2rem;
  text-align: center;
}
.clients-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 0;
}
.client-name {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color: rgba(250,249,246,0.45);
  text-decoration: none;
  transition: color 0.25s ease;
  padding: 0 1.5rem;
}
a.client-name:hover {
  color: var(--color-text);
}
.client-name--muted {
  color: rgba(250,249,246,0.2);
}
.client-sep {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(250,249,246,0.12);
  user-select: none;
}
.clients-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.clients-cta:hover {
  color: var(--color-primary);
  gap: 0.85rem;
}

/* ═══════════════════════════════════════════════
   ADD-ONS
═══════════════════════════════════════════════ */
.addons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .addons-grid { grid-template-columns: 1fr 1fr; }
}

.addon-card {
  position: relative;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  overflow: hidden;
  transition:
    border-color 0.3s ease,
    background   0.3s ease,
    transform    0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Inner top highlight */
.addon-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  pointer-events: none;
}
.addon-card:hover {
  border-color: rgba(140, 136, 130, 0.30);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-3px);
}

.addon-eyebrow { margin-bottom: 0.75rem; }
.addon-heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: 1rem;
  line-height: 1.3;
}
.addon-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.8;
}
.addon-list {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.addon-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(232,232,232,0.45);
}
.check {
  color: var(--color-ash);
  font-size: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}
.addon-note {
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(232,232,232,0.3);
}

/* ═══════════════════════════════════════════════
   PILLARS
═══════════════════════════════════════════════ */
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
}

.pillar {
  position: relative;
  padding: 3rem 2.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  overflow: hidden;
  transition:
    border-color 0.3s ease,
    background   0.3s ease,
    transform    0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  pointer-events: none;
}
.pillar:hover {
  border-color: rgba(140, 136, 130, 0.30);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-3px);
}

.pillar-num {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(250,249,246,0.2);
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
}
.pillar-statement {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}
.pillar-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════
   FAQ - smooth accordion
═══════════════════════════════════════════════ */
.faq-container {
  max-width: 720px;
  margin: 0 auto;
}
.faq-list {
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item:first-child {
  border-top: 1px solid var(--color-border);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--color-text);
  transition: color 0.2s ease;
}
.faq-q:hover {
  color: var(--color-ash);
}
.faq-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--color-muted);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq-icon::before {
  width: 12px;
  height: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.faq-icon::after {
  width: 1px;
  height: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.faq-q[aria-expanded="true"] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.faq-q[aria-expanded="true"] {
  color: var(--color-ash);
}

.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-a-wrap.is-open {
  grid-template-rows: 1fr;
}
.faq-a {
  min-height: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.8;
  padding-bottom: 1.25rem;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .addon-card        { padding: 1.75rem; }
  .feature-tile      { padding: 2rem 1.5rem; }
  .pillar            { padding: 2rem 1.5rem; }
  .clients-row       { gap: 0.75rem 0; }
  .client-name       { font-size: 1.2rem; padding: 0 0.85rem; }
}

/* ═══════════════════════════════════════════════
   PAGE ORB - fixed left-side scroll indicator
═══════════════════════════════════════════════ */
.porb-line {
  position: fixed;
  top: 0;
  width: 1px;
  height: 100vh;
  height: 100dvh;
  background: rgba(250, 249, 246, 0.06);
  pointer-events: none;
  z-index: 50;
  display: none;
}
@media (min-width: 768px) {
  .porb-line { display: block; }
}

.porb-glow {
  position: fixed;
  width: 1px;
  background: linear-gradient(to bottom, rgba(140,136,130,0.05), rgba(140,136,130,0.35));
  pointer-events: none;
  z-index: 50;
  transition: height 0.15s ease-out;
  display: none;
}
@media (min-width: 768px) {
  .porb-glow { display: block; }
}

.porb-orb {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9), var(--color-ash) 50%, transparent);
  box-shadow: 0 0 20px 8px rgba(140,136,130,0.35), 0 0 40px 16px rgba(140,136,130,0.12);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 51;
  transition: top 0.15s ease-out;
  display: none;
}
@media (min-width: 768px) {
  .porb-orb { display: block; }
}

/* ═══════════════════════════════════════════════
   MORPHING CARD STACK - vanilla translation
   of 21st.dev morphing-card-stack component
═══════════════════════════════════════════════ */
.mcs-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
}

/* ── Layout toggle ── */
.mcs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}
.mcs-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
}
.mcs-toggle-btn:hover { background: rgba(255,255,255,0.06); color: var(--color-text); }
.mcs-toggle-btn.is-active { background: var(--color-ash); color: #0A0A0A; }
.mcs-toggle-btn:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

/* ── Cards container ── */
.mcs-cards[data-layout="stack"] {
  position: relative;
  width: 240px;
  height: 230px; /* card min-height + 3 × 8px offsets */
  flex-shrink: 0;
}
.mcs-cards[data-layout="grid"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  width: min(480px, 88vw);
}
.mcs-cards[data-layout="list"] {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: min(420px, 88vw);
}

/* ── Individual card ── */
.mcs-card {
  background: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  gap: 0.75rem;
  transition:
    transform    0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity      0.3s ease,
    box-shadow   0.25s ease,
    border-color 0.25s ease;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.mcs-card:hover { border-color: rgba(255,255,255,0.16); box-shadow: 0 6px 28px rgba(0,0,0,0.35); }

/* Stack */
.mcs-cards[data-layout="stack"] .mcs-card {
  position: absolute;
  width: 220px;
  min-height: 190px;
  flex-direction: column;
  cursor: grab;
  touch-action: none;
}
.mcs-card--dragging { cursor: grabbing !important; transition: none !important; }

/* Grid */
.mcs-cards[data-layout="grid"] .mcs-card {
  flex-direction: column;
  aspect-ratio: 1;
  cursor: pointer;
}

/* List */
.mcs-cards[data-layout="list"] .mcs-card {
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

/* ── Icon box ── */
.mcs-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--color-ash);
}

/* ── Text ── */
.mcs-card-body { flex: 1; min-width: 0; }
.mcs-card-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcs-card-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0.25rem 0 0;
}
.mcs-cards[data-layout="stack"] .mcs-card-desc,
.mcs-cards[data-layout="grid"]  .mcs-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mcs-cards[data-layout="list"] .mcs-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Swipe hint - only on top card in stack mode */
.mcs-swipe-hint {
  display: none;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-muted);
  opacity: 0.4;
  text-align: center;
  letter-spacing: 0.05em;
  margin-top: auto;
  padding-top: 0.5rem;
}
.mcs-cards[data-layout="stack"] .mcs-card--top .mcs-swipe-hint { display: block; }

/* ── Dot navigation ── */
.mcs-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mcs-dot {
  height: 6px;
  width: 6px;
  border-radius: 3px;
  border: none;
  background: rgba(140, 136, 130, 0.25);
  cursor: pointer;
  padding: 0;
  transition: width 0.25s cubic-bezier(0.16,1,0.3,1), background 0.25s ease;
}
.mcs-dot.is-active { width: 16px; background: var(--color-ash); }
.mcs-dot:hover:not(.is-active) { background: rgba(140,136,130,0.5); }
.mcs-dot:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }

/* ── Problem + Solution combined slide ── */
.ps-combined-slide .section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  max-width: 1100px;
}

/* Column headings share the same eyebrow style */
.ps-prob-col,
.ps-sol-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* MorphingCardStack left-aligns within its column */
.ps-sol-col .mcs-wrapper {
  align-items: flex-start;
}

/* ── ProductCard 2×2 grid (THE PROBLEM) ── */
.prob-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.prob-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid rgba(140,136,130,0.12);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.prob-card:hover {
  border-color: rgba(140,136,130,0.35);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

/* 16:9 image */
.prob-card-image-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.prob-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.prob-card:hover .prob-card-img {
  transform: scale(1.05);
}

/* Card text below image */
.prob-card-content {
  padding: 0.75rem 0.875rem 0.875rem;
}
.prob-card-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-text);
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
}
.prob-card-category {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

/* Bookmark icon - fades in on hover */
.prob-card-icon {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 28px;
  height: 28px;
  background: rgba(10,10,10,0.65);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ash);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.prob-card:hover .prob-card-icon { opacity: 1; }

@media (max-width: 767px) {
  .ps-combined-slide .section-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .ps-sol-col .mcs-wrapper { align-items: center; }
  .prob-cards-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .mcs-cards[data-layout="stack"] { width: 200px; height: 215px; }
  .mcs-cards[data-layout="stack"] .mcs-card { width: 185px; }
  .mcs-cards[data-layout="grid"],
  .mcs-cards[data-layout="list"] { width: 100%; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE SLIDE OVERRIDES
   Ensures every slide fits inside 100svh on any
   screen from 375 px wide to 4K.
═══════════════════════════════════════════════ */


/* ── Problem + Solution - tighten gap ── */
.ps-combined-slide .section-inner {
  gap: clamp(2rem, 4vw, 4rem);
}

/* Stack Problem + Solution on narrow desktop / tablet (768–920 px) */
@media (max-width: 920px) {
  .ps-combined-slide .section-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .ps-sol-col .mcs-wrapper { align-items: center; }
}

/* ── What We Build grid - 1 col on tablet ── */
@media (min-width: 768px) and (max-width: 900px) {
  .svc-scroll-stage { grid-template-columns: 1fr; gap: 1rem; }
}

/* ── Add-ons / Pillars - adjust columns on narrow desktop ── */
@media (min-width: 768px) and (max-width: 900px) {
  .addons-grid  { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile: Problem + Solution - stack columns ── */
@media (max-width: 767px) {
  .ps-combined-slide .section-inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* Section dimming - inactive panels fade out when orb is active */
body.porb-active [data-panel] {
  opacity: 0.15;
  transition: opacity 0.5s ease;
}
body.porb-active [data-panel].porb-panel-active {
  opacity: 1;
}

/* ═══════════════════════════════════════════════
   WHY DE MAKERS SPACE
═══════════════════════════════════════════════ */
.why-heading em {
  font-style: italic;
  color: var(--color-ash);
}

.why-opening {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.7;
  color: var(--color-muted);
  text-align: center;
  max-width: 600px;
  margin: 1.5rem auto 0;
}

.why-divider {
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, var(--color-ash), transparent);
  margin: 2.5rem auto;
  opacity: 0.5;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  max-width: 960px;
  margin: 0 auto;
}

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

.why-card {
  background: var(--color-bg);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  transition: background 0.3s ease;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.why-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.04) 0%, transparent 40%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.why-card:hover {
  background: var(--color-surface);
}
.why-card:hover::after {
  opacity: 1;
}

.why-card-label,
.why-card-us-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
}
.why-card-label    { color: rgba(232,232,232,0.25); }
.why-card-us-label { color: var(--color-ash); }

.why-card-other {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(232,232,232,0.35);
  font-style: italic;
}
.why-card-us {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--color-text);
}

.why-card-sep {
  font-size: 8px;
  color: var(--color-ash);
  opacity: 0.4;
  margin: 0.25rem 0;
}

.why-quote {
  max-width: 620px;
  margin: 3rem auto 0;
  text-align: center;
  border: none;
  padding: 0;
}
.why-quote-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.7;
  color: var(--color-muted);
}
.why-quote-cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-ash);
  font-style: normal;
}

/* ── Slide-context overrides - keeps all cards visible within 100svh ── */
.why-grid--slide {
  margin-top: clamp(1.25rem, 2.5vh, 2rem);
}
.why-grid--slide .why-card {
  padding: clamp(1rem, 2vh, 1.75rem) 1.5rem;
  gap: 0.5rem;
}
/* ═══════════════════════════════════════════════
   WHAT WE BUILD - numbered editorial list
═══════════════════════════════════════════════ */
.wwb-inner {
  max-width: 820px;
}

.wwb-header {
  margin-bottom: clamp(2rem, 4vh, 3.5rem);
}

.wwb-heading {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.wwb-subhead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  color: var(--color-muted);
  line-height: 1.75;
  max-width: 560px;
}

.wwb-list {
  display: flex;
  flex-direction: column;
}

.wwb-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 2rem;
  padding: clamp(1.25rem, 2.5vh, 2rem) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: start;
  transition: border-color 0.25s ease;
}
.wwb-item:first-child {
  border-top: 1px solid var(--color-border);
}
.wwb-item:hover {
  border-color: rgba(140,136,130,0.25);
}

.wwb-num {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  color: rgba(250,249,246,0.09);
  line-height: 1;
  padding-top: 0.2rem;
  transition: color 0.3s ease;
  user-select: none;
}
.wwb-item:hover .wwb-num {
  color: rgba(140,136,130,0.32);
}

.wwb-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--color-text);
  margin-bottom: 0.4rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.wwb-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--color-muted);
  line-height: 1.8;
}

@media (max-width: 767px) {
  .wwb-item { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
  .wwb-num  { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════
   CLIENTS STRIP
═══════════════════════════════════════════════ */
.clients-tagline {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: rgba(250,249,246,0.3);
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 3rem;
}

/* ═══════════════════════════════════════════════
   ADDON CARD - glass treatment
═══════════════════════════════════════════════ */
.addon-card {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.addon-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.04) 0%, transparent 40%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.addon-card:hover::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════════ */
.cta-section {
  padding: 120px 0;
  background-image: var(--gradient-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

/* .cta-section-eyebrow lives in global.css */

@media (max-width: 767px) {
  .cta-section { padding: 80px 1.5rem; }
}

/* ═══════════════════════════════════════════════
   PRICING SECTION
═══════════════════════════════════════════════ */

.pricing-subhead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  color: var(--color-muted);
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 3rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  max-width: 960px;
  margin: 0 auto;
}

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

.pricing-section-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-ash);
  text-align: center;
  margin-bottom: 1.25rem;
}

.pricing-divider {
  width: 100%;
  max-width: 960px;
  margin: 2.5rem auto;
  height: 1px;
  background: var(--color-border);
  position: relative;
}
.pricing-divider::before {
  content: '◆';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  color: var(--color-ash);
  background: var(--color-bg);
  padding: 0 0.75rem;
}

.pricing-grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 680px;
}

@media (max-width: 900px) {
  .pricing-grid--two { grid-template-columns: 1fr; }
}

.pricing-card {
  background: var(--color-bg);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  transition: background 0.3s ease;
}
.pricing-card:hover { background: var(--color-surface); }

.pricing-card--featured {
  background: var(--color-surface);
  border-left: 2px solid var(--color-ash);
}
.pricing-card--featured:hover { background: #161616; }

.pricing-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #0A0A0A;
  background: var(--color-ash);
  padding: 4px 10px;
  margin-bottom: 1rem;
  align-self: flex-start;
}

.pricing-card-top {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pricing-tier {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1;
}

.pricing-pages {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-ash);
  margin-bottom: 0.75rem;
}

.pricing-amount-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.5rem 0 0.75rem;
}

.pricing-was {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: rgba(232,232,232,0.25);
  text-decoration: line-through;
}

.pricing-amount {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.pricing-currency {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-muted);
}
.pricing-number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-text);
  letter-spacing: -0.03em;
}
.pricing-card--featured .pricing-number { color: var(--color-primary); }

.pricing-note {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(232,232,232,0.3);
  letter-spacing: 0.08em;
}

.pricing-hook {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-muted);
  margin-top: 0.25rem;
}

.pricing-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 300;
  color: rgba(232,232,232,0.6);
  line-height: 1.5;
}

.pricing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ash);
  border: 1px solid var(--color-ash);
  height: 52px;
  padding: 0 2.25rem;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
  align-self: flex-start;
}
.pricing-cta:hover { background: var(--color-ash); color: #0A0A0A; }

.pricing-cta--featured { background: var(--color-ash); color: #0A0A0A; }
.pricing-cta--featured:hover { background: #7A7874; border-color: #7A7874; }

.pricing-shared-terms {
  max-width: 760px;
  margin: 2.5rem auto 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(232,232,232,0.28);
}

.pricing-footer {
  text-align: center;
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 300;
  color: rgba(232,232,232,0.35);
}
.pricing-footer-link {
  color: var(--color-ash);
  text-decoration: none;
  transition: color 0.2s ease;
}
.pricing-footer-link:hover { color: var(--color-text); }

.pricing-renewal {
  text-align: center;
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: rgba(232,232,232,0.25);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Mobile: full-width CTAs for tap targets ── */
@media (max-width: 767px) {
  .pricing-cta { align-self: stretch; width: 100%; }

  /* Featured card border moves to top on single-column stacking */
  .pricing-card--featured {
    border-left: none;
    border-top: 2px solid var(--color-ash);
  }
}

/* ── Side-by-side pricing split ── */
.pricing-split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  column-gap: 3.5rem;
  align-items: start;
  margin-top: 2.5rem;
}

.pricing-split-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.pricing-split-divider {
  position: relative;
  width: 1px;
  align-self: stretch;
  overflow: visible;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 10%,
    rgba(255, 255, 255, 0.07) 90%,
    transparent 100%
  );
}

/* ◆ orb descends the line - signature DMS scroll cue */
.pricing-split-divider::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 8%;
  width: 7px;
  height: 7px;
  background: var(--color-ash);
  opacity: 0;
  transform: translateX(-50%) rotate(45deg);
  box-shadow:
    0 -36px 20px 7px rgba(140, 136, 130, 0.06),
    0 -18px 13px 5px rgba(140, 136, 130, 0.15),
    0  -7px  8px 3px rgba(140, 136, 130, 0.28),
    0   0px  8px 3px rgba(140, 136, 130, 0.58),
    0   7px 20px 8px rgba(140, 136, 130, 0.16);
  animation: dms-orb-descend 3.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* Outer ring blooms and fades as the orb appears */
.pricing-split-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 8%;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(140, 136, 130, 0.30);
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(0);
  animation: dms-orb-bloom 3.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes dms-orb-descend {
  0%   { top:  8%; opacity: 0;    transform: translateX(-50%) rotate(45deg) scale(0.4); }
  6%   {           opacity: 1;    transform: translateX(-50%) rotate(45deg) scale(1.15); }
  12%  {           opacity: 1;    transform: translateX(-50%) rotate(45deg) scale(1); }
  83%  {           opacity: 0.75; transform: translateX(-50%) rotate(45deg) scale(1); }
  100% { top: 88%; opacity: 0;    transform: translateX(-50%) rotate(45deg) scale(0.55); }
}

@keyframes dms-orb-bloom {
  0%   { top:  8%; opacity: 0;   transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(0); }
  6%   {           opacity: 0.7; transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1); }
  22%  {           opacity: 0;   transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(2.4); }
  100% { top:  8%; opacity: 0;   transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(0); }
}

/* Cards stack vertically within each half */
.pricing-split-col .pricing-grid--two {
  grid-template-columns: 1fr;
  max-width: 100%;
}

/* Featured card keeps left-border accent on desktop */
.pricing-split-col .pricing-card--featured {
  border-left: 2px solid var(--color-ash);
  border-top: none;
}

@media (max-width: 960px) {
  .pricing-split {
    grid-template-columns: 1fr;
    row-gap: 4rem;
  }

  .pricing-split-divider {
    width: 100%;
    height: 1px;
    align-self: auto;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(255, 255, 255, 0.07) 10%,
      rgba(255, 255, 255, 0.07) 90%,
      transparent 100%
    );
  }

  /* Orb travels left → right on the horizontal line */
  .pricing-split-divider::before {
    top: 50%;
    left: 8%;
    transform: translateY(-50%) rotate(45deg);
    box-shadow:
      -36px 0 20px 7px rgba(140, 136, 130, 0.06),
      -18px 0 13px 5px rgba(140, 136, 130, 0.15),
       -7px 0  8px 3px rgba(140, 136, 130, 0.28),
           0 0  8px 3px rgba(140, 136, 130, 0.58),
        7px 0 20px 8px rgba(140, 136, 130, 0.16);
    animation: dms-orb-slide 3.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }

  .pricing-split-divider::after {
    top: 50%;
    left: 8%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(0);
    animation: dms-orb-bloom-h 3.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }
}

@keyframes dms-orb-slide {
  0%   { left:  8%; opacity: 0;    transform: translateY(-50%) rotate(45deg) scale(0.4); }
  6%   {            opacity: 1;    transform: translateY(-50%) rotate(45deg) scale(1.15); }
  12%  {            opacity: 1;    transform: translateY(-50%) rotate(45deg) scale(1); }
  83%  {            opacity: 0.75; transform: translateY(-50%) rotate(45deg) scale(1); }
  100% { left: 88%; opacity: 0;    transform: translateY(-50%) rotate(45deg) scale(0.55); }
}

@keyframes dms-orb-bloom-h {
  0%   { left:  8%; opacity: 0;   transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(0); }
  6%   {            opacity: 0.7; transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(1); }
  22%  {            opacity: 0;   transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(2.4); }
  100% { left:  8%; opacity: 0;   transform: translateX(-50%) translateY(-50%) rotate(45deg) scale(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-split-divider::before,
  .pricing-split-divider::after { animation: none; opacity: 0; }
}

/* ═══════════════════════════════════════════════
   GAP SECTION - The Situation + Our Approach
═══════════════════════════════════════════════ */
.gap-section {
  padding: 120px 0;
  background-image: var(--gradient-dark);
}

.gap-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}

.gap-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.gap-eyebrow {
  /* inherits global .eyebrow */
}

.gap-list {
  display: flex;
  flex-direction: column;
}

.gap-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
  transition: border-color 0.25s ease;
}
.gap-item:first-child {
  border-top: 1px solid var(--color-border);
}
.gap-item:hover {
  border-color: rgba(140, 136, 130, 0.25);
}

.gap-num {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: rgba(250, 249, 246, 0.07);
  line-height: 1;
  user-select: none;
  transition: color 0.3s ease;
}
.gap-item:hover .gap-num {
  color: rgba(140, 136, 130, 0.28);
}

.gap-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.gap-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--color-text);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
}

.gap-cat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-ash);
  opacity: 0.55;
  margin: 0;
}

/* ── Problem List (left column of gap section)
   Translated from 21st.dev MorphingCardStack - list layout
   Source: framer-motion list mode, adapted to vanilla CSS + DMS palette
═══════════════════════════════════════════════ */
.prob-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.prob-card {
  position: relative;
  padding: 1.75rem 1.5rem;
  background: rgba(180, 40, 40, 0.05);
  border: 1px solid rgba(200, 60, 60, 0.22);
  border-radius: 12px;
  overflow: hidden;
  transition:
    border-color 0.3s ease,
    background   0.3s ease,
    transform    0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.prob-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 60, 60, 0.22), transparent);
  pointer-events: none;
}
.prob-card:hover {
  border-color: rgba(200, 60, 60, 0.42);
  background: rgba(180, 40, 40, 0.08);
  transform: translateY(-3px);
}

.prob-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: rgba(180, 40, 40, 0.10);
  border: 1px solid rgba(200, 60, 60, 0.22);
  color: rgba(210, 100, 90, 0.85);
  margin-bottom: 1.1rem;
  flex-shrink: 0;
}

.prob-card-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--color-text);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.prob-card-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.75;
  margin: 0;
}

/* ── Approach Cards Grid (right column of gap section) ── */
.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.approach-card {
  position: relative;
  padding: 1.75rem 1.5rem;
  background: rgba(50, 140, 85, 0.05);
  border: 1px solid rgba(60, 155, 95, 0.24);
  border-radius: 12px;
  overflow: hidden;
  transition:
    border-color 0.3s ease,
    background   0.3s ease,
    transform    0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.approach-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(60, 155, 95, 0.30), transparent);
  pointer-events: none;
}
.approach-card:hover {
  border-color: rgba(60, 155, 95, 0.48);
  background: rgba(50, 140, 85, 0.08);
  transform: translateY(-3px);
}

.approach-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: rgba(50, 140, 85, 0.12);
  border: 1px solid rgba(60, 155, 95, 0.28);
  color: rgba(80, 190, 120, 0.85);
  margin-bottom: 1.1rem;
  flex-shrink: 0;
}

.approach-card-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--color-text);
  margin: 0 0 0.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.approach-card-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 600px) {
  .approach-grid { grid-template-columns: 1fr; }
  .prob-list { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .gap-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .gap-col--sol .mcs-wrapper { align-items: center; }
}

@media (max-width: 767px) {
  .gap-section    { padding: 80px 0; }
  .gap-inner      { padding: 0 1.5rem; }
  .gap-item       { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
  .gap-num        { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════
   WHY SECTION - manifesto comparison table
═══════════════════════════════════════════════ */
.why-section {
  padding: 120px 0;
  background-color: var(--color-surface);
}

.why-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.why-intro {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Override old why-heading from dead code */
.why-heading {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-text);
  max-width: 700px;
  margin: 0;
}

.why-heading em {
  font-style: italic;
  color: var(--color-ash);
}

/* Override old why-opening */
.why-opening {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  line-height: 1.7;
  color: var(--color-muted);
  max-width: 560px;
  margin: 0;
  text-align: left;
}

/* Comparison rows */
.why-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.why-rows-header {
  display: grid;
  grid-template-columns: 1fr 3rem 1fr;
  gap: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.why-rows-header span {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: rgba(250, 249, 246, 0.25);
}

.why-rows-header span:last-child {
  color: var(--color-ash);
  opacity: 0.8;
}

.why-row {
  display: grid;
  grid-template-columns: 1fr 3rem 1fr;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}

.why-other {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(232, 232, 232, 0.38);
  font-style: italic;
  margin: 0;
}

.why-row-diamond {
  font-size: 8px;
  color: var(--color-ash);
  opacity: 0.35;
  text-align: center;
  user-select: none;
}

.why-we {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0;
}

@media (max-width: 768px) {
  .why-section  { padding: 80px 0; }
  .why-inner    { padding: 0 1.5rem; gap: 3rem; }
  .why-rows-header { display: none; }

  .why-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.75rem 0;
  }

  .why-row-diamond { display: none; }

  .why-other,
  .why-we {
    position: relative;
    padding: 0.75rem 1rem 0.75rem 1rem;
    padding-top: 1.75rem;
    font-size: 0.875rem;
  }

  .why-other {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }

  .why-other::before {
    content: 'Others';
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(250, 249, 246, 0.25);
  }

  .why-we::before {
    content: 'We';
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ash);
    opacity: 0.8;
  }
}

/* ── Why Builds - numbered list inside why-section ── */
.why-builds {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.why-builds .wwb-list {
  display: flex;
  flex-direction: column;
}

/* ── Why Body - two-column layout for bento + numbered list ──
   minmax(0, ...) not bare fr units: a plain 1fr track has an implicit
   min size of auto (its content's min-content width), not 0. The bento
   tabs use white-space: nowrap so they can scroll horizontally instead
   of wrapping, but that same nowrap content was forcing this grid
   column - and everything inside it, since .bento-card below has
   max-width: none - wider than the viewport at mobile widths, pushing
   the whole page into horizontal overflow. */
.why-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}

.why-body .bento-card {
  max-width: none;
  margin: 0;
}

.why-body .why-builds {
  max-width: none;
  margin: 0;
}

@media (max-width: 960px) {
  .why-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
}

/* ── Visually-hidden utility (AEO paragraphs readable by crawlers, not visitors) ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════
   BENTO CARD - WHY DE MAKERS SPACE
═══════════════════════════════════════════════ */
.bento-card {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.bento-window {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 24px 64px rgba(0,0,0,0.5),
    0 8px 24px rgba(0,0,0,0.25);
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}

.bento-window:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 32px 80px rgba(0,0,0,0.6),
    0 12px 32px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

/* Titlebar */
.bento-titlebar {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
  background: rgba(255,255,255,0.012);
}

.bento-dots {
  display: flex;
  gap: 6px;
}

.bento-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(232,232,232,0.10);
}

.bento-titlebar-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-subtle);
}

/* Body */
.bento-body {
  display: flex;
  height: 440px;
}

/* Sidebar */
.bento-sidebar {
  width: 200px;
  border-right: 1px solid rgba(255,255,255,0.04);
  padding: 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  background: rgba(255,255,255,0.01);
  flex-shrink: 0;
}

/* Animated pill */
.bento-tab-pill {
  position: absolute;
  left: 8px;
  top: 28px;
  width: 2px;
  height: 16px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 10;
}

/* Tab buttons */
.bento-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 8px 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--color-dim);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  transition: color 0.2s ease, background 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

.bento-tab:hover:not(.is-active) {
  color: var(--color-muted);
  background: rgba(255,255,255,0.02);
}

.bento-tab.is-active {
  color: var(--color-text);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.06);
}

.bento-tab svg {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.bento-tab.is-active svg {
  opacity: 1;
}

/* Badge */
.bento-badge {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(250,249,246,0.06);
  color: var(--color-ash);
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.bento-tab.is-active .bento-badge {
  background: rgba(250,249,246,0.10);
  color: var(--color-primary);
  border-color: rgba(250,249,246,0.14);
}

/* Content pane */
.bento-content {
  flex: 1;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

/* Panel header */
.bento-panel-header {
  flex-shrink: 0;
}

.bento-panel-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232,232,232,0.40);
  margin: 0;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.bento-panel-desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--color-dim);
  margin: 4px 0 0;
  line-height: 1.5;
  transition: opacity 0.2s ease;
}

/* Panels container */
.bento-panels {
  position: relative;
  flex: 1;
  min-height: 0;
}

/* Individual panel - hidden by default */
.bento-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(4px);
  pointer-events: none;
  transition:
    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    filter 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bento-panel[hidden] {
  display: none;
}

.bento-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}

/* Bottom fade */
.bento-fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(to top, var(--color-bg) 0%, transparent 100%);
  pointer-events: none;
  z-index: 5;
}

/* ── Stat card ── */
.bp-stat {
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.bp-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-dim);
}

.bp-stat-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

.bp-stat-value {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 2rem;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1;
}

.bp-bar {
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}

.bp-bar-fill {
  height: 100%;
  width: 0;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width 0.85s cubic-bezier(0.25, 0, 0, 1) 0.1s;
}

.bento-panel.is-active .bp-bar-fill {
  width: var(--val);
}

.bp-stat-note {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-dim);
  line-height: 1.5;
  margin: 0;
}

/* ── 2-col mini grid ── */
.bp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bp-mini-card {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bp-mini-value {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}

.bp-mini-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-dim);
}

/* ── List ── */
.bp-list {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  background: rgba(255,255,255,0.01);
}

.bp-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s ease;
}

.bp-list-item:last-child {
  border-bottom: none;
}

.bp-list-item:hover {
  background: rgba(255,255,255,0.025);
}

.bp-list-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,0.12);
}

.bp-list-dot--on {
  background: rgba(232,232,232,0.65);
}

.bp-list-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.bp-list-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
}

.bp-list-role {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-dim);
}

.bp-list-status {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  color: var(--color-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid transparent;
}

.bp-list-status--active {
  color: var(--color-ash);
  background: rgba(140,136,130,0.10);
  border-color: rgba(140,136,130,0.15);
}

/* ── Checklist ── */
.bp-checklist {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.bp-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.bp-check:hover {
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.08);
}

.bp-check-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(250,249,246,0.07);
  border: 1px solid rgba(250,249,246,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-ash);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .bento-body {
    flex-direction: column;
    height: auto;
  }

  .bento-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    gap: 4px;
    scrollbar-width: none;
  }

  .bento-sidebar::-webkit-scrollbar { display: none; }

  .bento-tab-pill { display: none; }

  .bento-tab {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 11px;
    width: auto;
  }

  .bento-content {
    padding: 16px;
    min-height: 240px;
  }

  .bento-panels {
    min-height: 190px;
  }
}

/* ═══════════════════════════════════════════════
   CLIENTS INNER - centred container for clients strip
═══════════════════════════════════════════════ */
.clients-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 768px) {
  .clients-inner { padding: 0 1.5rem; }
}

.proc-wove-outer { background: transparent !important; }


/* ── Hero - journey illustration backdrop ── */
.page-hero {
  position: relative;
  background-image:
    linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.52) 0%,
      rgba(10, 10, 10, 0.74) 55%,
      rgba(10, 10, 10, 0.96) 100%
    ),
    url('assets/journey-with-us.webp');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}

/* ═══════════════════════════════════════════════
   SHARED text (desktop + mobile)
═══════════════════════════════════════════════ */
.proc-wove-sub {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(232, 232, 232, 0.35);
  margin-bottom: 0.35rem;
}

.proc-wove-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  color: var(--color-text);
  line-height: 1.15;
  margin-bottom: 0.6rem;
}

.proc-wove-desc {
  font-family: var(--font-body);
  font-weight: 300;
  /* Scales with viewport like the hero number/title already do (mobile
     overrides this back to a fixed size below 768px - see Mobile
     Refinements). max-width is in `ch`, which is itself relative to
     font-size, so it automatically widens in step with this instead of
     staying a fixed px value while its proportionally-positioned box
     grows around it - that mismatch was the real cause of "how much
     empty space is left" varying so much between screen sizes even
     below the .proc-wove-sticky max-width cap.                        */
  font-size: clamp(0.95rem, 0.57rem + 0.6vw, 1.2rem);
  line-height: 1.8;
  color: var(--color-muted);
  max-width: 42ch;
}

/* ═══════════════════════════════════════════════
   OUTER CONTAINER
═══════════════════════════════════════════════ */
.proc-wove-outer {
  position: relative;
  background: var(--color-bg);
}

/* ═══════════════════════════════════════════════
   MOBILE: static numbered list (default / < 768px)
═══════════════════════════════════════════════ */
.proc-wove-sticky  { display: none; }

.proc-wove-mobile {
  padding: 4rem 1.75rem 5rem;
}

.proc-wove-mobile-hd {
  margin-bottom: 2.75rem;
}

.proc-wove-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

.proc-wove-list-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.proc-wove-list-num {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.75rem;
  color: rgba(232, 232, 232, 0.25);
  line-height: 1;
  flex-shrink: 0;
  min-width: 3ch;
  padding-top: 0.1rem;
}

/* ═══════════════════════════════════════════════
   DESKTOP: sticky wove arc (≥ 768px)
═══════════════════════════════════════════════ */
@media (min-width: 768px) {

  .proc-wove-outer {
    /* 7 steps × ~100 vh each + 100 vh buffer at each end */
    height: 800vh;
  }

  .proc-wove-mobile { display: none; }

  /* ── Sticky full-viewport panel ── */
  /* max-width + centering caps the arc/content system so it stops growing
     with viewport width past a reasonable point - without this, the
     migration slots (all vw/%-based) keep pushing the content block
     further right forever on ultra-wide screens while its own max-width
     stays fixed, so the trailing empty space on the right grows
     unbounded and inconsistently instead of settling at one predictable
     amount. .proc-wove-outer's own background still spans full width
     behind it, so this only affects where the content sits, not the
     section's edge-to-edge dark backdrop.                              */
  .proc-wove-sticky {
    --proc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --proc-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    display: block;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    max-width: 1700px;
    margin: 0 auto;
    overflow: hidden;
  }

  /* ── Arc SVG - only the right half of a large circle is visible.
        The SVG occupies the leftmost ~32 % of the viewport.
        viewBox "0 0 100 200" lets us draw the full S-curve with
        gentle proportions regardless of screen height.            ── */
  .proc-wove-svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 32%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }

  /* ── Brushstroke layers ── */

  /* Halo: very wide, very faint - the outer bleed of a loaded brush */
  .proc-brush-halo {
    fill: none;
    stroke: rgba(255, 255, 255, 0.03);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Wide body: the thick paint mass - moderate opacity, roughened by filter */
  .proc-brush-wide {
    fill: none;
    stroke: rgba(255, 255, 255, 0.07);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Mid pass: second coat, slightly narrower - layered paint depth */
  .proc-brush-mid {
    fill: none;
    stroke: rgba(255, 255, 255, 0.10);
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Thin bristle line: the bright spine - crisp centre of the brushstroke */
  .proc-brush-thin {
    fill: none;
    stroke: rgba(255, 255, 255, 0.24);
    stroke-width: 0.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Dots injected by JS */
  .proc-path-dot {
    fill: rgba(255, 255, 255, 0.2);
    transition: fill 0.26s var(--proc-ease-out), r 0.26s var(--proc-ease-out);
  }

  .proc-path-dot.is-active {
    fill: #E8E8E8;
  }

  /* ── Meta label: "THE PROCESS  1 / 7" ── */
  .proc-wove-meta {
    position: absolute;
    top: calc(var(--nav-h) + 2rem);
    /* starts just right of the arc - a plain % (not vw) so it's a
       consistent proportion of .proc-wove-sticky's own (max-width-capped)
       box at every screen size, instead of scaling with the raw viewport */
    left: 34%;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 10;
  }

  .proc-wove-counter {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    color: rgba(232, 232, 232, 0.28);
  }

  #proc-step-num {
    display: inline-block;
    color: rgba(232, 232, 232, 0.65);
    font-weight: 500;
    transform: translateY(0);
    transition: opacity 0.22s var(--proc-ease-out), transform 0.22s var(--proc-ease-out);
  }

  #proc-step-num.is-fading {
    opacity: 0;
    transform: translateY(-0.2em);
    transition-duration: 0.14s;
    transition-timing-function: var(--proc-ease-in);
  }

  /* ── Ghost numbers ── */
  /* Both ghosts sit OVER the arc area so they feel like they're
     orbiting along the curve, matching the reference image.    */
  .proc-wove-ghost {
    position: absolute;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(3.5rem, 7.5vw, 6rem);
    color: rgba(232, 232, 232, 0.15);
    line-height: 1;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.28s var(--proc-ease-out);
  }

  /* Previous step - upper-left, tilted back */
  .proc-wove-ghost--above {
    top: 12%;
    left: 16%;
    transform: rotate(-8deg);
    opacity: 0;             /* hidden until step ≥ 2 */
  }

  /* Next step - lower-left, more aggressive tilt */
  .proc-wove-ghost--below {
    bottom: 11%;
    left: 8%;
    transform: rotate(-14deg);
    opacity: 1;
  }

  .proc-wove-ghost.is-hidden {
    opacity: 0 !important;
  }

  .proc-wove-ghost.is-fading {
    opacity: 0 !important;
    transition-duration: 0.14s;
    transition-timing-function: var(--proc-ease-in);
  }

  /* ── Active step stage: • 01 Title / Desc ──
        Vertically centred at a fixed offset from the bottom of the
        viewport. Horizontally centred within the zone to the right of
        the arc (34% to near the panel's edge) for all 7 steps - a prior
        version migrated this box rightward across 3 positions to fill
        the empty space, but that tied the box's position to viewport
        width while the description text's readable measure (42ch)
        stayed capped, so how much gap was left over varied noticeably
        between screen sizes no matter how much the numbers were tuned.
        Centering sidesteps that entirely: a centered box is symmetric
        at any width by construction, nothing to tune per-resolution.  */
  .proc-wove-stage {
    position: absolute;
    top: calc(100svh - 435px);
    left: 34%;
    right: 2rem;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    z-index: 5;
  }

  /* Filled bullet - mirrors the active dot on the SVG path */
  .proc-wove-dot-marker {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    border-radius: 50%;
    background: var(--color-text);
    flex-shrink: 0;
  }

  /* Large step number e.g. "01" */
  .proc-wove-hero-num {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(4.5rem, 10vw, 8.5rem);
    color: var(--color-text);
    line-height: 1;
    flex-shrink: 0;
    transform: translateY(0);
    transition: opacity 0.28s var(--proc-ease-out), transform 0.32s var(--proc-ease-out);
  }

  /* Title + description block */
  .proc-wove-text {
    transform: translateY(0);
    transition: opacity 0.28s var(--proc-ease-out), transform 0.32s var(--proc-ease-out);
    min-width: 0;   /* allow flex item to shrink below natural width */
  }

  /* JS adds this class during cross-fade */
  .proc-wove-hero-num.is-fading,
  .proc-wove-text.is-fading {
    opacity: 0;
    transform: translateY(6px);
    transition-duration: 0.15s;
    transition-timing-function: var(--proc-ease-in);
  }

  /* ── Brush-written title + description ──
        Both reveal via a clip-path wipe + traveling ink cursor (JS
        restarts .is-writing on .proc-wove-text every step change) instead
        of a plain fade, echoing the section's own brushstroke motif as an
        interaction. The description starts its wipe 0.07s after the
        title's so it reads as the ink continuing on to the next line,
        not two identical effects firing in lockstep. Number stays on a
        simple opacity fade - the number changing is a fact, not a line
        being written. Uses @keyframes (not transition) so JS can cleanly
        restart on every step by toggling the class off/on with a forced
        reflow between.                                                  */
  /* The cursor is a sibling of the title/desc text (JS overwrites their
     .textContent directly on every step, which would destroy a cursor
     child element) - so each wrap sets font-size explicitly to match its
     own text, letting the cursor's em-based sizing inherit correctly. */
  .proc-wove-title-wrap,
  .proc-wove-desc-wrap {
    position: relative;
    display: block;
  }
  .proc-wove-title-wrap { font-size: clamp(1.25rem, 2.4vw, 1.9rem); }
  .proc-wove-desc-wrap  { font-size: clamp(0.95rem, 0.57rem + 0.6vw, 1.2rem); }
  .proc-wove-title,
  .proc-wove-desc {
    clip-path: inset(0 0 0 0);
  }
  .proc-wove-text.is-writing .proc-wove-title {
    animation: procTitleWipe 0.46s var(--proc-ease-out) both;
  }
  .proc-wove-text.is-writing .proc-wove-desc {
    animation: procTitleWipe 0.5s var(--proc-ease-out) 0.07s both;
  }
  @keyframes procTitleWipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
  }
  .proc-wove-cursor {
    position: absolute;
    top: 0.05em;
    left: 0;
    right: 0;
    height: 0.9em;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
  }
  .proc-wove-cursor::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: var(--color-accent);
    box-shadow: 0 0 8px 1px var(--color-accent-soft);
  }
  .proc-wove-text.is-writing .proc-wove-title-wrap .proc-wove-cursor {
    animation: procCursorTravel 0.46s var(--proc-ease-out) both;
  }
  .proc-wove-text.is-writing .proc-wove-desc-wrap .proc-wove-cursor {
    animation: procCursorTravel 0.5s var(--proc-ease-out) 0.07s both;
  }
  @keyframes procCursorTravel {
    from { transform: scaleX(0); opacity: 1; }
    85%  { opacity: 1; }
    to   { transform: scaleX(1); opacity: 0; }
  }

  /* ── Progress fill ──
        Thin track spanning the right-side content zone. Its scale follows
        continuous scroll progress while the chapters change discretely. */
  .proc-wove-progress {
    position: absolute;
    left: 34%;
    right: 2rem;
    bottom: 14%;
    height: 1px;
    background: rgba(241, 238, 232, 0.06);
    z-index: 4;
  }
  .proc-wove-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: var(--color-accent);
    opacity: 0.4;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.1s linear;
  }

  /* ── Scroll hint ── */
  .proc-scroll-hint {
    position: absolute;
    right: 2rem;
    bottom: calc(14% + 1rem);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(241, 238, 232, 0.58);
    transition: opacity 0.24s var(--proc-ease-in), transform 0.24s var(--proc-ease-in);
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
  }

  .proc-wove-outer.is-started .proc-scroll-hint {
    opacity: 0;
    transform: translateY(6px);
  }

  .proc-scroll-hint-arrow {
    color: var(--color-accent);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0;
    animation: procHintNudge 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }

  @keyframes procHintNudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
  }

}

/* ── Reduced motion ──
      This is the site's single most scroll-intensive experience (a
      pinned 800vh track) - prefers-reduced-motion swaps it for the same
      static list .proc-wove-mobile already uses below 768px, regardless
      of viewport width. initWoveScroll checks this media query itself
      before deciding whether to pin at all (see about.js) - these rules
      are a CSS-only backstop in case JS ever disagrees with that check. */
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .proc-wove-outer { height: auto; }
  .proc-wove-sticky { display: none; }
  .proc-wove-mobile { display: block; }
}


/* ═══════════════════════════════════════════════
   MOBILE REFINEMENTS (≤ 767px)
   Enhances the static step list for small screens.
   Desktop scrollytelling is already handled above.
═══════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Mobile list: tighter horizontal padding, extra bottom
        so content never hides behind the fixed pill nav.    ── */
  .proc-wove-mobile {
    padding: 2.75rem 1.25rem 6rem;
  }

  .proc-wove-mobile-hd {
    margin-bottom: 2rem;
  }

  /* ── Step list: add a vertical timeline thread ── */
  .proc-wove-list {
    position: relative;
    gap: 0;
  }

  /* The thread runs behind the number column from top to bottom */
  .proc-wove-list::before {
    content: '';
    position: absolute;
    left: 1.3rem;     /* centers on the 2.6rem-wide number column */
    top:  3rem;
    bottom: 3rem;
    width: 1px;
    background: linear-gradient(to bottom,
      transparent,
      rgba(232, 232, 232, 0.07) 14%,
      rgba(232, 232, 232, 0.07) 86%,
      transparent
    );
    pointer-events: none;
  }

  /* ── Each step: padding separates items; the thread passes through ── */
  /* Initial hidden state - JS adds .is-visible via IntersectionObserver */
  .proc-wove-list-item {
    padding: 1.5rem 0;
    gap: 1.25rem;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity  0.6s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .proc-wove-list-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Hairline divider between items */
  .proc-wove-list-item + .proc-wove-list-item {
    border-top: 1px solid rgba(232, 232, 232, 0.04);
  }

  /* ── Step number: smaller, centered as a node on the thread ── */
  .proc-wove-list-num {
    font-size: 1.1rem;
    min-width: 2.6rem;
    text-align: center;
    flex-shrink: 0;
    color: rgba(232, 232, 232, 0.22);
    padding-top: 0.1rem;
  }

  /* ── Step body ── */
  .proc-wove-list-body {
    flex: 1;
    min-width: 0;
  }

  /* Remove max-width so description fills available column width */
  .proc-wove-desc {
    max-width: 100%;
    font-size: 0.9375rem;
    line-height: 1.75;
  }

  /* Title: slightly tighter on narrow viewports */
  .proc-wove-title {
    font-size: clamp(1.15rem, 4.5vw, 1.5rem);
    margin-bottom: 0.5rem;
  }

  /* ── Hero image: shift focal point for portrait orientation ── */
  .page-hero {
    background-position: center 30%;
  }
}

/* The mobile list normally reveals as it enters the viewport. Reduced-motion
   users see it immediately, with no opacity or translation transition. */
@media (prefers-reduced-motion: reduce) {
  .proc-wove-list-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .proc-scroll-hint-arrow {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════
   CHAPTER TITLE CARDS - cinematic act-break treatment
   Reveals via the site's existing .scroll-reveal-item +
   IntersectionObserver mechanism (global.js) - this only
   adds the transition rules keyed off the .revealed class
   that mechanism already toggles.
═══════════════════════════════════════════════ */
.ch-title-card {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
  margin: 4rem 0;
}

.ch-title-card-heading {
  position: relative;
  z-index: 101;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-align: center;
  padding: 0 1.5rem;
}

.ch-title-card-heading em {
  color: var(--color-primary);
  font-style: italic;
}

.ch-title-card.revealed .cn-letterbox {
  height: 8vh;
  transition: height 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-title-card.revealed .cn-grain {
  opacity: 0.4;
  transition: opacity 1.4s ease;
}

.ch-title-card.revealed .cn-vignette {
  opacity: 1;
  transition: opacity 1.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ch-title-card .cn-letterbox,
  .ch-title-card .cn-grain,
  .ch-title-card .cn-vignette {
    transition: none !important;
  }
}