/* Photography and video layer: hero video, page banners with photos, program photos, video bands. */

/* ---------- Homepage hero: video behind the same forest-green overlay and copy ---------- */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--forest)}
.hero-media video{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-media:after{content:'';position:absolute;inset:0;background:var(--forest);opacity:.8}
.hero:before,.hero:after{z-index:1}
.hero .video-toggle{left:auto;right:8vw;bottom:62px}
.hero-portrait img.is-photo{transform:none;object-position:50% 50%}

/* ---------- Pause / play control shared by background videos ---------- */
.video-toggle{position:absolute;z-index:5;left:auto;right:24px;bottom:22px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(10,30,25,.45);color:#fff;font-size:12px;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px)}
.video-toggle:hover,.video-toggle:focus-visible{border-color:var(--lime);color:var(--lime)}
.video-toggle:focus-visible{outline:3px solid #a9c94d;outline-offset:3px}

/* ---------- Full-width video band ---------- */
.video-band{position:relative;min-height:470px;display:flex;align-items:center;overflow:hidden;background:var(--forest);color:#fff}
.video-band-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.video-band:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,59,50,.94) 0%,rgba(20,59,50,.78) 45%,rgba(20,59,50,.35) 100%);pointer-events:none}
.video-band-copy{position:relative;z-index:2;padding-top:80px;padding-bottom:80px;width:100%}
.video-band-copy>*{max-width:620px}
.video-band-copy .section-kicker{color:#c9db82}
.video-band-copy h2{font-family:var(--serif);font-weight:500;font-size:clamp(40px,4.6vw,64px);line-height:1.1;letter-spacing:-.04em;margin:0 0 18px;color:#fff}
.video-band-copy h2 em{color:var(--lime)}
.video-band-copy p{font-size:17px;line-height:1.8;color:#d6e0d8;margin:0 0 26px;max-width:520px}

/* ---------- Page banners with a photo on the right ---------- */
.page-hero.has-photo{padding-right:calc(8vw + 42%);min-height:430px}
.page-hero.has-photo:after{display:none}
.page-hero-photo{position:absolute;top:56px;bottom:56px;right:8vw;width:38%;margin:0;overflow:hidden;border-radius:160px 4px 4px 4px;box-shadow:16px 16px 0 #dfe4d2}
.page-hero-photo img{width:100%;height:100%;object-fit:cover}
.page-about .about-hero.has-photo>.page-hero-photo{position:absolute;z-index:1}
.page-about .about-hero.has-photo::before{display:none}

/* ---------- Photos inside existing sections ---------- */
.detail-art.has-photo{padding:0;background:var(--forest)}
.detail-art.has-photo:before,.detail-art.has-photo:after{display:none}
.detail-art.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.detail-art.has-photo small{z-index:2;background:rgba(251,250,246,.92);padding:5px 8px;left:10px;bottom:10px}
.story-photo{margin:28px 0 0;overflow:hidden;border-radius:3px}
.story-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.section-photo{margin:0 0 38px;overflow:hidden;border-radius:3px}
.section-photo img{width:100%;height:320px;object-fit:cover;object-position:center 45%}
.card-photo{display:block;margin:-25px -25px 22px;height:190px;overflow:hidden}
.involve-grid article:has(.card-photo)::before{position:absolute;top:14px;left:14px;z-index:2;margin:0;background:rgba(251,250,246,.94)}
.card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.involve-grid article:hover .card-photo img{transform:scale(1.04)}
.panel-photo{display:block;margin:-31px -31px 24px;height:220px;overflow:hidden}
.panel-photo img{width:100%;height:100%;object-fit:cover}
.split-photo{overflow:hidden;border-radius:3px;min-height:280px}
.split-photo img{width:100%;height:100%;object-fit:cover}

@media(max-width:980px){
  .page-hero.has-photo{padding-right:6vw;min-height:0}
  .page-hero-photo,.page-about .about-hero.has-photo>.page-hero-photo{position:relative;top:auto;bottom:auto;right:auto;width:100%;height:280px;margin:0 0 30px;border-radius:120px 4px 4px 4px}
}
@media(max-width:700px){
  .hero .video-toggle{right:6vw;bottom:60px}
  .video-band{min-height:420px}
  .video-band:after{background:rgba(20,59,50,.82)}
  .video-band-copy{padding-top:64px;padding-bottom:64px}
  .page-hero-photo{height:230px;box-shadow:10px 10px 0 #dfe4d2}
  .section-photo img{height:220px}
}

/* ---------- Quote band video, CTA photos, founders ---------- */
.quote-band .hero-media:after{opacity:.86}
.quote-inner{z-index:2}
.quote-orbit{z-index:2}
.cta-photo{position:absolute;inset:34px;border-radius:50%;overflow:hidden;z-index:1;border:3px solid rgba(217,241,120,.5)}
.cta-photo img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.about-cta.has-photo{position:relative;overflow:hidden}
.about-cta-photo{position:absolute;inset:0;margin:0;opacity:.22}
.about-cta-photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:grayscale(.2)}
.about-cta.has-photo>div{position:relative;z-index:1}
.involved-why.has-photo{grid-template-columns:150px 1fr 1.2fr auto}
.why-photo{margin:0;width:150px;height:150px;border-radius:50%;overflow:hidden}
.why-photo img{width:100%;height:100%;object-fit:cover}
.founder-photo.has-photo,.page-about .about-founders .founder-photo.has-photo{filter:none;background:#e9ece4}
.founder-photo.has-photo:before,.founder-photo.has-photo:after{display:none}
.founder-photo.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.founder-photo.has-photo i{background:rgba(251,250,246,.9);padding:5px 8px;left:12px;bottom:12px;color:var(--forest)}
@media(max-width:980px){.involved-why.has-photo{grid-template-columns:1fr}.why-photo{width:120px;height:120px}}
@media(max-width:700px){.cta-photo{inset:18px}}
@media(min-width:981px){.page-home .founder-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.page-home .founder-photo.has-photo{height:300px}}

/* ---------- Pillar icons (homepage "Our shared foundation") ---------- */
.pillar-card .pillar-symbol{width:68px;height:68px;border-radius:20px;color:var(--forest);position:relative;z-index:1;background:color-mix(in srgb,var(--hue) 32%,#fff);border-color:color-mix(in srgb,var(--hue) 60%,#fff);transition:transform .3s,background .3s,box-shadow .3s}
.pillar-icon{width:40px;height:40px;overflow:visible}
.pillar-icon .icon-fill{fill:#fff;fill-opacity:.9}
.pillar-icon .icon-line,.pillar-icon .icon-flag,.pillar-icon .icon-spark{stroke:#607b17}
.pillar-icon .icon-line{stroke-dasharray:30;stroke-dashoffset:0;transition:stroke-dashoffset .9s ease}
.pillar-card:hover .pillar-symbol,.pillar-card:focus-visible .pillar-symbol{transform:translateY(-3px) rotate(-4deg);background:#fff;box-shadow:0 12px 26px rgba(18,58,82,.13)}
.pillar-card:hover .icon-line{animation:pillar-pulse 1.1s ease}
.pillar-card:hover .icon-spark{animation:pillar-spark .8s ease}
@keyframes pillar-pulse{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@keyframes pillar-spark{0%,100%{opacity:1}50%{opacity:.2}}
@media(max-width:700px){.pillar-card .pillar-symbol{width:56px;height:56px;border-radius:16px}.pillar-icon{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.pillar-card:hover .icon-line,.pillar-card:hover .icon-spark{animation:none}.pillar-card:hover .pillar-symbol{transform:none}}

/* ---------- Value icons (About: "What guides us") ---------- */
.value-grid article.has-icon>span:first-child{position:absolute;top:16px;right:16px;width:auto;height:auto;background:none;border-radius:0;font-size:11px;letter-spacing:.1em;color:#97a27f}
.value-grid article .value-icon{width:64px;height:64px;border-radius:19px;display:grid;place-items:center;color:var(--forest);background:color-mix(in srgb,var(--hue) 34%,#fff);border:1px solid color-mix(in srgb,var(--hue) 62%,#fff);transition:transform .3s,box-shadow .3s}
.value-icon svg{width:38px;height:38px;overflow:visible}
.value-icon .icon-fill{fill:#fff;fill-opacity:.92}
.value-icon .icon-accent{stroke:#607b17}
.value-icon .icon-draw{stroke-dasharray:24;stroke-dashoffset:0}
.value-icon .icon-beat{transform-origin:12px 8.5px}
.value-grid article.has-icon:hover .value-icon{transform:translateY(-3px) rotate(-4deg);box-shadow:0 12px 26px rgba(18,58,82,.13)}
.value-grid article.has-icon:hover .icon-draw{animation:value-draw .9s ease}
.value-grid article.has-icon:hover .icon-beat{animation:value-beat .9s ease}
.value-grid article.has-icon:hover .icon-spark{animation:pillar-spark .8s ease}
@keyframes value-draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes value-beat{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(.95)}}
@media(max-width:700px){.value-grid article .value-icon{width:54px;height:54px;border-radius:16px}.value-icon svg{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.value-grid article.has-icon:hover .value-icon{transform:none}.value-grid article.has-icon:hover :is(.icon-draw,.icon-beat,.icon-spark){animation:none}}

/* With "Who we are" the menu has nine items; tighten it just above the mobile-menu breakpoint. */
@media (min-width: 981px) and (max-width: 1060px) { .main-nav { gap: 13px; font-size: 13.6px; } .main-nav .nav-donate { padding: 10px 12px; gap: 10px; } }

/* ---------- Contact form feedback ---------- */
.contact-form{scroll-margin-top:110px}
.form-alert{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:4px;margin-bottom:8px;border:1px solid}
.form-alert p{margin:0;font-size:15px;line-height:1.6}
.form-alert>span{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff}
.form-alert-success{background:#eef6e2;border-color:#bcd68f;color:#2f4d14}
.form-alert-success>span{background:#5f8a23}
.form-alert-error{background:#fbebe8;border-color:#e7b4ab;color:#7a2a1d}
.form-alert-error>span{background:#b2432f}
.contact-form [aria-invalid="true"]{border-color:#b2432f;background:#fff8f6}
.field-error{color:#a23a27;font-size:13.5px;font-weight:700;margin:-3px 0 4px}
.contact-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ---------- Mobile: steady header, no sideways scrolling ---------- */
/* backdrop-filter made the header the containing block for the fixed off-canvas menu, so the hidden
   drawer widened the page (horizontal scroll) and the page jumped when the menu opened. */
@media (max-width: 980px) {
  html, body { overflow-x: clip; }
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(251,250,246,.98); }
  .menu-toggle { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 12px; }
  .menu-toggle b { font-size: 24px; }
  .mobile-menu-head { justify-content: flex-end; }
}

/* The logo file now has a transparent background, so it no longer needs blending into the header. */
.site-header .brand-logo{mix-blend-mode:normal}

/* ---------- Section headlines: about 40% smaller than the original design (75px -> 45px), never below
   33px. One rule to tune: change the clamp() values. ---------- */
.intro-grid h2,.section-head h2,.feature-copy h2,.founders-section h2,.cta-card h2,.about-story h2,.story-main h2,
.values-section h2,.detail-copy h2,.iwtc-callout h2,.learning-copy h2,.tuition-heading h2,.admissions-section h2,
.donate-message h2,.events-feature h2,.course-more-heading h2,.open-house h2,.events-footer h2,.involved-why h2,
.contact-form-section h2,.about-cta h2,.video-band-copy h2{font-size:clamp(33px,3.51vw,45px);line-height:1.15}
.values-section h2{margin-bottom:24px}

/* ---------- IWTC: what tuition includes ---------- */
.tuition-includes{margin-top:22px;padding:18px 20px;background:#eef6e2;border:1px solid #cfe1b0;border-radius:4px}
.tuition-includes>span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;color:#4f6a10;margin-bottom:10px}
.tuition-includes ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tuition-includes li{position:relative;padding-left:30px;font-weight:700;color:var(--forest)}
.tuition-includes li::before{content:'✓';position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:#5f8a23;color:#fff;font-size:12px;display:grid;place-items:center}

/* ---------- Page titles: one uniform size on every page (homepage hero, page banners, IWTC, events, blog posts),
   scaled down in step with the section headlines above. ---------- */
.hero h1,.page-hero h1,.nursing-hero h1,.event-hero h1,.post-header h1{font-size:clamp(40px,4.4vw,64px);line-height:1.08}

/* ---------- Homepage hero: cross-fading real photos behind the same forest overlay ---------- */
.hero-slides>div{position:absolute;inset:0}
.hero-slides img.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;opacity:0;animation:hero-fade 30s infinite}
.hero-slides img.hero-slide:nth-child(1){animation-delay:0s}
.hero-slides img.hero-slide:nth-child(2){animation-delay:6s}
.hero-slides img.hero-slide:nth-child(3){animation-delay:12s}
.hero-slides img.hero-slide:nth-child(4){animation-delay:18s}
.hero-slides img.hero-slide:nth-child(5){animation-delay:24s}
@keyframes hero-fade{0%{opacity:0}5%{opacity:1}20%{opacity:1}25%{opacity:0}100%{opacity:0}}
.hero-slides.is-paused img.hero-slide{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-slides img.hero-slide{animation:none}.hero-slides img.hero-slide:nth-child(1){opacity:1}}
/* Photo bands use the same layout as the video bands */
img.video-band-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}

/* Programs: the Community Health brochure in the health card (click to read it full screen) */
.detail-poster{position:absolute;inset:0;display:block;cursor:zoom-in}
.detail-art.has-photo img.is-poster{object-position:center 18%;transition:transform .4s}
.detail-poster:hover img.is-poster{transform:scale(1.03)}
.detail-poster:focus-visible{outline:3px solid #a9c94d;outline-offset:3px}

/* Who we are: keep the finishers' faces centred in the "What guides us" banner */
.values-section .section-photo img{object-position:center 10%}

/* ---------- Home: mission & vision cards ---------- */
.home-mission{padding-top:96px;padding-bottom:96px;background:var(--paper)}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mv-card{position:relative;overflow:hidden;padding:44px 44px 46px;border-radius:22px;transition:transform .3s,box-shadow .3s}
.mv-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(20,59,50,.18)}
.mv-card::after{content:'';position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;top:-90px;opacity:.18;background:currentColor;pointer-events:none}
.mv-mission{background:linear-gradient(145deg,#143b32 0%,#1f5546 100%);color:#e8efe8}
.mv-mission::after{color:var(--lime)}
.mv-vision{background:linear-gradient(145deg,#d9f178 0%,#c3e05b 100%);color:#143b32}
.mv-vision::after{color:#fff}
.mv-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;margin-bottom:26px}
.mv-mission .mv-icon{background:rgba(217,241,120,.16);color:var(--lime)}
.mv-vision .mv-icon{background:rgba(20,59,50,.1);color:#143b32}
.mv-icon svg{width:34px;height:34px}
.mv-card small{display:block;font-size:12px;font-weight:800;letter-spacing:.2em;margin-bottom:12px}
.mv-mission small{color:var(--lime)}
.mv-vision small{color:#3d5a12}
.mv-card .mv-lead{font-family:var(--serif);font-size:clamp(23px,2.1vw,30px);line-height:1.3;letter-spacing:-.015em;margin:0 0 16px;color:inherit}
.mv-mission .mv-lead{color:#fff}
.mv-card p{font-size:16px;line-height:1.75;margin:0;position:relative;z-index:1}
.mv-mission p:not(.mv-lead){color:#c7d4ca}
.mv-vision p:not(.mv-lead){color:#2b4a3f}
.home-values{padding-top:84px;padding-bottom:90px}
@media(max-width:860px){.mv-grid{grid-template-columns:1fr}.mv-card{padding:32px 26px 34px}.home-mission{padding-top:64px;padding-bottom:64px}}
@media(prefers-reduced-motion:reduce){.mv-card:hover{transform:none}}

/* ---------- Main menu: highlight the current page ---------- */
.main-nav>a:not(.nav-donate){position:relative}
.main-nav>a.is-active:not(.nav-donate){color:var(--forest)}
.main-nav>a.is-active:not(.nav-donate)::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:3px;border-radius:3px;background:#9cbf3c}
.main-nav .nav-donate.is-active{box-shadow:0 0 0 3px #d9f178}
@media(max-width:980px){
  .main-nav>a.is-active:not(.nav-donate){color:#4f6a10;font-weight:800;padding-left:14px}
  .main-nav>a.is-active:not(.nav-donate)::after{left:0;right:auto;top:14px;bottom:14px;width:4px;height:auto}
}