/* ============================================================================
   flair.css
   The visual masterpiece layer. Lighting, 3D card tilt, scroll reveals,
   cursor-spotlight, animated CTAs. Everything wrapped in prefers-reduced-motion
   so the 40-62 buyer with vestibular dysfunction (35% per Agrawal NHANES)
   never sees a single pixel of ambient motion.
   ============================================================================ */

/* ---------- 1. CURSOR SPOTLIGHT (hero only, desktop only) ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .hero {
    --mx: 50%;
    --my: 30%;
  }
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      circle 360px at var(--mx) var(--my),
      rgba(184, 134, 47, 0.10) 0%,
      rgba(184, 134, 47, 0.04) 30%,
      transparent 60%
    );
    transition: opacity 240ms var(--ease-soft);
    z-index: 0;
  }
  .hero > * { position: relative; z-index: 1; }
}

/* ---------- 2. SCROLL REVEALS (opacity + 6px translate, ≤300ms) ---------- */
.reveal-up,
.reveal-fade {
  opacity: 1;
  transform: none;
  transition: opacity 320ms var(--ease-soft), transform 320ms var(--ease-soft);
}
@media (prefers-reduced-motion: no-preference) {
  .reveal-up { opacity: 0; transform: translateY(8px); }
  .reveal-fade { opacity: 0; }
  .reveal-up.in,
  .reveal-fade.in {
    opacity: 1;
    transform: translateY(0);
  }
}

/* stagger children inside a .reveal-stagger group */
@media (prefers-reduced-motion: no-preference) {
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 320ms var(--ease-soft), transform 320ms var(--ease-soft);
  }
  .reveal-stagger.in > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay:   0ms; }
  .reveal-stagger.in > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay:  60ms; }
  .reveal-stagger.in > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 120ms; }
  .reveal-stagger.in > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
  .reveal-stagger.in > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
  .reveal-stagger.in > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
  .reveal-stagger.in > *:nth-child(n+7) { opacity: 1; transform: translateY(0); transition-delay: 360ms; }
}

/* ---------- 3. 3D CARD TILT (perspective + rotateX/Y on hover, ≤3°) ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .tier,
  .testimonial,
  .work-list .case,
  .service-card,
  .plan-step,
  .stack-list .layer {
    transform-style: preserve-3d;
    transition: transform 240ms var(--ease-quick), box-shadow 240ms var(--ease-quick);
    will-change: transform;
  }
  .tier:hover,
  .testimonial:hover,
  .work-list .case:hover,
  .service-card:hover,
  .plan-step:hover,
  .stack-list .layer:hover {
    transform: translateY(-3px) rotateX(0.4deg) rotateY(-0.4deg);
    box-shadow: 0 12px 32px -16px rgba(8, 26, 45, 0.18);
  }
  /* featured tier already has uplift; just amplify on hover */
  .tier.featured:hover {
    transform: translateY(-15px) rotateX(0.4deg) rotateY(-0.4deg);
    box-shadow: 0 20px 44px -16px rgba(194, 80, 43, 0.45);
  }
}

/* ---------- 4. CTA GLOW (terracotta button) ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .btn-primary::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: radial-gradient(circle 80px at var(--bx, 50%) 50%,
      rgba(255, 200, 150, 0.45), transparent 70%);
    opacity: 0;
    transition: opacity 200ms var(--ease-soft);
    z-index: -1;
    border-radius: inherit;
  }
  .btn-primary:hover::before { opacity: 1; }
}

/* ---------- 5. SCROLL PROGRESS BAR — animated shine ---------- */
@media (prefers-reduced-motion: no-preference) {
  .scroll-progress {
    background: linear-gradient(
      90deg,
      var(--terracotta) 0%,
      var(--gold) 50%,
      var(--terracotta) 100%
    );
    background-size: 200% 100%;
    animation: scroll-shine 6s linear infinite;
  }
  @keyframes scroll-shine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
}

/* ---------- 6. HERO ILLUSTRATION — animated smoking CRT ---------- */
.hero-illustration {
  width: 100%;
  max-width: 480px;
  margin: var(--s5) auto 0;
  display: block;
}
.hero-illustration .smoke {
  fill: rgba(31, 41, 51, 0.18);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-illustration .smoke-wisp {
    animation: smoke-rise 3.6s ease-out infinite;
    transform-origin: bottom center;
  }
  .hero-illustration .smoke-wisp:nth-child(1) { animation-delay: 0s; }
  .hero-illustration .smoke-wisp:nth-child(2) { animation-delay: 0.8s; }
  .hero-illustration .smoke-wisp:nth-child(3) { animation-delay: 1.6s; }
  @keyframes smoke-rise {
    0%   { transform: translateY(0)   scale(1)   ; opacity: 0.0; }
    20%  { opacity: 0.6; }
    100% { transform: translateY(-72px) scale(1.6); opacity: 0; }
  }
  .hero-illustration .screen-text {
    animation: dollar-cycle 4.2s steps(3, jump-none) infinite;
  }
  @keyframes dollar-cycle {
    0%, 30%   { opacity: 1; }
    33%, 63%  { opacity: 1; }
    66%, 100% { opacity: 1; }
  }
  .hero-illustration .screen-flicker {
    animation: flicker 5s steps(8, end) infinite;
  }
  @keyframes flicker {
    0%, 96%, 98%, 100% { opacity: 1; }
    97%                { opacity: 0.6; }
    99%                { opacity: 0.85; }
  }
  .hero-illustration .coin {
    animation: coin-drop 2.8s ease-in infinite;
    transform-origin: center;
  }
  .hero-illustration .coin:nth-child(1) { animation-delay: 0s; }
  .hero-illustration .coin:nth-child(2) { animation-delay: 0.9s; }
  .hero-illustration .coin:nth-child(3) { animation-delay: 1.6s; }
  @keyframes coin-drop {
    0%   { transform: translateY(-4px); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(40px); opacity: 0; }
  }
}

/* ---------- 7. ENGINE DIAGRAM — isometric layered tiers ---------- */
.engine-orbital {
  display: block;
  margin: var(--s9) auto;
  max-width: 720px;
  width: 100%;
  filter: drop-shadow(0 8px 32px rgba(8, 26, 45, 0.18));
}
@media (prefers-reduced-motion: no-preference) {
  .engine-orbital .ring {
    transform-origin: center;
    transform-box: fill-box;
    animation: ring-rotate 60s linear infinite;
  }
  .engine-orbital .ring--inner   { animation-duration: 40s; animation-direction: reverse; }
  .engine-orbital .ring--mid     { animation-duration: 60s; }
  .engine-orbital .ring--outer   { animation-duration: 90s; animation-direction: reverse; }
  @keyframes ring-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .engine-orbital .core-glow {
    animation: core-pulse 4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
  }
  @keyframes core-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1.0; transform: scale(1.06); }
  }
}

/* ---------- 8. ANSWER CAPSULE — subtle inset shadow + warm tint ---------- */
.answer-capsule {
  position: relative;
  background:
    linear-gradient(180deg, var(--card) 0%, var(--paper) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 0 rgba(8, 26, 45, 0.06);
}
.answer-capsule::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--terracotta) 0%, var(--gold) 100%);
  border-radius: 2px;
}

/* ---------- 9. FOUNDER PHOTO — stop-staring easter egg ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .photo-frame img {
    transition: transform 320ms var(--ease-soft), filter 320ms var(--ease-soft);
  }
  .photo-frame:hover img {
    transform: scale(1.015);
    filter: brightness(1.04) contrast(1.02);
  }
}

/* ---------- 10. PAIN ROW HOVER — cost wiggles + ouch tooltip ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .pain-row .cost {
    transition: transform 200ms var(--ease-quick);
    cursor: help;
    position: relative;
  }
  .pain-row:hover .cost {
    transform: rotate(-1.5deg) scale(1.05);
    color: var(--terracotta-2);
  }
  .pain-row .cost::after {
    content: 'ouch.';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--navy);
    color: var(--paper);
    padding: 4px 10px;
    border-radius: var(--r1);
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms, transform 200ms;
    white-space: nowrap;
  }
  .pain-row:hover .cost::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ---------- 11. EASTER EGG — founder note overlay ---------- */
.thanks-egg {
  position: fixed;
  bottom: var(--s5);
  right: var(--s5);
  max-width: 320px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: var(--r2);
  padding: var(--s5);
  box-shadow: 0 12px 40px -8px rgba(8, 26, 45, 0.22);
  font-family: var(--f-display);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  z-index: var(--z-overlay);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 320ms var(--ease-quick), opacity 320ms;
}
.thanks-egg.show {
  transform: translateY(0);
  opacity: 1;
}
.thanks-egg .sig {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--navy);
  margin-top: var(--s3);
  font-size: 0.9375rem;
}
.thanks-egg button {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: 0;
  font-size: 1.25rem;
  color: var(--ink-2);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: background var(--t-fast);
}
.thanks-egg button:hover { background: var(--paper-2); }

/* ---------- 12. KONAMI CODE — confetti seal celebration ---------- */
.konami-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
  display: none;
}
.konami-overlay.on { display: block; }
.konami-overlay .konami-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 220px;
  height: 220px;
  background: var(--navy);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 4rem;
  box-shadow: 0 30px 80px -20px rgba(8, 26, 45, 0.6);
  animation: konami-pop 1.8s var(--ease-quick) forwards;
}
.konami-overlay.on .konami-seal { display: grid; }
@keyframes konami-pop {
  0%   { transform: translate(-50%, -50%) scale(0)   rotate(-30deg); opacity: 0; }
  25%  { transform: translate(-50%, -50%) scale(1.1) rotate(0deg);   opacity: 1; }
  75%  { transform: translate(-50%, -50%) scale(1)   rotate(0deg);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.4) rotate(0deg);   opacity: 0; }
}

/* ---------- 13. AUDIT TERMINAL TYPEWRITER ---------- */
.terminal-body .cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--terracotta);
  vertical-align: text-bottom;
  margin-left: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .terminal-body .cursor {
    animation: blink 1s steps(2) infinite;
  }
  @keyframes blink {
    0%, 50%   { opacity: 1; }
    50.1%, 100% { opacity: 0; }
  }
}

/* ---------- 14. SECTION DEPTH — subtle gradient overlay on bands ---------- */
.section-empathy::after,
.section-plan::after,
.section-faq::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(184, 134, 47, 0.05), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(14, 42, 71, 0.05), transparent 60%);
  z-index: 0;
}
.section-empathy > *,
.section-plan > *,
.section-faq > * {
  position: relative;
  z-index: 1;
}

/* ---------- 15. PROOF TESTIMONIAL — quote-mark accent ---------- */
.testimonial blockquote {
  position: relative;
  padding-left: var(--s6);
}
.testimonial blockquote::before {
  content: '\201C';
  position: absolute;
  left: -8px;
  top: -28px;
  font-family: var(--f-display);
  font-size: 5rem;
  color: var(--gold);
  opacity: 0.35;
  line-height: 1;
  font-weight: 700;
}

/* ---------- 16. NAV BURGER for mobile — animated ---------- */
@media (max-width: 1023px) {
  nav.site .nav-cta { padding-left: var(--s4); padding-right: var(--s4); font-size: 0.875rem; }
}

/* ============================================================================
   CINEMA LAYER — over-the-top lighting & depth, motion-safe.
   Editorial maximalism: aurora gradients, gold-leaf shimmer, halo glow on H1,
   inner bloom on cards, animated mesh closer, paper grain, magnetic CTAs.
   Every effect gated behind prefers-reduced-motion.
   ============================================================================ */

/* ---------- 17. PAPER GRAIN OVERLAY (whole site) ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.08;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0 0.30 0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* ---------- 18. HERO AURORA — slow breathing mesh background ---------- */
.hero {
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(184, 134, 47, 0.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 80%, rgba(194, 80, 43, 0.10), transparent 60%),
    radial-gradient(ellipse 90% 70% at 60% 110%, rgba(47, 93, 58, 0.08), transparent 60%),
    var(--paper);
  background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: aurora-shift 18s ease-in-out infinite alternate; }
  @keyframes aurora-shift {
    0%   { background-position: 0% 0%, 100% 100%, 50% 100%, 0 0; }
    50%  { background-position: 30% 20%, 70% 80%, 60% 90%, 0 0; }
    100% { background-position: 60% 40%, 40% 60%, 70% 80%, 0 0; }
  }
}

/* ---------- 19. HERO H1 HALO — warm bleed behind the headline ---------- */
.hero h1 {
  position: relative;
}
.hero h1::before {
  content: '';
  position: absolute;
  inset: -20% -10% -10% -10%;
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%, rgba(184, 134, 47, 0.22), transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 50%, rgba(194, 80, 43, 0.18), transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1::before {
    animation: halo-breathe 7s ease-in-out infinite alternate;
  }
  @keyframes halo-breathe {
    0%   { opacity: 0.65; transform: scale(1); }
    100% { opacity: 1.0;  transform: scale(1.06); }
  }
}

/* H1 itself: gradient ink + subtle warm ink glow */
.hero h1 {
  background: linear-gradient(180deg, var(--ink) 0%, #2D3742 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--terracotta-2) 0%, var(--terracotta) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 24px rgba(194, 80, 43, 0.18);
}

/* ---------- 20. STAT NUMBERS — gold-leaf shimmer ---------- */
.counter-cell .num,
.proof-num,
.stat .num,
.tier .price,
.anchor-card .anchor-price .price-num,
.engine-hero .price-block .price {
  background: linear-gradient(
    100deg,
    var(--gold-text) 0%,
    var(--gold-text) 30%,
    #D4A23E 45%,
    #F0CB60 50%,
    #D4A23E 55%,
    var(--gold-text) 70%,
    var(--gold-text) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .counter-cell .num,
  .proof-num,
  .stat .num,
  .tier .price,
  .anchor-card .anchor-price .price-num,
  .engine-hero .price-block .price {
    animation: gold-leaf 6s linear infinite;
  }
  @keyframes gold-leaf {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
}
/* override inside dark anchor card so it stays bright */
.anchor-card .anchor-price .price-num {
  background: linear-gradient(100deg, #D4A23E 0%, #F4D275 50%, #D4A23E 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.engine-hero .price-block .price {
  background: linear-gradient(100deg, #D4A23E 0%, #F4D275 50%, #D4A23E 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 21. FEATURED TIER — internal warm bloom + gold rim ---------- */
.tier.featured {
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(194, 80, 43, 0.18), transparent 70%),
    linear-gradient(180deg, var(--card) 0%, var(--terracotta-soft) 100%);
  border: 2px solid var(--terracotta);
  box-shadow:
    0 0 0 1px rgba(194, 80, 43, 0.1) inset,
    0 12px 32px -16px rgba(194, 80, 43, 0.45),
    0 0 80px -20px rgba(184, 134, 47, 0.4);
}
.tier.featured::after {
  background: linear-gradient(90deg, var(--gold) 0%, var(--terracotta) 50%, var(--gold) 100%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .tier.featured::after {
    animation: gold-leaf 4s linear infinite;
  }
}

/* ---------- 22. ANCHOR CARD — depth + sweep light on top stripe ---------- */
.anchor-card {
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(184, 134, 47, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(47, 93, 58, 0.14), transparent 60%),
    var(--navy);
  box-shadow:
    inset 0 1px 0 rgba(245, 239, 230, 0.06),
    0 24px 60px -20px rgba(8, 26, 45, 0.45);
}
.anchor-card::before {
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .anchor-card::before { animation: gold-leaf 5s linear infinite; }
}

/* ---------- 23. CLOSER — animated mesh gradient ---------- */
.section-closer {
  background:
    radial-gradient(ellipse 60% 80% at 20% 20%, rgba(184, 134, 47, 0.22), transparent 60%),
    radial-gradient(ellipse 80% 60% at 90% 80%, rgba(194, 80, 43, 0.20), transparent 60%),
    radial-gradient(ellipse 70% 70% at 50% 100%, rgba(47, 93, 58, 0.18), transparent 60%),
    var(--navy-deep);
  background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .section-closer { animation: aurora-shift 22s ease-in-out infinite alternate; }
}
.section-closer h2 .accent {
  background: linear-gradient(135deg, #B8862F 0%, #F0CB60 50%, #B8862F 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .section-closer h2 .accent { animation: gold-leaf 6s linear infinite; }
}

/* ---------- 24. FOOTER AURORA ---------- */
footer.site {
  position: relative;
  background:
    radial-gradient(ellipse 60% 80% at 10% 0%, rgba(184, 134, 47, 0.12), transparent 60%),
    radial-gradient(ellipse 70% 70% at 100% 100%, rgba(47, 93, 58, 0.12), transparent 60%),
    var(--navy-deep);
}

/* ---------- 25. CTA BUTTON — premium gradient + warm rim light ---------- */
.btn-primary {
  background:
    linear-gradient(180deg, var(--terracotta) 0%, var(--terracotta-2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 8px 24px -8px rgba(194, 80, 43, 0.4),
    0 0 0 0 rgba(184, 134, 47, 0);
  transition:
    transform 200ms var(--ease-quick),
    box-shadow 240ms var(--ease-quick),
    background 200ms;
  position: relative;
  letter-spacing: 0.02em;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #D5663A 0%, var(--terracotta-2) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 12px 32px -8px rgba(194, 80, 43, 0.55),
    0 0 0 8px rgba(184, 134, 47, 0.18);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* CTA shimmer sweep */
@media (prefers-reduced-motion: no-preference) {
  .btn-primary::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -100%;
    width: 60%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 600ms var(--ease-quick);
    pointer-events: none;
  }
  .btn-primary:hover::after { left: 130%; }
}

/* ---------- 26. PHOTO FRAME — cinematic rim light ---------- */
.photo-frame {
  position: relative;
  background: var(--card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 0 rgba(0, 0, 0, 0.04),
    0 24px 48px -16px rgba(8, 26, 45, 0.18);
}
.photo-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 220, 160, 0.18), transparent 55%);
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: var(--r2);
  z-index: 2;
}
.photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(184, 134, 47, 0.14);
  border-radius: var(--r2);
  pointer-events: none;
}

/* ---------- 27. SECTION RIM LIGHTS ---------- */
.section-problem,
.section-solution,
.section-pricing,
.section-proof {
  position: relative;
}
.section-problem::before,
.section-solution::before,
.section-pricing::before,
.section-proof::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 30%;
  background: radial-gradient(ellipse 80% 60% at 100% 50%, rgba(184, 134, 47, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.section-problem > *,
.section-solution > *,
.section-pricing > *,
.section-proof > * {
  position: relative;
  z-index: 1;
}

/* ---------- 28. ANSWER CAPSULE — premium parchment with inner glow ---------- */
.answer-capsule {
  background:
    linear-gradient(180deg, var(--card) 0%, var(--paper) 100%),
    radial-gradient(ellipse 60% 100% at 0% 50%, rgba(184, 134, 47, 0.08), transparent 60%);
  background-blend-mode: normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 16px -8px rgba(8, 26, 45, 0.10),
    0 1px 0 rgba(8, 26, 45, 0.04);
  border-left: 0;
  padding-left: var(--s6);
  position: relative;
}
.answer-capsule::before {
  content: '';
  position: absolute;
  top: var(--s2); bottom: var(--s2); left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--terracotta) 0%, var(--gold) 100%);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(194, 80, 43, 0.4);
}

/* ---------- 29. ENGINE ORBITAL — sweep light arc ---------- */
.engine-orbital {
  filter: drop-shadow(0 24px 60px rgba(8, 26, 45, 0.28));
}

/* ---------- 30. ANIMATED STRIPE DIVIDERS between sections ---------- */
.section-empathy,
.section-plan,
.section-guarantee,
.section-faq {
  position: relative;
}
.section-empathy::before,
.section-plan::before,
.section-guarantee::before,
.section-faq::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--gold) 20%,
    var(--terracotta) 50%,
    var(--forest) 80%,
    transparent 100%);
  background-size: 200% 100%;
  opacity: 0.55;
  z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
  .section-empathy::before,
  .section-plan::before,
  .section-guarantee::before,
  .section-faq::before {
    animation: stripe-flow 12s linear infinite;
  }
  @keyframes stripe-flow {
    0% { background-position: 0% 0; }
    100% { background-position: 200% 0; }
  }
}

/* ---------- 31. ENGINE HERO — backdrop animated ---------- */
.engine-hero {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(184, 134, 47, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(194, 80, 43, 0.14), transparent 60%),
    radial-gradient(ellipse 70% 70% at 50% 100%, rgba(47, 93, 58, 0.12), transparent 60%),
    var(--navy-deep);
  background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .engine-hero { animation: aurora-shift 24s ease-in-out infinite alternate; }
}

/* ---------- 32. FOUNDER CAPTION — gold-leaf treatment ---------- */
.photo-frame .caption {
  background:
    linear-gradient(180deg, rgba(8, 26, 45, 0.92), rgba(8, 26, 45, 0.78));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 134, 47, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(245, 239, 230, 0.08),
    0 4px 12px -4px rgba(8, 26, 45, 0.4);
}

/* ---------- 33. CARD INNER BLOOM on hover ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .service-card,
  .tier,
  .testimonial,
  .work-list .case,
  .stack-list .layer {
    position: relative;
    overflow: hidden;
  }
  .service-card::before,
  .tier::before,
  .testimonial::before,
  .work-list .case::before,
  .stack-list .layer::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: radial-gradient(circle 280px at var(--cx, 50%) var(--cy, 0%),
      rgba(184, 134, 47, 0.10),
      transparent 60%);
    opacity: 0;
    transition: opacity 240ms;
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
  }
  .service-card > *,
  .tier > *,
  .testimonial > *,
  .work-list .case > *,
  .stack-list .layer > * {
    position: relative;
    z-index: 1;
  }
  .service-card:hover::before,
  .tier:hover::before,
  .testimonial:hover::before,
  .work-list .case:hover::before,
  .stack-list .layer:hover::before {
    opacity: 1;
  }
  .tier.featured::before {
    /* don't override the gold rim ::before on featured */
    display: none;
  }
}

/* ---------- 34. NWA / SOMO MAP styles (added to about + closer) ---------- */
.nwa-map {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: var(--s6) auto;
}
@media (prefers-reduced-motion: no-preference) {
  .nwa-map .pulse-dot {
    transform-origin: center;
    transform-box: fill-box;
    animation: dot-pulse 2.4s ease-in-out infinite;
  }
  .nwa-map .pulse-dot:nth-child(2)  { animation-delay: 0.3s; }
  .nwa-map .pulse-dot:nth-child(3)  { animation-delay: 0.6s; }
  .nwa-map .pulse-dot:nth-child(4)  { animation-delay: 0.9s; }
  .nwa-map .pulse-dot:nth-child(5)  { animation-delay: 1.2s; }
  .nwa-map .pulse-dot:nth-child(6)  { animation-delay: 1.5s; }
  .nwa-map .pulse-dot:nth-child(7)  { animation-delay: 0.0s; }
  .nwa-map .pulse-dot:nth-child(8)  { animation-delay: 0.4s; }
  .nwa-map .pulse-dot:nth-child(9)  { animation-delay: 0.8s; }
  .nwa-map .pulse-dot:nth-child(10) { animation-delay: 1.2s; }
  .nwa-map .ring-pulse {
    transform-origin: center;
    transform-box: fill-box;
    animation: ring-grow 2.4s ease-out infinite;
  }
  .nwa-map .ring-pulse:nth-child(odd) { animation-delay: 1.2s; }
  @keyframes dot-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.7; }
  }
  @keyframes ring-grow {
    0%   { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(2.6); opacity: 0; }
  }
}

/* ---------- 35. NAV — premium glass + ambient bottom rim ---------- */
nav.site {
  background: rgba(245, 239, 230, 0.72);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid rgba(217, 207, 190, 0.6);
  box-shadow:
    0 1px 0 rgba(184, 134, 47, 0.06),
    0 8px 24px -16px rgba(8, 26, 45, 0.18);
}

/* ---------- 36. HEADLINE H2 — subtle warm gradient on key sections ---------- */
.section-pricing .section-head h2,
.section-solution .section-head h2 {
  background: linear-gradient(180deg, var(--ink) 0%, #2D3742 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 37. SCARCITY DOT — radiating ring ---------- */
.scarcity .pulse {
  position: relative;
  background: var(--terracotta);
  box-shadow: 0 0 0 0 var(--terracotta);
}
@media (prefers-reduced-motion: no-preference) {
  .scarcity .pulse {
    animation: scarcity-radiate 2s ease-out infinite;
  }
  @keyframes scarcity-radiate {
    0%   { box-shadow: 0 0 0 0 rgba(194, 80, 43, 0.6); }
    70%  { box-shadow: 0 0 0 18px rgba(194, 80, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(194, 80, 43, 0); }
  }
}

/* ---------- 38. STATS NUMBER COUNT-UP — apply to .num inside [data-count] ---------- */
.counter-cell { position: relative; overflow: hidden; }
.counter-cell::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -120%;
  width: 60%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 220, 160, 0.18) 50%,
    transparent 100%);
  pointer-events: none;
  transition: left 1.2s var(--ease-quick);
}
.counter-cell.in::after { left: 220%; }

/* ---------- 39. ENGINE STACK CARDS — number-led, depth ---------- */
.engine-stack .service-card {
  position: relative;
  overflow: hidden;
}
.engine-stack .service-card .start-at {
  display: inline-block;
  background: var(--navy);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: var(--r1);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  margin-bottom: var(--s3);
}

/* ---------- 40. AUDIT TERMINAL — depth + glow ---------- */
.terminal {
  background:
    radial-gradient(ellipse 60% 60% at 30% 0%, rgba(184, 134, 47, 0.18), transparent 70%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(47, 93, 58, 0.18), transparent 70%),
    var(--navy-deep);
  box-shadow:
    inset 0 1px 0 rgba(245, 239, 230, 0.06),
    0 24px 60px -20px rgba(8, 26, 45, 0.45),
    0 0 0 1px rgba(184, 134, 47, 0.12);
}

/* ---------- 41. KICKERS — gold bullet ornament ---------- */
.kicker::before {
  content: '◆ ';
  color: var(--gold);
  margin-right: 4px;
  font-size: 0.7em;
  vertical-align: 0.1em;
}

/* ---------- 42. HERO ILLUSTRATION — drop shadow ---------- */
.hero-illustration {
  filter: drop-shadow(0 20px 40px rgba(8, 26, 45, 0.18));
}

/* ---------- 43. ZOOM-IN ON FIRST PAINT (motion-allowed only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1,
  .hero .lede {
    animation: hero-rise 720ms var(--ease-soft) both;
  }
  .hero h1 { animation-delay: 80ms; }
  .hero .lede { animation-delay: 240ms; }
  .hero .hero-cta-row { animation: hero-rise 720ms var(--ease-soft) both; animation-delay: 360ms; }
  .hero .trust-strip { animation: hero-rise 720ms var(--ease-soft) both; animation-delay: 480ms; }
  .hero-side { animation: hero-pop 760ms var(--ease-quick) both; animation-delay: 200ms; }

  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes hero-pop {
    from { opacity: 0; transform: scale(0.985) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
}

/* ---------- 44. BREADCRUMBS — premium bar ---------- */
.breadcrumbs {
  background:
    linear-gradient(180deg, var(--paper-2) 0%, rgba(235, 227, 212, 0.8) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(217, 207, 190, 0.6);
  box-shadow: 0 1px 0 rgba(184, 134, 47, 0.06);
}

/* ---------- 45. NAV BURGER (mobile menu) — animated bars ---------- */
nav.site .nav-burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--rule);
  background: transparent;
  border-radius: var(--r1);
  position: relative;
  margin-left: auto;
  cursor: pointer;
}
nav.site .nav-burger span {
  display: block;
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform 240ms, top 240ms, opacity 200ms;
}
nav.site .nav-burger span:nth-child(1) { top: 14px; }
nav.site .nav-burger span:nth-child(2) { top: 21px; }
nav.site .nav-burger span:nth-child(3) { top: 28px; }
nav.site .nav-burger.open span:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); }
nav.site .nav-burger.open span:nth-child(2) { opacity: 0; }
nav.site .nav-burger.open span:nth-child(3) { top: 21px; transform: translateX(-50%) rotate(-45deg); }
@media (max-width: 1023px) {
  nav.site .nav-burger { display: block; }
}

/* mobile slide-down menu when burger is open */
@media (max-width: 1023px) {
  nav.site .links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: stretch;
    padding: var(--s4) var(--s5);
    gap: 0;
    box-shadow: 0 24px 60px -24px rgba(8, 26, 45, 0.2);
  }
  nav.site .links.open { display: flex; }
  nav.site .links a {
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--rule);
    font-size: 1.0625rem;
  }
  nav.site .links a:last-child { border-bottom: 0; }
}

/* ---------- 46. SECTION CLOSER STAR FIELD ---------- */
@media (prefers-reduced-motion: no-preference) {
  .section-closer::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(1px 1px at 12% 18%, rgba(184, 134, 47, 0.45), transparent 50%),
      radial-gradient(1px 1px at 24% 38%, rgba(245, 239, 230, 0.4), transparent 50%),
      radial-gradient(1.5px 1.5px at 41% 12%, rgba(184, 134, 47, 0.5), transparent 50%),
      radial-gradient(1px 1px at 60% 24%, rgba(245, 239, 230, 0.32), transparent 50%),
      radial-gradient(1px 1px at 75% 18%, rgba(184, 134, 47, 0.35), transparent 50%),
      radial-gradient(1px 1px at 88% 32%, rgba(245, 239, 230, 0.36), transparent 50%),
      radial-gradient(1.5px 1.5px at 18% 60%, rgba(184, 134, 47, 0.4), transparent 50%),
      radial-gradient(1px 1px at 32% 80%, rgba(245, 239, 230, 0.3), transparent 50%),
      radial-gradient(1px 1px at 50% 70%, rgba(184, 134, 47, 0.38), transparent 50%),
      radial-gradient(1.5px 1.5px at 70% 86%, rgba(245, 239, 230, 0.4), transparent 50%),
      radial-gradient(1px 1px at 90% 60%, rgba(184, 134, 47, 0.4), transparent 50%);
    animation: starfield-drift 30s linear infinite;
    z-index: 0;
  }
  .section-closer .closer-grid { position: relative; z-index: 2; }
  @keyframes starfield-drift {
    0%   { transform: translateY(0); opacity: 0.6; }
    50%  { opacity: 1; }
    100% { transform: translateY(-12px); opacity: 0.6; }
  }
}

/* ---------- 47. ANIMATED LINK UNDERLINE ---------- */
.text-link {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--terracotta-text), var(--terracotta-text));
  background-size: 0 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 300ms var(--ease-quick), color 200ms;
}
@media (prefers-reduced-motion: no-preference) {
  .text-link:hover {
    background-size: 100% 1.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .text-link {
    background-image: linear-gradient(90deg, var(--terracotta-text), var(--terracotta-text));
    background-size: 100% 1.5px;
  }
}

/* ============================================================================
   MAXIMALIST POSTER LAYER — visible, dramatic, marketing-grade.
   Big display type, floating ambient orbs, infinite trust ticker,
   diagonal ribbons, sunburst, brushstroke underlines.
   ============================================================================ */

/* ---------- 48. INFINITE TRUST TICKER ribbon (right under nav) ---------- */
.ticker {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--gold);
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(184, 134, 47, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(184, 134, 47, 0.18),
    0 8px 16px -8px rgba(8, 26, 45, 0.3);
  height: 44px;
  display: flex;
  align-items: center;
}
.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--navy-deep), transparent); }
.ticker::after  { right: 0; background: linear-gradient(270deg, var(--navy-deep), transparent); }

.ticker .track {
  display: flex;
  white-space: nowrap;
  gap: var(--s8);
  padding: 0 var(--s5);
  width: max-content;
}
@media (prefers-reduced-motion: no-preference) {
  .ticker .track {
    animation: ticker-scroll 38s linear infinite;
  }
  @keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}
.ticker .track span {
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
}
.ticker .track .star {
  color: var(--terracotta);
  font-size: 1.1em;
}

/* ---------- 49. AMBIENT FLOATING ORBS (sitewide, behind content) ---------- */
.bg-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-orbs::before,
.bg-orbs::after,
.bg-orbs > .orb {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
}
.bg-orbs::before {
  width: 460px; height: 460px;
  top: 10vh; left: -80px;
  background: radial-gradient(circle, rgba(184, 134, 47, 0.6) 0%, rgba(184, 134, 47, 0) 70%);
}
.bg-orbs::after {
  width: 520px; height: 520px;
  top: 70vh; right: -120px;
  background: radial-gradient(circle, rgba(194, 80, 43, 0.5) 0%, rgba(194, 80, 43, 0) 70%);
}
.bg-orbs > .orb-3 {
  width: 540px; height: 540px;
  top: 140vh; left: 30vw;
  background: radial-gradient(circle, rgba(47, 93, 58, 0.45) 0%, rgba(47, 93, 58, 0) 70%);
}
.bg-orbs > .orb-4 {
  width: 380px; height: 380px;
  top: 220vh; right: 10vw;
  background: radial-gradient(circle, rgba(184, 134, 47, 0.55) 0%, rgba(184, 134, 47, 0) 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .bg-orbs::before { animation: orb-drift-1 22s ease-in-out infinite alternate; }
  .bg-orbs::after  { animation: orb-drift-2 28s ease-in-out infinite alternate; }
  .bg-orbs > .orb-3 { animation: orb-drift-3 24s ease-in-out infinite alternate; }
  .bg-orbs > .orb-4 { animation: orb-drift-1 30s ease-in-out infinite alternate-reverse; }
  @keyframes orb-drift-1 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(120px, 80px) scale(1.15); }
  }
  @keyframes orb-drift-2 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-100px, -120px) scale(1.1); }
  }
  @keyframes orb-drift-3 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(80px, -90px) scale(1.2); }
  }
}
/* ensure body content sits above orbs */
body > *:not(.bg-orbs) { position: relative; z-index: 1; }

/* ---------- 50. HERO SUNBURST behind H1 ---------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  width: 1200px;
  height: 1200px;
  top: -400px;
  left: -200px;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(184, 134, 47, 0.10) 0deg,
      rgba(184, 134, 47, 0.10) 4deg,
      transparent 4deg,
      transparent 14deg);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
  mask: radial-gradient(circle at center, black 0%, black 35%, transparent 70%);
  -webkit-mask: radial-gradient(circle at center, black 0%, black 35%, transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before {
    animation: sunburst-rotate 120s linear infinite;
  }
  @keyframes sunburst-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
}

/* ---------- 51. HERO H1 — BIG, dramatic ---------- */
.hero h1 {
  font-size: clamp(3rem, 1.6rem + 6vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-bottom: var(--s6);
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
}
.hero h1 .accent {
  display: inline-block;
  position: relative;
}
/* brushstroke underline under .accent */
.hero h1 .accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.06em;
  height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 24' preserveAspectRatio='none'><path d='M 6 14 Q 80 4, 160 12 T 320 12 T 480 10 T 594 14' fill='none' stroke='%23B8862F' stroke-width='6' stroke-linecap='round' opacity='0.85'/></svg>") no-repeat center / 100% 100%;
  pointer-events: none;
  z-index: -1;
}

/* ---------- 52. HERO LEDE — bigger ---------- */
.hero .lede {
  font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink);
  font-weight: 400;
  max-width: 56ch;
  margin-bottom: var(--s5);
}

/* ---------- 53. HERO ANSWER CAPSULE — sits under the lede, large ---------- */
.hero .answer-capsule {
  font-size: 1rem;
  max-width: 56ch;
  margin: 0 0 var(--s6);
}

/* ---------- 54. CTA — bigger + slow breathing on primary ---------- */
.hero .btn-primary,
.section-closer .btn-primary {
  font-size: 1.0625rem;
  padding: var(--s5) var(--s8);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  .hero .btn-primary,
  .section-closer .btn-primary {
    animation: cta-breathe 3.6s ease-in-out infinite;
  }
  @keyframes cta-breathe {
    0%, 100% {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 8px 24px -8px rgba(194, 80, 43, 0.4),
        0 0 0 0 rgba(184, 134, 47, 0);
    }
    50% {
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 12px 36px -8px rgba(194, 80, 43, 0.55),
        0 0 0 12px rgba(184, 134, 47, 0.18);
    }
  }
}

/* ---------- 55. POSTER MOMENTS — giant numbers framing key sections ---------- */
.poster-num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(7rem, 4rem + 16vw, 22rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #D4A23E 0%, #7E5A19 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin: var(--s8) 0 var(--s4);
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
}
.poster-band {
  background: var(--paper-2);
  padding: var(--s10) var(--s5);
  text-align: center;
  position: relative;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.poster-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 30% 10%, rgba(184, 134, 47, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 80% at 70% 90%, rgba(194, 80, 43, 0.14), transparent 60%);
  pointer-events: none;
}
.poster-band > * { position: relative; z-index: 1; }
.poster-band .lbl {
  font-family: var(--f-mono);
  font-size: 0.875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-block;
  padding: var(--s2) var(--s5);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}
.poster-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: var(--cap-xl);
  margin: 0 auto;
}
.poster-row .cell {
  padding: var(--s8) var(--s5);
  text-align: center;
  border-right: 1px dashed var(--rule);
}
.poster-row .cell:last-child { border-right: 0; }
.poster-row .cell .big {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  background: linear-gradient(180deg, #D4A23E 0%, #7E5A19 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--s3);
}
.poster-row .cell .small {
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}
@media (max-width: 1023px) {
  .poster-row { grid-template-columns: 1fr; }
  .poster-row .cell { border-right: 0; border-bottom: 1px dashed var(--rule); }
  .poster-row .cell:last-child { border-bottom: 0; }
}

/* ---------- 56. DIAGONAL GOLD RIBBON — section separator ---------- */
.gold-ribbon {
  position: relative;
  background: linear-gradient(135deg, #B8862F 0%, #D4A23E 50%, #B8862F 100%);
  color: var(--navy-deep);
  padding: var(--s5) var(--s5);
  margin: 0;
  text-align: center;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(8, 26, 45, 0.18),
    0 12px 32px -16px rgba(184, 134, 47, 0.5);
  overflow: hidden;
  z-index: 2;
}
.gold-ribbon::before,
.gold-ribbon::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 240px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .gold-ribbon::before { animation: ribbon-shine 6s ease-in-out infinite; left: -240px; }
  .gold-ribbon::after  { animation: ribbon-shine 6s ease-in-out infinite 3s; left: -240px; }
  @keyframes ribbon-shine {
    0%   { left: -240px; }
    100% { left: 100%; }
  }
}
.gold-ribbon .ornament {
  margin: 0 var(--s4);
  color: var(--terracotta);
  font-size: 1.2em;
}

/* ---------- 57. SECTION POSTER HEADERS — overscale ---------- */
.section-head h2 {
  font-size: clamp(1.875rem, 1.4rem + 1.8vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* ---------- 58. PRICING FEATURED — POSTER MODE ---------- */
.tier.featured {
  position: relative;
  z-index: 2;
  transform: translateY(-12px) scale(1.04);
}
.tier.featured .price {
  font-size: clamp(3.25rem, 2.5rem + 1.8vw, 4.5rem);
}
.tier.featured::before {
  font-size: 0.7rem;
  padding: 6px 16px;
}

/* ---------- 59. ANCHOR CARD — POSTER MODE ---------- */
.anchor-card {
  padding: var(--s10) var(--s8);
}
.anchor-card h2 {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  line-height: 1.04;
  margin-bottom: var(--s5);
}
.anchor-card .anchor-price .price-num {
  font-size: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
}

/* ---------- 60. STAT NUMBERS in hero proof — POSTER ---------- */
.section-proof .counter-cell .num,
.section-proof .stat .num {
  font-size: clamp(3rem, 2.2rem + 2.4vw, 4.5rem);
}

/* ---------- 61. HERO META — corner stamp on the photo ---------- */
.photo-frame {
  position: relative;
}
.photo-frame .stamp {
  position: absolute;
  top: -14px;
  right: -14px;
  background: var(--terracotta);
  color: var(--paper);
  width: 76px; height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-align: center;
  line-height: 1.2;
  text-transform: uppercase;
  z-index: 5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 8px 20px -8px rgba(194, 80, 43, 0.5);
  transform: rotate(-12deg);
}
@media (prefers-reduced-motion: no-preference) {
  .photo-frame .stamp {
    animation: stamp-wiggle 6s ease-in-out infinite;
  }
  @keyframes stamp-wiggle {
    0%, 100% { transform: rotate(-12deg) scale(1); }
    50%      { transform: rotate(-9deg)  scale(1.06); }
  }
}

/* ---------- 62. CLIENT MARQUEE — sliding case study ribbon ---------- */
.client-marquee {
  background: var(--paper);
  padding: var(--s7) 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.client-marquee::before,
.client-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.client-marquee::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.client-marquee::after  { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.client-marquee .track {
  display: flex;
  gap: var(--s9);
  width: max-content;
  align-items: center;
}
@media (prefers-reduced-motion: no-preference) {
  .client-marquee .track {
    animation: ticker-scroll 50s linear infinite;
  }
  .client-marquee:hover .track { animation-play-state: paused; }
}
.client-marquee .name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--ink);
  display: inline-flex;
  gap: var(--s4);
  align-items: center;
  white-space: nowrap;
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 96;
}
.client-marquee .name::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.client-marquee .name:last-child::after { display: none; }

/* ---------- 63. KICKER OVER-EVERYTHING — slightly bigger + gold underline ---------- */
.kicker {
  font-size: 0.875rem;
  letter-spacing: 0.32em;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

/* ---------- 64. SECTION-HEAD UNDER LINE — gold accent line ---------- */
.section-head {
  text-align: left;
}
.section-head h2 {
  position: relative;
  display: inline-block;
}
.section-head h2::after {
  content: '';
  display: block;
  margin-top: var(--s3);
  width: 64px;
  height: 4px;
  background: linear-gradient(90deg, var(--terracotta), var(--gold));
  border-radius: 2px;
}

/* ---------- 65. POSTER WAVE DIVIDER (svg) ---------- */
.wave-divider {
  display: block;
  width: 100%;
  height: 64px;
  margin: 0;
}

/* ---------- 66. NUMBER STAMP at section corners (1, 2, 3...) ---------- */
.section-stamp {
  position: absolute;
  top: var(--s5);
  right: var(--s5);
  font-family: var(--f-display);
  font-size: clamp(4rem, 3rem + 4vw, 8rem);
  line-height: 1;
  font-weight: 700;
  color: var(--paper-3);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.03em;
  z-index: 0;
}
.section-stamp::before {
  content: attr(data-num);
}

/* ---------- 67. HERO POSTER LAYOUT — break the grid ---------- */
.hero .hero-grid {
  position: relative;
  z-index: 2;
}
.hero .hero-side {
  align-items: flex-end;
}
.hero-side .photo-frame {
  max-width: 420px;
  transform: rotate(2deg);
  transition: transform 360ms var(--ease-quick);
}
.hero-side .photo-frame:hover { transform: rotate(0deg); }

/* tape effect on photo top */
.hero-side .photo-frame::after {
  border: 0;
}
.hero-side .photo-frame .tape {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 96px;
  height: 22px;
  background: rgba(245, 239, 230, 0.62);
  border: 1px solid rgba(184, 134, 47, 0.25);
  z-index: 6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* ---------- 68. FAUX-3D LAYERED CARDS in pricing — depth stack ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .tiers-row {
    perspective: 1200px;
  }
  .tier {
    transform-style: preserve-3d;
  }
}

/* ---------- 69. ENGINE ORBITAL — bigger ---------- */
.engine-orbital {
  max-width: 820px;
}

/* ---------- 70. ANIMATED DOLLAR SIGNS in hero background ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero .floating-money {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    font-family: var(--f-display);
    font-weight: 700;
    color: rgba(184, 134, 47, 0.18);
    user-select: none;
  }
  .hero .floating-money:nth-child(1) { top: 15%; left: 8%;  font-size: 80px; animation: money-float 12s ease-in-out infinite; }
  .hero .floating-money:nth-child(2) { top: 60%; left: 4%;  font-size: 64px; animation: money-float 14s ease-in-out infinite 2s; }
  .hero .floating-money:nth-child(3) { top: 30%; right: 6%; font-size: 96px; animation: money-float 16s ease-in-out infinite 1s; }
  .hero .floating-money:nth-child(4) { top: 80%; right: 12%;font-size: 56px; animation: money-float 18s ease-in-out infinite 3s; }
  @keyframes money-float {
    0%, 100% { transform: translateY(0) rotate(-6deg); opacity: 0.7; }
    50%      { transform: translateY(-24px) rotate(2deg); opacity: 1.0; }
  }
}

/* ---------- 71. POSTER CTA — "MARQUEE-STYLE" big text repeating ---------- */
.poster-cta-band {
  background: var(--navy-deep);
  color: var(--gold);
  overflow: hidden;
  padding: var(--s7) 0;
  border-top: 1px solid rgba(184, 134, 47, 0.3);
  border-bottom: 1px solid rgba(184, 134, 47, 0.3);
  position: relative;
}
.poster-cta-band .track {
  display: flex;
  gap: var(--s9);
  width: max-content;
  align-items: center;
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  line-height: 1;
}
.poster-cta-band .track .word {
  display: inline-flex;
  align-items: center;
  gap: var(--s9);
}
.poster-cta-band .track .word::after {
  content: '★';
  color: var(--terracotta);
  font-size: 0.6em;
}
.poster-cta-band .track .word:last-child::after { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  .poster-cta-band .track {
    animation: ticker-scroll 32s linear infinite;
  }
}

/* ---------- 72. KEY DROP CAP on prose ---------- */
.prose > p:first-of-type::first-letter,
.about-hero .lede::first-letter {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 4em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.08em 0 0;
  background: linear-gradient(135deg, var(--terracotta-2) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
}

/* ============================================================================
   ROUND 3: SITE-WIDE CINEMATIC SHELL
   - Page-enter animation
   - Footer aurora + monogram seal
   - Right-edge section indicator (Apple-style)
   - Section ornament SVGs above heads
   - Bracket frames around H1s
   - Featured tier halo breath
   - Wave dividers, blueprint texture
   ============================================================================ */

/* ---------- 73. PAGE-ENTER fade-in ---------- */
@media (prefers-reduced-motion: no-preference) {
  main#main {
    animation: page-enter 600ms var(--ease-soft) both;
  }
  @keyframes page-enter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- 74. RIGHT-EDGE SECTION INDICATOR (desktop) ---------- */
.section-rail {
  position: fixed;
  right: var(--s4);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  pointer-events: none;
}
.section-rail a {
  display: block;
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: rgba(31, 41, 51, 0.18);
  pointer-events: auto;
  transition: background var(--t-fast), width var(--t-fast), height var(--t-fast);
  position: relative;
}
.section-rail a:hover {
  background: var(--terracotta);
  width: 36px;
}
.section-rail a.active {
  background: linear-gradient(90deg, var(--terracotta), var(--gold));
  width: 36px;
  height: 6px;
}
.section-rail a::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  background: var(--navy-deep);
  color: var(--paper);
  padding: 4px 10px;
  border-radius: var(--r1);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms, transform 200ms;
  pointer-events: none;
}
.section-rail a:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 1023px) {
  .section-rail { display: none; }
}

/* ---------- 75. ORNAMENT FLOURISH above section heads ---------- */
.ornament-flourish {
  display: block;
  width: 120px;
  height: 18px;
  margin: 0 auto var(--s4);
  opacity: 0.7;
}
.section-head .ornament-flourish { margin-left: 0; }

/* ---------- 76. BRACKET-FRAMED H1s on inner pages ---------- */
.about-hero h1,
.pricing-hero h1,
.engine-hero h1,
.stack-hero h1 {
  position: relative;
}
.about-hero h1::before,
.pricing-hero h1::before,
.stack-hero h1::before {
  content: '';
  position: absolute;
  top: -24px;
  left: -8px;
  width: 28px;
  height: 28px;
  border-top: 3px solid var(--gold);
  border-left: 3px solid var(--gold);
}
.about-hero h1::after,
.pricing-hero h1::after,
.stack-hero h1::after {
  content: '';
  position: absolute;
  bottom: -16px;
  right: -8px;
  width: 28px;
  height: 28px;
  border-bottom: 3px solid var(--terracotta);
  border-right: 3px solid var(--terracotta);
}

/* ---------- 77. FEATURED TIER — slow gold halo breath ---------- */
@media (prefers-reduced-motion: no-preference) {
  .tier.featured {
    animation: featured-halo 5s ease-in-out infinite;
  }
  @keyframes featured-halo {
    0%, 100% {
      box-shadow:
        0 0 0 1px rgba(194, 80, 43, 0.1) inset,
        0 12px 32px -16px rgba(194, 80, 43, 0.45),
        0 0 0 0 rgba(184, 134, 47, 0);
    }
    50% {
      box-shadow:
        0 0 0 1px rgba(194, 80, 43, 0.1) inset,
        0 16px 40px -16px rgba(194, 80, 43, 0.55),
        0 0 0 16px rgba(184, 134, 47, 0.18);
    }
  }
}

/* ---------- 78. FOOTER MONOGRAM SEAL ---------- */
footer.site::before {
  content: '';
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 96px;
  background:
    radial-gradient(circle, var(--navy) 0%, var(--navy) 60%, transparent 60%);
  border-radius: 50%;
  z-index: 5;
  box-shadow: 0 12px 32px -8px rgba(8, 26, 45, 0.35);
}
footer.site::after {
  content: 'JA';
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 64px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--gold);
  text-align: center;
  z-index: 6;
  letter-spacing: -0.04em;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
  pointer-events: none;
  display: grid;
  place-items: center;
}

/* ---------- 79. FOOTER GOLD STRIPE TOP ---------- */
footer.site {
  border-top: 0;
  position: relative;
}
footer.site > .foot-trust:first-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--gold) 0%,
    var(--terracotta) 33%,
    var(--forest) 66%,
    var(--gold) 100%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  footer.site > .foot-trust:first-child::before {
    animation: gold-leaf 8s linear infinite;
  }
}

/* ---------- 80. SUB-FOOTER: BUILT-IN-CASSVILLE LOCKUP ---------- */
.built-in-cassville {
  background: var(--paper-2);
  text-align: center;
  padding: var(--s7) var(--s5);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.built-in-cassville::before,
.built-in-cassville::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 220px);
  height: 1px;
  background: var(--rule-2);
  transform: translateY(-50%);
}
.built-in-cassville::before { left: var(--s5); }
.built-in-cassville::after { right: var(--s5); }
.built-in-cassville .lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  color: var(--ink);
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 96;
}
.built-in-cassville .lockup .star {
  color: var(--gold);
  font-size: 1.4em;
}
.built-in-cassville .meta {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: var(--s3);
}

/* ---------- 81. WAVE DIVIDER ---------- */
svg.wave-divider {
  display: block;
  width: 100%;
  height: 56px;
  margin: 0;
}

/* ---------- 82. ENGINE BIG-NUMBER POSTER ---------- */
.engine-poster {
  background:
    radial-gradient(ellipse 60% 80% at 30% 20%, rgba(184, 134, 47, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 80% at 70% 80%, rgba(194, 80, 43, 0.14), transparent 60%),
    var(--paper-2);
  padding: var(--s12) var(--s5);
  text-align: center;
  position: relative;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.engine-poster .label {
  font-family: var(--f-mono);
  font-size: 0.875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: var(--s5);
}
.engine-poster .price-display {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(5rem, 3rem + 8vw, 12rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #D4A23E 0%, #7E5A19 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
  margin-bottom: var(--s4);
}
.engine-poster .terms {
  font-family: var(--f-mono);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}

/* ---------- 83. INNER PAGE HEROES — bigger H1 ---------- */
.about-hero h1,
.pricing-hero h1,
.stack-hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin-bottom: var(--s5);
}
.engine-hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 5vw, 5.5rem);
  line-height: 0.96;
}

/* ---------- 84. PRICING-PAGE HERO sweep light ---------- */
.pricing-hero {
  background:
    radial-gradient(ellipse 80% 60% at 30% 30%, rgba(184, 134, 47, 0.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 70% 70%, rgba(194, 80, 43, 0.10), transparent 60%),
    var(--paper-2);
  background-size: 200% 200%, 200% 200%, 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .pricing-hero { animation: aurora-shift 20s ease-in-out infinite alternate; }
}

/* ---------- 85. ABOUT-HERO sweep light ---------- */
.about-hero {
  background:
    radial-gradient(ellipse 70% 80% at 80% 20%, rgba(184, 134, 47, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(47, 93, 58, 0.10), transparent 60%),
    var(--paper-2);
  background-size: 200% 200%, 200% 200%, 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .about-hero { animation: aurora-shift 24s ease-in-out infinite alternate; }
}

/* ---------- 86. STACK-HERO and other ---------- */
.stack-hero {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(47, 93, 58, 0.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(184, 134, 47, 0.14), transparent 60%),
    var(--paper);
}

/* ---------- 87. AUDIT-HERO improvements ---------- */
.section-audit {
  background:
    radial-gradient(ellipse 70% 60% at 100% 30%, rgba(184, 134, 47, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 70%, rgba(194, 80, 43, 0.08), transparent 60%),
    var(--paper);
}

/* ---------- 88. WORK CASE LIST — premium card depth ---------- */
.work-list .case {
  border-radius: var(--r3);
  background:
    linear-gradient(180deg, var(--card) 0%, var(--paper) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 16px -8px rgba(8, 26, 45, 0.08);
}
.work-list .case:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 16px 40px -16px rgba(8, 26, 45, 0.18);
}

/* ---------- 89. PRICE TIER number gradients (already covered, this adds glow) ---------- */
.tier .price {
  text-shadow: 0 2px 16px rgba(184, 134, 47, 0.16);
}

/* ---------- 90. PROSE BLOCK — premium serif ---------- */
.prose p,
.prose-cap p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink);
}

/* ---------- 91. SCROLL-TO-TOP bubble ---------- */
.to-top {
  position: fixed;
  bottom: var(--s5);
  right: var(--s5);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--gold);
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 1.5rem;
  font-family: var(--f-display);
  border: 1px solid rgba(184, 134, 47, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 32px -12px rgba(8, 26, 45, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms, transform 240ms var(--ease-quick);
  z-index: var(--z-overlay);
}
.to-top.show {
  opacity: 1;
  pointer-events: auto;
}
.to-top:hover {
  transform: translateY(-3px);
  color: var(--gold);
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%);
}

/* ---------- 92. ORNAMENT MID-SECTION (gold flourish line) ---------- */
.ornament-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  margin: var(--s8) 0;
}
.ornament-line::before,
.ornament-line::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-2), transparent);
}
.ornament-line .star {
  color: var(--gold);
  font-size: 1.2rem;
}
.ornament-line span {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}

/* ---------- 93. POSTER ALL CAPS HEADLINE TREATMENT ---------- */
.section-closer h2 {
  text-transform: none;
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
}

/* ---------- 94. POSTER VERTICAL LABEL on hero ---------- */
.hero {
  position: relative;
}
.hero .vertical-label {
  position: absolute;
  left: var(--s4);
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  opacity: 0.8;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 1023px) {
  .hero .vertical-label { display: none; }
}

/* ---------- 95. NUMBERED SECTION CHIPS on H2s ---------- */
.section-head .num-chip {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--navy);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: var(--r1);
  margin-right: var(--s3);
  vertical-align: middle;
}

/* ---------- 96. PHOTO FRAME on every hero — premium tape + stamps ---------- */
.about-hero .photo-frame,
.work-list .photo-frame,
.error-shell .photo-frame {
  transform: rotate(-1.5deg);
  transition: transform 360ms var(--ease-quick);
}
.about-hero .photo-frame:hover,
.work-list .photo-frame:hover,
.error-shell .photo-frame:hover {
  transform: rotate(0deg);
}

/* ---------- 97. CARD HOVER — bigger lift on inner-page cards ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .work-list .case:hover {
    transform: translateY(-4px) rotateX(0.4deg) rotateY(-0.4deg);
  }
  .stack-list .layer:hover {
    transform: translateY(-3px);
  }
}

/* ---------- 98. POSTER LOCKUP at top of every inner page (compact) ---------- */
.page-poster-strip {
  background: var(--paper);
  text-align: center;
  padding: var(--s6) var(--s5);
  position: relative;
  border-bottom: 1px solid var(--rule);
}
.page-poster-strip::before,
.page-poster-strip::after {
  content: '';
  position: absolute;
  top: 0;
  width: 33%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.page-poster-strip::before { left: 0; }
.page-poster-strip::after { right: 0; transform: scaleX(-1); }
.page-poster-strip .row {
  display: flex;
  justify-content: center;
  gap: var(--s9);
  align-items: baseline;
  flex-wrap: wrap;
}
.page-poster-strip .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.page-poster-strip .stat .num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  line-height: 1;
  background: linear-gradient(180deg, #D4A23E 0%, #7E5A19 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-poster-strip .stat .lbl {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
}