.op-hero{padding:48px 0 78px;text-align:left}
  .op-hero .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:64px;align-items:center}
  .op-hero h1{font-size:58px;max-width:560px;display:block}
  .op-hero .sub{margin:22px 0 0;max-width:500px;font-size:18px}
  .op-facts{list-style:none;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.14fr) minmax(0,1.14fr);margin:34px 0 0;padding:24px 0 0;border-top:1px solid rgba(24,21,18,.1);max-width:580px}
  .op-facts li{padding:0 16px}
  .op-facts li:first-child{padding-left:0}
  .op-facts li+li{border-left:1px solid rgba(24,21,18,.1)}
  .op-facts b{display:block;font-family:'Fraunces',serif;font-weight:300;font-size:34px;line-height:1.1;color:var(--orange);white-space:nowrap}
  .op-facts span{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:var(--mut)}
  .op-link{display:inline-block;font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1.5px solid rgba(24,21,18,.25);padding:2px 0;background:none;border-top:0;border-left:0;border-right:0;font-family:inherit;cursor:pointer}
  .op-link:hover{color:var(--orange-ink);border-color:currentColor}
  .op-hero .op-link{margin-top:28px}
  .op-anchor{display:block;position:relative;top:-110px;visibility:hidden}

  /* form card */
  .op-card{position:relative;background:#fff;border-radius:28px;padding:8px 32px 28px;box-shadow:0 30px 70px -36px rgba(24,21,18,.42)}
  .op-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--off);border-radius:100px;padding:5px;margin:22px 0 24px}
  .op-tabs button{appearance:none;-webkit-appearance:none;border:0;background:transparent;border-radius:100px;padding:11px 10px;font-family:inherit;font-size:14px;font-weight:600;color:var(--mut);cursor:pointer;transition:background .25s ease,color .25s ease,box-shadow .25s ease}
  .op-tabs button:hover{color:var(--ink)}
  .op-tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 6px 16px -10px rgba(24,21,18,.45)}
  .op-tabs button:focus-visible{outline:2px solid var(--orange-ink);outline-offset:2px}
  .op-fh{font-family:'Fraunces',serif;font-weight:400;font-size:26px;line-height:1.2}
  .op-fs{color:var(--mut);font-size:14.5px;margin:6px 0 20px}
  .op-form .fld{margin-bottom:14px}
  .op-form .fld label,.op-chips legend{display:block;font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;color:var(--ink)}
  .op-form .fld input,.op-form .fld select,.op-form .fld textarea{padding:12px 16px;border-radius:14px;font-size:15px}
  .op-form .fld textarea{min-height:84px}
  .op-form .fld select:invalid{color:#8a8279}
  .op-form .fld select option{color:var(--ink)}
  .op-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  .op-chips{border:0;margin:2px 0 18px;padding:0;min-width:0}
  .op-chipset .wpcf7-checkbox{display:flex;flex-wrap:wrap;gap:8px}
  .op-chipset .wpcf7-list-item{display:block;margin:0}
  .op-chips label{position:relative;cursor:pointer}
  .op-chips input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
  .op-chips .wpcf7-list-item-label{display:inline-flex;align-items:center;gap:7px;border:1.5px solid #ddd6cc;border-radius:100px;padding:8px 14px;font-size:13.5px;font-weight:500;background:#fff;transition:border-color .2s,background .2s,color .2s}
  .op-chips .wpcf7-list-item-label::before{content:'';width:7px;height:7px;border-radius:50%;background:#ddd6cc;transition:background .2s}
  .op-chips input:checked+.wpcf7-list-item-label{border-color:var(--orange);background:#FFF1E8;color:var(--orange-ink)}
  .op-chips input:checked+.wpcf7-list-item-label::before{background:var(--orange)}
  .op-chips input:focus-visible+.wpcf7-list-item-label{outline:2px solid var(--orange-ink);outline-offset:2px}
  .op-submit{display:block;width:100%;text-align:center;border:0;cursor:pointer;font-family:inherit;margin-top:6px}
  .op-note{font-size:12px;color:var(--mut);text-align:center;margin-top:12px}
  .op-note a{color:var(--orange-ink)}
  .op-done{text-align:center;padding:40px 4px 12px;outline:none}
  .op-done .tick{width:64px;height:64px;border-radius:50%;background:#E7F4EC;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
  .op-done h2{font-size:32px}
  .op-done>p{color:var(--mut);margin-top:8px}
  .op-done ol{list-style:none;text-align:left;max-width:330px;margin:24px auto 0;padding:0;counter-reset:dn}
  .op-done li{counter-increment:dn;position:relative;padding:10px 0 10px 40px;font-size:14.5px;border-top:1px solid #F1E9E0}
  .op-done li::before{content:counter(dn);position:absolute;left:0;top:8px;width:27px;height:27px;border-radius:50%;background:var(--cream);color:var(--orange-ink);font-family:'Fraunces',serif;font-size:13px;display:flex;align-items:center;justify-content:center}
  .op-done .op-link{margin-top:22px}

  /* charity-side photos */
  section.op-photos{padding:0 0 30px}
  .op-mosaic{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:262px 262px;gap:18px}
  .op-ph{position:relative;margin:0;border-radius:28px;overflow:hidden;background:#e9e4dc;box-shadow:0 24px 60px -34px rgba(24,21,18,.45)}
  .op-ph img{display:block;width:100%;height:100%;object-fit:cover}
  .op-a{grid-row:1 / span 2}
  .op-a img{object-position:50% 46%}
  .op-b img{object-position:50% 58%}
  .op-c img{object-position:50% 40%}
  .op-ph figcaption{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.95);border-radius:100px;padding:4px 15px 5px;font-family:'Caveat',cursive;font-weight:600;font-size:21px;line-height:1.15;color:var(--orange-deep);box-shadow:0 8px 20px -12px rgba(24,21,18,.45);white-space:nowrap}

  /* how it works: illustrated tiles */
  section.op-how{padding:92px 0 40px}
  .op-how .sechead{margin-bottom:56px}
  .op-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px}
  .op-tile{padding:14px 14px 24px;display:flex;flex-direction:column}
  .op-tile .scrib{z-index:3}
  .op-art{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/10;margin-bottom:22px}
  .op-art svg{display:block;width:100%;height:100%}
  .op-art.t1{background:#EAF1F4}.op-art.t2{background:#F5E9D8}.op-art.t3{background:#FCE6D4}
  .op-tile h3,.op-tile>p,.op-tile .facts{padding:0 14px}
  .op-tile h3{margin-bottom:8px}
  .op-tile>p{font-size:14.5px;color:var(--mut)}
  .op-tile .facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:16px}
  .op-tile .facts li{font-size:12px;font-weight:600;color:#5a524a;background:var(--off);border-radius:100px;padding:6px 12px 6px 10px;display:inline-flex;align-items:center;gap:7px;line-height:1.3}
  .op-tile .facts li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
  .op-plus{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:40px auto 0;max-width:820px;text-align:center;font-size:15px;color:var(--mut)}
  .op-plus b{font-family:'Caveat',cursive;font-weight:700;font-size:23px;color:var(--orange-deep);transform:rotate(-4deg);display:inline-block}

  /* motion inside the illustrations - CSS only, off for reduced motion */
  @keyframes opbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .op-ill .op-bob{animation:opbob 3.4s ease-in-out infinite}
  .op-ill .b2{animation-delay:-.9s}.op-ill .b3{animation-delay:-1.8s}
  @keyframes oppin{0%,100%{transform:translateY(0)}45%{transform:translateY(-5px)}}
  .op-ill .op-pin{animation:oppin 2.4s ease-in-out infinite}
  .op-ill .p2{animation-delay:-.8s}.op-ill .p3{animation-delay:-1.6s}
  @keyframes opdash{to{stroke-dashoffset:-14}}
  .op-ill .op-flow path{animation:opdash 1.3s linear infinite}
  @keyframes opchk{0%,12%{opacity:0;transform:scale(.3)}20%,84%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(.3)}}
  .op-ill .op-chk{transform-box:fill-box;transform-origin:50% 50%;animation:opchk 5.2s ease-out infinite both}
  .op-ill .k2{animation-delay:.6s}.op-ill .k3{animation-delay:1.2s}
  @keyframes opdrop{0%,6%{opacity:0;transform:translateY(-30px)}16%{opacity:1;transform:translateY(0)}21%{transform:translateY(-5px)}26%,86%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(0)}}
  .op-ill .op-drop{animation:opdrop 5.6s ease-in-out infinite both}
  .op-ill .d2{animation-delay:.45s}.op-ill .d3{animation-delay:.9s}
  @keyframes opswing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
  .op-ill .op-swing{transform-box:fill-box;transform-origin:50% 0%;animation:opswing 3s ease-in-out infinite}
  @keyframes oprise{0%{opacity:0;transform:translateY(10px)}25%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}
  .op-ill .op-rise{animation:oprise 3.6s ease-out infinite both}
  .op-ill .r2{animation-delay:1.2s}.op-ill .r3{animation-delay:2.4s}
  @keyframes opding{0%,58%,100%{opacity:0;transform:translateY(5px) scale(.7)}66%,92%{opacity:1;transform:none}}
  .op-ill .op-ding{transform-box:fill-box;transform-origin:20% 100%;animation:opding 3.9s ease-out infinite both}
  .op-ill .g2{animation-delay:1.3s}.op-ill .g3{animation-delay:2.6s}
  @keyframes oppop{0%,8%{opacity:0;transform:translateY(-12px)}16%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-12px)}}
  .op-ill .op-pop{animation:oppop 5.2s ease-in-out infinite both}
  @media(prefers-reduced-motion:reduce){.op-ill *{animation:none!important}}

  /* closing band */
  .op-cta{padding-top:90px}
  .op-cta h2{max-width:700px}
  .op-cta .op-ctas{display:flex;flex-direction:column;align-items:center;gap:18px}

  @media(max-width:1100px){
    .op-tiles{gap:28px 18px}
    .op-tile{padding:12px 12px 22px}
    .op-tile h3,.op-tile>p,.op-tile .facts{padding:0 8px}
  }
  @media(max-width:980px){
    .op-hero{padding:40px 0 64px}
    .op-hero .wrap{grid-template-columns:1fr;gap:40px}
    .op-hero h1{font-size:44px;max-width:640px}
    .op-hero .sub,.op-facts{max-width:620px}
    .op-card{max-width:620px}
    .op-mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto}
    .op-a{grid-column:1 / -1;grid-row:auto;aspect-ratio:3/2}
    .op-b,.op-c{aspect-ratio:1/1}
    section.op-how{padding:76px 0 30px}
    .op-tiles{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto;gap:34px}
    .op-tile{padding:14px 14px 24px}
    .op-tile h3,.op-tile>p,.op-tile .facts{padding:0 14px}
  }
  @media(max-width:600px){
    .op-hero{padding:30px 0 56px}
    .op-hero h1{font-size:38px}
    .op-hero .sub{font-size:16.5px}
    .op-facts{grid-template-columns:1fr;margin-top:26px;padding-top:0}
    .op-facts li,.op-facts li:first-child{display:grid;grid-template-columns:124px 1fr;gap:10px;align-items:center;padding:13px 0}
    .op-facts li+li{border-left:0;border-top:1px solid rgba(24,21,18,.1)}
    .op-facts b{font-size:24px}
    .op-facts span{margin:0;font-size:13px}
    .op-card{padding:4px 18px 22px;border-radius:24px}
    .op-tabs{margin:18px 0 20px}
    .op-tabs button{font-size:12.5px;padding:10px 4px;letter-spacing:-.01em}
    .op-fh{font-size:23px}
    .op-row{grid-template-columns:1fr}
    .op-mosaic{gap:10px;margin:0 -16px}
    .op-ph{border-radius:20px}
    .op-ph figcaption{left:10px;bottom:10px;font-size:15.5px;padding:2px 10px 3px}
    section.op-how{padding:64px 0 20px}
    .op-cta{padding-top:70px}
    .op-how .sechead{margin-bottom:40px}
    .op-tiles{gap:30px}
    .op-plus{margin-top:30px;font-size:14.5px}
  }