/* Staging QA overrides for the Human Context growth-stage refresh. */
.hc-refresh { overflow-x: hidden; }
.hc-mobile-panel { display: none; }
.hc-mobile-nav, .hc-mobile-search-row { box-sizing: border-box; }


/* Homepage hero: more compact and closer to the masthead. */
@media (max-width: 960px) {
  .page-home .hero-copy-col { padding-top: clamp(1.35rem, 2.2vw, 2rem) !important; padding-bottom: clamp(1.8rem, 3vw, 2.8rem) !important; }
}
.page-home .hero-copy .mono-label { margin-bottom: .85rem !important; }
.page-home .hero-copy h1 { margin-bottom: 1.1rem !important; max-width: none !important; }
.page-home .hero-copy h1 em { font-style: italic; font-weight: inherit; }
.page-home .hero-descriptor { margin-bottom: 1.35rem !important; }
.page-home .hero-media { min-height: 0; max-height: none; }

/* All real buttons use the compact all-caps utility face. */
.page-home .btn,
.growth-sub-form button {
  font-family: var(--mono) !important;
  font-size: .72rem !important;
  font-weight: 500 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}
/* Text CTAs remain links, but use the same uppercase utility voice and keep arrows. */
.page-home .link-arrow {
  font-family: var(--mono) !important;
  font-size: .7rem !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* Newsletter field proportions and matching control heights. */
.growth-sub-form {
  grid-template-columns: minmax(170px, 1.15fr) minmax(280px, 1.9fr) auto !important;
  gap: .7rem !important;
  align-items: stretch !important;
}
/* One control height across the homepage: the newsletter fields and
   button, the hero button, and the masthead Newsletter button all render
   at 42px so the CTAs read as one system. */
/* The search field is a control like the rest: 44px, set in site-refresh.css. */
.growth-sub-form input[type="text"],
.growth-sub-form input[type="email"],
.growth-sub-form .btn,
.page-home .hero-actions .btn,
.hc-newsletter {
  min-height: 42px !important;
  height: 42px !important;
}
.growth-sub-form input[type="text"],
.growth-sub-form input[type="email"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.page-home .hero-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The newsletter submit is the same call to action as the masthead
   Newsletter button, so it takes the same rust fill and hover. */
.growth-sub-form .btn {
  background: var(--rust) !important;
  border: 1px solid var(--rust) !important;
  color: var(--paper-light) !important;
  transition: background 160ms ease, color 160ms ease;
}
.growth-sub-form .btn:hover,
.growth-sub-form .btn:focus-visible {
  background: transparent !important;
  color: var(--rust) !important;
}
.growth-sub-form .btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font-size: .73rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }

/* NEWSLETTER BAND ----------------------------------------------------
   One band, used at the foot of every page that invites a subscription -
   it began as a homepage section and these rules were scoped to
   .page-home, which is why it could not be reused. Dropping that scope
   is the whole port: paste the .growth-join markup on any page and it
   renders identically, because nothing here depends on its surroundings.

   The ridge artwork is anchored to the top of the section and cropped at
   the bottom, so the sky and moon stay put as the section changes height.
   Type reverses to cream; the input fields keep their light ground. */
.growth-join {
  position: relative;
  /* Fallback and the colour the artwork's own top edge settles into, so
     the seam is invisible before the image decodes. */
  background-color: #26331F;
  /* WebP: 54KB against the PNG's 1656KB, and as rendered on the page the
     two differ by at most 6/255 with 0.001% of pixels past 4/255. The
     background-color above is the fallback for anything without WebP. */
  background-image: url("/assets/home/subscribe-background.webp");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  border-top: 0;
  padding-top: clamp(2.5rem, 2.8vw, 3.25rem) !important;
  padding-bottom: clamp(2.5rem, 2.8vw, 3.25rem) !important;
}

/* A light scrim only where the copy sits. The artwork's moon is bright
   enough to weaken cream text on its own, and this keeps contrast even
   without darkening the picture as a whole. */
.growth-join::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(24, 34, 22, 0.30), rgba(24, 34, 22, 0.42));
  pointer-events: none;
}
.growth-join > * { position: relative; z-index: 1; }

.growth-join .growth-heading,
.growth-join .growth-copy { color: var(--paper-light); }
/* Rust proper is 1.84:1 on this ground, so the eyebrow takes the
   lighter dark-ground value and drops back to the section weight. */
.growth-join .growth-eyebrow { color: var(--rust-on-dark); }
.growth-join .growth-consent { color: rgba(250, 247, 240, 0.86); }
.growth-join .growth-consent a { color: var(--paper-light); text-decoration: underline; }
/* Every message this section can raise - consent, invalid address,
   duplicate, provider failure - uses the brand rust, lightened to
   var(--rust-on-dark) so it clears AA on the dark ground. #8B421F measured 2.11:1
   here, and a reader who misses a warning assumes the form is broken. */
.growth-join .form-status { color: var(--rust-on-dark); }

/* Footer: brand block separated evenly from a tighter three-column group. */
.hc-footer-main {
  grid-template-columns: minmax(245px, 1.15fr) minmax(115px, .62fr) minmax(155px, .78fr) minmax(120px, .62fr) !important;
  column-gap: clamp(1rem, 1.6vw, 1.6rem) !important;
  row-gap: 1.5rem !important;
}
.hc-footer-brand {
  padding-right: clamp(1.5rem, 2vw, 2rem);
  margin-right: clamp(1.5rem, 2vw, 2rem);
  border-right: 1px solid var(--border);
}
.hc-footer-brand strong { font-size: 1.68rem !important; }
.hc-footer-brand .hc-footer-tagline {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.28;
  font-style: normal !important;
  font-weight: 500;
  margin-bottom: .38rem;
}
.hc-footer-brand p {
  font-family: var(--display);
  font-size: .9rem;
  line-height: 1.38;
  color: var(--text-2);
  max-width: 17rem;
}
.hc-footer-col h2 { font-weight: 700 !important; }
.hc-footer-col a {
  font-family: var(--display) !important;
  font-size: 1rem !important;
  line-height: 1.35;
}
.hc-social { display: flex; align-items: center; gap: .85rem; margin-top: .85rem; }
.hc-social a, .hc-social-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-green);
  text-decoration: none;
}
.hc-social svg { width: 100%; height: 100%; display: block; }
.hc-social a:hover, .hc-social a:focus-visible { color: var(--rust); }
.hc-social-icon { opacity: .9; }

@media (max-width: 960px) {
  .hc-head {
    position: sticky;
    top: 0;
    z-index: 100;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--hc-cream, #F5F1E8) !important;
  }
  .hc-head-inner { min-height: 64px; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; }
  .hc-primary, .hc-utilities { display: none !important; }
  .hc-mobile-btn { display: inline-flex !important; align-items: center; justify-content: center; min-width: 68px; cursor: pointer; }

  .hc-mobile-panel {
    position: fixed !important;
    top: 64px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 64px) !important;
    min-height: calc(100vh - 64px) !important;
    z-index: 9999 !important;
    background: var(--paper-light, #FAF7F0) !important;
    padding: 0 var(--page-gutter, 1.5rem) calc(2rem + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .hc-mobile-panel.is-open { display: block !important; }
  /* No second Close control: the masthead button is the only one, and the
     links begin directly beneath the persistent header. */
  .hc-mobile-nav { padding-top: 1rem; }
  .hc-mobile-panel .hc-mobile-main {
    display: block;
    margin: 0 -.55rem;
    padding: .95rem .55rem .85rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--sans);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-green);
    transition: color 140ms ease, background-color 140ms ease;
  }
  .hc-mobile-panel .hc-mobile-main:hover,
  .hc-mobile-panel .hc-mobile-main:focus-visible,
  .hc-mobile-panel .hc-mobile-main:active { color: var(--rust); background: rgba(139, 66, 31, .055); }
  .hc-mobile-search-row {
    width: calc(100% + 1.1rem) !important;
    height: auto !important;
    margin-left: -.55rem;
    display: flex !important;
    justify-content: flex-start !important;
    gap: .7rem;
    padding: 1rem .55rem !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--ink-green);
    transition: color 140ms ease, background-color 140ms ease;
  }
  .hc-mobile-search-row:hover, .hc-mobile-search-row:focus-visible, .hc-mobile-search-row:active { color: var(--rust); background: rgba(139, 66, 31, .055); }
  .hc-mobile-search-row span { font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

  .page-home .hero { display: grid !important; grid-template-columns: 1fr !important; min-height: 0 !important; }
  .page-home .hero-copy-col { min-height: auto !important; padding-top: 1.35rem !important; padding-bottom: 1.8rem !important; }
  .page-home .hero-copy { max-width: 36rem; }
  .page-home .display-xl { font-size: clamp(3rem, 12vw, 5.1rem); line-height: .94; }
  .page-home .hero-media { min-height: 0; max-height: none; }
  .page-home .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }

  .growth-reflection, .growth-join-grid { grid-template-columns: 1fr !important; gap: 2rem; }
  .growth-research-grid { gap: 2rem; }
  .growth-ideas { grid-template-columns: 1fr !important; gap: 1.6rem; }
  .growth-ideas-head { align-items: flex-start; }
  .growth-sub-form { grid-template-columns: minmax(150px, .9fr) minmax(240px, 1.4fr); }
  .growth-sub-form button { grid-column: 1 / -1; justify-self: start; width: auto; }

  .hc-footer-main { grid-template-columns: 1fr 1fr !important; }
  .hc-footer-brand { grid-column: 1 / -1; border-right: 0; padding-right: 0; margin-right: 0; }
}

@media (max-width: 620px) {
  .hc-head-inner { padding: 0 var(--page-gutter); }
  .hc-masthead { font-size: 1.25rem; letter-spacing: .08em; }
  .hc-mobile-panel { padding-left: var(--page-gutter) !important; padding-right: var(--page-gutter) !important; }

  .page-home .hero-copy-col { padding-left: 1.25rem !important; padding-right: 1.25rem !important; padding-top: 1.15rem !important; }
  .page-home .display-xl { font-size: clamp(2.8rem, 14vw, 4.25rem); }
  .page-home .hero-descriptor { font-size: 1.12rem; line-height: 1.42; }
  .page-home .hero-media { min-height: 0; }

  .growth-section { padding: clamp(1.75rem,2.2vw,2.5rem) var(--page-gutter) !important; }
  .growth-heading { font-size: clamp(2rem, 10vw, 3rem); }
  .growth-copy { font-size: .96rem; line-height: 1.55; }
  .growth-ideas-head { flex-direction: column; gap: 1rem; }
  .growth-reflection-card { padding: 1.25rem; }
  .growth-sub-form { grid-template-columns: 1fr !important; }
  .growth-sub-form button, .growth-consent { grid-column: 1 !important; }
  .growth-sub-form button { width: 100%; justify-content: center; }

  .hc-search-shell { width: calc(100% - 2rem); padding-top: 1.25rem; }
  .hc-search-top { margin-bottom: 2rem; }

  .hc-footer-main { grid-template-columns: 1fr !important; padding: 1.9rem var(--page-gutter); gap: 1.6rem; }
  .hc-footer-brand { grid-column: auto; }
  .hc-footer-base { margin: 0 var(--page-gutter); padding: 1.1rem 0 1.35rem; flex-direction: column; align-items: flex-start; gap: .9rem; }
  .hc-footer-legal-links { justify-content: flex-start; gap: .65rem 1rem; }
}
/* NEWSLETTER FORM WIDTH -----------------------------------------------
   Three across only once there is genuinely room for it. Between 961 and
   1169 the fields plus the control were wider than the column, and since
   .growth-join hides its overflow for the background image the control
   was being cut off rather than pushing out a scrollbar. */
@media (max-width: 1169px) {
  .growth-sub-form { grid-template-columns: minmax(150px, .9fr) minmax(240px, 1.4fr); }
  .growth-sub-form button { grid-column: 1 / -1; justify-self: start; width: auto; }
}