/* A centred photographic backdrop keeps the ribbon and copy in one composition. */
.membership-card{min-height:360px;background:#faf7ff url('/assets/private-luminous-premium.webp') center/100% 100% no-repeat}
.membership-card h2{text-wrap:balance}.membership-phrase{display:inline-block}
/* Keep the two homepage notices together at the lower-right of each card. */
#membership>.community-card{padding-bottom:82px}
#membership>.community-card>.status{position:absolute;right:24px;bottom:24px;margin:0;z-index:3}
@media(max-width:760px){#membership>.community-card>.status{right:22px;bottom:22px}}
.membership-card>div:first-child{text-shadow:0 1px 12px #ffffffbd}
.membership-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#fff4, #fff1 29%,transparent 54%)}
.community-card .membership-art{left:50%;top:55%;right:auto;bottom:auto;width:100%;height:auto;max-height:none;object-fit:contain;object-position:center;mix-blend-mode:normal;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 24%,#000 80%,transparent);mask-composite:intersect;border-radius:0;transform:translate(-50%,-50%);box-shadow:none;border:0}
@media(max-width:760px){.membership-card{min-height:320px}.community-card .membership-art{left:50%;top:57%;right:auto;bottom:auto;width:106%;transform:translate(-50%,-50%)}}

/* Community photographs dissolve into the card, with a gentle, uneven drift. */
#membership>.kindness-card{min-height:420px;padding-bottom:212px}
#membership>.kindness-card>div:first-child>h2{max-width:calc(100% - 150px);text-wrap:balance}
#membership>.kindness-card>.kindness-art{height:62%;width:45%}
.community-bubble{position:absolute;display:block;z-index:1;pointer-events:none;aspect-ratio:1;border:0;border-radius:50%;overflow:hidden;background:none;box-shadow:none;-webkit-mask-image:radial-gradient(circle closest-side,#000 63%,#000000e6 74%,#0000008c 87%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 63%,#000000e6 74%,#0000008c 87%,transparent 100%);transform:rotate(var(--photo-tilt,0deg));transform-origin:center}
.community-bubble img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border:0;border-radius:0;box-shadow:none}
.community-bubble--people{width:180px;top:26px;right:18px;-webkit-mask-image:radial-gradient(circle closest-side,#000 72%,#000000e6 82%,#0000008c 92%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 72%,#000000e6 82%,#0000008c 92%,transparent 100%);--photo-tilt:2deg;--drift-x:-3px;--drift-y:-5px;--bubble-duration:18s;--bubble-delay:-4s}
.community-bubble--people:before{content:"";position:absolute;inset:0;background:url('/assets/community-day-children-20261031.jpg') center/cover no-repeat;filter:blur(8px);opacity:.3;transform:scale(1.12)}
.community-bubble--people img{position:absolute;left:0;top:50%;height:auto;object-fit:contain;transform:translateY(-50%) scale(.96);-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
.community-bubble--gift{width:138px;left:24px;bottom:24px;--photo-tilt:-4deg;--drift-x:4px;--drift-y:-7px;--bubble-duration:22s;--bubble-delay:-10s}
.community-bubble--gift img{object-position:50% 67%;filter:brightness(1.07)}
.community-bubble--bags{width:156px;left:168px;bottom:48px;--photo-tilt:4deg;--drift-x:-4px;--drift-y:-4px;--bubble-duration:25s;--bubble-delay:-15s}
.community-bubble--bags img{object-position:58% 55%;filter:brightness(1.08)}
@keyframes community-bubble-drift{0%,100%{transform:translate3d(0,0,0) rotate(var(--photo-tilt,0deg))}50%{transform:translate3d(var(--drift-x,3px),var(--drift-y,-6px),0) rotate(calc(var(--photo-tilt,0deg) + 1deg))}}
@media(prefers-reduced-motion:no-preference){.community-bubble{animation:community-bubble-drift var(--bubble-duration,22s) ease-in-out var(--bubble-delay,0s) infinite}}
html.motion-paused .community-bubble{animation:none}
@media(min-width:761px) and (max-width:1060px){
 #membership>.kindness-card{padding-bottom:200px}
 #membership>.kindness-card>div:first-child>h2{max-width:calc(100% - 112px)}
 .community-bubble--people{width:136px;right:16px;top:22px}
 .community-bubble--gift{width:116px;left:20px;bottom:24px}
 .community-bubble--bags{width:132px;left:138px;bottom:60px}
}
@media(max-width:760px){
 #membership>.kindness-card{min-height:400px;padding-bottom:210px}
 #membership>.kindness-card>div:first-child>h2{max-width:calc(100% - 122px)}
 .community-bubble--people{width:145px;right:15px;top:24px}
 .community-bubble--gift{width:124px;left:22px;bottom:24px}
 .community-bubble--bags{width:141px;left:148.5px;bottom:61px}
}
@media(max-width:460px){
 #membership>.kindness-card{padding-bottom:195px}
 #membership>.kindness-card>div:first-child>h2{max-width:calc(100% - 94px)}
 .community-bubble--people{width:120px;right:12px;top:23px}
 .community-bubble--gift{width:107px;left:16px;bottom:24px}
 .community-bubble--bags{width:115.5px;left:124.75px;bottom:67.5px}
}
@media(max-width:1060px){
 #membership>.kindness-card>div:first-child>p:not(.eyebrow){text-wrap:balance}
 #membership>.kindness-card>div:first-child>p:not(.eyebrow) br{display:none}
}
@media(max-width:350px){
 #membership>.kindness-card{padding-bottom:195px}
 .community-bubble--people{width:108px}
 .community-bubble--gift{width:96px;left:14px;bottom:22px}
 .community-bubble--bags{width:108px;left:110px;bottom:74px}
}

/* Concrete benefits sit on clear panels; the membership card becomes a small signature. */
#membership>.membership-card-benefits{padding:28px 26px 76px;min-height:0}
#membership .membership-card-benefits h2{max-width:calc(100% - 112px);margin:6px 0 0;font-size:28px;line-height:1.4;text-align:left;text-wrap:balance}
#membership .membership-card-benefits .eyebrow{max-width:calc(100% - 112px);margin:0}
#membership>.membership-card-benefits>.membership-art{top:24px;right:22px;bottom:auto;left:auto;width:102px;height:auto;max-height:none;mask-image:none;-webkit-mask-image:none;transform:none;border-radius:9px;box-shadow:0 6px 16px #9475a525;z-index:2}
#membership .membership-program{margin:14px 0 0;color:#6c507d;font:500 14px/1.7 var(--sans);letter-spacing:0}
#membership .membership-benefits-list{display:grid;gap:9px;margin:18px 0 0;padding:0;list-style:none;text-shadow:none}
#membership .membership-benefits-list li{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;background:#ffffffd9;border:1px solid #ffffffed;border-radius:14px}
#membership .membership-benefit-check{display:grid;place-items:center;flex:none;width:24px;height:24px;margin-top:2px;border-radius:50%;background:#eee0f5;color:#6b4380;font:700 14px/1 var(--sans)}
#membership .membership-benefits-list li>div{min-width:0}
#membership .membership-benefits-list strong{display:block;color:#553b68;font:700 16px/1.6 var(--sans)}
#membership .membership-benefits-list li>div>span{display:block;margin-top:2px;color:#685975;font:400 14px/1.7 var(--sans)}
#membership .membership-registration-fee{margin:17px 0 0;color:#65506f;font:400 14px/1.7 var(--sans);letter-spacing:0}
#membership .membership-registration-fee strong{color:#654078;font-size:19px;font-weight:700}
#membership .membership-registration-fee>span{white-space:nowrap;font-size:13px}
#membership .membership-enquiry{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:44px;max-width:100%;margin-top:11px;padding:9px 18px;border:1px solid #c6a8d8;border-radius:999px;background:#ffffffc9;color:#654278;font:600 14px/1.6 var(--sans);text-shadow:none}
#membership .membership-enquiry:hover{background:#f5e9fb;border-color:#a97fc3}
#membership .membership-enquiry:focus-visible{outline:3px solid #9368ad;outline-offset:4px}
#membership .membership-benefits-note{margin:12px 0 0;color:#6a5c72;font:400 13px/1.7 var(--sans);letter-spacing:0;text-shadow:none}
@media(max-width:460px){
 #membership>.membership-card-benefits{padding:25px 20px 72px}
 #membership .membership-card-benefits h2{font-size:25px;max-width:calc(100% - 94px)}
 #membership .membership-card-benefits .eyebrow{font-size:14px;max-width:calc(100% - 94px)}
 #membership>.membership-card-benefits>.membership-art{width:84px;top:24px;right:20px}
 #membership .membership-benefits-list li{padding:10px 11px;gap:9px}
}

/* Landscape panels: artwork and community photos alongside the existing copy. */
#membership.community-grid{grid-template-columns:minmax(0,1fr);gap:26px}
#membership>.community-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:36px;padding:34px 36px 66px;min-height:0;border-radius:28px}
#membership>.community-card>div:first-child{grid-column:2;grid-row:1;min-width:0;text-shadow:none}
#membership>.community-card>.status{right:28px;bottom:22px}
#membership>.membership-card-benefits{background:linear-gradient(120deg,#ede6f9,#fffafd 57%,#f5effc)}
#membership .membership-card-benefits h2{max-width:none;font-size:30px}
#membership .membership-card-benefits .eyebrow{max-width:none}
#membership>.membership-card-benefits>.membership-art{position:relative;grid-column:1;grid-row:1;justify-self:center;align-self:center;inset:auto;width:100%;height:auto;max-width:440px;max-height:none;object-fit:contain;object-position:center;mix-blend-mode:normal;mask-image:none;-webkit-mask-image:none;transform:none;border:1px solid #ffffffb3;border-radius:20px;box-shadow:0 16px 38px -14px #7c5d9c55;z-index:2}
#membership>.kindness-card{min-height:370px;background:linear-gradient(120deg,#f1ecf9,#fffcfd 58%,#f8f0fa)}
#membership>.kindness-card>div:first-child>h2{max-width:none;margin:8px 0 16px;font-size:28px;line-height:1.6;text-wrap:balance}
#membership>.kindness-card>div:first-child>p:not(.eyebrow){margin:0;font:400 16px/1.9 var(--sans);letter-spacing:.025em}
#membership>.kindness-card>.kindness-art{left:0;right:auto;top:0;bottom:0;width:47%;height:100%;object-fit:cover;object-position:right center;opacity:.2;mask-image:linear-gradient(90deg,#000 65%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 65%,transparent)}
#membership .community-bubble--people{width:min(28%,260px);top:18px;left:7%;right:auto;bottom:auto}
#membership .community-bubble--gift{width:min(15%,145px);left:4%;bottom:24px;top:auto}
#membership .community-bubble--bags{width:min(17%,160px);left:25%;bottom:22px;top:auto}
@media(min-width:761px) and (max-width:1060px){
 #membership>.community-card{gap:24px;padding-inline:26px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
 #membership .membership-card-benefits h2{font-size:28px}
 #membership>.kindness-card{min-height:330px}
 #membership>.kindness-card>div:first-child>h2{font-size:25px}
 #membership .community-bubble--people{top:30px}
}
@media(max-width:760px){
 #membership.community-grid{gap:20px}
 #membership>.community-card{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px 24px 64px;border-radius:24px}
 #membership>.membership-card-benefits>.membership-art{grid-column:1;grid-row:1;width:100%;max-width:480px;border-radius:17px}
 #membership>.community-card>div:first-child{grid-column:1;grid-row:2}
 #membership .membership-card-benefits h2{font-size:28px;max-width:none}
 #membership .membership-card-benefits .eyebrow{max-width:none}
 #membership>.community-card>.status{right:22px;bottom:20px}
 #membership>.kindness-card{min-height:0;padding-top:272px;gap:0}
 #membership>.kindness-card>div:first-child>h2{font-size:25px;max-width:none}
 #membership>.kindness-card>div:first-child>p:not(.eyebrow) br{display:none}
 #membership>.kindness-card>.kindness-art{width:100%;height:270px;mask-image:linear-gradient(#000 50%,transparent);-webkit-mask-image:linear-gradient(#000 50%,transparent)}
 #membership .community-bubble--people{width:210px;max-width:50%;top:12px;left:15%;right:auto}
 #membership .community-bubble--gift{width:130px;max-width:30%;left:5%;top:126px;bottom:auto}
 #membership .community-bubble--bags{width:145px;max-width:34%;left:auto;right:7%;top:108px;bottom:auto}
}
@media(max-width:460px){
 #membership>.community-card{padding-inline:20px;gap:21px}
 #membership .membership-card-benefits h2{font-size:26px}
 #membership>.kindness-card{padding-top:230px;gap:0}
 #membership>.kindness-card>div:first-child>h2{font-size:23px}
 #membership>.kindness-card>.kindness-art{height:230px}
 #membership .community-bubble--people{left:14%;top:13px}
 #membership .community-bubble--gift{top:100px;left:4%}
 #membership .community-bubble--bags{top:89px;right:5%}
}

/* Keep the original horizontal size; compact only type and vertical spacing. */
#membership.community-grid{gap:21px}
#membership>.community-card{gap:28px;column-gap:36px;padding:26px 36px 54px;border-radius:24px}
#membership .membership-card-benefits h2{font-size:24px;margin-top:4px}
#membership .membership-card-benefits .eyebrow{font-size:14px}
#membership .membership-program{font-size:13px;margin-top:8px}
#membership>.membership-card-benefits>.membership-art{max-width:440px;border-radius:16px}
#membership .membership-benefits-list{gap:6px;margin-top:12px}
#membership .membership-benefits-list li{padding:7px 10px;gap:8px;border-radius:12px}
#membership .membership-benefit-check{width:20px;height:20px;font-size:12px}
#membership .membership-benefits-list strong{font-size:14.5px;line-height:1.5}
#membership .membership-benefits-list li>div>span{font-size:13px;line-height:1.6}
#membership .membership-registration-fee{font-size:13px;margin-top:11px}
#membership .membership-registration-fee strong{font-size:18px}
#membership .membership-registration-fee>span{font-size:12px}
#membership .membership-enquiry{margin-top:9px;padding:8px 16px;font-size:13px;min-height:44px}
#membership .membership-benefits-note{font-size:12px;line-height:1.7;margin-top:8px}
#membership>.community-card>.status{font-size:12px;right:24px;bottom:18px}
#membership>.kindness-card{min-height:310px}
#membership>.kindness-card>div:first-child{align-self:start;padding-bottom:160px}
#membership>.kindness-card>div:first-child>.eyebrow{font-size:14px}
#membership>.kindness-card>div:first-child>h2{font-size:24px;margin:6px 0 12px}
#membership>.kindness-card>div:first-child>p:not(.eyebrow){max-width:none;width:auto;font-size:14px;line-height:1.9}
#membership>.kindness-card>.kindness-art{left:auto;right:0;top:auto;bottom:0;width:320px;height:205px;object-fit:cover;object-position:right center;opacity:.8;mix-blend-mode:multiply;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 85%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
#membership .community-bubble--people{width:min(28%,260px)}
#membership .community-bubble--gift{width:min(15%,145px)}
#membership .community-bubble--bags{width:min(17%,160px)}
@media(max-width:760px){
 #membership>.community-card{gap:20px;padding:22px 24px 54px}
 #membership>.membership-card-benefits>.membership-art{max-width:480px}
 #membership>.community-card>.status{right:20px;bottom:18px}
 #membership>.kindness-card{padding-top:272px;padding-bottom:210px;gap:0}
 #membership>.kindness-card>div:first-child{padding-bottom:0}
 #membership>.kindness-card>.kindness-art{right:0;bottom:0;width:90%;max-width:300px;height:180px}
 #membership .community-bubble--people{width:210px;max-width:50%}
 #membership .community-bubble--gift{width:130px;max-width:30%}
 #membership .community-bubble--bags{width:145px;max-width:34%}
}
@media(max-width:460px){
 #membership>.community-card{gap:18px;padding-inline:20px}
 #membership>.kindness-card{padding-top:230px;gap:0}
 #membership>.kindness-card>div:first-child>h2{font-size:22px}
}

/* The status sits above the globe, with the illustration still visible beneath. */
#membership>.kindness-card>.status{right:84px;bottom:168px;transform:translateX(50%);z-index:3}
@media(max-width:760px){#membership>.kindness-card>.status{bottom:142px}}

@media(min-width:761px) and (max-width:1060px){#membership>.community-card{column-gap:24px;padding-inline:26px}}

#membership>.membership-card-benefits{padding-top:22px;padding-bottom:46px}

@media(min-width:761px) and (max-width:1060px){html[lang=en] #membership>.kindness-card>div:first-child{padding-bottom:176px}}

/* Two more Community Day memories float in the open space beside the globe. */
#membership .community-bubble--group,#membership .community-bubble--activities{aspect-ratio:4/3;-webkit-mask-image:radial-gradient(ellipse closest-side,#000 66%,#000000e6 79%,#0000008c 91%,transparent 100%);mask-image:radial-gradient(ellipse closest-side,#000 66%,#000000e6 79%,#0000008c 91%,transparent 100%)}
#membership .community-bubble--group{left:43%;right:auto;top:auto;bottom:22px;width:min(19%,200px);--photo-tilt:-3deg;--drift-x:3px;--drift-y:-7px;--bubble-duration:20s;--bubble-delay:-6s}
#membership .community-bubble--activities{left:61%;right:auto;top:auto;bottom:34px;width:min(18%,190px);--photo-tilt:3deg;--drift-x:-4px;--drift-y:-9px;--bubble-duration:26s;--bubble-delay:-13s}
#membership .community-bubble--group img{object-position:center 55%}
#membership .community-bubble--activities img{object-position:center 57%}
@media(max-width:760px){
 #membership .community-bubble--group{left:5%;bottom:24px;width:30%;max-width:190px}
 #membership .community-bubble--activities{left:36%;bottom:42px;width:27%;max-width:180px}
}
@media(max-width:460px){
 #membership>.kindness-card{padding-bottom:265px}
 #membership .community-bubble--group{left:6%;bottom:130px;width:39%;max-width:150px}
 #membership .community-bubble--activities{left:12%;bottom:8px;width:39%;max-width:150px}
}

/* Let the full membership artwork use the open space on the desktop left side. */
@media(min-width:1061px){
 #membership>.membership-card-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
 #membership>.membership-card-benefits>.membership-art{max-width:none;width:calc(100% + 36px);margin-left:-36px;justify-self:start}
}
@media(min-width:761px) and (max-width:1060px){
 #membership>.membership-card-benefits>.membership-art{max-width:none;width:calc(100% + 26px);margin-left:-26px;justify-self:start}
}