/* sponsor.html: page-specific finish, loaded after inner.css and scoped to body[data-page="sponsor"].
   Icon tiles on the cards, numbered partnership cards with the lead partnership highlighted, the enquiry form beside
   "why partner", 2027 sponsor tiers and past logos at one size. 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%}
}

/* ================= SIX WAYS TO PARTNER: numbered cards, the lead partnership carries the brand colour ================= */
body[data-page="sponsor"] #opportunities .cards{counter-reset:opp}
body[data-page="sponsor"] #opportunities .ic{counter-increment:opp}
body[data-page="sponsor"] #opportunities .ic::after{content:counter(opp,decimal-leading-zero);position:absolute;top:24px;right:24px;pointer-events:none;
  font:800 30px/1 var(--display);letter-spacing:-.04em;color:color-mix(in srgb,var(--teal) 14%,transparent);
  transition:color .45s var(--ease-out),transform .6s var(--spring)}
body[data-page="sponsor"] #opportunities .ic:hover::after{color:color-mix(in srgb,var(--teal) 55%,transparent);transform:translateY(-2px)}
body[data-page="sponsor"] #opportunities .ic .acts{padding-top:16px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
body[data-page="sponsor"] #opportunities .sp-lead{border-color:color-mix(in srgb,var(--teal) 40%,var(--line));
  background:linear-gradient(160deg,color-mix(in srgb,var(--teal) 10%,var(--surface)) 0%,var(--surface) 60%)}
body[data-page="sponsor"] #opportunities .sp-lead .xi{background:var(--teal);color:var(--teal-ink);box-shadow:0 10px 22px -10px color-mix(in srgb,var(--teal) 80%,transparent)}
body[data-page="sponsor"] #opportunities .sp-lead .acts .btn-line{background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
body[data-page="sponsor"] #opportunities .sp-lead .acts .btn-line:hover{background:color-mix(in srgb,var(--teal) 88%,var(--surface));border-color:var(--teal);color:var(--teal-ink);box-shadow:0 10px 22px -10px color-mix(in srgb,var(--teal) 90%,transparent)}
body[data-page="sponsor"] #opportunities .sp-lead::after{color:color-mix(in srgb,var(--teal) 32%,transparent)}
body[data-page="sponsor"] #opportunities .sec-head .linkbtn{margin-top:6px;font-size:14.5px}

@media (max-width:560px){
  body[data-page="sponsor"] #opportunities .ic::after{top:20px;right:20px}
}
@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,html:not(.force-motion) body[data-page="sponsor"] #opportunities .ic::after{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}

/* ================= 2027 SPONSOR TIERS: three logo slots per tier, all the same size ================= */
body[data-page="sponsor"] .tiers{display:grid;gap:26px}
body[data-page="sponsor"] .tier{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:28px;align-items:center;padding:22px 24px;border-radius:22px;
  background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 75%,transparent)}
body[data-page="sponsor"] .tier h3{margin:0;font:700 clamp(1.05rem,1.5vw,1.2rem)/1.3 var(--display);text-wrap:balance}
body[data-page="sponsor"] .tier-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
body[data-page="sponsor"] .tier-logos .logo-tile{height:110px}
body[data-page="sponsor"] .logo-tile.tbc{background:var(--paper);border-style:dashed}
body[data-page="sponsor"] .logo-tile.tbc span{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:center}
body[data-page="sponsor"] .logo-tile.tbc:hover{transform:none;box-shadow:none}

@media (max-width:900px){
  body[data-page="sponsor"] #why-partner .two{gap:28px}
  body[data-page="sponsor"] .tier{grid-template-columns:1fr;gap:14px}
}
@media (max-width:560px){
  body[data-page="sponsor"] .tier{padding:18px 16px}
  body[data-page="sponsor"] .tier-logos{gap:8px}
  body[data-page="sponsor"] .tier-logos .logo-tile{height:80px;padding:8px}
  body[data-page="sponsor"] .logo-tile.tbc span{font-size:10px;letter-spacing:.04em}
}

/* "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)}}