/*
Theme Name: WP-Final
Theme URI: https://hoenchoconsulting.com
Author: Hoencho Consulting Services
Description: WordPress theme carved from the housing.zip static site.
Version: 1.0.4
License: Proprietary
Text Domain: wp-final
*/

/* Everything below this comment is housing.zip's css/base.css, copied over
   byte-for-byte — this file only exists at the theme root (instead of
   css/base.css) because WordPress requires a style.css with the header
   comment above at the theme root for the theme to be recognized/activatable
   at all. No rules were changed in the port. */

:root {
  --black: #000000;
  --black-soft: #111;
  --gold: #eba000;
  --gold-glow: rgba(235, 160, 0, 0.35);
  --text-muted: #cfcfcf;
  --coal: #000000;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Lead-capture forms: cap at 600px, otherwise 40% of the viewport width —
   with a 300px floor so it doesn't collapse to an unusable sliver on
   phones (40vw is only 150px on a 375px screen). */
#lead-form {
  width: clamp(300px, 40vw, 600px);
  max-width: 100%;
  margin: 0 auto;
}

/* Add to body styles */
body {
  margin: 0;
  background: var(--coal);
  color: var(--gold);
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  position: relative;
  min-height: 90vh;
}
.reveal-focus {
  opacity: 0;
  filter: blur(8px);
  transform: scale(0.9) translateY(20px);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.left {
  text-align: left;
  padding: 0px 50px;
}

.reveal-focus.is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: scale(1) translateY(0);
}

.four span {
  color: #8d6a00;
  opacity: 0;
  transform: translate(0, -200px) rotate(360deg) scale(0);
  animation: revolveDrop 1.5s forwards;
}

@keyframes revolveDrop {
  30% {
    transform: translate(0, -50px) rotate(180deg) scale(1);
  }

  60% {
    transform: translate(0, 20px) scale(0.8) rotate(0deg);
  }

  100% {
    transform: translate(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

.animate span:nth-of-type(2) {
  animation-delay: 0.05s;
}
.animate span:nth-of-type(3) {
  animation-delay: 0.1s;
}
.animate span:nth-of-type(4) {
  animation-delay: 0.15s;
}
.animate span:nth-of-type(5) {
  animation-delay: 0.2s;
}
.animate span:nth-of-type(6) {
  animation-delay: 0.25s;
}
.animate span:nth-of-type(7) {
  animation-delay: 0.3s;
}
.animate span:nth-of-type(8) {
  animation-delay: 0.35s;
}
.animate span:nth-of-type(9) {
  animation-delay: 0.4s;
}
.animate span:nth-of-type(10) {
  animation-delay: 0.45s;
}
.animate span:nth-of-type(11) {
  animation-delay: 0.5s;
}
.animate span:nth-of-type(12) {
  animation-delay: 0.55s;
}
.animate span:nth-of-type(13) {
  animation-delay: 0.6s;
}
.animate span:nth-of-type(14) {
  animation-delay: 0.65s;
}
.animate span:nth-of-type(15) {
  animation-delay: 0.7s;
}
.animate span:nth-of-type(16) {
  animation-delay: 0.75s;
}
.animate span:nth-of-type(17) {
  animation-delay: 0.8s;
}
.animate span:nth-of-type(18) {
  animation-delay: 0.85s;
}
.animate span:nth-of-type(19) {
  animation-delay: 0.9s;
}
.animate span:nth-of-type(20) {
  animation-delay: 0.95s;
}
.animate span:nth-of-type(21) {
  animation-delay: 1s;
}

.animate span {
  display: inline-block;
}
/* Fixed, translucent background image */
body::before {
  content: "";
  position: fixed;
  inset: 0; /* cover viewport */
  /* Path adjusted from the original "../images/bg.jpg": that was relative
     to css/base.css one folder deep; style.css lives at the theme root. */
  background-image: url("images/bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* ensure it doesn't move on scroll */
  opacity: 0.05; /* subtle */
  z-index: -9999; /* keep behind everything */
  pointer-events: none;
  will-change: opacity, transform;
}
/* Replace existing fade-in with slide-up */
.fade-in {
  opacity: 0;
  transform: translateY(80px); /* Increased from 30px */
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in.visible,
.fade-in.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Card-specific slide-up (stronger effect) */
.card,
.custom-card,
.glow-card,
.card-no-border {
  transform: translateY(100px);
  transition: opacity 0.9s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card.visible,
.custom-card.visible,
.glow-card.visible,
.card-no-border.visible,
.card.is-revealed,
.custom-card.is-revealed,
.glow-card.is-revealed,
.card-no-border.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid items */
.card-grid > *:nth-child(1) {
  transition-delay: 0.1s;
}
.card-grid > *:nth-child(2) {
  transition-delay: 0.2s;
}
.card-grid > *:nth-child(3) {
  transition-delay: 0.3s;
}
.card-grid > *:nth-child(4) {
  transition-delay: 0.4s;
}
.card-grid > *:nth-child(5) {
  transition-delay: 0.5s;
}
.card-grid > *:nth-child(6) {
  transition-delay: 0.6s;
}

/* Scroll reveal utility classes */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.active,
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.reveal-fade.active,
.reveal-fade.is-revealed {
  opacity: 1;
}

.reveal-slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.6s ease;
}

.reveal-slide-left.active,
.reveal-slide-left.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.6s ease;
}
.reveal-slide-right.active,
.reveal-slide-right.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.6s ease;
}
.reveal-scale.active,
.reveal-scale.is-revealed {
  opacity: 1;
  transform: scale(1);
}

/* ========================
   Bouncy reveal animations
   ======================== */
@keyframes reveal-bounce {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  60% {
    opacity: 0.5;
    transform: translateY(-14px) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes reveal-bounce-lg {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
  60% {
    opacity: 1;
    transform: translateY(-18px) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes reveal-bounce-left {
  0% {
    opacity: 0;
    transform: translateX(-40px) scale(0.98);
  }
  70% {
    opacity: 1;
    transform: translateX(8px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes reveal-bounce-right {
  0% {
    opacity: 0;
    transform: translateX(40px) scale(0.98);
  }
  70% {
    opacity: 1;
    transform: translateX(-8px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Apply dramatic animations when revealed */
.reveal.is-revealed {
  animation: reveal-bounce 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reveal-fade.is-revealed {
  animation: reveal-bounce 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reveal-slide-left.is-revealed {
  animation: reveal-bounce-left 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reveal-slide-right.is-revealed {
  animation: reveal-bounce-right 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reveal-scale.is-revealed {
  animation: reveal-bounce 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stronger for cards */
.card.is-revealed,
.custom-card.is-revealed,
.glow-card.is-revealed,
.card-no-border.is-revealed {
  animation: reveal-bounce-lg 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Enhanced button hover effects */
.btn {
  padding: 14px 28px;
  border-radius: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
  z-index: -1;
}

.btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-primary:hover {
  color: var(--black);
  font-size: calc(100% + 2px);
}

.btn-primary::before {
  background: var(--gold);
}

.btn-secondary {
  border: 1px solid var(--gold);
  color: var(--gold);
}

.btn-secondary:hover {
  color: var(--black);
}

.btn-secondary::before {
  background: var(--gold);
}

/* Border glow animation */
@keyframes borderGlow {
  0%,
  100% {
    box-shadow: 0 0 5px var(--gold-glow);
  }
  50% {
    box-shadow: 0 0 20px var(--gold-glow), 0 0 30px var(--gold-glow);
  }
}

.btn:hover {
  animation: borderGlow 2.5s ease-in-out infinite;
}

.attention-btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #000;
  background: linear-gradient(145deg, #b37a00, #fff278, #9a6900);
  background-size: 200% 100%;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  animation: gradientFlow 2s linear infinite;
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

h1 {
  font-family: "Roboto", sans-serif;
  margin: 0;
  line-height: 1;
  font-weight: 900;
  color: var(--gold);
}
h3 {
  font-family: "Roboto", sans-serif;
  margin: 0;
  line-height: 1;
  font-weight: 800;
  color: var(--gold);
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.7rem);
}

a {
  text-decoration: none;
  color: inherit;
}
.honeypot {
  position: absolute;
  left: -5000px;
  top: -5000px;
}
.btn {
  padding: 14px 28px;
  border-radius: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Disabled / loading states for buttons */
.btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.btn .spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-top-color: rgba(0, 0, 0, 0.9);
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.btn:hover {
  transform: translateY(-2px);
}

.card {
  background: var(--black-soft);
  border: 3px solid var(--gold);
  border-radius: 20px;
  /* top | left-right | bottom — top shrinks harder than the rest */
  padding: clamp(6px, 2vw, 40px) clamp(10px, 3vw, 30px) clamp(14px, 4vw, 40px);
  text-align: center;
  /* Grid items default to min-width:auto, meaning a column can't shrink
     below its content's widest unbreakable word/element — with several
     cards in a row that forces uneven column widths and can overflow the
     grid entirely. min-width:0 lets the column actually shrink to its
     defined (1fr / minmax) size; overflow-wrap lets a too-long single
     "word" (like a percentage) break instead of forcing the column wide. */
  min-width: 0;
  overflow-wrap: break-word;
}

.card h3 {
  margin: 20px 0 10px;
  color: var(--gold);
  /* Card titles specifically shrink further/faster than headings elsewhere
     on the page (this only targets h3 inside a .card). */
  font-size: clamp(0.8rem, 0.6rem + 1.3vw, 1.4rem) !important;
  overflow-wrap: break-word;
}

/* Blog section: always exactly 3 cards per row, at every width — columns
   divide the available space evenly and shrink together as the screen
   narrows, rather than reflowing to fewer/more columns. */
.blog-card-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(4px, 2vw, 30px) !important;
}
.blog-card-grid .card {
  padding: clamp(4px, 1.5vw, 40px) clamp(3px, 1.5vw, 30px) clamp(6px, 2vw, 40px) !important;
}
.blog-card-grid .card h3 {
  font-size: clamp(0.6rem, 0.45rem + 1vw, 1.4rem) !important;
  margin: 8px 0 6px !important;
  line-height: 1.15;
}
.blog-card-grid .card p {
  font-size: clamp(0.55rem, 0.4rem + 0.8vw, 1rem) !important;
  line-height: 1.25;
}
.blog-card-grid .card .btn,
.blog-card-grid .card button {
  padding: clamp(4px, 1.5vw, 14px) clamp(5px, 2vw, 28px) !important;
  font-size: clamp(0.55rem, 0.4rem + 0.8vw, 1.1rem) !important;
}

/* cta.php Programs / More Programs: same "always 3 per row" treatment as
   the blog grid — two 3-card sections stacked reads as a 3x2 layout. */
.programs-card-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(4px, 2vw, 30px) !important;
}
.programs-card-grid .card {
  padding: clamp(4px, 1.5vw, 40px) clamp(3px, 1.5vw, 30px) clamp(6px, 2vw, 40px) !important;
}
.programs-card-grid .card h3 {
  font-size: clamp(0.6rem, 0.45rem + 1vw, 1.4rem) !important;
  margin: 8px 0 6px !important;
  line-height: 1.15;
}
.programs-card-grid .card p {
  font-size: clamp(0.55rem, 0.4rem + 0.8vw, 1rem) !important;
  line-height: 1.25;
}
.programs-card-grid .card .btn,
.programs-card-grid .card button {
  padding: clamp(4px, 1.5vw, 14px) clamp(5px, 2vw, 28px) !important;
  font-size: clamp(0.55rem, 0.4rem + 0.8vw, 1.1rem) !important;
}

/* Buttons inside cards shrink fluidly with the card itself instead of
   staying fixed-size while their container shrinks around them. */
.card .btn,
.card .attention-btn,
.card-link,
.card button {
  padding: clamp(8px, 2.5vw, 14px) clamp(10px, 4vw, 28px) !important;
  font-size: clamp(0.75rem, 0.6rem + 1vw, 1.1rem) !important;
}

p {
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.2rem);
  /* font-weight: bold; */
}

.card-link {
  display: inline-block;
  margin-top: 20px;
  /* color: var(--gold); */
  font-weight: 600;
}

.icon img {
  /* width: 100px; */
  height: 100%;
  max-width: 100%;
  width: clamp(36px, 10vw, 64px);
}

/* Modal component */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  padding: 24px;
}
.modal-overlay.open {
  display: flex;
}

.modal {
  width: min(520px, 100%);
  max-height: 95vh;
  overflow-y: auto;
  background: var(--black-soft);
  border: 3px solid var(--gold);
  border-radius: 12px;
  padding: 20px;
  color: var(--gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Image Modal specific sizing */
.modal--image .modal {
  width: auto;
  max-width: min(900px, 95%);
}
.modal--image #modal-ok {
  display: none;
}

.modal h2 {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 1.25rem;
}

.modal p {
  margin: 0 0 18px;
  color: var(--gold);
  line-height: 1.4;
}

.modal h3 {
  font-size: 1.1rem;
  margin: 20px 0 10px;
  color: var(--gold);
  text-transform: uppercase;
}

.modal ul {
  padding-left: 20px;
  margin-bottom: 18px;
}

.modal li {
  margin-bottom: 8px;
}

/* Social links inside modal */
.social-list {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 12px 0 18px;
  flex-wrap: wrap;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--gold);
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(235, 160, 0, 0.08);
}

.social-link:hover {
  background-color: rgba(255, 243, 139, 0.45);
  font-weight: 750;
}
.social-link svg {
  width: 18px;
  height: 18px;
  fill: var(--gold);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.btn-close {
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--gold);
  color: #000;
  border: none;
  cursor: pointer;
}

/* Failure styling */
.modal--failure .modal {
  border-color: #e74c3c;
}
.modal--failure h2 {
  color: #e74c3c;
}
.modal--failure .btn-ok {
  background: #e74c3c;
  color: #fff;
}
.glow-box {
  border: 1px solid rgba(235, 160, 0, 0.25);
  box-shadow: 0 0 0 10px rgba(235, 160, 0, 0.15), 0 0 35px var(--gold-glow);
  border-radius: 28px;
}

.glow-card {
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.glow-card:hover {
  box-shadow: 0 0 25px rgba(235, 160, 0, 0.45);
  transform: translateY(-4px);
}
/* Header Styles */
.main-header {
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-header .brand {
  width: 200px; /* Adjust as needed */
}

.brand {
  flex: 0 0 33.333%; /* 4 / 12 */
}

.main-header .brand img {
  width: 50%;
}

.hero-content {
  flex: 0 0 66.666%; /* 8 / 12 */
}

.brand img {
  max-width: 50%;
}

/* Fixed top navigation */
.fixed-top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(11, 11, 11, 0.95);
  border-bottom: 1px solid rgba(235, 160, 0, 0.12);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 24px;
}
.fixed-top-nav .nav-inner {
  max-width: none;
  margin: 0 60px; /* Left/right margin */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 80px); /* Adjust for margin */
}
.fixed-top-nav .brand img {
  max-width: 100px;
  height: auto;
}
.fixed-top-nav .main-nav {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  align-items: center;
}
.fixed-top-nav .main-nav a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
}
.fixed-top-nav .main-nav a:hover,
.fixed-top-nav .main-nav a.active {
  background: rgba(235, 160, 0, 0.12);
}

/* Dropdown submenu (e.g. Diaspora) — hover-revealed on desktop, tap-toggled
   via .open (set by topnav.php's script) on narrow/touch widths. */
.main-nav li.has-submenu {
  position: relative;
}
.main-nav li.has-submenu > a::after {
  content: "\25BE";
  margin-left: 6px;
  font-size: 0.7em;
  vertical-align: middle;
}
.main-nav .submenu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--black-soft);
  border: 1px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 50;
}
.main-nav li.has-submenu:hover > .submenu,
.main-nav li.has-submenu.open > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-nav .submenu a {
  display: block;
  padding: 10px 18px;
  white-space: nowrap;
  color: var(--gold);
  font-weight: 600;
  border-radius: 0;
}
.main-nav .submenu a:hover {
  background: rgba(235, 160, 0, 0.12);
}

/* Nav toggle button (hidden on desktop) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--gold);
  cursor: pointer;
}
.nav-toggle:focus {
  outline: 2px solid rgba(235, 160, 0, 0.25);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Hamburger lines */
.nav-toggle .hamburger {
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--gold);
  position: relative;
  transition: transform 0.2s ease;
}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--gold);
  transition: transform 0.2s ease, top 0.2s ease, bottom 0.2s ease;
}
.nav-toggle .hamburger::before {
  top: -7px;
}
.nav-toggle .hamburger::after {
  bottom: -7px;
}
.nav-toggle[aria-expanded="true"] .hamburger {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] .hamburger::before {
  transform: translateY(7px) rotate(45deg);
  top: 0;
}
.nav-toggle[aria-expanded="true"] .hamburger::after {
  transform: translateY(-7px) rotate(-45deg);
  bottom: 0;
}

/* Reserve space for fixed nav when present */
.has-fixed-nav body {
  padding-top: 72px;
}

.hero {
  max-width: 1100px;
  margin: 80px auto;
  padding: 60px;
}

.hero-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.custom-card h1 {
  font-size: clamp(1.9rem, 1.1rem + 4vw, 4rem);
  margin-bottom: 16px;
}

.custom-card h1 span {
  color: var(--gold);
}

.subtitle {
  color: var(--gold);
  margin-bottom: 40px;
}

.cta-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footnote {
  margin-top: 40px;
  font-size: 0.85rem;
  color: var(--gold);
}

.custom-card {
  box-shadow: 0 0 0 2px rgba(235, 160, 0, 0.15), 0 0 15px var(--gold-glow);
  max-width: none;
  width: calc(100% - 50px);
  margin: 50px auto;
  padding: 0px 40px;
  text-align: center;
  border: 3px solid var(--gold);
  border-radius: 20px;
  padding: clamp(8px, 3vw, 20px) clamp(10px, 4vw, 30px);
  position: relative;
  min-height: 450px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 30vw, 260px), 1fr));
  gap: clamp(10px, 3vw, 30px);
  margin-top: clamp(24px, 5vw, 50px);
}

/* 60/40 layout for select sections (e.g., Nigeria JV info) */
.card-grid.left {
  grid-template-columns: 60% 40%;
  align-items: start;
}



@media (max-width: 900px) {
  .card-grid.left {
    /* This section only ever has 2 children (a split-image card + a payout
       card) — repeat(3, 1fr) left a third column sitting empty, wasting
       a third of the width. Stack them instead. */
    grid-template-columns: 1fr;
  }
}

/* Split layout inside a card (image + content) */
.card--split .card-split {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: start;
  padding: 10px;
}

.card--split .card-split__img {
  width: clamp(60px, 20vw, 120px);
  max-width: 100%;
  height: auto;
  display: block;
}

.card-split ul li {
  font-size: clamp(0.8rem, 0.7rem + 0.7vw, 1rem);
}

@media (max-width: 700px) {
  .card--split .card-split {
    /* Two equal columns squeezed an icon and a full heading+bullet-list
       block into ~41px each. Stack instead: image on top, content below. */
    grid-template-columns: 1fr;
  }
  .card--split .card-split__img {
    margin: 0 auto 16px;
  }
}

.card-no-border {
  background: var(--black-soft);
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
}

.card-no-border h3 {
  color: #d4a03f;
  font-size: 1.1rem;
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.glow-card form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.glow-card input,
.glow-card textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid #d4a03f;
  color: #fff;
  padding: 10px 0;
  font-size: 1rem;
  padding: 10px;
}

.glow-card input::placeholder,
.glow-card textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.glow-card textarea {
  min-height: 80px;
  resize: vertical;
}

.btn-primary {
  background: var(--gold);
  color: #000;
  border: none;
  padding: 12px 40px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  align-self: center;
}

.custom-card > h3 {
  text-align: center;
  font-size: 0.9rem;
}

.investor-comment {
  padding-top: 10px;
  line-height: 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* top row */
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* 4 / 12 */
.footer-top .brand {
  flex: 0 0 33.333%;
}

.footer-top .brand img {
  max-width: 120px;
}

/* 8 / 12 */
.footer-nav {
  flex: 0 0 66.666%;
}

.footer-nav ul {
  list-style: none;
  display: flex;
  color: var(--gold);
  justify-content: center;
  gap: 2rem;
  padding: 0;
  margin: 0;
}

.footer-nav a {
  text-decoration: none;
  font-weight: 600;
}

/* bottom text */
.footer-note {
  text-align: center;
  font-size: 1.4rem;
  opacity: 0.8;
}

/* pages.css — minimal page-specific overrides */
.home-hero {
  padding: 6rem 0;
}
.cta-banner {
  padding: 2rem;
  border-radius: 10px;
}
/* How-it-works page: make ordered lists more readable */
.custom-card ol {
  font-size: 2rem;
  line-height: 1.2;
  text-align: left;
  margin-right: 8rem; /* keep space from the right */
  padding-left: 4rem; /* ensure numbers are indented */
}
.custom-card ol li {
  margin-bottom: 2.5rem; /* extra spacing between items */
}

.center {
  text-align: center !important;
}

/* ================================
   DUO SECTION (FAQ + PRODUCT)
================================ */

.duo-section {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 0 40px;
}

/* Shared card layout */
.duo-card {
  display: flex;
  align-items: stretch;
  gap: 40px;
  position: relative;
}

/* --------------------------------
   FAQ CARD
-------------------------------- */

.faq-card {
  /* keep a subtle glow but allow the section background to show through */
  background: transparent;
  min-height: 520px;
  padding: 40px 40px 56px 40px;
  display: flex;
  align-items: flex-start;
  position: relative; /* for absolute brand-mark */
  overflow: hidden;

  /* Decorative background covers the whole section with a subtle left-darkening gradient for legibility */
  background-image: linear-gradient(
      to left,
      rgba(11, 11, 11, 0.55),
      rgba(11, 11, 11, 0) 35%
    ),
    url("icons/faq_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: relative;
}

.faq-content {
  flex: 1;
  max-width: 540px;
  text-align: left;
  padding: 12px 8px;
}

.faq-title {
  font-size: 2.8rem;
  margin-bottom: 20px;
}

/* Brand mark positioned bottom-right inside the card */
.brand-mark {
  position: absolute;
  right: 28px;
  bottom: 18px;
  opacity: 0.95;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .faq-content {
    max-width: 100%;
    padding: 0;
  }
  .brand-mark {
    position: static;
    margin-top: 18px;
    background: transparent;
    color: var(--gold);
  }
  .duo-section {
    /* background-image: none; */
    min-height: auto;
    margin: 60px auto;
    padding: 0 24px;
  }
}
.faq-question {
  font-weight: 900;
  font-size: 1.3rem;
}

.faq-answer {
  color: var(--gold);
  max-width: 400px;
}

/* --------------------------------
   PRODUCT CARD
-------------------------------- */

.product-card {
  background: radial-gradient(
    circle at top left,
    rgba(235, 160, 0, 0.12),
    transparent 60%
  );
}

.product-art {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.product-art img {
  max-height: 420px;
}

.product-content {
  flex: 1;
}

.product-title {
  font-size: 2.4rem;
  margin-bottom: 20px;
}

.product-box {
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 24px;
  max-width: 360px;
}

.product-name {
  font-weight: 900;
  margin-bottom: 12px;
}

.product-features {
  padding-left: 18px;
  margin-bottom: 20px;
}

.product-features li {
  margin-bottom: 8px;
  color: var(--text-muted);
}

.buy-btn {
  display: inline-block;
  margin-top: 10px;
}

/* --------------------------------
   BRAND MARK
-------------------------------- */

.brand-mark {
  position: absolute;
  bottom: 20px;
  right: 30px;
  font-size: 0.85rem;
  letter-spacing: 1px;
  opacity: 0.6;
}

/* Mobile (phones & small tablets) */
@media (max-width: 768px) {
  .faq-card {
    padding: 28px 20px;
    min-height: auto;
    background-image: none;
  }
  /* NAV */
  .fixed-top-nav .nav-inner {
    position: relative;
    /* The base rule's margin:0 60px + width:calc(100% - 80px) only balances
       to exactly 100% if margin and the width-subtraction match (they
       don't: 60+60=120 vs 80, a 40px overflow) — override both together
       here so mobile doesn't inherit that overflow. */
    margin: 0 16px;
    width: calc(100% - 32px);
  }

  .fixed-top-nav .main-nav {
    display: none;
    position: absolute;
    top: 64px;
    right: 12px;
    background: var(--black-soft);
    border: 1px solid rgba(235, 160, 0, 0.08);
    padding: 12px;
    border-radius: 10px;
    flex-direction: column;
    gap: 8px;
    width: calc(100% - 48px);
    max-width: 320px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }

  .fixed-top-nav .main-nav.open {
    display: flex;
  }

  .fixed-top-nav .main-nav li {
    text-align: right;
  }

  /* Submenu becomes an inline expandable list instead of a hover flyout —
     .open is toggled by topnav.php's tap handler on narrow widths. */
  .main-nav .submenu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 0 4px 16px;
  }
  .main-nav li.has-submenu.open > .submenu {
    display: block;
  }
  .main-nav li.has-submenu:hover > .submenu {
    display: none;
  }
  .main-nav li.has-submenu.open:hover > .submenu {
    display: block;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 6px;
  }

  /* HERO / HEADER */
  .main-header {
    flex-direction: column;
    gap: 20px;
  }

  .hero-inner {
    flex-direction: column;
    text-align: center;
  }

  .brand,
  .hero-content {
    flex: 0 0 100%;
  }

  .cta-group {
    flex-direction: column;
  }

  /* CARDS / SECTIONS */
  .duo-card {
    flex-direction: column;
    text-align: center;
  }

  .product-box {
    margin: 0 auto;
  }

  .brand-mark {
    position: static;
    margin-top: 20px;
  }

  /* FOOTER */
  .footer-top {
    flex-direction: column;
    text-align: center;
  }

  .footer-nav ul {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* h1/h2/h3/p sizing now comes from clamp() values set at their base rules,
     so size keeps tracking width smoothly through this breakpoint instead
     of jumping to a fixed value here. */
  p {
    line-height: 1.6;
  }
  .left {
    padding: 0px 0px !important;
  }
  .special {
    padding: 0px !important;
  }
}

/* Body-copy sections (service page details, Legal & Trust, etc.) read as
   left-aligned paragraphs/lists, not centered hero banner text — .custom-card
   centers by default, which is right for hero/CTA sections but wrong for a
   page of actual prose. Placed at end of file and targeting each child
   directly so it wins over the earlier, equally-specific .custom-card rules. */
.content-left,
.content-left .hh-eyebrow,
.content-left h1,
.content-left .subtitle,
.content-left > h3 {
  text-align: left;
}
.content-left ol,
.content-left ul {
  text-align: left;
  max-width: 600px;
  margin: 16px auto;
  padding-left: 1.5em;
  /* .custom-card ol (used by the dedicated how-it-works page) sets a huge
     2rem font-size meant for that page's big numbered steps — it also hits
     these program-page lists via the shared .custom-card selector. Reset
     back to the same size/line-height as the rest of the page's body copy
     (the .subtitle "Who this is for" line) so list items read consistently. */
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.2rem);
  line-height: 1.6;
}
.content-left ol li {
  margin-bottom: 0.75em;
}

/* ===== WordPress-required addition (nothing above this line was changed) =====
   .fixed-top-nav is position:fixed;top:0, same as WP's own #wpadminbar for a
   logged-in visitor — without this offset the two overlap. 32px/46px match
   the admin bar's own height at desktop/narrow widths (WP core's own
   breakpoint is 782px, not this theme's various breakpoints elsewhere). */
body.admin-bar .fixed-top-nav {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .fixed-top-nav {
    top: 46px;
  }
}

/* ===== Legacy "hh-*" class support =====
   Several real Pages (About, Investor Circle, the program detail pages,
   etc.) were authored under an earlier WordPress theme and their stored
   content still uses that theme's class names. page.php already wraps
   their content in .custom-card, so .hh-service-page needs no styling of
   its own (giving it another card border/box would nest one card inside
   another). .hh-cta-row and .hh-btn, though, had no equivalent at all and
   were rendering as plain unstyled links — these mirror .cta-group and
   .attention-btn exactly so they look the same as every button built the
   "normal" way in this theme. */
.hh-cta-row {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.hh-btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #000;
  background: linear-gradient(145deg, #b37a00, #fff278, #9a6900);
  background-size: 200% 100%;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  animation: gradientFlow 2s linear infinite;
}

/* Blog page pagination (home.php) — without this, WP core's default
   .page-numbers markup renders as unstyled browser-default blue links,
   unreadable against this theme's dark background. the_posts_pagination()
   wraps everything in <nav class="pagination"><div class="nav-links">,
   two separate elements, not one with both classes. */
.pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.pagination .page-numbers {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  text-decoration: none;
}
.pagination .page-numbers.current {
  background: var(--gold);
  color: #000;
  font-weight: 700;
}
.pagination .page-numbers:hover {
  background: rgba(235, 160, 0, 0.15);
}

/* Fluent Forms embeds (all the [fluentform id=...] shortcodes across the
   site) render at the full width of whatever section they're in — the
   #lead-form width rule from housing.zip's base.css was written for the
   static site's plain HTML forms, which had id="lead-form" directly on the
   form's own container; Fluent Forms wraps forms in its own markup
   (.fluentform) and never carries that id, so that rule never applied here. */
.fluentform {
  max-width: 600px;
  margin: 0 auto;
}

/* None of the 12 forms have custom appearance_settings configured, so Fluent
   Forms falls back to its own bundled default theme
   (fluentform-public-default.css) for the submit button — dark background,
   Arial, 7px radius, unrelated to this site's design. Overriding it to
   match .attention-btn's exact gradient/shape so it's not visually a
   different button from every other CTA on the site. */
.fluentform .ff-btn-submit {
  display: inline-block;
  padding: 14px 32px;
  font-size: 1.1rem;
  font-family: inherit;
  font-weight: 600;
  color: #000 !important; /* Fluent Forms injects a per-form inline <style>
    (form.fluent_form_{id} .ff-btn-submit:not(.ff_btn_no_style) { color: ... })
    that's more specific than this rule and repeats per form ID, so
    out-specificity-ing it cleanly for all 12 forms isn't practical. */
  background: linear-gradient(145deg, #b37a00, #fff278, #9a6900);
  background-size: 200% 100%;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  animation: gradientFlow 2s linear infinite;
}

/* Merged Listings + Investor Circle page: two forms side by side on wide
   screens, stacked on narrow ones. Same 900px collapse breakpoint already
   used elsewhere (.card-grid.left) for consistency. */
.dual-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 24px;
}
.dual-form-col {
  min-width: 0; /* without this, a grid column won't shrink below its
    widest unbreakable content (e.g. the embedded form), causing overflow —
    same fix already applied to .card elsewhere in this stylesheet. */
}
@media (max-width: 900px) {
  .dual-form-grid {
    grid-template-columns: 1fr;
  }
}
/* About page hero */
.cac-preview img { transition: transform 0.3s ease, opacity 0.3s ease; }
.cac-preview:hover img { transform: scale(1.05); opacity: 1 !important; }
.hero-wrapper { display: grid; grid-template-columns: 2fr 3fr; align-items: center; gap: 3rem; }
.hero-wrapper > * { min-width: 0; }
.hero-text h1 { margin-bottom: 1.2rem; }
.hero-text p { margin-bottom: 1rem; }
.hero-image { width: 100%; height: 100%; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
@media (max-width: 768px) { .hero-wrapper { grid-template-columns: 1fr; } }