:root{
    --canvas: #FAF8F2;
    --canvas-soft: #F1EEE4;
    --canvas-cool: #EBF1F4;
    --ink: #24262A;
    --ink-soft: #565A5E;
    --teal: #4C7A8C;
    --teal-deep: #2B5164;
    --sky: #8CA6B4;
    --amber: #BE7A34;
    --line: #DBD5C4;
    --line-cool: #D2DFE4;
    --white: #FFFFFF;

    --serif: 'Fraunces', serif;
    --sans: 'Work Sans', sans-serif;

    --max: 1180px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width: 100%; display: block; }
  a{ color: inherit; }

  .wrap{
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 32px;
  }

  .eyebrow{
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal-deep);
  }

  h1, h2, h3{
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.12;
    margin: 0;
    color: var(--ink);
  }

  p{ margin: 0; }

  /* focus states */
  a:focus-visible, button:focus-visible{
    outline: 2px solid var(--teal);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition: none !important; }
    html{ scroll-behavior: auto; }
  }

  /* ---------- nav ---------- */
  header.site-nav{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 248, 242, 0.97);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    max-width: var(--max);
    margin: 0 auto;
  }
  .nav-mark{
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }
  .nav-mark img{ height: 42px; width: auto; }
  .nav-mark span{
    font-family: var(--serif);
    font-size: 17px;
    letter-spacing: 0.02em;
    color: var(--ink);
  }
  @media (max-width: 420px){
    .nav-mark span{ display: none; }
    .nav-right{ gap: 14px; }
    .nav-cta{ padding: 9px 16px; font-size: 13px; }
  }
  .nav-right{
    display: flex;
    align-items: center;
    gap: 26px;
  }
  .nav-links{
    display: flex;
    align-items: center;
    gap: 34px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-links a{
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    transition: color 0.2s ease;
  }
  .nav-links a:hover{ color: var(--teal-deep); }
  .btn{
    display: inline-block;
    text-decoration: none;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    padding: 11px 22px;
    border-radius: 3px;
    transition: all 0.2s ease;
  }
  .btn-primary{
    background: var(--teal-deep);
    color: var(--white);
  }
  .btn-primary:hover{ background: var(--ink); }
  .btn-ghost{
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
  }
  .btn-ghost:hover{ background: var(--ink); color: var(--white); }

  .menu-toggle{
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
  }
  .menu-toggle span{
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    margin: 5px 0;
  }
  @media (min-width: 800px){ .menu-toggle{ display: none; } }
  .nav-links{ display: none; }
  @media (min-width: 800px){ .nav-links{ display: flex; } }
  .nav-links.open{ display: flex; }
  @media (max-width: 799px){
    .nav-links.open{
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: var(--canvas);
      flex-direction: column;
      align-items: flex-start;
      padding: 20px 32px 28px;
      border-bottom: 1px solid var(--line);
      gap: 18px;
    }
  }

  /* ---------- hero ---------- */
  .hero{
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }
  .hero-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
  }
  .hero-scrim{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,22,25,0.42) 0%, rgba(20,22,25,0.30) 32%, rgba(20,22,25,0.86) 100%);
  }
  .hero-content{
    position: relative;
    z-index: 2;
    color: var(--white);
    padding: 0 32px 84px;
    max-width: var(--max);
    margin: 0 auto;
    width: 100%;
  }
  .hero-content .eyebrow{ color: #F1EDE0; text-shadow: 0 1px 12px rgba(0,0,0,0.45); }
  .hero-content h1{
    color: var(--white);
    font-size: clamp(40px, 7vw, 76px);
    max-width: 820px;
    margin-top: 14px;
    font-weight: 400;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  }
  .hero-content h1 em{ font-style: italic; color: #F0E4C6; }
  .hero-sub{
    margin-top: 22px;
    max-width: 520px;
    font-size: 17px;
    color: #F4F2E9;
    font-weight: 300;
    text-shadow: 0 1px 14px rgba(0,0,0,0.4);
  }
  .hero-actions{
    margin-top: 34px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .hero-actions .btn-ghost{
    border-color: rgba(255,255,255,0.6);
    color: var(--white);
  }
  .hero-actions .btn-ghost:hover{ background: var(--white); color: var(--ink); }

  /* ---------- sections ---------- */
  section{ padding: 96px 0; }
  .section-head{
    max-width: 640px;
    margin-bottom: 48px;
  }
  .section-head h2{
    font-size: clamp(30px, 4vw, 44px);
    margin-top: 12px;
  }
  .lede{
    font-size: 18px;
    color: var(--ink-soft);
    font-weight: 300;
    margin-top: 18px;
    line-height: 1.7;
  }

  .placeholder-note{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--amber);
    background: #FBF3E2;
    border: 1px dashed #E0C384;
    padding: 5px 10px;
    border-radius: 3px;
    margin-top: 14px;
  }

  /* ---------- story (medallion) ---------- */
  .story{
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px;
    align-items: start;
  }
  @media (min-width: 880px){
    .story{ grid-template-columns: 0.85fr 1fr; }
  }
  .medallion-wrap{
    position: relative;
    max-width: 420px;
    margin: 0 auto;
  }
  .medallion-ring{
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1/1;
    border: 1px solid var(--line);
    padding: 14px;
  }
  .medallion-ring img{
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .medallion-caption{
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: var(--ink-soft);
    font-style: italic;
    font-family: var(--serif);
  }
  .story-body p + p{ margin-top: 16px; }
  .story-body p{
    color: var(--ink-soft);
    font-size: 16.5px;
    font-weight: 300;
    line-height: 1.75;
  }

  .story-accordion{
    margin-top: 26px;
    border-top: 1px solid var(--line);
  }
  .story-accordion summary{
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    color: var(--teal-deep);
    -webkit-tap-highlight-color: transparent;
  }
  .story-accordion summary::-webkit-details-marker{ display: none; }
  .story-accordion summary svg{
    width: 15px; height: 15px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
  }
  .story-accordion[open] summary svg{ transform: rotate(180deg); }
  .story-accordion summary:hover{ color: var(--ink); }
  .accordion-body{
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
  }
  .accordion-body p{
    color: var(--ink-soft);
    font-size: 15.5px;
    font-weight: 300;
    line-height: 1.8;
  }
  .accordion-body p + p{ margin-top: 16px; }
  @media (prefers-reduced-motion: no-preference){
    .story-accordion[open] .accordion-body{
      animation: accordionIn 0.28s ease;
    }
  }
  @keyframes accordionIn{
    from{ opacity: 0; transform: translateY(-4px); }
    to{ opacity: 1; transform: translateY(0); }
  }

  /* ---------- leadership ---------- */
  .leadership{ background: var(--canvas-soft); }
  .leadership-body{ max-width: 680px; }
  .leadership-body p{
    font-size: 17px;
    color: var(--ink-soft);
    font-weight: 300;
    line-height: 1.75;
  }
  .leadership-body p + p{ margin-top: 20px; }
  .leadership-body a{
    color: var(--teal-deep);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    transition: border-color 0.2s ease;
  }
  .leadership-body a:hover{ border-color: var(--teal-deep); }

  /* ---------- vision ---------- */
  /* plain canvas so it alternates with the tinted leadership section above;
     cards match the section so only the hairline grid reads */
  .vision{ background: var(--canvas); }
  .vision .value-card{ background: var(--canvas); }
  /* ---------- vision & mission ---------- */
  .vm-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 44px;
  }
  @media (min-width: 780px){
    .vm-grid{ grid-template-columns: 1fr 1fr; gap: 56px; }
  }
  .vm-block{
    border-left: 2px solid var(--teal);
    padding-left: 24px;
  }
  .vm-label{
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-deep);
    margin: 0 0 12px;
  }
  .vm-statement{
    font-family: var(--serif);
    font-size: clamp(19px, 2vw, 22px);
    font-weight: 400;
    line-height: 1.55;
    color: var(--ink);
  }

  .value-grid{
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  @media (min-width: 780px){
    .value-grid{ grid-template-columns: repeat(4, 1fr); }
    .value-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
  }
  .value-card{
    background: var(--canvas-soft);
    padding: 32px 26px;
  }
  .value-card .mark{
    width: 30px; height: 30px;
    margin-bottom: 18px;
  }
  .value-card h3{
    font-size: 19px;
    font-weight: 500;
  }
  .value-card p{
    margin-top: 10px;
    font-size: 14.5px;
    color: var(--ink-soft);
    font-weight: 300;
    line-height: 1.6;
  }

  /* ---------- ahead ---------- */
  /* the page's only cool ground: separates this section from the warm
     neutrals above and below, and promotes its teal accent to a background */
  .ahead{
    background: var(--canvas-cool);
  }
  .ahead .value-grid{
    background: var(--line-cool);
    border-color: var(--line-cool);
  }
  .ahead .value-card{ background: var(--white); }
  .ahead-q{
    max-width: 660px;
    border-left: 2px solid var(--teal);
    padding-left: 24px;
  }
  .ahead-q h3{
    font-size: clamp(21px, 2.2vw, 26px);
    line-height: 1.3;
  }
  .ahead-q p{
    margin-top: 16px;
    font-family: var(--serif);
    font-size: clamp(18px, 1.9vw, 21px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink);
  }
  .ahead-q blockquote{
    margin: 14px 0 0;
    font-family: var(--serif);
    font-size: clamp(20px, 2.1vw, 24px);
    font-style: italic;
    line-height: 1.45;
    color: var(--teal-deep);
  }
  /* question hugs the tiles it introduces; closing question stands apart */
  .ahead-q + .value-grid{ margin-top: 28px; }
  .value-grid + .ahead-q{ margin-top: 48px; }
  .ahead-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--teal-deep);
    white-space: nowrap;
  }
  .ahead-link svg{ width: 16px; height: 16px; transition: transform 0.2s ease; }
  .ahead-link:hover svg{ transform: translate(3px, -3px); }

  /* ---------- give ---------- */
  .give{
    text-align: left;
  }
  .give-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    align-items: start;
    margin-top: 8px;
  }
  @media (min-width: 900px){
    .give-grid{ grid-template-columns: 1fr 1fr; }
  }
  .give-embed{
    width: 100%;
    min-width: 0;
  }

  .ways-list{
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .ways-list li{
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
  }
  .ways-list li:last-child{ border-bottom: none; padding-bottom: 0; }
  .ways-num{
    font-family: var(--serif);
    font-style: italic;
    font-size: 20px;
    color: var(--sky);
    min-width: 28px;
  }
  .ways-list h3{ font-size: 16.5px; font-weight: 500; }
  .ways-list p{
    margin-top: 6px;
    font-size: 14.5px;
    color: var(--ink-soft);
    font-weight: 300;
    line-height: 1.6;
  }

  /* ---------- contact ---------- */
  .contact{ background: var(--canvas-soft); }
  /* Single column at every width. Side by side, 72px of email content sat next
     to a 280px form card, and the card's internal padding pushed its title below
     the "Email us" label — two columns that never shared a baseline. Stacked,
     everything lines up on the section's left edge. */
  .contact-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
    margin-top: 8px;
  }
  .contact-label{
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-deep);
    margin-bottom: 14px;
  }
  .contact-email{
    display: inline-block;
    font-family: var(--serif);
    font-size: clamp(19px, 2.1vw, 25px);
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--teal);
    padding-bottom: 3px;
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .contact-email:hover{ color: var(--teal-deep); border-color: var(--teal-deep); }
  .contact-embed{ width: 100%; max-width: 560px; min-width: 0; }
  /* Zeffy renders the form as a card with 16px of internal padding, so its title,
     input and button sat 16px right of everything else in the section. Pull the
     embed out by that much to line its contents up with the column edge.
     !important because Zeffy's own stylesheet sets these. NOTE: this assumes the
     form's background is set to --canvas-soft in Zeffy; otherwise the card itself
     visibly overhangs the column by 16px on each side. */
  .contact-embed > [data-zeffy-embed],
  .contact-embed > [data-zeffy-embed-fallback]{
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;
  }
  .contact-embed > [data-zeffy-embed] > iframe{ width: 100% !important; }

  /* ---------- footer ---------- */
  footer{
    background: var(--teal-deep);
    color: #EAE7DB;
    padding: 72px 0 36px;
  }
  .footer-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: start;
  }
  @media (min-width: 780px){
    .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr; }
  }
  .footer-mark img{ width: clamp(140px, 14vw, 260px); height: auto; margin: 0 0 14px; display: block; }
  .footer-mark p{
    font-size: 14px;
    color: #C9D0BF;
    max-width: 320px;
    font-weight: 300;
    line-height: 1.7;
  }
  footer h4{
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #B9C2A9;
    margin: 0 0 16px;
  }
  footer ul{ list-style: none; margin: 0; padding: 0; }
  footer ul li + li{ margin-top: 10px; }
  footer a{
    text-decoration: none;
    color: #EAE7DB;
    font-size: 14.5px;
    opacity: 0.92;
  }
  footer a:hover{ opacity: 1; text-decoration: underline; }
  .footer-bottom{
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.14);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    color: #A9B39A;
  }

  /* ---------- doc page (beliefs) ---------- */
  .doc-page{ padding-top: 72px; }
  .doc{ max-width: 720px; }
  .doc p{
    font-size: 17px;
    color: var(--ink-soft);
    font-weight: 300;
    line-height: 1.8;
  }
  .doc p + p{ margin-top: 20px; }
  .doc h2{
    font-size: clamp(23px, 2.5vw, 29px);
    margin-top: 60px;
  }
  .doc h2 + p{ margin-top: 20px; }
  .doc a{
    color: var(--teal-deep);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    transition: border-color 0.2s ease;
  }
  .doc a:hover{ border-color: var(--teal-deep); }
  .doc-list{
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
  }
  .doc-list li{
    border-left: 2px solid var(--teal);
    padding-left: 22px;
  }
  .doc-list li + li{ margin-top: 26px; }
  .doc-list .term{
    display: block;
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 7px;
  }
  .doc-list p{ font-size: 16px; line-height: 1.75; }
  .doc-note{
    margin-top: 44px;
    padding: 22px 26px;
    background: var(--canvas-soft);
    border-left: 2px solid var(--sky);
  }
  .doc-note p{
    font-size: 15.5px;
    font-style: italic;
    line-height: 1.75;
  }
  /* needs .doc p to outrank the generic .doc p rule above */
  .doc p.doc-close{
    margin-top: 44px;
    font-family: var(--serif);
    font-size: clamp(20px, 2.1vw, 24px);
    color: var(--ink);
    line-height: 1.4;
  }

  /* ---------- 404 ---------- */
  .error-page{ padding-top: 120px; padding-bottom: 150px; }
  .error-actions{
    margin-top: 34px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }

  /* ---------- scripture panels ---------- */
  /* Verse text is baked into data-verse by tools/fetch-verses.py; the panel is
     built by the script on beliefs.html so it is a real element (screen readers
     cannot reliably reach ::after content) and can hold a "read in context"
     link. The anchor stays a working link if the script never runs.
     The panel is a child of .doc and positioned from the host paragraph's
     offset, so it is bounded by the text column and cannot overflow at any
     width. It opens downward, clearing the sticky header. */
  .doc{ position: relative; }
  .verse-panel{
    position: absolute;
    z-index: 60;
    padding: 13px 15px;
    background: var(--ink);
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(20, 22, 25, 0.20);
  }
  .verse-panel[hidden]{ display: none; }
  .doc .verse-panel p{
    margin: 0;
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.55;
    color: #F4F2E9;
  }
  .doc .verse-panel a{
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--sky);
    text-decoration: none;
    border-bottom: 1px solid rgba(140, 166, 180, 0.45);
  }
  .doc .verse-panel a:hover{ color: var(--white); border-bottom-color: var(--white); }
  .doc a.ref[aria-expanded="true"]{ color: var(--ink); border-bottom-color: var(--ink); }

  /* needs .doc p to outrank the generic .doc p rule above, same as .doc-close */
  .doc p.doc-credit{
    margin-top: 56px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--ink-soft);
    font-weight: 300;
    line-height: 1.65;
  }