/* ==========================================================================
   Little Bridge Foundation - avaliku kodulehe stiil
   Bränd: brandbook (oliiv #8A8635, kuld, oranž, terrakota, liiv) + Montserrat
   ========================================================================== */

/* ---- Self-host Montserrat (GDPR: ei laadita Google CDN-ist) ---- */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;
  src:url('../assets/fonts/montserrat-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;
  src:url('../assets/fonts/montserrat-300-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/montserrat-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/montserrat-400-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/montserrat-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/montserrat-500-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/montserrat-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/montserrat-600-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/montserrat-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/montserrat-700-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;
  src:url('../assets/fonts/montserrat-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;
  src:url('../assets/fonts/montserrat-800-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;}

/* ---- Brändi muutujad ---- */
:root{
  --oliiv:#8A8635;       /* põhivärv */
  --oliiv-tume:#6f6c2a;
  --kuld:#D89828;        /* CTA */
  --oranz:#D06224;
  --terra:#AE431E;       /* sügav aktsent */
  --liiv:#EAC891;        /* hele taust */
  --liiv-hele:#f6e8cf;
  --must:#1a1a1a;
  --valge:#ffffff;
  --tekst:#2a2a2a;
  --tekst-hele:#f7f4ee;
  --vari:0 10px 30px rgba(40,30,10,.12);
  --vari-suur:0 20px 50px rgba(40,30,10,.18);
  --raadius:18px;
  --max:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,sans-serif;
  font-weight:400;color:var(--tekst);background:var(--valge);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-weight:800;line-height:1.12;letter-spacing:-.01em;color:var(--must)}
h1{font-size:clamp(2.1rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.8vw,2.7rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
p{font-size:clamp(1rem,1.3vw,1.12rem)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:clamp(56px,8vw,110px) 0}

/* sektsiooni silt (brandbook stiil: oliiv, suurtähed) */
.eyebrow{
  display:inline-block;font-weight:700;font-size:.82rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oliiv);margin-bottom:16px;
}

/* ---- Nupud ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1rem;
  padding:15px 30px;border-radius:50px;cursor:pointer;border:2px solid transparent;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-kuld{background:var(--kuld);color:var(--valge);box-shadow:0 8px 22px rgba(216,152,40,.35)}
.btn-kuld:hover{background:var(--oranz)}
.btn-valge{background:var(--valge);color:var(--must)}
.btn-valge:hover{background:var(--liiv)}
.btn-ouml{background:transparent;border-color:currentColor;color:var(--must)}
.btn-ouml:hover{background:var(--must);color:var(--valge)}

/* ==== HEADER ==== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;transition:background .3s ease,box-shadow .3s ease,padding .3s ease;
}
/* NB: ÄRA lisa siia transform/filter/backdrop-filter — see muudaks header'i
   fixed-positsiooniga mobiilimenüü containing-block'iks ja lõhuks menüü scrollituna. */
/* .hdr.solid = püsivalt valge header lehtedel, mille ülaosa on hele (uudised,
   galerii) — läbipaistev header valgete linkidega oleks liivataustal loetamatu.
   Sama välimus mis .scrolled, aga logo suurus ei muutu enne skrollimist. */
.hdr.scrolled,.hdr.solid{background:rgba(255,255,255,.97);box-shadow:0 2px 18px rgba(0,0,0,.08)}
.hdr-logo{display:flex;align-items:center;gap:10px;height:40px;transition:height .3s ease}
.hdr.scrolled .hdr-logo{height:34px}
.hdr-logo img{height:100%;width:auto;filter:drop-shadow(0 2px 7px rgba(0,0,0,.78)) drop-shadow(0 0 14px rgba(0,0,0,.45))}
.hdr.scrolled .hdr-logo img,.hdr.solid .hdr-logo img{filter:drop-shadow(0 1px 4px rgba(0,0,0,.32))}
.hdr.scrolled .hdr-logo img.lg-valge,.hdr.solid .hdr-logo img.lg-valge{display:none}
.hdr-logo img.lg-must{display:none}
.hdr.scrolled .hdr-logo img.lg-must,.hdr.solid .hdr-logo img.lg-must{display:block}
.nav{display:flex;align-items:center;gap:28px}
.nav a.navlink{font-weight:600;font-size:.95rem;color:var(--valge);position:relative;transition:color .2s}
.hdr.scrolled .nav a.navlink,.hdr.solid .nav a.navlink{color:var(--must)}
.nav a.navlink::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--kuld);transition:width .25s}
.nav a.navlink:hover::after{width:100%}
.nav a.navlink.is-here::after{width:100%}
.nav a.navlink.is-here{opacity:1}
.lang{display:flex;gap:2px;align-items:center;font-weight:700;font-size:.85rem}
.lang button{background:none;border:none;cursor:pointer;color:inherit;opacity:.55;padding:4px 6px;font-weight:700;font-family:inherit}
.hdr .lang button{color:var(--valge)}
.hdr.scrolled .lang button,.hdr.solid .lang button{color:var(--must)}
.lang button.on{opacity:1;color:var(--kuld)}
.hdr.scrolled .lang button.on,.hdr.solid .lang button.on{color:var(--oliiv)}
.menu-btn{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.menu-btn span{width:26px;height:2px;background:var(--valge);transition:.3s}
.hdr.scrolled .menu-btn span,.hdr.solid .menu-btn span{background:var(--must)}
/* mobiilimenüü sulgemisnupp + hämardav taust (aktiveeritud JS-iga) */
.nav-close{display:none}
.nav-scrim{position:fixed;inset:0;background:rgba(20,14,4,.5);opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s;z-index:1400}
.nav-scrim.show{opacity:1;visibility:visible}
/* menüü avatuna tõsta header (+menüü paneel) scrimist KÕRGEMALE, et paneel oleks tap'itav */
.hdr.menu-open{z-index:1500}
/* nähtamatu SEO/ekraanilugeja pealkiri (hero h1, visuaalselt peidetud) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==== HERO ==== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  color:var(--valge);overflow:hidden;background:#2a2114;
}
/* taustaslaidid (ristuvad) */
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center 38%;
  opacity:0;transform:scale(1.06);
  transition:opacity 2.6s ease-in-out, transform 13s ease-out;will-change:opacity,transform;
}
/* sujuv ristuv üleminek: nii sisse- kui väljaminev slaid suumib transition-iga
   (mitte keyframe-iga), nii et transform ei "hüppa" is-on eemaldamisel */
.hero-slide.is-on{opacity:1;transform:scale(1.12)}
/* Ketta teema taustapilt (18.08.2026): eraldi slaid kõige peal, ilma suumita.
   Valikul tuuakse ette, sulgemisel läheb tagasi ja tavaline slaidišõu paistab jälle. */
.hero-slide.ketas-slide{z-index:2;transform:none;opacity:0;
  transition:opacity .85s ease-in-out}
.hero-slide.ketas-slide.is-on{opacity:1;transform:none}
/* video-slaid (admin-paneelist lisatud) - ilma suumita */
.hero-slide.hero-vid,.hero-slide.hero-vid.is-on{transform:none}
.hero-slide.hero-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* tume gradient teksti loetavuseks */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(48% 40% at 50% 30%,rgba(14,9,2,.6),rgba(14,9,2,0) 70%),
    linear-gradient(180deg,rgba(25,18,6,.55),rgba(25,18,6,.34) 45%,rgba(60,40,12,.68));
}
.hero .wrap{position:relative;z-index:2;padding:74px 20px clamp(46px,6.5vh,76px);max-width:720px;
  margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero h1{color:var(--valge);text-shadow:0 2px 24px rgba(0,0,0,.3)}
.hero-logo{margin:0 0 clamp(48px,9vh,100px);line-height:0}
.hero-logo img{width:clamp(180px,22vw,240px);height:auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.85)) drop-shadow(0 0 28px rgba(0,0,0,.6))}
.hero .lead{font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:400;margin:0 auto 26px;max-width:600px;color:var(--tekst-hele)}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.hero-scroll{position:absolute;z-index:2;bottom:clamp(64px,8.5vh,104px);left:50%;transform:translateX(-50%);color:var(--valge);opacity:.8;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}


/* ==== HERO: interaktiivne tegevusvaldkondade ketas ==== */
.hero .wrap.hero-grid{max-width:var(--max);width:100%;display:grid;grid-template-columns:1.05fr .95fr;
  align-items:center;gap:clamp(24px,4vw,64px);text-align:left;
  padding:calc(72px + clamp(4px,1.4vh,18px)) 24px clamp(38px,5.5vh,70px)}
.hero-txt{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;
  /* hero.js lukustab veeru kõrguse vaikevaate järgi, et ketas ei liiguks teema
     valikul; lühem teemasisu keskendub siis samasse kohta, kus ta enne oli */
  justify-content:center}
/* Hero pealkiri. Oli varem ainult ekraanilugejale (.sr-only), 05.08.2026 toodi
   nähtavale. Foto peal peab olema vari, muidu kaob heledatel slaididel ära. */
.hero-h1{color:var(--valge);font-size:clamp(1.9rem,3.5vw,3rem);line-height:1.06;
  margin:0 0 clamp(12px,1.6vh,20px);max-width:13ch;
  text-shadow:0 3px 22px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.35);
  max-height:4.6em;overflow:hidden;
  transition:opacity .22s ease,max-height .3s ease,margin .3s ease}
/* Teemavaates asendab ketta teema pealkiri suure pealkirja (idee #87):
   H1 sõidab kokku, teema h2 (sama suurusega) võtab tema koha. Keskel logol
   klõps eemaldab .topic-on ja H1 tuleb tagasi. */
.hero.topic-on .hero-h1{opacity:0;max-height:0;margin:0}
.hero .hero-grid .lead{margin:0 0 24px;text-align:left;max-width:34ch}

/* sõnumite vahetus: sisu sõidab vasakult sisse ja jääb paigale (ei vahetu järsult) */
.hero-msg[hidden]{display:none}
.hero-msg > *{opacity:0;transform:translateX(-56px);
  transition:opacity .5s ease,transform .66s cubic-bezier(.18,.72,.26,1)}
.hero-msg.is-on > *{opacity:1;transform:none}
.hero-msg.is-on > *:nth-child(1){transition-delay:.02s}
.hero-msg.is-on > *:nth-child(2){transition-delay:.10s}
.hero-msg.is-on > *:nth-child(3){transition-delay:.18s}
.hero-msg.is-on > *:nth-child(4){transition-delay:.26s}
/* väljuv sisu libiseb tagasi vasakule */
.hero-msg.is-out > *{opacity:0;transform:translateX(-26px);
  transition:opacity .22s ease,transform .22s ease;transition-delay:0s}

/* teema-sõnum */
/* Varem kerkis teemavaate tekstiveerg endise „Meie töö" sildi võrra ülespoole.
   05.08.2026 toodi hero-pealkiri nähtavale ja see nihe ajas teema pealkirja
   „Little Bridge Foundation" alla kinni, seega nihe on nulli võetud. */
.hero-msg[data-msg="topic"],.hero.topic-on .hero-nlbox{position:relative;top:0}
.hero-topic .ht-title{color:#fff;font-size:clamp(1.9rem,3.5vw,3rem);line-height:1.06;margin:0 0 12px;
  text-shadow:0 3px 22px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.35)}
.hero-topic .ht-text{color:var(--tekst-hele);font-size:clamp(1rem,1.4vw,1.16rem);max-width:40ch;margin:0 0 24px;
  text-shadow:0 2px 14px rgba(0,0,0,.45)}
.hero-topic .hero-cta{justify-content:flex-start}
.hero-topic #htCta{background:var(--tc,#D89828);color:var(--tfg,#fff);box-shadow:0 8px 24px rgba(0,0,0,.32)}
.hero-topic #htCta:hover{filter:brightness(1.08)}
.hero .hero-grid .hero-cta{justify-content:flex-start}

/* uudiskiri: CTA-nupp, mis sõidab lahti vormiks ja peale liitumist kinni */
.hero-nlbox{margin-top:clamp(18px,3vh,30px);max-width:440px;width:100%;
  display:flex;flex-wrap:wrap;align-items:center}
.hero-nlcta{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;overflow:hidden;cursor:pointer;
  font:inherit;font-weight:700;font-size:.95rem;color:#fff;max-width:340px;padding:13px 24px;border-radius:50px;
  background:rgba(174,67,30,.92);border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(3px);
  box-shadow:0 10px 26px rgba(0,0,0,.3);
  transition:max-width .42s cubic-bezier(.2,.75,.3,1),padding .42s ease,opacity .28s ease,
             background .25s ease,transform .25s ease}
.hero-nlcta:hover{background:var(--kuld);transform:translateY(-2px)}
.hero-nlcta svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-nlcta[disabled]{cursor:default;background:var(--oliiv);transform:none}

/* vorm: kokkurullitud olekus laius 0, avanedes rullub lahti */
/* Avanemise mehaanika. Kujundus (valge väli, terrakota nupp) tuleb .nl-form plokist,
   siin ei ole enam oma kapslit ega äärist, et hero vorm oleks uudiskirja ribaga ühesugune. */
.hero-nlbox form{display:flex;gap:10px;align-items:center;overflow:hidden;max-width:0;opacity:0;
  transition:max-width .48s cubic-bezier(.2,.75,.3,1),opacity .3s ease .06s}
.hero-nlbox.is-open form{max-width:440px;opacity:1}
.hero-nlbox.is-open .hero-nlcta{max-width:0;padding-left:0;padding-right:0;opacity:0;border-color:transparent}

/* ==== Ühine uudiskirja liitumisvorm (hero + uudiskirja riba) ====
   Üks kujundus mõlemas kohas: valge väli, terrakota nupp, sama raadius ja sama
   kõrgus. Ainult e-posti väli, nime enam ei küsita. */
.nl-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.nl-form input[type=email]{flex:1 1 200px;min-width:160px;max-width:320px;
  padding:13px 15px;border:0;border-radius:9px;font:inherit;color:var(--tekst);background:#fff}
/* Fookuse tähis ei ole kollane: kuldne ring tühja välja ümber luges välja nagu
   veateade. Terrakota on nupuga sama pere ja tuleb ainult siis, kui väli on
   päriselt fookuses (klõps või Tab), mitte vormi avanemisel. */
.nl-form input[type=email]:focus-visible{outline:2px solid var(--terra);outline-offset:1px}
.nl-form button[type=submit]{padding:13px 26px;border:0;border-radius:9px;background:var(--terra);
  color:#fff;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background .2s,transform .2s}
.nl-form button[type=submit]:hover{background:var(--oranz);transform:translateY(-2px)}
.nl-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* hero: sama vorm, aga avaneb nupu tagant, seega ei murra ridu ega venita laiaks */
.hero-nlbox .nl-form{flex-wrap:nowrap;justify-content:flex-start}
.hero-nlbox .nl-form input[type=email]{max-width:none}

/* Hero vormi väljanägemine tuleb nüüd ühisest .nl-form plokist, siin on ainult see,
   mis on hero'le omane (avanemine nupu tagant). Vanad pilliku-kujulised reeglid on maas. */
.hero-nlbox .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.hero-nlmsg{flex:0 0 100%;margin:6px 2px 0;font-size:.86rem;font-weight:600;color:#fff;min-height:0}
.hero-nlmsg.ok{color:#EAC891}
.hero-nlmsg.err{color:#ffd2c2}

/* ---- ketas ---- */
.hero-ring{display:grid;place-items:center;min-width:0}
/* Ketas on ALATI ühesuur, sõltumata kõrvaloleva teksti pikkusest (07.08.2026,
   Toomas). Varasem lahendus (05.08) venitas ketta tekstiveeru kõrguseks
   (align-self:stretch + height:100%), mistõttu teema valik või pikem tekst
   muutis ketta mõõtu. Nüüd annab mõõdu AINULT vaateava-põhine clamp allpool;
   veerus seisab ketas keskel ja tekstiveeru kõrgus teda ei mõjuta. */
.ring{position:relative;width:clamp(272px,27vw,396px);aspect-ratio:1;
  animation:ringIn 1.1s cubic-bezier(.2,.75,.3,1) both}
@keyframes ringIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
/* keskel logo = nupp, mis taastab avavaate (aktiivne siis, kui teema on avatud) */
.ring-core{position:absolute;left:50%;top:50%;width:52%;aspect-ratio:1;transform:translate(-50%,-50%);
  display:grid;place-items:center;background:none;border:0;padding:0;pointer-events:none;
  transition:transform .3s ease,filter .3s ease}
.hero.topic-on .ring-core{pointer-events:auto;cursor:pointer}
.hero.topic-on .ring-core:hover{transform:translate(-50%,-50%) scale(1.05)}
.hero.topic-on .ring-core:hover canvas{filter:drop-shadow(0 1px 4px rgba(0,0,0,.55)) brightness(1.12)}
.ring-core:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:50%}
/* valge logo loeb fotol ilma taustata; jääb vaid kerge kontuurivari */
.ring-core canvas{width:100%;height:auto;filter:drop-shadow(0 1px 4px rgba(0,0,0,.55))}
.ring-orbit{position:absolute;inset:0;pointer-events:none}   /* katab keskme - klikid vaid sõlmedele */

/* sõlm: värv tuleb --c muutujast (LBF palett), ikoon+silt jäävad püsti */
.rn{position:absolute;pointer-events:auto;left:50%;top:50%;width:clamp(78px,7.8vw,104px);aspect-ratio:1;
  margin:calc(clamp(78px,7.8vw,104px) / -2);border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.34);
  background:var(--c,#AE431E);color:var(--fg,#fff);font:inherit;padding:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 10px 24px rgba(20,12,4,.4);
  /* ketas seisab paigal (18.08.2026), seega transform muutub ainult valikul ja
     akna suuruse muutmisel - siia sobib pehme üleminek, ilma et miski logiseks */
  transition:box-shadow .3s ease,border-color .3s ease,filter .25s ease,
             transform .28s cubic-bezier(.2,.75,.3,1)}
.rn:hover,.rn:focus-visible{filter:brightness(1.1);border-color:#fff;box-shadow:0 14px 30px rgba(20,12,4,.5)}
.rn.on{border-color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 45%,transparent),0 16px 34px rgba(20,12,4,.5)}
.rn-ic{display:grid;place-items:center;width:clamp(26px,2.9vw,36px);aspect-ratio:1}
.rn-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rn b{font-size:clamp(.56rem,.62vw,.72rem);font-weight:700;line-height:1.15;text-align:center;
  letter-spacing:.01em;max-width:100%;hyphens:auto}

@media(max-width:980px){
  .hero .wrap.hero-grid{grid-template-columns:1fr;justify-items:center;text-align:center;
    gap:clamp(18px,3vh,30px);padding-top:calc(74px + 6px)}
  .hero-txt{align-items:center;order:2}
  .hero-ring{order:1}
  .hero .hero-grid .lead{text-align:center;margin-bottom:18px}
  .hero .hero-grid .hero-cta,.hero-topic .hero-cta{justify-content:center}
  .hero-topic .ht-text{margin-left:auto;margin-right:auto}
  /* uudiskirja nupp/vorm keskele nagu ülejäänud CTA-d (Devil #56) */
  .hero-nlbox{justify-content:center;text-align:center}
  .hero-nlmsg{text-align:center}
  .ring{width:min(74vw,330px)}
  .rn{width:clamp(62px,17vw,78px);margin:calc(clamp(62px,17vw,78px) / -2)}
  /* telefonis silt kettal ei mahu - nimi ilmub teksti alla, ikoon jääb ringile */
  .rn b{display:none}
  .rn-ic{width:46%}
}
@media(max-width:520px){
  /* hero peab mahtuma ühele ekraanile: kompaktne ketas + kõrvuti nupud */
  .hero .wrap.hero-grid{padding:calc(64px + 2px) 18px clamp(26px,4vh,44px);gap:14px}
  .ring{width:min(60vw,248px)}
  .rn{width:clamp(50px,15vw,64px);margin:calc(clamp(50px,15vw,64px) / -2)}
  /* Devil idee #83 (Berit, 05.08.2026): telefonivaates olid hero tekstid liiga
     kokku surutud. Pealkiri, tutvustus ja nupud said hingamisruumi juurde.
     Rida on ka pisut kõrgem, sest kolmerealine tekst luges kokku surutuna halvasti. */
  .hero .hero-grid .lead{font-size:.97rem;line-height:1.55;margin-bottom:24px;max-width:30ch}
  .hero-h1{margin-bottom:20px}
  .hero .hero-grid .hero-cta,.hero-topic .hero-cta{flex-direction:row;flex-wrap:wrap;gap:10px}
  .hero .hero-grid .hero-cta .btn,.hero-topic .hero-cta .btn{width:auto;padding:12px 20px;font-size:.94rem}
  /* Varem kerkis teemavaate tekstiveerg endise „Meie töö" sildi võrra ülespoole.
   05.08.2026 toodi hero-pealkiri nähtavale ja see nihe ajas teema pealkirja
   „Little Bridge Foundation" alla kinni, seega nihe on nulli võetud. */
.hero-msg[data-msg="topic"],.hero.topic-on .hero-nlbox{position:relative;top:0}
.hero-topic .ht-title{font-size:clamp(1.9rem,3.5vw,3rem);margin-bottom:8px}   /* = .hero-h1, idee #87 */
  .hero-topic .ht-text{font-size:.98rem;margin-bottom:16px}
  .hero-scroll{display:none}
  /* vorm on alati nähtav; ketas peab jääma piisavalt suureks, et sõlmed
     ei kataks keskel olevat logo (raadius = (ring - sõlm) / 2) */
  .ring{width:min(66vw,262px)}
  .rn{width:clamp(46px,12.5vw,58px);margin:calc(clamp(46px,12.5vw,58px) / -2)}
  .rn-ic{width:52%}
  .hero-nlbox{margin-top:20px}   /* idee #83: oli 12px, nupp jäi CTA-de külge kinni */
  .hero-nlcta{font-size:.9rem;padding:12px 20px}
  .hero-nlbox.is-open form{padding:6px}
  .hero-nlbox form .btn{padding:11px 18px}
  .hero-nlbox input[type=email]{padding:11px 15px;font-size:.92rem}
  .hero-nlbox .btn{padding:11px 20px}
}
@media(prefers-reduced-motion:reduce){
  .ring{animation:none}
  .rn{transition:box-shadow .3s ease,border-color .3s ease,filter .25s ease}
  .hero-msg > *,.hero-msg.is-on > *,.hero-msg.is-out > *{transform:none;transition:opacity .2s ease;transition-delay:0s}
  .hero-h1{transition:none}
}

/* tagasi üles nupp (ujuv, all paremas) */
.to-top{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:80;
  width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;background:var(--kuld);color:#fff;
  font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(40,30,10,.3);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s,background .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--oranz)}
@media(prefers-reduced-motion:reduce){.to-top{transition:opacity .2s}}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:opacity 1s ease;transform:none!important}.hero-slide.is-on{transform:none!important}}


/* ==== KÄIMASOLEVAD KAMPAANIAD (oliiv) ==== */
.campaigns{background:var(--liiv);color:var(--tekst);padding:clamp(52px,7vw,92px) 0 clamp(52px,7vw,92px)}
.campaigns .eyebrow{color:var(--terra)}
.campaigns h2{color:var(--must)}
.camp-sub{max-width:640px;margin-top:8px;color:#5b5342}
.camp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px);margin-top:clamp(28px,3.6vw,44px)}
.camp-card{background:#fff;color:var(--tekst);border-radius:var(--raadius);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--vari)}
.camp-card .ph{aspect-ratio:16/10;overflow:hidden;background:#e6dcc4}
.camp-card .ph img{width:100%;height:100%;object-fit:cover}
.camp-card .body{padding:clamp(18px,1.8vw,24px);display:flex;flex-direction:column;flex:1}
.camp-card h3{font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--must);margin-bottom:8px}
.camp-card p{font-size:.98rem;line-height:1.6;color:#4a4436;margin-bottom:16px}
/* edenemisriba */
/* ==== Ringjas edenemine kampaaniakaardil ====
   Kaar on SVG-ring, mida joonistab stroke-dasharray/dashoffset. Ring on pööratud
   -90 kraadi, et täitumine algaks kella 12 pealt. Numbri loeb üles js/campaigns.js. */
.camp-prog{display:flex;align-items:center;gap:clamp(13px,1.5vw,20px);margin:4px 0 2px}
.camp-ring{position:relative;flex:0 0 auto;width:clamp(92px,8.4vw,112px);aspect-ratio:1}
.camp-ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.camp-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.cr-track{stroke:rgba(138,134,53,.20)}
.cr-arc{stroke:var(--oranz);
  stroke-dasharray:var(--c);stroke-dashoffset:var(--c);
  transition:stroke-dashoffset 1.1s cubic-bezier(.22,.8,.3,1)}
.camp-ring.on .cr-arc{stroke-dashoffset:var(--off)}
.cr-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:clamp(.86rem,1vw,.98rem);color:#5b5342;letter-spacing:-.01em}
.cr-pct b{font-size:clamp(1.32rem,1.7vw,1.62rem);color:var(--terra);font-weight:800;margin-right:1px}
.camp-sums{display:flex;flex-direction:column;gap:2px;font-size:.9rem;color:#5b5342;min-width:0}
.camp-sums strong{font-size:clamp(1.15rem,1.5vw,1.35rem);color:var(--terra);line-height:1.15}
.camp-sums .camp-left{margin-top:4px}
@media(prefers-reduced-motion:reduce){ .cr-arc{transition:none} }
@media(max-width:400px){ .camp-prog{gap:11px} .camp-ring{width:84px} }

/* ==== Annetusvoog kampaaniate all (js/feed.js) ====
   Plokk on HTML-is `hidden`, feed.js avab selle alles siis, kui andmed on käes.

   Kujundus järgib sama kaardikeelt mis kampaania-, uudise- ja edulookaardid:
   paks brändivärvi piirjoon, asümmeetriline ümarus 38/14 ja värviline alumine
   serv (vt plokki „ÜHTNE KAARDIKEEL" allpool). Piirjoon on terra, sest
   kampaaniaruudustik kasutab enne teda oliivi ja kulda - kolmas ring paletis.
   Ridade vahel on juuspeen joon, mitte eraldi kastid: read on ÜHE kaardi sisu,
   mitte omaette kaardid, muidu konkureeriks voog kampaaniakaartidega.
   Läbipaistvat tausta siin ei ole - sektsiooni taustalogod paistsid läbi. */
.voog{margin-top:clamp(28px,4vw,46px);display:flex;justify-content:center}
.voog[hidden]{display:none}
.voog-card{--card-line:var(--terra);
  /* kitsam kui kampaaniaruudustik: voog on tõend, mitte peategelane. Liiga lai
     kaart venitaks lühikese lause ja summa vahele tühja koridori. */
  width:100%;max-width:560px;background:#fff;color:var(--tekst);
  border:clamp(4px,0.42vw,6px) solid var(--card-line);
  border-radius:38px 14px 38px 14px;
  box-shadow:0 10px 26px rgba(40,30,10,.12), 0 3px 0 0 var(--card-line);
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,30px)}
.voog-h{display:block;color:var(--terra);margin-bottom:10px}   /* suuruse annab .eyebrow */
/* Mobiilis tsentreeritakse sektsiooni sildid (`.campaigns .eyebrow`, ~rida 1425).
   Kaardi sees see ei sobi: read on nimekiri, silt peab nendega ühte joonde jääma.
   Kolm klassi = suurem kaal kui tollel reeglil, mis on failis tagapool. */
.campaigns .voog .voog-h{text-align:left}
.voog-list{list-style:none;margin:0;padding:0}
.voog-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:12px;padding:13px 0;border-top:1px solid rgba(138,134,53,.20)}
.voog-list li:first-child{border-top:0;padding-top:2px}
.voog-ik{width:9px;height:9px;border-radius:50%;margin-top:7px;
  background:var(--oranz);box-shadow:0 0 0 4px rgba(208,98,36,.14)}
.voog-txt{min-width:0;font-size:.98rem;line-height:1.45;color:#4a4436}
.voog-aeg{display:block;font-size:.8rem;color:#8a8478;margin-top:2px}
.voog-sum{font-size:1.06rem;line-height:1.35;color:var(--terra);font-weight:700;white-space:nowrap}
.voog-note{font-size:.82rem;color:#8a8478;margin:14px 0 0}
@media(max-width:420px){
  .voog-card{border-radius:28px 12px 28px 12px}
  .voog-list li{gap:10px}
}

.camp-bar{height:10px;border-radius:50px;background:rgba(138,134,53,.22);overflow:hidden}
.camp-bar span{display:block;height:100%;border-radius:50px;
  background:linear-gradient(90deg,var(--kuld),var(--oranz));width:0;
  transition:width 1.1s cubic-bezier(.2,.75,.3,1)}
.camp-nums{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:10px 0 4px;font-size:.9rem;color:#5b5342}
.camp-nums strong{font-size:1.2rem;color:var(--terra)}
.camp-pct{margin-left:auto;color:var(--oliiv-tume)}
.camp-deadline{font-size:.84rem;color:var(--terra);font-weight:600;margin-top:2px}
/* annetamine kaardil */
.camp-give{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.camp-amt{font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;padding:10px 15px;border-radius:50px;
  background:#fff;border:1.5px solid rgba(138,134,53,.45);color:var(--oliiv-tume);
  transition:background .2s,border-color .2s,color .2s,transform .2s}
.camp-amt:hover{background:var(--oliiv);border-color:var(--oliiv);color:#fff;transform:translateY(-2px)}
.camp-free{display:flex;gap:8px;width:100%;margin-top:2px}
.camp-free input{flex:1;min-width:0;border:1.5px solid rgba(138,134,53,.35);border-radius:50px;
  padding:11px 16px;font:inherit;font-size:.92rem;background:#fff;color:var(--must)}
.camp-free input:focus{outline:2px solid var(--kuld);outline-offset:1px}
.camp-free .btn{padding:11px 22px;font-size:.92rem}
/* ==== Püsiannetuse kaardi kaks teed (14.08.2026, js/campaigns.js) ====
   Toomas: „kaardil tuleb selgelt ära eraldada, et oleks lihtne ja arusaadav".
   Kumbki tee on oma kastis: pealkiri, üks lause, üks nupp ja selle tee OMA
   QR-kood. Octany plokk on kuldne (sama värv mis tema nupp), pangaplokk oliiv,
   nii et värv ise ütleb, kus üks tee lõpeb ja teine algab. */
.camp-give:has(.camp-tee){flex-direction:column;gap:14px}
.camp-tee{width:100%;padding:14px 16px 16px;border-radius:20px 8px 20px 8px;
  border:2px solid rgba(138,134,53,.30);background:rgba(138,134,53,.07)}
.camp-tee-oct{border-color:rgba(216,152,40,.55);background:rgba(216,152,40,.10)}
.camp-tee-h{display:block;font-weight:800;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--oliiv-tume);margin-bottom:5px}
.camp-tee-oct .camp-tee-h{color:#9c6410}
.camp-tee-p{font-size:.88rem;line-height:1.5;color:#4a4436;margin:0 0 12px}
.camp-tee .btn{width:100%;justify-content:center;text-align:center;
  padding:12px 16px;font-size:.95rem}
/* kontuurnupp valgel kaardil: oliiv piirjoon, mitte must */
.camp-tee-pank .btn-ouml{border-color:var(--oliiv);color:var(--oliiv-tume);background:#fff}
.camp-tee-pank .btn-ouml:hover{background:var(--oliiv);color:#fff}
.camp-tee .camp-qr{margin-top:12px;padding-top:12px}
/* QR-i raam võtab oma ploki värvi, mitte kaardi oma: nii on ka koodi juures näha,
   kumma tee juurde ta kuulub */
.camp-tee-oct .camp-qr-pilt{border-color:rgba(216,152,40,.75)}
.camp-tee-pank .camp-qr-pilt{border-color:rgba(138,134,53,.55)}

/* ==== Lai püsiannetuse kaart töölaual (14.08.2026) ====
   Toomas: „püsiannetuse kaart peaks olema laiem, octany ühel pool, lhv teisel
   pool" ja annetusvoog temaga sama lai; telefonis jäävad plokid üksteise alla.
   Üks number hoiab mõlemat laiust paigas: --kamp-laius. Kitsas 440px kaart
   jättis ühe kampaania puhul mõlemasse serva liiga palju tühja liiva. */
.campaigns{--kamp-laius:960px;--kamp-vahe:clamp(18px,2.2vw,28px)}
@media(min-width:760px){
  /* Üks kaart võtab kogu laiuse; kaks kaarti jagavad SAMA laiuse pooleks, nii et
     ruudustik ja annetusvoog jäävad alati ühte joonde, olenemata kaartide arvust. */
  /* NB: valija algab .campaigns-iga meelega - failis tagapool on vanemad
     „üks kaart = 440px" ja „kaks kaarti" reeglid ja sama kaaluga valija kaotaks. */
  .campaigns .camp-grid:has(> :only-child){grid-template-columns:minmax(280px,var(--kamp-laius))}
  .campaigns .camp-grid:has(> :nth-child(2):last-child){
    grid-template-columns:repeat(2,minmax(280px,calc((var(--kamp-laius) - var(--kamp-vahe)) / 2)))}
  /* 16/10 pilt oleks 960px laiuse juures ligi 600px kõrge - laial kaardil ribakuju */
  .campaigns .camp-grid:has(> :only-child) .camp-card .ph{aspect-ratio:auto;height:clamp(220px,19vw,300px)}
  /* sissejuhatav lõik ei jookse üle terve laiuse, muidu läheb rida liiga pikaks */
  .campaigns .camp-grid:has(> :only-child) .camp-card .body > p{max-width:70ch}
  /* kaks teed kõrvuti: võrdne laius, võrdne kõrgus */
  .camp-give:has(.camp-tee){display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .camp-tee{display:flex;flex-direction:column}
  .camp-tee-p{flex:1 0 auto}   /* nupp ja QR jäävad mõlemas plokis ühele joonele */
}
.camp-grid{gap:var(--kamp-vahe,clamp(18px,2.2vw,28px))}

/* ==== Annetusvoog „Anneta kohe" sektsioonis (14.08.2026) ====
   Kolis kampaaniate alt siia. Töölaual sama lai kui kaks kaarti kokku (see on
   kogu ruudustiku laius), telefonis lehe laius nagu kaardidki. Sektsioon on
   tsentreeritud tekstiga, aga voog on nimekiri, seega tema sisu käib vasakule. */
.quickdon .voog{margin-top:clamp(22px,3vw,34px)}
.quickdon .voog-card{max-width:none;width:100%;text-align:left}

/* ==== QR-koodid „Anneta kohe" kaartidel (14.08.2026) ====
   Kummalgi kaardil oma kood: ühekordsel LBF-i LHV makseleht, püsiannetuse
   kaardil Octany oma. Kood on kaardi lõpus, nupu all, sama kujuga nagu
   kampaaniakaardil (.camp-qr), aga kaardi sisu on siin tsentreeritud, seega
   rida ise on keskel ja tekst tema kõrval vasakule joondatud. */
.qd-qr{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(138,134,53,.20);text-align:left}
.qd-qr-pilt{flex:0 0 auto;display:block;line-height:0;padding:6px;background:#fff;
  border:2px solid rgba(138,134,53,.45);border-radius:14px;
  transition:transform .2s ease,box-shadow .2s ease}
.qd-card-pysi .qd-qr-pilt{border-color:rgba(174,67,30,.45)}   /* terra, sama mis kaardi nupp */
.qd-qr-pilt:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(40,30,10,.16)}
.qd-qr-pilt:focus-visible{outline:2px solid var(--kuld);outline-offset:2px}
.qd-qr-pilt img{display:block;width:96px;height:96px;image-rendering:auto}
.qd-qr-txt{min-width:0;max-width:230px;font-size:.86rem;line-height:1.45;color:#4a4436}
.qd-qr-txt b{display:block;color:var(--terra);font-size:.92rem;margin-bottom:2px}
@media(max-width:420px){ .qd-qr-pilt img{width:84px;height:84px} }

/* ==== Lõppenud kampaania (14.08.2026) ====
   Sektsioon näitab nüüd juba täis saanud kampaaniaid: annetusnuppude asemel on
   pildil lipik „Eesmärk täis" ja all tänusõna. Ring jääb alles, sest just tema
   näitab tulemust. Värv on oliiv, mitte kuld: kuld on lehel annetamise värv ja
   siin ei ole enam midagi annetada. */
.camp-card-valmis .ph{position:relative}
.camp-lipp{position:absolute;left:14px;top:14px;display:inline-block;
  padding:7px 14px;border-radius:50px;background:var(--oliiv);color:#fff;
  font-weight:800;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 6px 16px rgba(40,30,10,.25)}
.camp-aitah{font-size:.9rem;line-height:1.5;color:var(--oliiv-tume);
  margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(138,134,53,.20)}
.camp-card-valmis .camp-prog{margin-bottom:0}

/* ==== QR-kood kampaaniakaardil (14.08.2026, js/campaigns.js) ====
   Pilt on Octany enda väljastatud QR ja jääb mustaks: skanner tahab suurimat
   kontrasti ning fail peab jääma täpselt selliseks, nagu Octany selle andis
   (kood viib nende jälgitavale lühilingile). Brändi kannab ümbrus - raam võtab
   kaardi enda piirjoone värvi (--card-line) ja pealkiri on terra. */
.camp-qr{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:16px;
  border-top:1px solid rgba(138,134,53,.20)}
.camp-qr-pilt{flex:0 0 auto;display:block;line-height:0;padding:6px;background:#fff;
  border:2px solid var(--card-line);border-radius:14px;
  transition:transform .2s ease,box-shadow .2s ease}
.camp-qr-pilt:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(40,30,10,.16)}
.camp-qr-pilt:focus-visible{outline:2px solid var(--kuld);outline-offset:2px}
/* image-rendering:auto, sest LHV kood on 396px PNG: pixelated teeks vähendamisel
   moodulid ebaühtlaseks (sama põhjus mis annetusmodaalis, js/donate.js). */
.camp-qr-pilt img{display:block;width:96px;height:96px;image-rendering:auto}
.camp-qr-txt{min-width:0;font-size:.9rem;line-height:1.45;color:#4a4436}
.camp-qr-txt b{display:block;color:var(--terra);font-size:.95rem;margin-bottom:2px}
@media(max-width:420px){ .camp-qr-pilt img{width:84px;height:84px} }

/* Kui käib ainult üks kampaania, ei jäta kolmeveeruline võre kaarti serva rippuma. */
.camp-grid:has(> :only-child){grid-template-columns:minmax(280px,440px);justify-content:center}
/* kahe kaardiga sama: keskel, mitte vasakus servas (06.08.2026) */
.camp-grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(280px,440px));justify-content:center}
@media(max-width:980px){ .camp-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .camp-grid,.camp-grid:has(> :nth-child(2):last-child){grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){ .camp-bar span{transition:none} }


/* sotsiaalmeedia-ikoonid jaluses */
.foot-social{display:flex;gap:18px;margin-top:16px}
/* ainult ikoonid, ilma ringita */
.foot-social a{display:grid;place-items:center;color:var(--liiv);
  transition:color .22s ease,transform .22s ease}
.foot-social a:hover{color:#fff;transform:translateY(-2px)}
.foot-social svg{width:26px;height:26px;fill:currentColor}

/* ==== UUDISED JA MEEDIA (liiv) ==== */
.news{background:var(--oliiv);color:var(--tekst-hele);padding:clamp(52px,7vw,92px) 0}
.news .eyebrow{color:var(--liiv)}
.news h2{color:#fff}
.news-sub{max-width:640px;margin-top:8px;color:#f3eede}
.nw-tabs{display:flex;gap:8px;margin:clamp(22px,3vw,32px) 0 clamp(20px,2.6vw,28px);flex-wrap:wrap}
.nw-tab{font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;padding:11px 22px;border-radius:50px;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.45);color:#fff;
  transition:background .2s,color .2s,border-color .2s,transform .2s}
.nw-tab:hover{transform:translateY(-2px)}
.nw-tab.on{background:var(--liiv);border-color:var(--liiv);color:#3a2f16;box-shadow:0 8px 20px rgba(20,16,4,.28)}
/* ==== Blogivoog avalehel (variant B, 05.08.2026) ====
   Karusselli asemel täislaiuses read. Kaarte enam ei ole, sest just kaardikastid
   jätsid laial ekraanil suure osa oliivtaustast tühjaks: tekst algab nüüd vasakust
   servast ja jookseb üle terve laiuse. Rida on tervikuna klikitav, sisu avab
   js/news.js lugemisvaates (oma uudised) või uues sakis (meedia välised lingid). */
.nw-feed{display:flex;flex-direction:column;margin-top:clamp(6px,1vw,14px)}
.nw-row{display:grid;grid-template-columns:clamp(180px,20vw,260px) 1fr;
  gap:clamp(20px,2.6vw,38px);align-items:center;cursor:pointer;
  padding:clamp(18px,2.1vw,26px) 0;border-top:1px solid rgba(255,255,255,.20);
  transition:background .22s ease,padding .22s ease}
.nw-row:first-child{border-top:0}
.nw-row:hover,.nw-row:focus-visible{background:rgba(255,255,255,.07);outline:none}
.nw-row:focus-visible{box-shadow:0 0 0 2px var(--liiv)}
.nw-rthumb{aspect-ratio:16/11;overflow:hidden;border-radius:26px 10px 26px 10px;
  background:rgba(246,232,207,.16);display:grid;place-items:center}
.nw-rthumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.nw-row:hover .nw-rthumb img{transform:scale(1.05)}
/* pildita lugu (nt raadiosaade): kohatäide brändimärgiga, et rütm ei katkeks */
.nw-rmark{width:52%;aspect-ratio:1;background-color:var(--liiv);opacity:.5;
  -webkit-mask:url('../assets/logo/lbf-mark-valge.png') center/contain no-repeat;
          mask:url('../assets/logo/lbf-mark-valge.png') center/contain no-repeat}
.nw-rtext{min-width:0}
.nw-rtext .nw-meta{color:var(--liiv);font-weight:700;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:8px}
.nw-rtext h3{color:#fff;font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.22;margin:0 0 8px}
.nw-rtext p{color:#f0ecdc;font-size:clamp(.96rem,1.1vw,1.03rem);line-height:1.6;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nw-rtext .nw-link{display:inline-block;color:var(--liiv);font-weight:700;font-size:.95rem}
.nw-row:hover .nw-rtext .nw-link{color:#fff}
@media(max-width:640px){
  .nw-row{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .nw-rthumb{aspect-ratio:16/9}
  .nw-rtext p{-webkit-line-clamp:3}
}
/* Uudiste alamleht (06.08.2026) kasutab sama blogivoogu, aga leht on hele
   (liiv-hele), seega tume tekst ja oliivi aktsendid valgete asemel. */
.news-page .nw-row{border-top-color:rgba(74,63,32,.18)}
.news-page .nw-row:hover,.news-page .nw-row:focus-visible{background:rgba(138,134,53,.08)}
.news-page .nw-row:focus-visible{box-shadow:0 0 0 2px var(--oliiv)}
.news-page .nw-rthumb{background:rgba(138,134,53,.14)}
.news-page .nw-rmark{background-color:var(--oliiv);opacity:.5}
.news-page .nw-rtext .nw-meta{color:var(--oliiv-tume)}
.news-page .nw-rtext h3{color:var(--must)}
.news-page .nw-rtext p{color:#4a4436}
.news-page .nw-rtext .nw-link{color:var(--terra)}
.news-page .nw-row:hover .nw-rtext .nw-link{color:var(--oliiv-tume)}
/* lugemisvaade: oma uudistel ei ole välist linki, täistekst avaneb siin */
.nw-modal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:20px;
  background:rgba(24,20,8,.72);backdrop-filter:blur(3px)}
.nw-modal.on{display:grid}
.nw-mcard{background:var(--liiv-hele);color:var(--tekst);border-radius:28px 10px 28px 10px;
  max-width:660px;width:100%;max-height:88vh;overflow:auto;position:relative;
  box-shadow:0 26px 60px rgba(20,14,4,.45)}
.nw-mx{position:absolute;top:12px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(255,255,255,.92);color:#3a2f16;font-size:1.6rem;line-height:1}
.nw-mx:hover{background:#fff}
/* pilt ei tohi tekstilt kogu akent ära võtta: kõrge foto kärbitakse */
.nw-mimg img{width:100%;height:auto;max-height:42vh;object-fit:cover;display:block}
.nw-mtext{padding:clamp(20px,3vw,32px)}
.nw-mtext .nw-meta{color:var(--oliiv-tume);font-weight:700;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:10px}
.nw-mtext h3{font-size:clamp(1.3rem,2.2vw,1.8rem);color:var(--must);margin-bottom:12px}
.nw-mtext p{font-size:1.02rem;line-height:1.7;color:#4a4436;margin-bottom:18px}
/* Pikk lugu lugemisvaates (14.08.2026): kokkuvõte on sissejuhatus, natuke suurem
   ja tumedam kui ülejäänud tekst, ning eraldub temast õhukese joonega. */
.nw-mtext .nw-mlead{font-size:1.1rem;line-height:1.6;color:var(--oliiv-tume);font-weight:600;
  padding-bottom:16px;border-bottom:1px solid rgba(138,134,53,.25)}
.nw-mtext strong{color:var(--must)}

.nw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px)}
.nw-card{background:#fff;border-radius:var(--raadius);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--vari);transition:transform .25s ease,box-shadow .25s ease}
.nw-card:hover{transform:translateY(-4px);box-shadow:var(--vari-suur)}
.nw-card .ph{aspect-ratio:16/9;overflow:hidden;background:#efe6d2}
.nw-card .ph img{width:100%;height:100%;object-fit:cover}
.nw-card .body{padding:clamp(16px,1.7vw,22px);display:flex;flex-direction:column;flex:1}
.nw-meta{font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--oliiv-tume);margin-bottom:8px}
.nw-card h3{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--must);margin-bottom:8px}
.nw-card p{font-size:.96rem;line-height:1.6;color:#4a4436;margin-bottom:14px}
.nw-link{margin-top:auto;font-weight:700;color:var(--terra)}
.nw-link:hover{color:var(--oranz)}
.nw-empty{color:#f3eede;font-style:italic}
@media(max-width:980px){ .nw-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .nw-grid{grid-template-columns:1fr} }

/* ==== KES ME OLEME (intro, valge) ==== */
.intro{background:var(--liiv-hele)}
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,68px);align-items:center}
.intro-txt h2{margin:6px 0 20px;max-width:18ch}
.intro-txt p{margin:0 0 16px;font-size:1.06rem;line-height:1.75;color:#403a2a}
.intro-txt blockquote{
  margin:24px 0 0;padding:14px 0 14px 22px;border-left:4px solid var(--kuld);
  font-size:1.18rem;font-weight:600;font-style:italic;color:var(--oliiv-tume);max-width:40ch;
}
.intro-media{margin:0;position:relative}
.intro-media img{width:100%;height:100%;max-height:480px;object-fit:cover;border-radius:var(--raadius);box-shadow:var(--vari-suur);display:block}
.intro-media figcaption{margin-top:12px;font-size:.86rem;color:#8a8270;text-align:center}
@media(max-width:780px){
  .intro-grid{grid-template-columns:1fr}
  .intro-media{order:-1}
  .intro-media img{max-height:340px}
}

/* ==== MÕJU NUMBRITES (terrakota taust, nagu CTA-riba) ==== */
/* mõju: hero järel, laineline üleminek punasele; kompaktsem ülalt-alt */
.impact{background:var(--terra);color:var(--tekst-hele);
  /* laine ulatub sektsioonist ~80px kõrgemale ja järgmine laine katab alaserva,
     seetõttu on optiliseks keskjooneks vaja väiksemat ülemist ja suuremat alumist polstrit */
  padding:clamp(8px,1.2vw,18px) 0 clamp(52px,6.6vw,96px)}
.impact .eyebrow{color:var(--liiv)}
.impact h2{color:var(--valge)}
/* pealkiri eemaldatud (Toomas 22.07) -> numbrid kerkivad sildile lähemale */
.impact .eyebrow{margin-bottom:6px}
.impact-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:46px;position:relative;
}
/* ühendav joon, täitub vasakult paremale */
.impact-grid::before{content:"";position:absolute;left:0;right:0;top:34px;height:3px;
  background:rgba(255,255,255,.18);border-radius:3px}
.impact-grid::after{content:"";position:absolute;left:0;top:34px;height:3px;width:0;
  background:var(--liiv);border-radius:3px;transition:width 1.3s cubic-bezier(.25,.7,.25,1) .15s;
  box-shadow:0 0 14px rgba(234,200,145,.6)}
.impact.inview .impact-grid::after{width:100%}
.stat{text-align:center;position:relative}
/* punkt joonel iga statsi kohal */
.stat::before{content:"";position:absolute;top:24px;left:50%;width:14px;height:14px;border-radius:50%;
  background:var(--terra);border:3px solid rgba(255,255,255,.35);transform:translate(-50%,0) scale(0);
  transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.impact.inview .stat::before{background:var(--liiv);border-color:var(--valge);transform:translate(-50%,0) scale(1)}
.stat .num{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;color:var(--valge);line-height:1;
  padding-top:52px}
.stat .lbl{margin-top:10px;font-size:.98rem;font-weight:500;color:var(--liiv)}
/* vasakult-paremale astmeline sisenemine */
.impact .stat{opacity:0;transform:translateX(-46px);
  transition:opacity .6s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.impact.inview .stat{opacity:1;transform:none}
.impact.inview .stat:nth-child(1){transition-delay:.10s}
.impact.inview .stat:nth-child(1)::before{transition-delay:.35s}
.impact.inview .stat:nth-child(2){transition-delay:.28s}
.impact.inview .stat:nth-child(2)::before{transition-delay:.53s}
.impact.inview .stat:nth-child(3){transition-delay:.46s}
.impact.inview .stat:nth-child(3)::before{transition-delay:.71s}
.impact.inview .stat:nth-child(4){transition-delay:.64s}
.impact.inview .stat:nth-child(4)::before{transition-delay:.89s}
@media(prefers-reduced-motion:reduce){
  .impact .stat{opacity:1;transform:none;transition:none}
  .impact-grid::after{transition:none;width:100%}
  .stat::before{transform:translate(-50%,0) scale(1);transition:none}
}
/* mobiilil ajajoon-element peidus (grid mähkub mitmele reale) */
@media(max-width:860px){
  .impact-grid::before,.impact-grid::after,.stat::before{display:none}
  .impact .stat .num{padding-top:0}
}

/* ==== MIKS MEIE (liiv taust) ==== */
.why{background:var(--tume)}
/* ==== Scrollytelling: liikuv taustpilt + brändipaleti duotone ==== */
.why-scroll{position:relative;padding:0}
.why-sticky{position:relative;min-height:100vh;overflow:hidden;background:var(--tume)}
.why-stage{position:relative;width:100%;min-height:100vh}
.why-panel{position:relative;min-height:100vh}
/* taustpildi kihid */
.wp-media{position:absolute;inset:0;overflow:hidden;z-index:1}
.wp-img{position:absolute;inset:-8% -6%;background-size:cover;background-position:center;
  will-change:transform;backface-visibility:hidden}
.wp-img-back{transform:scale(1.28);filter:blur(7px) saturate(1.15)}
.wp-img-front{transform:scale(1.1)}
.wp-tint{position:absolute;inset:0;background:var(--brand);mix-blend-mode:multiply;opacity:.55}
.wp-shade{position:absolute;inset:0;background:
  linear-gradient(95deg, rgba(18,16,11,.78) 0%, rgba(18,16,11,.44) 38%, rgba(18,16,11,.08) 68%, rgba(18,16,11,0) 100%),
  linear-gradient(0deg, rgba(18,16,11,.42) 0%, rgba(18,16,11,0) 45%)}
/* peal jooksev tekst (brändivärv per paneel) */
.wp-text{position:relative;z-index:3;max-width:1160px;margin:0 auto;padding:0 7vw;
  width:100%;color:#fff;will-change:transform,opacity}
.wp-bar{display:block;width:66px;height:5px;border-radius:3px;background:var(--brand);
  margin:0 0 20px;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.wp-text h3{font-size:clamp(1.9rem,4.4vw,3.4rem);color:#fff;margin:0 0 18px;max-width:15ch;
  line-height:1.06;text-shadow:0 3px 24px rgba(0,0,0,.5)}
.wp-text p{font-size:clamp(1.05rem,1.45vw,1.28rem);color:#f3eede;max-width:44ch;line-height:1.72;
  text-shadow:0 2px 16px rgba(0,0,0,.45)}
/* sektsiooni pealkiri + navigatsioon (peal, hele) */
.why-scroll{scroll-margin-top:20px}
.why-head{position:absolute;top:clamp(92px,13vh,128px);left:0;right:0;z-index:5;text-align:center}
.why-head .eyebrow{color:var(--liiv)}
.why-head h2{margin-top:6px;color:#fff;text-shadow:0 3px 22px rgba(0,0,0,.5)}

/* NAVIGATSIOON: nooled + kõik pealkirjad nähtaval */
.why-nav{display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:clamp(18px,2.6vh,30px);padding:0 clamp(12px,3vw,28px)}
.why-arrow{flex:0 0 auto;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(4px);
  transition:background .25s,border-color .25s,transform .25s}
.why-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.why-arrow:hover,.why-arrow:focus-visible{background:var(--brand-active,#D89828);
  border-color:var(--brand-active,#D89828);color:var(--brand-fg,#fff);transform:scale(1.06)}
.why-tabs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center;
  max-width:min(1180px,84vw)}
.why-tab{font:inherit;font-weight:600;font-size:clamp(.78rem,.95vw,.9rem);line-height:1.2;
  color:#fff;cursor:pointer;padding:9px 14px;border-radius:999px;white-space:nowrap;
  background:rgba(12,10,7,.34);border:1px solid rgba(255,255,255,.32);
  text-shadow:0 1px 8px rgba(0,0,0,.5);transition:background .25s,border-color .25s,color .25s}
.why-tab:hover{background:rgba(12,10,7,.6);border-color:#fff}
.why-tab.on{background:var(--brand-active,#D89828);border-color:var(--brand-active,#D89828);
  color:var(--brand-fg,#fff);text-shadow:none;box-shadow:0 6px 20px rgba(0,0,0,.28)}

/* ON: JS-juhitav paneelivahetus (ei skrolli-kaaperdamist) */
.why-scroll.why-on{height:auto}
.why-scroll.why-on .why-sticky{position:relative;min-height:clamp(660px,100vh,940px)}
.why-scroll.why-on .why-stage{position:absolute;inset:0;min-height:0}
.why-scroll.why-on .why-panel{position:absolute;inset:0;min-height:0;opacity:0;
  display:flex;align-items:flex-end;pointer-events:none;
  padding-bottom:clamp(104px,16vh,190px);transition:opacity .55s ease}
.why-scroll.why-on .why-panel.is-on{opacity:1;z-index:3;pointer-events:auto}
.why-scroll.why-on .why-panel .wp-text{transform:translateY(26px);opacity:0;
  transition:transform .6s cubic-bezier(.2,.7,.3,1) .08s,opacity .5s ease .08s}
.why-scroll.why-on .why-panel.is-on .wp-text{transform:none;opacity:1}
.why-scroll.why-on .wp-img-back{animation:wpKen 22s ease-in-out infinite alternate}
@keyframes wpKen{from{transform:scale(1.24) translate(0,0)}to{transform:scale(1.36) translate(-2.5%,-2%)}}
@media(prefers-reduced-motion:reduce){
  .why-scroll.why-on .wp-img-back{animation:none}
  .why-scroll.why-on .why-panel,.why-scroll.why-on .why-panel .wp-text{transition:none}
  .why-scroll.why-on .why-panel .wp-text{transform:none}
}

/* FALLBACK (ei JS): paneelid virnas, igaüks oma ekraan */
.why-scroll:not(.why-on) .why-head{position:relative;top:0;padding:60px 0 0;color:#fff}
.why-scroll:not(.why-on) .why-nav{display:none}

@media(max-width:860px){
  .wp-text{padding:0 9vw}
  .wp-shade{background:
    linear-gradient(0deg, rgba(18,16,11,.86) 0%, rgba(18,16,11,.3) 58%, rgba(18,16,11,.4) 100%)}
  /* mobiilis: KÕIK pealkirjad nähtaval (murduvad ridadesse), nooled nende all */
  .why-nav{flex-wrap:wrap;gap:12px;padding:0 14px}
  .why-tabs{order:1;flex-basis:100%;max-width:100%;gap:6px}
  .why-tab{padding:7px 11px;font-size:.76rem}
  .why-arrow{order:2;width:42px;height:42px}
  .why-arrow[data-why-next]{order:3}
  .why-arrow svg{width:20px;height:20px}
  .why-scroll.why-on .why-sticky{min-height:clamp(620px,96vh,860px)}
  .why-scroll.why-on .why-panel{padding-bottom:clamp(76px,12vh,128px)}
}
/* Heateokingituste esiletõst avalehel */
.home-gifts{background:var(--liiv)}
.home-gifts .hg-sub{max-width:660px;color:var(--oliiv-tume);margin-top:6px}
.home-gifts .gift-grid{margin-top:40px}
.hg-all{margin-top:42px}

/* ==== Lainelised sektsiooni-üleminekud (orgaanilised mäed) ==== */
.has-wave{position:relative}
.wtop{position:absolute;left:0;right:0;top:0;height:clamp(42px,5.5vw,82px);
  transform:translateY(-99%);line-height:0;pointer-events:none;z-index:3}
.wtop svg{display:block;width:100%;height:100%}
/* .wbot = laine sektsiooni ALL (kasutame siis, kui järgmise sektsiooni taust on foto
   ja laine ei saa olla sihtvärvis) */
.wbot{position:absolute;left:0;right:0;bottom:0;height:clamp(42px,5.5vw,82px);
  transform:translateY(99%) scaleY(-1);line-height:0;pointer-events:none;z-index:6}
.wbot svg{display:block;width:100%;height:100%}
.wbot svg path{fill:var(--wave-bot,#fff)}
.wtop svg path{fill:var(--wave,#fff)}
/* --wave = sihtsektsiooni taust (ei mõjuta teksti värvi) */
.impact.has-wave{--wave:var(--terra)}
/* 14.08.2026: „Anneta kohe" ja „Kampaaniad" vahetasid lehel kohad, seega alumine
   laine (üleminek tumedale „Miks meie" sektsioonile) kolis kampaaniate juurde. */
.quickdon.has-wave{--wave:var(--liiv)}
.campaigns.has-wave{--wave:var(--liiv);--wave-bot:var(--liiv)}
.news.has-wave{--wave:var(--oliiv)}
.nl-signup.has-wave{--wave:var(--oliiv)}
/* alamlehtede sektsioonid */
.why.has-wave{--wave:var(--tume)}
.steps.has-wave{--wave:var(--valge)}
.stories.has-wave{--wave:var(--oliiv)}
footer.has-wave{--wave:var(--oliiv);position:relative}
.intro.has-wave{--wave:var(--liiv-hele)}
.home-gifts.has-wave{--wave:var(--liiv)}
.stories.has-wave{--wave:var(--oliiv)}
.help.has-wave{--wave:var(--liiv-hele)}
/* Avalehe "Kuidas aidata": heateokingituste sektsiooni eemaldamise järel jäi
   galerii (hele liiv) sellega kõrvuti ja laine nende vahel kadus ära. Üks toon
   tumedam liiv hoiab ülemineku nähtavana. Teadlikkuse lehe .help jääb heledaks. */
.help.liiv{background:var(--liiv)}
.help.liiv.has-wave{--wave:var(--liiv)}
/* Silt on väike suurtähtkiri ja vajab AA jaoks 4.5:1. Paletioliiv annab liival ainult
   2.38 (ja heledal liival 3.13, ehk jäi alla ka enne), tumedam sama tooni aste 5.46. */
.help .eyebrow{color:#4f4d1e}
.cta-band.has-wave{--wave:var(--terra)}
.partners.has-wave{--wave:var(--liiv)}

/* ==== Koostööpartnerid (edulugude ja galerii vahel) ==== */
.partners{background:var(--liiv);padding:clamp(46px,6vw,74px) 0;text-align:center}
.partners .eyebrow{color:var(--terra)}
.partners h2{color:var(--must)}
.partners-sub{max-width:600px;margin:8px auto 0;color:#5b5342}
.partner-row{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:clamp(14px,1.8vw,22px);margin-top:clamp(26px,3.2vw,38px);padding:0}
/* Logod istuvad otse liivataustal, valget plaati ei ole. PNG-d on kärbitud
   läbipaistva ääreni, seega optilise suuruse annab ainult max-height. */
.partner{flex:0 1 clamp(190px,20vw,250px)}
.partner a{display:flex;align-items:center;justify-content:center;height:100%;
  min-height:clamp(84px,8vw,108px);padding:10px 18px;border-radius:var(--raadius);
  transition:transform .25s ease,opacity .25s ease}
.partner a:hover{transform:translateY(-3px);opacity:.78}
.partner a:focus-visible{outline:2px solid var(--terra);outline-offset:4px}
.partner img{width:auto;max-width:100%;max-height:clamp(38px,4.2vw,52px);object-fit:contain}
/* Green Dice on püstine lukustus (märk nime kohal), vajab optiliselt rohkem kõrgust */
.partner:first-child img{max-height:clamp(54px,5.8vw,72px)}
/* Brändilabor on kahereäline paks sõnamärk. Kuna kiri on tugev ja must, tükib ta
   Green Dice'i kõrgusega (68 px) teistest ette, seepärast on lagi hoopis MADALAM
   kui reas keskmiselt. 44 px juures on optiline kaal Globedry sõnamärgiga sama.
   Sihime failinime järgi, mitte järjekorra järgi, sest partnerite järjekord
   tuleb admin-paneelist. */
.partner img[src*="brandilabor"]{max-height:clamp(34px,3.6vw,44px)}
/* sõnamärk neile, kellel pildilogo ei ole */
.partner-sonamark{display:block;font-weight:400;letter-spacing:.06em;line-height:1.15;
  font-size:clamp(1.02rem,1.35vw,1.22rem);color:#1f1c17;text-transform:uppercase;white-space:nowrap}
.partner-sonamark em{display:block;font-style:normal;text-transform:none;letter-spacing:.01em;
  font-size:.68em;color:#6d6555;margin-top:5px}
/* mobiilis üks ühtlane veerg */
@media(max-width:640px){ .partner{flex:1 1 100%;max-width:320px;margin:0 auto} }

/* ==== EDULOOD (valge/kreem) ==== */
.stories{background:var(--oliiv);color:var(--tekst-hele)}
.stories .eyebrow{color:var(--liiv)}
.stories h2{color:var(--valge)}
/* Liivane variant (Teadlikkus ja koostöö). Tumedal tekstil peavad ka silt,
   pealkiri ja lõiguvärv ümber pöörama, muidu jääb hele tekst heledale taustale. */
.stories.liiv{background:var(--liiv);color:var(--tekst)}
.stories.liiv.has-wave{--wave:var(--liiv)}
/* silt on väike suurtähtkiri, seega vajab AA jaoks 4.5:1. Paletijärgne terrakota
   annab liival ainult 3.64, üks aste tumedam terrakota annab 4.96. */
.stories.liiv .eyebrow{color:#8f3316}
.stories.liiv h2{color:var(--must)}
.stories.liiv p{color:#5b5342}
.stories-head{text-align:center;max-width:680px;margin:0 auto}
.stories-head p{color:var(--liiv)}
.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-top:50px}
.story{
  border-radius:var(--raadius);overflow:hidden;background:var(--liiv-hele);box-shadow:var(--vari);
  display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;
}
.story:hover{transform:translateY(-6px);box-shadow:var(--vari-suur)}
.story-img{aspect-ratio:4/3;overflow:hidden;background:var(--liiv)}
.story-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.story:hover .story-img img{transform:scale(1.05)}
.story-body{padding:26px 24px}
.story-body .name{font-weight:800;font-size:1.25rem;color:var(--terra)}
.story-body p{font-size:.97rem;color:#555;margin-top:10px}


/* ==== KUIDAS AIDATA ==== */
.help{background:var(--liiv-hele)}
.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:48px}
.help-card{
  background:var(--valge);border-radius:var(--raadius);padding:34px 28px;box-shadow:var(--vari);
  text-align:center;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;align-items:center;
}
.help-card:hover{transform:translateY(-6px);box-shadow:var(--vari-suur)}
.help-card .ico{width:56px;height:56px;margin-bottom:18px}
.help-card h3{margin-bottom:10px}
.help-card p{font-size:.95rem;color:#555;flex:1}
.help-card .more{margin-top:18px;font-weight:700;color:var(--oliiv)}

/* lihtne ikoonijoonis */
.ico{display:block}

/* ==== ANNETA KOHE (kiir-annetus, liiv) ==== */
.quickdon{background:var(--liiv);text-align:center}
.quickdon h2{margin-bottom:10px}
.qd-sub{max-width:620px;margin:0 auto 34px;color:#5a4d2c;font-size:1.05rem}
/* 18.08.2026 (Toomas): kõik viis summat ühele reale. Nupud jagavad rea võrdselt,
   nii et rida on sama lai kui kaardi sisu ja kaardid on kõrvuti ühes rütmis.
   Mobiilis (max-width:520px allpool) jääb vana, murduv kuju. */
.qd-amounts{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:24px}
.qd-amt{
  font-family:inherit;font-weight:800;font-size:clamp(1.05rem,1.35vw,1.3rem);cursor:pointer;
  min-width:0;padding:16px 6px;border-radius:16px;
  background:var(--valge);color:var(--oliiv-tume);border:2px solid transparent;
  box-shadow:var(--vari);transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.qd-amt:hover{transform:translateY(-3px);background:var(--kuld);color:var(--valge);box-shadow:0 12px 28px rgba(216,152,40,.4)}
/* 18.08.2026: „muu summa" rida on sama lai kui summanuppude rida ülal, nii et
   kaardi sisu on ühes rütmis (Toomas: kaardid peavad kõrvuti ühte moodi joonduma) */
.qd-custom{display:flex;gap:12px;justify-content:center;align-items:stretch;flex-wrap:wrap}
.qd-field{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0}
/* 14.08.2026: väli oli 180px lai ja kohatäide „Muu summa" lõikus lõpust ära
   („Muu summ"). Ruumi söövad parempoolne 38px varu euromärgi jaoks ja
   numbrivälja kerimisnooled. Nooled võtsime maha (summa kirjutatakse, mitte
   ei kerita) ja välja laiuseks 215px, nii et kohatäide mahub tervikuna. */
.qd-field input{
  /* 18.08.2026: fikseeritud 215px asemel täidab väli oma rea (vt .qd-custom).
     NB: see reegel on failis TAGAPOOL, seega laius tuleb siit, mitte ülalt. */
  font-family:inherit;font-size:1.1rem;font-weight:600;width:100%;min-width:150px;
  padding:15px 38px 15px 20px;border-radius:50px;border:2px solid #d9c79c;
  background:var(--valge);color:var(--tekst);
  -webkit-appearance:none;appearance:none;margin:0;
}
.qd-field input::-webkit-outer-spin-button,
.qd-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qd-field input[type=number]{-moz-appearance:textfield}
.qd-field input:focus{outline:none;border-color:var(--kuld)}
.qd-field .qd-eur{position:absolute;right:18px;font-weight:700;color:var(--oliiv-tume);pointer-events:none}
@media(max-width:520px){
  /* Telefonis jääb kaart selliseks nagu ta oli (Toomas 18.08): summad murduvad
     kolm + kaks, mitte viis kitsast tulpa. */
  .qd-amounts{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
  .qd-amt{min-width:0;flex:1 1 28%;padding:16px 8px;font-size:1.2rem}
  .qd-field input{width:100%}
  .qd-field{flex:1 1 100%}
  .qd-custom .btn{width:100%;justify-content:center}
}

/* ==== CTA riba (terrakota) ==== */
.cta-band{background:var(--terra);color:var(--valge);text-align:center}
.cta-band h2{color:var(--valge)}
/* logo-animatsioon pealkirja kohal: mängib korra ja jääb seisma päris logona */
.cta-anim{margin:0 auto 18px;width:min(300px,62vw);aspect-ratio:440/375}
.cta-anim canvas{width:100%;height:100%;display:block}
.cta-band p{max-width:600px;margin:16px auto 30px;color:#fbe7da}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ==== FOOTER (oliiv) ==== */
footer{background:var(--oliiv);color:var(--tekst-hele);padding:64px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot-logo img{height:64px;margin-bottom:16px}
.foot-col h4{color:var(--valge);font-size:1rem;font-weight:700;margin-bottom:16px;letter-spacing:.04em}
.foot-col a{display:block;color:var(--liiv);font-size:.95rem;margin-bottom:10px;transition:color .2s}
.foot-col a:hover{color:var(--valge)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.2);margin-top:46px;padding-top:24px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.85rem;color:var(--liiv)}

/* ==== Küpsiste nõusolek (GDPR) ==== */
.cookie{
  position:fixed;left:18px;right:18px;bottom:18px;z-index:200;max-width:480px;margin:0 auto;
  background:var(--valge);border-radius:var(--raadius);box-shadow:var(--vari-suur);
  padding:24px 26px;display:none;
}
.cookie.show{display:block;animation:rise .4s ease}
@keyframes rise{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.cookie h4{font-size:1.05rem;margin-bottom:8px}
.cookie p{font-size:.88rem;color:#555;margin-bottom:16px}
.cookie p a{color:var(--oliiv);font-weight:600;text-decoration:underline}
.cookie-btns{display:flex;gap:10px;flex-wrap:wrap}
.cookie-btns .btn{padding:11px 22px;font-size:.9rem}

/* ==== Annetus-modaal ==== */
.pay-modal{position:fixed;inset:0;z-index:300;background:rgba(20,15,5,.6);backdrop-filter:blur(3px);
  display:none;align-items:flex-start;justify-content:center;padding:30px 16px;overflow:auto}
.pay-modal.open{display:flex}
.pay-card{background:var(--valge);border-radius:var(--raadius);max-width:560px;width:100%;
  padding:34px 32px;box-shadow:var(--vari-suur);position:relative;animation:rise .3s ease;margin:auto}
.pay-x{position:absolute;top:14px;right:18px;background:none;border:none;font-size:2rem;line-height:1;
  cursor:pointer;color:#999;transition:color .2s}
.pay-x:hover{color:var(--terra)}
.pay-h{font-size:1.4rem;margin-bottom:22px;padding-right:30px}
.pay-amt{color:var(--kuld)}
.pay-step{border-top:1px solid #eee;padding-top:20px;margin-top:8px}
.pay-step h3{font-size:1.08rem;color:var(--oliiv);margin-bottom:8px}
.pay-intro{font-size:.92rem;color:#666;margin-bottom:16px}
.pay-methods{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.pm{flex:1;min-width:90px;padding:11px 10px;border:1.5px solid #e0d4b8;background:#fff;border-radius:10px;
  cursor:pointer;font-family:inherit;font-weight:700;font-size:.9rem;color:#777;transition:all .18s}
.pm:hover{border-color:var(--oliiv);color:var(--oliiv)}
.pm.on{background:var(--oliiv);border-color:var(--oliiv);color:#fff}
.pm-logo{display:flex;align-items:center;justify-content:center}
.pm-logo img{height:17px;width:auto;display:block}
.pm-logo.on img{filter:brightness(0) invert(1)}   /* valitud olekus valge logo oliivil */
.pm-paypal{display:flex;align-items:center;justify-content:center;color:#003087}
.pm-paypal:hover{color:#003087}
.pm-paypal.on{color:#fff}
.pm-paypal svg{height:16px;width:auto;display:block}
.paypal-btn{display:inline-flex;align-items:center;justify-content:center;background:#003087;color:#fff;
  padding:14px 30px;border-radius:50px;cursor:pointer;transition:background .2s;text-decoration:none;width:100%}
.paypal-btn:hover{background:#001c54}
.paypal-btn svg{height:26px;width:auto;display:block}
#paypalPanel{text-align:center}
/* Octany püsiannetuse riba annetusmodaalis (asendas Patreoni 07.08.2026) */
.octany-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--oranz);color:#fff;border-radius:12px;padding:16px 20px;margin:18px 0 4px;
  text-decoration:none;transition:background .2s}
.octany-strip:hover{background:var(--terra)}
.octany-strip .ps-logo{width:38px;height:auto;flex:0 0 auto}
.octany-strip .ps-txt{display:flex;flex-direction:column;text-align:left;flex:1;margin-left:2px}
.octany-strip strong{font-size:1rem}
.octany-strip span{font-size:.84rem;opacity:.92}
.pay-link{width:100%;justify-content:center;font-size:1.02rem;margin:6px 0 4px}
.pay-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:#999;font-size:.82rem;font-style:italic}
.pay-or span{flex:1;height:1px;background:#e3d8bd}
.pay-transfer{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
/* idee #96: QR-kood keskel (flex-reas ja ka kitsal ekraanil, kus rida murdub) */
.pay-qr{width:140px;flex-shrink:0;background:#fff;padding:8px;border-radius:10px;border:1px solid #ece0c4;
  margin-left:auto;margin-right:auto}
.pay-qr img{display:block;image-rendering:pixelated}
.pay-details{flex:1;min-width:240px}
.pay-row{display:flex;align-items:center;gap:10px;background:var(--liiv-hele);border-radius:10px;
  padding:10px 14px;margin-bottom:8px;flex-wrap:wrap}
.pay-lbl{font-weight:700;font-size:.78rem;color:var(--oliiv);min-width:70px;text-transform:uppercase;letter-spacing:.04em}
.pay-val{flex:1;font-size:.95rem;font-family:monospace;color:var(--must);min-width:120px;word-break:break-all}
.pay-copy{background:var(--oliiv);color:#fff;border:none;border-radius:7px;padding:6px 12px;cursor:pointer;font-size:.78rem;font-weight:600;font-family:inherit}
.pay-copy:hover{background:var(--oliiv-tume)}
.pay-note{font-size:.8rem;color:#b08;color:var(--terra);margin-top:6px}
.pay-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.pay-form label{font-weight:600;font-size:.85rem;display:block;margin-bottom:5px}
.pay-form input{width:100%;padding:11px 14px;border:1.5px solid #e0d4b8;border-radius:10px;font-family:inherit;font-size:.95rem}
.pay-form input:focus{outline:none;border-color:var(--oliiv)}
#certWrap{margin-top:18px}
#certCanvas{width:100%;height:auto;border-radius:12px;box-shadow:var(--vari);margin-bottom:14px}
.pay-actions{display:flex;gap:10px;flex-wrap:wrap}
.pay-actions .btn{padding:11px 20px;font-size:.9rem}
@media(max-width:480px){.pay-form{grid-template-columns:1fr}.pay-card{padding:26px 20px}}

/* Octany kakskeelne vahesamm (js/octany.js): ET-külastaja valib summa siin,
   makse ise toimub Octany lehel. Kest on sama mis pay-modal'il.
   Idee #92 (07.08.2026): kogu sisu keskele joondatud. */
.oct-card{text-align:center}
.oct-card .pay-h{text-align:center}
.oct-card .oct-sub{margin:2px 0 14px;color:#6a5a3a}
.oct-amts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;justify-content:center}
.oct-free{justify-content:center}
.oct-amts button{border:2px solid var(--kuld);background:#fff;color:#8a6a1d;
  font:700 1rem 'Montserrat',sans-serif;padding:12px 18px;border-radius:12px;cursor:pointer;
  transition:background .15s,color .15s}
.oct-amts button.on{background:var(--kuld);color:#fff}
.oct-free{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.oct-free input{width:150px;padding:11px 14px;border:1.5px solid #d8c9a8;border-radius:10px;
  font:600 1rem 'Montserrat',sans-serif}
.oct-eur{font-weight:700;color:#6a5a3a}
.oct-recur{margin:0 0 12px;font-size:.9rem;color:#6a5a3a}
.oct-go{width:100%;justify-content:center;text-align:center}
.oct-go.off{opacity:.5;pointer-events:none}
.oct-note{margin:12px 0 8px;font-size:.88rem;color:#6a5a3a}
.oct-bank{display:inline-block;font-size:.88rem;color:var(--terra);text-decoration:underline;cursor:pointer}
/* aitäh-kiht: ilmub, kui laekumise seire näeb makset (js/octany.js) */
.oct-thanks{text-align:center}
.oct-thanks .oct-logo{width:86px;height:auto;display:block;margin:4px auto 14px}
.oct-thanks h2{color:var(--terra);font-size:1.8rem;margin:0 0 10px}
.oct-thanks p{color:#5a4a2a;max-width:36ch;margin:0 auto 20px}
.oct-thanks .btn{min-width:150px;justify-content:center}

/* ==== Reveal animatsioon ==== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ==========================================================================
   ALAMLEHED
   ========================================================================== */
.subhero{
  padding:clamp(120px,16vw,180px) 0 clamp(50px,7vw,80px);
  background:var(--oliiv);color:var(--tekst-hele);position:relative;
}
.subhero.terra{background:var(--terra)}
.subhero.kuld{background:linear-gradient(120deg,var(--kuld),var(--oranz))}
.subhero h1{color:var(--valge);max-width:760px}
.subhero .lead{font-size:clamp(1.05rem,1.6vw,1.28rem);font-weight:400;margin-top:18px;max-width:680px;color:var(--liiv-hele)}
.subhero.kuld .lead{color:#fff5e9}
.crumb{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;
  color:var(--liiv);margin-bottom:22px;transition:color .2s}
.crumb:hover{color:var(--valge)}
.crumb svg{width:16px;height:16px}

/* sammud */
.steps{background:var(--valge)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:46px}
.step{position:relative;padding-top:8px}
.step .n{width:46px;height:46px;border-radius:50%;background:var(--kuld);color:#fff;
  font-weight:800;font-size:1.2rem;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.step:nth-child(2) .n{background:var(--oranz)}
.step:nth-child(3) .n{background:var(--terra)}
.step h3{margin-bottom:8px}
.step p{font-size:.96rem;color:#555}

/* kingituste ruudustik */
.gift-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:48px}
.gift-card{background:var(--valge);border:1px solid #ecdfc4;border-radius:var(--raadius);
  padding:30px 26px;box-shadow:var(--vari);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.gift-card:hover{transform:translateY(-6px);box-shadow:var(--vari-suur)}
.gift-card .gi{width:54px;height:54px;margin-bottom:18px}
.gift-card .price{font-weight:800;font-size:1.7rem;color:var(--oliiv)}
.gift-card h3{margin:4px 0 10px}
.gift-card p{font-size:.95rem;color:#555;flex:1}
.gift-card .btn{margin-top:20px;align-self:flex-start}
.gift-phys{margin-top:30px;background:linear-gradient(120deg,var(--liiv),var(--liiv-hele));
  border-radius:var(--raadius);padding:38px 34px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;box-shadow:var(--vari)}
.gift-phys .gi{width:60px;height:60px;flex-shrink:0}
.gift-phys .txt{flex:1;min-width:240px}
.gift-phys h3{margin-bottom:8px}
.gift-phys p{font-size:.97rem;color:#5a4a2a}
.gift-phys .price{font-weight:800;color:var(--terra);white-space:nowrap}

/* dream kaardid */
.dream-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-top:48px}
.dream-card{background:var(--valge);border-radius:var(--raadius);overflow:hidden;box-shadow:var(--vari);
  display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.dream-card:hover{transform:translateY(-6px);box-shadow:var(--vari-suur)}
.dream-card .ph{aspect-ratio:4/5;overflow:hidden;background:var(--liiv)}
.dream-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.dream-card:hover .ph img{transform:scale(1.05)}
.dream-card .body{padding:24px}
.dream-card .dream{display:inline-block;background:var(--liiv);color:var(--terra);font-weight:700;
  font-size:.8rem;padding:5px 12px;border-radius:50px;margin-bottom:12px}
.dream-card h3{font-size:1.15rem;margin-bottom:8px}
.dream-card p{font-size:.95rem;color:#555}
.dream-card .need{margin-top:14px;font-size:.85rem;color:var(--oliiv);font-weight:600}
.dream-card .btn{margin-top:18px;width:100%;justify-content:center}
.dream-support{display:flex;gap:10px;margin-top:16px}
.dream-support .btn{margin-top:0;flex:1;width:auto;padding:12px 8px;font-size:.9rem}

/* kaks veergu (toetusvalikud) */
.two-opt{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.opt{background:var(--valge);border-radius:var(--raadius);padding:32px 28px;box-shadow:var(--vari);
  border-left:5px solid var(--kuld)}
.opt:nth-child(2){border-left-color:var(--terra)}
.opt h3{margin-bottom:10px;font-size:1.15rem}
.opt p{font-size:.96rem;color:#555}

/* vorm */
.lbf-form{max-width:620px;margin-top:36px;display:grid;gap:16px}
.lbf-form label{font-weight:600;font-size:.9rem;display:block;margin-bottom:6px;color:var(--must)}
.lbf-form input,.lbf-form textarea{width:100%;padding:13px 16px;border:1.5px solid #e0d4b8;border-radius:12px;
  font-family:inherit;font-size:1rem;background:var(--valge);transition:border .2s}
.lbf-form input:focus,.lbf-form textarea:focus{outline:none;border-color:var(--oliiv)}
.lbf-form textarea{min-height:120px;resize:vertical}
.lbf-form .note{font-size:.85rem;color:#777}
/* Vormisektsioonid keskele: Dream Bridge "Jaga oskusi" (#give) ja teadlikkuse
   lehe "Liitu võrgustikuga" (#join). Plokid liiguvad auto-veeristega,
   text-align üksi plokki ei liigutaks; väljasildid jäävad vormi sees vasakule */
#give,#join{text-align:center}
#give .wrap>p,#join .wrap>p{margin-left:auto;margin-right:auto}
#give .lbf-form,#join .lbf-form{margin-left:auto;margin-right:auto;text-align:left}
#give .lbf-form .note,#join .lbf-form .note{text-align:center}

/* artiklid */
.articles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:46px}
.art-card{background:var(--valge);border-radius:var(--raadius);padding:30px 26px;box-shadow:var(--vari);
  border-top:4px solid var(--oliiv);transition:transform .25s,box-shadow .25s}
.art-card:nth-child(2){border-top-color:var(--kuld)}
.art-card:nth-child(3){border-top-color:var(--oranz)}
.art-card:nth-child(4){border-top-color:var(--terra)}
.art-card:hover{transform:translateY(-6px);box-shadow:var(--vari-suur)}
.art-card h3{font-size:1.1rem;margin-bottom:10px}
.art-card p{font-size:.94rem;color:#555}

/* teemapallid (awareness) */
.topics{display:flex;flex-wrap:wrap;gap:14px;margin-top:42px}
.topic{display:inline-flex;align-items:center;padding:14px 26px;border-radius:50px;
  background:var(--valge);box-shadow:var(--vari);font-weight:700;color:var(--oliiv);
  border:2px solid transparent;transition:transform .2s,background .2s,color .2s,border-color .2s}
.topic:nth-child(3n+1){color:var(--oliiv)}
.topic:nth-child(3n+2){color:var(--oranz)}
.topic:nth-child(3n+3){color:var(--terra)}
.topic:hover{transform:translateY(-3px);background:var(--oliiv);color:var(--valge);border-color:var(--oliiv)}
/* teemad ilma sisuta: ei ole klikitavad, ei tõuse hiire all */
.topic.is-soon{cursor:default;opacity:.75}
.topic.is-soon:hover{transform:none;background:var(--valge);border-color:transparent}
.topic.is-soon:nth-child(3n+1):hover{color:var(--oliiv)}
.topic.is-soon:nth-child(3n+2):hover{color:var(--oranz)}
.topic.is-soon:nth-child(3n+3):hover{color:var(--terra)}
/* Idee #91 (07.08.2026): "Info tulekul" punaseks ja suuremaks, et eristuks.
   NB: p.info-soon (0-1-1), sest .stories.liiv p (0-2-1) võidaks muidu värvi. */
p.info-soon,.stories.liiv p.info-soon{margin-top:18px;font-size:1.15rem;font-weight:800;
  color:#C92A2A;text-transform:uppercase;letter-spacing:.04em;text-align:center}   /* idee #102: keskel */

/* videote "näita rohkem/vähem" (idee #102) */
.vid-more-row{display:flex;gap:12px;justify-content:center;margin-top:30px}
.vid-more-row .vid-less{background:#fff;border:2px solid var(--kuld);color:#8a6a1d}
.vid-more-row .vid-less:hover{background:var(--kuld);color:#fff}

/* videod (awareness) */
.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.vid-card{display:flex;flex-direction:column;background:var(--liiv-hele);border-radius:var(--raadius);
  overflow:hidden;box-shadow:var(--vari);text-decoration:none;transition:transform .25s,box-shadow .25s}
.vid-card:hover{transform:translateY(-6px);box-shadow:var(--vari-suur)}
.vid-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--liiv)}
.vid-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.vid-card:hover .vid-thumb img{transform:scale(1.06)}
.vid-thumb::after{content:"";position:absolute;inset:0;background:rgba(43,42,36,.22)}
.vid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;
  border-radius:50%;background:rgba(216,152,40,.95);z-index:2;box-shadow:0 8px 22px rgba(0,0,0,.3);
  transition:transform .2s,background .2s}
.vid-play::before{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.vid-card:hover .vid-play{transform:translate(-50%,-50%) scale(1.08);background:var(--kuld)}
.vid-cap{padding:18px 20px 22px}
/* Video avaneb kaardis kohapeal. .vid-thumb on nüüd nupp, seega vajab nupu lähtestust. */
button.vid-thumb{display:block;width:100%;padding:0;border:0;background:var(--liiv);
  cursor:pointer;font:inherit;color:inherit;text-align:left}
button.vid-thumb:focus-visible{outline:3px solid var(--terra);outline-offset:3px}
.vid-frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-close{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;border:0;
  border-radius:50%;background:rgba(20,16,8,.72);color:#fff;font-size:1.4rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.vid-close:hover{background:var(--terra)}
.vid-cap h3{margin-bottom:0}
.vid-cap h3{font-size:1.08rem;color:var(--oliiv-tume);margin-bottom:6px}
.vid-soon{font-size:.82rem;font-weight:600;color:var(--terra);text-transform:uppercase;letter-spacing:.03em}
@media(max-width:860px){.vid-grid{grid-template-columns:1fr;max-width:430px;margin-left:auto;margin-right:auto}}

/* partnerid */
.partners-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px;margin-top:40px}
.partner-slot{aspect-ratio:3/2;background:var(--valge);border:1.5px dashed #d8c79f;border-radius:14px;
  display:flex;align-items:center;justify-content:center;color:#bba968;font-weight:600;font-size:.85rem;text-align:center;padding:10px}

/* privaatsus tekst */
.priv-body{max-width:780px}
.priv-body .upd{color:#888;font-size:.9rem;margin-bottom:30px}
.priv-body h2{font-size:1.4rem;margin:34px 0 12px;color:var(--oliiv)}
.priv-body p{margin-bottom:14px;color:#444}

@media(max-width:760px){
  .steps-grid{grid-template-columns:1fr;gap:24px}
  .two-opt{grid-template-columns:1fr}
}

/* ==== Mobiil ==== */
@media(max-width:860px){
  .impact-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .foot-grid{grid-template-columns:1fr 1fr}
  /* logo keskele + veidi suuremaks telefonis; hamburger absoluutselt paremale.
     NB: transform/absolute on .menu-btn'il OK (pole fixed mobiilimenüü .nav esivanem). */
  .hdr{justify-content:center}
  .menu-btn{display:flex;position:absolute;right:20px;top:50%;transform:translateY(-50%)}
  .hdr-logo{height:52px}
  .hdr.scrolled .hdr-logo{height:44px}
  /* telefonis nihuta AINULT 2. slaid (Henessi + vanaema), et mõlemad näod jääks kaadrisse; hero-1 jääb keskele */
  .hero-slide:nth-child(2){background-position:40% 32%}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(80vw,330px);background:var(--liiv-hele);z-index:1000;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;padding:40px;
    transform:translateX(100%);transition:transform .35s ease;box-shadow:var(--vari-suur);
  }
  .nav.open{transform:none}
  .nav-close{display:flex;position:absolute;top:16px;right:18px;width:44px;height:44px;
    align-items:center;justify-content:center;border:none;background:var(--oliiv);color:#fff;
    border-radius:50%;font-size:1.8rem;line-height:1;cursor:pointer;box-shadow:var(--vari);padding:0}
  .nav-close:hover{background:var(--terra)}
  .nav a.navlink,.hdr .nav a.navlink{color:var(--must);font-size:1.15rem}
  .nav .lang{margin-top:10px}
  .hdr .nav .lang button{color:var(--must)}
  .nav .btn{width:100%;justify-content:center}
}
@media(max-width:520px){
  .impact-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%;justify-content:center}
}

/* ===== Fotogalerii ===== */
.gallery-sec{background:var(--liiv-hele);color:var(--must)}
.gallery-sec.has-wave{--wave:var(--liiv-hele)}
.gallery-sec .wrap{text-align:center}
.gallery-sec .eyebrow{color:var(--terra)}
.gallery-sec h2{color:var(--must)}
.gal-sub{max-width:640px;margin:6px auto 0;color:var(--oliiv-tume)}
.gallery-grid,.gallery-grid-full{display:grid;gap:12px;margin-top:38px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.gthumb{padding:0;border:0;cursor:pointer;border-radius:12px;overflow:hidden;background:#dcd3bf;
  aspect-ratio:1/1;display:block;box-shadow:0 4px 14px rgba(0,0,0,.10)}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.gthumb:hover img{transform:scale(1.07)}
.gal-all{margin-top:34px}
.gal-empty{text-align:center;color:var(--oliiv-tume);padding:50px 0}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(20,15,10,.93);padding:24px}
.lightbox.show{display:flex}
.lb-img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:0 10px 50px rgba(0,0,0,.6);object-fit:contain}
.lb-close,.lb-nav{position:absolute;background:rgba(255,255,255,.13);color:#fff;border:0;cursor:pointer;
  border-radius:50%;width:52px;height:52px;font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.27)}
.lb-close{top:18px;right:18px;font-size:34px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
@media(max-width:600px){.lb-nav{width:44px;height:44px;font-size:24px}.lb-prev{left:6px}.lb-next{right:6px}}

/* galerii.html eraldi leht */
.gallery-page{padding:118px 0 72px;background:var(--liiv-hele);min-height:74vh}
.gallery-page .gp-head{text-align:center;max-width:660px;margin:0 auto 4px}
.gallery-page .gp-head h1{color:var(--must);margin:.2em 0}
.gallery-page .eyebrow{color:var(--terra)}
.gp-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:18px}
.gallery-page .gp-head .eyebrow{display:block;margin-top:4px}

/* ==========================================================================
   KAARDID: ühtne mängulisem, laineline kujundus (kõik kaarditüübid)
   - asümmeetriline ümarus (vaheldub kaartide kaupa)
   - brändivärviline piirjoon + sama tooni pehme vari -> kaart eraldub taustast
   - laineline serv foto ja teksti vahel (mask, seega töötab iga kaardivärviga)
   ========================================================================== */
.story,.camp-card,.nw-card,.dream-card,.gift-card,.help-card{
  --card-line:var(--oliiv);
  --card-bg:var(--valge);
  border:clamp(4px,0.42vw,6px) solid var(--card-line);
  box-shadow:0 10px 26px rgba(40,30,10,.12), 0 3px 0 0 var(--card-line);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.story,.camp-card,.nw-card,.dream-card{overflow:hidden}
/* korrapärane: kõik kaardid ühtepidi ja ühesuguse kujuga */
.story,.camp-card,.nw-card,.dream-card,.gift-card,.help-card{
  border-radius:38px 14px 38px 14px}
.story:hover,.camp-card:hover,.nw-card:hover,.dream-card:hover,.gift-card:hover,.help-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 38px rgba(40,30,10,.2), 0 4px 0 0 var(--card-line)}

/* piirjoone värv käib brändipaletist ringiratast */
.story-grid > *:nth-child(4n+1),.camp-grid > *:nth-child(4n+1),.nw-grid > *:nth-child(4n+1),
.dream-grid > *:nth-child(4n+1),.gift-grid > *:nth-child(4n+1),.help-grid > *:nth-child(4n+1){--card-line:var(--oliiv)}
.story-grid > *:nth-child(4n+2),.camp-grid > *:nth-child(4n+2),.nw-grid > *:nth-child(4n+2),
.dream-grid > *:nth-child(4n+2),.gift-grid > *:nth-child(4n+2),.help-grid > *:nth-child(4n+2){--card-line:var(--kuld)}
.story-grid > *:nth-child(4n+3),.camp-grid > *:nth-child(4n+3),.nw-grid > *:nth-child(4n+3),
.dream-grid > *:nth-child(4n+3),.gift-grid > *:nth-child(4n+3),.help-grid > *:nth-child(4n+3){--card-line:var(--terra)}
.story-grid > *:nth-child(4n+4),.camp-grid > *:nth-child(4n+4),.nw-grid > *:nth-child(4n+4),
.dream-grid > *:nth-child(4n+4),.gift-grid > *:nth-child(4n+4),.help-grid > *:nth-child(4n+4){--card-line:var(--oranz)}


/* oliivil taustal (uudised, edulood) ei kasuta oliivi piirjoont - ei eristuks */
.nw-grid > *:nth-child(4n+1),.story-grid > *:nth-child(4n+1){--card-line:var(--kuld)}
.nw-grid > *:nth-child(4n+2),.story-grid > *:nth-child(4n+2){--card-line:var(--terra)}
.nw-grid > *:nth-child(4n+3),.story-grid > *:nth-child(4n+3){--card-line:var(--oranz)}
.nw-grid > *:nth-child(4n+4),.story-grid > *:nth-child(4n+4){--card-line:var(--liiv)}

/* kaardi taustavärvid (laineserva jaoks) */
.story{--card-bg:var(--liiv-hele)}
.camp-card{--card-bg:#fff}
.nw-card,.dream-card,.gift-card,.help-card{--card-bg:var(--valge)}
/* Avalehe uudistesektsioonis on kaardi taustariba liivavärvi, mitte valge - valge lõi
   oliivil liiga kalgi kontrasti. Uudiste alamleht (.news-page) on ise liivataustaga,
   seal jäävad kaardid valgeks, muidu kaoksid nad taustaga kokku. */
.news .nw-card{background:var(--liiv-hele);--card-bg:var(--liiv-hele)}

/* laineline serv foto ja teksti vahel

   ⚠️ Ümber ehitatud 06.08.2026: varem oli laine pildikasti PEALE joonistatud
   ::after-overlay (värviti --card-bg-ga). Overlay ja pilt olid eri kihtides,
   mille hover-transform (translateY) ümardas eri suunas -> laine ja keha
   vahele ilmus juuspeen joon ja pildi alaserv vilkus välja.
   Nüüd maskitakse pildikasti ENDA alaserv laineliseks: lõige on pildiga samas
   kihis, mistõttu kihtidevahelist subpiksli vahet ei saa tekkida. Laine alt
   paistab kaardi päris taust, seega --card-bg väärtusest ei sõltu enam midagi.
   Kaks maskikihti (ülemine täisplokk + alumine laineriba) kattuvad 1px võrra,
   et nende liitekohta ei tekiks AA-vahet. Lainekuju = sama kõver mis enne,
   aga täidetud kõverast ÜLESPOOLE (nähtav osa), mitte allapoole. */
.story-img,.camp-card .ph,.nw-card .ph,.dream-card .ph{
  position:relative;--wave-h:clamp(16px,2.2vw,26px);
  -webkit-mask:linear-gradient(#000,#000) 0 0/100% calc(100% - var(--wave-h) + 1px) no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0,46 C240,84 480,14 720,48 C960,82 1200,16 1440,50 L1440,0 L0,0 Z' fill='%23000'/></svg>") left bottom/100% var(--wave-h) no-repeat;
          mask:linear-gradient(#000,#000) 0 0/100% calc(100% - var(--wave-h) + 1px) no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0,46 C240,84 480,14 720,48 C960,82 1200,16 1440,50 L1440,0 L0,0 Z' fill='%23000'/></svg>") left bottom/100% var(--wave-h) no-repeat;
}
@media(prefers-reduced-motion:reduce){
  .story:hover,.camp-card:hover,.nw-card:hover,.dream-card:hover,.gift-card:hover,.help-card:hover{transform:none}
}

/* galerii teemafiltrid + piltide pealkirjad */
.gal-cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:26px auto 30px;max-width:900px}
.gcat{font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;padding:10px 18px;border-radius:50px;
  background:#fff;border:1.5px solid rgba(174,67,30,.32);color:var(--terra);
  transition:background .2s,color .2s,border-color .2s,transform .2s}
.gcat:hover{transform:translateY(-2px)}
.gcat.on{background:var(--terra);border-color:var(--terra);color:#fff;box-shadow:0 8px 20px rgba(174,67,30,.26)}
.gthumb{position:relative}
.gcap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;text-align:left;
  font-size:.82rem;font-weight:600;line-height:1.25;color:#fff;
  background:linear-gradient(0deg,rgba(16,11,3,.82),rgba(16,11,3,.45) 55%,rgba(16,11,3,0));
  opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.gthumb:hover .gcap,.gthumb:focus-visible .gcap{opacity:1;transform:none}
@media(hover:none){ .gcap{opacity:1;transform:none} }
/* lightboxi pildiallkiri */
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:92vw}
.lb-cap{color:#f7f1e4;font-size:.98rem;font-weight:600;text-align:center;max-width:60ch;
  text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* ==== UUDISED: karussell avalehel + eraldi uudiste leht ==== */
.nw-car{display:flex;align-items:center;gap:10px}
.nw-arrow{flex:0 0 auto;width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.5);color:#fff;
  transition:background .2s,border-color .2s,opacity .2s,transform .2s}
.nw-arrow:hover:not(:disabled){background:var(--liiv);border-color:var(--liiv);color:#3a2f16;transform:scale(1.06)}
.nw-arrow:disabled{opacity:.32;cursor:default}
.nw-arrow svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nw-track{display:flex;gap:clamp(16px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding:6px 2px 10px;flex:1;min-width:0}
.nw-track::-webkit-scrollbar{display:none}
.nw-track:focus-visible{outline:2px solid var(--liiv);outline-offset:4px;border-radius:20px}
.nw-track > .nw-card{flex:0 0 calc((100% - 2*clamp(16px,2vw,26px))/3);scroll-snap-align:start}
.nw-track > .nw-empty{flex:1}
.nw-dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.nw-dot{width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.38);transition:background .2s,transform .2s}
.nw-dot.on{background:var(--liiv);transform:scale(1.3)}
.nw-all{text-align:center;margin-top:clamp(22px,3vw,32px)}
@media(max-width:980px){ .nw-track > .nw-card{flex-basis:calc((100% - clamp(16px,2vw,26px))/2)} }
@media(max-width:640px){
  .nw-track > .nw-card{flex-basis:100%}
  .nw-arrow{width:38px;height:38px}
  .nw-car{gap:6px}
}

/* eraldi uudiste leht */
.news-page{padding:118px 0 72px;background:var(--liiv-hele);min-height:74vh}
.news-page .np-list{padding:0}
.news-page .np-head{text-align:center;max-width:680px;margin:0 auto 8px}
.news-page .np-head .eyebrow{display:block;margin-top:16px;color:var(--terra)}
.news-page .np-head h1{color:var(--must);margin:.2em 0}
.news-page .np-sub{color:#5b5342}
.np-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin:clamp(26px,3.4vw,40px) 0 clamp(20px,2.6vw,30px)}
.news-page .nw-tab{background:#fff;border-color:rgba(174,67,30,.32);color:var(--terra)}
.news-page .nw-tab.on{background:var(--terra);border-color:var(--terra);color:#fff}
.np-year{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.9rem;color:var(--oliiv-tume)}
.np-year select{font:inherit;font-weight:600;padding:9px 14px;border-radius:50px;background:#fff;
  border:1.5px solid rgba(138,134,53,.4);color:var(--must);cursor:pointer}
.news-page .nw-card p{color:#4a4436}
.news-page .nw-empty{color:#5b5342}

/* karusselli kaart: ühtlane kõrgus, tekst kolmele reale */
.nw-track > .nw-card{max-width:100%}
.nw-track .nw-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nw-track .nw-card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nw-track .nw-card .ph{aspect-ratio:16/9}
@media(max-width:640px){
  .news{padding:clamp(40px,7vw,60px) 0}
  .news h2{font-size:clamp(1.5rem,7vw,1.9rem)}
  .news-sub{font-size:.94rem;margin-top:6px}
  .nw-tabs{margin:18px 0 16px}
  .nw-tab{padding:9px 18px;font-size:.9rem}
  .nw-track .nw-card .ph{aspect-ratio:16/10}
  .nw-track .nw-card .body{padding:14px}
  .nw-track .nw-card p{-webkit-line-clamp:3;font-size:.92rem}
  .nw-dots{margin-top:10px}
  .nw-all{margin-top:16px}
}

/* ==========================================================================
   MOBIIL: CTA-nupud ja nupuread keskele (Devil #57)
   Auditeeritud 390 px laiusel — kõik allolevad rippusid vasakus või paremas ääres.
   ========================================================================== */
@media(max-width:640px){
  /* uudiste/meedia ja galerii vahekaardid + aastafilter */
  .nw-tabs,.gal-cats{justify-content:center}
  .np-bar{justify-content:center}
  .np-year{justify-content:center;width:100%}
  /* KÕIK sektsioonisildid keskele (Devil idee #84, Toomas 05.08.2026).
     .eyebrow on inline-block, seega text-align üksi teda EI liiguta: see joondab
     ainult teksti sildi enda sees, mis on täpselt sildi laiune. Alt olev
     .news .eyebrow reegel oli seetõttu aastaid mõjuta. Lahendus on display:block,
     mis annab sildile terve rea laiuse, ja alles siis mõjub text-align. */
  .eyebrow{display:block;text-align:center}
  /* uudiste ja kampaaniate sektsiooni tekst keskele, et nupud ei jääks üksi keskele */
  .news .eyebrow,.news h2,.news-sub,
  .campaigns .eyebrow,.campaigns h2,.camp-sub{text-align:center}
  .news-sub,.camp-sub{margin-left:auto;margin-right:auto}
  /* kampaaniakaardi numbrid, summad ja "Anneta" */
  .camp-nums{justify-content:center;text-align:center}
  .camp-pct{margin-left:0}
  .camp-give{justify-content:center}
  .camp-free{justify-content:center}
  /* heateokingituste kaardi nupp + "Vaata kõiki heateokingitusi" */
  .gift-card{align-items:center;text-align:center}
  .gift-card .btn{align-self:center}
  .gift-card .gi{margin-left:auto;margin-right:auto}
  .hg-all,.gift-more{text-align:center}
  /* Dream Bridge toetusvalikud ja lastekaartide nupud */
  .dream-support{justify-content:center}
  .opt{text-align:center}
  .opt .btn{margin-left:auto;margin-right:auto}
  /* edulood / kuidas aidata / kiirannetus */
  .qd-amounts,.qd-custom{justify-content:center}
  .help-card .btn{align-self:center}
  .stories .btn,.gallery-sec .btn{margin-left:auto;margin-right:auto}
}

/* ==========================================================================
   KUIDAS AIDATA: ringikujulised kaardid
   NB! Ring ei kasva sisu järgi -> sisu ei tohi kahaneda (flex:none) ja
   kirjasuurused peavad mahtuma ringi sisse mahtuvasse ruutu (d/1,41).
   NB2! container-type/cqw EI sobinud (murdis laiuse ja andis font-size:0).
   NB3! protsentuaalne padding arvutatakse KONTEINERI laiusest (mitte ringi omast!)
        -> 15% andis 170 px polstri ja surus teksti nähtamatuks. Kasuta px-polstrit
        ning piira teksti laius ~78%-ga (jääb ringi sisse mahtuva ruudu piiresse).
   Peab olema CSS-i lõpus, et ühine kaardiümarus üle kirjutada.
   ========================================================================== */
/* 4 ringi ühes reas. Ringi laius tuleb grid-tulbast (mitte fikseeritud width'ist),
   nii kahanevad ringid kitsamal desktopil ise ega murdu 3+1 kujule. */
.help-grid{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;
  gap:clamp(16px,2.2vw,30px);margin-top:clamp(34px,4.4vw,54px)}
.help-card{
  width:100%;max-width:290px;aspect-ratio:1;border-radius:50%;
  padding:clamp(18px,1.8vw,26px);text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--valge);overflow:hidden;
  box-shadow:0 12px 30px rgba(40,30,10,.14);
  transition:transform .28s ease,box-shadow .28s ease}
.help-card:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 20px 40px rgba(40,30,10,.22)}
.help-card > *{flex:none;max-width:78%}           /* ei kahane -> teksti ei lõigata */
/* NB4! vana reegel .help-card p{flex:1} on spetsiifilisem kui .help-card > * ,
   seetõttu tuleb flex:none panna otse p-reeglisse (muidu lõik venib ja sisu ei ole keskel). */
.help-card .ico{width:clamp(30px,2.7vw,38px);height:auto;margin:0 0 7px}
.help-card h3{margin:0 0 5px;font-size:clamp(.92rem,1.05vw,1.02rem);line-height:1.15}
.help-card p{flex:none;margin:0;font-size:clamp(.76rem,.82vw,.84rem);line-height:1.4;color:#5b5342;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.help-card .more{margin:7px 0 0;font-weight:700;font-size:clamp(.76rem,.82vw,.84rem);color:var(--card-line)}
/* kahe nähtava ringiga (Dream Bridge ja Jaga oskusi peidus alates 06.08.2026)
   istuvad ringid keskel, mitte nelja-veerulise ruudustiku vasakus servas */
.help-grid:has(> :nth-child(2):last-child){
  grid-template-columns:repeat(2,minmax(240px,290px));justify-content:center}
/* ühe ringiga (ka Heateokingitused peidus alates 06.08.2026) samuti keskel */
.help-grid:has(> :only-child){
  grid-template-columns:minmax(240px,290px);justify-content:center}
/* keskmistel ekraanidel 2 ringi reas, telefonis 1 */
@media(max-width:1024px){ .help-grid{grid-template-columns:repeat(2,1fr);
  max-width:620px;margin-left:auto;margin-right:auto} }
@media(max-width:560px){ .help-grid,.help-grid:has(> :nth-child(2):last-child){grid-template-columns:1fr;max-width:none}
  .help-card{width:min(78vw,296px)} }
@media(prefers-reduced-motion:reduce){ .help-card:hover{transform:none} }

/* ==== EDULOOD: liikuvad LBF logod taustal (parallax) ==== */
/* NB: siin EI TOHI olla overflow:hidden - see lõikas ära .wtop laine, mis tuleb
   "Miks meie" sektsiooni peale. Logod hoiab piirides .story-bg ise. */
.stories{position:relative}
.stories > .wrap{position:relative;z-index:2}
.story-bg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
/* Taustalogod: mask + background-color, nii saab märgi mis tahes paletivärvi.
   Liivakollane oliivil on nähtav, aga ei võta teksti eest lugemist ära. */
.story-bg span{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;
  background-color:var(--logo-varv,var(--liiv));
  -webkit-mask:url('../assets/logo/lbf-mark-valge.png') center/contain no-repeat;
          mask:url('../assets/logo/lbf-mark-valge.png') center/contain no-repeat;
  opacity:calc(var(--o,.12) * var(--logo-tugevus,2.6));
  transform:translate(-50%,0) rotate(var(--r));
  will-change:transform;backface-visibility:hidden}
/* Liikumise arvutab js/main.js ühte transform-i (hõljumine + parallax + hoog).
   CSS-animatsiooni siin EI OLE, sest animatsioon võidaks kaskaadis inline-stiili
   ja skrolliga seotud pööre ei jõuaks kohale. */
@media(max-width:640px){ .story-bg span{opacity:calc(var(--o,.12) * var(--logo-tugevus-mob,1.9));width:calc(var(--s) * .7)} }
@media(prefers-reduced-motion:reduce){
  .story-bg span{transform:translate(-50%,0) rotate(var(--r))!important}
}

/* Kampaaniate taustalogod ("Toeta seda, mis on praegu käsil").
   Sektsiooni taust on liiv #EAC891, seega paletist sobib logovärviks OLIIV #8A8635:
     oliiv 2,38 : 1  brändi põhivärv, ei võistle oranži edenemiskaarega, sama tooni
                     kasutab siinsamas juba .cr-track rgba(138,134,53,.20)
     oranz 2,41 : 1  sama tugev, aga see on kaardi CTA ja kaare värv, taustal segaks
     terra 3,64 : 1  liiga vali, pealegi on see pealkirjade ja summade aktsent
     kuld  1,56 : 1  liival peaaegu nähtamatu, jääks ainult mudaseks laiguks
     valge 1,59 : 1  liiga nõrk ja kaardid on juba valged
   Tugevus 3,2 (edulugudel 2,6) ja logod on suuremad: esimene katse 1,5-ga jäi Toomase
   hinnangul liiga märkamatuks. Pealkirja loetavust kontrollitud, 3,2 juures on tekst
   endiselt terav. Mobiilis 2,4, sest väiksemal ekraanil jääb tekst logole lähemale. */
.campaigns > .wrap{position:relative;z-index:2}
.camp-bg{--logo-varv:var(--oliiv);--logo-tugevus:3.2;--logo-tugevus-mob:2.4}

/* ==== Taustalogod algavad laineservast (14.08.2026, Toomas) ====
   Enne: logoväli lõppes sektsiooni sirge ülaservaga (.story-bg inset:0) ja
   laine (.wtop, translateY(-99%)) oli tema kohal tühi ühevärviline riba. Nii
   tekkis üleminekusse nähtav sirge „piiraja" ja üleval liikuvad logod said
   sealt otsast lõigatud.
   Nüüd: logoväli ulatub laine kõrguse võrra ÜLES ja on maskeeritud TÄPSELT
   sama lainekõveraga, mis on sektsiooni .wtop SVG-s. Kõverast ülevalpool mask
   lõikab logod ära (eelmine sektsioon jääb puhtaks), altpoolt paistavad nad
   välja - logo tuleb laine alt välja, mitte ei lõpe joonlauaga.
   Mask on kaks kihti: lainekuju ülemises ribas + täisvärv ülejäänud kõrgusel.
   ⚠️ Kui .wtop path muutub, muuda ka siinne path - need PEAVAD olema samad.
   Logod tõusevad ka laine peale (z-index 4 > .wtop 3), tekst jääb neist üle. */
.stories .story-bg,.campaigns .camp-bg{
  --laine:clamp(42px,5.5vw,82px);
  top:calc(-1 * var(--laine));
  z-index:4;
  -webkit-mask-repeat:no-repeat,no-repeat;   mask-repeat:no-repeat,no-repeat;
  -webkit-mask-position:top,bottom;          mask-position:top,bottom;
  -webkit-mask-size:100% var(--laine),100% calc(100% - var(--laine) + 1px);
          mask-size:100% var(--laine),100% calc(100% - var(--laine) + 1px);
}
.stories > .wrap,.campaigns > .wrap{z-index:5}   /* tekst logodest üle */
.stories .story-bg{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C240,84 480,14 720,46 C960,78 1200,18 1440,56 L1440,90 L0,90 Z' fill='%23000'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C240,84 480,14 720,46 C960,78 1200,18 1440,56 L1440,90 L0,90 Z' fill='%23000'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
}
.campaigns .camp-bg{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,46 C240,82 480,16 720,50 C960,84 1200,20 1440,52 L1440,90 L0,90 Z' fill='%23000'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,46 C240,82 480,16 720,50 C960,84 1200,20 1440,52 L1440,90 L0,90 Z' fill='%23000'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
}

/* --- kampaania: Octany-liidestus (28.07.2026) --- */
.camp-left{font-size:.9rem;color:#5b5342;margin-top:2px}
/* eesmärk täis: rida „Puudu veel" asendub võidusõnumiga (js/campaigns.js) */
.camp-done{color:var(--oliiv);font-weight:700}
.camp-left strong{color:var(--terra);font-weight:700}
.camp-need{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  padding:12px 16px;border-radius:var(--raadius-s,14px);background:rgba(208,98,36,.10);
  border:1.5px solid rgba(208,98,36,.28);font-size:.95rem;color:#4a4436}
.camp-need strong{font-size:1.6rem;line-height:1;color:var(--oranz,#D06224);font-weight:800}
.camp-note{width:100%;font-size:.82rem;color:#6d6555;text-align:center}   /* idee #97: keskel */
/* CTA-riba täiendused (ideed #100 ja #103): tekst+nupp plokid + annetusviiside link */
.cta-network{max-width:640px;margin:16px auto 4px}
.cta-block{margin-top:30px}
.cta-block .cta-network{margin:0 auto 16px}
/* 18.08.2026 (Toomas): oli alla joonitud tekstilink, nüüd kuldne nupp (.btn.btn-kuld),
   mis viib „Anneta kohe" sektsiooni. Siin jääb ainult ploki oma vahe. */
.cta-allways{margin-top:26px}

/* punane püsiannetuse CTA (idee #93) */
.btn-punane{background:var(--terra);color:#fff}
.btn-punane:hover{background:#8f3618;color:#fff}
/* Idee #98: kaks võrdset annetuskaarti (ühekordne + püsi), all kampaaniate link */
.qd-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px;align-items:stretch}
.qd-card{background:#fff;border-radius:var(--raadius);padding:28px 24px;box-shadow:var(--vari);
  display:flex;flex-direction:column;text-align:center}
.qd-card h3{margin:0 0 10px;font-size:1.25rem;color:var(--oliiv-tume,#4a4520)}
/* idee #105: pisike terrakota logo-animatsioon püsiannetuse kaardi peal */
/* logo-animatsioon mõlema annetuskaardi pealkirja kohal (18.08.2026) */
.qd-anim{display:flex;justify-content:center;margin:2px 0 10px}
.qd-anim canvas{width:96px;height:auto}
.qd-card .qd-sub{margin:0 auto 20px;font-size:.98rem}
.qd-card .qd-amounts{margin-bottom:18px}
.qd-card .qd-custom{margin-top:auto}
.qd-card-pysi .qd-pysi{margin-top:auto;width:100%;justify-content:center}

/* ==== „Anneta kohe" kaardid: TÄISVÄRV (14.08.2026, Toomase valik „variant D") ====
   Katselehel oli neli varianti, valituks sai täisvärv. Terve kaart kannab
   brändivärvi: ühekordne annetus kuld, püsiannetus terra. Nupud pöörduvad ümber,
   valge nupp värvilise kaardi peal. Kuju on lehe ühine kaardikeel: ümarus 38/14
   ja tume alumine serv.
   🚨 Kirjavärv ei ole mõlemal kaardil sama ja see on mõõdetud, mitte maitse:
   valge kiri kullal annab kontrastiks 2,4:1 (loetavuse alampiir on 4,5:1),
   seepärast on kuldsel kaardil TUME kiri (4,6:1). Terral on valge kiri 5,8:1 ja
   seal on kõik korras. Kuldsel kaardil ei tohi lõiku ka läbipaistvaks võtta:
   86%-line tume kiri kullal langeb 3,8:1 peale. Kui kaardi värvi muudad, mõõda
   kontrast uuesti - silm ei ütle seda ette. */
.qd-card{--kaart:var(--kuld);--kiri:#3F3A22;--kiri-hele:#3F3A22;--nupp-kiri:#3F3A22;
  background:var(--kaart);color:var(--kiri);
  border:clamp(4px,0.42vw,6px) solid var(--kaart);
  border-radius:38px 14px 38px 14px;
  box-shadow:0 12px 28px rgba(40,30,10,.22), 0 3px 0 0 rgba(0,0,0,.16);
  transition:transform .28s ease,box-shadow .28s ease}
.qd-card:hover{transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(40,30,10,.28), 0 4px 0 0 rgba(0,0,0,.18)}
.qd-card-pysi{--kaart:var(--terra);--kiri:#fff;--kiri-hele:rgba(255,255,255,.9);
  --nupp-kiri:var(--terra)}
.qd-card h3{color:var(--kiri)}
.qd-card .qd-sub{color:var(--kiri-hele)}
/* summanupud: valge väli tumeda numbriga, et summa oleks kaugelt loetav */
.qd-card .qd-amt{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.95);color:#3F3A22}
.qd-card .qd-amt:hover{background:#fff;border-color:#fff;color:#3F3A22}
/* Välja taust EI TOHI olla siin: .qd-field on ainult ümbris ja tema valge taust
   joonistas ovaalse välja taha ristküliku. Valge tuleb inputilt endalt, kellel on
   border-radius:50px. Värvilisel kaardil anname äärele valge, et pill eristuks. */
.qd-card .qd-field input{border-color:#fff}
.qd-card .qd-field input:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.55)}
/* CTA: valge nupp, kiri kaardi värvis (kuldsel kaardil tume, sest kuld valgel on 2,4:1) */
.qd-card .btn-kuld,.qd-card .btn-punane{background:#fff;color:var(--nupp-kiri);
  box-shadow:0 6px 16px rgba(40,30,10,.18)}
.qd-card .btn-kuld:hover,.qd-card .btn-punane:hover{background:#FFF6E4;color:var(--nupp-kiri)}
/* QR: valge raam ja valge alus, tekst kaardi kirjavärvis */
/* QR läheb mõlemal kaardil kaardi põhja, nii et kaks kaarti lõpevad ühel joonel.
   🪤 Vaba ruum kogutakse QR-i KOHALE olevasse elementi (margin-bottom:auto), MITTE
   QR-i enda margin-top:auto sisse: viimasel juhul sõi auto ära ka QR-i 18px varu
   ja eraldusjoon jäi kõrgemal kaardil otse „muu summa" välja otsa (Toomas 18.08). */
.qd-card .qd-qr{border-top-color:rgba(255,255,255,.45)}
.qd-card .qd-custom,.qd-card .qd-pysi{margin-bottom:auto}
.qd-card .qd-qr-pilt{border-color:rgba(255,255,255,.9);background:#fff}
.qd-card .qd-qr-txt{color:var(--kiri-hele)}
.qd-card .qd-qr-txt b{color:var(--kiri)}
/* Logo-animatsioon on terrakota sprite (assets/anim/lbf-sprite-terra.webp).
   Terral kaardil kaoks ta ära -> filter teeb temast valge; kuldsel kaardil on
   kiri tume (kontrast!), seega läheb ka logo tumedaks. Sprite on läbipaistva
   taustaga, nii et filter puudutab ainult logo ennast. */
.qd-card-pysi .qd-anim canvas{filter:brightness(0) invert(1);opacity:.92}
.qd-card:not(.qd-card-pysi) .qd-anim canvas{filter:brightness(0);opacity:.78}

/* 14.08.2026: element on nüüd nupp (avab annetusmodaali), aga peab välja nägema
   ja käituma nagu tekstilink - seega nupu oma taust, ääris ja font maha. */
.qd-camps{display:inline-block;margin-top:28px;font-weight:700;color:var(--terra);
  text-decoration:underline;text-underline-offset:3px;
  background:none;border:0;padding:0;font-family:inherit;font-size:1rem;cursor:pointer}
.qd-camps:hover{color:var(--oranz)}
.qd-camps:focus-visible{outline:2px solid var(--kuld);outline-offset:3px;border-radius:4px}
@media(max-width:820px){.qd-grid{grid-template-columns:1fr}}

/* pangalinkide rida annetusmodaalis (Swedbank/SEB/LHV/Coop) */
.pay-banks{margin:0 0 16px}
.pay-banks-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pay-bankbtn{display:flex;align-items:center;justify-content:center;padding:13px 8px;min-height:48px;
  border:1.5px solid #d8c9a8;border-radius:10px;font-weight:700;color:#4a3a1a;
  text-decoration:none;background:#fff;font-size:.92rem;transition:border-color .15s,box-shadow .15s}
.pay-bankbtn img{height:20px;width:auto;max-width:100%;display:block}
.pay-bankbtn img[alt="SEB"]{height:27px}   /* SEB ruudulogo vajab teistega tasakaalu */
.pay-bankbtn:hover{border-color:var(--kuld);box-shadow:0 3px 10px rgba(160,120,30,.22)}
.pay-banks-hint{font-size:.82rem;color:#C92A2A;font-weight:600;margin:8px 0 0}   /* idee #96: punane */
/* Kitsal ekraanil (idee #89): pangad ÜHES reas kolmekaupa, logod väiksemad aga
   ühtlased; makseviisi nupud ("Pangaülekanne") ei tohi oma kastist üle ajada. */
@media(max-width:480px){
  .pay-banks-row{grid-template-columns:repeat(3,1fr);gap:6px}
  .pay-bankbtn{min-height:44px;padding:10px 6px}
  .pay-bankbtn img{height:15px}
  .pay-bankbtn img[alt="SEB"]{height:24px}
  .pay-methods{gap:6px}
  /* flex-basis sisu järgi: „Pangaülekanne" saab laiema kasti, Wise/PayPal kitsama */
  .pm{min-width:0;padding:11px 8px;font-size:.8rem;flex:1 1 auto;white-space:nowrap}
}

/* Kampaaniakaardi kaks CTA-d (idee #90): ühesuurused, sama disain (btn-kuld);
   töölaual kõrvuti kaks võrdset poolt, telefonis üksteise all täislaiuses. */
.camp-give .btn.camp-octany,.camp-give .btn.camp-bank{flex:1 1 calc(50% - 4px);min-width:0;
  justify-content:center;text-align:center;padding:11px 10px;
  font-size:.92rem;flex-direction:column;line-height:1.25;gap:2px}
/* idee #104: makseviiside rida nupu sees */
.camp-give .btn .btn-sub{display:block;font-size:.7rem;font-weight:600;opacity:.85;
  letter-spacing:.02em;text-transform:none;white-space:normal}
@media(max-width:640px){
  .camp-give .btn.camp-octany,.camp-give .btn.camp-bank{flex:1 1 100%}
}
.camp-give .btn{flex:0 0 auto}

/* ==== „Teised viisid annetamiseks" kaart (18.08.2026, Henessi soov) ====
   Asendab „Viimased annetused" voo. Kaart on sama lai kui kaks kaarti ülal
   (.qd-grid) ja sama kujuga (paks piirjoon, ümarus 38/14, värviline alaserv).
   18.08 õhtul (Toomas): kaart on TÄISVÄRVI ROHELINE, nagu kuldne ja terra kaart
   ülal - kolm täisvärvi kaarti ühes sektsioonis. Värv on brändipaleti PÕHIOLIIV
   var(--oliiv) #8A8635 (Toomas: „võta lbfi paleti õige roheline").
   📏 Mõõdetud: valge kiri sellel oliivil = 3,8:1. Sama suhe on kogu lehe oliiv-
   sektsioonides (nt Edulood), seega leht on omavahel kooskõlas, aga see jääb
   WCAG AA piirist (4,5:1) allapoole. Seepärast on kogu kiri PUHASVALGE (mitte
   poolläbipaistev) ja sildid heleliivast heledamad - iga läbipaistvus võtaks
   kontrastist veel maha. */
.qd-muud{margin-top:clamp(28px,4vw,46px);text-align:left}
.qdm-card{--kaart:var(--oliiv);--kiri:#fff;--kiri-hele:#fff;
  background:var(--kaart);color:var(--kiri);
  border:clamp(4px,0.42vw,6px) solid var(--kaart);
  border-radius:38px 14px 38px 14px;
  box-shadow:0 12px 28px rgba(40,30,10,.22), 0 3px 0 0 rgba(0,0,0,.16);
  padding:clamp(22px,2.6vw,34px) clamp(20px,2.6vw,36px)}
/* Silt ja veerupealkirjad on liivakarva, AGA mitte --liiv (#EAC891): see annab
   tumeoliivil 3,4:1 ja need on väikesed suurtähed. --liiv-hele annab 4,5:1. */
/* Kaardi pealkiri on sama fond ja mõõt mis kahel kaardil ülal (.qd-card h3):
   h3, 1,25rem, 800 - mitte .eyebrow suurtähtedes silt (Toomas 18.08). */
.qdm-pealkiri{font-size:1.25rem;margin:0 0 10px;color:var(--kiri)}
/* .quickdon sektsioon on keskjoondatud; kaardi sisu peab jääma vasakule ... */
.quickdon .qd-muud .eyebrow,.quickdon .qd-muud p,.quickdon .qd-muud h3{text-align:left}
/* ... aga kaardi pealkiri ja sissejuhatus on keskel */
.quickdon .qd-muud .qdm-pealkiri,.quickdon .qd-muud .qdm-lead{text-align:center}
/* margin auto (mitte 0) - lõik on keskel ka siis, kui max-width teda kitsendab */
.qdm-lead{font-size:.98rem;line-height:1.6;color:var(--kiri);margin:0 auto clamp(18px,2.4vw,26px);max-width:72ch}
.qdm-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px);align-items:start}
.qdm-h{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;margin:0 0 12px}
.qdm-h-teine{margin-top:22px}

/* rekvisiidid: sildid ühes veerus, väärtused teises - kõik ühel joonel.
   column-gap:0 + dt paremal padding, muidu jääb ridade vahejoon katki */
.qdm-list{display:grid;grid-template-columns:max-content 1fr;column-gap:0;margin:0}
.qdm-list dt{font-size:.86rem;color:var(--kiri-hele);padding:10px clamp(14px,2vw,26px) 10px 0;
  border-top:1px solid rgba(255,255,255,.34)}
/* Väärtus vasakule, kopeerimisnupp alati rea PAREMASSE serva - nii on nupud
   ülevalt alla ühes tulbas, mitte väärtuse pikkuse järgi hüplemas (Toomas 18.08). */
.qdm-list dd{margin:0;font-weight:700;color:var(--kiri);font-size:1rem;padding:10px 0;
  border-top:1px solid rgba(255,255,255,.34);display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:10px;overflow-wrap:anywhere}
.qdm-list dt:first-of-type,.qdm-list dt:first-of-type + dd{border-top:0;padding-top:0}
.qdm-iban{letter-spacing:.02em}
/* Kopeerimisnupud on KULDSED (Toomas 18.08): kuld on lehe CTA-värv ja rohelisel
   kaardil kõige selgemini nupp. Kiri on tume, sest valge kiri kullal annab 2,4:1
   ja tume 4,6:1 - sama reegel mis kuldsel kaardil ülal. */
.qdm-kopi{font:inherit;font-size:.74rem;font-weight:800;cursor:pointer;padding:5px 13px;
  border-radius:50px;border:1.5px solid var(--kuld);background:var(--kuld);color:#3F3A22;
  white-space:nowrap;justify-self:end;
  transition:background .2s,color .2s,border-color .2s,transform .15s}
.qdm-kopi:hover{background:#e8ab3f;border-color:#e8ab3f;transform:translateY(-1px)}
.qdm-kopi.on{background:#fff;border-color:#fff;color:var(--oliiv-tume)}
.qdm-kopi-koik{margin-top:16px;font-size:.8rem;padding:9px 20px;justify-self:start}
.qdm-vaartus{overflow-wrap:anywhere}
/* logo-animatsioon: sprite on terrakota, rohelisel kaardil teeme ta valgeks */
.qdm-card .qd-anim canvas{filter:brightness(0) invert(1);opacity:.92}

/* logoruudud: kolm ühesugust valget kasti reas, logo keskel - valge alus on
   vajalik, sest pankade logod on oma brändivärvides */
.qdm-viisid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qdm-viis{display:flex;align-items:center;justify-content:center;gap:7px;min-height:58px;padding:12px 10px;
  background:#fff;border:2px solid rgba(255,255,255,.7);border-radius:16px 6px 16px 6px;
  text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .15s}
.qdm-viis:hover{border-color:var(--liiv);box-shadow:0 8px 20px rgba(20,16,6,.28);transform:translateY(-2px)}
.qdm-viis img{height:20px;width:auto;max-width:100%;display:block}
.qdm-viis img[alt="SEB"]{height:36px}   /* SEB on ruutlogo, vajab teistega tasakaalu */
.qdm-viis-patreon img{height:22px}
.qdm-viis-patreon span{font-weight:800;font-size:.95rem;color:#241E12;letter-spacing:-.01em}
.qdm-note{font-size:.84rem;line-height:1.5;color:var(--kiri-hele);margin:14px 0 0}

@media(max-width:820px){
  .qdm-grid{grid-template-columns:1fr;gap:26px}
  .qdm-card{border-radius:28px 12px 28px 12px}
}
@media(max-width:480px){
  .qdm-list{grid-template-columns:1fr;column-gap:0}
  .qdm-list dt{padding-bottom:0;border-top:1px solid rgba(255,255,255,.28)}
  .qdm-list dd{padding-top:2px;border-top:0}
  .qdm-list dt:first-of-type + dd{padding-top:2px}
  .qdm-viis{min-height:52px;padding:10px 6px}
  .qdm-viis img{height:16px}
  .qdm-viis img[alt="SEB"]{height:26px}
}