/* Membership and volunteer layouts. Colours inherit the live CTLPA design system. */
body.public-shell .association-join {--join-space:clamp(40px,6vw,88px)}
.association-join *, .association-join *::before, .association-join *::after{box-sizing:border-box}
body.public-shell .association-join .join-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,7vw,112px);padding-top:64px;padding-bottom:64px;align-items:start}
body.public-shell .association-join .eyebrow,.association-join .join-kicker{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.join-accent{display:block;width:64px;height:4px;background:var(--accent);margin:24px 0}
body.public-shell .association-join h1{font-size:clamp(48px,6vw,80px);line-height:1.04;font-weight:650;letter-spacing:-.035em;margin-bottom:28px}
body.public-shell .association-join .join-lead{font-size:clamp(18px,2vw,24px);line-height:1.45;margin-bottom:28px;max-width:34ch}
.association-join .join-role-panel,.association-join .join-intro{background:var(--ink);color:white;padding:32px;border-radius:0}
.association-join .join-role-panel fieldset{border:0;padding:0;margin:0;min-width:0}
body.public-shell .association-join .join-role-panel legend{color:white;font-size:24px;font-weight:600;line-height:1.25;margin-bottom:20px;padding:0}
body.public-shell .association-join .join-choice{display:flex;align-items:center;gap:12px;min-height:48px;margin:0;font-weight:400;color:white;cursor:pointer}
body.public-shell .association-join .join-choice input{width:18px;height:18px;min-height:0;padding:0;margin:0;accent-color:var(--ink);flex:0 0 auto}
body.public-shell .association-join .join-inverse{background:#f7f5f0;color:var(--ink);width:100%;margin-top:20px;border-color:#f7f5f0}
.association-join .join-fine{font-size:14px;line-height:1.5;margin:16px 0 0}
body.public-shell .association-join .join-explainer{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(32px,6vw,100px);padding-top:48px;padding-bottom:var(--join-space)}
body.public-shell .association-join h2{font-size:clamp(28px,3vw,40px);line-height:1.15;margin-bottom:20px}
.association-join .join-explainer>div>p:not(.eyebrow){color:var(--muted)}
.association-join .join-steps{counter-reset:join-step;list-style:none;margin:0;padding:0}
.association-join .join-steps>li{counter-increment:join-step;display:grid;grid-template-columns:24px minmax(0,1fr);gap:20px;padding:24px 0;border-top:1px solid var(--line)}
.association-join .join-steps>li::before{content:counter(join-step,decimal-leading-zero);font-size:12px;padding-top:4px}
body.public-shell .association-join .join-steps h3{font-size:22px;margin:0 0 8px}
.association-join .join-steps p{color:var(--muted);margin:0 0 12px}
.association-join .join-enquiry{background:var(--wash);padding:64px 0;scroll-margin-top:32px}
body.public-shell .association-join .join-enquiry-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(32px,6vw,80px);align-items:start}
body.public-shell .association-join .join-intro h2,.association-join .join-intro a{color:white}
.association-join .join-intro p{margin-bottom:20px}.association-join .join-intro a{overflow-wrap:anywhere}
.association-join .join-form{display:grid;gap:20px}.association-join .join-form>label{margin:0;display:block;color:var(--ink);font-weight:500}
.association-join .join-form input:not([type=checkbox]),.association-join .join-form select,.association-join .join-form textarea{width:100%;max-width:100%;background:white;border:1px solid #aebdc7;min-height:48px;font:inherit;border-radius:var(--radius)}
.association-join .join-form .small{margin:0}.association-join .join-form label.enquiry-consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;font-weight:400}
.association-join .enquiry-consent input{flex:0 0 auto;width:20px;height:20px;min-height:0;margin-top:2px}
body.public-shell .association-join :is(button,.button){min-height:48px;display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:normal}
.association-join :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.association-join .join-role-panel :is(button,input):focus-visible{outline-color:white}
.association-join .join-emblem{width:min(100%,360px);height:auto;justify-self:center;align-self:center}
body.public-shell .association-join .join-existing{padding-top:40px;padding-bottom:48px}.association-join .join-existing summary{font-size:20px;font-weight:600;cursor:pointer;padding:16px 0;min-height:48px}.association-join .join-existing details[open]>summary{margin-bottom:20px}
@media(max-width:760px){body.public-shell .association-join .join-hero,body.public-shell .association-join .join-explainer,body.public-shell .association-join .join-enquiry-grid{grid-template-columns:minmax(0,1fr);gap:32px}body.public-shell .association-join .join-hero{padding-top:36px;padding-bottom:32px}.association-join .join-role-panel,.association-join .join-intro{padding:24px}.association-join .join-enquiry{padding:32px 0}body.public-shell .association-join .join-explainer{padding-top:24px}.association-join .join-emblem{width:220px}.association-join .join-steps>li{gap:12px}.association-join .join-existing .split{grid-template-columns:1fr}}

body.public-shell .association-join :is(h1,h2,h3,legend,summary){text-transform:none}