/*
Theme Name:   HJF Foundation Child
Theme URI:    https://hjffoundation.org
Description:  Genesis child theme for HJF Foundation
Author:       Yellow Duck Marketing
Template:     genesis
Version:      1.0.0
*/

/* ============================================================
   @font-face — Self-hosted Progesteron
   ============================================================ */

   @font-face {
	font-family: 'Progesteron';
	src: url('fonts/progesteron.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
  }
  
  
  /* ============================================================
	 CSS Custom Properties
	 ============================================================ */
  
  :root {
  
	/* --- Colors --- */
	--color-rust:        #AC441D;
	--color-dark-brown:  #402020;
	--color-steel-blue:  #497594;
	--color-navy:        #003B4D;
	--color-light-blue:  #93B0CB;
	--color-white:       #FFFFFF;
	--color-gray:		 #E5E2E3;
	--color-blush:       #E2DEDE;
  
	/* --- Font Families --- */
	--font-display: 'Progesteron', serif;
	--font-body:    'Commissioner', sans-serif;

	/* --- Progesteron word spacing (tighter between words) --- */
	--word-spacing-display: -0.2em;
  
	/* --- Font Sizes --- */
	--fs-h1:             76px;
	--fs-h2:             48px;
	--fs-h3:             12px;
	--fs-h4:             18px;
	--fs-body:           18px;
	--fs-large:          20px;
	--fs-hover:          14px;
	--fs-sponsor:        18px;
	--fs-partners-label: 20px;
	--fs-timeline:       80px;
	--fs-display-xl:     159px;
  
	/* --- Line Heights --- */
	--lh-h1:             76px;
	--lh-h2:             normal;
	--lh-h3:             18px;
	--lh-h4:             34px;
	--lh-body:           32px;
	--lh-large:          30px;
	--lh-hover:          22px;
	--lh-sponsor:        25px;
	--lh-partners-label: 27px;
	--lh-timeline:       normal;
	--lh-display-xl:     normal;
  
	/* --- Spacing --- */
	--space-xs:   8px;
	--space-sm:   16px;
	--space-md:   32px;
	--space-lg:   64px;
	--space-xl:   96px;
	--space-xxl:  150px;
  
	/* --- Max Width --- */
	--max-width: 1200px;
	--max-width-text: 780px;

	/* --- Transitions (respects prefers-reduced-motion in Accessibility section) --- */
	--transition-duration: 0.2s;
	--transition-ease: ease;
  }
  
  
  /* ============================================================
	 Reset / Base
	 ============================================================ */
  
  *,
  *::before,
  *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
  }
  
  html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
  }
  
  img,
  video {
	max-width: 100%;
	height: auto;
	display: block;
  }
  
  a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-duration) var(--transition-ease);
  }
  
  a:hover {
	text-decoration: underline;
  }
  
  
  /* ============================================================
	 Typography — Base
	 ============================================================ */
  
  body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
	color: var(--color-navy);
	background-color: #000000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }

  /* Focus styles for keyboard users (WCAG 2.1 AA visible focus) */
  .hjf-nav a:focus-visible,
  .hjf-nav button:focus-visible,
  .hjf-nav-cta:focus-visible,
  .hjf-btn:focus-visible,
  .hjf-timeline__tab:focus-visible,
  .hjf-vision__arrow:focus-visible,
  .hjf-help__card:focus-visible,
  .hjf-partners__label:focus-visible {
	outline: 3px solid var(--color-light-blue);
	outline-offset: 3px;
  }
  
  p {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-body);
	color: var(--color-navy);
	margin-bottom: var(--space-sm);
  }
  
  h1 {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	font-weight: 400;
	line-height: var(--lh-h1);
	margin-bottom: var(--space-sm);
	word-spacing: var(--word-spacing-display);
  }
  
  h2 {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: var(--lh-h2);
	color: var(--color-navy);
	margin-bottom: var(--space-sm);
	word-spacing: var(--word-spacing-display);
  }
  
  h3 {
	font-family: var(--font-body);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: var(--lh-h3);
	letter-spacing: 1.2px;
	color: var(--color-rust);
	margin-bottom: var(--space-xs);
  }
  
  h4 {
	font-family: var(--font-body);
	font-size: var(--fs-h4);
	font-weight: 500;
	line-height: var(--lh-h4);
	letter-spacing: 1.8px;
	text-transform: uppercase;
	margin-bottom: var(--space-xs);
  }
  
  h5,
  h6 {
	font-family: var(--font-body);
	font-weight: 500;
	margin-bottom: var(--space-xs);
  }
  
  ul,
  ol {
	padding-left: var(--space-md);
	margin-bottom: var(--space-sm);
  }
  
  li {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-navy);
  }
  
  
  /* ============================================================
	 Typography — Utility Classes
	 ============================================================ */
  
  /* Large intro/lead copy */
  .hjf-large-copy {
	font-family: var(--font-body);
	font-size: var(--fs-large);
	font-weight: 400;
	line-height: var(--lh-large);
  }
  
  /* Hover overlay card copy */
  .hjf-hover-copy {
	font-family: var(--font-body);
	font-size: var(--fs-hover);
	font-weight: 400;
	line-height: var(--lh-hover);
	color: var(--color-white);
	text-align: center;
  }
  
  /* Sponsor list items */
  .hjf-sponsor-item {
	font-family: var(--font-body);
	font-size: var(--fs-sponsor);
	font-weight: 400;
	line-height: var(--lh-sponsor);
	color: var(--color-navy);
  }
  
  /* Partners section category labels */
  .hjf-partners-label {
	font-family: var(--font-body);
	font-size: var(--fs-partners-label);
	font-weight: 500;
	line-height: var(--lh-partners-label);
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-navy);
  }
  
  /* Timeline headings — color set per slide via modifier or inline */
  .hjf-timeline-heading {
	font-family: var(--font-display);
	font-size: var(--fs-timeline);
	font-weight: 400;
	line-height: var(--lh-timeline);
	word-spacing: var(--word-spacing-display);
  }
  
  /* Decorative oversized display text e.g. "EMPOWER", "ENRICH" */
  /* Always add aria-hidden="true" — purely decorative */
  .hjf-display-xl {
	font-family: var(--font-display);
	font-size: var(--fs-display-xl);
	font-weight: 400;
	line-height: var(--lh-display-xl);
	color: var(--color-light-blue);
	word-spacing: var(--word-spacing-display);
	pointer-events: none;
	user-select: none;
  }

  /* Hide default Genesis header (layout handled by custom nav) */
  .site-header {
	display: none;
  }


  /* ============================================================
	 Hero — Homepage
	 ============================================================ */

  .hjf-hero {
	position: relative;
	min-height: 90vh;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	display: flex;
	align-items: flex-end;
	color: var(--color-white);
	padding-left: var(--space-xxl);
	padding-right: var(--space-xxl);
  }

  .hjf-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		0deg,
		rgba(0, 59, 77, 1) 0%,
		rgba(0, 12, 15, 0.5) 100%
	);
	z-index: 0;
  }

  .hjf-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-bottom: 90px;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
  }

  .hjf-hero__content {
	max-width: var(--max-width-text);
  }

  .hjf-hero__tagline {
	font-family: var(--font-body);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-style: normal;
	font-weight: 500;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-white);
	margin-bottom: var(--space-xs);
  }

  .hjf-hero__heading {
	font-family: var(--font-display);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	font-weight: 400;
	color: var(--color-white);
	margin-bottom: var(--space-sm);
	word-spacing: var(--word-spacing-display);
  }

  .hjf-hero__subheading {
	font-family: var(--font-body);
	font-size: var(--fs-large);
	line-height: var(--lh-large);
	font-weight: 400;
	color: var(--color-white);
	max-width: var(--max-width-text);
  }

  @media (max-width: 767px) {


	.hjf-hero {
		padding: 0px;
	  min-height: 80vh;
	}

	.hjf-hero__overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(
		  0deg,
		  rgba(0, 59, 77, 1) 0%,
		  rgba(0, 12, 15, 0.5) 100%
		);
		z-index: 0;
	  }

	.hjf-hero__inner {
	  padding-left: var(--space-md);
	  padding-right: var(--space-md);
	  padding-bottom: var(--space-lg);
	}

	.hjf-hero__heading {
	  font-size: 48px;
	  line-height: 52px;
	}

	.hjf-hero__subheading {
	  font-size: 18px;
	  line-height: 28px;
	}
  }


  /* ============================================================
	 About Section
	 ============================================================ */

  .hjf-about {
	overflow: hidden;
	background-color: #ffffff;
	padding-left: var(--space-xxl);
  }

  .hjf-about__inner {
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	column-gap: var(--space-lg);
	align-items: center;
	box-sizing: border-box;
  }

  .hjf-about__content {
	padding-bottom: var(--space-xl);
	padding-top: var(--space-xl);
	background-color: var(--color-white);
	max-width: var(--max-width-text);
  }

  .hjf-about__eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--color-rust);
	margin-bottom: var(--space-xs);
  }

  .hjf-about__heading {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: 400;
	color: var(--color-navy);
	margin-bottom: var(--space-sm);
	word-spacing: var(--word-spacing-display);
  }

  .hjf-about__body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-navy);
  }

  .hjf-about__body p:last-child {
	margin-bottom: 0;
  }

  .hjf-about__image-wrap {
	text-align: right;
	height: 100%;
	position: relative;
  }
 
  .hjf-about__image {
    position: absolute;
    top: 0;
    right: 0;
	padding-top: 30px;
    height: 100%;
    width: 100%;
    margin-top: 40px;
    object-fit: cover;
    object-position: top left;
}

@media (max-width: 1500px) {
	.hjf-about__image {
		object-fit: contain;
}
}

  @media (max-width: 767px) {
	.hjf-about {
		padding-left: 0px;
	  padding-top: var(--space-lg);
	  padding-bottom: var(--space-lg);
	}

	.hjf-about__inner {
		display: block;
	  padding-left: var(--space-md);
	  padding-right: var(--space-md);
	  text-align: left;
	}

	.hjf-about__image-wrap {
        position: relative;
        width: 100%;
        height: 350px;
        margin-top: 0px;
    }

	.hjf-about__image {
	  height: 800px;
	  padding-left: 100px;
		object-position: top center;
	}

	.hjf-about__content {
		padding-top: var(--space-md);
		padding-bottom: var(--space-md);
	}
  }

  @media (max-width: 468px) {

	.hjf-about__image-wrap {
        position: relative;
        width: 150%;
        overflow: hidden;
        height: 350px;
        margin-top: 0px;
    }

	.hjf-about {
        padding-bottom: 0px;
	}

	.hjf-about__image {
        height: 130%;
        margin-top: 0px;
        padding: 0;
        object-position: top center;
    }

  }


  /* ============================================================
	 Mission Section
	 ============================================================ */

  .hjf-mission {
	position: relative;
	overflow: hidden;
	background-color: var(--color-steel-blue);
	color: var(--color-white);
  }

  .hjf-mission__inner {
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr; /* image 50%, text 50% */
	column-gap: var(--space-lg);
	align-items: center;
	box-sizing: border-box;
  }

  .hjf-mission__image-wrap {
	text-align: left;
	height: 500px;
  }

  .hjf-mission__image {
	width: 100%;
	height: 100%;
	display: block;
	object-position: top center;
	object-fit: cover;
  }

  .hjf-mission__content {
	max-width: var(--max-width-text);
	position: relative;  
	padding: var(--space-md); 
  }

  .hjf-mission__decor {
	position: absolute;
	top: -32px;
	right: 0;
	opacity: 0.4;
	pointer-events: none;
  }

  .hjf-mission__heading {
	font-family: var(--font-body);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-weight: 500;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-white);
	margin-bottom: var(--space-sm);
  }

  .hjf-mission__body p {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-white);
  }

  .hjf-mission__body p:last-child {
	margin-bottom: 0;
  }


  @media (max-width: 767px) {
	.hjf-mission {
	  padding: 0;
	}

	.hjf-mission__inner {
		display: flex;
		flex-direction: column-reverse;
	  row-gap: var(--space-lg);
	  padding-top: var(--space-lg);
	  padding-bottom: 0px;
	}

	.hjf-mission__content {
	  padding-left: var(--space-md);
	}

	.hjf-mission__image-wrap {
		height: 500px;
		width: 100%;
		position: relative;
	}

	.hjf-mission__image {
		width: 100%;
		height: 100%;
		position: absolute;
	}
  }


  /* ============================================================
	 Henry's Vision Section
	 ============================================================ */

  .hjf-vision {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
	background-color: var(--color-white);
	color: var(--color-navy);
  }

  .hjf-vision__inner {
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto 1fr; /* fixed block left, text right */
	align-items: center;
	column-gap: var(--space-lg);
  }

  .hjf-vision__pattern {
	background-image:url('images/pattern-2.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width: 216px;
	height: 526px;
	background-color: var(--color-dark-brown);
	margin-top: -50px;
	margin-bottom: -50px;
  }

  .hjf-vision__content {
	padding: 50px var(--space-xxl);
	margin-left: -120px; /* overlap with left pattern block */
	box-sizing: border-box;
	border: 1px solid var(--color-light-blue);
	border-right: 0px;
  }

  .hjf-vision__eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--color-rust);
	margin-bottom: var(--space-xs);
  }

  .hjf-vision__heading {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: 400;
	color: var(--color-navy);
	margin-bottom: var(--space-sm);
	word-spacing: var(--word-spacing-display);
  }

  .hjf-vision__slider {
	position: relative;
	margin-top: var(--space-md);
  }

  .hjf-vision__slides {
	position: relative;
	transition: height 0.35s ease;
  }

  .hjf-vision__slide {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition: opacity var(--transition-duration) var(--transition-ease);
  }

  .hjf-vision__slide.is-active {
	opacity: 1;
  }

  .hjf-vision__slide-body {
	padding-right: var(--space-xl);
  }

  .hjf-vision__slide-body p:last-child {
	margin-bottom: 0;
  }

  .hjf-vision__arrow {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	position: absolute;
	right: 0;
  }

  .hjf-vision__arrow img {
	display: block;
	height: 84.973px;
	width: 18.5px;
  }

  .hjf-vision__arrow--up {
	
	top: -70px;
  }

  .hjf-vision__arrow--up img {
	transform: rotate(180deg) !important;
  }

  .hjf-vision__arrow--down {
	bottom: 30px;
	
  }

  @media (max-width: 767px) {
	.hjf-vision__slider {
	  margin-top: var(--space-lg);
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: var(--space-lg);
	}

	.hjf-vision__slide-body {
		padding-right: 0px;
	}

	.hjf-vision__arrow {
	  position: static;
	}

	.hjf-vision__slides {
	  width: 100%;
	}

	.hjf-vision__arrows {
	  display: flex;
	  justify-content: center;
	  gap: var(--space-md);
	  width: 100%;
	}

	.hjf-vision__arrow {
		width: 84px;
		height: 18.5px;
		overflow: hidden;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Horizontal arrows on mobile: image layout size matches button so rotated arrow stays inside */
	.hjf-vision__arrow img {
		display: block;
		object-fit: contain;
	}
	.hjf-vision__arrow--up img {
        transform: rotate(90deg) !important;
	}

	.hjf-vision__arrow--down img {
	  transform: rotate(-90deg) !important;
	}

	/* Decrease overall bottom padding for vision section on mobile */
	.hjf-vision {
	  padding-bottom: var(--space-lg);
	}
  }

  .hjf-vision__arrow.is-disabled,
  .hjf-vision__arrow:disabled {
	opacity: 0.3;
	cursor: default;
  }

  @media (max-width: 1280px) {

  .hjf-vision__content {
	padding: 50px var(--space-xl);
}

  }

  @media (max-width: 767px) {

	.hjf-vision__pattern {
		background-image: url(images/pattern.png);
		background-size: 35%;
		background-repeat: repeat-x;
		width: 100%;
		height: 127px;
	}

	.hjf-vision__inner {
	  grid-template-columns: 1fr;
	}


	.hjf-vision__content {
        width: 95%;
        margin: 0px auto;
		border-right: 1px solid var(--color-light-blue);
        padding: var(--space-xl) var(--space-md);
    }
  }

  @media (max-width: 468px) {

	.hjf-vision {
		padding-top: 0px;
	}
	
	.hjf-vision__pattern {
        background-size: 70%;
        height: 137px;
    }

	.hjf-vision__slider {
		gap: var(--space-lg);
        margin-top: var(--space-sm);
	}

	.hjf-vision__slide-body {
		padding-right: 0px;
	}
  }


  /* ============================================================
	 Timeline Section — tabs (3 visible) + content panels
	 ============================================================ */

  .hjf-timeline {
	display: none;
	background-color: var(--color-white);
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
  }

  .hjf-timeline__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	max-width: 1000px;
	margin: 0px auto;
	box-sizing: border-box;
  }

  /* Tab strip: left arrow (hidden until scrolled), scroll area, right arrow */
  .hjf-timeline__tabs-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	min-height: 60px;
  }

  .hjf-timeline__tabs-wrap::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: linear-gradient(to right, #AC441D, #E3E3E3);
  }

  .hjf-timeline__tabs-scroll {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
  }

  .hjf-timeline__tabs-scroll::-webkit-scrollbar {
	display: none;
  }

  .hjf-timeline__tab {
	flex: 0 0 calc(33.333% - var(--space-xs));
	min-width: 120px;
	padding: var(--space-sm) var(--space-md);
	font-family: var(--font-display);
	font-size: var(--fs-timeline);
	line-height: var(--lh-timeline);
	font-weight: 400;
	word-spacing: var(--word-spacing-display);
	color: var(--era-color, var(--color-navy));
	background: none;
	border: 0;
	opacity: 0.5;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	text-align: left;
	transition: border-color var(--transition-duration) var(--transition-ease), opacity var(--transition-duration) var(--transition-ease);
	white-space: nowrap;
  }

  .hjf-timeline__tab:hover {
	opacity: 1;
  }

  .hjf-timeline__tab.is-active {
	border-bottom-color: var(--color-rust);
	opacity: 1;
  }

  .hjf-timeline__arrow {
	position: absolute;
	bottom: -20px; 
	z-index: 2;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
  }

  .hjf-timeline__arrow--left {
	left: -19px;
  }

  .hjf-timeline__arrow--right {
	right: -19px;
  }

  .hjf-timeline__arrow.is-hidden {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
  }

  .hjf-timeline__arrow img {
	display: block;
	width: 15.21px;
	height: 24.888px;
  }

  /* Content panels: one visible at a time */
  .hjf-timeline__content {
	position: relative;
	padding: 0px 50px;
	min-height: 200px;
  }

  h4.hjf-timeline__era {
	text-transform: none;
  }

  .hjf-timeline__panel {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-duration) var(--transition-ease);
  }

  .hjf-timeline__panel.is-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
  }

  .hjf-timeline__body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-navy);
  }

  .hjf-timeline__body p:last-child {
	margin-bottom: 0;
  }

  @media (max-width: 767px) {
	/* Keep single-slide behavior; shift content right to make room for vertical rail */
	.hjf-timeline__inner {
	  position: relative;
	  padding-left: 56px;
	  padding-right: var(--space-md);
	}

	/* Hide horizontal tab labels, but keep scroll area for JS */
	.hjf-timeline__tab {
	  display: none;
	}

	/* Vertical gradient rail with arrows on the left */
	.hjf-timeline__tabs-wrap {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  width: 40px;
	  min-height: 160px;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: space-between;
	}

	.hjf-timeline__tabs-wrap::after {
	  left: 50%;
	  right: auto;
	  top: 0;
	  bottom: 0;
	  width: 3px;
	  height: 100%;
	  transform: translateX(-50%);
	  background: linear-gradient(to bottom, #AC441D, #E3E3E3);
	}

	.hjf-timeline__arrow {
	  position: absolute;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 32px;
	  height: 32px;
	}

	

	.hjf-timeline__arrow--left {
	  top: -15px;
	}

	.hjf-timeline__arrow--right {
	  bottom: -15px;
	}

	.hjf-timeline__arrow img {
        width: 52%;
        height: auto;
        transform: rotate(90deg);
    }

	/* Always show arrows on mobile, even if JS adds is-hidden */
	.hjf-timeline__arrow.is-hidden {
	  visibility: visible;
	  opacity: 1;
	  pointer-events: auto;
	}

	/* Era heading takes on the tab typography on mobile */
	h4.hjf-timeline__era {
	  font-family: var(--font-display);
	  font-size: var(--fs-timeline);
	  line-height: var(--lh-timeline);
	  font-weight: 400;
	  word-spacing: var(--word-spacing-display);
	  color: var(--color-navy);
	  margin-bottom: var(--space-sm);
	}
  }


  /* ============================================================
	 How We Make a Difference
	 ============================================================ */

  .hjf-help {
	position: relative;
	overflow: hidden;
	background-color: var(--color-navy);
	padding: var(--space-xl) var(--space-xxl);
	width: 100%;
  }

  .hjf-help__decorative {
	position: absolute;
	bottom: -33px;
	opacity: 0.4;
	right: 50px;
	z-index: 0;
	pointer-events: none;
	user-select: none;
  }

  .hjf-help .hjf-container {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: 100%;
  }

  .hjf-help__eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: 500;
	color: var(--color-white);
	background-color: var(--color-rust);
	display: inline-block;
	padding: var(--space-xs) var(--space-sm);
	border-radius: 2px;
	margin-bottom: var(--space-sm);
  }

  .hjf-help__heading {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: 400;
	color: var(--color-white);
	word-spacing: var(--word-spacing-display);
	margin-bottom: var(--space-md);
  }

  .hjf-help__intro {
	max-width: 915px;
	font-family: var(--font-body);
	font-size: var(--fs-large);
	line-height: var(--lh-large);
	color: var(--color-white);
	margin-bottom: var(--space-xl);
  }

  .hjf-help__intro p:last-child {
	margin-bottom: 0;
  }

  .hjf-help__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
  }

  .hjf-help__card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-white);
	background-color: var(--color-navy);
	text-align: center;
  }

  .hjf-help__card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	cursor: pointer;
  }

  .hjf-help__card-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--transition-duration) var(--transition-ease), transform var(--transition-duration) var(--transition-ease);
  }

  /* Hover hint: dim + scale image, show "+" indicator */
  .hjf-help__card-media:hover .hjf-help__card-image {
	opacity: 0.55;
	transform: scale(1.03);
  }

  /* "+" circle overlay hint — visible on hover, hidden when card is active */
  @media (min-width: 768px) {
	.hjf-help__card-media::after {
	  content: '+';
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  z-index: 1;
	  font-family: var(--font-body);
	  font-size: 40px;
	  line-height: 57px;
	  font-weight: 300;
	  color: var(--color-white);
	  background-color: rgba(37, 91, 108, 0.75);
	  width: 64px;
	  height: 64px;
	  border-radius: 50%;
	  text-align: center;
	  opacity: 0;
	  transition: opacity 0.3s ease;
	  pointer-events: none;
	}

	.hjf-help__card-media:hover::after {
	  opacity: 1;
	}

	.hjf-help__card.is-active .hjf-help__card-media::after {
	  opacity: 0;
	}
  }

  .hjf-help__card-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: #255B6C;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition-duration) var(--transition-ease);
	padding: var(--space-sm);
	cursor: pointer;
  }

  .hjf-help__card.is-active .hjf-help__card-overlay {
	opacity: 1;
	pointer-events: auto;
  }

  .hjf-help__card-hover-text {
	font-family: var(--font-body);
	font-size: var(--fs-hover);
	line-height: var(--lh-hover);
	color: var(--color-white);
	text-align: center;
  }

  .hjf-help__card-label {
	font-family: var(--font-body);
	font-size: var(--fs-h4);
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 500;
	color: var(--color-white);
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: var(--space-sm) var(--space-md);
	margin: 0;
	min-height: 52px;
	line-height: 1.2;
	text-align: center;
  }


  @media (max-width: 1500px) {

  .hjf-help__card-overlay {
	padding: var(--space-sm) var(--space-sm);
  }

}

  @media (max-width: 767px) {

	.hjf-help {
		padding: var(--space-lg) var(--space-lg);
	}

	.hjf-help__cards {
	  grid-template-columns: 1fr;
	}

	.hjf-help__card {
	  text-align: left;
	}

	/* Mobile: image stacks above label; overlay collapses to zero height until tapped */
	.hjf-help__card-media {
	  aspect-ratio: auto;
	}

	.hjf-help__card-image {
	  position: static;
	  width: 100%;
	  height: auto;
	  transform: none !important;
	}

	.hjf-help__card-media:hover .hjf-help__card-image {
	  opacity: 1;
	  transform: none !important;
	}

	.hjf-help__card-overlay {
	  position: static;
	  inset: auto;
	  background-color: transparent;
	  opacity: 1;
	  max-height: 0;
	  overflow: hidden;
	  padding: 0 var(--space-md);
	  justify-content: flex-start;
	  transition: max-height 0.35s ease, padding 0.35s ease;
	}

	.hjf-help__card.is-active .hjf-help__card-overlay {
	  max-height: 600px;
	  padding: var(--space-sm) var(--space-md) var(--space-md);
	}

	/* "+" / "×" toggle indicator on the label */
	.hjf-help__card-label {
	  cursor: pointer;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}

	.hjf-help__card-label::after {
	  content: '+';
	  font-size: 28px;
	  font-weight: 300;
	  line-height: 1;
	  flex-shrink: 0;
	  margin-top: -10px;
	  margin-left: var(--space-xs);
	  transition: transform 0.3s ease;
	  display: inline-block;
	}

	.hjf-help__card.is-active .hjf-help__card-label::after {
	  transform: rotate(45deg);
	}

	.hjf-help__card-label,
	.hjf-help__card-hover-text {
	  text-align: left;
	}
  }


  /* ============================================================
	 Partners
	 ============================================================ */

  .hjf-partners {
	position: relative;
	background-color: var(--color-white);
	padding-top: var(--space-xxl);
	padding-left: var(--space-xxl);
	padding-right: var(--space-xxl);
	padding-bottom: var(--space-xl);
  }

  .hjf-partners__graphic {
	position: absolute;
	left: -7%;
	top: 2%;
	transform: translateY(-50%);
	z-index: 0;
	width: auto;
	max-width: 600px;
	height: auto;
	max-height: 80%;
	pointer-events: none;
  }

  .hjf-partners .hjf-container {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
  }

  .hjf-partners__heading {
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: 400;
	color: var(--color-navy);
	word-spacing: var(--word-spacing-display);
	margin-bottom: var(--space-sm);
	padding-left: 400px;
  }

  .hjf-partners__subheading {
	padding-left: 400px;
	font-family: var(--font-body);
	font-size: var(--fs-large);
	line-height: var(--lh-large);
	color: var(--color-navy);
	margin-bottom: var(--space-xxl);
  }

  .hjf-partners__subheading p:last-child {
	margin-bottom: 0;
  }

  .hjf-partners__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
  }

  .hjf-partners__group {
	display: flex;
	border-bottom: 1px solid var(--color-gray);
	flex-direction: row;
	gap: var(--space-md);
	padding-bottom: var(--space-md);
	align-items: flex-start;
	width: 100%;
  }

  .hjf-partners__group:last-child {
	border-bottom: 0;
  }

  .hjf-partners__label {
	flex: 0 0 25%;
	font-family: var(--font-body);
	font-size: var(--fs-partners-label);
	line-height: var(--lh-partners-label);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--color-navy);
	margin: 0;
  }

  .hjf-partners__label::after {
	content: "";
	display: block;
	width: 60px;
	height: 6px;
	margin-top: var(--space-sm);
  }

  .hjf-partners__group:nth-child(1) .hjf-partners__label::after {
	background-color: var(--color-light-blue);
  }

  .hjf-partners__group:nth-child(2) .hjf-partners__label::after {
	background-color: var(--color-rust);
  }

  .hjf-partners__group:nth-child(3) .hjf-partners__label::after {
	background-color: var(--color-navy);
  }

  .hjf-partners__list {
	flex: 1 1 75%;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--color-navy);
	column-count: 3;
	line-height: 1.1;
	column-gap: var(--space-md);
  }

  .hjf-partners__list li {
	margin-bottom: 9px;
  }

  .hjf-partners__list p, .hjf-partners__list li {
	break-inside: avoid;
	line-height: 1.2;
  }

  .hjf-partners__list p:last-child {
	margin-bottom: 0;
  }

  @media (max-width: 1199px) {

	.hjf-partners__heading, .hjf-partners__subheading {
        padding-left: 20	0px;
    }

	.hjf-partners__subheading {
		margin-bottom: var(--space-lg);
	}


  }
  

  @media (max-width: 767px) {

	.hjf-partners__heading, .hjf-partners__subheading {
        padding-left: 0px;
    }

	.hjf-partners__subheading {
		margin-bottom: var(--space-md);
	}

	.hjf-partners__group {
	  flex-direction: column;
	}

	.hjf-partners__label {
	  flex: none;
	}

	.hjf-partners__list {
	  flex: none;
	  column-count: 1;
	}
	
  }


  /* ============================================================
	 Footer
	 ============================================================ */

  .hjf-footer {
	background-color: var(--color-blush);
	padding-top: var(--space-lg);
	padding-bottom: var(--space-lg);
  }

  .hjf-footer__inner {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
	box-sizing: border-box;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
  }

  .hjf-footer__disclaimer {
	max-width: 600px;
	margin: 0 auto;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-navy);
  }

    .hjf-footer__disclaimer a {
		font-weight: bold;
	}

  .hjf-footer__logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
  }

  .hjf-footer__logo-image {
	max-height: 120px;
	width: auto;
	object-fit: contain;
	display: block;
  }


  .hjf-footer__divider {
	display: block;
	width: 1px;
	height: 60px;
	background-color: var(--color-navy);
  }

  .hjf-footer__address {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-navy);
  }

  @media (max-width: 767px) {
	.hjf-footer__inner {
	  padding-left: var(--space-md);
	  padding-right: var(--space-md);
	}

	

	.hjf-footer__logos {
		display: block;
	}

	.hjf-footer__divider {
	 display: none;
	}

	.hjf-footer__logos {
        display: flex;
        text-align: center;
        justify-content: center;
        flex-direction: column;
    }
  }


  /* Genesis site footer (global) */

  .site-footer {
	background-color: var(--color-blush);
	color: var(--color-navy);
	font-family: var(--font-body);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	text-align: center;
  }

  .site-footer .wrap {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--space-md);
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
	box-sizing: border-box;
  }

  .site-footer p {
	margin: 0;
	font-size: 85%;
  }

  @media (max-width: 767px) {
	.site-footer .wrap {
	  padding-left: var(--space-md);
	  padding-right: var(--space-md);
	}
  }


  /* ============================================================
	 HJF Vertical Navigation
	 ============================================================ */

  .hjf-nav {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 350px;
	background-color: var(--color-navy);
	background-image: url('images/pattern.png');
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
	color: var(--color-white);
	z-index: 1000;
	display: flex;
	flex-direction: column;
  }

  .hjf-nav-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	padding: var(--space-md) var(--space-sm);
  }

  .hjf-nav-logo {
	display: block;
	margin-bottom: var(--space-lg);
  }

  .hjf-nav-logo img {
	padding: 30px 0px 0px 40px;
	max-width: 233px;
	height: auto;
	display: block;
  }

  .hjf-nav-menu {
	flex: 1 1 auto;
	width: 100%;
	padding: 0px 40px;
  }

  .hjf-nav-menu .hjf-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
  }

  .hjf-nav-menu .hjf-nav-list > li {
	margin-bottom: 0px;
  }
  
  .hjf-nav-menu .hjf-nav-list > li > a {
	display: block;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 25px;
	font-weight: 500;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--color-white);
	text-decoration: none;
	padding: 10px 0;
	min-height: 44px;
	box-sizing: border-box;
	transition: color var(--transition-duration) var(--transition-ease);
  }

  .hjf-nav-menu .hjf-nav-list > li > a:hover,
  .hjf-nav-menu .hjf-nav-list > li > a:focus,
  .hjf-nav-menu .hjf-nav-list .current-menu-item > a {
	text-decoration: none;
	opacity: 0.7;
	transition: 0.4s ease;
  }

  .hjf-nav-cta {
	display: block;
	width: 100%;
	margin-top: var(--space-md);
	padding: 14px 16px;
	min-height: 44px;
	box-sizing: border-box;
	text-align: center;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	background-color: var(--color-rust);
	color: var(--color-white);
	text-decoration: none;
	transition: background-color var(--transition-duration) var(--transition-ease), color var(--transition-duration) var(--transition-ease);
  }

  .hjf-nav-cta:hover,
  .hjf-nav-cta:focus {
	background-color: var(--color-light-blue);
	color: var(--color-navy);
	text-decoration: none;
  }

  .hjf-nav-tagline {
	margin-top: var(--space-sm);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 25px;
	color: var(--color-white);
	text-align: center;
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
  }

  /* Push main layout to the right of the nav on desktop */

  .site-container {
	margin-left: 260px;
  }


  /* ============================================================
	 Mobile Navigation (max-width: 1199px)
	 ============================================================ */

  .hjf-nav-toggle {
	display: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	margin-left: auto;
	padding: 4px 0 4px var(--space-sm);
  }

  .hjf-nav-toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--color-white);
	margin: 4px 0;
	transition: transform 0.25s ease, opacity 0.25s ease;
  }

  /* ============================================================
	 Sidebar → sticky top bar on scroll (desktop only)
	 ============================================================ */

  @media (min-width: 1200px) {
	.hjf-nav {
	  transition: width 0.35s ease, height 0.35s ease, bottom 0.35s ease, background-image 0.35s ease;
	}

	.hjf-nav.is-scrolled {
	  bottom: auto;
	  right: 0;
	  width: 100%;
	  height: 80px;
	  flex-direction: row;
	  background-image: none;
	}

	.hjf-nav.is-scrolled .hjf-nav-inner {
	  flex-direction: row;
	  align-items: center;
	  height: 100%;
	  padding: 0 var(--space-md);
	  width: 100%;
	}

	.hjf-nav.is-scrolled .hjf-nav-logo {
	  margin-bottom: 0;
	  margin-right: var(--space-md);
	  flex-shrink: 0;
	}

	.hjf-nav.is-scrolled .hjf-nav-logo img {
	  padding: 0;
	  max-width: 140px;
	  max-height: 60px;
	}

	.hjf-nav.is-scrolled .hjf-nav-menu {
	  flex: 1 1 auto;
	  padding: 0;
	  width: auto;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

	.hjf-nav.is-scrolled .hjf-nav-menu .hjf-nav-list {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  gap: 4px;
	}

	.hjf-nav.is-scrolled .hjf-nav-menu .hjf-nav-list > li {
	  margin-bottom: 0;
	}

	.hjf-nav.is-scrolled .hjf-nav-menu .hjf-nav-list > li > a {
	  padding: 8px 12px;
	  font-size: 14px;
	  letter-spacing: 1.2px;
	  white-space: nowrap;
	}

	.hjf-nav.is-scrolled .hjf-nav-cta {
	  width: auto;
	  margin-top: 0;
	  margin-left: var(--space-sm);
	  flex-shrink: 0;
	  white-space: nowrap;
	  padding: 10px 24px;
	}

	.hjf-nav.is-scrolled .hjf-nav-tagline {
	  display: none;
	}

	.hjf-body-scrolled .site-container {
	  margin-left: 0;
	  padding-top: 80px;
	}
  }

  @media (max-width: 1199px) {
	.hjf-nav {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: auto;
	  height: 144px;
	  width: 100%;
	  flex-direction: row;
	  align-items: center;
	  background-image: none;
	  padding: 0 var(--space-sm);
	}

	.hjf-nav-inner {
	  flex-direction: row;
	  align-items: center;
	  height: 100%;
	  padding: 0;
	  width: 100%;
	}

	.hjf-nav-logo {
	  margin: 0;
	}

	.hjf-nav-logo img {
	  max-height: 130px;
	  max-width: none;
	}

	.hjf-nav-toggle {
	  display: inline-block;
	}

	/* Hide CTA + tagline in the top bar; only show inside overlay */
	.hjf-nav-cta,
	.hjf-nav-tagline {
	  display: none;
	}

	.hjf-nav-menu {
	  position: fixed;
	  top: 64px;
	  left: 0;
	  right: 0;
	  padding: var(--space-md) var(--space-sm);
	  transform: translateY(-100%);
	  opacity: 0;
	  visibility: hidden;
	  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
	}

	

	.hjf-nav.is-active {
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  height: 100vh;
	  min-height: 100vh;
	  height: 100dvh;
	  width: 100%;
	  flex-direction: column;
	  align-items: flex-start;
	  padding: var(--space-md);
	  background-color: var(--color-navy);
	  background-image: url('images/pattern.png');
	  background-repeat: repeat-x;
	  background-position: bottom center;
	  background-size: 33%;
	  overflow-y: auto;
	}

	.hjf-nav.is-active .hjf-nav-inner {
	  flex-direction: column;
	  align-items: flex-start;
	  height: 100%;
	  width: 100%;
	  padding: 0;
	}

	.hjf-nav.is-active .hjf-nav-toggle {
	  position: absolute;
	  top: var(--space-md);
	  right: var(--space-sm);
	  margin: 0;
	  width: 40px;
	  height: 40px;
	}

	.hjf-nav.is-active .hjf-nav-toggle-bar {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  margin: 0;
	  transform-origin: center;
	}

	.hjf-nav.is-active .hjf-nav-logo {
	  margin-top: var(--space-sm);
	}

	.hjf-nav.is-active .hjf-nav-logo img {
	  max-height: 120px;
	  padding: 0 0 var(--space-md) 0;
	}

	/* Turn hamburger into X when nav is active */
	.hjf-nav.is-active .hjf-nav-toggle-bar:first-child {
	  transform: translate(-50%, -50%) rotate(45deg);
	  opacity: 1;
	}

	.hjf-nav.is-active .hjf-nav-toggle-bar {
		opacity: 0;
	  }

	.hjf-nav.is-active .hjf-nav-toggle-bar:last-child {
	  transform: translate(-50%, -50%) rotate(-45deg);
	  opacity: 1;
	}

	.hjf-nav.is-active .hjf-nav-menu {
	  position: static;
	  width: 100%;
	  padding: 0 0 var(--space-md);
	  transform: none;
	  opacity: 1;
	  visibility: visible;
	}

	.hjf-nav.is-active .hjf-nav-menu .hjf-nav-list {
	  display: flex;
	  flex-direction: column;
	  align-items: flex-start;
	}

	.hjf-nav.is-active .hjf-nav-cta {
	  display: block;
	  width: 100%;
	  margin-top: auto;
	}

	.hjf-nav.is-active .hjf-nav-tagline {
	  display: block;
	  margin-top: var(--space-sm);
	  font-size: 14px;
	  text-align: center;
	  max-width: 100%;
	}

	.site-container {
	  margin-left: 0;
	  padding-top: 64px;
	  padding-left: 0;
	  padding-right: 0;
	}
  }

  @media (max-width: 767px) {

	.hjf-nav-logo img {
        max-height: 100px;
        max-width: none;
		padding: 0px;
    }

	.hjf-nav.is-active {
		background-size: 73%;
	}
  }
  
  /* ============================================================
	 Layout
	 ============================================================ */
  
  .hjf-container {
	width: 100%;
	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
  }
  
  .hjf-section {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
  }
  
  .hjf-section--dark {
	background-color: var(--color-navy);
	color: var(--color-white);
  }
  
  .hjf-section--dark h2,
  .hjf-section--dark p,
  .hjf-section--dark li {
	color: var(--color-white);
  }
  
  .hjf-section--blush {
	background-color: var(--color-blush);
  }
  
  
  /* ============================================================
	 Buttons
	 ============================================================ */
  
  .hjf-btn {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	padding: 14px 28px;
	min-height: 44px;
	box-sizing: border-box;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color var(--transition-duration) var(--transition-ease), color var(--transition-duration) var(--transition-ease), border-color var(--transition-duration) var(--transition-ease);
	text-decoration: none;
  }
  
  /* Primary — rust fill */
  .hjf-btn--primary {
	background-color: var(--color-rust);
	color: var(--color-white);
	border-color: var(--color-rust);
  }
  
  .hjf-btn--primary:hover {
	background-color: transparent;
	color: var(--color-rust);
	text-decoration: none;
  }
  
  /* Secondary — outlined navy */
  .hjf-btn--secondary {
	background-color: transparent;
	color: var(--color-navy);
	border-color: var(--color-navy);
  }
  
  .hjf-btn--secondary:hover {
	background-color: var(--color-navy);
	color: var(--color-white);
	text-decoration: none;
  }
  
  /* Ghost — outlined white (for dark backgrounds) */
  .hjf-btn--ghost {
	background-color: transparent;
	color: var(--color-white);
	border-color: var(--color-white);
  }
  
  .hjf-btn--ghost:hover {
	background-color: var(--color-white);
	color: var(--color-navy);
	text-decoration: none;
  }
  
  
  /* ============================================================
	 Accessibility (WCAG AA)
	 ============================================================ */
  
  /* Visible focus for keyboard users — do not remove */
  :focus {
	outline: 2px solid transparent;
  }
  
  :focus-visible {
	outline: 3px solid var(--color-rust);
	outline-offset: 3px;
  }
  
  /* High-contrast focus on dark nav */
  .hjf-nav a:focus-visible,
  .hjf-nav button:focus-visible {
	outline-color: var(--color-light-blue);
	outline-offset: 2px;
	color: var(--color-navy);
  }
  
  /* Respect user preference for reduced motion (WCAG 2.1) */
  @media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
	  animation-duration: 0.01ms !important;
	  animation-iteration-count: 1 !important;
	  transition-duration: 0.01ms !important;
	}
  }
  
  .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
  }
  
  .screen-reader-text:focus,
  .screen-reader-shortcut:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	margin: 0;
	overflow: visible;
	padding: var(--space-sm);
	position: static;
	width: auto;
	background: var(--color-white);
	color: var(--color-navy);
	z-index: 100000;
  }

  /* ============================================================
   Responsive — Large screens (max 1500px)
   ============================================================ */

@media (max-width: 1500px) {

  
	:root {
		--fs-display-xl: 120px;
		--fs-hover: 14px;
		--lh-hover: 18px;
	  }


	 
	/* Add ny future 1500px+ tweaks here */
  
  }

  /* ============================================================
   Responsive — Smaller Laptop screens (max 1280px)
   ============================================================ */

@media (max-width: 1280px) {

	:root {
		--fs-timeline: 56px;
	}


	.hjf-help__cards {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.hjf-help__card {
		background-color: #255B6C;
		text-align: center;
	}

	.hjf-help__card-label,
	.hjf-help__card-hover-text {
		font-size: 16px;
		line-height: 1.6;
	}

	.hjf-partners__list {
		column-count: 2;
	}


	.hjf-timeline__inner {
		max-width: 600px;
	}

	.hjf-timeline {
		padding-top: 0px;
		padding-bottom: var(--space-lg);
	}

	

}

  
  /* ============================================================
	 Responsive — Tablet (768px+)
	 ============================================================ */
  
  @media (min-width: 768px) {
  
	:root {
	  --fs-h1: 76px;
	  --fs-h2: 48px;
	}
  
  }
  
  
  /* ============================================================
	 Responsive — Laptop (1199px)
	 ============================================================ */
  
  @media (max-width: 1199px) {
  
	.hjf-hero__inner {
		text-align: center;
	}

	:root {
		--fs-h1:         64px;
		--lh-h1:         68px;
		--fs-h2:         40px;
		--fs-timeline:   48px;
		--fs-display-xl: 86px;
		--lh-h4:         23px;

	  }

	  .hjf-mission__decor {
		top: -18px;
	  }

	  .hjf-help__decorative {
		bottom: -17px;
		display: none;
	  }

	  .hjf-partners__graphic {
		max-width: 400px;
	  }

  }


    /* ============================================================
	 Responsive — Desktop (1024px+)
	 ============================================================ */
  
	 @media (min-width: 1024px) {
  
		.hjf-section {
		  padding-top: var(--space-xxl);
		  padding-bottom: var(--space-xxl);
		}

		
	  }

	   /* ============================================================
	 Responsive — Mobile (max 850px)
	 ============================================================ */
  
  @media (max-width: 850px) {

    .hjf-partners__list {
        column-count: 1;
    }

	.hjf-partners {
		padding-left: var(--space-lg);
		padding-right: var(--space-lg);
		padding-top: var(--space-sm);
		padding-bottom: var(--space-sm);
	}

	.hjf-partners__graphic {
		position: relative;
			left: 0px;
			top: 0px;
			margin-bottom: 30px;
			margin-top: -100px;
			transform: none;
			z-index: 0;
			width: auto;
			max-width: 100%;
			height: auto;
			max-height: 579px;
			pointer-events: none;
  }
}
  
  
  /* ============================================================
	 Responsive — Mobile (max 767px)
	 ============================================================ */
  
  @media (max-width: 767px) {
  
	:root {
	  --fs-h1:         48px;
	  --lh-h1:         52px;
	  --fs-h2:         36px;
	  --fs-timeline:   52px;
	  --fs-display-xl: 80px;
	}
  
	.hjf-section {
	  padding-top: var(--space-lg);
	  padding-bottom: var(--space-lg);
	}
  }