/* Get involved: "I want to…" selector. Built 2026-11-07. Markup in get-involved.html (.gi-hero), behaviour in involve.js. */
.gi-hero{border-bottom:1px solid var(--line);padding-block:44px 64px}
.gi-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:56px;align-items:center}
.gi-copy .eyebrow{margin-bottom:23px}
.gi-copy h1{font-size:clamp(44px,5.3vw,76px)}
.gi-copy .lede{margin-top:26px;font-size:18px;max-width:520px}
.gi-copy .mark{background:linear-gradient(transparent 68%,#d5ec9d 68%,#d5ec9d 90%,transparent 90%) no-repeat 0 0/0 100%;animation:giMark .6s .9s cubic-bezier(.6,0,.2,1) both;padding-inline:.04em}
.gi-copy .next{margin-top:30px;font-size:14px;color:var(--muted)}
.gi-copy .next a{color:var(--ink);font-weight:600}

.gi-art{--r:28px;position:relative;height:560px;border-radius:var(--r);overflow:hidden;-webkit-mask-image:-webkit-radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000);background:#e3f0c4;transition:background .6s}
.gi-art[data-c=lime]{background:#e3f0c4}.gi-art[data-c=sand]{background:#ebe9dd}.gi-art[data-c=clay]{background:#f3e6d7}.gi-art[data-c=river]{background:#e4efe7}
.gi-card{position:absolute;inset:0;display:flex;flex-direction:column;padding:112px 40px 36px;opacity:0;clip-path:inset(0 0 0 100%);transition:opacity .6s ease,clip-path .75s cubic-bezier(.7,0,.2,1)}
.gi-card.is-on{opacity:1;clip-path:inset(0 0 0 0);z-index:2}
.gi-card.is-out{opacity:1;clip-path:inset(0 0 0 0);z-index:1}
.gi-card[data-c=lime]{background:#e3f0c4}.gi-card[data-c=sand]{background:#ebe9dd}.gi-card[data-c=clay]{background:#f3e6d7}.gi-card[data-c=river]{background:#e4efe7}
.gi-card .pic{position:relative;flex:1;min-height:150px;margin:0 -12px 22px}
.gi-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.07) contrast(1.06);transform:scale(1.05);translate:calc(var(--mx,0) * -12px) calc(var(--my,0) * -8px);transition:transform 4s ease-out,translate .6s ease-out}
.gi-card.is-on img{transform:none}
.gi-card .cap{position:relative;max-width:500px}
.gi-card .cap b{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:8px;color:#416748}
.gi-card .cap p{font-size:20px;letter-spacing:-.02em;font-weight:550;line-height:1.3;color:var(--ink);margin:0 0 18px}
.gi-card .cap .button{border-radius:999px;padding-inline:22px}
.gi-card.is-on .cap{animation:giRise .6s .3s cubic-bezier(.2,.8,.2,1) both}
.gi-card.is-out .cap{opacity:0;transition:opacity .2s}

.gi-ask{position:absolute;left:34px;top:26px;z-index:5;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#416748;animation:giRise .7s .55s cubic-bezier(.2,.8,.2,1) both}
.gi-tabs{position:absolute;left:24px;top:48px;z-index:5;display:flex;gap:2px;padding:5px;border-radius:999px;background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);border:1px solid rgba(255,255,255,.65);box-shadow:0 14px 34px -16px rgba(12,40,28,.5),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 1px rgba(23,46,37,.07);animation:giRise .7s .6s cubic-bezier(.2,.8,.2,1) both}
.gi-tabs::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 160% at 18% -30%,rgba(255,255,255,.6),transparent 55%)}
.gi-tabs .pill{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.8));box-shadow:0 6px 16px -8px rgba(12,40,28,.55),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(23,46,37,.07);overflow:hidden;z-index:0}
.gi-tabs .pill::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(213,236,157,.15),rgba(213,236,157,.95));clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.6,0,.2,1) .25s}
.gi-tabs .pill.lit::after{clip-path:inset(0 0 0 0)}
.gi-tabs .pill.squish{animation:giSquish .55s cubic-bezier(.3,.7,.3,1)}
.gi-tabs button{all:unset;box-sizing:border-box;position:relative;z-index:1;cursor:pointer;padding:14px 17px;border-radius:999px;font-family:Inter,"Inter Fallback",system-ui,sans-serif;font-size:13.5px;font-weight:600;line-height:1;color:rgba(23,46,37,.6);filter:blur(.45px);transition:color .4s,filter .4s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.gi-tabs button span{display:inline-block}
.gi-tabs button:hover{filter:none;color:var(--ink)}
.gi-tabs button[aria-pressed=true]{color:var(--ink);filter:none}
.gi-tabs button[aria-pressed=true] span{animation:giPop .55s cubic-bezier(.3,1.6,.5,1) both}
.gi-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:1px;filter:none}
.gi-tabs .s{display:none}

/* The form answers the choice */
#f-type.gi-flash{animation:giFlash 1.6s ease-out}
@keyframes giFlash{0%,30%{box-shadow:0 0 0 4px #d5ec9d;border-color:#7fa35a}100%{box-shadow:0 0 0 0 rgba(213,236,157,0)}}

@keyframes giRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes giWipe{from{clip-path:inset(0 0 0 100% round var(--r))}to{clip-path:inset(0 0 0 0 round var(--r))}}
@keyframes giMark{from{background-size:0 100%}to{background-size:100% 100%}}
@keyframes giSquish{30%{transform:scaleY(.84) scaleX(1.03)}65%{transform:scaleY(1.05)}100%{transform:none}}
@keyframes giPop{0%{transform:scale(.9)}55%{transform:scale(1.1)}100%{transform:scale(1)}}
.gi-copy>*{animation:giRise .8s cubic-bezier(.2,.8,.2,1) both}
.gi-copy .eyebrow{animation-delay:.05s}.gi-copy h1{animation-delay:.12s}.gi-copy .lede{animation-delay:.3s}.gi-copy .next{animation-delay:.42s}
.gi-art{animation:giWipe 1.05s .15s cubic-bezier(.7,0,.2,1) both}

@media(max-width:1150px){.gi-grid{gap:36px}.gi-tabs button{padding:14px 12px;font-size:13px}.gi-art{height:600px}.gi-card{padding-inline:30px}}
@media(max-width:900px){
 .gi-hero{padding-block:34px 40px}
 .gi-grid{grid-template-columns:1fr;gap:28px}
 .gi-copy h1{font-size:clamp(40px,11vw,54px)}
 .gi-copy .lede{font-size:16px;margin-top:20px}
 .gi-copy .next{display:none}
 .gi-art{--r:26px;height:560px;margin-inline:-8px}
 .gi-ask{left:22px;top:20px}
 .gi-tabs{left:10px;right:10px;top:40px;gap:0;padding:4px}
 .gi-tabs .pill{top:4px;bottom:4px}
 .gi-tabs button{flex:1;text-align:center;padding:14px 0;font-size:13px}
 .gi-tabs .l{display:none}.gi-tabs .s{display:inline}
 .gi-card{padding:104px 22px 24px}
 .gi-card .pic{margin:0 -14px 16px}
 .gi-card .cap p{font-size:17px;margin-bottom:14px}
}
@media (prefers-reduced-motion:reduce){
 .gi-copy>*,.gi-art,.gi-tabs,.gi-ask,.gi-card.is-on .cap,.gi-tabs button[aria-pressed=true] span,.gi-tabs .pill.squish,.gi-copy .mark,#f-type.gi-flash{animation:none}
 .gi-copy .mark{background-size:100% 100%}
 .gi-card,.gi-card img,.gi-tabs .pill,.gi-tabs .pill::after{transition:none!important}
 .gi-card img{translate:none}
}
@media print{.gi-art{display:none}.gi-grid{display:block}.gi-hero *{animation:none!important}}
.gi-tabs[hidden],.gi-ask[hidden]{display:none}
#truthForm{scroll-margin-top:120px}
@media(max-width:360px){.gi-art{height:600px}}