body{background:#fff9fc}.op-wrap{width:min(1060px,calc(100% - 36px));margin:auto}.op-hero{background:linear-gradient(125deg,#fff0f6,#fce1ee 70%,#fff8fc);padding:86px 0 80px}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:800;color:#c32269}.op-hero h1{font-size:clamp(40px,6vw,74px);line-height:1.08;margin:17px 0;color:#312335}.op-hero em{font-style:normal;color:#d81b69}.op-hero p{max-width:640px;font-size:18px;color:#655663;line-height:1.7}.op-pill{display:inline-block;margin-top:16px;border-radius:50px;background:#fff;padding:11px 17px;color:#c32269;font-size:12px;font-weight:800;letter-spacing:.06em}.op-content{padding:65px 0 100px;display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}.op-intro h2,.op-form h2{font-size:32px;line-height:1.2;margin:12px 0}.op-intro p{color:#665c65;line-height:1.8}.op-facts{display:grid;gap:14px;margin-top:28px;color:#a82360;font-weight:700}.op-form{background:white;border:1px solid #f4dce8;border-radius:22px;padding:36px;box-shadow:0 20px 65px #8e426016}.op-form-head p,.op-small{color:#776b74;font-size:13px}.op-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.op-form label,.op-field{display:block;font-size:14px;font-weight:700;color:#423541}.op-form input:not([type=checkbox]),.op-form select,.op-form textarea,.multi>button{width:100%;border:1px solid #e8d9e1;border-radius:11px;padding:13px 14px;background:#fff;color:#423541;font:inherit;font-weight:400;margin-top:8px;box-sizing:border-box}.op-form input:focus,.op-form select:focus,.op-form textarea:focus,.multi>button:focus{outline:2px solid #e88bb6;outline-offset:1px}.op-field{margin-top:21px}.multi{position:relative}.multi>button{display:flex;justify-content:space-between;text-align:left;cursor:pointer}.multi-options{border:1px solid #e8d9e1;border-radius:12px;padding:12px;box-shadow:0 12px 25px #32102215;background:white;margin-top:4px;max-height:250px;overflow:auto}.multi-options label{display:flex;align-items:center;gap:9px;padding:9px 6px;font-weight:500;cursor:pointer}.multi-options input{accent-color:#d81b69}.op-agreement{background:#fff5fa;border-radius:14px;padding:18px;margin-top:25px;display:grid;gap:16px}.op-agreement label{display:flex;gap:11px;line-height:1.6;font-weight:400}.op-agreement input{accent-color:#d81b69;align-self:flex-start;margin-top:5px}.op-submit{width:100%;padding:16px;border:0;border-radius:12px;background:#d81b69;color:white;font-size:16px;font-weight:800;cursor:pointer;margin-top:14px}.op-submit:hover{background:#ad1553}.op-submit:disabled{opacity:.65;cursor:wait}#form-status{font-weight:700;font-size:14px}.op-small{line-height:1.6}@media(max-width:850px){.op-content{grid-template-columns:1fr;gap:28px}.op-hero{padding:60px 0}.op-grid{grid-template-columns:1fr}.op-form{padding:22px}.op-intro h2{font-size:28px}}
/* Approved volunteer opportunities hero artwork */
.op-hero{background:#f8d5e5 url("assets/volunteer-opportunities-hero.png") center center/cover no-repeat;aspect-ratio:1672/941;min-height:320px;padding:0;position:relative}
.op-hero-text{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;white-space:nowrap!important;border:0!important}
@media(max-width:650px){.op-hero{aspect-ratio:1.35;min-height:270px;background-position:55% center}}

/* Keep the application status pill free of decorative arrow icons. */
.op-pill::before,.op-pill::after{content:none!important;display:none!important}


/* October 2026: readable Job/Volunteer header and agreement controls. */
@media (min-width: 1101px) {
  .site-header { padding-left: 4%; padding-right: 4%; gap: 20px; }
  .site-header .brand { flex-shrink: 0; }
  .site-header .nav { gap: clamp(12px, 1.45vw, 24px); flex-wrap: nowrap; }
  .site-header .nav a { font-size: 16px; white-space: nowrap; }
  .site-header .nav .nav-join { padding: 14px 19px; }
}
/* Make both required agreement boxes large, clear, and easy to select. */
.op-agreement label { align-items: flex-start; gap: 15px; cursor: pointer; }
.op-agreement input[type="checkbox"] {
  appearance: auto;
  width: 23px;
  height: 23px;
  min-width: 23px;
  min-height: 23px;
  flex: 0 0 23px;
  margin: 3px 0 0;
  accent-color: #d81b69;
  cursor: pointer;
}
.op-agreement input[type="checkbox"]:focus-visible {
  outline: 3px solid #a82360;
  outline-offset: 3px;
}
@media (max-width: 1100px) and (min-width: 761px) {
  .site-header { padding-left: 3%; padding-right: 3%; }
  .site-header .nav { gap: 10px; }
  .site-header .nav a { font-size: 14px; white-space: nowrap; }
}

/* Mobile-only: show the complete approved artwork, no clipping. */
@media (max-width:650px) {
  .op-hero {
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:1672 / 941;
    padding:0;
    background-size:100% 100%;
    background-position:center center;
    background-repeat:no-repeat;
  }
}

/* Confirmation dialog appears only after a successful database insert. */
.op-thankyou-overlay[hidden] { display: none !important; }
.op-thankyou-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(30, 25, 36, .66); padding: 22px; overflow-y: auto; }
.op-thankyou-dialog { position: relative; width: min(100%, 510px); margin: auto; padding: 44px 38px 35px; border-radius: 24px; background: #fffafb; text-align: center; box-shadow: 0 24px 75px rgba(35, 18, 35, .24); color: #35243a; }
.op-thankyou-dialog:focus { outline: none; }
.op-thankyou-close { position: absolute; top: 12px; right: 17px; border: 0; background: transparent; color: #745e6d; font-size: 32px; line-height: 1; cursor: pointer; padding: 7px 11px; }
.op-thankyou-close:focus-visible, .op-thankyou-action:focus-visible { outline: 3px solid #d31b68; outline-offset: 3px; }
.op-thankyou-symbol { display: grid; place-items: center; width: 67px; height: 67px; margin: 0 auto 17px; border-radius: 50%; background: #fde5ef; color: #cc1c66; font-size: 36px; font-weight: 700; }
.op-thankyou-kicker { display: block; margin-bottom: 11px; font-size: 12px; font-weight: 800; letter-spacing: .22em; color: #c91d62; }
.op-thankyou-dialog h2 { margin: 0 0 18px; font-size: clamp(27px, 4.5vw, 36px); line-height: 1.15; color: #2f2235; }
.op-thankyou-dialog p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; }
.op-thankyou-dialog .op-thankyou-tagline { margin-top: 18px; font-weight: 700; color: #cc1c66; }
.op-thankyou-action { display: block; width: 100%; margin-top: 25px; padding: 15px 20px; border: 0; border-radius: 12px; background: #d31b68; color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.op-thankyou-action:hover { background: #b71759; }
@media(max-width: 520px) { .op-thankyou-dialog { padding: 40px 23px 27px; border-radius: 18px; } .op-thankyou-dialog p { font-size: 15px; } }