/* ---------- lead form: one form for the academy page (dialog) and programme pages ---------- */
:root{--field:#858c86;--err:#b42318}
.leadbox{margin-top:40px;padding:clamp(18px,3vw,30px);background:var(--paper);border:1px solid var(--line);border-radius:4px;max-width:760px}
.lf{display:flex;flex-direction:column;gap:20px}
.lf[hidden],.lf-done[hidden],.lf-set[hidden]{display:none}
.lf-title{font:800 clamp(24px,2.6vw,30px)/1.1 var(--head);letter-spacing:-.03em;margin:0;max-width:22em}
.lf-title:focus{outline:none}
.lf-intro{margin:-12px 0 0;color:var(--mute);font-size:15px}
.lf-field{display:flex;flex-direction:column;gap:6px;font:600 15px/1.3 var(--body);min-width:0}
.lf-field>label{font:600 15px/1.3 var(--body)}
.lf .req,.lf .opt{font-weight:400;color:var(--mute)}
.lf input:not([type=radio]):not([type=checkbox]),.lf select,.lf textarea{display:block;width:100%;min-height:48px;padding:11px 14px;font:400 16px/1.4 var(--body);color:var(--court);background:#fff;border:1px solid var(--field);border-radius:6px;margin:0}
.lf select{appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230f1512' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;cursor:pointer;text-overflow:ellipsis}
.lf textarea{resize:vertical;min-height:96px}
.lf input::placeholder,.lf textarea::placeholder{color:#767c77}
.lf input:focus-visible,.lf select:focus-visible,.lf textarea:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.lf [aria-invalid=true]{border-color:var(--err)!important;box-shadow:0 0 0 1px var(--err)}
.lf-ferr{margin:0;color:var(--err);font:500 14px/1.4 var(--body)}.lf-ferr:empty{display:none}
.lf-row2{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}
@media(max-width:560px){.lf-row2{grid-template-columns:1fr}}
.lf-set{border:0;margin:0;padding:0;min-width:0}
.lf-set legend{font:600 15px/1.3 var(--body);padding:0;margin:0 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;margin:0}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--field);border-radius:999px;background:#fff;color:var(--court);font:500 15px/1.2 var(--body);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background-color .15s,border-color .15s,color .15s}
.chip:hover span{border-color:var(--court)}
.chip input:checked+span{background:var(--court);border-color:var(--court);color:#fff}
.chip input:checked+span:before{content:"";flex:none;width:11px;height:6px;border-left:2px solid var(--ball);border-bottom:2px solid var(--ball);transform:rotate(-45deg) translateY(-2px)}
.chip input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.lf-whorow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px}
.lf-age{display:flex;flex-direction:column;gap:6px;font:400 14px/1.3 var(--body);color:var(--mute);width:190px;max-width:100%}
.lf-or{color:var(--mute);min-height:48px;display:inline-flex;align-items:center}
.lf-sub{display:flex;flex-direction:column;gap:6px;margin-top:14px;font:400 14px/1.3 var(--body);color:var(--mute);max-width:440px}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf-err{margin:0;color:var(--err);font:500 15px/1.45 var(--body)}.lf-err:empty{display:none}
.lf-send,.lf-back{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:52px;padding:0 28px;background:var(--ball);color:var(--court);border:0;border-radius:999px;font:600 16px var(--body);text-decoration:none;cursor:pointer;touch-action:manipulation}
.lf-send:hover,.lf-back:hover{background:#e9ef3a}
.lf-send:disabled{opacity:.6;cursor:progress}
.lf-again{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;background:none;border:1px solid var(--court);border-radius:999px;font:500 16px var(--body);color:var(--court);cursor:pointer}
.lf-again:hover{background:var(--court);color:#fff}
.lf-send:focus-visible,.lf-back:focus-visible,.lf-again:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.lf-trust{margin:-6px 0 0;font-size:14px;color:var(--mute);line-height:1.5;max-width:40em}
@media(max-width:560px){.lf-send{align-self:stretch}}
.lf-done{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.lf-done:focus{outline:none}
.lf-next{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.5;max-width:36em}
.lf-ref{margin:0;font-size:14px;color:var(--mute)}
.lf-doneacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

/* dialog: centred panel on desktop, bottom sheet on phone */
.lsheet{padding:0;border:0;border-radius:12px;width:min(720px,calc(100vw - 32px));max-width:none;max-height:min(90dvh,940px);background:var(--chalk);color:var(--court);box-shadow:0 24px 70px rgba(15,21,18,.28);overflow:hidden}
.lsheet[open]{display:flex;flex-direction:column}
.lsheet::backdrop{background:rgba(15,21,18,.55)}
.lsh-bar{display:flex;justify-content:flex-end;align-items:center;padding:8px 8px 0;position:relative;flex:none}
.lsh-grip{display:none}
.lsh-x{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--court);display:grid;place-items:center;cursor:pointer}
.lsh-x:hover{background:var(--line)}
.lsh-x:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.lsh-body{overflow-y:auto;padding:0 clamp(18px,3.4vw,36px) 30px;overscroll-behavior:contain;flex:1 1 auto}
html.lsh-open{overflow:hidden}
@media(max-width:640px){
  .lsheet{width:100%;margin:auto 0 0;border-radius:16px 16px 0 0;max-height:94dvh}
  .lsh-grip{display:block;position:absolute;left:50%;top:10px;width:40px;height:4px;border-radius:2px;background:var(--line);transform:translateX(-50%)}
  .lsh-body{padding:0 16px calc(24px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:no-preference){
  .lsheet[open]{animation:lshin .24s cubic-bezier(.2,.8,.2,1)}
  .lsheet[open]::backdrop{animation:lshfade .2s ease-out}
  @keyframes lshin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes lshfade{from{opacity:0}to{opacity:1}}
}

/* hero: Ask is the primary action, website stays secondary */
.mask{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;background:var(--ball);color:var(--court);border:0;border-radius:999px;font:600 15px/1.2 var(--body);cursor:pointer;touch-action:manipulation;text-align:center}
.mask:hover{background:#e9ef3a}
.mask:focus-visible,.mbtn:focus-visible,.mico:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mbtn{min-height:44px}.mico{width:44px;height:44px}
.mbtn{white-space:nowrap}
@media(max-width:640px){.mi.acts{flex-wrap:wrap;gap:10px}.mi.acts .mask{flex:1 1 100%;min-height:52px;font-size:16px}}


/* bottom call to action */
.ask button{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;background:var(--ball);color:var(--court);border:0;border-radius:999px;font:600 16px var(--body);cursor:pointer}
.ask button:hover{background:#e9ef3a}
.ask button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* phone: Ask stays one tap away once the hero is gone */
.askbar{display:none}
@media(max-width:640px){
  .askbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(243,244,242,.97);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(15,21,18,.08);transform:translateY(110%);visibility:hidden;transition:transform .22s ease-in,visibility 0s linear .22s}
  .askbar.show{transform:none;visibility:visible;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
  .askbar button{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 20px;background:var(--ball);color:var(--court);border:0;border-radius:999px;font:600 16px var(--body);cursor:pointer}
  .askbar button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
}
@media(prefers-reduced-motion:reduce){.askbar,.askbar.show{transition:none}}

/* consent tick (2026-10-12): one required box right above Send; the two links open the legal page in a new tab */
.lf-consent{display:flex;flex-direction:column;gap:6px}
.lf-check{display:flex;align-items:flex-start;gap:12px;font:400 15px/1.45 var(--body);color:var(--court);cursor:pointer;max-width:40em}
.lf-check input{flex:none;appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:0;border:1.5px solid var(--field);border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer;transition:background-color .15s,border-color .15s;position:relative}
.lf-check input:before{content:"";position:absolute;inset:-10px}
.lf-check input:checked{background:var(--court);border-color:var(--court)}
.lf-check input:checked:after{content:"";width:11px;height:6px;border-left:2px solid var(--ball);border-bottom:2px solid var(--ball);transform:rotate(-45deg) translate(1px,-1px)}
.lf-check:hover input:not(:checked){border-color:var(--court)}
.lf-check input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.lf-check span{padding-top:1px}
.lf-check a{color:var(--court);text-decoration:underline;text-underline-offset:2px;padding:6px 0;margin:-6px 0}
.lf-check a:hover{color:var(--blue)}
.lf-check input[aria-invalid=true]{border-color:var(--err)!important;box-shadow:0 0 0 1px var(--err)}
.lf-consent .lf-ferr{padding-left:36px}
