:root{
    --bg:#FFFFFF;
    --bg-raised:#FFFFFF;
    --bg-sunken:#FFFFFF;
    --ink:#2A2233;
    --ink-soft:#5C5068;
    --line:#E7E5E5;
    --lavender:#8874B8;
    --lavender-deep:#5A4482;
    --lavender-pale:#F0EEEE;
    --gold:#D98A3D;
    --gold-deep:#B06B26;
    --gold-soft:#F6E3C8;
    --focus:#5A4482;
    --card:#FFFFFF;
    --danger:#B3432E;
    --sky:#69B3E7;
    --sky-deep:#2E7FC1;
    --sky-pale:#E8F3FC;
  }
  /* The site defaults to the light palette above regardless of the viewer's
     phone/browser theme setting. The dark palette below is kept, unused for
     now, in case a manual light/dark toggle is added later. */
  :root[data-theme="dark"]{
    --bg:#1B1521;
    --bg-raised:#241C2C;
    --bg-sunken:#2C2236;
    --ink:#F1EAF5;
    --ink-soft:#C3B6CC;
    --line:#3A2E45;
    --lavender:#B49FE0;
    --lavender-deep:#C9B6EC;
    --lavender-pale:#33293E;
    --gold:#E8A763;
    --gold-deep:#F0BE8C;
    --gold-soft:#3A2B1C;
    --focus:#C9B6EC;
    --card:#241C2C;
    --sky:#7CC4F0;
    --sky-deep:#9ED4F5;
    --sky-pale:#1E3A52;
  }

  *{box-sizing:border-box;}
  html{ font-size:112.5%; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Mulish',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Lora',Georgia,serif;
    font-weight:700;
    letter-spacing:-0.01em;
    text-wrap:balance;
    margin:0 0 .5em;
    color:var(--ink);
  }
  p{margin:0 0 1em; line-height:1.65; color:var(--ink-soft); max-width:62ch;}
  a{color:var(--lavender-deep);}
  .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;
  }
  .skip-link{
    position:absolute; left:12px; top:-60px;
    background:var(--lavender-deep); color:#fff;
    padding:10px 16px; border-radius:8px; z-index:100;
    transition:top .15s;
    font-weight:700;
  }
  .skip-link:focus{ top:calc(env(safe-area-inset-top,0px) + 10px); }

  :focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

  /* ---- header ---- */
  header{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
    background:var(--bg); border-bottom:1px solid var(--line);
  }
  .utility-bar{ background:var(--bg-sunken); border-bottom:1px solid var(--line); }
  .utility-inner{
    max-width:1400px; margin:0 auto; padding:6px 20px;
    display:flex; justify-content:flex-end;
  }
  .text-size-adjust{ display:flex; align-items:center; gap:6px; }
  .text-size-label{
    font-family:'Mulish',sans-serif; font-weight:700; font-size:.72rem;
    text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-right:2px;
  }
  .text-size-adjust button{
    font-family:'Mulish',sans-serif; font-weight:800; color:var(--ink);
    background:var(--bg-raised); border:1px solid var(--line); border-radius:6px;
    padding:3px 9px; line-height:1.4; cursor:pointer; font-size:.78rem;
  }
  .text-size-adjust button[data-size="dec"]{ font-size:.68rem; }
  .text-size-adjust button[data-size="inc"]{ font-size:.92rem; }
  .text-size-adjust button:hover{ background:#FFFFFF; color:var(--lavender-deep); border-color:var(--lavender-deep); }
  @media (max-width:480px){ .text-size-label{ display:none; } }
  .header-inner{
    max-width:1400px; margin:0 auto; padding:12px 20px;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  }
  .brand{
    display:flex; align-items:center; gap:8px;
    font-family:'Lora',serif; font-weight:700; font-size:.82rem;
    color:var(--ink); text-decoration:none; flex:none;
  }
  .brand img{ width:26px; height:26px; object-fit:contain; flex:none; }

  .nav-toggle{
    display:none;
    margin-left:auto;
    background:var(--bg-sunken);
    border:1px solid var(--line);
    border-radius:8px;
    padding:9px 12px;
    font-weight:700;
    font-family:'Mulish',sans-serif;
    color:var(--ink);
    cursor:pointer;
  }
  nav{display:flex; gap:4px; flex-wrap:wrap; margin-left:12px;}
  @media (min-width:861px){
    .header-inner{ display:grid; grid-template-columns:1fr auto 1fr; }
    nav{ justify-self:center; margin-left:0; }
  }
  nav button, nav .nav-donate{
    font-family:'Mulish',sans-serif; font-weight:700; font-size:.88rem;
    background:none; border:1px solid transparent; color:var(--ink-soft);
    padding:8px 13px; border-radius:999px; cursor:pointer;
    transition:background .15s, color .15s;
    white-space:nowrap;
  }
  nav .nav-donate{
    display:inline-flex; align-items:center; text-decoration:none; font-weight:800;
  }
  nav button:hover{ background:#FFFFFF; color:var(--lavender-deep); text-decoration:underline; }
  nav button[aria-current="page"]{ background:var(--lavender-deep); color:#fff; }

  nav .nav-donate{
    background:var(--sky); color:#2A2233; margin-left:6px;
  }
  nav .nav-donate:hover{ background:var(--sky-deep); color:#fff; text-decoration:none; }
  @media (max-width:860px){ nav .nav-donate{ text-align:center; margin-left:0; margin-top:6px; } }

  /* ---- nav submenu (Services) ---- */
  .nav-item{ position:relative; display:inline-flex; align-items:center; }
  .submenu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--lavender-deep); border:1px solid var(--lavender-deep);
    border-radius:999px;
    padding:5px 7px; margin-left:2px; cursor:pointer; color:#FFFFFF;
    transition:background .15s, border-color .15s, transform .15s;
  }
  .submenu-toggle:hover{ background:var(--lavender); border-color:var(--lavender); color:#FFFFFF; }
  .submenu-toggle:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
  .submenu-toggle svg{ width:13px; height:13px; transition:transform .15s; }
  .submenu-toggle[aria-expanded="true"]{ background:var(--gold-deep); border-color:var(--gold-deep); }
  .submenu-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .submenu{
    position:absolute; top:calc(100% + 8px); left:0; z-index:40;
    list-style:none; margin:0; padding:7px; min-width:230px;
    background:#FFFFFF; border:2px solid var(--lavender-deep); border-radius:12px;
    box-shadow:0 14px 34px rgba(42,34,51,.26);
  }
  /* little arrow tying the panel back to the Services button */
  .submenu::before{
    content:""; position:absolute; top:-8px; left:22px;
    width:13px; height:13px; background:#FFFFFF;
    border-left:2px solid var(--lavender-deep);
    border-top:2px solid var(--lavender-deep);
    transform:rotate(45deg);
  }
  .submenu[hidden]{ display:none; }
  .submenu li{ margin:0; }
  .submenu a{
    display:block; width:100%; padding:9px 11px; border-radius:8px;
    font-family:'Mulish',sans-serif; font-weight:700; font-size:.86rem;
    color:var(--ink); text-decoration:none; white-space:nowrap;
  }
  .submenu a:hover, .submenu a:focus-visible{ background:var(--lavender-pale); color:var(--lavender-deep); }
  .submenu a[aria-current="page"]{ background:var(--lavender-deep); color:#fff; }
  @media (max-width:860px){
    /* wrap so the submenu drops onto its own full-width row instead of
       sitting beside the Services link and running off the screen */
    .nav-item{ display:flex; flex-wrap:wrap; width:100%; align-items:center; }
    .nav-item > a{ flex:1 1 auto; width:auto; }
    .submenu{
      position:static; flex:0 0 100%; width:100%; min-width:0;
      box-shadow:none; background:var(--lavender-pale);
      border:none; border-left:4px solid var(--lavender-deep); border-radius:8px;
      padding:4px 0 4px 12px; margin:4px 0 2px 16px;
    }
    .submenu::before{ display:none; }
    .submenu a{ font-size:.88rem; }
    /* width:auto overrides the generic mobile "nav button{width:100%}" rule,
       which would otherwise push the caret onto its own line */
    .submenu-toggle{ flex:none; width:auto; padding:8px 12px; margin-left:0; }
  }

  /* ---- embedded form (Google Form) ---- */
  .form-embed{ position:relative; width:100%; margin-top:4px; }
  .form-embed iframe{
    width:100%; height:1440px; border:0; display:block; border-radius:10px;
  }
  .form-placeholder{
    border:2px dashed var(--line); border-radius:12px; padding:22px 20px;
    background:var(--bg-sunken); margin-top:4px; min-height:340px;
  }
  .form-placeholder p{ margin:0 0 .6em; }
  .form-placeholder p:last-child{ margin-bottom:0; }
  .form-fallback{ font-size:.9rem; color:var(--ink-soft); margin-top:14px; }
  /* Holds space while Givebutter's script loads, so the card doesn't
     collapse and then jump when the form appears. */
  .donate-widget{ min-height:420px; margin-top:4px; }
  /* The form is sized by Google for a 640px-wide frame. Narrower than that and
     its text wraps, the form grows taller than the stated height, and the
     visitor gets a scrollbar inside the form. So the embed breaks out of the
     card's padding at every width, and the sign-up page gives the form column
     extra room. */
  .form-embed{ margin-left:-18px; margin-right:-18px; width:auto; }
  section[data-page="signup"] .grid-2{ grid-template-columns:1.18fr 1fr; }
  /* Below this the side-by-side layout would squeeze the form under 640px,
     so the form takes the full width and the notes drop beneath it. */
  @media (max-width:1300px){
    section[data-page="signup"] .grid-2{ grid-template-columns:1fr; }
  }

  .policy-date{ font-size:.85rem; color:var(--ink-soft); margin-top:1em; }

  /* The privacy policy cards are full-width, so let their text fill them
     instead of stopping at the site-wide 62-character reading measure. */
  section[data-page="privacy"] .card p,
  section[data-page="privacy"] .card li{ max-width:none; }

  .search-wrap{ position:relative; margin-left:10px; width:240px; flex:none; }
  @media (max-width:860px){ .search-wrap{ width:100%; margin-left:0; margin-top:6px; } }

  .btn-donate{
    display:inline-flex; align-items:center; justify-content:center;
    font-family:'Mulish',sans-serif; font-weight:800; font-size:.88rem;
    background:var(--sky); color:#2A2233; border:none; border-radius:999px;
    padding:9px 18px; cursor:pointer; text-decoration:none; white-space:nowrap;
  }
  .btn-donate:hover{ background:var(--sky-deep); color:#fff; }
  .search-wrap input{
    width:100%; font-family:'Mulish',sans-serif; font-size:.9rem;
    padding:9px 12px 9px 34px; border-radius:999px; border:1px solid var(--line);
    background:var(--bg-raised); color:var(--ink);
  }
  .search-icon{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    width:15px; height:15px; color:var(--sky-deep); pointer-events:none;
  }
  .search-results{
    position:absolute; top:calc(100% + 6px); left:0; right:0;
    background:var(--bg-raised); border:1px solid var(--line); border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.14);
    max-height:360px; overflow-y:auto; z-index:40;
    list-style:none; margin:0; padding:6px; display:none;
  }
  .search-results.open{ display:block; }
  .search-results li{ margin:0; }
  .search-results button{
    width:100%; text-align:left; background:none; border:none; cursor:pointer;
    padding:10px 10px; border-radius:8px; color:var(--ink); font-family:'Mulish',sans-serif;
  }
  .search-results button{ border-left:3px solid transparent; }
  .search-results button:hover, .search-results button:focus-visible{ background:#FFFFFF; border-left-color:var(--lavender-deep); }
  .search-results .result-page{
    font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--lavender-deep);
  }
  .search-results .result-title{ font-weight:700; margin:2px 0; }
  .search-results .result-snippet{ font-size:.82rem; color:var(--ink-soft); }
  .search-empty{ padding:12px 10px; color:var(--ink-soft); font-size:.88rem; }

  @media (max-width:860px){
    .nav-toggle{ display:block; }
    nav{
      display:none; flex-direction:column; width:100%; order:4;
      margin-left:0; gap:6px; padding-top:8px;
    }
    nav.open{ display:flex; }
    nav button, nav .nav-donate{ width:100%; text-align:left; }
  }

  main{ max-width:1400px; margin:0 auto; padding:0 20px 80px; }
  section.page{ padding-top:40px; }

  .eyebrow{
    font-family:'Mulish',sans-serif; font-weight:800; font-size:.72rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep);
    margin-bottom:.6em; display:block;
  }

  /* ---- hero ---- */
  .hero{
    text-align:center; padding:44px 24px; margin-top:16px;
    background:#FFFFFF; border:none; border-radius:24px;
    color:#2A2233;
  }
  .hero h1{
    font-size:clamp(1.3rem,4.3vw,2.6rem);
    max-width:none; margin-inline:auto;
    color:#2A2233;
    text-wrap:normal;
  }
  .hero .eyebrow{ color:#B06B26; }
  .bubble{
    font-family:'Fredoka',sans-serif; font-weight:700;
    color:#69B3E7;
  }
  .hero-logo{
    width:min(380px,82vw); margin:30px auto 22px;
    display:block;
  }
  .tagline{
    font-family:'Mulish',sans-serif; font-weight:900; font-size:1.15rem;
    letter-spacing:.14em; text-transform:uppercase; color:#5A4482;
    text-align:center; margin:0 auto; max-width:none; width:100%;
  }
  .tagline span{ color:#B06B26; margin-inline:.3em; }

  .lede{ font-size:1.05rem; max-width:62ch; margin-inline:auto; text-align:left; }
  .lede-wrap{ display:flex; justify-content:center; margin-top:12px; }

  .card{
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px;
    scroll-margin-top:90px;
  }
  .card.highlight{ outline:3px solid var(--gold); outline-offset:2px; }
  .card.service-card{ background:var(--sky-pale); border-color:transparent; }
  .card.resource-card{ background:#8874B8; border-color:transparent; }
  .card.card-sky{ background:var(--sky-pale); border-color:transparent; }
  .card.card-mission{ background:#8874B8; border-color:transparent; }
  /* The Mission card sits on a saturated purple, so its text is reversed to white. */
  .card.card-mission h2, .card.card-mission p{ color:#FFFFFF; }
  .card.contact-info-card{ background:var(--sky-pale); border-color:transparent; }

  .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  @media (max-width:860px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

  .stack{ display:flex; flex-direction:column; gap:20px; }

  ul.tick{ list-style:none; margin:0 0 1em; padding:0; display:flex; flex-direction:column; gap:8px; }
  /* The bullet is positioned rather than a flex item: as a flex item, any
     <strong> label inside the item became its own column and wrapped
     separately from the text that followed it. */
  ul.tick li{ position:relative; padding-left:18px; color:var(--ink-soft); line-height:1.5; }
  ul.tick li::before{
    content:""; position:absolute; left:0; top:.55em;
    width:8px; height:8px; border-radius:50%; background:var(--gold);
  }

  .tenant-card{ grid-column:1 / -1; }
  .tick-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; }
  @media (max-width:700px){ .tick-grid{ grid-template-columns:1fr; } }

  .service-card h3{ display:flex; align-items:center; gap:10px; font-size:1.1rem; }
  .service-num{
    flex:none; width:32px; height:32px; border-radius:50%;
    background:var(--sky); color:#2A2233;
    display:flex; align-items:center; justify-content:center;
    font-family:'Lora',serif; font-weight:700; font-size:.95rem;
  }
  .badge{
    display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.06em;
    text-transform:uppercase; background:var(--gold-soft); color:var(--gold-deep);
    padding:4px 10px; border-radius:999px; margin-left:8px; vertical-align:middle;
  }

  .resource-card h3{ font-size:1rem; }
  .resource-contact{
    display:flex; align-items:center; gap:8px; width:fit-content;
    font-weight:700; color:var(--sky-deep); font-size:.92rem; margin-top:10px;
    text-decoration:none;
  }
  .resource-contact::before{
    content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--sky);
  }
  a.resource-contact:hover{ text-decoration:underline; }
  /* the unlinked emails are <p>, which would otherwise carry a paragraph
     bottom margin and space unevenly against the <a> contact lines */
  p.resource-contact{ margin-bottom:0; }

  /* ---- resource cards ----
     These sit on a saturated purple, so every piece of text inside them is
     reversed to white; the default ink and sky-blue contact colours are
     unreadable on that background. */
  .h3-sub{ font-weight:600; color:var(--ink-soft); }
  .card.resource-card h3,
  .card.resource-card p,
  .card.resource-card li,
  .card.resource-card strong,
  .card.resource-card .resource-contact{ color:#FFFFFF; }
  .card.resource-card .h3-sub{ color:#E8E2F3; }
  .card.resource-card .resource-contact::before,
  .card.resource-card ul.tick li::before{ background:#FFFFFF; }
  .card.resource-card a.resource-contact:hover{ color:#FFFFFF; text-decoration:underline; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    font-family:'Mulish',sans-serif; font-weight:800; font-size:.95rem;
    background:var(--sky); color:#2A2233; border:none; border-radius:10px;
    padding:13px 22px; cursor:pointer; text-decoration:none;
  }
  .btn:hover{ background:var(--sky-deep); color:#fff; }
  .btn-ghost{ background:#FFFFFF; color:var(--lavender-deep); border:1px solid var(--lavender); }
  .btn-ghost:hover{ background:#FFFFFF; border-color:var(--lavender-deep); }
  /* same shape and colour as the Donate button */
  .btn-pill{ border-radius:999px; padding:13px 24px; }

  .quicklinks{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px; }
  @media (max-width:860px){ .quicklinks{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .quicklinks{ grid-template-columns:1fr; } }
  .quicklink{
    background:var(--bg-sunken); border:1px solid var(--line); border-radius:14px;
    padding:16px; text-align:left; cursor:pointer; font-family:'Mulish',sans-serif;
    color:var(--ink); font-weight:700; font-size:.92rem;
  }
  .quicklink:hover{ background:var(--lavender-pale); }

  /* ---- board ---- */
  .board-member{ display:flex; gap:18px; align-items:flex-start; }
  .board-photo{
    flex:none; width:84px; height:84px; border-radius:50%; object-fit:cover;
    border:3px solid var(--line);
  }
  .board-initials{
    flex:none; width:84px; height:84px; border-radius:50%;
    background:linear-gradient(135deg, var(--lavender), var(--gold));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-family:'Lora',serif; font-weight:700; font-size:1.4rem;
  }
  .board-member h3{ font-size:1.05rem; margin-bottom:2px; }
  .role{
    font-family:'Mulish',sans-serif; font-weight:800; font-size:.72rem;
    color:var(--lavender-deep); letter-spacing:.06em; text-transform:uppercase;
  }

  /* ---- forms ---- */
  form{ display:flex; flex-direction:column; gap:16px; margin-top:8px; }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field label{ font-weight:700; font-size:.88rem; color:var(--ink); }
  .field input, .field textarea, .field select{
    font-family:'Mulish',sans-serif; font-size:.95rem; padding:11px 12px;
    border-radius:8px; border:1px solid var(--line); background:var(--bg-raised); color:var(--ink);
  }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
  .req{ color:var(--danger); }
  .hint{ font-size:.8rem; color:var(--ink-soft); margin-top:-10px; }

  .confirm{
    display:none; border:2px solid var(--lavender-deep); background:#FFFFFF;
    border-radius:10px; padding:16px 18px; color:var(--ink); font-weight:700;
  }
  .confirm.show{ display:block; }
  form.submitted .form-fields{ display:none; }

  .contact-info-card p{ margin:0 0 .4em; }

  footer{
    border-top:1px solid var(--line); margin-top:20px;
    padding:28px 20px calc(40px + env(safe-area-inset-bottom,0px));
    background:var(--bg-sunken);
  }
  .footer-inner{
    max-width:1400px; margin:0 auto; display:flex; justify-content:space-between;
    gap:20px; flex-wrap:wrap; align-items:center;
  }
  .footer-inner p{ margin:0; font-size:.85rem; line-height:1.6; }
  .footer-legal{ color:var(--ink-soft); font-size:.8rem; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  }

  /* visually hidden honeypot field (spam trap — must stay in the DOM) */
  .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  .form-error{
    display:none; border:2px solid var(--danger); background:#FFFFFF;
    border-radius:10px; padding:16px 18px; color:var(--ink); font-weight:700;
  }
  .form-error.show{ display:block; }
  /* search results are links across pages now, not in-page buttons */
  .search-results a{
    display:block; width:100%; text-align:left; text-decoration:none;
    padding:10px 10px; border-radius:8px; color:var(--ink);
    font-family:'Mulish',sans-serif; border-left:3px solid transparent;
  }
  .search-results a:hover, .search-results a:focus-visible{
    background:#FFFFFF; border-left-color:var(--lavender-deep);
  }

  .footer-link{ color:var(--lavender-deep); font-size:.8rem; }
  nav a.section-active{ background:var(--lavender-pale); color:var(--lavender-deep); }

  /* .btn / .btn-ghost are anchors on some pages now — keep the button box */
  a.btn, a.btn-ghost{ text-decoration:none; }
  a.btn:hover, a.btn-ghost:hover{ text-decoration:none; }

  /* nav items are anchors now, not buttons */
  nav a{
    font-family:'Mulish',sans-serif; font-weight:700; font-size:.88rem;
    background:none; border:1px solid transparent; color:var(--ink-soft);
    padding:8px 13px; border-radius:999px; cursor:pointer; text-decoration:none;
    transition:background .15s, color .15s; white-space:nowrap;
    display:inline-flex; align-items:center;
  }
  nav a:hover{ background:#FFFFFF; color:var(--lavender-deep); text-decoration:underline; }
  nav a[aria-current="page"]{ background:var(--lavender-deep); color:#fff; }
  nav a[aria-current="page"]:hover{ color:#fff; }
  nav .nav-donate[aria-current="page"]{ background:var(--sky); color:#2A2233; }
  @media (max-width:860px){ nav a{ width:100%; text-align:left; } }