.membership-section { padding:clamp(4.5rem,9vw,8rem) clamp(1.2rem,9vw,10rem); background:var(--green); color:var(--cream); }.membership-section .eyebrow { color:var(--yellow); }.membership-section h2 { margin-bottom:1.2rem; }.membership-section__intro { max-width:470px; color:#d9e5ff; }.membership-layout { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr); gap:clamp(2rem,6vw,6rem); align-items:start; margin-top:3rem; }.membership-card { position:relative; overflow:hidden; aspect-ratio:1009 / 638; background:#002f86 url('assets/images/tessera-socio-template.jpg') center / cover no-repeat; box-shadow:12px 12px 0 rgba(255,210,28,.95); }.membership-card__value { position:absolute; z-index:1; overflow:hidden; color:#06132f; font-family:var(--sans); font-weight:700; line-height:1; text-overflow:ellipsis; white-space:nowrap; }.membership-card__name { top:14.2%; left:9%; width:47%; font-size:clamp(.65rem,2.1vw,1.2rem); }.membership-card__number { top:67%; left:9%; width:27%; font-size:clamp(.65rem,2vw,1.15rem); }.membership-card__since { top:67%; left:43%; width:13%; font-size:clamp(.65rem,1.8vw,1.1rem); }.membership-form { max-width:650px; }.membership-choice { display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1.5rem; }.membership-choice button { border:1px solid #6e90c8; padding:.8rem 1rem; color:var(--cream); background:transparent; font-weight:700; cursor:pointer; }.membership-choice button.is-active { border-color:var(--yellow); background:var(--yellow); color:var(--deep); }.membership-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.membership-field { display:grid; gap:.45rem; color:#d9e5ff; font:500 .7rem var(--mono); text-transform:uppercase; letter-spacing:.05em; }.membership-field input,.membership-form > label input { width:100%; padding:.8rem .85rem; color:var(--deep); border:1px solid #9cb8e7; background:var(--cream); font:400 .94rem var(--sans); text-transform:none; letter-spacing:normal; }.membership-form > label { display:grid; gap:.45rem; margin-top:1rem; color:#d9e5ff; font:500 .7rem var(--mono); text-transform:uppercase; letter-spacing:.05em; }.membership-form .membership-privacy { display:flex; grid-template-columns:none; align-items:flex-start; gap:.6rem; margin:1.2rem 0; color:#d9e5ff; font:400 .78rem var(--sans); line-height:1.45; text-transform:none; letter-spacing:0; }.membership-privacy input { width:auto; margin-top:.15rem; accent-color:var(--yellow); }.membership-submit { width:100%; justify-content:space-between; }.membership-feedback { margin:1rem 0 0; font-size:.85rem; }.membership-feedback[data-state="success"] { color:#fff; }.membership-feedback[data-state="error"] { color:#ffd28e; }.membership-feedback[data-state="loading"] { color:#d9e5ff; }.membership-honeypot { position:absolute!important; left:-9999px!important; opacity:0!important; pointer-events:none!important; }
@media (max-width:850px) { .membership-layout { grid-template-columns:1fr; }.membership-card { max-width:620px; }.membership-fields { grid-template-columns:1fr; } }
.membership-field small { color:#d9e5ff; font:400 .73rem var(--sans); text-transform:none; letter-spacing:0; }.membership-radio { grid-column:1/-1; display:grid; gap:.6rem; margin:0; padding:1rem; border:1px solid #6e90c8; }.membership-radio legend { padding:0 .3rem; color:#d9e5ff; font:500 .7rem var(--mono); text-transform:uppercase; letter-spacing:.05em; }.membership-radio label { display:flex; align-items:center; gap:.55rem; color:var(--cream); font-size:.88rem; cursor:pointer; }.membership-radio input { accent-color:var(--yellow); }
.membership-layout { grid-template-columns:repeat(2,minmax(0,1fr)); }.membership-front { overflow:hidden; aspect-ratio:1009 / 669; align-self:start; box-shadow:12px 12px 0 rgba(255,210,28,.95); }.membership-front img { display:block; width:100%; height:100%; object-fit:cover; }.membership-form .membership-card { width:100%; max-width:none; margin-bottom:1.25rem; }.membership-card__field { position:absolute; z-index:2; display:block; margin:0; }.membership-card__field input { display:block; width:100%; height:100%; padding:0 .55em; border:0; outline:0; color:#06132f; background:transparent; font:700 clamp(.65rem,1.9vw,1.22rem) var(--sans); }.membership-card__field--full_name { top:11.5%; left:6.7%; width:49.5%; height:8%; }.membership-card__field--member_number { top:63.6%; left:6.7%; width:30%; height:10.5%; }.membership-card__field--member_since { top:63.6%; left:39.5%; width:16.5%; height:10.5%; }.membership-form .membership-fields:empty { display:none; }.membership-form [data-membership-email-field] { margin-top:0; }
@media (max-width:850px) { .membership-layout { grid-template-columns:1fr; }.membership-front { max-width:620px; }.membership-form .membership-card { max-width:620px; } }
.membership-layout { display:block; }.membership-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3.5rem); max-width:none; }.membership-choice { grid-column:1/-1; justify-content:center; margin:0 0 .5rem; }.membership-front-column,.membership-request-column { min-width:0; }.membership-front-column { display:grid; gap:1rem; align-content:start; }.membership-front,.membership-form .membership-card { width:100%; max-width:none; margin:0; border:3px solid var(--yellow); box-shadow:10px 10px 0 rgba(255,210,28,.95); }.membership-front { aspect-ratio:1009 / 669; }.membership-front-column [data-membership-email-field] { display:grid; gap:.45rem; color:#d9e5ff; font:500 .7rem var(--mono); text-transform:uppercase; letter-spacing:.05em; }.membership-front-column [data-membership-email-field] input { width:100%; padding:.8rem .85rem; color:var(--deep); border:1px solid #9cb8e7; background:var(--cream); font:400 .94rem var(--sans); text-transform:none; letter-spacing:normal; }.membership-request-column { display:grid; gap:1rem; align-content:start; }.membership-request-column .membership-fields { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; }.membership-request-column .membership-privacy { margin:.15rem 0 0; }.membership-request-column .membership-submit { margin-top:.1rem; }.membership-feedback { grid-column:1/-1; margin:0; text-align:center; }.membership-form.is-new-member .membership-request-column { grid-column:1/-1; width:min(100%,1180px); margin:0 auto; }.membership-form.is-new-member .membership-request-column .membership-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }.membership-form.is-new-member .membership-fields .membership-radio { grid-column:1/-1; }.membership-form.is-new-member .membership-submit { width:min(100%,520px); justify-self:center; }.membership-form.is-new-member .membership-privacy { justify-self:center; max-width:620px; }
@media (max-width:1100px) { .membership-request-column .membership-fields,.membership-form.is-new-member .membership-request-column .membership-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:850px) { .membership-form { grid-template-columns:1fr; }.membership-request-column,.membership-form.is-new-member .membership-request-column { grid-column:auto; } }
@media (max-width:700px) { .membership-choice { justify-content:center; }.membership-request-column .membership-fields,.membership-form.is-new-member .membership-request-column .membership-fields { grid-template-columns:1fr; }.membership-form.is-new-member .membership-submit { width:100%; }.membership-form.is-new-member .membership-privacy { justify-self:auto; } }
.membership-front-column [data-membership-email-field] { width:min(100%,520px); justify-self:center; }.membership-request-column .membership-privacy,.membership-request-column .membership-submit { width:min(100%,520px); justify-self:center; }.membership-form.is-new-member .membership-front-column { display:none; }.membership-form.is-new-member .membership-request-column .membership-fields { grid-template-columns:repeat(3,minmax(220px,320px)); justify-content:center; }.membership-form.is-new-member .membership-field--email { order:10; grid-column:1/-1; width:min(100%,520px); justify-self:center; }.membership-form.is-new-member .membership-radio { width:min(100%,640px); justify-self:center; }.membership-form.is-new-member .membership-privacy { width:min(100%,520px); margin-top:.5rem; }.membership-form.is-new-member .membership-submit { width:min(100%,520px); }
@media (max-width:1100px) { .membership-form.is-new-member .membership-request-column .membership-fields { grid-template-columns:repeat(2,minmax(220px,320px)); } }
@media (max-width:700px) { .membership-form.is-new-member .membership-request-column .membership-fields { grid-template-columns:minmax(0,520px); }.membership-form.is-new-member .membership-field--email,.membership-form.is-new-member .membership-radio { width:100%; }.membership-front-column [data-membership-email-field],.membership-request-column .membership-privacy,.membership-request-column .membership-submit { width:100%; } }
.membership-actions { grid-column:1/-1; display:grid; gap:1rem; width:min(100%,520px); margin:0 auto; }.membership-actions [data-membership-email-field] { display:grid; gap:.45rem; color:#d9e5ff; font:500 .7rem var(--mono); text-transform:uppercase; letter-spacing:.05em; }.membership-actions [data-membership-email-field] input,.membership-field input { width:100%; height:3.75rem; padding:.8rem .85rem; color:var(--deep); border:1px solid #9cb8e7; background:var(--cream); font:400 .94rem var(--sans); text-transform:none; letter-spacing:normal; }.membership-actions .membership-privacy { width:100%; margin:0; }.membership-actions .membership-submit { width:100%; margin:0; }.membership-form.is-new-member .membership-actions { margin-top:.5rem; }.membership-form.is-new-member .membership-actions [data-membership-email-field][hidden] { display:none; }
@media (max-width:700px) { .membership-actions { width:100%; } }