/* ============================================================
   Housing Communities · v2.0 · Shared stylesheet
   Used by: v2-index, v2-who-we-are, v2-what-we-do,
            v2-projects, v2-news, v2-contact
   Fonts: Poppins only (300/400/500/600/700/800)
   Brand colours sourced from the live holding page
   ============================================================ */

:root{
  --hc-teal:        #049899;
  --hc-teal-dark:   #037778;
  --hc-blue:        #4995D1;
  --hc-blue-dark:   #2F7EBA;
  --hc-ink:         #1F2D3D;
  --hc-ink-mute:    #5A6B7B;
  --hc-paper:       #FFFFFF;
  --hc-paper-2:     #F6FAFB;
  --hc-line:        #E6EBF0;

  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --r-xl:36px;
  --r-pill:999px;

  --pad-x: clamp(20px, 5vw, 64px);
  --maxw: 1280px;

  --shadow-sm: 0 1px 2px rgba(31,45,61,.04), 0 6px 18px rgba(31,45,61,.06);
  --shadow-md: 0 6px 24px rgba(31,45,61,.10);
  --shadow-lg: 0 24px 60px rgba(31,45,61,.18);

  --header-h: 80px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html, body{overflow-x: clip}
body{
  margin:0;
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--hc-ink);
  background:var(--hc-paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-size:16px;
  font-weight:400;
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--hc-teal);color:#fff}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:'Poppins', sans-serif;
  color:var(--hc-ink);
  margin:0;
  line-height:1.1;
  letter-spacing:-.015em;
}
h2{font-size:clamp(1.9rem, 4vw, 3rem); font-weight:700; color:var(--hc-teal)}
h3{font-size:clamp(1.2rem, 1.6vw, 1.5rem); font-weight:600}
h4{font-weight:600}
p{margin:0; font-weight:400}
.subhead{font-weight:500; color:var(--hc-ink); font-size:1.05rem}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.82rem; font-weight:600;
  color:var(--hc-teal); text-transform:uppercase; letter-spacing:.08em;
}
.eyebrow::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--hc-blue);
}

.container{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad-x)}

/* ---------- Buttons / pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px;
  border-radius:var(--r-pill);
  font-weight:600; font-size:.95rem;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.pill:hover{transform:translateY(-1px)}
.pill--teal{background:var(--hc-teal); color:#fff; box-shadow:0 6px 18px rgba(4,152,153,.25)}
.pill--teal:hover{background:var(--hc-teal-dark)}
.pill--blue{background:var(--hc-blue); color:#fff; box-shadow:0 6px 18px rgba(73,149,209,.25)}
.pill--blue:hover{background:var(--hc-blue-dark)}
.pill--white{background:#fff; color:var(--hc-ink); box-shadow:var(--shadow-sm)}
.pill--white:hover{background:#f7fbfd}
.pill--ghost{background:transparent; color:var(--hc-ink); border:1.5px solid var(--hc-line)}
.pill--ghost:hover{background:var(--hc-paper-2); border-color:var(--hc-teal)}
.pill--sm{padding:10px 18px; font-size:.88rem}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--hc-line);
}
.nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:14px 0;
}
.logo{display:inline-flex; align-items:center}
.logo img{width:180px; height:auto; display:block}
.nav-list{display:flex; gap:6px; justify-content:center; list-style:none; margin:0; padding:0}
.nav-list a{
  padding:10px 14px; border-radius:var(--r-pill);
  font-size:.92rem; font-weight:500;
  color:var(--hc-ink); transition:background .2s, color .2s;
}
.nav-list a:hover{background:var(--hc-paper-2); color:var(--hc-teal)}
.nav-list a.active{background:var(--hc-paper-2); color:var(--hc-teal)}

.menu-toggle{display:none}
.hamburger{display:none}

@media (max-width: 1024px){
  .logo img{width:150px}
  .nav-list a{padding:8px 10px; font-size:.88rem}
}
@media (max-width: 900px){
  .nav{grid-template-columns:auto auto; gap:12px}
  .nav-list{
    grid-column:1/-1; order:3; flex-direction:column; align-items:stretch;
    background:#fff; padding:8px; border-radius:var(--r-md);
    box-shadow:var(--shadow-sm); display:none;
  }
  .nav-list a{padding:12px 14px}
  .hamburger{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:var(--r-pill);
    background:#fff; box-shadow:var(--shadow-sm); color:var(--hc-teal);
  }
  .menu-toggle:checked ~ .nav-list{display:flex}
}

/* ---------- Dot motif ---------- */
.dot-cluster{position:absolute; pointer-events:none; z-index:2}
.dot-cluster .dot{position:absolute; border-radius:50%; display:block}
.dot-cluster .dot--teal{background:var(--hc-teal)}
.dot-cluster .dot--blue{background:var(--hc-blue)}

/* ---------- Photo treatments ---------- */
.photo-circle{
  border-radius:50%;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  position:relative;
}
.photo-circle img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .8s ease;
}
.photo-circle:hover img{transform:scale(1.04)}
.photo-circle--outlined::before{
  content:""; position:absolute; inset:-14px;
  border:2px solid var(--hc-teal);
  border-radius:50%;
  pointer-events:none;
  z-index:1;
}
.photo-circle--initials{
  background: linear-gradient(135deg, var(--hc-teal) 0%, var(--hc-blue) 100%);
  display:grid; place-items:center;
  color:#fff; font-weight:600;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  letter-spacing: 0.04em;
}
.photo-framed{
  position:relative;
  border-radius:12px;
  overflow:hidden;
}
.photo-framed::after{
  content:"";
  position:absolute;
  inset:-12px;
  border:2px solid var(--hc-teal);
  border-radius:18px;
  pointer-events:none;
}

/* ============================================================
   HERO / PAGE HEADER — full-bleed photo carousel with Ken Burns
   Use .hero-b for the home page (full 100vh framed card)
   Use .page-hero on inner pages — variants with --compact, --centered
   ============================================================ */
.hero-b,
.page-hero{
  position:relative;
  margin: 16px;
  border-radius: clamp(16px, 1.6vw, 24px);
  overflow: hidden;
  border: 2px solid rgba(4, 152, 153, 0.3);
  isolation: isolate;
  display: flex;
  align-items: center;
  padding: 0;
}
.hero-b{
  height: calc(100vh - var(--header-h) - 32px);
  min-height: 580px;
}
.page-hero{
  height: calc(72vh - var(--header-h));
  min-height: 440px;
}
.page-hero--compact{ height: calc(52vh - var(--header-h)); min-height: 360px; }

/* Carousel background container */
.hero-b__bg,
.page-hero__bg{
  position:absolute; inset:0;
  z-index: -2;
  overflow: hidden;
  background: #0f3a3a;
}
.hero-b__slide,
.page-hero__slide{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s ease-in-out;
  will-change: opacity, transform;
}
.hero-b__slide.active,
.page-hero__slide.active{
  opacity: 1;
  animation: hero-kenburns 9s ease-out both;
}
@keyframes hero-kenburns{
  0%   { transform: scale(1.06) translate(0%, 0%); }
  100% { transform: scale(1.16) translate(-2%, -1%); }
}
.hero-b__slide:nth-child(2).active,
.page-hero__slide:nth-child(2).active{ animation-name: hero-kenburns-2; }
.hero-b__slide:nth-child(3).active,
.page-hero__slide:nth-child(3).active{ animation-name: hero-kenburns-3; }
.hero-b__slide:nth-child(4).active,
.page-hero__slide:nth-child(4).active{ animation-name: hero-kenburns-4; }
.hero-b__slide:nth-child(5).active,
.page-hero__slide:nth-child(5).active{ animation-name: hero-kenburns-5; }
@keyframes hero-kenburns-2{
  0%   { transform: scale(1.16) translate(1%, 0%); }
  100% { transform: scale(1.06) translate(-1%, 1%); }
}
@keyframes hero-kenburns-3{
  0%   { transform: scale(1.06) translate(-1%, -1%); }
  100% { transform: scale(1.16) translate(2%, 0%); }
}
@keyframes hero-kenburns-4{
  0%   { transform: scale(1.16) translate(0%, 1%); }
  100% { transform: scale(1.06) translate(-1%, -2%); }
}
@keyframes hero-kenburns-5{
  0%   { transform: scale(1.08) translate(-1%, 1%); }
  100% { transform: scale(1.18) translate(1%, -1%); }
}
@media (prefers-reduced-motion: reduce){
  .hero-b__slide,
  .page-hero__slide{ transition: opacity .5s ease; transform: none; }
  .hero-b__slide.active,
  .page-hero__slide.active{ animation: none; transform: none; }
}

/* Photo overlay (gradient over the carousel for legibility) */
.hero-b__overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(4,152,153,0.62) 0%, rgba(4,152,153,0.22) 42%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.18) 100%);
}
.page-hero__overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(4,152,153,0.55) 0%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0.30) 100%);
}
.page-hero--right .page-hero__overlay{
  background:
    linear-gradient(-90deg, rgba(4,152,153,0.62) 0%, rgba(4,152,153,0.22) 42%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.18) 100%);
}

/* Top-right floating status pills */
.hero-b__pills{
  position: absolute;
  top: clamp(20px, 2.4vw, 32px);
  right: clamp(20px, 2.4vw, 32px);
  display: flex;
  gap: 12px;
  z-index: 4;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.hero-b__pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--hc-ink);
  font-size: 0.82rem;
  font-weight: 500;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  white-space: nowrap;
}
.hero-b__pill::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--hc-teal); flex: none;
}

/* Two-column hero inner (home) */
.hero-b__inner{
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 88px);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) clamp(28px, 4vw, 72px);
  align-items: center;
}
.hero-b__copy{ color: #fff; display: grid; gap: clamp(20px, 2.4vw, 32px); }
.hero-b__brand{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.96);
  width: fit-content;
}
.hero-b__brand::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--hc-blue);
}
.hero-b__title{
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.18);
}
.hero-b__desc{
  color: rgba(255,255,255,0.94);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 40ch;
  margin: 0;
}
.hero-b__card{
  background: #fff;
  border-radius: clamp(16px, 1.6vw, 22px);
  padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4);
  display: grid;
  gap: 22px;
  max-width: 540px;
  justify-self: end;
  width: 100%;
}
.hero-b__cardchip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 7px;
  background: rgba(4,152,153,0.10);
  color: var(--hc-teal-dark);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  width: fit-content;
}
.hero-b__cardchip::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--hc-teal);
}
.hero-b__card h3{
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700; color: var(--hc-teal);
  line-height: 1.15; letter-spacing: -0.01em;
  margin: 0;
}
.hero-b__card p{ color: var(--hc-ink-mute); font-size: 1rem; line-height: 1.6; margin: 0; }
.hero-b__cta{ justify-self: start; margin-top: 4px; }
.hero-b__stats{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  padding-top: 22px; border-top: 1px solid var(--hc-line);
  margin-top: 4px;
}
.hero-b__stat{ display: grid; gap: 4px; }
.hero-b__statnum{
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 700; color: var(--hc-teal);
  letter-spacing: -0.02em; line-height: 1;
}
.hero-b__statlab{ color: var(--hc-ink-mute); font-size: 0.78rem; font-weight: 500; }

@media (max-width: 1024px){
  .hero-b__inner{
    grid-template-columns: 1fr;
    padding: clamp(96px, 14vw, 140px) clamp(24px, 4vw, 56px) clamp(40px, 6vw, 64px);
  }
  .hero-b__card{ justify-self: stretch; max-width: 100%; }
  .hero-b__pill{ font-size: 0.74rem; padding: 7px 12px; }
}
@media (max-width: 600px){
  .hero-b{ margin: 8px; height: auto; min-height: calc(100vh - var(--header-h) - 16px); }
  .hero-b__inner{ padding: 96px 20px 36px; gap: 28px; }
  .hero-b__title{ font-size: 2.4rem; }
  .hero-b__stats{ gap: 10px; }
  .hero-b__statnum{ font-size: 1.4rem; }
  .hero-b__statlab{ font-size: 0.72rem; }
  .hero-b__pills{ flex-wrap: wrap; max-width: calc(100% - 40px); }
}

/* ====== LAPTOP-WIDTH TIGHTENING — keeps hero content from cropping ====== */
@media (max-width: 1440px) and (min-width: 1025px){
  .hero-b__title{ font-size: clamp(2.2rem, 5vw, 4rem); }
  .hero-b__desc{ font-size: 1rem; line-height: 1.55; }
  .hero-b__inner{ padding-block: clamp(72px, 9vw, 112px); gap: clamp(28px, 4vw, 56px); }
  .hero-b__card{ padding: clamp(24px, 2.6vw, 32px); gap: 18px; }
  .hero-b__card h3{ font-size: clamp(1.3rem, 2vw, 1.7rem); }
  .hero-b__statnum{ font-size: clamp(1.4rem, 2vw, 1.8rem); }
  .page-hero__title{ font-size: clamp(1.8rem, 4.4vw, 3.2rem); }
  .page-hero__inner{ padding-block: clamp(64px, 8vw, 96px); }
}

/* ====== SHORT VIEWPORT (laptops ~800px tall) ====== */
@media (max-height: 820px) and (min-width: 1025px){
  .hero-b__title{ font-size: clamp(1.8rem, 4.4vw, 3rem); line-height: 1.05; }
  .hero-b__copy{ gap: 16px; }
  .hero-b__brand{ font-size: 0.74rem; }
  .hero-b__desc{ font-size: 0.94rem; line-height: 1.55; max-width: 40ch; }
  .hero-b__inner{ padding-block: clamp(56px, 7vw, 88px); }
  .hero-b__card{ padding: 22px 26px; gap: 16px; }
  .hero-b__cardchip{ font-size: 0.72rem; padding: 6px 11px 5px; }
  .hero-b__card h3{ font-size: 1.4rem; line-height: 1.2; }
  .hero-b__card p{ font-size: 0.94rem; line-height: 1.55; }
  .hero-b__stats{ gap: 12px; padding-top: 18px; }
  .hero-b__statnum{ font-size: 1.35rem; }
  .hero-b__statlab{ font-size: 0.7rem; }
  .hero-b__pill{ font-size: 0.74rem; padding: 7px 14px; }
  .page-hero__title{ font-size: clamp(1.6rem, 3.8vw, 2.6rem); }
  .page-hero__desc{ font-size: 0.95rem; line-height: 1.55; }
  .page-hero__inner{ padding-block: clamp(64px, 8vw, 88px) clamp(40px, 5vw, 56px); gap: 14px; }
}

/* ====== VERY SHORT VIEWPORT (~700px tall — small laptops, split screens) ====== */
@media (max-height: 720px) and (min-width: 1025px){
  .hero-b__title{ font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
  .hero-b__copy{ gap: 12px; }
  .hero-b__desc{ font-size: 0.88rem; max-width: 36ch; }
  .hero-b__inner{ padding-block: 40px; gap: 36px; }
  .hero-b__card{ padding: 18px 22px; gap: 14px; }
  .hero-b__cardchip{ font-size: 0.68rem; }
  .hero-b__card h3{ font-size: 1.15rem; }
  .hero-b__card p{ font-size: 0.86rem; line-height: 1.5; }
  .hero-b__cta{ padding: 11px 20px; font-size: 0.86rem; }
  .hero-b__stats{ gap: 10px; padding-top: 14px; }
  .hero-b__statnum{ font-size: 1.1rem; }
  .hero-b__statlab{ font-size: 0.64rem; }
  .hero-b__pills{ top: 16px; right: 16px; gap: 8px; }
  .hero-b__pill{ font-size: 0.7rem; padding: 6px 11px; }
  .page-hero__title{ font-size: clamp(1.4rem, 3.2vw, 2.1rem); }
  .page-hero__desc{ font-size: 0.9rem; max-width: 50ch; }
  .page-hero__inner{ padding-block: 56px 40px; gap: 12px; }
}

/* ============================================================
   PAGE HERO VARIANTS — inner page headers (smaller, varied spins)
   ============================================================ */
.page-hero__inner{
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 112px) clamp(28px, 4vw, 64px) clamp(48px, 6vw, 80px);
  color: #fff;
  display: grid;
  gap: 18px;
}
.page-hero--centered .page-hero__inner{ text-align: center; align-items: center; justify-items: center; }
.page-hero--centered .page-hero__desc{ margin: 0 auto; }
.page-hero--right .page-hero__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: clamp(40px, 5vw, 80px);
}
.page-hero__brand{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.96);
  width: fit-content;
}
.page-hero__brand::before{
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--hc-blue);
}
.page-hero__title{
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.18);
  max-width: 18ch;
}
.page-hero--centered .page-hero__title{ max-width: 22ch; }
.page-hero__desc{
  color: rgba(255,255,255,0.92);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0;
}
.page-hero__breadcrumb{
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.84);
  font-size: 0.82rem;
  font-weight: 500;
}
.page-hero__breadcrumb a{ color: inherit; opacity: .8; transition: opacity .2s; }
.page-hero__breadcrumb a:hover{ opacity: 1; }
.page-hero__breadcrumb span{ opacity: .55; }

/* Optional stat strip overlaid on the page hero */
.page-hero__stats{
  display: flex; gap: clamp(24px, 4vw, 56px);
  margin-top: 16px; flex-wrap: wrap;
}
.page-hero__stats .stat{
  background: transparent; border: none; padding: 0;
  color: #fff;
}
.page-hero__stats .stat__num{
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.page-hero__stats .stat__label{
  color: rgba(255,255,255,0.82);
  font-size: 0.85rem;
  font-weight: 500;
  margin-top: 6px;
}

/* Floating quote panel for who-we-are */
.page-hero__quote{
  background: rgba(255,255,255,0.92);
  color: var(--hc-ink);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.3);
  max-width: 520px;
  justify-self: end;
}
.page-hero__quote p{
  font-size: 1rem; line-height: 1.6; color: var(--hc-ink);
  font-weight: 500;
  margin-bottom: 14px;
}
.page-hero__quote cite{
  font-style: normal;
  color: var(--hc-teal);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 900px){
  .page-hero{ height: auto; min-height: 380px; padding: 0; }
  .page-hero__inner{ padding-top: clamp(80px, 12vw, 120px); padding-bottom: clamp(40px, 6vw, 56px); }
  .page-hero--right .page-hero__inner{ grid-template-columns: 1fr; }
  .page-hero__quote{ justify-self: stretch; }
  .page-hero__title{ font-size: clamp(2rem, 7vw, 2.6rem); }
}

/* ---------- Stats band (compact horizontal) ---------- */
.stats-band{
  padding: clamp(96px, 12vw, 180px) 0;
  background: var(--hc-paper-2);
  border-top: 1px solid var(--hc-line);
  border-bottom: 1px solid var(--hc-line);
}
.stats-band > .container{
  padding: 40px;
  max-width: 1400px;
}
@media (min-width: 900px){
  .stats-band > .container{ padding: clamp(40px, 5vw, 64px) clamp(40px, 6vw, 96px); }
}
.stats-band__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px;
}
.stat{
  background:var(--hc-paper); border:1px solid var(--hc-line);
  border-radius:var(--r-lg); padding: 36px 36px;
}
.stat__num{
  font-weight:800;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem); line-height:1;
  color:var(--hc-teal); letter-spacing:-.02em;
}
.stat__label{margin-top:8px; color:var(--hc-ink-mute); font-size:.92rem; font-weight:500}
@media (max-width:680px){ .stats-band__grid{grid-template-columns:1fr} }

/* ---------- Section base ---------- */
section{padding: clamp(64px, 9vw, 120px) 0}
.hero-b, .page-hero, .stats-band{padding-top: revert; padding-bottom: revert}
.section-head{display:grid; gap:16px; max-width:62ch; margin-bottom: clamp(32px, 5vw, 56px)}
.section-head--center{margin-inline:auto; text-align:center}
.section-head p{color:var(--hc-ink-mute); font-size:1.05rem; font-weight:400}

/* ---------- Pillars (3-up card grid, brand) ---------- */
.pillars{background:var(--hc-paper); position:relative; overflow:hidden}
.pillars__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.pillar{
  background:var(--hc-paper-2); border-radius:var(--r-lg);
  padding:34px 30px; box-shadow:var(--shadow-sm);
  display:grid; gap:16px; align-content:start;
  border:1px solid var(--hc-line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.pillar:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.pillar__icon{
  width:58px; height:58px; border-radius:50%;
  background:rgba(4,152,153,.10);
  display:grid; place-items:center; color:var(--hc-teal);
}
.pillar h3{font-size:1.3rem; line-height:1.2; color:var(--hc-ink)}
.pillar p{color:var(--hc-ink-mute); font-size:.98rem}
@media (max-width:900px){.pillars__grid{grid-template-columns:1fr; gap:18px}}

/* ---------- Two-up content blocks (text + image) ---------- */
.two-up{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 5vw, 64px); align-items:center}
.two-up--alt .two-up__media{order:2}
.two-up--alt .two-up__body{order:1}
.two-up__media{position:relative}
.two-up__media .photo-framed{aspect-ratio: 4 / 3}
.two-up__media img{width:100%; height:100%; object-fit:cover}
.two-up__body h2{font-size:clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom:16px}
.two-up__body p{color:var(--hc-ink-mute); font-size:1.02rem; line-height:1.65; margin-bottom:12px; max-width:48ch}
@media (max-width:900px){
  .two-up{grid-template-columns:1fr}
  .two-up--alt .two-up__media{order:0}
  .two-up--alt .two-up__body{order:0}
}

/* ---------- Director cards ---------- */
.directors{background:var(--hc-paper-2)}
.directors__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.director-card{
  background:#fff; border:1px solid var(--hc-line); border-radius:var(--r-lg);
  padding:28px 26px 26px;
  display:grid; gap:16px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.director-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.director-card__head{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center}
.director-card .photo-circle{width:64px; height:64px}
.director-card__title{display:grid; gap:2px}
.director-card__title strong{font-weight:700; color:var(--hc-ink); font-size:1.05rem}
.director-card__title span{color:var(--hc-teal); font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em}
.director-card__org{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--hc-blue-dark);
  background:rgba(73,149,209,.12); padding:4px 9px; border-radius:6px;
  width:fit-content;
}
.director-card p{color:var(--hc-ink-mute); font-size:.92rem; line-height:1.6}
@media (max-width:900px){.directors__grid{grid-template-columns:1fr}}

/* ---------- Project cards ---------- */
.projects-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.proj-card{
  background:#fff; border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--hc-line);
  display:grid; grid-template-rows:auto 1fr;
  transition:transform .3s ease, box-shadow .3s ease;
  box-shadow:var(--shadow-sm);
}
.proj-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.proj-card__media{position:relative; aspect-ratio:16/9; overflow:hidden}
.proj-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease}
.proj-card:hover .proj-card__media img{transform:scale(1.04)}
.proj-card__status{
  position:absolute; top:14px; left:14px;
  background:var(--hc-teal); color:#fff;
  padding:6px 12px; border-radius:var(--r-pill);
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 4px 12px rgba(4,152,153,.3);
}
.proj-card__loc{
  position:absolute; bottom:14px; right:14px;
  background:rgba(255,255,255,.95); color:var(--hc-ink);
  padding:6px 12px; border-radius:var(--r-pill);
  font-size:.78rem; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
  backdrop-filter:blur(8px);
}
.proj-card__loc::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--hc-blue);
}
.proj-card__body{padding:24px 26px 26px; display:grid; gap:14px; align-content:start}
.proj-card__body h3{font-size:1.3rem; color:var(--hc-ink); font-weight:600; line-height:1.2}
.proj-card__meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:12px 0; border-top:1px solid var(--hc-line); border-bottom:1px solid var(--hc-line);
}
.proj-card__meta div{font-size:.84rem}
.proj-card__meta strong{display:block; color:var(--hc-teal); font-size:1.05rem; font-weight:700}
.proj-card__meta span{color:var(--hc-ink-mute); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:500}
.proj-card__cta{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--hc-teal); font-weight:600; font-size:.95rem;
  width:fit-content;
}
.proj-card__cta::after{content:"→"; transition:transform .2s ease; display:inline-block}
.proj-card:hover .proj-card__cta::after{transform:translateX(3px)}
@media (max-width:900px){.projects-grid{grid-template-columns:1fr}}

/* ---------- Home preview cards (small teasers linking to inner pages) ---------- */
.previews{background:var(--hc-paper)}
.preview-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.preview-card{
  display:grid; gap:18px;
  background:transparent; padding:0; border:none;
  text-decoration: none; color: inherit;
}
.preview-card__media{
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}
.preview-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .8s ease;
}
.preview-card:hover .preview-card__media img{transform:scale(1.04)}
.preview-card__body{display:grid; gap:10px; padding:0 4px}
.preview-card h3{font-size:1.4rem; color:var(--hc-ink); font-weight:600; line-height:1.2; margin:0}
.preview-card p{color:var(--hc-ink-mute); font-size:.98rem; line-height:1.6; margin:0}
.preview-card__cta{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--hc-teal); font-weight:600; font-size:.92rem; margin-top:4px;
}
.preview-card__cta::after{content:"→"; transition:transform .2s ease; display:inline-block}
.preview-card:hover .preview-card__cta::after{transform:translateX(3px)}
@media (max-width:900px){.preview-grid{grid-template-columns:1fr; gap:32px}}

/* ---------- Contact cards ---------- */
.contact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.contact-card{
  background:#fff; border:1px solid var(--hc-line); border-radius:var(--r-lg);
  padding:32px 30px 28px;
  display:grid; gap:14px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.contact-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--hc-teal)}
.contact-card__head{display:grid; gap:6px}
.contact-card__head strong{font-size:1.2rem; color:var(--hc-ink); font-weight:700}
.contact-card__head span{font-size:.84rem; color:var(--hc-teal); font-weight:600; text-transform:uppercase; letter-spacing:.08em}
.contact-card a{color:var(--hc-ink-mute); font-weight:500; transition:color .2s}
.contact-card a:hover{color:var(--hc-teal)}
.contact-card__email{display:inline-flex; align-items:center; gap:8px; word-break:break-all}
.contact-card__phone{display:inline-flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums}
@media (max-width:680px){.contact-grid{grid-template-columns:1fr}}

/* ---------- Contact form ---------- */
.contact-form{
  background:var(--hc-paper-2);
  border:1px solid var(--hc-line);
  border-radius:var(--r-lg);
  padding:clamp(28px, 4vw, 48px);
  display:grid; gap:20px;
}
.contact-form .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.contact-form label{display:grid; gap:6px; font-size:.88rem; font-weight:500; color:var(--hc-ink)}
.contact-form input, .contact-form textarea{
  font:inherit;
  padding:14px 16px;
  border:1px solid var(--hc-line);
  border-radius:var(--r-md);
  background:#fff;
  color:var(--hc-ink);
  font-weight:400;
  transition:border-color .2s, box-shadow .2s;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none;
  border-color:var(--hc-teal);
  box-shadow:0 0 0 4px rgba(4,152,153,.12);
}
.contact-form textarea{min-height:140px; resize:vertical}
@media (max-width:680px){.contact-form .form-row{grid-template-columns:1fr}}

/* ---------- News article card grid ---------- */
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.news-card{
  display:grid; gap:18px;
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--hc-line);
  transition:transform .3s ease, box-shadow .3s ease;
  text-decoration:none; color:inherit;
}
.news-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.news-card__media{aspect-ratio:16/10; overflow:hidden}
.news-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease}
.news-card:hover .news-card__media img{transform:scale(1.04)}
.news-card__body{padding:0 24px 24px; display:grid; gap:12px}
.news-card__meta{
  display:flex; align-items:center; gap:10px;
  font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
}
.news-card__tag{
  background:rgba(73,149,209,.12); color:var(--hc-blue-dark);
  padding:5px 10px; border-radius:var(--r-pill);
}
.news-card__date{color:var(--hc-ink-mute); font-weight:500}
.news-card h3{font-size:1.2rem; color:var(--hc-ink); font-weight:600; line-height:1.25}
.news-card p{color:var(--hc-ink-mute); font-size:.94rem; line-height:1.6}
.news-card__cta{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--hc-teal); font-weight:600; font-size:.88rem; margin-top:4px;
}
.news-card__cta::after{content:"→"; transition:transform .2s ease; display:inline-block}
.news-card:hover .news-card__cta::after{transform:translateX(3px)}
@media (max-width:900px){.news-grid{grid-template-columns:1fr; gap:18px}}

/* "More coming soon" placeholder card */
.news-soon{
  background:var(--hc-paper-2);
  border:2px dashed var(--hc-line);
  border-radius:var(--r-lg);
  padding:48px;
  text-align:center;
  display:grid; gap:14px;
}
.news-soon h3{font-size:1.4rem; color:var(--hc-teal); font-weight:600}
.news-soon p{color:var(--hc-ink-mute); font-size:1rem; line-height:1.6; max-width:50ch; margin-inline:auto}

/* ---------- Newsletter ---------- */
.news-panel-section{padding-bottom: clamp(64px, 9vw, 120px); background:var(--hc-paper-2)}
.news__panel{
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--hc-teal) 0%, var(--hc-blue) 100%);
  border-radius: var(--r-xl);
  padding: clamp(36px, 6vw, 72px);
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 36px;
  align-items:center;
  color:#fff;
}
.news__panel h2{max-width:18ch; color:#fff}
.news__panel p{color:rgba(255,255,255,.92); margin-top:12px; max-width:48ch}
.news__panel .eyebrow{color:#fff}
.news__panel .eyebrow::before{background:#fff}
.news__form{
  display:flex; gap:8px; background:#fff;
  padding:8px; border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm);
  position:relative; z-index:2;
}
.news__form input{
  flex:1; border:0; background:transparent;
  padding: 12px 18px; font: inherit; color:var(--hc-ink);
  outline:none; font-weight:500;
}
.news__form input::placeholder{color:#9aa6b3; font-weight:400}
@media (max-width:800px){.news__panel{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
footer.site-footer{
  background:var(--hc-ink); color:#c4cfdc;
  padding: 80px 0 60px;
}
.foot__grid{display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:36px}
.foot__brand .logo img{width:140px; height:auto; filter:brightness(0) invert(1)}
.foot__brand p{margin-top:18px; max-width:36ch; color:#a3b1c1; font-size:.95rem}
.foot__col h4{color:#fff; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px}
.foot__col ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.foot__col a{color:#c4cfdc; font-size:.94rem; font-weight:400}
.foot__col a:hover{color:#fff}
.foot__bottom{
  margin-top:56px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:#7f8fa3; font-size:.85rem;
}
.socials{display:flex; gap:10px}
.socials a{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.06);
  display:grid; place-items:center; color:#c4cfdc;
  transition:background .25s ease, color .25s ease;
}
.socials a:hover{background:var(--hc-teal); color:#fff}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr; gap:28px}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr}}

/* ---------- Reveal anim ---------- */
.reveal{opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease}
.reveal.is-in{opacity:1; transform: none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--hc-teal);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   EXTRA SECTION PATTERNS — ported from housing-communities-v1.0.html
   Adds: pillars-b, three-commitments (Venn), how-vertical timeline,
         stories (quote cards), events, resources, FAQ, get-involved,
         team, pilot, trust, sticky-cta.
   ============================================================ */

/* ---------- Pillars Variant B (primary teal panel) ---------- */
.pillars-b{
  background: linear-gradient(135deg, var(--hc-teal) 0%, var(--hc-teal-dark) 55%, #02585A 100%);
  position:relative; overflow:hidden;
  color:#fff;
}
.pillars-b::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 8% 16%, rgba(73,149,209,.22) 0%, transparent 45%),
    radial-gradient(circle at 92% 84%, rgba(255,255,255,.10) 0%, transparent 40%);
  pointer-events:none;
}
.pillars-b > .container{position:relative; z-index:1}
.pillars-b .section-head h2{color:#fff}
.pillars-b .section-head p{color:rgba(255,255,255,.88)}
.pillars-b .section-head .eyebrow{color:rgba(255,255,255,.94)}
.pillars-b .section-head .eyebrow::before{background:#fff}
.pillars-b__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.pillar-b{
  background:#fff; border-radius:var(--r-lg);
  padding:34px 30px;
  display:grid; gap:16px; align-content:start;
  box-shadow: 0 30px 60px -28px rgba(2, 88, 90, .55);
  border:1px solid rgba(255,255,255,.18);
  transition:transform .3s ease, box-shadow .3s ease;
}
.pillar-b:hover{transform:translateY(-6px); box-shadow:0 40px 70px -28px rgba(2,88,90,.65)}
.pillar-b__icon{
  width:58px; height:58px; border-radius:50%;
  background:rgba(4,152,153,.10);
  display:grid; place-items:center; color:var(--hc-teal);
}
.pillar-b h3{font-size:1.3rem; line-height:1.2; color:var(--hc-ink); font-weight:600}
.pillar-b p{color:var(--hc-ink-mute); font-size:.98rem}
@media (max-width:900px){.pillars-b__grid{grid-template-columns:1fr; gap:18px}}

/* ---------- Three Commitments — shared + Variant A (dark Venn) ---------- */
.commit__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap: clamp(32px, 4vw, 56px) clamp(32px, 5vw, 72px);
  align-items:start;
}
.commit__head{display:grid; gap:18px; align-content:start}
.commit__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em;
  width:fit-content;
}
.commit__eyebrow::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--hc-teal);
}
.commit__head h2{
  font-size:clamp(2.2rem, 4.8vw, 3.6rem);
  font-weight:700;
  line-height:1.05; letter-spacing:-.02em;
  margin:0;
}
.commit__head h2 .accent{color:var(--hc-teal)}
.commit__desc{font-size:1.05rem; line-height:1.6; max-width:44ch; padding-top:6px}
.commit__defs{display:grid; gap:0; padding-top:6px}
.commit__def{
  display:grid; grid-template-columns:110px 1fr; gap:16px;
  padding:22px 0; align-items:start; margin:0;
}
.commit__def + .commit__def{border-top:1px solid var(--hc-line)}
.commit__def dt{font-weight:600; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; margin:0}
.commit__def dt.k-faith{color:var(--hc-blue)}
.commit__def dt.k-housing{color:var(--hc-teal)}
.commit__def dt.k-community{color:var(--hc-ink-mute)}
.commit__def dd{margin:0; font-size:.96rem; line-height:1.6}
@media (max-width:900px){
  .commit__grid{grid-template-columns:1fr}
  .commit__def{grid-template-columns:1fr; gap:6px}
}

.commitments-a{
  background: linear-gradient(135deg, #07383a 0%, var(--hc-teal-dark) 50%, #02272a 100%);
  color:#fff; position:relative; overflow:hidden;
}
.commitments-a::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 80% 18%, rgba(73,149,209,.22) 0%, transparent 45%),
    radial-gradient(circle at 12% 88%, rgba(255,255,255,.06) 0%, transparent 40%);
  pointer-events:none;
}
.commitments-a > .container{position:relative; z-index:1}
.commitments-a .commit__eyebrow{color:rgba(255,255,255,.92)}
.commitments-a .commit__head h2{color:#fff}
.commitments-a .commit__desc{color:rgba(255,255,255,.86)}
.commitments-a .commit__def + .commit__def{border-top-color:rgba(255,255,255,.14)}
.commitments-a .commit__def dt.k-community{color:rgba(255,255,255,.7)}
.commitments-a .commit__def dd{color:rgba(255,255,255,.88)}
.venn-a{
  position:relative; width:100%; max-width:520px;
  aspect-ratio:1/1; margin:0 auto;
}
.venn-a__circle{
  position:absolute; width:62%; aspect-ratio:1/1; border-radius:50%;
  display:flex; align-items:flex-start; justify-content:center;
  color:#fff; font-weight:600; font-size:.88rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:14% 0 0; text-align:center;
  border:1.5px solid rgba(255,255,255,.35);
}
.venn-a__circle--faith{top:0; left:0; background:rgba(73,149,209,.42)}
.venn-a__circle--housing{top:0; right:0; background:rgba(4,152,153,.42)}
.venn-a__circle--community{
  bottom:0; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.16);
  align-items:flex-end; padding:0 0 14%;
}
.venn-a__center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center; color:#fff; font-size:.82rem; font-weight:500;
  line-height:1.4; max-width:140px; z-index:2; pointer-events:none;
}
@media (max-width:900px){ .venn-a{max-width:380px} }

/* ---------- Trust strip ---------- */
.trust{background:var(--hc-paper)}
.trust__grid{display:grid; grid-template-columns:1fr 1fr 1fr 1.25fr; gap:20px}
.trust__tile{
  background:var(--hc-paper-2); border-radius:var(--r-lg);
  padding:28px; display:grid; gap:14px; align-content:start;
  box-shadow:var(--shadow-sm); border:1px solid var(--hc-line);
}
.trust__tile .ico{
  width:48px; height:48px; border-radius:50%; background:rgba(73,149,209,.14);
  color:var(--hc-blue-dark); display:grid; place-items:center;
}
.trust__tile h3{font-size:1.1rem; line-height:1.3; color:var(--hc-ink)}
.trust__tile p{color:var(--hc-ink-mute); font-size:.94rem}
.trust__feature{
  grid-row: span 2; position:relative; overflow:hidden;
  background:#fff; border-radius:var(--r-lg);
  padding:0; min-height:380px;
  box-shadow:var(--shadow-sm); isolation:isolate; color:#fff;
}
.trust__feature img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.trust__feature::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(31,45,61,0) 30%, rgba(31,45,61,.78) 100%);
}
.trust__feature .inner{position:absolute; bottom:0; left:0; right:0; padding:30px; display:grid; gap:14px}
.trust__feature h3{color:#fff; font-size:1.55rem; line-height:1.2; max-width:18ch; font-weight:600}
.trust__feature .tile-tag{
  display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3);
  padding:6px 12px; border-radius:var(--r-pill); width:fit-content;
  backdrop-filter:blur(8px);
}
@media (max-width:1024px){.trust__grid{grid-template-columns:1fr 1fr} .trust__feature{grid-column:1/-1; min-height:280px}}
@media (max-width:640px){.trust__grid{grid-template-columns:1fr}}

/* ---------- Kingsley pilot ---------- */
.pilot{background:var(--hc-paper-2); position:relative; overflow:hidden}
.pilot__wrap{
  position:relative; border-radius: var(--r-xl); overflow:hidden;
  aspect-ratio: 16/9; box-shadow:var(--shadow-md);
}
.pilot__wrap img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pilot__wrap::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(4,152,153,.30), rgba(31,45,61,.18) 60%, rgba(31,45,61,.55));
}
.pilot__panel{
  position:absolute; left:clamp(20px, 4vw, 56px); bottom:clamp(20px, 4vw, 48px);
  width:min(440px, 88%);
  background:#fff; border-radius:var(--r-lg);
  padding:30px 30px 28px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--hc-line);
}
.pilot__panel .eyebrow{margin-bottom:10px}
.pilot__panel h3{font-size:1.6rem; line-height:1.2; margin-bottom:14px; color:var(--hc-ink); font-weight:600}
.pilot__list{list-style:none; padding:0; margin:0 0 22px 0; display:grid; gap:10px}
.pilot__list li{display:flex; align-items:center; gap:10px; color:var(--hc-ink); font-size:.96rem; font-weight:500}
.pilot__list li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--hc-teal); flex:none}

/* ---------- Team ---------- */
.team{background:var(--hc-paper-2)}
.team__head{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:48px}
.team__head h2{max-width:18ch}
.team__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.director{display:grid; gap:14px; text-align:center}
.director .photo-circle{width:100%}
.director__name{display:grid; gap:2px}
.director__name strong{font-weight:600; color:var(--hc-ink); font-size:1rem}
.director__name span{color:var(--hc-ink-mute); font-size:.88rem; font-weight:500}
@media (max-width:900px){.team__grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- Sticky CTA bar ---------- */
.sticky-cta{
  position:fixed; left:50%; bottom:18px;
  transform: translate(-50%, 160%);
  z-index:60;
  background:var(--hc-teal); color:#fff;
  border-radius:var(--r-pill);
  padding:10px 12px 10px 18px;
  display:flex; align-items:center; gap:16px;
  box-shadow: 0 18px 40px rgba(4,152,153,.35), 0 2px 8px rgba(4,152,153,.25);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  max-width: calc(100% - 24px);
}
.sticky-cta.is-visible{transform: translate(-50%, 0%)}
.sticky-cta .heart{
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.16); display:grid; place-items:center;
}
.sticky-cta__text{font-size:.95rem; font-weight:500}
.sticky-cta__text strong{font-weight:600}
@media (max-width:560px){.sticky-cta .heart, .sticky-cta__text{display:none} .sticky-cta{padding:8px 10px}}

/* ---------- How It Works — Vertical Timeline ---------- */
.how-vertical{background:var(--hc-paper); position:relative; overflow:hidden}
.how-vertical__steps{display:grid; gap: clamp(48px, 7vw, 96px)}
.vstep{display:grid; grid-template-columns:1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items:center}
.vstep:nth-child(even) .vstep__media{order:2}
.vstep:nth-child(even) .vstep__body{order:1}
.vstep__media{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-md);
}
.vstep__media::before{
  content:""; position:absolute; inset:-12px;
  border:2px solid var(--hc-teal); border-radius:calc(var(--r-lg) + 8px);
  pointer-events:none; opacity:.18; z-index:0;
}
.vstep__media img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease; display:block}
.vstep:hover .vstep__media img{transform:scale(1.04)}
.vstep__num{
  position:absolute; top:18px; left:18px;
  width:64px; height:64px; border-radius:50%;
  background:#fff; color:var(--hc-teal); font-weight:600; font-size:1.35rem;
  display:grid; place-items:center;
  box-shadow:var(--shadow-md); z-index:2; letter-spacing:-.02em;
}
.vstep__body{display:grid; gap:14px; padding:0 4px}
.vstep__chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--hc-teal); width:fit-content;
}
.vstep__chip::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--hc-blue)}
.vstep__body h3{
  font-size:clamp(1.75rem, 3.2vw, 2.4rem);
  font-weight:600; color:var(--hc-ink); line-height:1.05; letter-spacing:-.02em;
  margin:0;
}
.vstep__body p{font-size:1.02rem; line-height:1.65; color:var(--hc-ink-mute); max-width:46ch}
.vstep__details{list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px}
.vstep__details li{display:flex; align-items:flex-start; gap:10px; font-size:.95rem; color:var(--hc-ink); font-weight:500}
.vstep__details li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--hc-teal); flex:none; margin-top:8px}
@media (max-width:900px){
  .vstep{grid-template-columns:1fr; gap:24px}
  .vstep:nth-child(even) .vstep__media, .vstep:nth-child(even) .vstep__body{order:0}
  .vstep__media::before{inset:-8px; border-radius:calc(var(--r-lg) + 6px)}
}

/* ---------- Projects grid wrapper for home ---------- */
.projects-a{background:var(--hc-paper-2); position:relative; overflow:hidden}
.projects-a__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media (max-width:900px){.projects-a__grid{grid-template-columns:1fr}}

/* ---------- Stories / Quote cards ---------- */
.stories-b{background:var(--hc-paper)}
.stories-b__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.quote-card{
  background:var(--hc-paper-2); border-radius:var(--r-lg);
  padding:36px 30px 30px; display:grid; gap:22px;
  border:1px solid var(--hc-line); position:relative;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.quote-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--hc-teal)}
.quote-card__mark{
  font-family:'Poppins', sans-serif;
  font-size:3.4rem; line-height:.7; color:var(--hc-teal); font-weight:600;
  margin-bottom:-12px;
}
.quote-card__body{color:var(--hc-ink); font-size:1.02rem; line-height:1.55}
.quote-card__person{display:flex; align-items:center; gap:14px; margin-top:8px}
.quote-card__avatar{
  width:54px; height:54px; border-radius:50%; overflow:hidden;
  border:2px solid var(--hc-teal); flex:none;
}
.quote-card__avatar img{width:100%; height:100%; object-fit:cover}
.quote-card__avatar--initials{
  background: linear-gradient(135deg, var(--hc-teal) 0%, var(--hc-blue) 100%);
  display:grid; place-items:center;
  color:#fff; font-weight:600; font-size:1rem;
  letter-spacing:0.04em;
}
.quote-card__name strong{display:block; color:var(--hc-ink); font-weight:600; font-size:.98rem}
.quote-card__name span{color:var(--hc-ink-mute); font-size:.85rem; font-weight:500}
@media (max-width:900px){.stories-b__grid{grid-template-columns:1fr; gap:18px}}

/* ---------- News card grid wrapper ---------- */
.news-c{background:var(--hc-paper-2)}
.news-c__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
@media (max-width:900px){.news-c__grid{grid-template-columns:1fr; gap:18px}}

/* ---------- Event cards ---------- */
.events-d{background:var(--hc-paper)}
.events-d__list{display:grid; gap:16px}
.event-card{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:24px;
  background:var(--hc-paper-2); border:1px solid var(--hc-line);
  border-radius:var(--r-lg); padding:18px 24px 18px 18px;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;
  text-decoration:none; color:inherit;
}
.event-card:hover{border-color:var(--hc-teal); transform:translateX(4px); box-shadow:var(--shadow-sm); background:#fff}
.event-card__date{
  width:80px; padding:14px 0; border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--hc-teal) 0%, var(--hc-blue) 100%);
  color:#fff; text-align:center;
}
.event-card__date .d{display:block; font-size:1.7rem; font-weight:600; line-height:1; letter-spacing:-.02em}
.event-card__date .m{display:block; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; margin-top:4px; opacity:.92}
.event-card__body{display:grid; gap:6px}
.event-card__body h3{font-size:1.05rem; color:var(--hc-ink); font-weight:600; line-height:1.25}
.event-card__meta{display:flex; flex-wrap:wrap; gap:14px; color:var(--hc-ink-mute); font-size:.85rem; font-weight:500}
.event-card__meta span{display:inline-flex; align-items:center; gap:6px}
.event-card__meta svg{flex:none; color:var(--hc-teal)}
.event-card__cta{flex:none}
@media (max-width:680px){
  .event-card{grid-template-columns:auto 1fr; gap:16px}
  .event-card__cta{grid-column:1/-1; justify-self:start; margin-top:6px}
}

/* ---------- Resource / Download cards ---------- */
.resources-e{background:var(--hc-paper-2)}
.resources-e__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.res-card{
  background:#fff; border:1px solid var(--hc-line);
  border-radius:var(--r-lg);
  padding:24px 22px 22px;
  display:grid; gap:14px; align-content:start;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative; text-decoration:none; color:inherit;
}
.res-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--hc-teal)}
.res-card__head{display:flex; align-items:center; gap:10px; justify-content:space-between}
.res-card__icon{
  width:42px; height:42px; border-radius:10px;
  background:rgba(4,152,153,.10); color:var(--hc-teal);
  display:grid; place-items:center; flex:none;
}
.res-card__type{
  font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hc-blue-dark); background:rgba(73,149,209,.12);
  padding:4px 9px; border-radius:6px;
}
.res-card h3{font-size:1rem; color:var(--hc-ink); font-weight:600; line-height:1.3}
.res-card p{color:var(--hc-ink-mute); font-size:.84rem; line-height:1.55}
.res-card__foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:6px; padding-top:14px; border-top:1px solid var(--hc-line);
  font-size:.78rem; color:var(--hc-ink-mute); font-weight:500;
}
.res-card__foot .dl{
  width:30px; height:30px; border-radius:50%;
  background:var(--hc-teal); color:#fff;
  display:grid; place-items:center;
  transition:transform .2s ease;
}
.res-card:hover .res-card__foot .dl{transform:translateY(2px)}
@media (max-width:1024px){.resources-e__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.resources-e__grid{grid-template-columns:1fr}}

/* ---------- FAQ accordion ---------- */
.faq{background:var(--hc-paper)}
.faq__list{display:grid; gap:12px; max-width:820px}
.faq details{
  background:var(--hc-paper-2);
  border:1px solid var(--hc-line);
  border-radius:var(--r-lg);
  padding:18px 22px;
  transition:background .2s ease, border-color .2s ease;
}
.faq details[open]{background:#fff; border-color:var(--hc-teal); box-shadow:var(--shadow-sm)}
.faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  cursor:pointer; list-style:none;
  font-weight:600; color:var(--hc-ink); font-size:1.02rem; line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; font-size:1.4rem; font-weight:400;
  color:var(--hc-teal);
  width:28px; height:28px; border-radius:50%;
  background:#fff; border:1.5px solid var(--hc-teal);
  display:grid; place-items:center;
  flex:none;
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.faq details[open] summary::after{transform:rotate(45deg); background:var(--hc-teal); color:#fff}
.faq__answer{
  margin-top:12px; padding-top:12px;
  color:var(--hc-ink-mute); font-size:.95rem; line-height:1.65;
  border-top:1px solid var(--hc-line);
}

/* ---------- Get involved grid ---------- */
.get-involved{background:var(--hc-paper-2)}
.gi__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.gi-tile{
  background:#fff; border:1px solid var(--hc-line); border-radius:var(--r-lg);
  padding:32px 30px 28px;
  display:grid; gap:14px; align-content:start;
  text-decoration:none; color:inherit;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative; overflow:hidden;
}
.gi-tile:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--hc-teal)}
.gi-tile__ico{
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg, var(--hc-teal) 0%, var(--hc-blue) 100%);
  color:#fff;
  display:grid; place-items:center;
}
.gi-tile h3{font-size:1.2rem; color:var(--hc-ink); font-weight:600; line-height:1.25}
.gi-tile p{color:var(--hc-ink-mute); font-size:.95rem; max-width:42ch}
.gi-tile__cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  color:var(--hc-teal); font-weight:600; font-size:.92rem;
}
.gi-tile__cta::after{content:"→"; transition:transform .2s ease; display:inline-block}
.gi-tile:hover .gi-tile__cta::after{transform:translateX(3px)}
@media (max-width:680px){.gi__grid{grid-template-columns:1fr}}

/* ---------- News card CTA + grid uses base .news-card ---------- */
.news-c .news-card__cta{margin-top:4px}

/* ============================================================
   HEADING WEIGHT CAP — Max font-weight 600 for headings
   Covers all h1–h6 plus heading-styled display classes
   (titles, stat numbers, director/contact name strongs, etc.)
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.hero-b__title, .page-hero__title,
.hero-b__statnum, .stat__num, .page-hero__stats .stat__num,
.hero-b__card h3,
.director-card__title strong,
.contact-card__head strong,
.proj-card__meta strong,
.foot__col h4 {
  font-weight: 600 !important;
}