/*
Theme Name: CARDO Sierra Leone
Theme URI: https://www.cardo-sl.org/
Author: CARDO Sierra Leone
Description: Deep-green and gold, donation-focused theme for CARDO Sierra Leone. Works with the CARDO Core plugin. Page sections are plain HTML blocks (editable in Elementor's HTML widget or the WordPress editor).
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: cardo
*/

/* Anton (display) and Inter (body) are loaded from Google Fonts in functions.php (cardo_theme_assets).
   If you prefer to self-host them, download the .woff2 files into assets/fonts/ and swap the @font-face
   src below for local files, then remove the Google Fonts enqueue. */
/* ===== Tokens (sampled from the approved design) ===== */
:root{
  --green:#15543A; --green-2:#0D2F21; --green-3:#071B12; --ink:#0D3B29; --link:#17633F;
  --gold:#F3BC2E; --gold-2:#E2A917; --cream:#F6F3E8; --mint:#F5FAF6; --line:#E2E6E1; --muted:#4C5B53;
  --f-display:"Anton","Bebas Neue","League Gothic","Avenir Next Condensed","Impact","Haettenschweiler","Arial Narrow Bold","sans-serif-condensed",sans-serif;
  --f-serif:"Fraunces","Source Serif 4","Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1180px; --gut:clamp(1.1rem,4vw,2.25rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--f-body);font-size:1rem;line-height:1.65;color:var(--muted);background:#fff;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--link);text-underline-offset:3px}
a:hover{color:var(--green)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #0B6BCB;outline-offset:2px}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink);font-weight:400}
h1,h2,.cx-display{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.005em;line-height:.98}
h2{font-size:clamp(2.2rem,4.5vw,4.8rem);letter-spacing:.01em}
h3{font-family:var(--f-serif);font-weight:700;font-size:1.3rem;line-height:1.2}
p{margin:0 0 1.05em}
figure{margin:0}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{clip:auto;clip-path:none;height:auto;width:auto;margin:0;position:fixed;left:8px;top:8px;z-index:100000;background:#fff;color:var(--ink);padding:.9rem 1.2rem;border-radius:8px;box-shadow:0 0 0 3px #0B6BCB}
.cx-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ===== Buttons ===== */
.cx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.65rem 1.4rem;border-radius:999px;border:2px solid transparent;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.05em;font-size:.98rem;line-height:1;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .15s}
.cx-btn-y{background:var(--gold);color:var(--green-3);border-color:var(--gold)}
.cx-btn-y:hover{background:#FFD35E;border-color:#FFD35E;color:var(--green-3)}
.cx-btn-w{background:#fff;color:var(--green-3);border-color:#fff}
.cx-btn-w:hover{background:var(--cream);color:var(--green-3)}
.cx-btn-ow{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.cx-btn-ow:hover{background:#fff;color:var(--green-3)}
.cx-btn-d{background:var(--green-2);color:#fff;border-color:var(--green-2)}
.cx-btn-d:hover{background:var(--green);color:#fff;border-color:var(--green)}
.cx-link{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;color:var(--link);text-decoration:none;font-size:.92rem;border-bottom:1.5px solid rgba(23,99,63,.35);padding-bottom:2px}
.cx-link:hover{color:var(--green);border-color:var(--green)}
.cx-dark .cx-link,.cx-green .cx-link{color:#fff;border-color:rgba(255,255,255,.5)}
.cx-actions{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* ===== Top bar + header ===== */
.cx-top{background:var(--green-3);color:#DDE8E1;font-size:.78rem}
.cx-top .cx-wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:36px}
.cx-top a{color:#DDE8E1;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;padding:.35rem 0}
.cx-top a:hover{color:#fff;text-decoration:underline}
.cx-top-r{display:flex;align-items:center;gap:1.1rem}
.cx-top svg{width:14px;height:14px}
.cx-social{display:flex;gap:.55rem}
.cx-social a{width:26px;height:26px;justify-content:center;border-radius:50%}
.cx-head{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.cx-head.is-stuck{box-shadow:0 6px 20px rgba(7,27,18,.12)}
.cx-head-in{display:flex;align-items:center;gap:1.25rem;min-height:74px}
.cx-logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:none}
.cx-logo img{height:46px;width:auto}
.cx-nav{margin-inline:auto}
.cx-nav>ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.25rem}
.cx-nav>ul>li{position:relative}
.cx-nav>ul>li>a,.cx-nav>ul>li>button{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.04em;font-size:1rem;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;padding:.9rem .7rem;display:inline-flex;align-items:center;gap:.3rem;position:relative}
.cx-nav>ul>li>a::after,.cx-nav>ul>li>button::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.55rem;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .15s}
.cx-nav>ul>li:hover>a::after,.cx-nav>ul>li:hover>button::after,.cx-nav>ul>li.is-current>a::after,.cx-nav>ul>li.is-current>button::after,.cx-nav>ul>li.is-open>button::after{transform:scaleX(1)}
.cx-nav svg.chev{width:11px;height:11px;transition:transform .15s}
.cx-nav li.is-open svg.chev{transform:rotate(180deg)}
.cx-mega{position:absolute;left:50%;top:100%;transform:translateX(-32%);display:grid;grid-template-columns:230px minmax(320px,auto);background:#fff;border-top:3px solid var(--gold);box-shadow:0 24px 50px rgba(7,27,18,.25);opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s;z-index:70}
.cx-nav li:hover>.cx-mega,.cx-nav li.is-open>.cx-mega{opacity:1;visibility:visible}
/* After a link is clicked (or the page is scrolled) the menu is dismissed even if the pointer is still over it.
   The class is removed again when the pointer leaves, so hovering works normally afterwards. */
.cx-nav li.no-hover>.cx-mega,.cx-nav li.no-hover:hover>.cx-mega{opacity:0;visibility:hidden}
.cx-mega-intro{background:var(--green);color:#fff;padding:1.4rem 1.4rem 1.2rem;display:flex;flex-direction:column;gap:.7rem}
.cx-mega-intro .cx-eyebrow{color:var(--gold)}
.cx-mega-intro strong{font-family:var(--f-display);text-transform:uppercase;font-weight:400;font-size:1.25rem;line-height:1.05}
.cx-mega-intro a{color:#fff;font-size:.8rem;font-weight:800;text-decoration:none;margin-top:auto}
.cx-mega-links{list-style:none;margin:0;padding:.7rem 1rem;display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:0 1.5rem;align-content:start}
.cx-mega-links li{border-bottom:1px solid var(--line)}
.cx-mega-links a{display:flex;justify-content:space-between;gap:.75rem;padding:.75rem .1rem;font-size:.82rem;font-weight:700;color:var(--ink);text-decoration:none}
.cx-mega-links a:hover{color:var(--link)}
.cx-head-r{display:flex;align-items:center;gap:.6rem;flex:none}
.cx-icon-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.cx-icon-btn:hover{border-color:var(--green)}
.cx-burger{display:none}
@media (max-width:1060px){
  .cx-burger{display:inline-flex}
  .cx-head-r .cx-btn-y{display:none}
  .cx-nav{position:fixed;inset:0 0 0 auto;width:min(92vw,410px);background:#fff;transform:translateX(105%);transition:transform .25s;padding:4.5rem 1.2rem 2rem;overflow-y:auto;z-index:80;box-shadow:-12px 0 30px rgba(0,0,0,.2);visibility:hidden;margin:0}
  .cx-nav.is-open{transform:none;visibility:visible}
  .cx-nav>ul{display:block}
  .cx-nav>ul>li{border-bottom:1px solid var(--line)}
  .cx-nav>ul>li>a,.cx-nav>ul>li>button{width:100%;justify-content:space-between;font-size:1.25rem;padding:1rem .2rem}
  .cx-nav>ul>li>a::after,.cx-nav>ul>li>button::after{display:none}
  .cx-mega{position:static;transform:none;display:none;grid-template-columns:1fr;box-shadow:none;border-top:0;opacity:1;visibility:visible}
  .cx-nav li.is-open>.cx-mega{display:block}
  .cx-nav li:hover>.cx-mega{display:none}
  .cx-nav li.is-open:hover>.cx-mega{display:block}
  .cx-mega-intro{display:none}
  .cx-mega-links{grid-template-columns:1fr;padding:0 0 .8rem .6rem}
  .cx-nav-close{display:inline-flex;position:absolute;top:1rem;right:1rem}
  .cx-nav-donate{display:flex;margin-top:1.2rem}
  body.nav-open{overflow:hidden}
  .cx-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:45;display:none}
  body.nav-open .cx-scrim{display:block}
}
@media (min-width:1061px){.cx-nav-close,.cx-nav-donate,.cx-scrim{display:none}}
@media (max-width:700px){.cx-top .cx-tag{display:none}.cx-top .cx-wrap{justify-content:center}}

/* ===== Floating buttons ===== */
.cx-float{position:fixed;right:1rem;bottom:1rem;z-index:50;display:flex;gap:.5rem;align-items:center}
.cx-float .cx-btn{box-shadow:0 8px 22px rgba(0,0,0,.28);min-height:48px}
/* Hidden near the top of the page (where the header's own Donate button, and on the homepage the hero
   slide's own Donate button, are already visible) to avoid showing two Donate buttons at once. Shown
   once the visitor has scrolled, alongside the back-to-top button (site.js toggles .is-visible). */
.js .cx-float .cx-btn-y{opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.js .cx-float.is-visible .cx-btn-y{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.cx-float .cx-btn-y{transition:none}}
.cx-topbtn{width:48px;height:48px;border-radius:50%;background:var(--gold);color:var(--green-3);border:0;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.28);display:none;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-display);font-size:.6rem;padding:0;line-height:1}
.cx-topbtn.is-visible{display:inline-flex}
.cx-topbtn svg{width:16px;height:16px}

/* ===== Section scaffolding ===== */
.cx-sec{padding-block:clamp(3.5rem,7vw,6rem)}
.cx-green{background:var(--green);color:#DCE9E1}.cx-dark{background:var(--green-2);color:#DCE9E1}.cx-darker{background:var(--green-3);color:#DCE9E1}
.cx-cream{background:var(--cream)}.cx-mint{background:var(--mint)}
.cx-green h2,.cx-dark h2,.cx-darker h2,.cx-green h3,.cx-dark h3{color:#fff}
.cx-eyebrow{display:block;font-family:var(--f-body);font-weight:800;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--link);margin-bottom:.9rem}
.cx-green .cx-eyebrow,.cx-dark .cx-eyebrow,.cx-darker .cx-eyebrow,.cx-hero .cx-eyebrow,.pg-hero .cx-eyebrow{color:var(--gold)}
.cx-lead{font-size:1.1rem;max-width:44rem}
.cx-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.cx-head-row h2{margin:0}

/* Page hero */
.pg-hero{position:relative;background:var(--green-2);color:#fff;overflow:hidden}
.pg-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.pg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,27,18,.88),rgba(7,27,18,.35) 70%,rgba(7,27,18,.15))}
.pg-hero .cx-wrap{position:relative;z-index:2;padding-block:clamp(4rem,9vw,7.5rem)}
.pg-hero h1{color:#fff;font-size:clamp(2.7rem,7vw,5.4rem);max-width:15em;margin-bottom:1rem}
.pg-hero p{font-size:1.15rem;max-width:36rem;color:#EAF1EC}
.pg-hero .cx-crumbs{font-size:.8rem;margin-bottom:1rem;color:#DDE8E1}
.pg-hero .cx-crumbs a{color:#fff}

/* Stats */
.cx-stats{background:var(--green-2);color:#fff;border-bottom:4px solid var(--gold)}
.cx-stats .cx-wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.cx-stat{padding:1.6rem 1.2rem;border-left:1px solid rgba(255,255,255,.14)}
.cx-stat:first-child{border-left:0}
.cx-stat b{display:block;font-family:var(--f-serif);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1;color:#fff}
.cx-stat span{font-size:.78rem;color:#B9CDC1}
@media (max-width:700px){.cx-stats .cx-wrap{grid-template-columns:1fr 1fr}.cx-stat:nth-child(3){border-left:0}}

/* Give band */
.cx-give .cx-wrap{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.cx-give h2{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:.6rem}
.cx-amt{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.cx-amt a:not(.cx-btn){background:#fff;color:var(--green-3);text-align:center;padding:.85rem 0;font-family:var(--f-display);font-size:1.15rem;text-decoration:none;border:2px solid #fff}
.cx-amt a:not(.cx-btn):hover{background:var(--cream)}
.cx-amt .cx-btn{grid-column:1/-1;border-radius:0}
@media (max-width:820px){.cx-give .cx-wrap{grid-template-columns:1fr}}

/* Donation section + card */
.cx-donate{background:linear-gradient(115deg,#fff 40%,#FBEFC7 100%)}
.cx-donate .cx-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start}
.cx-donate h2{font-size:clamp(2.4rem,5vw,4rem);color:var(--ink)}
.cx-ticks{list-style:none;margin:1.4rem 0;padding:0}
.cx-ticks li{padding:.8rem 0 .8rem 1.7rem;border-bottom:1px solid var(--line);position:relative;font-size:.92rem}
.cx-ticks li::before{content:"✓";position:absolute;left:0;color:var(--gold-2);font-weight:900}
.cx-card{background:#fff;border-top:4px solid var(--gold);box-shadow:0 24px 60px rgba(13,59,41,.16);padding:1.6rem}
.cx-card h3{font-family:var(--f-body);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--link);margin-bottom:.9rem}
.cx-amts{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1rem}
.cx-amts label{position:relative}
.cx-amts input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.cx-amts span{display:block;text-align:center;padding:.7rem 0;border:1.5px solid #D5DCD6;font-family:var(--f-display);font-size:1.1rem;color:var(--ink)}
.cx-amts input:checked+span{background:var(--green);border-color:var(--green);color:#fff}
.cx-amts input:focus-visible+span{outline:3px solid #0B6BCB;outline-offset:2px}
.cx-field{margin-bottom:1rem}
.cx-field label{display:block;font-weight:800;font-size:.72rem;letter-spacing:.04em;margin-bottom:.35rem;color:var(--ink)}
.cx-field input,.cx-field select,.cx-field textarea{width:100%;min-height:46px;padding:.6rem .8rem;border:1.5px solid #C9D2CB;background:#fff;font:inherit;color:var(--ink);border-radius:0}
.cx-field textarea{min-height:8rem}
.cx-card .cx-btn{width:100%;border-radius:999px;min-height:50px}
.cx-card .cx-alt{display:block;text-align:center;margin-top:.9rem;font-weight:800;font-size:.85rem}
.cx-card .cx-note{font-size:.72rem;text-align:center;margin:.7rem 0 0;color:var(--muted)}
@media (max-width:900px){.cx-donate .cx-wrap{grid-template-columns:1fr}}

/* Guided path */
.cx-path .cx-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:3rem;align-items:center}
.cx-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.5rem}
.cx-tabs button{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.03em;font-size:.85rem;text-align:left;padding:.85rem .9rem;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.15);cursor:pointer}
.cx-tabs button[aria-selected="true"]{background:var(--gold);color:var(--green-3);border-color:var(--gold)}
.cx-panel{background:#fff;color:var(--muted);padding:1.4rem;border-top:4px solid var(--gold)}
.cx-panel[hidden]{display:none}
.cx-panel h3{font-family:var(--f-display);text-transform:uppercase;font-weight:400;font-size:1.6rem;color:var(--ink)}
@media (max-width:860px){.cx-path .cx-wrap{grid-template-columns:1fr}}

/* Who we are */
.cx-who .cx-wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.cx-who h2{font-size:clamp(2.4rem,5vw,3.8rem)}
@media (max-width:860px){.cx-who .cx-wrap{grid-template-columns:1fr}}

/* Programme cards (home) */
.cx-progs{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.cx-prog{position:relative}
.cx-prog .im{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:#dde}
.cx-prog img{width:100%;height:100%;object-fit:cover}
.cx-prog .no{position:absolute;left:0;bottom:0;background:var(--gold);color:var(--green-3);font-family:var(--f-display);font-size:.95rem;padding:.35rem .6rem;line-height:1}
.cx-prog h3{font-family:var(--f-display);text-transform:uppercase;font-weight:400;font-size:1.35rem;margin:1rem 0 .4rem;color:var(--ink);letter-spacing:.01em}
.cx-prog p{font-size:.88rem}
@media (max-width:980px){.cx-progs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cx-progs{grid-template-columns:1fr}}

/* Flagship */
.cx-flag .cx-wrap{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.cx-flag-im{position:relative;padding-bottom:22%}
.cx-flag-im img{width:72%;aspect-ratio:1/1.05;object-fit:cover}
.cx-flag-im img+img{position:absolute;right:0;bottom:0;width:58%;aspect-ratio:4/3;border:6px solid var(--green)}
.cx-flag h2{font-size:clamp(2.4rem,4.8vw,3.6rem)}
.cx-flag .cx-ticks li{border-color:rgba(255,255,255,.18);color:#fff}
@media (max-width:860px){.cx-flag .cx-wrap{grid-template-columns:1fr}}

/* Impact grid */
.cx-impact{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:2rem}
.cx-impact>div{padding:2rem 1.7rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cx-impact svg{width:22px;height:22px;color:var(--link);margin-bottom:1.6rem}
.cx-impact h3{font-size:1.15rem;margin-bottom:.5rem}
.cx-impact p{font-size:.88rem;margin:0}
@media (max-width:820px){.cx-impact{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.cx-impact{grid-template-columns:1fr}}

/* Causes */
.cx-causes{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.cx-cause{display:grid;grid-template-columns:42% 1fr;background:#fff;border:1px solid var(--line);min-height:210px}
.cx-cause img{width:100%;height:100%;object-fit:cover}
.cx-cause-b{padding:1.3rem 1.3rem 1.4rem;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.cx-cause-b .goal{font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--link)}
.cx-cause-b h3{font-family:var(--f-display);text-transform:uppercase;font-weight:400;font-size:1.55rem;margin:0;color:var(--ink);line-height:1}
.cx-cause-b h3 a{color:inherit;text-decoration:none}
.cx-cause-b p{font-size:.85rem;margin:0 0 .6rem}
.cx-cause-b .cx-btn{margin-top:auto;min-height:38px;padding:.45rem 1rem;font-size:.85rem}
@media (max-width:900px){.cx-causes{grid-template-columns:1fr}}
@media (max-width:520px){.cx-cause{grid-template-columns:1fr}.cx-cause img{aspect-ratio:3/2}}

/* Voices */
.cx-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.cx-quote{background:#fff;padding:1.7rem;display:flex;flex-direction:column;gap:1.4rem;justify-content:space-between}
.cx-quote blockquote{margin:0;font-family:var(--f-serif);font-size:1.02rem;line-height:1.55;color:var(--ink)}
.cx-who-p{display:flex;align-items:center;gap:.7rem}
.cx-av{width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.75rem;flex:none}
.cx-who-p b{display:block;font-size:.85rem;color:var(--ink);line-height:1.2}
.cx-who-p small{font-size:.7rem}
@media (max-width:900px){.cx-quotes{grid-template-columns:1fr}}

/* News cards */
.cx-news{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.cx-nc{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.cx-nc .im{aspect-ratio:3/2;overflow:hidden;display:block}
.cx-nc img{width:100%;height:100%;object-fit:cover}
.cx-nc-b{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.cx-nc .d{font-weight:800;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--link);margin-bottom:.6rem}
.cx-nc h3{font-family:var(--f-display);text-transform:uppercase;font-weight:400;font-size:1.4rem;line-height:1.02;margin:0 0 .6rem}
.cx-nc h3 a{color:var(--ink);text-decoration:none}
.cx-nc h3 a:hover{color:var(--link)}
.cx-nc p{font-size:.85rem}
.cx-nc .cx-link{margin-top:auto;align-self:flex-start;border:0;padding:0}
@media (max-width:900px){.cx-news{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cx-news{grid-template-columns:1fr}}

/* Partners */
.cx-partners{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.7rem;margin-top:1rem}
.cx-partners div{background:#fff;border:1px solid var(--line);height:84px;display:flex;align-items:center;justify-content:center;padding:.6rem}
.cx-partners img{max-height:100%;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.7}

/* CTA + newsletter + footer */
.cx-cta .cx-wrap{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.cx-cta h2{font-size:clamp(2.4rem,5vw,4rem);max-width:12em;margin-bottom:.6rem}
.cx-nl .cx-wrap{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.cx-nl h2{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.cx-nl-form{display:flex;flex-wrap:wrap;gap:0}
.cx-nl-form input[type=email]{flex:1;min-width:200px;min-height:50px;padding:.6rem 1rem;border:0;font:inherit;border-radius:0}
.cx-nl-form .cx-btn{border-radius:0;min-height:50px}
.cx-nl-form .cx-consent{flex-basis:100%;font-size:.78rem;margin-top:.7rem;color:#DDE8E1;display:flex;gap:.5rem;align-items:flex-start}
.cx-nl-form .cx-consent a{color:#fff}
.cx-nl .cd-notice{margin-bottom:1rem}
@media (max-width:860px){.cx-nl .cx-wrap{grid-template-columns:1fr}}
.cx-foot{background:var(--green-3);color:#B9CDC1;font-size:.88rem}
.cx-foot a{color:#DDE8E1;text-decoration:none}
.cx-foot a:hover{color:#fff;text-decoration:underline}
.cx-foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2.2rem;padding-block:3rem;border-top:1px solid rgba(255,255,255,.12)}
.cx-foot h4{font-family:var(--f-body);font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.cx-foot ul{list-style:none;margin:0;padding:0}
.cx-foot li a{display:inline-block;padding:.32rem 0}
.cx-foot .cx-logo{color:#fff;margin-bottom:1rem}
.cx-foot .cx-social a{border:1px solid rgba(255,255,255,.3);width:34px;height:34px}
.cx-foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-block:1rem;font-size:.75rem}
.cx-foot-bottom .cx-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem}
.cx-foot-bottom ul{display:flex;gap:1.2rem}
@media (max-width:900px){.cx-foot-grid{grid-template-columns:1fr 1fr}.cx-foot-about{grid-column:1/-1}}
@media (max-width:540px){.cx-foot-grid{grid-template-columns:1fr}}

/* About */
.cx-story .cx-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:start}
.cx-story figure img{width:100%;aspect-ratio:1/1.05;object-fit:cover}
.cx-mvv{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #DDD6BF;border-left:1px solid #DDD6BF}
.cx-mvv>div{padding:2.2rem 2rem;border-right:1px solid #DDD6BF;border-bottom:1px solid #DDD6BF}
.cx-mvv svg{width:22px;height:22px;color:var(--link);margin-bottom:1rem}
.cx-mvv h3{font-family:var(--f-body);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--link);margin-bottom:.8rem}
.cx-mvv p{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.05;color:var(--ink);margin:0}
.cx-places{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin:1.6rem 0}
.cx-places div{padding:1rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.85rem}
.cx-places small{display:block;font-size:.65rem;color:var(--link);font-weight:800}
.cx-places b{color:var(--ink)}
.cx-team{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2rem}
.cx-tm{background:#fff}
.cx-tm .ph{aspect-ratio:4/5;overflow:hidden;background:var(--green);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--f-display);font-size:3rem}
.cx-tm img{width:100%;height:100%;object-fit:cover}
.cx-tm div.t{padding:.9rem 1rem 1.1rem}
.cx-tm h3{font-size:1.05rem;text-transform:uppercase;margin:0 0 .25rem;letter-spacing:.01em}
.cx-tm small{font-weight:800;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--link)}
@media (max-width:900px){.cx-story .cx-wrap{grid-template-columns:1fr}.cx-team{grid-template-columns:1fr 1fr}.cx-places{grid-template-columns:repeat(2,1fr)}.cx-mvv{grid-template-columns:1fr}}

/* What we do rows */
.cx-rows{padding-block:1rem 3rem}
.cx-row{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;padding:3rem 0;border-bottom:1px solid var(--line)}
.cx-row:nth-child(even) .im{order:2}
.cx-row .im{position:relative;aspect-ratio:4/3;overflow:hidden}
.cx-row img{width:100%;height:100%;object-fit:cover}
.cx-row .no{position:absolute;left:0;bottom:0;background:var(--gold);color:var(--green-3);font-family:var(--f-display);padding:.4rem .7rem;line-height:1}
.cx-row h2{font-size:clamp(2.2rem,4.4vw,3.2rem)}
.cx-row .sub{font-size:1.1rem;color:var(--muted);margin-bottom:.7rem}
.cx-row p.cx-small{font-size:.9rem}
@media (max-width:820px){.cx-row{grid-template-columns:1fr;gap:1.4rem}.cx-row:nth-child(even) .im{order:0}}

/* Get involved tiles */
.cx-tiles{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cx-tiles>div{padding:2.6rem 2.2rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cx-tiles svg{width:26px;height:26px;color:var(--link);margin-bottom:1.2rem}
.cx-tiles h3{font-family:var(--f-display);text-transform:uppercase;font-weight:400;font-size:1.8rem;margin-bottom:.6rem}
@media (max-width:700px){.cx-tiles{grid-template-columns:1fr}}

/* Articles, archives */
.cx-article{max-width:46rem;margin-inline:auto;padding-block:clamp(2.5rem,5vw,4rem)}
.cx-article h3{margin-top:1.6em}
.cx-article figure img{width:100%}
.cx-article figcaption{font-size:.85rem;margin-top:.5rem}
.cx-meta{font-weight:800;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--link)}
.cx-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem;padding:0;list-style:none}
.cx-pills a{display:inline-flex;align-items:center;min-height:40px;padding:.4rem 1rem;border:1.5px solid var(--line);font-family:var(--f-display);text-transform:uppercase;font-size:.85rem;letter-spacing:.04em;text-decoration:none;color:var(--ink)}
.cx-pills .is-current a{background:var(--green);color:#fff;border-color:var(--green)}
.cx-pag{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:2.5rem}
.page-numbers{display:inline-flex;min-width:42px;min-height:42px;align-items:center;justify-content:center;border:1.5px solid var(--line);text-decoration:none;font-weight:800;color:var(--ink);padding:0 .8rem}
.page-numbers.current{background:var(--green);color:#fff;border-color:var(--green)}
.cx-share{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:2rem 0;padding:1rem 0;border-block:1px solid var(--line);align-items:center}
.cx-prose{max-width:46rem}
.cx-prose h2{font-family:var(--f-display);font-size:1.9rem;margin-top:1.6em}
.cx-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.cx-gallery a{display:block;aspect-ratio:1;overflow:hidden}
.cx-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.cx-gallery a:hover img{transform:scale(1.05)}
@media (max-width:820px){.cx-gallery{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:520px){.cx-gallery{grid-template-columns:1fr 1fr}}
.cx-contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem}
.cx-contact ul{list-style:none;margin:1rem 0;padding:0}
.cx-contact li{margin-bottom:1rem}
@media (max-width:820px){.cx-contact{grid-template-columns:1fr}}
.cx-form-dark .cd-form label{color:#fff}
@media print{.cx-top,.cx-head,.cx-float,.cx-foot,.cx-nl,.cx-cta{display:none!important}}
.cx-nav .chev{display:inline-flex}
.cx-nav .chev svg{width:11px;height:11px}

/* ===== Search ===== */
.cx-search{background:var(--green-2);padding:1.6rem 0 1.3rem;border-bottom:4px solid var(--gold)}
.cx-search[hidden]{display:none}
.cx-sform{position:relative;max-width:820px}
.cx-sbox{display:flex;align-items:center;background:#fff;border:2px solid transparent;padding:.3rem .3rem .3rem 1rem;gap:.7rem}
.cx-sbox:focus-within{border-color:var(--gold)}
.cx-sbox svg{width:20px;height:20px;color:var(--green);flex:none}
.cx-sbox input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:1.05rem;color:var(--ink);min-height:48px}
.cx-sbox input:focus-visible{outline:0}
.cx-sbox .cx-btn{min-height:46px;border-radius:0}
.cx-suggest{position:absolute;left:0;right:0;top:100%;z-index:90;list-style:none;margin:0;padding:0;background:#fff;box-shadow:0 20px 40px rgba(7,27,18,.3);border-top:1px solid var(--line);max-height:22rem;overflow:auto}
.cx-suggest[hidden]{display:none}
.cx-suggest li a{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1rem;text-decoration:none;color:var(--ink);font-weight:700;border-bottom:1px solid var(--line)}
.cx-suggest li a small{font-weight:800;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--link);align-self:center}
.cx-suggest li[aria-selected="true"] a,.cx-suggest li a:hover{background:var(--cream)}
.cx-popular{margin:1rem 0 0;font-size:.85rem;color:#C9D9CF}
.cx-popular a{color:#fff;margin-left:.9rem;font-weight:700}
.cx-results{list-style:none;margin:0;padding:0}
.cx-results li{background:#fff;border:1px solid var(--line);padding:1.3rem 1.5rem;margin-bottom:.9rem}
.cx-results h2{font-family:var(--f-display);font-size:1.6rem;margin:.3rem 0 .4rem}
.cx-results h2 a{color:var(--ink);text-decoration:none}
.cx-results h2 a:hover{color:var(--link)}
.cx-results p{margin:0;font-size:.92rem}
.cx-tag2{font-weight:800;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--link)}
.cx-noresults{background:#fff;border:1px solid var(--line);padding:2rem}
.cx-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:2.5rem}
.cx-strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:560px){.cx-sbox .cx-btn{padding-inline:.9rem}}

.cx-two{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start}
.cx-two.eq{grid-template-columns:1fr 1fr}
.cx-two>*{min-width:0}
@media (max-width:860px){.cx-two,.cx-two.eq{grid-template-columns:1fr;gap:2rem}}
.cx-wrap.cx-two{padding-inline:var(--gut)}
@media (max-width:560px){.cx-top a[href^="mailto"]{display:none}}

/* Explicit icon sizes (iOS Safari collapses SVGs that only have a viewBox) */
svg{flex-shrink:0}
.cx-icon-btn svg{width:22px;height:22px;display:block}
.cx-social svg{width:16px;height:16px;display:block}
.cx-nav .chev svg{width:11px;height:11px;display:block}
.cx-topbtn svg{width:16px;height:16px;display:block}
@media (max-width:1060px){.cx-head-r{margin-left:auto}}
@media (max-width:640px){
  .cx-cause{display:block;min-height:0}
  .cx-cause img{width:100%;height:auto;aspect-ratio:3/2;display:block}
  .cx-cause-b{padding:1.2rem 1.2rem 1.4rem}
}
.cx-cause-b{background:#fff;position:relative;z-index:1}
.cx-cause-b p{color:#3F4F45}


/* =========================================================
   Global depth / motion / premium-detail system
   Additive utility classes: .cardo-reveal .cardo-card .cardo-button
   .cardo-glass .cardo-depth .cardo-image-reveal .cardo-contact-card .cardo-form-field
   ========================================================= */

/* Section background variation so panels don't sit on flat white */
.cx-mint{background:
  radial-gradient(circle at 12% 8%, rgba(30,127,43,.06), transparent 40%),
  radial-gradient(circle at 92% 85%, rgba(19,103,168,.05), transparent 45%),
  var(--mint);
}
.cx-cream{background:
  radial-gradient(circle at 85% 10%, rgba(21,84,58,.05), transparent 35%),
  var(--cream);
}
body{background:
  radial-gradient(circle at 100% 0%, rgba(21,84,58,.035), transparent 30%),
  #fff;
}

/* Scroll reveal: JS adds .is-in when the element enters the viewport (see site.js).
   With no JS, or prefers-reduced-motion, content is fully visible (progressive enhancement). */
/* Only animate for JS users (html.js, set by an inline script in header.php before paint); with no JS, or if the
   inline script is blocked, content is fully visible by default so nothing depends on JavaScript to be seen. */
.js .cardo-reveal{opacity:0;transform:translateY(35px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .cardo-reveal.is-in{opacity:1;transform:translateY(0)}
.js .cardo-reveal-stagger>*{opacity:0;transform:translateY(28px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js .cardo-reveal-stagger.is-in>*{opacity:1;transform:translateY(0)}
.cardo-reveal-stagger.is-in>*:nth-child(1){transition-delay:.02s}
.cardo-reveal-stagger.is-in>*:nth-child(2){transition-delay:.09s}
.cardo-reveal-stagger.is-in>*:nth-child(3){transition-delay:.16s}
.cardo-reveal-stagger.is-in>*:nth-child(4){transition-delay:.23s}
.cardo-reveal-stagger.is-in>*:nth-child(5){transition-delay:.30s}
.cardo-reveal-stagger.is-in>*:nth-child(6){transition-delay:.37s}
.cardo-reveal-stagger.is-in>*:nth-child(n+7){transition-delay:.42s}
@media (prefers-reduced-motion:reduce){
  .cardo-reveal,.cardo-reveal-stagger>*{opacity:1!important;transform:none!important;transition:none!important}
}

/* Animated stat numbers: JS counts up when in view, honouring reduced-motion */
.cardo-stat-num[data-count]{font-variant-numeric:tabular-nums}

/* Depth-aware image reveal: slow zoom-in the first time a figure/image enters view */
.cardo-image-reveal{overflow:hidden}
.js .cardo-image-reveal img{transform:scale(1.08);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .cardo-image-reveal.is-in img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.cardo-image-reveal img{transform:none!important;transition:none!important}}

/* Global card depth (applies to existing .cx-card, .cx-cause, .cx-nc, .cx-prog without markup changes) */
.cx-card,.cx-cause,.cx-nc,.cx-prog .im,.cx-tm,.cx-quote,.cx-value,.cx-fact{
  border-radius:20px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s cubic-bezier(.2,.7,.2,1);
}
.cx-cause,.cx-nc,.cx-quote,.cx-value,.cx-fact,.cx-tm{overflow:hidden}
.cx-cause:hover,.cx-nc:hover,.cx-tm:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(7,27,18,.16)}
.cx-cause img,.cx-nc img,.cx-prog img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cx-cause:hover img,.cx-nc:hover img,.cx-prog a:hover img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){
  .cx-cause,.cx-nc,.cx-tm,.cx-cause img,.cx-nc img,.cx-prog img{transition:none!important}
  .cx-cause:hover,.cx-nc:hover,.cx-tm:hover{transform:none}
  .cx-cause:hover img,.cx-nc:hover img,.cx-prog a:hover img{transform:none}
}

/* Global button system (applies to existing .cx-btn / .cd-btn without markup changes) */
.cx-btn,.cd-btn{border-radius:999px;box-shadow:0 10px 30px rgba(6,62,44,.16);transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s cubic-bezier(.2,.7,.2,1),background-color .2s,border-color .2s;position:relative;overflow:hidden}
.cx-btn::after,.cd-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .5s ease}
.cx-btn:hover::after,.cd-btn:hover::after{transform:translateX(120%)}
.cx-btn:hover,.cd-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 38px rgba(6,62,44,.24)}
.cx-btn:active,.cd-btn:active{transform:translateY(0) scale(.98)}
@media (prefers-reduced-motion:reduce){
  .cx-btn,.cd-btn,.cx-btn::after,.cd-btn::after{transition:none!important}
  .cx-btn:hover,.cd-btn:hover{transform:none}
}

/* Glass utility, available for any panel */
.cardo-glass{background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.5)}

/* Sticky header: blur + shadow once scrolled (class toggled by existing site.js onScroll) */
.cx-head{transition:box-shadow .25s ease,background-color .25s ease}
.cx-head.is-stuck{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.cx-nav .cx-mega{transition:opacity .22s ease,transform .22s ease,visibility .22s ease}
.cx-nav>ul>li>a,.cx-nav>ul>li>button{transition:color .2s ease}

/* =========================================================
   Contact page: premium panel + form (matches the two reference screenshots)
   ========================================================= */
.cardo-contact-card{
  background:
    radial-gradient(circle at 15% 15%, rgba(64,145,105,.28), transparent 35%),
    linear-gradient(145deg, #062f24, #0b4937 55%, #073428);
  color:#EAF1EC;border-radius:28px;padding:clamp(2rem,4vw,3rem);box-shadow:0 30px 70px rgba(5,50,35,.22);position:relative;overflow:hidden;
}
.cardo-contact-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 90%, rgba(243,188,46,.10), transparent 40%);pointer-events:none}
.cardo-contact-card .cx-eyebrow{color:var(--gold)}
.cardo-contact-card h2{color:#fff;font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2rem,4vw,3rem)}
.cardo-contact-list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.9rem;position:relative;z-index:1}
.cardo-contact-item{display:flex;gap:1rem;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1rem 1.15rem;transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .25s ease,box-shadow .25s ease}
.cardo-contact-item:hover{transform:translateY(-5px);background:rgba(255,255,255,.11);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.cardo-contact-item .ic{flex:none;width:42px;height:42px;border-radius:50%;background:rgba(243,188,46,.16);color:var(--gold);display:flex;align-items:center;justify-content:center;transition:transform .25s ease}
.cardo-contact-item:hover .ic{transform:scale(1.1)}
.cardo-contact-item .ic svg{width:19px;height:19px}
.cardo-contact-item b{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#B9CDC1;margin-bottom:.2rem;font-weight:800}
.cardo-contact-item a,.cardo-contact-item span{color:#fff;font-weight:700;text-decoration:none;font-size:1.02rem}
.cardo-contact-item a:hover{color:var(--gold)}
.cardo-contact-social{display:flex;gap:.6rem;margin-top:1.6rem;position:relative;z-index:1}
.cardo-contact-social a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:transform .25s ease,background-color .2s ease}
.cardo-contact-social a:hover{transform:translateY(-4px);background:var(--gold);color:var(--green-3)}
.cardo-contact-social svg{width:17px;height:17px}

.cardo-contact-panel{display:grid;grid-template-columns:.85fr 1.15fr;gap:2rem;align-items:stretch}
@media (max-width:900px){.cardo-contact-panel{grid-template-columns:1fr}}

.cardo-form-card{background:rgba(255,255,255,.94);border:1px solid rgba(10,70,50,.10);border-radius:24px;box-shadow:0 25px 70px rgba(5,50,35,.12);padding:clamp(1.6rem,3vw,2.4rem)}
.cardo-form-field{position:relative;margin-bottom:1.3rem}
.cardo-form-field label{display:block;font-weight:800;font-size:.78rem;letter-spacing:.03em;margin-bottom:.4rem;color:var(--ink)}
.cardo-form-field input[type=text],.cardo-form-field input[type=email],.cardo-form-field textarea{
  width:100%;background:#f7faf8;border:1px solid rgba(9,72,52,.16);border-radius:14px;padding:.85rem 1rem;font:inherit;color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease;min-height:52px;
}
textarea.cardo-message,.cardo-form-field textarea{
  min-height:11rem;max-height:26rem;resize:vertical;border-radius:18px;line-height:1.6;
  background:linear-gradient(180deg,#f9fbfa,#f3f7f4);
  box-shadow:inset 0 1px 3px rgba(9,72,52,.06);
}
.cardo-form-field textarea:focus{background:#fff;box-shadow:inset 0 1px 3px rgba(9,72,52,.04),0 0 0 4px rgba(15,105,76,.10)}
.cardo-form-field:has(textarea)::after{content:"Share as much detail as is useful \2014 we read every message.";display:block;margin-top:.5rem;font-size:.78rem;color:var(--muted)}
.cardo-form-field input:focus,.cardo-form-field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(15,105,76,.10)}

.cardo-check{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;line-height:1.5;color:var(--muted);cursor:pointer}
.cardo-check input{position:absolute;opacity:0;width:1px;height:1px}
.cardo-check .box{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid #B9C4BC;background:#fff;display:inline-flex;align-items:center;justify-content:center;margin-top:.1rem;transition:background-color .15s ease,border-color .15s ease}
.cardo-check input:checked+.box{background:var(--green);border-color:var(--green)}
.cardo-check input:checked+.box::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(40deg) translate(-1px,-1px)}
.cardo-check input:focus-visible+.box{outline:3px solid #0B6BCB;outline-offset:2px}

.cardo-send-btn{display:inline-flex;align-items:center;gap:.6rem}
.cardo-send-btn svg{width:16px;height:16px;transition:transform .25s ease}
.cardo-send-btn:hover svg{transform:translateX(4px)}
.cardo-send-btn[data-busy="true"]{opacity:.75;pointer-events:none}

/* =========================================================
   Footer: richer depth
   ========================================================= */
.cx-foot{background:linear-gradient(175deg,#0A2A16,#071B12 60%);position:relative}
.cx-foot::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(243,188,46,.5),transparent)}