:root{
  --bg:#FAF7F2; --text:#111; --muted:#f6f7f8; --border:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Roboto', Arial, Helvetica, system-ui, -apple-system, Segoe UI, Inter, sans-serif; color:var(--text); background:var(--bg); line-height:1.6}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px}

.topbar{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--border)}
.topbar .wrap{display:flex; align-items:center; gap:20px; height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand img{height:40px; width:auto}
.brand-text{font-weight:700; font-size:18px}

.hamburger{margin-left:auto; display:none; background:transparent; border:0; font-size:28px; line-height:1}
.nav{display:flex; gap:18px; margin-left:auto}
.nav-link{display:block; padding:8px 6px; text-decoration:none; color:#202124; font-weight:600}
.nav-link:hover{border-bottom:2px solid #202124}

.hero{position:relative; height:360px; overflow:hidden; border-bottom:1px solid var(--border)}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.55)}
.hero-overlay{position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; padding:0 16px}
.hero-title{margin:0 0 6px; font-size:40px; font-weight:700}
.hero-subtitle{margin:0 0 14px; font-size:18px; opacity:0.95}

.below-hero-cta{background:var(--bg);}
.below-hero-cta .wrap{display:flex; justify-content:center; padding:16px 24px}
.cta{display:inline-block; padding:10px 18px; background:#fff; color:#111; text-decoration:none; font-weight:700; border-radius:999px; border:1px solid var(--border); box-shadow:0 2px 6px rgba(0,0,0,.06)}

.content{padding:28px 0}
h1,h2,h3{line-height:1.2}
.card{background:var(--muted); padding:18px; border-radius:12px}
.grid{display:grid; gap:18px}
.two{grid-template-columns:1fr 1fr}
img{max-width:100%; height:auto; display:block}
ul{padding-left:20px}

.footer{ background:#fff; margin-top:20px}
.footer-grid{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:18px; padding:24px 0}
.footer h4{margin:0 0 8px}
.copyright{border-top:1px solid var(--border); padding:12px 0}
.copyright p{margin:0; text-align:center; font-size:14px; color:#555}

@media (max-width:900px){
  .nav{display:none}
  .hamburger{display:block}
  body.nav-open .nav{display:flex; position:absolute; right:24px; top:64px; flex-direction:column; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:10px 12px; box-shadow:0 12px 30px rgba(0,0,0,.08) transition: opacity .35s ease, transform .35s ease; }
  .footer-grid{grid-template-columns:1fr}
}


/* Wrap-around logo image on Home */
.wrap-logo{float:right; width:220px; height:auto; margin:6px 0 10px 16px; border-radius:8px}
@media (max-width: 700px){
  .wrap-logo{float:right; width:220px; height:auto; margin:6px 0 10px 16px; border-radius:8px}
}





/* Footer as image banner with overlayed content */
.footer{
  position: relative;
  color: #fff;
  background-image: url('/images/banner.jpg');
  background-size: cover;
  background-position: center;
  margin-top: 0;
  border-top: none;
  min-height: 120px;
  display: flex;
  align-items: center;
}
.footer::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.footer .wrap{
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  padding: 18px 24px;
}
.footer h4{margin:0 0 8px 0; font-size:16px}
.footer p, .footer a, .footer li{color:#fff; margin:0; font-size:14px; text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer ul{list-style:none; padding:0; margin:0}
.footer .copyright{
  grid-column: 1/-1;
  text-align:center;
  margin-top: 8px;
  font-size: 13px;
  opacity: .95;
}

@media (max-width: 900px){
  .footer .wrap{
    grid-template-columns: 1fr;
    text-align: center;
  }
}


/* Bottom-centered CTA inside hero */
.hero { position: relative; }
.hero .cta{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  padding:10px 18px;
}
@media (max-width: 700px){
  .hero .cta{ bottom:16px; }
}


/* Refined, consistent spacing across site */
.content {
  padding-top: 32px; /* space below banner */
  padding-bottom: 40px; /* space above footer */
}
.content h1, .content h2, .content h3 {
  margin-top: 36px;
  margin-bottom: 18px;
}
.content p, .content ul, .content ol {
  margin-bottom: 18px;
}
.content .card {
  margin-top: 20px;
  margin-bottom: 20px;
}


/* Centered main content column with side indents */
.content > * {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.content img {
  max-width: 100%;
  height: auto;
}

/* Added for consistent banner text */
.banner, .hero, header .banner {
  color: #fff;
  text-align: center;
}
.banner h1, .banner h2, .banner p, .banner a { color: #fff; }

/* Mobile menu open state */
[data-menu] { display: none; }
[data-menu].open { display: block; }

/* Constrain logo size */
.site-logo img { max-width: 160px; height: auto; }


/* === audit patch: banner text, mobile menu open, logo sizing === */
.banner, .hero, header .banner { color: #fff; text-align: center; }
.banner h1, .banner h2, .banner p, .banner a { color: #fff; }

[data-menu] { display: none; }
[data-menu].open { display: block; }

.site-logo img { max-width: 160px; height: auto; }



/* === audit patch: float utility classes for wrapped images === */
.float-right { float: right; margin: 0 0 1rem 1rem; }
.float-left  { float: left;  margin: 0 1rem 1rem 0; }
@media (max-width: 768px) {
  .float-right, .float-left { float: none; display: block; margin: 0 auto 1rem auto; }
}
.profile-photo { max-width: 100px; height: auto; }
.rcc-logo { max-width: 180px; height: auto; }


/* --- Fine-tune additions (2025-08-12) --- */
.banner h1, .banner h2, .banner .subtitle { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }

.img-float-right { float: right; margin: 0 0 1rem 1rem; max-width: 220px; width: 35%; min-width: 160px; border-radius: 12px; }
.img-float-left  { float: left;  margin: 0 1rem 1rem 0; max-width: 220px; width: 25%; min-width: 140px; border-radius: 12px; }

/* Clear floats within content sections */
.section::after, main::after { content: ""; display: table; clear: both; }

/* Mobile nav */
[data-menu] { display: none; }
[data-menu].open { display: block; }
@media (min-width: 900px) {
  [data-menu] { display: block !important; }
}

/* Spacing polish */
main p { line-height: 1.65; margin: 0.75rem 0; }
.container { max-width: 1100px; padding: 0 1rem; margin: 0 auto; }

/* Centered logo utility */
.center-img { display: block; margin: 1rem auto; max-width: 220px; width: 40%; min-width: 160px; }


/* v2.1: map left layout for Contact */
.map-float-left { float: left; margin: 0 1rem 1rem 0; width: 40%; min-width: 260px; max-width: 360px; border-radius: 12px; }
@media (max-width: 820px) {
  .map-float-left { float: none; width: 100%; margin: 0 0 1rem 0; }
}

/* Simple buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:10px;border:1px solid #6aa77a;background:#78b487;color:#fff;text-decoration:none;line-height:1.2}
.btn:hover{filter:brightness(0.98)}
.btn-light{background:#fff;color:#2c3e33;border-color:#9ac3a3}


/* --- Calm prose theme (2025-08-12) --- */
:root{
  --bg: #f9fbf9;
  --ink: #243229;
  --muted: #596a60;
  --accent: #6aa77a;
  --accent-2: #9ac3a3;
  --card: #ffffff;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
}
body{ background: var(--bg); color: var(--ink); }

/* readable content wrapper; wrap text blocks with <div class="prose"> */
.prose{ max-width: 740px; margin: 0 auto; padding: 1rem; }
.prose p{ line-height: 1.75; font-size: 1.05rem; color: var(--ink); margin: .85rem 0; }
.prose h1{ font-size: clamp(1.8rem, 2.4vw, 2.2rem); font-weight: 600; letter-spacing: .2px; margin: .2rem 0 .7rem; color: var(--ink); }
.prose h2{ font-size: clamp(1.3rem, 1.8vw, 1.5rem); font-weight: 600; color: var(--ink); margin-top: 1.2rem; }
.prose h3{ font-weight: 600; color: var(--ink); }
.prose ul, .prose ol{ padding-left: 1.2rem; }
.prose li{ margin: .4rem 0; color: var(--ink); }

/* links: calm green, underline on hover/focus only */
.prose a{ color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.prose a:hover, .prose a:focus{ border-bottom-color: var(--accent); }

/* callout for important notes */
.callout{
  background: var(--card);
  border: 1px solid #e5efe7;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  margin: 1rem 0;
}
.callout .title{ font-weight: 600; color: var(--muted); margin-bottom: .25rem; }

/* calm blockquotes */
.prose blockquote{
  border-left: 3px solid var(--accent-2);
  background: #f2f7f3;
  padding: .8rem 1rem; margin: 1rem 0;
  color: #2f4036;
  border-radius: 0 12px 12px 0;
}

/* softer images */
.prose img{ border-radius: 12px; box-shadow: var(--shadow); }

/* gentle separators */
.prose hr{ border: 0; height: 1px; background: #e9efe9; margin: 1.2rem 0; }

/* welcoming form fields */
input, textarea, select{
  border: 1px solid #d7d7d7; border-radius: 10px; padding: 12px 14px;
}
input:focus, textarea:focus, select:focus{
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(154,195,163,.25);
  outline: none;
}

/* buttons harmony */
.btn{ border-radius: 10px; background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.btn-light{ background: #fff; color: #2c3e33; border-color: var(--accent-2); }

/* ensure floats (map/headshot) play nicely with prose */
.prose::after{ content:""; display: table; clear: both; }

/* Symbol-only callout title styling */
.callout .title{ display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; }


/* Keep highlight quote on one line on wider screens */
@media (min-width: 720px){
  .prose blockquote.one-line{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}


/* Fern bullet list inside callouts */


/* SVG leaf bullets for callouts */
.callout .fern-list{ list-style: none; padding-left: 0; margin: .4rem 0 .2rem; }
.callout .fern-list li{ position: relative; padding-left: 1.35rem; margin: .35rem 0; }
.callout .fern-list li::before{
  content: "";
  position: absolute;
  left: 0; top: .1rem;
  width: 1rem; height: 1rem;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%0A%20%20%3Cpath%20fill%3D%27%239ac3a3%27%20d%3D%27M20.8%203.2c-5.2-.6-9%201.3-11.3%203.6C7.2%209.1%206.2%2012%206%2013.4c-.1.7.6%201.3%201.3%201.2c1.4-.2%204.3-1.2%206.6-3.5c2.3-2.3%204.2-6.1%203.6-11.3zM5%2014.5c-.9.2-1.5.4-2%20.7C2.4%2015.5%202%2016%202%2016.6c0%20.7.6%201.4%201.4%201.4c.6%200%201.1-.4%201.4-1c.3-.5.5-1.1.7-2l6.9%206.9c.4.4%201%20.4%201.4%200s.4-1%200-1.4L5%2014.5z%27/%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}


/* --- Nav smoothing (2025-08-12) --- */
nav.nav{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
nav.nav .nav-link{ display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; line-height: 1; text-decoration: none; color: inherit; }
nav.nav .nav-link:hover{ text-decoration: underline; text-underline-offset: 3px; }


/* --- Nav polish (v8) --- */
.topbar{ padding-top: 10px; padding-bottom: 10px; }
nav.nav{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding: 4px 0; }
@media (min-width: 980px){
  nav.nav{ flex-wrap:nowrap; gap:14px; }
}
nav.nav .nav-link{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 8px 10px;
  line-height: 1;
  text-decoration: none;
  border-bottom: none !important;
  white-space: nowrap;
}
nav.nav .nav-link:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
  border-bottom: none !important;
}


/* --- Contact two-column (final) --- */
.contact-two-col{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 1rem;
  align-items:start;
  margin: .6rem 0 1rem;
}
@media (max-width: 900px){
  .contact-two-col{ grid-template-columns: 1fr; }
}
.info-box{
  background: #f7fbf8;
  border: 1px solid #e5efe7;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 1rem;
}
.info-box p{ margin: .6rem 0; }

.map-col .map-embed{
  width:100%;
  height: 320px;
  border:0;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.form-panel{
  background: #f7fbf8;
  border: 1px solid #e5efe7;
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 1rem;
  max-width: 840px;
  margin: 0 auto 1rem;
}
.form-panel .contact-form label{
  display:block; font-weight:600; margin:.6rem 0 .35rem;
}
.form-panel .contact-form input[type="text"],
.form-panel .contact-form input[type="email"],
.form-panel .contact-form input[type="tel"],
.form-panel .contact-form textarea{
  width:100%; padding:12px 14px; font-size:16px;
  border:1px solid #d7d7d7; border-radius:10px; box-sizing:border-box;
}
.form-panel .contact-form textarea{ min-height:140px; resize:vertical; }
.form-panel .contact-form input[type="submit"]{
  margin-top:.8rem; padding:12px 18px; font-size:16px;
  border-radius:10px; border:1px solid #6aa77a; background:#78b487; color:#fff; cursor:pointer;
}


/* Contact page centering tweaks */
.contact-page .contact-max{ max-width: 980px; margin-left:auto; margin-right:auto; }
.contact-page .container{ padding-left: 1.5rem; padding-right: 1.5rem; }

/* Ensure no double underline from any legacy border-bottom on links */
a{ border-bottom: none; }


/* Tighten bottom space under the contact form submit */
.form-panel{ margin: 0 auto .25rem; padding-bottom: .75rem; }
.form-panel .contact-form input[type="submit"]{ margin-bottom: 0; display: inline-block; }
.form-panel .contact-form > *:last-child{ margin-bottom: 0 !important; }


/* Thank You page hardening */
.thankyou-page header .btn{ display: none !important; }
.thankyou-page main .btn{ background: #78b487; border-color: #78b487; color: #fff !important; }


/* RCC logo box on Meet Aaron */
.rcc-box{
  background: var(--card);
  border: 1px solid #e5efe7;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  max-width: 360px;
  margin: 1rem auto;
  text-align: center;
}
.rcc-box img{ max-width: 120px; height: auto; display: block; margin: 0 auto .35rem; }
.rcc-box .caption{ font-size: .9rem; color: var(--muted); }


/* Button clipping fix: ensure full border radius shows */
.btn, .btn-light{
  box-sizing: border-box;
  line-height: 1.3;
  overflow: visible;
}
/* Make paragraph containers not clip inline content */
.prose p{ overflow: visible; }


/* Ensure space below CTA buttons inside prose */
.prose p:has(> a.btn), .prose p:has(> a.btn-light){
  margin-bottom: 1.2rem;
}
/* Fallback for older browsers */
.prose a.btn, .prose a.btn-light{ margin-bottom: 2px; display:inline-block; }


/* Meet Aaron photo: slightly larger on desktop */
@media (min-width: 901px){
  .profile-photo{ max-width: 140px; }
}


/* Blockquote readability on desktop */
.prose blockquote.one-line{
  white-space: normal;
  text-overflow: clip;
  display: block;
  clear: both;
}


/* Strong override: ensure the highlighted quote never truncates */
.prose blockquote.one-line{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  clear: both !important;
}


/* Strong CTA button fix */
.prose .cta-row{ 
  display:block; 
  overflow: visible !important; 
  line-height: normal; 
  padding-bottom: .3rem; 
}
.prose .cta-row > a.btn, 
.prose .cta-row > a.btn-light{
  display: inline-flex !important;
  align-items: center;
  box-sizing: border-box;
  line-height: 1.35;
  border-radius: 12px;
  overflow: visible !important;
}
/* Guard against accidental global 'display:none' */
.btn{ display: inline-block !important; }


/* Meet Aaron photo bump */
@media (min-width: 901px){
  .profile-photo{ max-width: 150px !important; }
}

/* Scoped CTA button safeguards */
.prose .cta-row{ display:block; overflow:visible !important; padding: .25rem 0 .5rem; }
.prose .cta-row a.btn, .prose .cta-row a.btn-light{
  display:inline-flex !important; align-items:center;
  box-sizing:border-box; line-height:1.35; border-radius:12px; overflow:visible !important;
}
/* Ensure parents don't clip */
.content, .wrap, .prose{ overflow:visible !important; }
/* Remove any legacy rule that hid .btn */
.btn{ display:inline-block !important; }


/* === FINAL CTA OVERRIDES (do not remove) === */
.prose .cta-row{ display:block; overflow:visible !important; padding:.25rem 0 .6rem; }
.prose .cta-row > a.btn, .prose .cta-row > a.btn-light{
  display:inline-flex !important; align-items:center; justify-content:center;
  box-sizing:border-box; line-height:1.35; border-radius:12px;
  text-decoration:none; border:1px solid var(--accent-2); padding:12px 18px;
}
.btn{ display:inline-block !important; background:#78b487; border-color:#78b487; color:#fff !important; }
.btn-light{ background:#fff !important; color:#2c3e33 !important; border-color: var(--accent-2) !important; }


/* --- Calm forest card for "My Space" section --- */
.forest-card{
  position: relative;
  border: 1px solid var(--accent-2);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(180deg, #f6fbf7 0%, #eff6f1 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  margin: 1.25rem 0 1.5rem;
  overflow: hidden;
}
.forest-card::before{
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(120,180,135,.12) 0%, rgba(120,180,135,0) 70%);
  filter: blur(2px);
  pointer-events: none;
}
.forest-card::after{
  content: "";
  position: absolute;
  bottom: -50px; left: -30px;
  width: 260px; height: 260px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(122,168,138,.10) 0%, rgba(122,168,138,0) 70%);
  filter: blur(2px);
  pointer-events: none;
}
.forest-card h2, .forest-card h3, .forest-card h4{
  margin-top: 0.2rem;
  display: flex; align-items: center; gap: .5rem;
  color: #2d3b32;
}
.forest-card h2::before, .forest-card h3::before, .forest-card h4::before{
  content: "";
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378b487' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 4C15 4 9 10 9 15c0 3 2 5 5 5 5 0 7-6 7-11 0-1-.4-3-1-5Z'/><path d='M9 15c-2-1-3-2-5-2'/></svg>");
  background-repeat: no-repeat; background-size: contain;
  opacity: .8;
}
.forest-card p{ margin: .6rem 0; }
.forest-card a.btn, .forest-card a.btn-light{ margin-top: .5rem; }
@media (max-width: 760px){
  .forest-card{ padding: .95rem 1rem; }
}


/* --- Mobile nav fix patch (2025-08-12) --- */
.topbar { position: sticky; top: 0; z-index: 300; background: var(--bg); border-bottom: 1px solid var(--border); }
.hamburger { display: none; margin-left: auto; background: transparent; border: 0; font-size: 28px; line-height: 1; }
.nav { display: flex; gap: 18px; margin-left: auto; }

@media (max-width: 900px) {
  .hamburger { display: block; }
  .nav { display: none; }
  body.nav-open .nav {
    display: flex;
    position: fixed;
    right: 16px;
    top: 64px;
    flex-direction: column;
    gap: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    z-index: 400;
   transition: opacity .35s ease, transform .35s ease; }
}


/* --- Mobile-first nav hard override (2025-08-12) --- */
/* Always define base as 'mobile' first */
.topbar { position: sticky; top: 0; z-index: 300; background: var(--bg); border-bottom: 1px solid var(--border); }

/* Base mobile: hide nav by default, show hamburger */
.nav { display: none !important; margin-left: auto; gap: 18px; }
.hamburger { display: inline-block !important; margin-left: auto; background: transparent; border: 0; font-size: 28px; line-height: 1; }

/* Open state (mobile) */
body.nav-open .nav,
.nav.open {
  display: flex !important;
  position: fixed;
  right: 16px;
  top: 64px;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  z-index: 400;
 transition: opacity .35s ease, transform .35s ease; }

/* Desktop >= 901px */
@media (min-width: 901px) {
  .hamburger { display: none !important; }
  .nav {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
  }
}


/* --- Font theme: Lora (headings) + Cabin (body) --- */
:root{
  --font-body: "Cabin", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-head: "Lora", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
body{ font-family: var(--font-body); line-height: 1.65; }
h1,h2,h3,h4,h5,h6{ font-family: var(--font-head); line-height: 1.2; }
.hero-title{ font-family: var(--font-head); }


/* === Mobile menu overlay (2025-08-13) === */
/* Screenreader-only text utility */
.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;
}

/* Lock background scroll when menu is open */
body.nav-open{ overflow:hidden; }

/* Hamburger icon construction */
.hamburger .burger{ display:inline-block; width:28px; height:22px; position:relative; }
.hamburger .line{
  position:absolute; left:0; right:0; height:2px; background: currentColor;
  transition: transform .45s ease-in-out, opacity .45s ease-in-out, top .45s ease-in-out, bottom .45s ease-in-out;
}
.hamburger .line:nth-child(1){ top:0; }
.hamburger .line:nth-child(2){ top:10px; }
.hamburger .line:nth-child(3){ bottom:0; }

/* Turn into an X when expanded */
.hamburger[aria-expanded="true"] .line:nth-child(1){ top:10px; transform:rotate(45deg); }
.hamburger[aria-expanded="true"] .line:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] .line:nth-child(3){ bottom:auto; top:10px; transform:rotate(-45deg); }

/* Mobile: full-screen vertical menu below sticky topbar */
@media (max-width: 900px){
  /* Hide nav by default; show hamburger */
  .nav{ display:none !important; }
  .hamburger{ display:inline-block !important; }

  /* When open, make nav a full-viewport panel under the topbar */
  body.nav-open .nav,
  .nav.open{
    display:flex !important;
    position:fixed;
    left:0; right:0; bottom:0;
    top:64px; /* matches .topbar height */
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    gap: 6px;
    z-index: 400;
    overflow:auto;
   transition: opacity .35s ease, transform .35s ease; }
  .nav .nav-link{
    display:block;
    padding:16px 8px;
    font-size:20px;
    font-weight:600;
    text-decoration:none;
    color:inherit;
    border-bottom:1px solid var(--border);
  }
  .nav .nav-link:last-child{ border-bottom:none; }
}

/* Desktop restores inline nav */
@media (min-width: 901px){
  .hamburger{ display:none !important; }
  .nav{
    display:flex !important; position:static !important; flex-direction:row !important;
    gap:14px; padding:0 !important; border:0 !important; box-shadow:none !important; background:transparent !important;
  }
  .nav .nav-link{ border-bottom:none; font-size:inherit; padding:8px 10px; }
}


/* === Mobile dropdown animation (2025-08-13) === */
@media (max-width: 900px){
  /* Keep the element present so transitions can run */
  .nav{
    position: fixed;
    left: 0; right: 0; bottom: 0; top: 64px; /* below sticky topbar */
    background: var(--bg);
    display: flex !important;
    flex-direction: column; align-items: stretch;
    padding: 20px; gap: 6px;
    z-index: 400; overflow: auto;

    /* start state (closed) */
    transform: translateY(-24px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* smooth drop & fade */
    transition: transform .50s cubic-bezier(.25,.8,.25,1), opacity .40s ease;
    will-change: transform, opacity;
  }

  /* open state: drop down from the top */
  body.nav-open .nav,
  .nav.open{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* === Safari-friendly sr-only (2025-08-13) === */
.hamburger .sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* === Mobile dropdown animation (Safari override) 2025-08-13b === */
@media (max-width: 900px){
  .nav{
    position: fixed !important;
    left: 0; right: 0; bottom: 0; top: 64px;
    background: #FAF7F2; /* fallback */
    background: var(--bg);
    display: flex !important;
    flex-direction: column; align-items: stretch;
    padding: 20px; gap: 6px;
    z-index: 1000; /* ensure above content/topbar */
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    /* closed state */
    transform: translate3d(0, -24px, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: transform .55s cubic-bezier(.25,.8,.25,1), opacity .45s ease;
    will-change: transform, opacity;
    contain: paint;
  }
  body.nav-open .nav,
  .nav.open{
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}


/* --- Header brand stacking fix (2025-08-14) --- */
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit }
.brand-logo { height:40px; width:auto; display:block }
.brand-text { display:flex; flex-direction:column; align-items:center; line-height:1.05; font-weight:700; font-size:18px }
.brand-text .brand-line { display:block }
@media (max-width: 600px){
  .brand-logo { height:36px }
  .brand-text { font-size:16px }
}



/* Crisis resources footer block */

.footer .footer-crisis h4{ margin:0 0 6px 0; font-size:16px }
.footer .footer-crisis ul{ margin:6px 0 0 16px }
.footer .footer-crisis li{ margin:2px 0 }


/* Footer crisis block placement (desktop: below Contact+Location, aligned right; mobile: full width) */
.footer .footer-crisis{
  grid-column: 1 / span 2; /* sit under Contact and Location columns */
  grid-row: 2;
  justify-self: end;
  background: rgba(0,0,0,0.25);
  padding: 12px 16px;
  border-radius: 10px;
  max-width: 460px;
}
@media (max-width: 900px){
  .footer .wrap{ grid-template-columns: 1fr; text-align:left; }
  .footer .footer-crisis{
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
  }
}



/* Normalize "My Space" images to equal size */
.space-photos-container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.space-photo { width: 100%; height: auto; }
@media (max-width: 800px){ .space-photos-container { grid-template-columns: 1fr; } }

.space-photo { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }

/* === RCC badge near brand === */
.rcc-badge {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 9999px;
  border: 1px solid #d0d7de;
  background: #f6f8fa;
  color: #0b3d2e;
  letter-spacing: .02em;
  margin-left: 8px;
  vertical-align: middle;
}
@media (max-width: 480px) {
  .rcc-badge { font-size: 11px; padding: 2px 6px; margin-left: 6px; }
}

/* HARDEN active nav visibility */
#primary-nav .nav-link[aria-current="page"],
#primary-nav .nav-link.active,
#primary-nav .nav-link.current {
  color: #202124 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-bottom: none !important;
  white-space: nowrap;
}