/* ============================================================
   Parwan — One Soul · wave255 (full site unify + responsive)
   Load LAST · Gold #C9A86E · Charcoal #2D3238 · Cream #F5F4F0
   ============================================================ */

:root {
  --pw-gold: #C9A86E;
  --pw-gold-deep: #B89558;
  --pw-gold-soft: #E8DCC4;
  --pw-gold-glow: rgba(201, 168, 110, 0.35);
  --pw-charcoal: #2D3238;
  --pw-charcoal-deep: #1a1d21;
  --pw-cream: #F5F4F0;
  --pw-paper: #F0F2F5;
  --pw-ink: #374151;
  --pw-muted: #6B7280;
  --pw-line: #E8EAED;
  --pw-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pw-container: min(100% - 2rem, 1180px);
  --pw-section-y: clamp(2.5rem, 5vw, 4rem);
  --pw-nav: 76px;
}

/* ---- No bleed, one canvas ---- */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body.page-home,
body.page-inner,
body.page-jfi,
body.page-wave {
  background: var(--pw-paper) !important;
  color: var(--pw-ink);
  overflow-x: clip;
  max-width: 100%;
}

body.nav-open {
  overflow: hidden !important;
}

.page-home main,
.page-inner .wave-below,
.page-jfi .wave-below,
.page-wave .wave-below,
.page-inner main {
  background: var(--pw-cream);
}

.page-home .container,
.page-inner .container,
.page-jfi .container,
.page-wave .container {
  width: var(--pw-container);
  margin-inline: auto;
  padding-inline: 0;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

@media (max-width: 640px) {
  :root {
    --pw-container: min(100% - 1.25rem, 100%);
  }
}

/* ---- Kill leftover GREEN → gold + charcoal ---- */
.page-inner,
.page-jfi,
.page-wave,
.page-home {
  --pj-teal: var(--pw-gold-deep);
  --ow-teal: var(--pw-gold-deep);
  --s-green: var(--pw-gold-deep);
  --s-ink: var(--pw-charcoal);
  --s-deep: var(--pw-charcoal);
}

.page-inner .btn-primary,
.page-inner .btn-secondary,
.page-jfi .btn-primary {
  background: linear-gradient(135deg, var(--pw-gold), var(--pw-gold-deep)) !important;
  color: var(--pw-charcoal) !important;
  border-color: var(--pw-gold) !important;
}

.page-inner a:not(.btn-wave):not(.btn-wave-outline):not(.nav-cta):not(.pw-header__cta):not(.footer-col a):not(.pw-footer-pro__helpline) {
  /* keep link colors readable */
}

.page-inner .ow-kicker,
.page-inner .ow-belief__quote,
.page-inner .ow-head em {
  color: var(--pw-gold-deep) !important;
}

.page-inner .ow-kicker span {
  background: rgba(201, 168, 110, 0.18) !important;
  color: var(--pw-gold-deep) !important;
}

/* ---- Header + nav: one bar everywhere ---- */
.pw-jfi-header .pw-header__cta,
.page-inner .pw-header__cta {
  background: linear-gradient(135deg, var(--pw-gold), var(--pw-gold-deep)) !important;
  color: var(--pw-charcoal) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

.pw-jfi-header .nav-links > a.active,
.page-inner .nav-links > a.active {
  background: linear-gradient(135deg, var(--pw-gold-deep), var(--pw-gold)) !important;
  color: var(--pw-charcoal) !important;
}

.pw-jfi-header .nav-links > a:hover,
.page-inner .nav-links > a:hover {
  color: var(--pw-gold-deep) !important;
  background: rgba(201, 168, 110, 0.12) !important;
}

.pw-jfi-header .pw-header__call-icon,
.page-inner .pw-header__call-icon {
  background: rgba(201, 168, 110, 0.15) !important;
  color: var(--pw-gold-deep) !important;
}

.pw-jfi-header .pw-header__call a,
.page-inner .pw-header__call a {
  color: var(--pw-gold-deep) !important;
}

.pw-scroll-progress,
.scroll-progress {
  background: linear-gradient(90deg, var(--pw-gold-deep), var(--pw-gold)) !important;
  height: 3px !important;
}

/* ---- Typography ---- */
.page-inner h1,
.page-inner .section-title h2,
.page-jfi .section-title h2,
.page-wave .section-title h2,
.page-home .section-title h2 {
  font-family: "Fraunces", Georgia, serif;
  color: var(--pw-charcoal);
  letter-spacing: -0.02em;
}

.page-inner .section-title h2 em,
.page-jfi .section-title h2 em {
  color: var(--pw-gold);
  font-style: italic;
}

.hm-care-kicker,
.sc-kicker,
.pj-kicker,
.ct-kicker,
.ow-kicker,
.st-kicker,
.ab-cine-hero__kicker {
  color: var(--pw-gold) !important;
  letter-spacing: 0.12em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.pj-kicker span,
.sc-kicker span,
.ct-kicker span,
.ow-kicker span,
.st-kicker span {
  background: rgba(201, 168, 110, 0.18) !important;
  color: var(--pw-gold-deep) !important;
}

/* ---- Buttons: one shape ---- */
.btn-wave,
.btn-wave-outline,
.pj-journal-hero__btn,
.sc-btn,
.ct-hero__btn,
.ow-hero__btn,
.st-hero__btn,
.ab-cine-hero__btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: transform 0.25s var(--pw-ease), box-shadow 0.25s var(--pw-ease), background 0.25s !important;
}

.btn-wave,
.pj-journal-hero__btn--primary,
.sc-btn--gold,
.ct-hero__btn--gold,
.ow-hero__btn--gold,
.st-hero__btn--gold,
.ab-cine-hero__btn--gold {
  background: linear-gradient(135deg, var(--pw-gold), var(--pw-gold-deep)) !important;
  color: var(--pw-charcoal) !important;
  border: 2px solid var(--pw-gold) !important;
}

.btn-wave:hover,
.pj-journal-hero__btn--primary:hover,
.sc-btn--gold:hover,
.ct-hero__btn--gold:hover,
.ow-hero__btn--gold:hover,
.st-hero__btn--gold:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px var(--pw-gold-glow) !important;
}

.pj-journal-hero__btn--ghost,
.sc-btn--ghost,
.ct-hero__btn--ghost,
.ow-hero__btn--ghost,
.st-hero__btn--ghost,
.ab-cine-hero__btn--ghost {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  color: #fff !important;
}

.page-inner .pj-journal-hero__btn--ghost:hover {
  border-color: var(--pw-gold) !important;
  color: var(--pw-gold) !important;
  background: rgba(201, 168, 110, 0.1) !important;
}

.page-inner .btn-wave-outline {
  border: 2px solid rgba(45, 50, 56, 0.22) !important;
  color: var(--pw-charcoal) !important;
  background: transparent !important;
}

.page-inner .btn-wave-outline:hover {
  border-color: var(--pw-gold) !important;
  color: var(--pw-gold-deep) !important;
}

/* ---- Heroes: charcoal family ---- */
.page-inner .pj-journal-hero,
.page-inner.page-jfi .pj-journal-hero,
.page-wave.page-inner .pj-journal-hero,
.ct-hero,
.ow-hero,
.st-hero,
.sc-hero-band,
.page-about .ab-cine-hero {
  background: var(--pw-charcoal) !important;
  color: #E8EAED !important;
}

.page-inner .pj-journal-hero {
  padding: clamp(2rem, 5vw, 3rem) 0 clamp(1.25rem, 3vw, 1.75rem) !important;
}

.page-inner .pj-journal-hero__mark {
  color: rgba(201, 168, 110, 0.06) !important;
}

.page-inner .pj-journal-hero__dots {
  opacity: 0.12 !important;
}

.page-inner .pj-journal-hero__copy h1,
.page-about .ab-cine-hero h1 {
  color: #fff !important;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.75rem, 3.5vw, 2.65rem) !important;
  line-height: 1.12 !important;
}

.page-inner .pj-journal-hero__copy h1 em,
.page-about .ab-cine-hero h1 em {
  color: var(--pw-gold) !important;
}

.page-inner .pj-journal-hero__lead,
.page-about .ab-cine-hero__lead {
  color: rgba(232, 234, 237, 0.78) !important;
}

.page-inner .pj-journal-hero__stats li {
  background: rgba(26, 29, 33, 0.88) !important;
  border: 1px solid rgba(201, 168, 110, 0.35) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}

.page-inner .pj-journal-hero__stats strong {
  color: var(--pw-gold) !important;
  font-family: "Fraunces", Georgia, serif;
}

.page-inner .pj-journal-hero__stats span {
  color: rgba(232, 234, 237, 0.72) !important;
}

.page-inner .pj-journal-hero__frame {
  border: 1px solid rgba(201, 168, 110, 0.25) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
  background: var(--pw-charcoal-deep) !important;
}

.page-inner .pj-journal-hero__frame img {
  object-fit: contain !important;
}

.page-inner .pj-journal-hero__seal {
  background: rgba(45, 50, 56, 0.92) !important;
  border: 1px solid rgba(201, 168, 110, 0.35) !important;
  color: var(--pw-gold) !important;
}

.page-inner .pj-journal-hero__wave path {
  fill: var(--pw-cream) !important;
}

.sc-hero-band__shade {
  background: linear-gradient(105deg, rgba(45, 50, 56, 0.94) 0%, rgba(45, 50, 56, 0.72) 45%, rgba(45, 50, 56, 0.35) 100%) !important;
}

/* ---- Ribbons + tickers ---- */
.ct-flow-ribbon,
.st-flow-ribbon,
.sc-marquee,
.hm-ticker {
  background: var(--pw-gold) !important;
}

.ct-flow-ribbon__track,
.st-flow-ribbon__track {
  color: var(--pw-charcoal) !important;
}

.hm-ticker {
  color: var(--pw-gold-soft) !important;
  background: var(--pw-charcoal) !important;
}

/* ---- Urdu band ---- */
.urdu-section {
  padding: var(--pw-section-y) 1rem 1rem !important;
  text-align: center;
}

.urdu-quote {
  font-family: "Noto Nastaliq Urdu", serif !important;
  color: var(--pw-gold-deep) !important;
  font-size: clamp(1.4rem, 3vw, 2rem) !important;
}

.english-quote {
  font-family: "Fraunces", Georgia, serif !important;
  font-style: italic;
  color: var(--pw-charcoal) !important;
}

/* ---- Section rhythm ---- */
.page-inner .wave-below > section,
.page-jfi .wave-below > section {
  padding-block: var(--pw-section-y);
  scroll-margin-top: calc(var(--pw-nav) + 12px);
}

.page-inner section .section-title {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* ---- Cards ---- */
.ct-channel,
.ct-faq-item,
.ct-form-card,
.ct-map-card,
.st-voice-card,
.st-shield,
.ow-stage,
.sc-programme-card,
.awareness-card,
.info-card,
.faq-item {
  border-radius: 16px !important;
}

.page-contact .ct-channel {
  border-color: rgba(201, 168, 110, 0.2) !important;
  box-shadow: 0 14px 32px rgba(45, 50, 56, 0.08) !important;
}

.page-contact .ct-channel-icon {
  background: var(--pw-charcoal) !important;
  color: var(--pw-gold) !important;
}

.page-contact .ct-channel strong {
  color: var(--pw-charcoal) !important;
}

/* ---- Footer ---- */
.pw-footer-pro {
  background: var(--pw-charcoal) !important;
  color: rgba(232, 234, 237, 0.85) !important;
}

.pw-footer-pro__helpline strong,
.pw-footer-pro__trust em {
  color: var(--pw-gold) !important;
}

.footer-col a:hover {
  color: var(--pw-gold) !important;
}

/* ---- Reveals (only after JS ready) ---- */
html.pw-soul-ready .pw-reveal:not(.is-visible),
html.pw-soul-ready .pw-reveal-up:not(.is-visible),
html.pw-soul-ready .pw-reveal-left:not(.is-visible),
html.pw-soul-ready .pw-reveal-right:not(.is-visible),
html.pw-soul-ready .reveal:not(.is-visible),
html.pw-soul-ready .reveal-left:not(.is-visible),
html.pw-soul-ready .reveal-right:not(.is-visible),
html.pw-soul-ready .reveal-up:not(.is-visible),
html.pw-soul-ready .ct-reveal:not(.is-visible),
html.pw-soul-ready .ct-reveal-up:not(.is-visible),
html.pw-soul-ready .ct-reveal-left:not(.is-visible),
html.pw-soul-ready .ct-reveal-right:not(.is-visible),
html.pw-soul-ready .ow-reveal:not(.is-visible),
html.pw-soul-ready .ow-reveal-up:not(.is-visible),
html.pw-soul-ready .ow-reveal-left:not(.is-visible),
html.pw-soul-ready .ow-reveal-right:not(.is-visible),
html.pw-soul-ready .st-reveal:not(.is-visible),
html.pw-soul-ready .st-reveal-up:not(.is-visible),
html.pw-soul-ready .st-reveal-left:not(.is-visible),
html.pw-soul-ready .st-reveal-right:not(.is-visible),
html.pw-soul-ready .sc-hero-stagger:not(.is-visible) {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--pw-ease), transform 0.7s var(--pw-ease);
  transition-delay: var(--pw-d, 0ms);
}

html.pw-soul-ready .pw-reveal-left:not(.is-visible),
html.pw-soul-ready .reveal-left:not(.is-visible),
html.pw-soul-ready .ct-reveal-left:not(.is-visible),
html.pw-soul-ready .ow-reveal-left:not(.is-visible),
html.pw-soul-ready .st-reveal-left:not(.is-visible) {
  transform: translateX(-24px);
}

html.pw-soul-ready .pw-reveal-right:not(.is-visible),
html.pw-soul-ready .reveal-right:not(.is-visible),
html.pw-soul-ready .ct-reveal-right:not(.is-visible),
html.pw-soul-ready .ow-reveal-right:not(.is-visible),
html.pw-soul-ready .st-reveal-right:not(.is-visible) {
  transform: translateX(24px);
}

.pw-reveal.is-visible,
.pw-reveal-up.is-visible,
.pw-reveal-left.is-visible,
.pw-reveal-right.is-visible,
.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-up.is-visible,
.ct-reveal.is-visible,
.ct-reveal-up.is-visible,
.ct-reveal-left.is-visible,
.ct-reveal-right.is-visible,
.ow-reveal.is-visible,
.ow-reveal-up.is-visible,
.ow-reveal-left.is-visible,
.ow-reveal-right.is-visible,
.st-reveal.is-visible,
.st-reveal-up.is-visible,
.st-reveal-left.is-visible,
.st-reveal-right.is-visible,
.sc-hero-stagger.is-visible,
.pj-hero-stagger > .is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Hero always visible on load */
.ct-hero__copy,
.ow-hero__copy,
.st-hero__copy,
.pj-journal-hero__copy,
.sc-hero-band__copy,
.ab-cine-hero__content {
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .pw-jfi-header .pw-header__row.nav-wrap {
    gap: 0.5rem !important;
  }

  .pw-jfi-header .brand.pw-logo {
    min-width: 0;
    flex: 1 1 auto;
  }

  .pw-jfi-header .pw-logo__text small {
    display: none;
  }
}

@media (max-width: 960px) {
  .page-inner .pj-journal-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .page-inner .pj-journal-hero__spread {
    min-height: 0 !important;
    max-width: 520px;
    margin-inline: auto;
    position: relative !important;
    height: auto !important;
  }

  .page-inner .pj-journal-hero__frame--a,
  .page-inner .pj-journal-hero__frame--b {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin-bottom: 1rem;
  }

  .page-inner .pj-journal-hero__seal {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0.5rem auto 0;
    display: inline-block;
  }

  .ct-hero__grid,
  .ow-hero__grid,
  .st-hero__grid {
    grid-template-columns: 1fr !important;
  }

  .ct-hero__visual,
  .ow-hero__visual,
  .st-hero__visual {
    max-width: 520px;
    margin-inline: auto;
  }

  .sc-hero-band__inner {
    padding-block: 2rem !important;
  }

  .sc-hero-band__copy h1 {
    font-size: clamp(1.65rem, 5vw, 2.25rem) !important;
  }

  .st-journey__wrap {
    padding-inline: 0 !important;
  }

  .ow-stages__track {
    flex-direction: column !important;
  }

  .ow-stage {
    flex: none !important;
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .ct-channels-grid,
  .ct-faq-grid,
  .st-shields__grid,
  .st-voices-wall__grid,
  .st-split-quote__grid,
  .ow-stats__grid,
  .ow-spotlight__grid,
  .sc-programmes__grid,
  .sc-belief__grid,
  .footer-grid,
  .awareness-grid,
  .resource-grid {
    grid-template-columns: 1fr !important;
  }

  .ct-reach-grid,
  .ct-close-inner,
  .st-founder-strip__grid {
    grid-template-columns: 1fr !important;
  }

  .st-journey__step {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .st-journey__step:nth-child(even) .st-journey__photo,
  .st-journey__step:nth-child(even) .st-journey__copy {
    order: unset !important;
    text-align: left !important;
  }

  .pw-footer-pro__head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }

  .hm-credo-giant {
    font-size: clamp(3.5rem, 20vw, 6rem) !important;
  }

  .page-home .pw-salon-hero__copy h1 {
    font-size: clamp(1.65rem, 6vw, 2.35rem) !important;
  }

  .page-home .pw-sl-grid,
  .page-home .pw-trust-grid,
  .page-home .pw-news-grid,
  .page-home .pw-programmes-grid {
    grid-template-columns: 1fr !important;
  }

  .page-about .ab-cine-hero {
    min-height: clamp(320px, 70vh, 420px) !important;
  }
}

@media (max-width: 640px) {
  .page-inner .pj-journal-hero__actions,
  .ct-hero__actions,
  .ow-hero__actions,
  .st-hero__actions,
  .sc-hero-band__actions,
  .ab-cine-hero__actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }

  .page-inner .pj-journal-hero__actions a,
  .ct-hero__btn,
  .ow-hero__btn,
  .st-hero__btn,
  .sc-btn,
  .ab-cine-hero__btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .ct-hero__bar-inner,
  .ow-hero__stats,
  .st-hero__stats,
  .sc-hero-band__bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .pw-footer-pro__trust {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
  }

  .ct-filmstrip__track figure,
  .st-filmstrip__track figure,
  .ow-filmstrip__track figure,
  .sc-filmstrip__track figure {
    flex: 0 0 clamp(200px, 72vw, 260px) !important;
  }

  .section-title h2 {
    font-size: clamp(1.3rem, 5.5vw, 1.75rem) !important;
  }

  .page-inner .pj-journal-hero__copy h1 {
    font-size: clamp(1.5rem, 6.5vw, 1.95rem) !important;
  }

  .pw-topbar__row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
  }

  .pw-topbar__links {
    flex-wrap: wrap !important;
    gap: 0.5rem 0.75rem !important;
  }
}

@media (max-width: 480px) {
  .pw-header__call,
  .pw-header__cta {
    display: none !important;
  }

  .pw-logo__text strong {
    font-size: 0.92rem !important;
  }

  .ct-map-actions,
  .ct-close-actions,
  .st-hero__actions,
  .ow-hero__actions {
    flex-direction: column !important;
    width: 100%;
  }

  .ct-map-actions a,
  .ct-close-actions a {
    width: 100% !important;
    text-align: center !important;
  }

  .ct-form-card,
  .ct-map-card {
    padding: 1.15rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.pw-soul-ready .reveal,
  html.pw-soul-ready .ct-reveal,
  html.pw-soul-ready .ow-reveal,
  html.pw-soul-ready .st-reveal,
  html.pw-soul-ready .pw-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .ct-flow-ribbon__track,
  .st-flow-ribbon__track,
  .hm-ticker-track,
  .sc-marquee__track,
  .ct-filmstrip__track,
  .st-filmstrip__track,
  .ow-filmstrip__track,
  .sc-filmstrip__track {
    animation: none !important;
  }
}