@charset "UTF-8";

:root {
  --navy:#102744;
  --gold:#bd8f4c;
  --cream:#fff7ec;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: Arial, Helvetica, sans-serif;
}

.community-hero {
  position: relative;
  min-height: clamp(660px, 56vw, 880px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,247,236,.88) 0%, rgba(255,247,236,.60) 34%, rgba(255,247,236,.08) 66%),
    url("assets/community-hero-background.jpeg") center center / cover no-repeat;
}

.community-nav {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1.1rem clamp(1.2rem,4vw,4.2rem);
}

.brand {
  display: block;
  width: clamp(120px,14vw,205px);
  text-decoration: none;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(16,39,68,.08));
}

.desktop-nav {
  position: absolute;
  top: 1.7rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(1.65rem,3.3vw,3.25rem);
  padding: 0;
  background: transparent;
  border: 0;
}

.desktop-nav a {
  position: relative;
  color: var(--navy);
  text-decoration: none;
  font-size: clamp(.86rem, .95vw, 1rem);
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(255,255,255,.55);
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.85rem;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background: var(--gold);
  transition: width .2s ease;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a[aria-current="page"]::after {
  width: 54px;
}

.desktop-nav a[aria-current="page"] {
  font-weight: 800;
}

.mobile-menu { display: none; }

.hero-copy {
  position: absolute;
  z-index: 5;
  left: clamp(2.2rem,6.4vw,6.5rem);
  top: 50%;
  transform: translateY(-37%);
  max-width: min(610px,43vw);
}

.kicker {
  margin: 0 0 .85rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--navy);
  font-weight: 900;
  font-size: .82rem;
}

.kicker::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  margin-top: .78rem;
  background: var(--gold);
}

h1 {
  margin: 0 0 1.05rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem,4.9vw,5.45rem);
  line-height: 1.03;
  letter-spacing: -.045em;
  font-weight: 500;
}

.hero-copy p:last-child {
  margin: 0;
  max-width: 530px;
  color: rgba(16,39,68,.86);
  font-size: clamp(1.05rem,1.35vw,1.34rem);
  line-height: 1.62;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media(max-width: 900px) {
  .community-hero {
    min-height: 720px;
    background:
      linear-gradient(90deg, rgba(255,247,236,.94) 0%, rgba(255,247,236,.76) 46%, rgba(255,247,236,.18) 100%),
      linear-gradient(180deg, rgba(255,247,236,.18) 0%, rgba(255,247,236,.03) 52%, rgba(16,39,68,.12) 100%),
      url("assets/community-hero-background.jpeg") 62% center / cover no-repeat;
  }

  .desktop-nav { display: none; }

  .community-nav {
    align-items: flex-start;
    justify-content: space-between;
    padding: .95rem 1.1rem;
  }

  .brand {
    width: 112px;
  }

  .mobile-menu {
    display: block;
    position: relative;
    z-index: 20;
  }

  .mobile-menu-button {
    appearance: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(16,39,68,.42);
    background: rgba(255,250,242,.72);
    backdrop-filter: blur(6px);
    display: grid;
    place-content: center;
    gap: 4px;
    box-shadow: none;
  }

  .mobile-menu-button span:not(.sr-only) {
    width: 20px;
    height: 2px;
    background: var(--navy);
    border-radius: 999px;
    display: block;
  }

  .mobile-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + .6rem);
    right: 0;
    min-width: 185px;
    padding: .45rem;
    border-radius: 16px;
    background: rgba(255,250,242,.97);
    border: 1px solid rgba(189,143,76,.35);
    box-shadow: 0 14px 34px rgba(16,39,68,.18);
  }

  .mobile-menu.is-open .mobile-menu-panel {
    display: grid;
    gap: .15rem;
  }

  .mobile-menu-panel a {
    display: block;
    padding: .74rem .95rem;
    border-radius: 12px;
    color: var(--navy);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .04em;
  }

  .mobile-menu-panel a:hover,
  .mobile-menu-panel a:focus {
    background: rgba(189,143,76,.12);
    outline: none;
  }

  .hero-copy {
    left: 1.35rem;
    right: 1.35rem;
    top: 31%;
    transform: none;
    max-width: 520px;
  }

  h1 { font-size: clamp(2.55rem,8vw,4.2rem); }

  .hero-copy p:last-child {
    max-width: 430px;
    font-size: 1.02rem;
  }
}

@media(max-width: 600px) {
  .community-hero {
    min-height: 665px;
    background-position: 64% center;
  }

  .brand {
    width: 96px;
  }

  .hero-copy {
    top: 29%;
    left: 1.1rem;
    right: 1.1rem;
  }

  h1 { font-size: 2.42rem; }
}


/* =========================================================
   Community Hero Integrated Style v3
   Final composition refinements:
   - reveal slightly more New England/coastline
   - soften overlay so background breathes more
   - enlarge tablet/phone logo slightly
   ========================================================= */

/* Desktop: shift crop slightly left and reduce cream overlay */
@media (min-width: 901px) {
  .community-hero {
    background:
      linear-gradient(90deg, rgba(255,247,236,.78) 0%, rgba(255,247,236,.54) 33%, rgba(255,247,236,.06) 66%),
      url("assets/community-hero-background.jpeg") 45% center / cover no-repeat !important;
  }
}

/* Tablet: slightly larger logo */
@media (max-width: 900px) {
  .brand {
    width: 130px !important;
  }

  .community-hero {
    background:
      linear-gradient(90deg, rgba(255,247,236,.90) 0%, rgba(255,247,236,.70) 46%, rgba(255,247,236,.14) 100%),
      linear-gradient(180deg, rgba(255,247,236,.14) 0%, rgba(255,247,236,.02) 52%, rgba(16,39,68,.10) 100%),
      url("assets/community-hero-background.jpeg") 60% center / cover no-repeat !important;
  }
}

/* Phone: slightly larger logo */
@media (max-width: 600px) {
  .brand {
    width: 115px !important;
  }

  .community-hero {
    background-position: 62% center !important;
  }
}


/* =========================================================
   Community Hero Integrated Style v4 - Logo clipping fix
   Uses a padded logo asset and allows full text to display.
   ========================================================= */

.brand {
  overflow: visible !important;
}

.brand img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  overflow: visible !important;
}

/* Slightly increase available logo box height to protect bottom text. */
@media (min-width: 901px) {
  .brand {
    width: clamp(138px, 15vw, 220px) !important;
  }
}

@media (max-width: 900px) {
  .brand {
    width: 145px !important;
  }
}

@media (max-width: 600px) {
  .brand {
    width: 128px !important;
  }
}


/* =========================================================
   Community Hero v5 - Tablet Text/People Overlap Fix
   Tablet only: moves text into cleaner left space and shifts
   background slightly right so walkers do not sit under copy.
   ========================================================= */

@media (min-width: 601px) and (max-width: 900px) {
  .community-hero {
    background:
      linear-gradient(90deg, rgba(255,247,236,.94) 0%, rgba(255,247,236,.78) 50%, rgba(255,247,236,.16) 100%),
      linear-gradient(180deg, rgba(255,247,236,.16) 0%, rgba(255,247,236,.02) 52%, rgba(16,39,68,.10) 100%),
      url("assets/community-hero-background.jpeg") 68% center / cover no-repeat !important;
  }

  .hero-copy {
    top: 25% !important;
    left: 1.6rem !important;
    right: auto !important;
    max-width: 455px !important;
  }

  .hero-copy h1,
  h1 {
    max-width: 455px !important;
    font-size: clamp(2.65rem, 6.5vw, 3.65rem) !important;
    line-height: 1.04 !important;
  }

  .hero-copy p:last-child {
    max-width: 405px !important;
    font-size: 1rem !important;
    line-height: 1.56 !important;
  }
}


/* =========================================================
   Community Hero v6 - Match Approved Responsive Mockup
   Layout goal:
   - Text stays in upper-left clear sky/negative space
   - People remain lower and unobstructed
   - Desktop/tablet/mobile follow the same visual composition
   ========================================================= */

/* Hide previous kicker styling if any remains */
.hero-copy .kicker { display: none !important; }

.hero-copy h1 {
  text-transform: none !important;
}

.hero-lead,
.hero-support {
  margin: 0;
  color: rgba(16,39,68,.88);
}

/* Desktop mockup layout */
@media (min-width: 901px) {
  .community-hero {
    min-height: clamp(680px, 56vw, 890px) !important;
    background:
      linear-gradient(90deg, rgba(255,247,236,.82) 0%, rgba(255,247,236,.58) 34%, rgba(255,247,236,.08) 66%),
      url("assets/community-hero-background.jpeg") 48% center / cover no-repeat !important;
  }

  .hero-copy {
    top: 31% !important;
    transform: none !important;
    left: clamp(2.1rem,6vw,5.6rem) !important;
    max-width: min(640px,44vw) !important;
  }

  .hero-copy h1 {
    margin: 0 0 1.45rem !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(4.1rem, 5.8vw, 6.75rem) !important;
    line-height: .95 !important;
    letter-spacing: .035em !important;
    font-weight: 500 !important;
    color: #0e3768 !important;
    text-transform: uppercase !important;
  }

  .hero-lead {
    font-size: clamp(1.32rem, 1.65vw, 1.8rem) !important;
    line-height: 1.45 !important;
    margin-bottom: 1rem !important;
    max-width: 560px !important;
  }

  .hero-support {
    font-size: clamp(1rem, 1.18vw, 1.25rem) !important;
    line-height: 1.6 !important;
    max-width: 610px !important;
  }
}

/* Tablet mockup layout */
@media (min-width: 601px) and (max-width: 900px) {
  .community-hero {
    min-height: 760px !important;
    background:
      linear-gradient(90deg, rgba(255,247,236,.92) 0%, rgba(255,247,236,.72) 50%, rgba(255,247,236,.12) 100%),
      linear-gradient(180deg, rgba(255,247,236,.16) 0%, rgba(255,247,236,.02) 52%, rgba(16,39,68,.08) 100%),
      url("assets/community-hero-background.jpeg") 63% center / cover no-repeat !important;
  }

  .hero-copy {
    top: 22% !important;
    left: 1.45rem !important;
    right: auto !important;
    max-width: 405px !important;
    transform: none !important;
  }

  .hero-copy h1 {
    margin: 0 0 1.15rem !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(3.1rem, 8.2vw, 4.1rem) !important;
    line-height: .98 !important;
    letter-spacing: .03em !important;
    font-weight: 500 !important;
    color: #0e3768 !important;
    text-transform: uppercase !important;
  }

  .hero-lead {
    font-size: 1.16rem !important;
    line-height: 1.45 !important;
    margin-bottom: .9rem !important;
    max-width: 345px !important;
  }

  .hero-support {
    font-size: .92rem !important;
    line-height: 1.55 !important;
    max-width: 365px !important;
  }
}

/* Phone mockup layout */
@media (max-width: 600px) {
  .community-hero {
    min-height: 665px !important;
    background:
      linear-gradient(90deg, rgba(255,247,236,.90) 0%, rgba(255,247,236,.70) 58%, rgba(255,247,236,.08) 100%),
      linear-gradient(180deg, rgba(255,247,236,.10) 0%, rgba(255,247,236,.02) 52%, rgba(16,39,68,.07) 100%),
      url("assets/community-hero-background.jpeg") 65% center / cover no-repeat !important;
  }

  .hero-copy {
    top: 20% !important;
    left: 1.05rem !important;
    right: 1.05rem !important;
    max-width: 315px !important;
    transform: none !important;
  }

  .hero-copy h1 {
    margin: 0 0 .95rem !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 2.35rem !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;
    font-weight: 500 !important;
    color: #0e3768 !important;
    text-transform: uppercase !important;
  }

  .hero-lead {
    font-size: 1rem !important;
    line-height: 1.42 !important;
    margin-bottom: .8rem !important;
    max-width: 285px !important;
  }

  .hero-support {
    font-size: .82rem !important;
    line-height: 1.55 !important;
    max-width: 285px !important;
  }
}


/* HERO V7 - Return to approved Haneul style */

.hero-copy .kicker{
 display:block !important;
 margin:0 0 .9rem !important;
 text-transform:uppercase !important;
 letter-spacing:.24em !important;
 color:#102744 !important;
 font-weight:800 !important;
 font-size:.78rem !important;
}

.hero-copy .kicker::after{
 content:"";
 display:block;
 width:54px;
 height:2px;
 margin-top:.7rem;
 background:#bd8f4c;
}

@media (min-width:901px){
 .community-hero{
   background:
   linear-gradient(90deg, rgba(255,247,236,.72) 0%, rgba(255,247,236,.42) 34%, rgba(255,247,236,.03) 66%),
   url("assets/community-hero-background.jpeg") 46% center / cover no-repeat !important;
 }
 .hero-copy{
   top:30% !important;
 }
 .hero-copy h1{
   text-transform:none !important;
   font-size:clamp(2.9rem,4.8vw,5.2rem) !important;
   letter-spacing:-.04em !important;
   color:#102744 !important;
 }
}

@media (min-width:601px) and (max-width:900px){
 .community-hero{
   background:
   linear-gradient(90deg, rgba(255,247,236,.76) 0%, rgba(255,247,236,.46) 48%, rgba(255,247,236,.04) 100%),
   url("assets/community-hero-background.jpeg") 64% center / cover no-repeat !important;
 }
 .hero-copy{
   top:16% !important;
   max-width:360px !important;
 }
 .hero-copy h1{
   text-transform:none !important;
   font-size:3rem !important;
   color:#102744 !important;
 }
}

@media (max-width:600px){
 .community-hero{
   background:
   linear-gradient(90deg, rgba(255,247,236,.72) 0%, rgba(255,247,236,.42) 58%, rgba(255,247,236,.03) 100%),
   url("assets/community-hero-background.jpeg") 66% center / cover no-repeat !important;
 }
 .hero-copy{
   top:15% !important;
   max-width:290px !important;
 }
 .hero-copy h1{
   text-transform:none !important;
   font-size:2.2rem !important;
   color:#102744 !important;
 }
}


/* =========================================================
   Community Hero v8 - Tablet/Phone Collision Fix
   - Prevents "Community" label from overlapping logo
   - Keeps text out of the walking group
   - Shifts responsive crop so people sit to the right
   ========================================================= */

/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
  .community-hero {
    min-height: 780px !important;
    background:
      linear-gradient(90deg, rgba(255,247,236,.80) 0%, rgba(255,247,236,.52) 42%, rgba(255,247,236,.04) 100%),
      url("assets/community-hero-background.jpeg") 76% center / cover no-repeat !important;
  }

  .hero-copy {
    top: 170px !important;
    left: 1.35rem !important;
    right: auto !important;
    max-width: 335px !important;
    transform: none !important;
  }

  .hero-copy .kicker {
    font-size: .68rem !important;
    margin-bottom: .55rem !important;
  }

  .hero-copy .kicker::after {
    width: 38px !important;
    margin-top: .55rem !important;
  }

  .hero-copy h1 {
    font-size: 2.55rem !important;
    line-height: 1.04 !important;
    max-width: 335px !important;
  }

  .hero-lead {
    max-width: 320px !important;
  }

  .hero-support,
  .hero-copy p:last-child {
    max-width: 315px !important;
    font-size: .9rem !important;
    line-height: 1.5 !important;
  }
}

/* Phone */
@media (max-width: 600px) {
  .community-hero {
    min-height: 700px !important;
    background:
      linear-gradient(90deg, rgba(255,247,236,.78) 0%, rgba(255,247,236,.50) 48%, rgba(255,247,236,.03) 100%),
      url("assets/community-hero-background.jpeg") 78% center / cover no-repeat !important;
  }

  .hero-copy {
    top: 150px !important;
    left: 1rem !important;
    right: auto !important;
    max-width: 255px !important;
    transform: none !important;
  }

  .hero-copy .kicker {
    font-size: .64rem !important;
    margin-bottom: .5rem !important;
    letter-spacing: .2em !important;
  }

  .hero-copy .kicker::after {
    width: 34px !important;
    margin-top: .5rem !important;
  }

  .hero-copy h1 {
    font-size: 1.95rem !important;
    line-height: 1.06 !important;
    max-width: 255px !important;
  }

  .hero-lead {
    max-width: 245px !important;
  }

  .hero-support,
  .hero-copy p:last-child {
    max-width: 245px !important;
    font-size: .8rem !important;
    line-height: 1.46 !important;
  }
}


/* =========================================================
   Community Hero v9 - Text Above People Approach
   Stable layout across desktop/tablet/phone:
   - text sits in upper hero area
   - walkers remain lower in the image
   - no left-side crop dependency
   ========================================================= */

/* Shared hero copy treatment */
.hero-copy {
  text-align: center !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(760px, 88vw) !important;
  max-width: 760px !important;
  z-index: 6 !important;
}

.hero-copy .kicker {
  display: block !important;
  color: #102744 !important;
}

.hero-copy .kicker::after {
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-copy h1 {
  text-transform: none !important;
  color: #102744 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-copy p:last-child,
.hero-support {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Desktop: headline above the walking group */
@media (min-width: 901px) {
  .community-hero {
    min-height: clamp(700px, 56vw, 900px) !important;
    background:
      linear-gradient(180deg, rgba(255,247,236,.70) 0%, rgba(255,247,236,.42) 33%, rgba(255,247,236,.06) 62%, rgba(255,247,236,0) 100%),
      url("assets/community-hero-background.jpeg") 50% center / cover no-repeat !important;
  }

  .hero-copy {
    top: 18% !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.75rem, 4.6vw, 5rem) !important;
    line-height: 1.04 !important;
    max-width: 760px !important;
  }

  .hero-copy p:last-child,
  .hero-support {
    max-width: 620px !important;
  }
}

/* Tablet: text remains above people */
@media (min-width: 601px) and (max-width: 900px) {
  .community-hero {
    min-height: 780px !important;
    background:
      linear-gradient(180deg, rgba(255,247,236,.76) 0%, rgba(255,247,236,.48) 35%, rgba(255,247,236,.08) 64%, rgba(255,247,236,0) 100%),
      url("assets/community-hero-background.jpeg") 58% center / cover no-repeat !important;
  }

  .hero-copy {
    top: 150px !important;
    width: min(620px, 86vw) !important;
    max-width: 620px !important;
  }

  .hero-copy .kicker {
    font-size: .68rem !important;
    margin-bottom: .55rem !important;
  }

  .hero-copy .kicker::after {
    width: 38px !important;
    margin-top: .55rem !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.35rem, 6.6vw, 3.7rem) !important;
    line-height: 1.05 !important;
    max-width: 600px !important;
  }

  .hero-copy p:last-child,
  .hero-support {
    max-width: 520px !important;
    font-size: .98rem !important;
    line-height: 1.52 !important;
  }
}

/* Phone: compact centered text above people */
@media (max-width: 600px) {
  .community-hero {
    min-height: 710px !important;
    background:
      linear-gradient(180deg, rgba(255,247,236,.78) 0%, rgba(255,247,236,.50) 37%, rgba(255,247,236,.10) 65%, rgba(255,247,236,0) 100%),
      url("assets/community-hero-background.jpeg") 61% center / cover no-repeat !important;
  }

  .hero-copy {
    top: 132px !important;
    width: min(340px, 86vw) !important;
    max-width: 340px !important;
  }

  .hero-copy .kicker {
    font-size: .62rem !important;
    margin-bottom: .45rem !important;
    letter-spacing: .2em !important;
  }

  .hero-copy .kicker::after {
    width: 32px !important;
    margin-top: .45rem !important;
  }

  .hero-copy h1 {
    font-size: 2rem !important;
    line-height: 1.06 !important;
    max-width: 340px !important;
  }

  .hero-copy p:last-child,
  .hero-support {
    max-width: 320px !important;
    font-size: .8rem !important;
    line-height: 1.45 !important;
  }
}


/* =========================================================
   Hero v10 - Option A Copy + Reduced Headline Scale
   ========================================================= */

@media (min-width:901px){
  .hero-copy h1{
    font-size: clamp(2.4rem, 3.8vw, 4.2rem) !important;
    max-width: 760px !important;
  }

  .hero-copy .hero-support,
  .hero-copy p:last-child{
    max-width: 620px !important;
  }
}

@media (min-width:601px) and (max-width:900px){
  .hero-copy{
    top: 145px !important;
  }

  .hero-copy h1{
    font-size: clamp(2rem, 5vw, 3rem) !important;
    max-width: 520px !important;
  }

  .hero-copy .hero-support,
  .hero-copy p:last-child{
    max-width: 470px !important;
  }
}

@media (max-width:600px){
  .hero-copy{
    top: 128px !important;
  }

  .hero-copy h1{
    font-size: 1.75rem !important;
    max-width: 300px !important;
  }

  .hero-copy .hero-support,
  .hero-copy p:last-child{
    max-width: 285px !important;
  }
}


/* =========================================================
   Hero v11 - Tablet/Phone Text Alignment Fix
   Keeps hero copy as one clean centered stack on responsive
   displays and prevents uneven line alignment.
   ========================================================= */

@media (min-width: 601px) and (max-width: 900px) {
  .hero-copy {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(560px, 86vw) !important;
    max-width: 560px !important;
    text-align: center !important;
  }

  .hero-copy .kicker {
    text-align: center !important;
  }

  .hero-copy .kicker::after {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-copy h1 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 520px !important;
    line-height: 1.08 !important;
  }

  .hero-copy p:last-child,
  .hero-support {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 455px !important;
  }
}

@media (max-width: 600px) {
  .hero-copy {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(320px, 86vw) !important;
    max-width: 320px !important;
    text-align: center !important;
  }

  .hero-copy .kicker {
    text-align: center !important;
  }

  .hero-copy .kicker::after {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-copy h1 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 310px !important;
    line-height: 1.08 !important;
  }

  .hero-copy p:last-child,
  .hero-support {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 292px !important;
  }
}


/* =========================================================
   Hero v12 - Clean Text System
   Removes leftover "Meaningful connections" line behavior.
   Uses one headline + one support paragraph everywhere.
   ========================================================= */

.hero-copy,
.hero-copy * {
  box-sizing: border-box !important;
}

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

.hero-copy .kicker {
  display: block !important;
  margin: 0 0 .7rem !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: .22em !important;
  color: #102744 !important;
  font-weight: 800 !important;
}

.hero-copy .kicker::after {
  content: "" !important;
  display: block !important;
  width: 44px !important;
  height: 2px !important;
  margin: .62rem auto 0 !important;
  background: #bd8f4c !important;
}

.hero-copy h1 {
  display: block !important;
  margin: 0 auto .85rem !important;
  padding: 0 !important;
  text-align: center !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  letter-spacing: -.035em !important;
  line-height: 1.08 !important;
  text-transform: none !important;
  color: #102744 !important;
}

.hero-copy .hero-support,
.hero-copy p.hero-support,
.hero-copy p:last-child {
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  color: rgba(16,39,68,.86) !important;
  line-height: 1.55 !important;
}

/* Desktop */
@media (min-width: 901px) {
  .hero-copy {
    top: 18% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(760px, 86vw) !important;
    max-width: 760px !important;
  }

  .hero-copy .kicker {
    font-size: .78rem !important;
  }

  .hero-copy h1 {
    max-width: 700px !important;
    font-size: clamp(2.35rem, 3.6vw, 4rem) !important;
  }

  .hero-copy .hero-support,
  .hero-copy p:last-child {
    max-width: 600px !important;
    font-size: clamp(.98rem, 1.15vw, 1.18rem) !important;
  }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-copy {
    top: 150px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(560px, 86vw) !important;
    max-width: 560px !important;
  }

  .hero-copy .kicker {
    font-size: .68rem !important;
  }

  .hero-copy h1 {
    max-width: 500px !important;
    font-size: clamp(2rem, 4.9vw, 2.85rem) !important;
  }

  .hero-copy .hero-support,
  .hero-copy p:last-child {
    max-width: 430px !important;
    font-size: .94rem !important;
  }
}

/* Phone */
@media (max-width: 600px) {
  .hero-copy {
    top: 132px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(320px, 88vw) !important;
    max-width: 320px !important;
  }

  .hero-copy .kicker {
    font-size: .62rem !important;
  }

  .hero-copy h1 {
    max-width: 310px !important;
    font-size: 1.72rem !important;
  }

  .hero-copy .hero-support,
  .hero-copy p:last-child {
    max-width: 292px !important;
    font-size: .8rem !important;
  }
}


/* =========================================================
   Community Page Section 1 - Why Community Matters
   Standalone build under locked hero.
   ========================================================= */

.community-matters-section {
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.88), transparent 36%),
    linear-gradient(180deg, #fff7ec 0%, #fbf2e6 100%);
  padding: clamp(4.5rem, 7vw, 7.25rem) 1.35rem;
  color: #102744;
}

.community-matters-wrap {
  width: min(1220px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2.4rem, 5vw, 5.6rem);
  align-items: center;
}

.community-matters-image {
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(189,143,76,.22);
  box-shadow: 0 24px 55px rgba(16,39,68,.12);
  background: #efe0ca;
}

.community-matters-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1.28 / 1;
  object-fit: cover;
}

.community-matters-content {
  min-width: 0;
}

.section-kicker {
  margin: 0 0 .8rem;
  color: #bd8f4c;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 900;
  font-size: .78rem;
}

.section-kicker::after {
  content: "";
  display: block;
  width: 58px;
  height: 2px;
  margin-top: .72rem;
  background: #bd8f4c;
}

.community-matters-content h2 {
  margin: 0 0 1.8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.3rem, 4vw, 4.15rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 500;
  color: #102744;
}

.community-matters-intro {
  max-width: 760px;
  margin: 0 0 2rem;
  color: rgba(16,39,68,.82);
  font-size: clamp(1rem, 1.12vw, 1.12rem);
  line-height: 1.74;
}

.community-matters-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.matters-card {
  background: rgba(255,250,243,.82);
  border: 1px solid rgba(189,143,76,.18);
  border-radius: 18px;
  padding: 1.25rem 1.1rem 1.35rem;
  box-shadow: 0 14px 32px rgba(16,39,68,.08);
  min-height: 235px;
}

.matters-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: .85rem;
  background: rgba(189,143,76,.14);
  color: #bd8f4c;
  font-weight: 900;
  font-size: 1.05rem;
}

.matters-card h3 {
  margin: 0 0 .7rem;
  font-size: 1.02rem;
  line-height: 1.25;
  color: #102744;
}

.matters-card p {
  margin: 0;
  color: rgba(16,39,68,.78);
  font-size: .93rem;
  line-height: 1.58;
}

/* Tablet */
@media (max-width: 900px) {
  .community-matters-section {
    padding: 4.5rem 1.25rem;
  }

  .community-matters-wrap {
    grid-template-columns: 1fr;
    gap: 2.1rem;
  }

  .community-matters-image {
    max-width: 650px;
    margin: 0 auto;
    width: 100%;
  }

  .community-matters-content {
    text-align: left;
  }

  .community-matters-intro {
    max-width: 760px;
  }

  .community-matters-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .matters-card {
    min-height: 245px;
  }
}

/* Phone */
@media (max-width: 650px) {
  .community-matters-section {
    padding: 3.75rem 1rem;
  }

  .community-matters-content {
    text-align: center;
  }

  .section-kicker::after {
    margin-left: auto;
    margin-right: auto;
  }

  .community-matters-content h2 {
    font-size: 2.25rem;
    margin-bottom: 1.1rem;
  }

  .community-matters-intro {
    font-size: .96rem;
    line-height: 1.65;
    margin-bottom: 1.6rem;
  }

  .community-matters-cards {
    grid-template-columns: 1fr;
    gap: .8rem;
  }

  .matters-card {
    min-height: 0;
    text-align: left;
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: .8rem;
    padding: 1rem;
  }

  .matters-icon {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .matters-card h3 {
    margin-bottom: .35rem;
  }

  .matters-card p {
    font-size: .9rem;
    line-height: 1.5;
  }
}


/* =========================================================
   Section 1 v2 - Desktop Spacing Tightening
   Reduces excess cream space above/below the image and gives
   the image slightly more presence on desktop.
   ========================================================= */

@media (min-width: 901px) {
  .community-matters-section {
    padding-top: 4.25rem !important;
    padding-bottom: 4.35rem !important;
  }

  .community-matters-image img {
    aspect-ratio: 1.12 / 1 !important;
  }

  .community-matters-wrap {
    align-items: center !important;
  }
}

/* Keep tablet/phone breathing room comfortable */
@media (max-width: 900px) {
  .community-matters-section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}

@media (max-width: 650px) {
  .community-matters-section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}


/* =========================================================
   Section 1 v3 - Anchored Unified Panel
   Fixes the "floating image" feel by grounding the image and
   content inside one shared soft panel.
   ========================================================= */

@media (min-width: 901px) {
  .community-matters-section {
    padding-top: 3.6rem !important;
    padding-bottom: 4rem !important;
  }

  .community-matters-wrap {
    width: min(1240px, 92vw) !important;
    background:
      linear-gradient(135deg, rgba(255,250,243,.92), rgba(255,246,235,.72));
    border: 1px solid rgba(189,143,76,.18);
    border-radius: 34px;
    padding: clamp(1.5rem, 2.6vw, 2.4rem);
    box-shadow: 0 22px 52px rgba(16,39,68,.08);
    gap: clamp(2.2rem, 4.2vw, 4.6rem) !important;
    align-items: stretch !important;
  }

  .community-matters-image {
    height: 100%;
    min-height: 520px;
    box-shadow: none !important;
    border-radius: 24px !important;
  }

  .community-matters-image img {
    height: 100%;
    aspect-ratio: auto !important;
    object-fit: cover;
  }

  .community-matters-content {
    align-self: center;
    padding-right: clamp(.4rem, 1vw, 1rem);
  }

  .community-matters-cards {
    margin-top: .4rem;
  }
}

@media (max-width: 900px) {
  .community-matters-wrap {
    background: rgba(255,250,243,.78);
    border: 1px solid rgba(189,143,76,.16);
    border-radius: 28px;
    padding: 1rem;
    box-shadow: 0 18px 42px rgba(16,39,68,.07);
  }

  .community-matters-image {
    box-shadow: none !important;
  }

  .community-matters-content {
    padding: .6rem .35rem .35rem;
  }
}

@media (max-width: 650px) {
  .community-matters-wrap {
    padding: .8rem;
    border-radius: 24px;
  }

  .community-matters-content {
    padding: .45rem .15rem .15rem;
  }
}


/* =========================================================
   Section 1 v4 - Image Crop Adjustment
   Keeps the anchored panel and image size, but changes the
   crop so it shows more of the full scene instead of zooming
   into only two people.
   ========================================================= */

@media (min-width: 901px) {
  .community-matters-image img {
    object-position: center 24% !important;
  }
}

@media (max-width: 900px) {
  .community-matters-image img {
    object-position: center 28% !important;
  }
}


/* =========================================================
   Section 1 v5 - Desktop Image Zoom Fix
   Desktop only: keeps the unified panel but stops forcing the
   image to overfill a tall container.
   Tablet and phone remain unchanged.
   ========================================================= */

@media (min-width: 901px) {
  .community-matters-image {
    min-height: 0 !important;
    height: auto !important;
    align-self: center !important;
  }

  .community-matters-image img {
    height: auto !important;
    width: 100% !important;
    aspect-ratio: 1.22 / 1 !important;
    object-fit: cover !important;
    object-position: center 30% !important;
  }

  .community-matters-wrap {
    align-items: center !important;
  }
}


/* =========================================================
   Section 1 v6 - Photo Bubble Icons
   Replaces Hangul placeholder circles with warm photo-style
   circular badges.
   ========================================================= */

.matters-icon.photo-bubble {
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 2px solid rgba(189,143,76,.56) !important;
  box-shadow: 0 10px 20px rgba(16,39,68,.12) !important;
}

.matters-icon.photo-bubble img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

@media (max-width: 650px) {
  .matters-icon.photo-bubble {
    width: 52px !important;
    height: 52px !important;
  }
}


/* =========================================================
   Section 1 v8 - Remove Icons
   Replace decorative bubbles with elegant numbered accents.
   ========================================================= */

.matters-icon,
.photo-bubble {
  display: none !important;
}

.matters-number {
  display: inline-block;
  margin-bottom: .9rem;
  color: #bd8f4c;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 1rem;
  position: relative;
}

.matters-number::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: rgba(189,143,76,.75);
  margin-top: .45rem;
}

.matters-card {
  padding-top: 1.35rem !important;
}

@media (max-width: 650px) {
  .matters-number {
    margin-bottom: .55rem;
  }

  .matters-number::after {
    width: 28px;
  }
}


/* =========================================================
   Section 1 v9 - Phone Column/Text Alignment Fix
   Removes old icon-based two-column layout on phone display.
   Cards now stack cleanly with centered numbers and balanced text.
   ========================================================= */

@media (max-width: 650px) {
  .matters-card {
    display: block !important;
    grid-template-columns: none !important;
    text-align: center !important;
    padding: 1.2rem 1rem 1.25rem !important;
  }

  .matters-number {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto .7rem !important;
    text-align: center !important;
  }

  .matters-number::after {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .matters-card h3 {
    text-align: center !important;
    margin: 0 0 .45rem !important;
  }

  .matters-card p {
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 310px !important;
  }
}


/* =========================================================
   Section 2 v1 - Join the Conversation
   Social/community participation cards.
   ========================================================= */

.join-conversation-section {
  background:
    linear-gradient(180deg, #fbf2e6 0%, #fff7ec 100%);
  padding: clamp(4rem, 6.5vw, 6.5rem) 1.35rem;
  color: #102744;
}

.join-conversation-wrap {
  width: min(1120px, 92vw);
  margin: 0 auto;
}

.join-conversation-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(2.2rem, 4vw, 3.2rem);
}

.join-conversation-header .section-kicker::after {
  margin-left: auto;
  margin-right: auto;
}

.join-conversation-header h2 {
  margin: 0 0 1.15rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 4vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 500;
  color: #102744;
}

.join-conversation-header p {
  margin: 0 auto;
  max-width: 760px;
  color: rgba(16,39,68,.82);
  font-size: clamp(1rem, 1.12vw, 1.12rem);
  line-height: 1.72;
}

.conversation-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.15rem, 2.5vw, 2rem);
}

.conversation-card {
  position: relative;
  min-height: 330px;
  padding: clamp(1.6rem, 2.8vw, 2.4rem);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,250,243,.94), rgba(255,246,235,.74));
  border: 1px solid rgba(189,143,76,.18);
  box-shadow: 0 18px 42px rgba(16,39,68,.08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.social-mark {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 1.15rem;
  font-weight: 900;
  font-size: 1.55rem;
  border: 1px solid rgba(189,143,76,.28);
  background: rgba(16,39,68,.94);
  color: #fff7ec;
  box-shadow: 0 12px 26px rgba(16,39,68,.13);
}

.instagram-mark {
  font-size: 1.7rem;
  background: rgba(189,143,76,.92);
}

.conversation-card h3 {
  margin: 0 0 .85rem;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.18;
  color: #102744;
}

.conversation-card p {
  margin: 0 0 1.35rem;
  color: rgba(16,39,68,.78);
  font-size: 1rem;
  line-height: 1.65;
}

.conversation-button {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .78rem 1.25rem;
  border-radius: 999px;
  background: #bd8f4c;
  color: #fff7ec;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .78rem;
  font-weight: 900;
  border: 1px solid #bd8f4c;
}

.conversation-button-outline {
  background: transparent;
  color: #102744;
  border-color: rgba(189,143,76,.65);
}

@media (max-width: 760px) {
  .join-conversation-section {
    padding: 3.75rem 1rem;
  }

  .conversation-cards {
    grid-template-columns: 1fr;
  }

  .conversation-card {
    min-height: 0;
    align-items: center;
    text-align: center;
    padding: 1.45rem 1.1rem 1.55rem;
  }

  .conversation-card p {
    max-width: 360px;
  }

  .join-conversation-header h2 {
    font-size: 2.25rem;
  }

  .join-conversation-header p {
    font-size: .96rem;
    line-height: 1.65;
  }
}


/* =========================================================
   Section 2 v2 - Mockup Style Refinement
   Social cards with real logo-style SVG marks, stronger CTA
   buttons, and responsive layout matching approved mockup.
   ========================================================= */

.join-conversation-section {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.9), transparent 34%),
    linear-gradient(180deg, #fff7ec 0%, #fbf2e6 100%) !important;
}

@media (min-width: 901px) {
  .join-conversation-wrap {
    width: min(1240px, 92vw) !important;
    display: grid !important;
    grid-template-columns: .82fr 1.18fr !important;
    gap: clamp(2.4rem, 5vw, 5rem) !important;
    align-items: center !important;
  }

  .join-conversation-header {
    text-align: left !important;
    margin: 0 !important;
    max-width: 450px !important;
  }

  .join-conversation-header .section-kicker::after {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .join-conversation-header h2 {
    font-size: clamp(2.65rem, 4vw, 4.35rem) !important;
  }

  .join-conversation-header p {
    max-width: 440px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.conversation-cards {
  gap: clamp(1.25rem, 2.5vw, 2rem) !important;
}

.conversation-card {
  min-height: 360px !important;
  align-items: center !important;
  text-align: center !important;
  padding: clamp(1.55rem, 2.5vw, 2.15rem) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(255,250,243,.96), rgba(255,247,236,.78)) !important;
  border: 1px solid rgba(189,143,76,.26) !important;
  box-shadow: 0 20px 44px rgba(16,39,68,.10) !important;
}

.social-mark {
  width: 76px !important;
  height: 76px !important;
  margin: 0 auto 1rem !important;
  background: #102744 !important;
  color: #fff7ec !important;
  border: 3px solid rgba(189,143,76,.9) !important;
  outline: 3px solid rgba(255,247,236,.9);
  box-shadow: 0 14px 28px rgba(16,39,68,.18) !important;
}

.social-mark svg {
  width: 38px;
  height: 38px;
  fill: currentColor;
  display: block;
}

.instagram-mark svg {
  width: 42px;
  height: 42px;
}

.instagram-mark {
  background: #102744 !important;
}

.conversation-card::before {
  content: "";
  width: 38px;
  height: 2px;
  background: rgba(189,143,76,.8);
  order: 2;
  margin: .15rem auto 1rem;
}

.conversation-card h3 {
  order: 3;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500 !important;
  font-size: clamp(1.45rem, 2vw, 1.85rem) !important;
  margin-bottom: .9rem !important;
}

.conversation-card p {
  order: 4;
}

.social-mark {
  order: 1;
}

.conversation-button {
  order: 5;
  width: min(100%, 360px);
  background: #102744 !important;
  color: #fff7ec !important;
  border: 2px solid #bd8f4c !important;
  box-shadow: inset 0 0 0 1px rgba(255,247,236,.08), 0 10px 20px rgba(16,39,68,.10);
}

.conversation-button-outline {
  background: #102744 !important;
  color: #fff7ec !important;
}

.conversation-button span {
  margin-left: .65rem;
  font-size: 1rem;
}

.conversation-meta {
  order: 6 !important;
  margin: .75rem 0 0 !important;
  color: rgba(16,39,68,.62) !important;
  font-size: .9rem !important;
  line-height: 1.3 !important;
}

@media (max-width: 900px) and (min-width: 761px) {
  .join-conversation-wrap {
    width: min(760px, 92vw) !important;
  }

  .join-conversation-header {
    text-align: left !important;
    margin-bottom: 2rem !important;
  }

  .join-conversation-header .section-kicker::after {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .conversation-card {
    min-height: 350px !important;
  }

  .social-mark {
    width: 66px !important;
    height: 66px !important;
  }

  .social-mark svg {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 760px) {
  .social-mark {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 0 !important;
  }

  .social-mark svg {
    width: 28px;
    height: 28px;
  }

  .conversation-card {
    display: grid !important;
    grid-template-columns: 60px 1fr !important;
    column-gap: .9rem !important;
    align-items: center !important;
    text-align: left !important;
  }

  .conversation-card::before {
    display: none !important;
  }

  .social-mark {
    grid-row: 1 / span 3;
    align-self: start;
  }

  .conversation-card h3,
  .conversation-card p,
  .conversation-button,
  .conversation-meta {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .conversation-card h3 {
    font-size: 1.15rem !important;
  }

  .conversation-card p {
    font-size: .9rem !important;
    line-height: 1.48 !important;
  }

  .conversation-button {
    width: 100%;
    font-size: .68rem !important;
    padding-left: .7rem !important;
    padding-right: .7rem !important;
  }

  .conversation-meta {
    font-size: .78rem !important;
  }
}


/* =========================================================
   Section 2 v2.1 - Phone Metadata Alignment Fix
   Keeps the meta text under the button/content column instead
   of shifting all the way left.
   ========================================================= */

@media (max-width: 760px) {
  .conversation-meta {
    grid-column: 2 !important;
    width: 100% !important;
    text-align: left !important;
    justify-self: stretch !important;
    align-self: start !important;
    padding-left: 0 !important;
    margin-top: .55rem !important;
  }
}


/* =========================================================
   Section 2 v2.2 - Phone Card Centering Fix
   Phone only: removes the two-column icon/content layout and
   centers all card content, including the meta text.
   ========================================================= */

@media (max-width: 760px) {
  .conversation-card {
    display: block !important;
    grid-template-columns: none !important;
    text-align: center !important;
    align-items: center !important;
    padding: 1.45rem 1.1rem 1.55rem !important;
  }

  .social-mark {
    display: grid !important;
    margin: 0 auto 1rem !important;
    grid-row: auto !important;
    align-self: center !important;
  }

  .conversation-card h3,
  .conversation-card p,
  .conversation-button,
  .conversation-meta {
    display: block !important;
    grid-column: auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
  }

  .conversation-card p {
    max-width: 340px !important;
  }

  .conversation-button {
    display: inline-flex !important;
    width: auto !important;
    min-width: min(100%, 260px) !important;
    justify-content: center !important;
  }

  .conversation-meta {
    width: 100% !important;
    max-width: 310px !important;
    margin-top: .7rem !important;
    padding-left: 0 !important;
  }
}


/* =========================================================
   Section 3 v1 - Community Values
   Calm 2x2 card section after Join the Conversation.
   ========================================================= */

.community-values-section {
  background:
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.72), transparent 28%),
    linear-gradient(180deg, #fbf2e6 0%, #fff7ec 100%);
  padding: clamp(4rem, 6.5vw, 6.5rem) 1.35rem;
  color: #102744;
}

.community-values-wrap {
  width: min(1120px, 92vw);
  margin: 0 auto;
}

.community-values-header {
  max-width: 820px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.community-values-header .section-kicker::after {
  margin-left: auto;
  margin-right: auto;
}

.community-values-header h2 {
  margin: 0 0 1.15rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 4vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 500;
  color: #102744;
}

.community-values-header p {
  margin: 0 auto;
  max-width: 760px;
  color: rgba(16,39,68,.82);
  font-size: clamp(1rem, 1.12vw, 1.12rem);
  line-height: 1.72;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.45rem);
}

.value-card {
  position: relative;
  min-height: 210px;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: 24px;
  background: rgba(255,250,243,.82);
  border: 1px solid rgba(189,143,76,.18);
  box-shadow: 0 16px 36px rgba(16,39,68,.075);
}

.value-number {
  display: inline-block;
  margin-bottom: .85rem;
  color: #bd8f4c;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: .95rem;
}

.value-number::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: .45rem;
  background: rgba(189,143,76,.72);
}

.value-card h3 {
  margin: 0 0 .65rem;
  font-size: clamp(1.25rem, 1.65vw, 1.55rem);
  line-height: 1.2;
  color: #102744;
}

.value-card p {
  margin: 0;
  color: rgba(16,39,68,.78);
  font-size: .98rem;
  line-height: 1.62;
}

@media (max-width: 760px) {
  .community-values-section {
    padding: 3.75rem 1rem;
  }

  .values-grid {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  .community-values-header h2 {
    font-size: 2.25rem;
  }

  .community-values-header p {
    font-size: .96rem;
    line-height: 1.65;
  }

  .value-card {
    min-height: 0;
    text-align: center;
    padding: 1.25rem 1.05rem 1.35rem;
  }

  .value-number {
    margin-left: auto;
    margin-right: auto;
  }

  .value-number::after {
    margin-left: auto;
    margin-right: auto;
  }

  .value-card p {
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
    font-size: .92rem;
    line-height: 1.55;
  }
}


/* =========================================================
   Section 4 - Looking Ahead
   Final content section before footer.
   ========================================================= */

.looking-ahead-section {
  background:
    linear-gradient(180deg, #fff7ec 0%, #f8efe3 100%);
  padding: clamp(4rem, 7vw, 7rem) 1.35rem;
  color: #102744;
}

.looking-ahead-wrap {
  width: min(1180px, 92vw);
  margin: 0 auto;
}

.looking-ahead-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 3rem;
}

.looking-ahead-header .section-kicker::after {
  margin-left: auto;
  margin-right: auto;
}

.looking-ahead-header h2 {
  margin: 0 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 4vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 500;
}

.looking-ahead-header p {
  margin: 0 auto;
  max-width: 760px;
  color: rgba(16,39,68,.82);
  line-height: 1.72;
}

.future-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}

.future-card {
  background: rgba(255,250,243,.86);
  border: 1px solid rgba(189,143,76,.18);
  border-radius: 24px;
  padding: 1.6rem;
  box-shadow: 0 16px 34px rgba(16,39,68,.07);
}

.future-number {
  color: #bd8f4c;
  font-weight: 800;
  letter-spacing: .08em;
}

.future-number::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: .45rem;
  margin-bottom: .9rem;
  background: rgba(189,143,76,.75);
}

.future-card h3 {
  margin: 0 0 .7rem;
  font-size: 1.25rem;
}

.future-card p {
  margin: 0;
  line-height: 1.6;
  color: rgba(16,39,68,.78);
}

.community-closing {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.closing-statement {
  font-size: clamp(1.05rem, 1.2vw, 1.18rem);
  line-height: 1.8;
  color: rgba(16,39,68,.84);
  margin-bottom: 2rem;
}

.closing-motto {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.7;
  color: #102744;
}

@media (max-width: 900px) {
  .future-grid {
    grid-template-columns: 1fr;
  }

  .future-card {
    text-align: center;
  }

  .future-number::after {
    margin-left: auto;
    margin-right: auto;
  }
}


/* Final QA Cleanup - Footer */

.community-footer {
  padding: 2rem 1rem;
  text-align: center;
  background: #f8efe3;
  border-top: 1px solid rgba(189,143,76,.18);
  color: rgba(16,39,68,.68);
  font-size: .92rem;
}

.community-footer p {
  margin: 0;
}

.email-signup-section {
  width: min(900px, calc(100% - 48px));
  margin: clamp(34px, 6vw, 64px) auto 0;
}

.email-signup-card {
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid rgba(168, 117, 42, .24);
  border-top: 5px solid #a8752a;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.72), transparent 16rem),
    linear-gradient(145deg, rgba(255,250,243,.96), rgba(247,235,220,.72));
  box-shadow: 0 16px 36px rgba(37, 32, 25, .08);
  text-align: center;
}

.email-signup-card .section-kicker {
  justify-content: center;
  margin-bottom: 10px;
}

.email-signup-card .section-kicker::after {
  display: none;
}

.email-signup-card h2 {
  max-width: 720px;
  margin: 0 auto 14px;
  color: #062d5d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
}

.email-signup-card p:not(.section-kicker) {
  max-width: 680px;
  margin: 0 auto;
  color: rgba(6, 45, 93, .78);
  font-size: clamp(.98rem, 1.45vw, 1.12rem);
  line-height: 1.7;
}

.email-signup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 24px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: #062d5d;
  color: #fff8ed;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(8, 47, 82, .14);
  cursor: pointer;
}

.email-signup-button:hover,
.email-signup-button:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.email-signup-card .email-signup-privacy {
  max-width: 560px;
  margin-top: 18px;
  color: rgba(6, 45, 93, .64);
  font-size: .88rem;
  font-weight: 800;
}

.email-signup-form {
  max-width: 720px;
  margin: 24px auto 0;
}

.email-signup-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: end;
  gap: 12px;
}

.email-signup-fields label {
  display: grid;
  gap: 7px;
  text-align: left;
}

.email-signup-fields span {
  color: #062d5d;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.email-signup-fields strong {
  color: #a8752a;
}

.email-signup-fields input {
  width: 100%;
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid rgba(168, 117, 42, .28);
  border-radius: 999px;
  background: #fffdf8;
  color: #062d5d;
  font: 1rem/1.4 Avenir, "Avenir Next", system-ui, sans-serif;
}

.email-signup-fields input:focus {
  border-color: #a8752a;
  box-shadow: 0 0 0 4px rgba(168, 117, 42, .14);
  outline: none;
}

.email-signup-status {
  min-height: 1.3em;
  margin-top: 14px !important;
  color: #062d5d !important;
  font-size: .92rem !important;
  font-weight: 800;
}

.email-signup-status.is-error {
  color: #9b3429 !important;
}

.email-signup-status.is-success {
  color: #28603a !important;
}

.hidden-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .email-signup-section {
    width: min(100% - 32px, 900px);
  }

  .email-signup-card {
    padding: 28px 20px;
  }

  .email-signup-button {
    width: 100%;
  }

  .email-signup-fields {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Community Navigation Consistency Fix
   Adds Resources dropdown + Founder’s Corner link without
   changing the approved hero overlay/composition.
   ========================================================= */

.community-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.community-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.community-dropdown-menu {
  position: absolute;
  top: calc(100% + .85rem);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  width: 280px;
  padding: .7rem .6rem;
  border-radius: 16px;
  background: rgba(255, 250, 242, .98);
  border: 1px solid rgba(189,143,76,.32);
  box-shadow: 0 18px 38px rgba(16,39,68,.17);
}

.community-dropdown::after {
  content: "";
  position: absolute;
  left: -1rem;
  right: -1rem;
  top: 100%;
  height: 1rem;
}

.community-dropdown:hover .community-dropdown-menu,
.community-dropdown:focus-within .community-dropdown-menu,
.community-dropdown-menu:hover {
  display: grid;
  gap: .16rem;
}

.desktop-nav .community-dropdown-menu a {
  display: block;
  padding: .72rem .8rem;
  border-radius: 11px;
  color: var(--navy);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.22;
  text-transform: none;
  text-shadow: none;
  white-space: normal;
}

.desktop-nav .community-dropdown-menu a::after {
  display: none !important;
}

.desktop-nav .community-dropdown-menu a:hover,
.desktop-nav .community-dropdown-menu a:focus-visible {
  background: rgba(189,143,76,.14);
  color: var(--navy);
}

@media (min-width: 901px) {
  .desktop-nav {
    gap: clamp(1.25rem, 2.45vw, 2.75rem) !important;
  }
}

.mobile-resources {
  display: block;
}

.mobile-resources-toggle {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .74rem .95rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: left;
  cursor: pointer;
}

.mobile-resources-toggle:hover,
.mobile-resources-toggle:focus-visible {
  background: rgba(189,143,76,.12);
  outline: none;
}

.mobile-resources-menu {
  display: none;
  padding: .18rem 0 .35rem .5rem;
}

.mobile-resources.is-open .mobile-resources-menu {
  display: grid;
  gap: .08rem;
}

.mobile-menu-panel .mobile-resources-menu a {
  padding: .58rem .75rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(16,39,68,.88);
}