/* ============================================================
   HRound — shared design layer
   Loaded AFTER styles.css on every page. Retargets the existing
   class vocabulary onto the design language introduced on the
   PHRi page: Outfit headings, neutral surfaces, soft hairline
   cards, restrained accent colour.
   Content and markup on each page stay untouched.
   ============================================================ */

/* ---------- 1. Palette ----------------------------------- */
:root {
  --bg:        #FFFFFF;
  --bg-soft:   #F7F7F9;
  --bg-tint:   #F0F0F4;
  --bg-amber:  #FAF4E9;

  --text:      #1E1E30;
  --text-2:    #555560;
  --text-3:    #888896;
  --muted:     #888896;

  --rust:         #B5451B;
  --rust-hi:      #C85A2E;
  --rust-deep:    #96380F;
  --rust-heading: #B5451B;

  --hairline:   #E2E2EA;
  --hairline-2: #D5D5E0;

  --card-shadow:       0 4px 16px rgba(30, 30, 48, 0.05);
  --card-shadow-hover: 0 8px 24px rgba(30, 30, 48, 0.08);

  --font-display: 'Outfit', 'Work Sans', sans-serif;
}

/* ---------- 2. Typography -------------------------------- */
body { color: var(--text-2); }

/* The wordmark keeps the original condensed face — it is the logo. */
.wordmark {
  font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif !important;
}

/* Display headings: Outfit, sentence case, normal tracking. */
.hero__h1,
.page-header__h1,
.section__h,
.cert-block__h,
.join__h,
.program-card__title,
.banner-official__title,
.eligibility__title,
.founder__name,
.mv__h {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
  text-shadow: none !important;
  color: var(--text);
}

/* Big page/hero headings get a slightly tighter measure. */
.hero__h1,
.page-header__h1 { text-wrap: balance; }

/* The original sizing was tuned for a condensed display face. Outfit is
   much wider, and the container caps at 1180px while the font kept
   scaling with the viewport — past ~1200px the headline outgrew its
   column and wrapped mid-phrase. Cap it so each line stays on one line. */
.hero__h1 { font-size: clamp(38px, 5.6vw, 82px) !important; }
.page-header__h1 { font-size: clamp(34px, 5vw, 72px) !important; }

/* Numeric display figures follow the same face. */
.hrci-stat__num,
.value-item__num,
.weighting-row__pct,
.cert-path__step {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}

/* Micro section labels ("Our Values", "About Kristina", …) are removed
   from the markup. Anything that reappears stays hidden. */
.section__eyebrow,
.page-header__eyebrow,
.mv__eyebrow,
.partnership__eyebrow {
  display: none !important;
}

.founder__title {
  color: var(--text-3) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
}

/* A thin rust marker on each value row — small, repeated accent. */
.value-item { position: relative; padding-left: 16px !important; }
.value-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 3px;
  height: 18px;
  background: var(--rust);
  border-radius: 2px;
}

/* Stat figures pick up the accent too. */
.hrci-stat__num { color: var(--rust) !important; }

/* ---------- 3. Surfaces & cards -------------------------- */
.program-card,
.mv__card,
.cert-block,
.entry_block,
.join__card,
.weighting-row,
.founder__photo--img {
  border-radius: 12px !important;
}

.program-card,
.mv__card,
.cert-block {
  border: 0.5px solid var(--hairline) !important;
  box-shadow: none !important;
  background: var(--bg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.program-card:hover,
.mv__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow) !important;
}

/* The values list and the HRCI intro are running text, not cards —
   keep them unboxed so a 5-item list can't leave an orphan tile. */
.value-item {
  border: none !important;
  border-top: 0.5px solid var(--hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hrci-intro {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ---------- 4. Buttons ----------------------------------- */
.btn {
  border-radius: 8px !important;
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: background .18s ease, border-color .18s ease, transform .12s ease !important;
}
.btn:hover { transform: translateY(-1px); }

/* Primary = dark, matching the PHRi page's primary action. */
.btn--primary {
  background: var(--text) !important;
  border: 1.5px solid var(--text) !important;
  color: #fff !important;
}
.btn--primary:hover { background: #2E2E50 !important; border-color: #2E2E50 !important; }

.btn--ghost-dark,
.btn--ghost {
  background: #fff !important;
  border: 1.5px solid var(--hairline) !important;
  color: var(--text) !important;
}
.btn--ghost-dark:hover,
.btn--ghost:hover { border-color: var(--rust) !important; }

.btn--white {
  background: #fff !important;
  border: 1.5px solid var(--hairline) !important;
  color: var(--text) !important;
}

/* The nav's Join button stays the one saturated accent on the page. */
nav .btn--primary {
  background: var(--rust) !important;
  border-color: var(--rust) !important;
}
nav .btn--primary:hover {
  background: var(--rust-hi) !important;
  border-color: var(--rust-hi) !important;
}

/* ---------- 4a. Program card: corner chip + CTA ---------- */
/* The status chip sits in the card's top-right corner so the body copy
   and the action below it read as one column. */
.program-card__chip--corner {
  position: absolute;
  top: 18px;
  right: 18px;
  margin: 0;
}

/* Card actions. `.program-card__cta` is the pre-existing "Learn more →"
   link on the PHRi card; `.program-card__action` is the SPHRi request
   button. Both get the same outlined-button treatment so the two cards
   read as siblings rather than one link and one button. */
.program-card__cta,
.program-card__action {
  margin-top: auto;          /* pin to the bottom of the card */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  background: #fff;
  border: 1.5px solid var(--hairline);
  border-radius: 8px;
  padding: 11px 20px;
  text-decoration: none;
  transition: border-color .18s ease, transform .12s ease;
}
.program-card:hover .program-card__cta,
.program-card__action:hover {
  border-color: var(--rust);
  color: var(--rust);
  transform: translateY(-1px);
}

/* Narrow cards: the long chip would collide with the seal, so let it
   flow inline again instead of floating in the corner. */
@media (max-width: 620px) {
  .program-card__chip--corner {
    position: static;
    align-self: flex-start;
  }
  .program-card__cta,
  .program-card__action { width: 100%; box-sizing: border-box; justify-content: center; }
}

/* ---------- 4d. Homepage hero photo background ----------- */
/* Full-bleed photo behind the hero copy, same treatment as the PHRi
   page: a flat dark base with the image scrimmed over it so white text
   keeps its contrast wherever the photo happens to be bright. */
.hero--photo {
  position: relative;
  isolation: isolate;
  background: #1A1A2A;
  overflow: hidden;
}
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Two scrims: a left-weighted one for the headline, plus a flat wash so
     the body copy on the right still clears contrast over bright glass. */
  background-image:
    linear-gradient(to right,
      rgba(20,20,34,0.88) 0%,
      rgba(20,20,34,0.78) 32%,
      rgba(20,20,34,0.60) 64%,
      rgba(20,20,34,0.52) 100%),
    linear-gradient(to bottom,
      rgba(20,20,34,0.22) 0%,
      rgba(20,20,34,0.04) 45%,
      rgba(20,20,34,0.38) 100%),
    url('hero-community.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, 50% 44%;
  background-repeat: no-repeat;
}

/* Hero copy inverts onto the photo. */
.hero--photo .hero__h1 { color: #fff !important; }
/* Rust reads dark against the photo, so use a lifted tint of the same
   hue — still rust, but with enough luminance to hold on the scrim. */
.hero--photo .hero__h1 .accent-rust { color: #D9663A !important; }
.hero--photo .hero__sub p { color: rgba(255,255,255,0.82) !important; }

.hero--photo .hero__grid { padding-bottom: clamp(56px, 7vw, 88px) !important; }
.hero--photo .hero__inner { padding-top: clamp(72px, 9vw, 128px); }
/* Give the photo enough room to actually read as a scene. */
.hero--photo { min-height: min(78vh, 720px); display: flex; flex-direction: column; }
.hero--photo .hero__inner { flex: 1; display: flex; align-items: center; }
.hero--photo .hero__grid { width: 100%; }

/* Buttons: one solid white, one outlined — legible on the photo. */
.hero--photo .hero__ctas .btn--ghost-dark {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--text) !important;
}
.hero--photo .hero__ctas .btn--ghost-dark:hover {
  background: rgba(255,255,255,0.88) !important;
}
.hero--photo .hero__ctas .btn--white {
  background: transparent !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: #fff !important;
}
.hero--photo .hero__ctas .btn--white:hover {
  border-color: #fff !important;
  background: rgba(255,255,255,0.10) !important;
}

/* The pillars band sits on the same photo, separated by a hairline. */
.hero--photo .pillars-band {
  background: rgba(20,20,34,0.55) !important;
  backdrop-filter: blur(2px);
  border-top: 1px solid rgba(255,255,255,0.16) !important;
  border-bottom: none !important;
}
.hero--photo .pillar__num { display: none !important; }
/* Dividers are the light-theme hairline; on the dark hero they need to
   be a translucent white instead or they disappear. */
.hero--photo .pillar,
.hero--photo .pillar:first-child,
.hero--photo .pillar:last-child {
  border-color: rgba(255,255,255,0.14) !important;
}
.hero--photo .pillar__title { color: #fff !important; }
.hero--photo .pillar__desc { color: rgba(255,255,255,0.68) !important; }

@media (max-width: 900px) {
  .hero__photo {
    background-image:
      linear-gradient(to bottom,
        rgba(20,20,34,0.88) 0%,
        rgba(20,20,34,0.78) 45%,
        rgba(20,20,34,0.86) 100%),
      url('hero-community.jpg');
    background-size: cover, cover;
    background-position: center, 50% 45%;
  }
}

/* ---------- 4b. Homepage announcement line --------------- */
/* Rust, not navy: the bar sits directly above a dark hero photo, and a
   dark bar just merges into it. */
.announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--rust);
  color: #fff;
  text-decoration: none;
  font-family: 'Work Sans', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  transition: background .2s ease;
}
.announce:hover { background: #C85A2E; }
.announce__text { color: rgba(255,255,255,0.9); }
.announce__text strong { color: #fff; font-weight: 700; }
.announce__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: announce-pulse 2.4s ease-in-out infinite;
}
@keyframes announce-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}
.announce__arrow {
  flex-shrink: 0;
  transition: transform .2s ease;
}
.announce:hover .announce__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .announce__dot { animation: none; }
}
@media (max-width: 560px) {
  .announce { font-size: 13.5px; padding: 12px 16px; gap: 8px; }
  /* Drop the dot and let text + arrow sit together, otherwise the three
     flex items spread to the edges once the text wraps. */
  .announce__dot { display: none; }
  .announce__text { flex: 0 1 auto; }
}

/* ---------- 4c. Trademark notice ------------------------- */
/* It used to be a white band wedged between the dark final CTA and the
   dark footer. Folding it into the footer's colour makes it read as the
   footer's fine print instead of a stray strip. */
.trademark-disclaimer {
  background: var(--footer-bg) !important;
  border-top: 4px solid var(--rust) !important;
  border-bottom: none !important;
  padding: clamp(20px, 2.6vw, 26px) clamp(20px, 3vw, 32px) 0 !important;
}
.trademark-disclaimer p {
  color: var(--footer-muted) !important;
  font-size: 11.5px !important;
  opacity: .85;
}
/* The footer now continues the same block, so it no longer needs its own
   rust rule on top. */
.trademark-disclaimer + .footer {
  border-top: none !important;
  padding-top: clamp(24px, 3.5vw, 36px) !important;
}

/* ---------- 5. Section rhythm ---------------------------- */
.section--soft { background: var(--bg-soft); }

/* Decorative hero circles removed — hidden here too so they can't return
   if the markup is ever restored. */
.hero__decor-ring,
.hero__decor-blob { display: none !important; }

/* ---------- 6. Scroll reveal -----------------------------
   The hidden state is gated on `.js-anim`, set by an inline script in
   <head>. If scripting is unavailable or the script fails, the class is
   never added and every element simply renders visible — content is
   never hidden by CSS that JS was supposed to undo. */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Motion variants — assigned by theme.js per element type. */
.reveal--up    { transform: translateY(32px); }
.reveal--left  { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal--scale { transform: scale(.96); }
.reveal--fade  { transform: none; }

/* A taller, more pronounced lift — used on the homepage hero lines and
   pillars where the movement should actually be noticeable. */
.reveal--rise {
  transform: translateY(54px);
  transition-duration: .75s;
}

/* Headings get a slightly longer, softer entrance. */
.reveal--head {
  transform: translateY(18px);
  transition-duration: .7s;
}

/* Counters / seals pop in a touch more. */
.reveal--pop {
  transform: translateY(20px) scale(.94);
  transition-duration: .5s;
}

.reveal.visible,
.reveal.visible.reveal--up,
.reveal.visible.reveal--left,
.reveal.visible.reveal--right,
.reveal.visible.reveal--scale,
.reveal.visible.reveal--head,
.reveal.visible.reveal--rise,
.reveal.visible.reveal--pop { transform: none !important; }

/* Narrow screens: no sideways entrances — a horizontal offset on a
   full-width element overflows the viewport while it animates in. */
@media (max-width: 900px) {
  .reveal--left,
  .reveal--right { transform: translateY(26px); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--up, .reveal--left, .reveal--right,
  .reveal--scale, .reveal--head, .reveal--rise, .reveal--pop {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}