/* Cedar, creek stones, and a stump disclosure match the supplied homepage. */
.reference-home { background: #173923; }
.reference-home .nav {
  position: fixed; inset: clamp(20px, 3vw, 32px) auto auto 6px; z-index: 30;
  width: clamp(62px, 12.5vw, 110px); height: auto; min-height: 0;
  display: block; margin: 0; padding: 0; background: none;
  border: 0; box-shadow: none;
}
.reference-home .nav > nav { width: 100%; height: auto; display: block; }
.reference-home .nav .brand-menu { width: 100%; height: auto; margin: 0; display: block; }
.reference-home .nav .brand-menu > summary {
  width: 100%; max-width: none; min-width: 0; height: auto;
  display: block; position: relative; padding: 0; gap: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.reference-home .nav .brand-menu > summary::after { content: none; }
.stump-menu-image { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 3px #1b130f66); }
.stump-sapling {
  position: absolute; left: 18%; bottom: 74%; width: 68%; height: 52%;
  overflow: visible; pointer-events: none;
  filter: drop-shadow(0 1px 1px #172a2366);
}
.reference-home .nav .brand-menu > summary .stump-menu-label {
  position: absolute; left: 50%; top: 52%; transform: translateX(-50%);
  display: block; padding: 3px 7px; border-radius: 4px;
  background: #f4e1bcdd; color: #161a12; font: 700 13px/1.2 var(--sans);
  white-space: nowrap; text-shadow: none;
}
.stump-menu-caret { display: inline-block; font-size: 16px; }
.reference-home .nav .brand-menu[open] > summary .stump-menu-caret { transform: rotate(180deg); }
.reference-home .nav .brand-menu > summary:focus-visible { outline: 3px solid #5c338e; outline-offset: 2px; border-radius: 12px; }
.reference-home .nav .brand-menu .page-menu-links {
  position: absolute; left: 4px; right: auto; top: calc(100% + 4px);
  width: min(340px, calc(100vw - 24px)); max-width: calc(100vw - 24px);
  max-height: calc(100dvh - clamp(62px, 12.5vw, 110px) - 54px); overflow-y: auto;
}
.reference-home .nav .nav-actions { display: none; }
.reference-home .hero {
  display: block; min-height: 100svh; overflow: hidden;
  background: #9b573b; color: #080b06;
}
.reference-home .hero > .cedar-stone-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; object-position: center; filter: none;
}
.reference-home .hero-shade { display: none; }
/* A few small feather-moss patches add texture without covering the cedar. */
.cedar-moss-highlights {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.cedar-moss {
  position: absolute; display: block; height: auto; object-fit: contain;
  pointer-events: none; filter: saturate(.95) brightness(.94) drop-shadow(0 2px 2px #17211466);
}
.cedar-moss { width: clamp(60px, 10.5vw, 132px); opacity: .96; }
.moss-board-one { left: 17%; top: 18%; transform: rotate(-4deg); }
.moss-board-two { right: 17%; top: 28.2%; width: clamp(56px, 9vw, 110px); transform: scaleX(-1) rotate(3deg); }
.moss-board-three { left: 18.5%; top: 63.2%; width: clamp(50px, 8.5vw, 100px); transform: rotate(5deg); opacity: .9; }
.moss-board-four { right: 18%; top: 78.3%; width: clamp(56px, 9.5vw, 116px); transform: scaleX(-1) rotate(-5deg); opacity: .92; }
.badge-water-drops { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.badge-water-drops i {
  position: absolute; width: clamp(3px, .6vw, 4.5px); height: clamp(6px, 1.2vw, 9px);
  border-radius: 45% 45% 52% 52%; border-left: 1px solid #f1f8ffcc;
  background: linear-gradient(145deg, #e0efffcc, #829fce99 60%, #edcd8ba6);
  box-shadow: 0 1px 3px #324d6655; opacity: 0;
  animation: moss-water-drip 3.9s ease-in infinite;
  --fall: clamp(18px, 3.5vw, 28px);
}
.badge-water-drops i:nth-child(1) { left: calc(25.209% - 2px); top: 98.248%; animation-delay: -.4s; }
.badge-water-drops i:nth-child(2) { left: calc(78.673% - 2px); top: 94.212%; animation-delay: -2s; animation-duration: 4.7s; }
.badge-water-drops i:nth-child(3) { left: calc(50.584% - 2px); top: 98.705%; animation-delay: -3s; animation-duration: 5.2s; }
@keyframes moss-water-drip {
  0%, 15% { opacity: 0; transform: translateY(0) scale(.3); }
  25% { opacity: .9; transform: translateY(0) scale(1); }
  34% { opacity: .9; transform: translateY(2px) scale(.9, 1.1); }
  60% { opacity: .6; transform: translateY(var(--fall)) scale(.75, 1.1); }
  72%, 100% { opacity: 0; transform: translateY(calc(var(--fall) * 1.25)) scale(.5); }
}
.reference-home .hero-content {
  position: relative; width: 100%; max-width: 1100px;
  margin: 0 auto; padding: 18px 14% 90px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; text-align: center;
}
.reference-home .hero-content::before, .reference-home .hero-content::after { content: none; }
.reference-home .hero-emblem-wrap {
  width: min(82vw, 620px); max-width: none; height: auto; aspect-ratio: 1198 / 1313;
  margin: 0 0 38px; position: relative; left: 50%; transform: translateX(-50%);
}
/* Moss is integrated with the rim; the transparent outside reveals the cedar. */
.reference-home .hero-emblem {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  object-fit: contain; filter: none; clip-path: none;
}
.reference-home .hero-luminous-air {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 96%;
  pointer-events: none; mix-blend-mode: screen;
}
/* Ripples begin at the water directly beneath the central M and spread outward. */
.reference-home .hero-water-ripples {
  top: 47.7%; bottom: auto; left: 11%; right: 11%; height: 11%;
  overflow: visible; clip-path: none; mix-blend-mode: screen;
}
.reference-home .hero-water-ripples::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7%; height: 52%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, #f2ce8b26, #7360c82b 45%, transparent 76%);
}
.reference-home .hero-water-ripples i {
  left: 50%; top: 51%; width: 100%; height: 42%;
  border: clamp(1px, .3vw, 2px) solid #7861c9;
  border-top-color: #f2cd86; border-right-color: #7861c9;
  border-bottom-color: #d8b477; border-left-color: #9a84db;
  background: none; border-radius: 50%;
  box-shadow: 0 0 9px #8770d54d, 0 0 18px #e6bd6e26, inset 0 1px 3px #f8d99166;
  transform: translate(-50%, -50%) scale(.025); opacity: 0;
  animation: central-m-ripple 4.8s cubic-bezier(.18,.48,.4,1) infinite;
}
.reference-home .hero-water-ripples i:nth-child(2) { animation-delay: -1.2s; }
.reference-home .hero-water-ripples i:nth-child(3) { animation-delay: -2.4s; }
.reference-home .hero-water-ripples i:nth-child(4) { animation-delay: -3.6s; }
@keyframes central-m-ripple {
  0% { transform: translate(-50%, -50%) scale(.025); opacity: 0; }
  12% { opacity: .68; }
  65% { opacity: .42; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .badge-water-drops { display: none; }
  .reference-home .hero-luminous-air { display: none; }
  .reference-home .hero-water-ripples i {
    animation: none; display: block; opacity: .28;
    transform: translate(-50%, -50%) scale(.4);
  }
  .reference-home .hero-water-ripples i:nth-child(2) { transform: translate(-50%, -50%) scale(.65); }
  .reference-home .hero-water-ripples i:nth-child(3) { transform: translate(-50%, -50%) scale(.9); }
  .reference-home .hero-water-ripples i:nth-child(4) { display: none; }
}
.reference-home .hero-content h1 {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 400;
  font-size: clamp(42px, 8.8vw, 92px); line-height: 1.06; letter-spacing: -.035em;
  color: #050805; text-shadow: none; margin: 0 auto 26px;
}
.reference-home .hero-content h1::after {
  width: 48%; height: 2px; margin: 32px auto 0;
  background: linear-gradient(90deg, transparent, #e0bc72, transparent);
}
.reference-home .hero-content .hero-copy {
  max-width: 610px; margin: 24px auto 32px;
  font: 600 clamp(17px, 2.5vw, 23px)/1.6 var(--sans);
  color: #080b06; text-shadow: none;
}
.reference-home .hero-content .hero-actions { justify-content: center; gap: 22px; flex-wrap: wrap; }
.reference-home .hero-content .text-link { color: #080b06; text-shadow: none; }
.reference-home .hero-note {
  position: relative; bottom: auto; left: auto; right: auto;
  max-width: none; margin: 0; padding: 0 16% 28px;
  text-align: center; background: none; color: #11170d; font-size: 12px;
}
@media (min-width: 1100px) {
  .reference-home .hero-content { padding-top: 24px; }
}
@media (max-width: 620px) {
  .reference-home .nav { width: 17vw; max-width: 79px; inset: clamp(16px, 4vw, 22px) auto auto 12px; }
  .reference-home .nav .brand-menu .page-menu-links { max-height: calc(100dvh - min(17vw, 79px) - 42px); }
  .reference-home .hero-content { padding: 10px 13% 44px; }
  .reference-home .hero-emblem-wrap { width: 84vw; margin-bottom: 30px; }
  .reference-home .hero-content h1 { font-size: clamp(35px, 10.5vw, 65px); line-height: 1.08; margin-bottom: 22px; }
  .reference-home .hero-content h1::after { margin-top: 28px; }
  .reference-home .hero-content .hero-copy { font-size: 17px; line-height: 1.5; margin: 22px auto 26px; }
  .reference-home .hero-content .hero-actions { gap: 18px; }
  .reference-home .hero-content .button { padding-inline: 18px; font-size: 14px; }
  .reference-home .hero-content .text-link { font-size: 14px; }
}
.reference-home .veteran-support {
  --readable-ink: #101d14;
  padding: clamp(64px, 8vw, 110px) clamp(24px, 7vw, 110px);
  background: linear-gradient(135deg, #eef2e5, #d6e2cc);
  color: var(--readable-ink);
}
.reference-home .veteran-support h2 {
  font-size: clamp(36px, 5vw, 64px);
  margin: 0 0 24px;
}
.reference-home .veteran-support p { max-width: 760px; margin: 0; }
@media (forced-colors: active) {
  .reference-home .nav .brand-menu > summary .stump-menu-label { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; }
}