/* ============================================================
   Soul Touch Therapy · v5 — responsive patches & extras
   ============================================================ */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-image { max-width: 380px; max-height: 480px; margin: 0 auto; }
}

@media (max-width: 760px) {
  .hero-copy h1 { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .hero-copy .lede { font-size: 1.05rem; margin-bottom: 1.25rem; }
  .hero-image { max-width: 100%; max-height: 60vh; }

  .nav-card { min-height: 220px; }
  section { padding-block: 1.6rem; }
  section.spacious { padding-block: 2.4rem; }
  .h-display { font-size: clamp(2.4rem, 12vw, 3.6rem); }
}

@media (max-width: 420px) {
  .hero-copy h1 { font-size: 2rem; }
  .hero-copy .lede { font-size: 1rem; }
}

/* Hero cine on mobile — keep impactful but reduce height */
@media (max-width: 720px) {
  .hero-cine { min-height: 86vh; }
  .hero-cine h1 { font-size: clamp(2.6rem, 11vw, 4.2rem); max-width: 14ch; }
  .hero-cine .hero-lede { font-size: 1.1rem; max-width: 100%; }
  .hero-cine .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-cine .hero-actions .btn { justify-content: center; }
  .hero-scroll-cue { bottom: 1rem; }
  .hero-scroll-cue .line { height: 32px; }
}

/* Feature block: image + text */
.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.feature-block.flip { direction: rtl; }
.feature-block.flip > * { direction: ltr; }
.feature-block .feature-media {
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius);
}
.feature-block .feature-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.94);
  transition: transform 1.4s var(--ease);
}
.feature-block:hover .feature-media img { transform: scale(1.04); }
@media (max-width: 860px) {
  .feature-block { grid-template-columns: 1fr; direction: ltr; }
  .feature-block.flip { direction: ltr; }
  .feature-block .feature-media { max-width: 480px; margin: 0 auto; }
}

/* Section transitions — soft gradient bands between sections */
.section-divider-down {
  height: 80px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
}
.section-divider-up-to-dark {
  height: 80px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--sage-night) 100%);
}
.section-divider-down-from-dark {
  height: 80px;
  background: linear-gradient(180deg, var(--sage-night) 0%, var(--cream) 100%);
}

/* Counter prepended with prefix or suffix */
.counter { display: inline-block; }
.counter[data-suffix]::after { content: attr(data-suffix); }
.counter[data-prefix]::before { content: attr(data-prefix); }

/* Visually-balanced figcaption */
figcaption {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.75rem;
}

/* Inline highlight (gold underline) */
.hi {
  background-image: linear-gradient(180deg, transparent 65%, rgba(196, 168, 120, 0.35) 65%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-inline: 2px;
}

/* Float-up entrance (used for testimonials) */
@keyframes float-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero scroll cue text spacing */
.hero-scroll-cue span { display: block; }

/* Article modal (for journal preview) */
.article-dialog {
  border: 0;
  padding: 0;
  background: var(--paper);
  max-width: min(820px, 92vw);
  width: 100%;
  max-height: 88vh;
  margin: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 60px 120px rgba(0,0,0,0.30);
}
.article-dialog::backdrop {
  background: rgba(31, 42, 35, 0.55);
  backdrop-filter: blur(6px);
}
.dialog-scroll {
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(2rem, 5vw, 3rem);
}
.dialog-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font-size: 18px;
  color: var(--ink);
  cursor: pointer;
  z-index: 2;
  transition: all .25s var(--ease);
}
.dialog-close:hover { background: var(--burgundy); color: var(--cream); border-color: var(--burgundy); }

body.modal-open { overflow: hidden; }

/* Newsletter form success state */
.newsletter-form.success input[type="email"] {
  border-color: var(--gold);
  pointer-events: none;
  opacity: 0.6;
}
.newsletter-form .form-note.success {
  color: var(--burgundy);
  font-weight: 500;
}

/* Hero image fallback if no video */
.hero-cine .hero-media.no-video img {
  filter: brightness(0.55) saturate(0.95);
}

/* Reveal on scroll for slow-reveal vertical splits (hero-stats) */
.hero-stats .stat {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease) calc(var(--i, 0) * 0.1s + 1.2s),
              transform 1s var(--ease) calc(var(--i, 0) * 0.1s + 1.2s);
}
body.loaded .hero-stats .stat { opacity: 1; transform: translateY(0); }
.hero-stats .stat:nth-child(1) { --i: 0; }
.hero-stats .stat:nth-child(2) { --i: 1; }
.hero-stats .stat:nth-child(3) { --i: 2; }
.hero-stats .stat:nth-child(4) { --i: 3; }

/* Hero cinematic headline animated entrance */
.hero-cine .hero-eyebrow,
.hero-cine .hero-lede,
.hero-cine .hero-actions {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
body.loaded .hero-cine .hero-eyebrow { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
body.loaded .hero-cine .hero-lede { opacity: 1; transform: translateY(0); transition-delay: 1.0s; }
body.loaded .hero-cine .hero-actions { opacity: 1; transform: translateY(0); transition-delay: 1.2s; }

.hero-cine h1 .line-wrap { display: block; overflow: hidden; }
.hero-cine h1 .line-wrap > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.2s var(--ease);
}
body.loaded .hero-cine h1 .line-wrap > span { transform: translateY(0); }
body.loaded .hero-cine h1 .line-wrap:nth-child(1) > span { transition-delay: 0.5s; }
body.loaded .hero-cine h1 .line-wrap:nth-child(2) > span { transition-delay: 0.6s; }
body.loaded .hero-cine h1 .line-wrap:nth-child(3) > span { transition-delay: 0.7s; }

/* No-JS fallback — show hero h1 even without JS */
html.no-js .hero-cine h1 .line-wrap > span,
html.no-js .reveal,
html.no-js .reveal-slow,
html.no-js .reveal-clip,
html.no-js .reveal-image,
html.no-js .reveal-stagger > *,
html.no-js .reveal-lines .line-wrap > span,
html.no-js .hero-cine .hero-eyebrow,
html.no-js .hero-cine .hero-lede,
html.no-js .hero-cine .hero-actions,
html.no-js .hero-stats .stat {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}
html.no-js .reveal-image::after { display: none !important; }

/* Word rotator initial state */
body.loaded .word-rotator span.is-active { transform: translateY(0); opacity: 1; }

/* Print: hide non-essentials */
@media print {
  .site-header, .site-footer, .marquee, .hero-scroll-cue,
  .floating-cta, .scroll-progress, .cursor-dot, .cursor-ring,
  .page-loader { display: none !important; }
}