/* sponsor.html: page-specific finish, loaded after inner.css and scoped to body[data-page="sponsor"].
   Past sponsors' logos at one size, then the enquiry form beside "why partner". Colours come only from the site.css tokens. */

/* ================= CARDS: icon tile, label, title, text; actions sit on the bottom edge ================= */
body[data-page="sponsor"] .cards{gap:16px}
body[data-page="sponsor"] .ic{padding:26px 26px 24px;border-radius:20px;gap:10px}
body[data-page="sponsor"] .ic h3{font-size:clamp(1.12rem,1.5vw,1.25rem);line-height:1.25}
body[data-page="sponsor"] .ic p{line-height:1.6}
body[data-page="sponsor"] .ic .acts{margin-top:10px}
body[data-page="sponsor"] .ic .xi{width:46px;height:46px;padding:12px;margin-bottom:8px;border-radius:14px;color:var(--teal);stroke-width:1.8;
  background:color-mix(in srgb,var(--teal) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 20%,transparent);
  transition:transform .6s var(--spring),background .4s var(--ease-out),color .4s var(--ease-out),box-shadow .4s var(--ease-out)}
body[data-page="sponsor"] .ic:hover .xi{transform:rotate(-8deg) scale(1.08);background:var(--teal);color:var(--teal-ink);
  box-shadow:0 10px 22px -10px color-mix(in srgb,var(--teal) 80%,transparent)}
/* alternate the accent so a row of tiles reads as a set, not a stamp */
body[data-page="sponsor"] .cards > .ic:nth-child(even) .xi{color:var(--turmeric);background:color-mix(in srgb,var(--turmeric) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--turmeric) 24%,transparent)}
body[data-page="sponsor"] .cards > .ic:nth-child(even):hover .xi{background:var(--turmeric);color:var(--surface);box-shadow:0 10px 22px -10px color-mix(in srgb,var(--turmeric) 80%,transparent)}
body[data-page="sponsor"] .ic .acts .btn-line{padding-inline:16px}
body[data-page="sponsor"] .ic .acts .btn-line:hover{border-color:var(--teal);color:var(--teal)}

/* ================= FORMS: sentence-case labels, taller fields, a quiet footer for the action ================= */
body[data-page="sponsor"] .form{padding:32px;gap:18px;border-radius:22px}
body[data-page="sponsor"] .form label{font:600 13.5px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:8px}
body[data-page="sponsor"] .form input,body[data-page="sponsor"] .form select{min-height:48px}
body[data-page="sponsor"] .form input,body[data-page="sponsor"] .form select,body[data-page="sponsor"] .form textarea{padding:12px 14px;font-size:15px;background:var(--paper);border-color:var(--line)}
body[data-page="sponsor"] .form textarea{min-height:124px;line-height:1.55}
body[data-page="sponsor"] .form input:hover,body[data-page="sponsor"] .form select:hover,body[data-page="sponsor"] .form textarea:hover{border-color:color-mix(in srgb,var(--teal) 35%,var(--line))}
body[data-page="sponsor"] .form input::placeholder,body[data-page="sponsor"] .form textarea::placeholder{color:var(--placeholder)}
body[data-page="sponsor"] .form .actions{gap:12px 16px;margin-top:6px;padding-top:22px;border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent)}
body[data-page="sponsor"] .form .actions .btn{min-height:46px;padding-inline:24px}
body[data-page="sponsor"] .form .done{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:14px;line-height:1.5;
  background:color-mix(in srgb,var(--ok) 10%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent);animation:sp-in .5s var(--ease-out)}
body[data-page="sponsor"] .form .done::before{content:"";flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 18%,transparent)}
@keyframes sp-in{from{opacity:0;transform:translateY(6px)}}
/* a form stays still under the pointer: the shared card tilt is for reading, not typing */
@media (hover:hover) and (pointer:fine){body[data-page="sponsor"] form.card:hover,body[data-page="sponsor"] form.card:focus-within{transform:none!important}}

/* email address: a clean chip instead of a monospace run */
body[data-page="sponsor"] main .muted code{font:500 .94em/1.4 var(--sans);color:var(--ink);padding:3px 10px;border-radius:8px;overflow-wrap:anywhere;
  background:color-mix(in srgb,var(--teal) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 18%,transparent)}
body[data-page="sponsor"] .lead-p{line-height:1.65}

@media (max-width:560px){
  body[data-page="sponsor"] .ic{padding:22px 20px 20px}
  body[data-page="sponsor"] .form{padding:22px 18px;gap:16px}
  body[data-page="sponsor"] .form .actions .btn{width:100%}
}
@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) body[data-page="sponsor"] .form .done{animation:none}
  html:not(.force-motion) body[data-page="sponsor"] .ic .xi{transition:none}
  html:not(.force-motion) body[data-page="sponsor"] .ic:hover .xi{transform:none}
}

/* ================= WHY PARTNER + ENQUIRY: reasons on the left, the form on the right ================= */
body[data-page="sponsor"] #why-partner .two{gap:56px}
body[data-page="sponsor"] .sp-why{list-style:none;display:grid;gap:16px;margin:26px 0 28px;padding:0}
body[data-page="sponsor"] .sp-why li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;align-items:start;line-height:1.55;color:var(--ink-2)}
body[data-page="sponsor"] .sp-why b{color:var(--ink);font-weight:650}
body[data-page="sponsor"] .sp-why svg.li{width:42px;height:42px;padding:10px;border-radius:13px;color:var(--teal);stroke-width:1.8;
  background:color-mix(in srgb,var(--teal) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal) 20%,transparent)}
body[data-page="sponsor"] .form-h{display:grid;gap:2px;padding-bottom:14px;border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent)}
body[data-page="sponsor"] .form-h b{font:700 18px/1.3 var(--display);color:var(--ink)}
body[data-page="sponsor"] .form-h span{font-size:14px;color:var(--ink-2)}
body[data-page="sponsor"] #enquiry{scroll-margin-top:150px}

@media (max-width:900px){
  body[data-page="sponsor"] #why-partner .two{gap:28px}
}

/* "Our Sponsors Over the Years" stays on one line: its column sizes to the heading; on phones the heading scales to the width */
body[data-page="sponsor"] #sponsors .sec-head{grid-template-columns:auto minmax(0,1fr)}
body[data-page="sponsor"] #sponsors .sec-head h2{white-space:nowrap}
@media (max-width:900px){body[data-page="sponsor"] #sponsors .sec-head{grid-template-columns:1fr}}
@media (max-width:560px){body[data-page="sponsor"] #sponsors .sec-head h2{font-size:min(2rem,7vw)}}