.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease var(--reveal-delay,0ms),transform .65s cubic-bezier(.2,.75,.25,1) var(--reveal-delay,0ms)}
.reveal.revealed{opacity:1;transform:none}
.hero-art{animation:graphic-drift 12s ease-in-out infinite alternate}
.hero-art span:nth-child(1){animation:graphic-pulse 7s ease-in-out infinite}
.hero-art span:nth-child(2){animation:graphic-pulse 9s ease-in-out -3s infinite}
.hero-art span:nth-child(3){animation:graphic-pulse 8s ease-in-out -5s infinite}
.community-orbit{animation:graphic-turn 42s linear infinite}
.community-orbit i{animation:graphic-pulse 6s ease-in-out infinite}
.community-orbit i:nth-child(even){animation-delay:-3s}
@keyframes graphic-drift{to{transform:translate3d(12px,-10px,0) rotate(3deg)}
}
@keyframes graphic-pulse{0%,100%{transform:scale(.96);opacity:.68}
50%{transform:scale(1.05);opacity:1}
}
@keyframes graphic-turn{to{transform:rotate(360deg)}
}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
.hero-art,.hero-art span,.community-orbit,.community-orbit i{animation:none}
}

/* Slightly tighter large typography across the site. */
.hero h1{font-size:clamp(58px,7.6vw,124px)!important}
.page-hero h1{font-size:clamp(48px,6.6vw,98px)!important}
.intro h2,.section-heading h2,.community h2,.contact h2{font-size:clamp(41px,5.9vw,88px)!important}
.contact-intro-copy h2{font-size:clamp(40px,5vw,68px)!important}
.page-intro .page-lead{font-size:clamp(24px,2.8vw,35px)!important}

/* Homepage: backgrounds stay full bleed, but every content area aligns to the same centered 1280px measure as the footer. */
body:not([class]) .site-header,
body:not([class]) .hero,
body:not([class]) .intro,
body:not([class]) .programs,
body:not([class]) .community-contact{
  padding-left:max(24px,calc((100vw - 1280px)/2))!important;
  padding-right:max(24px,calc((100vw - 1280px)/2))!important;
}
body:not([class]) .hero-note{right:max(24px,calc((100vw - 1280px)/2))!important}

/* Homepage hero video background. The smudging image remains underneath as a fallback while YouTube loads. */
body:not([class]) .hero{position:relative;isolation:isolate;background-image:url('/images/home/smudging-ceremony.webp')!important;background-size:cover!important;background-position:center!important;overflow:hidden}
body:not([class]) .hero-video-media{position:absolute;inset:-10%;z-index:0;overflow:hidden;pointer-events:none;background:#082725}
body:not([class]) .hero-video-media iframe{position:absolute;top:50%;left:50%;width:177.78vh;min-width:100%;height:56.25vw;min-height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none}
body:not([class]) .hero:before{z-index:1!important;background:linear-gradient(90deg,rgba(4,34,32,.78),rgba(4,34,32,.34) 58%,rgba(4,34,32,.16))!important}
body:not([class]) .hero-copy,body:not([class]) .hero-note{z-index:3!important}
body:not([class]) .hero-art{display:none!important}

/* Community story now lives inside the dark artwork band above the contact CTA. */
body:not([class]) .community-contact{display:block!important;padding-top:clamp(88px,10vw,138px)!important;padding-bottom:clamp(82px,9vw,126px)!important}
body:not([class]) .community-contact-story{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:clamp(48px,7vw,92px);align-items:end}
body:not([class]) .community-contact .community-copy .eyebrow{margin:0 0 26px;color:#e6b68a!important}
body:not([class]) .community-contact .community-copy h2{margin:0;color:#fff!important}
body:not([class]) .community-contact .community-copy>p:last-child{max-width:680px;margin:28px 0 0;color:rgba(255,255,255,.82)!important;font-size:18px;line-height:1.68}
body:not([class]) .community-contact blockquote{margin:0;padding:0 0 0 26px;border-left:1px solid #e6b68a;font:500 clamp(22px,2.4vw,35px)/1.42 Fraunces,serif;color:#fff}
body:not([class]) .contact-divider{height:1px;margin:clamp(62px,7vw,90px) 0;background:rgba(255,255,255,.22)}
body:not([class]) .contact-cta-grid{display:grid;grid-template-columns:1fr 3fr auto;gap:35px;align-items:center}
body:not([class]) .contact-cta-grid .section-number{margin:0;color:#fff!important}
body:not([class]) .contact-cta-grid h2{margin:0;color:#fff!important}
body:not([class]) .contact-cta-grid div p{max-width:620px;color:rgba(255,255,255,.8)!important;line-height:1.6}

@media(max-width:850px){
  .hero h1{font-size:clamp(42px,12.5vw,60px)!important}
  .page-hero h1{font-size:clamp(40px,11.5vw,58px)!important}
  h2,.section-heading h2,.intro h2,.community h2,.contact h2{font-size:clamp(36px,9.5vw,49px)!important}
  .contact-intro-copy h2{font-size:clamp(36px,10.5vw,49px)!important}
  body:not([class]) .site-header,
  body:not([class]) .hero,
  body:not([class]) .intro,
  body:not([class]) .programs,
  body:not([class]) .community-contact{padding-left:20px!important;padding-right:20px!important}
  body:not([class]) .hero-video-media{inset:-2% -55%}
  body:not([class]) .hero-video-media iframe{width:177.78vh;min-width:145%;height:56.25vw;min-height:100%}
  body:not([class]) .hero-note{left:20px!important;right:auto!important}
  body:not([class]) .community-contact-story{grid-template-columns:1fr;gap:44px}
  body:not([class]) .community-contact blockquote{max-width:680px}
  body:not([class]) .contact-cta-grid{grid-template-columns:1fr;gap:24px}
  body:not([class]) .contact-cta-grid .button{width:max-content}
}
@media(max-width:390px){
  .hero h1{font-size:clamp(38px,12vw,46px)!important}
  .page-hero h1{font-size:clamp(36px,11vw,43px)!important}
  h2,.section-heading h2,.intro h2,.community h2,.contact h2{font-size:clamp(32px,9vw,38px)!important}
}

/* Our Purpose is a 50/50 section; keep its headline compact enough to fit the left column. */
body:not([class]) .intro.purpose-video .purpose-copy h2{font-size:clamp(34px,3.6vw,48px)!important;line-height:1.04!important;letter-spacing:-.03em!important;max-width:560px!important}
@media(max-width:850px){body:not([class]) .intro.purpose-video .purpose-copy h2{font-size:clamp(30px,7.8vw,36px)!important;max-width:520px!important}}

/* Keep the Our Purpose eyebrow as a small label, not a second headline. */
body:not([class]) .intro.purpose-video .purpose-eyebrow{font-size:10px!important;line-height:1.2!important;letter-spacing:.18em!important;margin:0 0 14px!important;font-weight:700!important;text-transform:uppercase!important}
@media(max-width:850px){body:not([class]) .intro.purpose-video .purpose-eyebrow{font-size:9px!important;letter-spacing:.16em!important;margin-bottom:10px!important}}