:root{--teal:#0e6e77;--teal-dark:#0a545b;--teal-light:#e3f4f3;--bg:#f5fbfa;--coral:#e8916b;--coral-dark:#d97a4f;--purple:#7c5aa0;--purple-dark:#5f4380;--ink:#323b3c;--line:#d9ebe9;--cream:#fffdf9;--font-display:'Twinkle Star',cursive;--font-accent:'Fredoka',sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-accent),Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65}
a{color:var(--teal);font-weight:bold}
.wrap{max-width:1100px;margin:auto;padding:0 22px}
header{position:sticky;top:0;background:#f5fbfaee;backdrop-filter:blur(6px);border-bottom:1px solid var(--line);z-index:5}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:58px;height:58px;object-fit:contain}
.brand span{line-height:1.15;color:var(--teal-dark);font-weight:400;font-family:var(--font-display);font-size:24px;letter-spacing:.01em}
nav{display:flex;flex-wrap:wrap;gap:14px}
nav a{text-decoration:none;font-size:14px;color:var(--ink)}
nav a:hover{color:var(--teal)}
.hero{padding:85px 0;background:linear-gradient(135deg,var(--cream),var(--teal-light) 60%,#eaf6ee)}
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(46px,7vw,78px);line-height:1.15;color:var(--teal-dark);margin:12px 0}
.hero p{font-family:var(--font-accent);font-weight:500;color:var(--teal);font-size:22px;line-height:1.5}
.hero img{max-width:100%;max-height:330px;filter:drop-shadow(0 14px 20px rgba(10,84,91,.35));background:transparent}
.eyebrow{font-family:var(--font-accent);font-weight:600;color:var(--purple-dark);text-transform:uppercase;letter-spacing:.14em;font-size:13px}
.btn{display:inline-block;background:var(--teal);color:#fff;padding:12px 22px;border-radius:30px;text-decoration:none;margin:8px 8px 0 0;border:none;font:inherit;font-family:var(--font-accent);font-weight:500;cursor:pointer}
.btn:hover{background:var(--teal-dark)}
.btn.alt{background:var(--purple)}
.btn.alt:hover{background:var(--purple-dark)}
section{padding:65px 0}
.band{background:var(--teal-light)}
.head{text-align:center;max-width:760px;margin:0 auto 35px}
.head h2{color:var(--teal-dark);font-size:46px;margin:8px;font-family:var(--font-display);font-weight:400}
.mission-subtext{max-width:650px;margin-left:auto;margin-right:auto;text-align:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px}
.card h3{color:var(--teal-dark);margin-top:0;font-family:var(--font-display);font-weight:400;font-size:28px}
.card a{color:var(--teal)}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:10px}
.person{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.person img{width:100%;height:270px;object-fit:contain;background:var(--teal-light)}
.person div{padding:20px}
.person h3{color:var(--teal-dark);margin:0 0 6px;font-family:var(--font-display);font-weight:400;font-size:28px}
.subhead{color:var(--purple-dark);font-family:var(--font-display);font-weight:400;font-size:32px;margin:44px 0 6px}
.subhead.first{margin-top:0}
.subtext{color:#5a6465;margin:0 0 22px;max-width:640px}
.process{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 8px;text-align:center;font-weight:bold}
.step b{display:block;color:var(--purple-dark);font-size:22px}
.notice{background:#fff5df;border-left:5px solid #c7a86b;padding:16px 20px;border-radius:8px}
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 19px;margin:12px 0}
summary{font-weight:400;font-family:var(--font-display);font-size:24px;color:var(--teal-dark);cursor:pointer}
form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.field{margin-bottom:17px}
.field label{display:block;font-weight:bold;margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;padding:11px;border:1px solid #cfe0de;border-radius:9px;font:inherit;background:#fff}
.field textarea{min-height:100px}
fieldset{border:0;margin:0 0 28px;padding:0}
legend{width:100%;color:var(--purple-dark);font-family:var(--font-accent);font-size:18px;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:17px}
.check{margin:8px 0}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 18px}
.checks label{font-weight:normal;display:flex;gap:8px;align-items:center}
.checks input{width:auto}
.embed-wrap{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;overflow:hidden}
.embed-wrap iframe{width:100%;border:0;display:block}
.cta{background:var(--teal);color:#fff}
.cta .head h2{color:#fff}
.cta .head p{color:#e7f3f2}
.cta .btn{background:var(--purple)}
.cta .btn:hover{background:var(--purple-dark)}
footer{background:var(--teal-dark);color:white;padding:40px 0}
footer a{color:white}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:25px}
.social{display:inline-flex;align-items:center;gap:8px}
.social svg{flex-shrink:0}
.small{font-size:13px;opacity:.8}
@media(max-width:800px){.grid,.cards,.team,.foot{grid-template-columns:1fr 1fr}.process{grid-template-columns:repeat(3,1fr)}nav{gap:8px}.checks{grid-template-columns:1fr}}
@media(max-width:560px){.grid,.cards,.team,.foot,.process{grid-template-columns:1fr}.nav{align-items:flex-start;padding:10px 0}.hero{padding:55px 0}}
.progress{display:flex;justify-content:center;align-items:center;gap:8px;margin:0 0 30px}
.progress-dot{width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-accent);font-weight:600;font-size:14px;flex-shrink:0}
.progress-dot.active{background:var(--teal);border-color:var(--teal);color:#fff}
.progress-dot.done{background:var(--teal-light);border-color:var(--teal);color:var(--teal-dark)}
.progress-line{flex:1;max-width:60px;height:2px;background:var(--line)}
.form-step{display:none}
.form-step.active{display:block;animation:stepIn .25s ease}
@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.step-title{font-family:var(--font-display);color:var(--teal-dark);font-size:26px;margin:0 0 4px}
.step-sub{color:#5a6465;margin:0 0 22px;font-size:15px}
.wizard-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:12px}
.wizard-nav .btn.ghost{background:transparent;color:var(--teal);border:2px solid var(--teal);padding:10px 20px}
.wizard-nav .btn.ghost:hover{background:var(--teal-light)}
.wizard-nav .spacer{flex:1}
.field-error{color:var(--coral-dark);font-size:13px;margin-top:4px;display:none}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--coral-dark)}
.field.invalid .field-error{display:block}
.form-status{margin-top:18px;padding:14px 18px;border-radius:10px;font-family:var(--font-accent);display:none}
.form-status.success{display:block;background:var(--teal-light);color:var(--teal-dark)}
.form-status.error{display:block;background:#fbe4d8;color:var(--coral-dark)}
.dbdr-modal-overlay{position:fixed;inset:0;background:rgba(10,84,91,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.dbdr-modal{background:var(--cream);border-radius:14px;padding:28px 26px;max-width:420px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.25);text-align:center;font-family:var(--font-accent)}
.dbdr-modal p{color:var(--ink);font-size:17px;line-height:1.5;margin:0 0 20px}
.dbdr-modal .dbdr-modal-ok{margin:0}
.check-other-input{margin-top:6px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit}

button.progress-dot{padding:0;cursor:pointer}
button.progress-dot:hover{border-color:var(--teal)}
fieldset.invalid legend{color:var(--coral-dark)}
fieldset.invalid>.field-error{display:block}

/* Checkbox / radio alignment: keep the box on the same line as its text, everywhere */
input[type="checkbox"],input[type="radio"]{width:auto;flex:none;margin:0;padding:0;accent-color:var(--teal)}
.field input[type="checkbox"],.field input[type="radio"]{width:auto;padding:0}
label.check,.field label.check,.checks label{display:flex;align-items:flex-start;gap:10px;font-weight:normal;line-height:1.4;margin:6px 0}
label.check input[type="checkbox"],label.check input[type="radio"],.checks input[type="checkbox"]{margin-top:.2em}
.checks .field{margin:0}
.consent-note{font-size:13px;color:var(--ink);opacity:.75;margin:6px 0 0;line-height:1.4}
/* Wrap an "Other" checkbox/radio with its follow-up text box in one grid
   cell, so the text box always renders directly beneath its checkbox
   instead of auto-flowing into the next row's other column. */
.check-other-wrap{display:flex;flex-direction:column;gap:4px}
.check-other-wrap .check-other-input{margin-top:0}
/* Native checkboxes/radios ignore border-color visually, so the general
   .field.invalid rule above does nothing to them. Give them an outline ring
   and turn their label text coral so an unanswered required checkbox is
   actually visible, not just structurally marked invalid. */
.field.invalid input[type="checkbox"],.field.invalid input[type="radio"]{outline:2px solid var(--coral-dark);outline-offset:2px}
.field.invalid label.check{color:var(--coral-dark)}
.progress-bottom{margin-top:26px}
.rip-line{font-style:italic;color:var(--teal-dark);margin:2px 0 8px;line-height:1.4;text-align:center}
.rip-tribute{font-style:italic;color:var(--teal-dark);margin:0 0 10px;line-height:1.4;text-align:center}
.person img.rip-heart{width:0.6em;height:0.6em;object-fit:contain;background:none;vertical-align:middle;margin-left:3px;display:inline}