/* Bezalel — Home page specific styles */

@keyframes heroIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@keyframes heroImgIn{from{opacity:0;transform:scale(1.08);}to{opacity:1;transform:scale(1);}}
@keyframes kenBurns{0%{transform:scale(1);}100%{transform:scale(1.08);}}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}

.hero{
  position:relative;background:var(--cream);
  display:flex;flex-direction:column;align-items:center;
}
/* Crop the empty sky off the top so the wordmark and tagline are visible without scrolling */
.hero-media{position:relative;width:100%;overflow:hidden;aspect-ratio:1672/741;}
.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;
  display:block;animation:heroImgIn 1.2s ease-out both;
}
/* Mobile source is a portrait crop, not the desktop landscape — the fixed 1672/741 ratio
   above would force it through the same wide/short window and crop out the wordmark, so it
   gets its own taller ratio close to the image's own (941/1672), just trimming a bit of the
   empty sky at the very top the same way the desktop crop does. */
@media (max-width:700px){
  .hero-media{aspect-ratio:941/1500;}
}
/* Editorial/luxury-nonprofit typography pass, per the client's exact spec: Cormorant
   Garamond for the emotional tagline (the focal point), DM Sans for the small caption
   above it. Colours pulled from their consolidated palette (#123E68 navy / #B9851C warm
   gold / #D39A20 bright accent gold for the rule) rather than the site's own --navy/--gold
   tokens, since the brief calls out these specific hex values. Both fonts load via Google
   Fonts in index.html's <head>. */
.hero-tagline{
  position:absolute;left:50%;top:72%;transform:translateX(-50%);width:100%;margin:0;
  padding:0 6%;text-align:center;font-family:'Times New Roman',Times,serif;color:#123E68;
  font-size:clamp(19px,2.7vw,34px);font-weight:600;letter-spacing:.1px;line-height:1.15;
  /* Angle bevel: a light source from the upper-left — a soft white highlight offset up-left,
     a soft dark shadow offset down-right — carves a raised, engraved edge into the letters
     instead of a flat colour fill. */
  text-shadow:-1px -1px 1px rgba(255,255,255,.75),1px 1px 1.5px rgba(0,0,0,.3);
}
/* "Beyond the Ninety Nine" (plus the colon) in warm gold, "Every heart, Every story." in
   navy — .hero-tagline's own color:#123E68 above already covers line2, this just overrides
   the gold half. Bevel shadow is inherited from .hero-tagline (not restated) so both
   halves get the same carved edge. */
.hero-tagline-line1,.hero-tagline-sep{color:#B9851C;}
/* Eyebrow caption above the tagline — DM Sans, small, wide-tracked, quiet, so the eye goes
   logo → caption → tagline instead of everything competing at once. Always its own line
   (display:block) regardless of breakpoint, since .hero-tagline-line1/-sep/-line2 below it
   only switch between inline (desktop, one line) and block (mobile, two lines) at 700px.
   Same angle-bevel treatment as the tagline, scaled down for the smaller letterforms. */
.hero-tagline-cds{
  display:block;margin:0 0 10px;
  font-family:'Times New Roman',Times,serif;font-weight:600;text-transform:uppercase;
  letter-spacing:4px;font-size:clamp(16px,1.9vw,21px);color:#123E68;
  text-shadow:-.75px -.75px .75px rgba(255,255,255,.7),.75px .75px 1px rgba(0,0,0,.28);
}
.hero-tagline-rule{
  display:block;width:38px;height:2px;margin:0 auto 16px;
  background:#D39A20;
}
/* Mobile: two short lines ("Beyond the Ninety Nine" / "Every heart, Every story") read
   better on a narrow, tall hero than one long wrapped sentence — desktop keeps the single
   line with the colon. */
@media (max-width:700px){
  .hero-tagline-line1,.hero-tagline-line2{display:block;}
  .hero-tagline-sep{display:none;}
  /* Close the dead gap between the "Shadow of God" heart flourish and the caption below
     it on the tall mobile crop — the block moves up without touching the logo/wordmark. */
  .hero-tagline{top:63%;}
  /* The spec's 4px letter-spacing is a fixed px value, so unlike the clamp()-based font
     sizes it doesn't scale down on its own — at 4px it forces "CHILD DEVELOPMENT SERVICES"
     onto two lines below ~430px wide. Tighten it just enough to keep it on one line. */
  .hero-tagline-cds{letter-spacing:2px;font-size:clamp(13px,3.4vw,16px);}
}

.hero-sr-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* Logo/links stay dark on this page — the hero is light, not a dark photo, so the
   nav text needs navy in both states regardless of the desktop banner treatment below. */
.topnav:not(.solid) .brand{color:var(--navy);}
.topnav:not(.solid) .nav-links a{color:var(--navy);}
.topnav:not(.solid) .nav-links a.active{color:var(--gold);}
.topnav:not(.solid) .nav-toggle span{background:var(--navy);}

/* Desktop: a real solid banner instead of a floating transparent overlay. Stays
   position:fixed (position:sticky silently no-ops here — html/body run overflow-x:hidden
   for the site's full-bleed 100vw sections, which breaks sticky's scroll-container lookup
   in most browsers); the hero gets matching top padding so its image starts right after
   the banner instead of being tucked underneath it. Mobile keeps the existing fixed
   nav + hamburger untouched. */
@media (min-width:861px){
  .home-page .topnav,
  .home-page .topnav.solid{
    background:color-mix(in srgb, var(--cream) 82%, transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 2px 20px rgba(23,59,98,.08);
  }
  .home-page .hero{padding-top:var(--nav-h);}
}

/* Full-screen image used as a background for the About CTA block, top-left aligned */
.about-cta-hero{position:relative;width:100%;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--navy-deeper);}
.about-cta-hero picture{display:block;width:100%;height:100%;}
.about-cta-hero-img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;}
.about-cta-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(8,22,37,.62) 0%,rgba(8,22,37,.4) 34%,rgba(8,22,37,.08) 58%,transparent 78%);
  pointer-events:none;
}
.about-cta-hero-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  padding:calc(var(--nav-h) + 60px) 8% 60px;pointer-events:none;
}
.about-cta-hero-overlay .about-pulse-btn{pointer-events:auto;margin-bottom:26px;}
.about-cta-hero-text{
  font-family:var(--font-display);color:var(--cream);max-width:480px;margin:0 0 30px;
  font-size:18px;line-height:1.7;text-shadow:0 2px 14px rgba(8,22,37,.6);
}
.about-cta-hero-overlay .hero-actions{justify-content:flex-start;pointer-events:auto;}

.about-pulse-btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 32px;border-radius:999px;
  background:var(--navy-deep);color:var(--cream);font-size:14.5px;font-weight:600;letter-spacing:.02em;
  border:1px solid rgba(201,154,58,.55);box-shadow:0 10px 30px rgba(8,22,37,.35);
  animation:pulseGlow 2.6s ease-in-out infinite;transition:transform .25s ease;
}
.about-pulse-btn:hover{transform:translateY(-2px);}
.about-pulse-btn svg{width:16px;height:16px;color:var(--gold-light);}
@keyframes pulseGlow{
  0%{box-shadow:0 0 0 0 rgba(201,154,58,.45);}
  70%{box-shadow:0 0 0 14px rgba(201,154,58,0);}
  100%{box-shadow:0 0 0 0 rgba(201,154,58,0);}
}
@media (max-width:760px){
  .about-cta-hero{height:88vh;height:88svh;}
  .about-cta-hero-overlay{padding-left:6%;padding-right:6%;}
  .about-cta-hero-text{max-width:100%;}
}

.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

.center-cta{text-align:center;margin-top:44px;}

/* Final CTA */
.final-cta{background:linear-gradient(180deg,var(--cream-2),var(--cream));}

/* ---------- What We Do — Hero ---------- */
.what-we-do-hero{position:relative;width:100%;min-height:74vh;overflow:hidden;background:var(--navy-deeper);}
.what-we-do-hero-img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;position:absolute;inset:0;opacity:.62;}
.what-we-do-scrim-top{position:absolute;top:0;left:0;right:0;height:42%;background:linear-gradient(to bottom,rgba(8,22,37,.6),transparent);pointer-events:none;}
.what-we-do-scrim-right{position:absolute;top:0;right:0;bottom:0;width:62%;background:linear-gradient(to left,rgba(8,22,37,.65),transparent);pointer-events:none;}
.what-we-do-hero-overlay{
  position:relative;z-index:2;min-height:74vh;display:flex;flex-direction:column;
  padding:36px 6% 44px;
}
.what-we-do-eyebrow{
  text-align:center;color:var(--gold-light);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;text-shadow:0 2px 10px rgba(8,22,37,.6);
}
.what-we-do-text-block{margin-top:12px;margin-left:auto;text-align:right;max-width:min(780px,86%);}
.what-we-do-text-block h1{
  color:var(--cream);font-size:clamp(20px,3.2vw,40px);margin:0 0 16px;line-height:1.15;white-space:nowrap;
  text-shadow:0 2px 16px rgba(8,22,37,.6);
}
.what-we-do-text-block p{
  font-family:var(--font-display);color:var(--cream);font-size:clamp(14px,1.6vw,17px);line-height:1.75;margin:0;
  text-shadow:0 2px 12px rgba(8,22,37,.6);
}
.what-we-do-text-block strong{color:var(--gold-light);font-style:italic;}
.what-we-do-hero-cta{margin-top:auto;padding-top:40px;display:flex;justify-content:center;}
@media (max-width:700px){
  .what-we-do-text-block{text-align:left;margin-left:0;}
  .what-we-do-text-block h1{white-space:normal;}
}

/* ---------- What We Do — Orbit diagram ---------- */
@keyframes orbitSpin{to{transform:rotate(360deg);}}
@keyframes orbitCounterSpin{to{transform:rotate(-360deg);}}
@keyframes orbitGlowPulse{0%,100%{opacity:.55;}50%{opacity:1;}}

.orbit-section{padding:0;}

/* Full-bleed background art spanning edge to edge — heading and orbit both sit on top of it.
   --stage-size lives here (not on .orbit-stage) so the box's own height can be calculated
   directly from it — height:calc(top-anchor + stage + bottom-margin) — instead of a fixed
   min-height guess. A fixed px height leaves a growing dead-space gap on short viewports,
   because --stage-size shrinks with 64vh while a flat min-height doesn't shrink with it. */
.orbit-full-bg{
  --stage-size:min(640px,64vh,78vw);
  --stage-top:210px;
  position:relative;width:100%;overflow:hidden;
  height:calc(var(--stage-top) + var(--stage-size) + 50px);
  min-height:520px;
}
.orbit-full-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block;}

.orbit-full-bg-heading{position:relative;z-index:2;padding:28px 6% 0;text-align:center;}
.orbit-full-bg-heading h2{
  margin:0 0 8px;
  text-shadow:-1px -1px 0 rgba(255,255,255,.65),1px 1px 1px rgba(120,85,20,.4),2px 2px 4px rgba(120,85,20,.2);
}
.orbit-full-bg-heading .center-lead{margin:0 auto;color:var(--navy);}

/* Anchored a fixed distance below the heading (not centred in the image) so there's no dead
   space at the bottom of the section once the orbit's own height is accounted for.
   Horizontal centering uses a negative margin (not transform) because .orbit-stage also
   carries the .reveal scroll-animation class, whose .is-visible state sets its own `transform`
   — that rule has higher specificity (two classes) and would silently overwrite a
   transform-based translate(), shifting the orbit sideways the moment it scrolls into view. */
.orbit-stage{
  position:absolute;left:50%;top:var(--stage-top);z-index:2;
  width:var(--stage-size);aspect-ratio:1/1;
  margin-left:calc(var(--stage-size) / -2);
}
@media (max-width:600px){
  .orbit-full-bg{--stage-size:min(300px,68vw);--stage-top:202px;height:calc(var(--stage-top) + var(--stage-size) + 40px);min-height:460px;}
  .orbit-full-bg-heading{padding-top:20px;}
  .orbit-stage{margin-top:0;}
}
.orbit-ring{
  position:absolute;inset:9%;border-radius:50%;border:2px dashed rgba(201,154,58,.5);
  box-shadow:0 0 0 1px rgba(201,154,58,.12) inset,0 0 34px rgba(201,154,58,.2);
}
.orbit-center{
  position:absolute;top:50%;left:50%;width:38%;aspect-ratio:1/1;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--navy-deeper);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px var(--cream),0 12px 34px rgba(23,59,98,.35),0 0 46px rgba(201,154,58,.4);
  z-index:3;
}
.orbit-center-badge{position:relative;width:88%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px rgba(201,154,58,.6),0 4px 14px rgba(0,0,0,.3);}
.orbit-center-badge img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.22);}
.orbit-center-badge::after,.orbit-item-inner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:48%;z-index:1;
  background:linear-gradient(to top,rgba(8,22,37,.88) 0%,rgba(8,22,37,.55) 45%,transparent 100%);
  pointer-events:none;
}
.orbit-badge-caption{
  position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;text-align:center;padding:0 10% 10%;
  color:var(--cream);font-weight:700;line-height:1.2;text-shadow:0 1px 6px rgba(0,0,0,.75),0 0 14px rgba(0,0,0,.4);
}
.orbit-center-badge .orbit-badge-caption{font-family:var(--font-display);letter-spacing:.06em;font-size:clamp(13px,2.2vw,17px);}

.orbit-track{position:absolute;inset:0;animation:orbitSpin 36s linear infinite;z-index:2;}

.orbit-item{
  position:absolute;top:50%;left:50%;
  width:calc(var(--stage-size) * .28);height:calc(var(--stage-size) * .28);
  margin:calc(var(--stage-size) * -.14) 0 0 calc(var(--stage-size) * -.14);
  transform:rotate(var(--angle)) translateY(calc(var(--stage-size) * -.41)) rotate(calc(-1 * var(--angle)));
}
.orbit-item-inner{
  position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 3px var(--cream),0 8px 22px rgba(23,59,98,.2),0 0 20px rgba(201,154,58,.3);
  animation:orbitCounterSpin 36s linear infinite;
}
.orbit-item-inner.c-navy{box-shadow:0 0 0 3px var(--cream),0 0 0 5px rgba(23,59,98,.55),0 8px 22px rgba(23,59,98,.2);}
.orbit-item-inner.c-gold{box-shadow:0 0 0 3px var(--cream),0 0 0 5px rgba(201,154,58,.75),0 8px 22px rgba(23,59,98,.2);}
.orbit-item-inner.c-olive{box-shadow:0 0 0 3px var(--cream),0 0 0 5px rgba(110,123,63,.65),0 8px 22px rgba(23,59,98,.2);}
.orbit-item-inner img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.22);}
.orbit-item-inner .orbit-badge-caption{font-size:clamp(11px,1.8vw,13px);}

@media (prefers-reduced-motion:reduce){
  .orbit-track,.orbit-item-inner,.orbit-glow{animation:none;}
}

/* ---------- News & Events ---------- */
.news-date{
  display:inline-block;font-family:var(--font-display);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
/* Study-recruitment cards: taller copy than a typical news blurb, so the paragraph needs
   its own bottom margin (the base .card p{margin:0} assumes it's the last element) to
   clear the "Take Part" button that follows it. */
.news-study-card h3{font-size:18px;line-height:1.35;}
.news-study-card p{margin:0 0 20px;}