/* Homepage finishing layer: editorial surfaces and purposeful, finite motion. */
.reveal-chapter-inner {
  padding: clamp(24px, 3.5vw, 48px) !important;
  border-left: 2px solid var(--color-signal-yellow) !important;
  background: rgba(10, 14, 23, 0.76) !important;
  box-shadow: none !important;
}

.reveal-chapter h1 {
  font-size: clamp(2.2rem, 4.2vw, 4rem);
  text-wrap: balance;
}

.launch-banner { margin-top: 74px; }
.launch-banner p { color: rgba(255, 255, 255, 0.85) !important; }
.reveal-chapter .btn-primary span { color: #fff; background: #000; }
.filter-btn.is-active:hover { color: var(--color-bone-white) !important; }

/* Hide outgoing panels immediately so initial activation cannot stack the text. */
.reveal-experience.is-active .reveal-chapter:not(.is-current) { visibility: hidden; }
.reveal-experience.is-active .reveal-chapter.is-current { visibility: visible; }
.reveal-experience.is-active .reveal-sticky { top: 74px; height: calc(100svh - 74px); }
.menu-toggle { display: none !important; }
@media (max-width: 900px) { .menu-toggle { display: inline-flex !important; } }
@media (max-width: 640px) {
  .nav-shell > .nav-cta { display: none; }
  .brand-mark { flex: 1; }
  .brand-mark strong { white-space: nowrap; font-size: 0.95rem; }
}

.reveal-chapter-actions + .reveal-scroll-cue {
  margin-top: 24px !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.12em;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal-experience.is-active .reveal-chapter.is-current .reveal-chapter-inner {
    animation: chapter-arrive 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes chapter-arrive {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: none; }
}

.services-grid { counter-reset: studio-service; }
.service-card { counter-increment: studio-service; overflow: hidden; }
.service-card::before {
  content: "0" counter(studio-service);
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.06em;
  opacity: 0.16;
  pointer-events: none;
}
.service-card .card-kicker { padding-right: 64px; color: #333; }
.service-card:nth-child(3) { background: #f6ebbd; }
.service-card > a { min-height: 48px; }

/* Four tiers share a row on large screens, then collapse to two and one. */
.pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.price-card { border-radius: 0 !important; }
.price-card.featured,
.price-card.featured:hover { transform: none !important; box-shadow: none !important; }
.price-card.featured .btn { background: var(--color-bone-white) !important; }

.project-tile,
.service-card,
.price-card,
.feature-card { will-change: auto; transform-style: flat; }
.project-tile:hover,
.service-card:hover,
.price-card:hover,
.feature-card:hover { box-shadow: none !important; }
.service-card::after { display: none; }

:is(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--color-forest-teal);
  outline-offset: 5px;
}
.reveal-experience :is(a, button):focus-visible { outline-color: var(--color-signal-yellow); }

@media (min-width: 1200px) {
  .pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .price-card { padding: 24px; }
}

@media (max-width: 760px) {
  /* The pinned offer badge keeps the promotion available without crowding the hero. */
  .launch-banner { display: none; }
  .pricing-grid { grid-template-columns: 1fr !important; }
  .reveal-chapter { padding: 32px 16px; }
  .reveal-chapter-inner { padding: 24px 20px !important; }
  .reveal-chapter h1,
  .reveal-chapter h2 { font-size: clamp(1.75rem, 7.5vw, 2.6rem); }
  .reveal-chapter p { font-size: 0.95rem !important; }
  .reveal-chapter-actions { gap: 10px; }
  .reveal-chapter-actions .btn { width: auto; min-height: 48px; padding: 12px 18px !important; }
  .work-section { padding: 64px 0 !important; }
  .work-section .section-intro { margin-bottom: 28px !important; }
  .project-tile-preview .tile-preview-media { height: auto !important; aspect-ratio: 16 / 10; }
}

/* Short screens use normal document flow, avoiding clipped sticky chapters. */
@media (max-height: 600px) {
  .reveal-experience.is-active { height: auto !important; }
  .reveal-experience.is-active .reveal-sticky { position: relative; height: auto; }
  .reveal-experience.is-active .reveal-canvas { display: none; }
  .reveal-experience.is-active .reveal-chapters { position: relative; }
  .reveal-experience.is-active .reveal-chapter { position: relative; opacity: 1; pointer-events: auto; }
  .reveal-experience.is-active .reveal-chapter:not(.is-current) { visibility: visible; }
  .reveal-experience.is-active :is(.reveal-progress, .reveal-drawer-toggle, .reveal-drawer) { display: none; }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .project-tile:hover,
  .service-card:hover,
  .price-card:hover,
  .btn:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring, .cursor-badge { display: none !important; }
  .marquee-track { animation: none !important; }
  .reveal-chapter-inner { backdrop-filter: none !important; }
  .reveal-experience.is-active .reveal-chapter:not(.is-current) { visibility: visible; }
  .reveal-experience.is-active .reveal-sticky { height: auto; }
}