/* Original, pre-rendered smoke ribbons. GPU-composited slow movement only: no video,
   no per-frame canvas/noise calculation, no animated blur/filter, no external asset.
   A still WebP is the default/no-JS/reduced-motion/save-data fallback. */
.smoke-surface {
  position: relative;
  isolation: isolate;
  overflow: clip;
  --mist-image: url('smoke-ash.webp');
  --mist-opacity: .16;
  --mist-duration: 38s;
}
.smoke-surface::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -8%;
  background: var(--mist-image) center / cover no-repeat;
  opacity: var(--mist-opacity);
  transform: translate3d(-1%, 1%, 0) scale(1.04);
  transform-origin: 65% 50%;
}
.smoke-dark { --mist-image: url('smoke-gold.webp'); --mist-opacity: .88; }
.smoke-soft { --mist-duration: 47s; }
html[data-atmosphere-ready] .smoke-surface::before {
  animation: atmosphere-drift var(--mist-duration) ease-in-out infinite alternate;
  animation-play-state: paused;
}
html[data-atmosphere='motion'] .smoke-surface.is-in-view::before {
  animation-play-state: running;
  will-change: transform, opacity;
}
@keyframes atmosphere-drift {
  0% { transform: translate3d(-1%, 1%, 0) scale(1.04) rotate(-1deg); opacity: var(--mist-opacity); }
  55% { opacity: calc(var(--mist-opacity) * .83); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.11) rotate(2deg); opacity: var(--mist-opacity); }
}
/* A darker cinematic hero, with a dedicated solid-to-clear text scrim. */
.hero-stage { background: #191c19; color: #f7f4ed; }
.hero-stage::before { inset: -13% -5%; background-position: 68% 50%; }
.hero-stage::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(25,28,25,.94), rgba(25,28,25,.72) 35%, rgba(25,28,25,.05) 75%);
}
.hero-stage .hero { padding-top: 52px; padding-bottom: 58px; }
.hero-stage .hero-copy .eyebrow { color: #dfceab; }
.hero-stage h1 em { color: #ddc49a; }
.hero-stage .hero-description { color: #e2ddd3; }
.hero-stage .hero-footnote { color: #bfc0b5; }
.hero-stage .button-dark { background: #dfcca5; border-color: #dfcca5; color: #1c211b; }
.hero-stage .button-dark:hover { background: #f0dfbb; border-color: #f0dfbb; }
.hero-stage .tiny-star { color: #d9bc85; }
.hero-stage a:focus-visible, .hero-stage button:focus-visible { outline-color: #efd7a8; }
.hero-stage .hero-art {
  background: radial-gradient(ellipse at 55% 50%, rgba(146,112,66,.14), rgba(15,18,16,.08));
  border: 1px solid rgba(211,186,139,.3);
  --mist-opacity: .93;
  --mist-duration: 33s;
}
.hero-stage .hero-art::before {
  inset: -22% -35%; background-position: 61% center;
  transform-origin: 45% 60%;
}
.hero-stage .art-sun, .hero-stage .art-arch, .hero-stage .art-oval { display: none; }
.hero-stage .art-orbit { border-color: rgba(218,197,159,.38); width: 72%; height: 77%; left: 16%; top: 9%; }
.hero-stage .art-monogram { color: #f4e7cb; top: 30%; left: 17%; text-shadow: 0 2px 35px rgba(12,15,12,.3); }
.hero-stage .vertical-note { color: #c4b899; }
.hero-stage .art-caption { color: #eadbbd; }
.hero-stage .image-label { background: rgba(23,27,23,.76); color: #d6c8aa; border: 1px solid rgba(200,176,132,.28); }
.atmosphere-control {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 17px; padding: 7px 0; min-height: 34px;
  background: none; border: 0; color: #d4c2a1;
  font-size: 8px; letter-spacing: .11em; text-transform: uppercase;
}
.atmosphere-control > span:first-child { width: 12px; font-size: 11px; }
.atmosphere-control:hover { color: #fff0d6; }
/* Retain the ivory palette elsewhere: mist sits behind, never over the content. */
.services.smoke-soft { --mist-opacity: .14; }
.services.smoke-soft::before { inset: 3% -5% -8% 15%; background-position: right center; }
.process.smoke-soft { --mist-opacity: .12; }
.process.smoke-soft::before { inset: -8% 18% -5% -8%; background-position: left center; }
.closing-cta.smoke-dark { --mist-opacity: .25; background: #20251e; }
.closing-cta.smoke-dark::before { inset: -80% -5%; background-position: center 60%; }
.page-header-stage { background: #f0ece3; --mist-opacity: .25; border-bottom: 1px solid #e5ded1; }
.page-header-stage::before { inset: -85% -5% -65% 18%; background-position: 70% 58%; }
.page-header-stage .notice { background: rgba(233,227,213,.94); }
.book-layout.smoke-soft { overflow: visible; }
.book-layout.smoke-soft::before { inset: -35px -28px auto; height: 570px; background-position: 58% 55%; background-size: cover; opacity: .20; }
.book-layout .form-container { position: relative; }
.book-layout .form-container .notice { background: #e9e3d5; }
.book-layout .form-top { background: rgba(247,244,237,.72); }
/* Limit texture size and simultaneous compositor work on phones. */
@media (max-width: 760px) {
  .smoke-surface { --mist-image: url('smoke-ash-mobile.webp'); --mist-duration: 52s; }
  .smoke-dark { --mist-image: url('smoke-gold-mobile.webp'); }
  .hero-stage .hero { padding-top: 41px; padding-bottom: 34px; }
  .hero-stage { --mist-opacity: .75; }
  .hero-stage::before { background-position: 68% 12%; background-size: auto 80%; }
  .hero-stage::after { background: linear-gradient(180deg, rgba(25,28,25,.81) 0, rgba(25,28,25,.53) 38%, rgba(25,28,25,.05) 76%); }
  .hero-stage .hero-art { --mist-opacity: .9; --mist-duration: 48s; }
  .hero-stage .hero-art::before { inset: -20% -30%; }
  .hero-stage .art-monogram { left: 16%; top: 29%; }
  .hero-stage .art-orbit { left: 15%; top: 8%; height: 79%; }
  .hero-stage .hero-footnote { max-width: 300px; }
  .atmosphere-control { margin-top: 10px; min-height: 44px; font-size: 8px; }
  .services.smoke-soft { --mist-opacity: .1; }
  .process.smoke-soft { --mist-opacity: .09; }
  .page-header-stage { --mist-opacity: .21; }
  .page-header-stage::before { inset: -15% -35% -10% -10%; }
  .book-layout.smoke-soft::before { left: -20px; right: -20px; top: -15px; height: 510px; opacity: .17; }
  /* Section atmosphere stays still on small screens; only the visible hero drifts. */
  html[data-atmosphere-ready] .smoke-soft::before,
  html[data-atmosphere-ready] .closing-cta::before { animation: none; will-change: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-atmosphere-ready] .smoke-surface::before {
    animation: none !important; transform: none; will-change: auto !important;
  }
  .atmosphere-control { display: none !important; }
}
@media (forced-colors: active) {
  .smoke-surface::before, .hero-stage::after { display: none; }
  .atmosphere-control { display: none; }
}