/* TC-WO-3 homepage tune-up. Same palette/type; spacing, radius, pills, tiles.
   Classes come from the WPBakery "Coffee style" dropdown (tc-*) or the Coffee elements. */

/* Header menu: ACCESS-style pills, 44px outside (TC-WO-4). Venmo (1226) stays a plain link on the same centre line.
   Elza in a normal line box has ascent 12 / descent 4 at 16px with 11.4px caps, so caps sat ~1.7px high.
   Labels use line-height:1 and are trimmed to cap height; browsers without text-box get the same optical nudge. */
body .wpex-dropdown-menu > .menu-item:not(#menu-item-1226){border:2px solid var(--tc-orange)!important;border-radius:999px}
/* One 10px gap between items (Total's navbar style added 25px right margins on top, so pills sat 35px apart). */
body #site-navigation .main-navigation-ul{gap:10px}
body #site-navigation .main-navigation-ul > .menu-item{margin:0!important}
body .main-navigation .main-navigation-ul > .menu-item:not(#menu-item-1226) > a{display:flex;align-items:center;min-height:40px;padding:0 22px!important;border-radius:999px;font-weight:700;letter-spacing:.03em;line-height:1}
body .main-navigation .main-navigation-ul > #menu-item-1226 > a{display:flex;align-items:center;min-height:44px;padding:0 12px!important;line-height:1}
body .main-navigation .main-navigation-ul > .menu-item > a > .link-inner{display:block;line-height:1}
@supports (text-box:trim-both cap alphabetic){body .main-navigation .main-navigation-ul > .menu-item > a > .link-inner{text-box:trim-both cap alphabetic}}
@supports not (text-box:trim-both cap alphabetic){body .main-navigation .main-navigation-ul > .menu-item > a > .link-inner{transform:translateY(.105em)}body .main-navigation .main-navigation-ul > #menu-item-1226 > a > .link-inner{display:flex;align-items:center;gap:.25em;transform:translateY(.145em)}}
body .main-navigation .main-navigation-ul > .menu-item:last-child{background:var(--tc-orange)}
body .main-navigation .main-navigation-ul > .menu-item:last-child > a{color:#fff}

/* Pill buttons (vcex_button + Coffee style). */
.vcex-button[class*="tc-pill-"]{display:inline-flex!important;align-items:center;justify-content:center;gap:10px;min-height:var(--tc-pill-h);margin:0 8px 12px 0;padding:0 30px!important;border:0!important;border-radius:999px!important;font-family:var(--tc-body)!important;font-weight:700!important;font-size:17px!important;line-height:1.1!important;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;transition:background-color .2s,color .2s,box-shadow .2s}
.vcex-button[class*="tc-pill-"] .theme-button-inner{display:inline-flex;align-items:center;gap:10px}
.vcex-button.tc-pill-orange{background:var(--tc-orange)!important;color:#fff!important}
.vcex-button.tc-pill-line{background:transparent!important;color:var(--tc-ink)!important;box-shadow:inset 0 0 0 2px var(--tc-ink)}
.vcex-button.tc-pill-white{background:#fff!important;color:var(--tc-blue)!important}
.vcex-button.tc-pill-line-white{background:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 2px #fff}
.vcex-button.tc-pill-ink{background:var(--tc-ink)!important;color:#fff!important}
.tc-card-orange .vcex-button.tc-pill-white{color:var(--tc-orange)!important}

/* Type helpers. */
.vcex-heading.tc-eyebrow,.vcex-heading.tc-eyebrow-white{font-family:var(--tc-display)!important;font-weight:800!important;font-size:22px!important;line-height:1.1!important;letter-spacing:.06em;text-transform:uppercase;color:var(--tc-orange)!important;margin:0 0 14px!important}
.vcex-heading.tc-eyebrow-white{color:#fff!important;opacity:.9}
.vcex-heading.tc-display{font-family:var(--tc-display)!important;font-weight:900!important;font-size:clamp(64px,11vw,150px)!important;line-height:.9!important;text-transform:uppercase;letter-spacing:-.005em;color:var(--tc-ink)}
.tc-lead{font-size:clamp(19px,2.2vw,24px);line-height:1.45}
.tc-lead p{max-width:30ch;margin-left:auto;margin-right:auto}
.tc-short p{max-width:44ch}
.tc-short p:last-child{margin-bottom:0}
.tc-source{font-size:13px;line-height:1.5;color:var(--tc-muted);margin-top:14px}
.tc-source p{margin:0}

/* Rounded sections and cards. */
.vc_row.tc-section{border-radius:var(--tc-radius-lg)!important;padding:clamp(32px,5.5vw,80px)!important}
.tc-card-image img{border-radius:var(--tc-radius-lg)!important}
.vc_row.vc_inner.tc-card-orange{background:var(--tc-orange);color:#fff;border-radius:var(--tc-radius-lg);padding:clamp(28px,4vw,48px) clamp(12px,3vw,36px);margin:56px 0 0!important;align-items:center}
.tc-card-orange .vcex-heading,.tc-card-orange .wpb_text_column{color:#fff}
.tc-card-orange .wpb_text_column p{margin-bottom:0}
.vc_row.vc_inner.tc-card-blue{background:var(--tc-blue);color:#fff;border-radius:var(--tc-radius-lg)}
.vc_row.vc_inner.tc-card-soft{background:var(--tc-soft);border-radius:var(--tc-radius-lg)}

/* Hero: taller, pills together. */
.vc_row.tc-hero{border-radius:var(--tc-radius-lg)!important}
.tc-hero .vcex-button[class*="tc-pill-"]{margin-right:12px}
@media(max-width:767px){.vc_row.tc-hero{min-height:720px!important}}

/* Ticker: slightly smaller and tighter. */
.vc_row.tc-ticker-row{margin-bottom:12px!important}

/* Journey timeline (column with Timeline stop elements). */
.tc-timeline>.vc_column-inner>.wpb_wrapper{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;margin-top:56px}
.tc-timeline>.vc_column-inner>.wpb_wrapper::before{content:"";position:absolute;left:0;right:0;top:9px;height:3px;border-radius:3px;background:rgba(255,255,255,.35)}
.tc-stop{position:relative;color:#fff}
.tc-stop__dot{display:block;width:21px;height:21px;border-radius:50%;background:var(--tc-yellow);box-shadow:0 0 0 5px var(--tc-purple);margin-bottom:20px}
.tc-stop__head{margin:0 0 8px;font-family:var(--tc-display);font-weight:900;font-size:clamp(30px,2.8vw,40px);line-height:.95;text-transform:uppercase;color:#fff}
.tc-stop__years{display:block;font-size:.62em;letter-spacing:.03em;color:var(--tc-yellow);margin-bottom:4px}
.tc-stop__line{margin:0;font-size:16px;line-height:1.45;color:#fff;opacity:.95}
@media(max-width:959px){
 .tc-timeline>.vc_column-inner>.wpb_wrapper{grid-template-columns:1fr;gap:26px;padding-left:38px;margin-top:40px}
 .tc-timeline>.vc_column-inner>.wpb_wrapper::before{left:9px;right:auto;top:6px;bottom:6px;width:3px;height:auto}
 .tc-stop__dot{position:absolute;left:-38px;top:4px;margin:0}
}

/* Number tiles (Israel). */
.tc-tiles>.vc_column-inner>.wpb_wrapper{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.tc-stat{display:flex;flex-direction:column;gap:10px;background:var(--tc-soft);border-radius:var(--tc-radius-sm);padding:22px 18px;color:var(--tc-ink)}
.tc-stat__number{font-family:var(--tc-display);font-weight:900;font-size:clamp(52px,4.6vw,72px);line-height:.9;letter-spacing:-.005em}
.tc-stat__label{font-size:15px;font-weight:600;line-height:1.3}
.tc-stat--orange .tc-stat__number{color:var(--tc-orange)}
.tc-stat--blue .tc-stat__number{color:var(--tc-blue)}
.tc-stat--purple .tc-stat__number{color:var(--tc-purple)}
.tc-stat--yellow .tc-stat__number{color:var(--tc-yellow)}
.tc-stat--ink .tc-stat__number{color:var(--tc-ink)}
.tc-stat--dark{background:var(--tc-ink);color:#fff}
.tc-stat--dark.tc-stat--ink .tc-stat__number{color:#fff}
@media(max-width:1100px){.tc-tiles>.vc_column-inner>.wpb_wrapper{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.tc-tiles>.vc_column-inner>.wpb_wrapper{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tc-stat{padding:18px 14px}}

/* Observations (Israel). */
.tc-observations p{margin:0 0 10px;padding-left:16px;border-left:4px solid var(--tc-yellow);line-height:1.45}
.tc-observations p:last-child{margin-bottom:0}

/* Giving (from Nolan's ACCESS draft). */
.tc-giving .vc_column-inner>.wpb_wrapper{max-width:1040px;margin:0 auto;text-align:center}
.tc-giving .vcex-heading{text-align:center}
.tc-goal{max-width:560px;margin:28px auto 26px;text-align:left}
.tc-goal__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;font-weight:700;font-size:17px;color:var(--tc-ink)}
.tc-goal__top span{font-weight:500;font-size:15px;color:var(--tc-muted)}
.tc-goal__bar{height:14px;border-radius:999px;background:var(--tc-soft);box-shadow:inset 0 0 0 1px #e4e4df;overflow:hidden}
.tc-goal__bar i{display:block;height:100%;min-width:14px;border-radius:999px;background:var(--tc-orange)}
.tc-giving-card .vc_column-inner>.wpb_wrapper{text-align:center}
.tc-giving-card .vcex-heading.tc-display{font-size:clamp(52px,8.5vw,110px)!important;color:var(--tc-ink)}
.tc-giving-card .tc-lead{font-size:19px;color:#fff}
.tc-giving-card .tc-lead p{max-width:34ch}
.vc_row.vc_inner.tc-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:40px 0 44px!important}
.vc_row.vc_inner.tc-tiles>.wpb_column{width:auto!important;max-width:none;padding:0!important;margin:0!important;float:none}
.vc_row.vc_inner.tc-tiles>.wpb_column>.vc_column-inner{padding:0!important;height:100%}
.vc_row.vc_inner.tc-tiles .wpb_wrapper{height:100%}
.tc-need{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;box-sizing:border-box;background:#fff;color:var(--tc-ink);border-radius:var(--tc-radius-sm);padding:26px 22px;text-align:left;text-decoration:none;overflow:hidden}
.tc-need small{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tc-muted)}
.tc-need b{font-size:16px;font-weight:700}
.tc-need__amount{font-family:var(--tc-display);font-weight:900;font-size:40px;line-height:1;color:var(--tc-orange)}
.vc_row.vc_inner.tc-boxes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 0!important;text-align:left}
.vc_row.vc_inner.tc-boxes>.wpb_column{width:auto!important;padding:0!important;margin:0!important;float:none}
.vc_row.vc_inner.tc-boxes>.wpb_column>.vc_column-inner{padding:0!important;height:100%}
.vc_row.vc_inner.tc-boxes .wpb_wrapper{height:100%;text-align:left}
.tc-box{height:100%;box-sizing:border-box;background:var(--tc-soft);border-radius:var(--tc-radius-sm);padding:24px}
.tc-box small{display:block;margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tc-orange)}
.tc-box__text p{margin:0;font-size:20px;line-height:1.5;color:var(--tc-ink)}
.tc-box__text strong{font-size:26px;line-height:1.3}
.vc_row.tc-close .vcex-heading{text-align:center}
.vc_row.tc-close .wpb_wrapper{text-align:center}
@media(max-width:760px){
 .tc-giving .vcex-button[class*="tc-pill-"],.tc-close .vcex-button[class*="tc-pill-"]{display:flex!important;width:100%;margin-right:0}
 .vc_row.vc_inner.tc-tiles{grid-template-columns:1fr 1fr}
 .vc_row.vc_inner.tc-boxes{grid-template-columns:1fr}
}
/* Grid rows: WPBakery's clearfix pseudo-elements would become grid items. */
.vc_row.vc_inner.tc-tiles::before,.vc_row.vc_inner.tc-tiles::after,.vc_row.vc_inner.tc-boxes::before,.vc_row.vc_inner.tc-boxes::after,.tc-tiles>.vc_column-inner>.wpb_wrapper::before,.tc-tiles>.vc_column-inner>.wpb_wrapper::after{display:none!important}
#site-navigation .main-navigation-ul > .menu-item:not(#menu-item-1226) > a,#site-navigation .main-navigation-ul > .menu-item:not(#menu-item-1226) > a .link-inner{font-weight:700!important;font-size:16px}
.vc_row.tc-close .vc_column-inner>.wpb_wrapper{max-width:1040px;margin:0 auto}
.vc_row.tc-close .vcex-heading{margin-bottom:14px!important}
.vcex-button[href^="mailto:"][class*="tc-pill-"]{text-transform:none;letter-spacing:.01em}
.tc-card-orange .vcex-heading{margin-bottom:14px!important}

/* ---------- TC-WO-4 polish ---------- */
/* Need tiles: no underline anywhere, lift + shadow on hover, optional photo with a readable overlay. */
.tc-need,.tc-need *,a.tc-need:hover,a.tc-need:hover *,a.tc-need:focus,a.tc-need:focus *{text-decoration:none!important}
a.tc-need{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
a.tc-need:hover,a.tc-need:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px rgba(12,20,40,.28)}
a.tc-need:focus-visible{outline:3px solid #fff;outline-offset:3px}
.tc-need>*{position:relative;z-index:2}
.tc-need--image{justify-content:flex-end;min-height:230px;background:var(--tc-ink);color:#fff}
.tc-need>.tc-need__img{position:absolute;z-index:0;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tc-need__shade{position:absolute!important;z-index:1!important;inset:0}
/* About 60-74% overlay, heavier at the bottom where the text sits: white text stays >= 4.5:1 even over a pure white photo area (see TC-WO-4 return). */
.tc-need--ink .tc-need__shade{background:linear-gradient(180deg,rgba(29,29,27,.58) 0%,rgba(29,29,27,.74) 100%)}
.tc-need--blue .tc-need__shade{background:linear-gradient(180deg,rgba(18,52,120,.62) 0%,rgba(18,40,90,.78) 100%)}
.tc-need--image small{color:#fff}
.tc-need--image b{color:#fff}
.tc-need--image .tc-need__amount{color:var(--tc-yellow)}
.tc-need--image small,.tc-need--image b,.tc-need--image .tc-need__amount{text-shadow:0 1px 2px rgba(0,0,0,.35)}
a.tc-need--image:hover .tc-need__img,a.tc-need--image:focus-visible .tc-need__img{transform:scale(1.05)}
.tc-giving-card .tc-lead{margin-bottom:0}
@media(max-width:760px){.vc_row.vc_inner.tc-tiles{gap:12px;margin:32px 0 36px!important}.tc-need{padding:20px 16px}.tc-need--image{min-height:190px}.tc-need__amount{font-size:34px}}

/* Journey timeline: hover/focus/tap/scroll highlights one stop (classes from assets/timeline.js; :hover/:focus work without JS). */
.tc-timeline>.vc_column-inner>.wpb_wrapper::after{content:"";display:block!important;position:absolute;z-index:0;left:0;top:9px;width:var(--tc-tl-x,0px);height:3px;border-radius:3px;background:var(--tc-yellow);transition:width .45s cubic-bezier(.2,.7,.2,1),height .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.tc-stop{z-index:1;border-radius:14px;outline:0;transition:opacity .3s ease;-webkit-tap-highlight-color:transparent}
.tc-stop__dot{background:var(--tc-purple);box-shadow:inset 0 0 0 4px var(--tc-yellow),0 0 0 5px var(--tc-purple);transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .3s ease,box-shadow .3s ease}
.tc-stop__years{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.tc-stop__head,.tc-stop__line{transition:color .3s ease,opacity .3s ease}
.tc-stop__line{color:rgba(255,255,255,.88);opacity:1}
.tc-stop.is-active .tc-stop__dot,.tc-stop:hover .tc-stop__dot,.tc-stop:focus-visible .tc-stop__dot{background:var(--tc-yellow);transform:scale(1.4);box-shadow:inset 0 0 0 4px var(--tc-yellow),0 0 0 4px var(--tc-purple),0 0 0 9px rgba(255,190,11,.28)}
.tc-stop.is-active .tc-stop__years,.tc-stop:hover .tc-stop__years,.tc-stop:focus-visible .tc-stop__years{transform:translateY(-4px)}
.tc-stop.is-active .tc-stop__line,.tc-stop:hover .tc-stop__line,.tc-stop:focus-visible .tc-stop__line{color:#fff}
.tc-timeline .has-active .tc-stop:not(.is-active),.tc-timeline .wpb_wrapper:not(.tc-tl-js):has(.tc-stop:hover,.tc-stop:focus-visible) .tc-stop:not(:hover):not(:focus-visible){opacity:.72}
.tc-stop:focus-visible{outline:3px solid var(--tc-yellow);outline-offset:10px}
@media(max-width:959px){.tc-timeline>.vc_column-inner>.wpb_wrapper::after{left:9px;top:6px;width:3px;height:var(--tc-tl-y,0px)}}

/* Motion (assets/home-motion.js). Hero is always visible; below-fold reveals are initialized in JS. */
.tc-goal__bar i{transform-origin:left center}
@media(prefers-reduced-motion:reduce){
 a.tc-need,.tc-need__img,.tc-stop,.tc-stop__dot,.tc-stop__years,.tc-stop__head,.tc-stop__line,.tc-timeline>.vc_column-inner>.wpb_wrapper::after{transition:none!important}
 a.tc-need:hover,a.tc-need:focus-visible,a.tc-need--image:hover .tc-need__img{transform:none}
}

/* ---------- TC-WO-4b colour texture: soft gradient + film grain (WPBakery "Coffee texture" on rows) ----------
   Technique after elevenlabs.io/pricing: a blurred colour field with a 256px grey-noise tile blended with overlay,
   shown at 128 CSS px on 2× screens. Ours is CSS gradients (no photo files) + our own seeded noise (brand/build-grain.cjs).
   WPBakery keeps setting the flat background-color underneath; only background-image layers are added. */
.tc-tex{--tc-noise-size:256px;background-image:url(grain/noise-256.webp),var(--tc-a1),var(--tc-a2),var(--tc-a3),var(--tc-a4),var(--tc-g1),var(--tc-g2),var(--tc-g0)!important;background-size:var(--tc-noise-size) var(--tc-noise-size),100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%!important;background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat!important;background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0!important;background-blend-mode:overlay,normal,normal,normal,normal,normal,normal,normal}
@media(min-resolution:2dppx){.tc-tex{--tc-noise-size:128px}}
/* Aurora (TC-WO-4c, after ElevenLabs' customer cards): soft cloud-like hints of a contrasting hue on each colour,
   e.g. pink + cyan on blue, coral + lavender on purple, peach + navy shadow on orange. Kept light behind text. */
.tc-tex--orange{--tc-g0:linear-gradient(135deg,#fd6a14 0%,#fb5607 55%,#f04a06 100%);--tc-g1:radial-gradient(60% 80% at 8% 0%,rgba(255,150,70,0.45) 0%,rgba(255,150,70,0.25) 38%,rgba(255,150,70,0) 100%);--tc-g2:radial-gradient(55% 75% at 100% 100%,rgba(214,46,10,0.45) 0%,rgba(214,46,10,0.25) 38%,rgba(214,46,10,0) 100%);--tc-a1:radial-gradient(55% 60% at 70% -8%,rgba(255,205,160,0.55) 0%,rgba(255,205,160,0.30) 38%,rgba(255,205,160,0) 100%);--tc-a2:radial-gradient(40% 55% at 102% 40%,rgba(255,170,120,0.35) 0%,rgba(255,170,120,0.19) 38%,rgba(255,170,120,0) 100%);--tc-a3:radial-gradient(55% 70% at 104% 104%,rgba(45,28,96,0.55) 0%,rgba(45,28,96,0.30) 38%,rgba(45,28,96,0) 100%);--tc-a4:radial-gradient(35% 45% at -4% 104%,rgba(200,40,140,0.32) 0%,rgba(200,40,140,0.18) 38%,rgba(200,40,140,0) 100%)}
.tc-tex--purple{--tc-g0:linear-gradient(135deg,#8b40f0 0%,#8338ec 50%,#7631e2 100%);--tc-g1:radial-gradient(55% 75% at 6% 0%,rgba(170,110,255,0.45) 0%,rgba(170,110,255,0.25) 38%,rgba(170,110,255,0) 100%);--tc-g2:radial-gradient(60% 80% at 100% 100%,rgba(84,44,214,0.45) 0%,rgba(84,44,214,0.25) 38%,rgba(84,44,214,0) 100%);--tc-a1:radial-gradient(30% 70% at -6% 96%,rgba(255,96,80,0.55) 0%,rgba(255,96,80,0.30) 38%,rgba(255,96,80,0) 100%);--tc-a2:radial-gradient(45% 60% at 98% 10%,rgba(240,170,225,0.42) 0%,rgba(240,170,225,0.23) 38%,rgba(240,170,225,0) 100%);--tc-a3:radial-gradient(40% 45% at 60% 104%,rgba(58,134,255,0.38) 0%,rgba(58,134,255,0.21) 38%,rgba(58,134,255,0) 100%);--tc-a4:radial-gradient(35% 40% at 30% -6%,rgba(255,150,200,0.25) 0%,rgba(255,150,200,0.14) 38%,rgba(255,150,200,0) 100%)}
.tc-tex--blue{--tc-g0:linear-gradient(135deg,#4490ff 0%,#3a86ff 50%,#337bfa 100%);--tc-g1:radial-gradient(55% 75% at 6% 0%,rgba(120,175,255,0.45) 0%,rgba(120,175,255,0.25) 38%,rgba(120,175,255,0) 100%);--tc-g2:radial-gradient(60% 80% at 100% 100%,rgba(48,92,236,0.45) 0%,rgba(48,92,236,0.25) 38%,rgba(48,92,236,0) 100%);--tc-a1:radial-gradient(45% 50% at 14% -4%,rgba(255,196,210,0.68) 0%,rgba(255,196,210,0.37) 38%,rgba(255,196,210,0) 100%);--tc-a2:radial-gradient(40% 45% at 98% 38%,rgba(255,205,220,0.52) 0%,rgba(255,205,220,0.29) 38%,rgba(255,205,220,0) 100%);--tc-a3:radial-gradient(50% 55% at -6% 104%,rgba(14,40,110,0.5) 0%,rgba(14,40,110,0.28) 38%,rgba(14,40,110,0) 100%);--tc-a4:radial-gradient(40% 45% at 104% 104%,rgba(40,200,235,0.4) 0%,rgba(40,200,235,0.22) 38%,rgba(40,200,235,0) 100%)}
.tc-tex--yellow{--tc-g0:linear-gradient(135deg,#ffc81f 0%,#ffbe0b 50%,#ffb20b 100%);--tc-g1:radial-gradient(55% 75% at 6% 0%,rgba(255,224,110,0.5) 0%,rgba(255,224,110,0.28) 38%,rgba(255,224,110,0) 100%);--tc-g2:radial-gradient(60% 80% at 100% 100%,rgba(255,150,10,0.4) 0%,rgba(255,150,10,0.22) 38%,rgba(255,150,10,0) 100%);--tc-a1:radial-gradient(45% 50% at 100% -4%,rgba(255,150,170,0.5) 0%,rgba(255,150,170,0.28) 38%,rgba(255,150,170,0) 100%);--tc-a2:radial-gradient(45% 45% at -4% 104%,rgba(251,86,7,0.4) 0%,rgba(251,86,7,0.22) 38%,rgba(251,86,7,0) 100%);--tc-a3:radial-gradient(35% 40% at 60% 104%,rgba(255,120,160,0.25) 0%,rgba(255,120,160,0.14) 38%,rgba(255,120,160,0) 100%);--tc-a4:radial-gradient(40% 40% at 30% -6%,rgba(255,240,190,0.45) 0%,rgba(255,240,190,0.25) 38%,rgba(255,240,190,0) 100%)}
.tc-tex--ink{--tc-g0:linear-gradient(135deg,#262623 0%,#1d1d1b 55%,#151513 100%);--tc-g1:radial-gradient(55% 75% at 6% 0%,rgba(70,70,64,0.45) 0%,rgba(70,70,64,0.25) 38%,rgba(70,70,64,0) 100%);--tc-g2:radial-gradient(60% 80% at 100% 100%,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.17) 38%,rgba(0,0,0,0) 100%);--tc-a1:radial-gradient(50% 50% at 100% 0%,rgba(131,56,236,0.4) 0%,rgba(131,56,236,0.22) 38%,rgba(131,56,236,0) 100%);--tc-a2:radial-gradient(45% 45% at 0% 100%,rgba(58,134,255,0.3) 0%,rgba(58,134,255,0.17) 38%,rgba(58,134,255,0) 100%);--tc-a3:radial-gradient(30% 35% at 60% -6%,rgba(251,86,7,0.22) 0%,rgba(251,86,7,0.12) 38%,rgba(251,86,7,0) 100%);--tc-a4:linear-gradient(transparent,transparent)}
/* Need tiles: bigger need name, tighter stack (TC-WO-4b). */
.tc-need{gap:4px}
.tc-need b{font-size:clamp(20px,1.65vw,24px);line-height:1.12;letter-spacing:-.005em}
.tc-need__amount{margin-top:6px}
@media(max-width:760px){.tc-need b{font-size:18px}}
/* Long pill labels on phones (e.g. "What's in your hands?"): text may wrap, the icon stays beside it (was dropping below). */
.vcex-button[class*="tc-pill-"] .theme-button-inner{flex-wrap:nowrap!important;text-align:center}
.vcex-button[class*="tc-pill-"] .theme-button-icon-right{flex-shrink:0}
/* Orange card call to action (TC-WO-4c): side by side (≥1200px, vc_col-lg) the button sits flush right, mirroring
   the text's left inset; stacked it sits under the text; on phones it is a full-width block like the giving pills. */
.tc-card-orange>.wpb_column:last-child .wpb_wrapper{text-align:right}
.tc-card-orange>.wpb_column:last-child .vcex-button{margin-right:0!important;margin-bottom:0}
@media(max-width:1199px){
 .tc-card-orange>.wpb_column:last-child .wpb_wrapper{text-align:left}
 .tc-card-orange>.wpb_column:last-child .vcex-button{margin-top:22px}
}
@media(max-width:767px){.tc-card-orange>.wpb_column:last-child .vcex-button{display:flex!important;width:100%}}

/* ---------- TC-WO-4d menu hover: small aurora + grain (same family as Coffee texture) ----------
   A texture layer fades in behind the label. Outline pills: orange with a yellow glint and a magenta hint.
   Give: deep blue (white text ≈4.6:1) with cyan/purple hints, and its border turns blue to match (was an orange
   border around an ink fill). Venmo stays a plain link. */
body #site-navigation .main-navigation-ul > .menu-item:not(#menu-item-1226) > a{position:relative;isolation:isolate;overflow:hidden}
body #site-navigation .main-navigation-ul > .menu-item:not(#menu-item-1226) > a::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .25s ease;pointer-events:none;
 background-image:url(grain/noise-256.webp),var(--tc-n1),var(--tc-n2),var(--tc-n0);background-size:128px 128px,100% 100%,100% 100%,100% 100%;background-repeat:repeat,no-repeat,no-repeat,no-repeat;background-blend-mode:overlay,normal,normal,normal;
 --tc-n0:linear-gradient(120deg,#ff7a2a 0%,#fb5607 48%,#e9480a 100%);--tc-n1:radial-gradient(60% 90% at 12% 0%,rgba(255,190,11,.5) 0%,rgba(255,190,11,0) 70%);--tc-n2:radial-gradient(55% 90% at 100% 100%,rgba(196,40,150,.32) 0%,rgba(196,40,150,0) 70%)}
body #site-navigation .main-navigation-ul > .menu-item:last-child:not(#menu-item-1226) > a::after{--tc-n0:linear-gradient(120deg,#3f8bff 0%,#2f6fe6 48%,#2558cc 100%);--tc-n1:radial-gradient(55% 90% at 10% 0%,rgba(80,225,210,.32) 0%,rgba(80,225,210,0) 70%);--tc-n2:radial-gradient(60% 95% at 100% 100%,rgba(131,56,236,.5) 0%,rgba(131,56,236,0) 70%)}
body #site-navigation .main-navigation-ul > .menu-item:not(#menu-item-1226) > a:is(:hover,:focus-visible)::after{opacity:1}
body #site-navigation .main-navigation-ul > .menu-item:not(#menu-item-1226) > a:is(:hover,:focus-visible){color:#fff!important}
body #site-navigation .main-navigation-ul > .menu-item:last-child > a:is(:hover,:focus-visible){background:transparent!important}
body #site-navigation .main-navigation-ul > .menu-item:last-child:has(> a:is(:hover,:focus-visible)){border-color:#2f6fe6!important;background:#2f6fe6;transition:border-color .25s ease,background-color .25s ease}
body #site-navigation .main-navigation-ul > .menu-item:last-child{transition:border-color .25s ease,background-color .25s ease}
@media(prefers-reduced-motion:reduce){body #site-navigation .main-navigation-ul > .menu-item > a::after,body #site-navigation .main-navigation-ul > .menu-item:last-child{transition:none!important}}

/* ---------- TC-WO-4e button hovers: every pill goes from its colour to that colour's aurora (no more → black) ----------
   Same layer as the menu: a texture (gradient + hints + film grain) fades in behind the label. Audit and contrast
   notes: docs/work/TC-WO-4/button-audit.md.
   orange → orange aurora, white text · ink → ink aurora (purple/blue hints), white text
   ink outline → fills with the ink aurora, text turns white
   white / white outline → "pearl" aurora (white with a faint peach + lavender haze); text deepens one shade
   (orange #c43f08, blue #2563d8, ink) so it keeps contrast on the haze. */
.vcex-button[class*="tc-pill-"]{position:relative;isolation:isolate;overflow:hidden}
.vcex-button[class*="tc-pill-"]::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .25s ease;pointer-events:none;
 background-image:url(grain/noise-256.webp),var(--tc-n1),var(--tc-n2),var(--tc-n0);background-size:128px 128px,100% 100%,100% 100%,100% 100%;background-repeat:repeat,no-repeat,no-repeat,no-repeat;background-blend-mode:overlay,normal,normal,normal;
 --tc-n0:linear-gradient(120deg,#ff7a2a 0%,#fb5607 48%,#e9480a 100%);--tc-n1:radial-gradient(60% 90% at 12% 0%,rgba(255,190,11,.5) 0%,rgba(255,190,11,0) 70%);--tc-n2:radial-gradient(55% 90% at 100% 100%,rgba(196,40,150,.32) 0%,rgba(196,40,150,0) 70%)}
.vcex-button.tc-pill-ink::after,.vcex-button.tc-pill-line::after{--tc-n0:linear-gradient(120deg,#33332f 0%,#1d1d1b 50%,#121211 100%);--tc-n1:radial-gradient(55% 90% at 10% 0%,rgba(58,134,255,.32) 0%,rgba(58,134,255,0) 70%);--tc-n2:radial-gradient(60% 95% at 100% 100%,rgba(131,56,236,.5) 0%,rgba(131,56,236,0) 70%)}
.vcex-button.tc-pill-white::after,.vcex-button.tc-pill-line-white::after{--tc-n0:linear-gradient(120deg,#ffffff 0%,#fbf8f6 55%,#f3f1fb 100%);--tc-n1:radial-gradient(60% 95% at 8% 0%,rgba(255,196,160,.5) 0%,rgba(255,196,160,0) 70%);--tc-n2:radial-gradient(60% 95% at 100% 100%,rgba(160,175,255,.45) 0%,rgba(160,175,255,0) 70%)}
.vcex-button[class*="tc-pill-"]:is(:hover,:focus-visible)::after{opacity:1}
.vcex-button.tc-pill-line:is(:hover,:focus-visible),.vcex-button.tc-pill-ink:is(:hover,:focus-visible),.vcex-button.tc-pill-orange:is(:hover,:focus-visible){color:#fff!important}
.vcex-button.tc-pill-white:is(:hover,:focus-visible){color:#2563d8!important}
.tc-card-orange .vcex-button.tc-pill-white:is(:hover,:focus-visible){color:#c43f08!important}
.vcex-button.tc-pill-line-white:is(:hover,:focus-visible){color:var(--tc-ink)!important}
.vcex-button[class*="tc-pill-"]:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.vcex-button[class*="tc-pill-"]::after{transition:none!important}}

/* TC-WO-4f: optical centring of pill labels (measured by docs/work/TC-WO-4/pill-centre.cjs). Elza's ascent is much
   larger than its descent, so uppercase caps sat 2.4px above the pill centre and the icons 1.8px. The label row
   moves down .14em (caps centred); icons move back up .035em so they stay centred with the caps. The lowercase
   email pill centres its x-height/cap midpoint instead. Transform only: pill size and layout are unchanged. */
.vcex-button[class*="tc-pill-"] .theme-button-inner{transform:translateY(.14em)}
.vcex-button[class*="tc-pill-"] :is(.theme-button-icon-right,.theme-button-icon-left){transform:translateY(-.035em)}
.vcex-button[href^="mailto:"][class*="tc-pill-"] .theme-button-inner{transform:translateY(.092em)}