/* WGPROMO STYLE VERSION: 2026-09-02-REV6 (moments section image/text top-aligned, verified 0.5px) */
:root{
    --navy:#005E92;
    --navy-2:#0090E0;
    --blue:#0090E0;
    --blue-tint:#E9F5FC;
    --blue-mid:#BFE2F8;
    --pink:#E00070;
    --pink-dark:#A80056;
    --green:#90C000;
    --green-dark:#5E7E00;
    --gold:#E00070;
    --gold-dark:#A80056;
    --ink:#161C26;
    --ink-soft:#5B6472;
    --paper:#F9FAFB;
    --paper-2:#F0F4F7;
    --line:#DCE4EF;
    --line-dark:#0090E0;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
  img,svg{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
  .eyebrow.on-dark{color:var(--green)}
  h1,h2,h3{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.015em}
  .wrap{max-width:1220px;margin:0 auto;padding:0 40px}
  @media (max-width:720px){.wrap{padding:0 22px}}
  .note{background:#FFF7E6;border:1px solid #EAD9A8;color:#7A5E12;font-family:'IBM Plex Mono',monospace;font-size:12px;text-align:center;padding:8px 12px}

  nav{position:sticky;top:0;z-index:50;background:rgba(247,249,252,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
  nav.nav-transparent{position:fixed;top:0;left:0;right:0;background:transparent;backdrop-filter:none;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease,transform .35s ease}
  nav.nav-transparent .wrap{max-width:none;padding:0 24px}
  .nav-logo{height:52px;width:auto;position:relative;left:50px;top:0px}
  @media (max-width:760px){.nav-logo{height:36px;left:0;top:0}}
  nav.nav-transparent .nav-right{position:relative;left:-30px;top:10px}
  @media (max-width:760px){nav.nav-transparent .nav-right{left:0;top:0}}
  nav.nav-transparent.nav-scrolled{background:rgba(247,249,252,.94);backdrop-filter:blur(6px);border-bottom-color:var(--line)}
  nav.nav-transparent.menu-open:hover:not(.megamenu-blocked){background:var(--blue-tint)}
  nav.nav-transparent.menu-open:hover:not(.megamenu-blocked) .nav-megamenu{height:284px;opacity:1}
  nav.nav-transparent.nav-scrolled.menu-open:hover:not(.megamenu-blocked){background:var(--paper)}
  nav.nav-transparent.nav-scrolled .nav-megamenu{background:var(--paper)}
  .nav-megamenu{position:absolute;top:100%;left:0;right:0;background:var(--blue-tint);height:0;overflow:hidden;opacity:0;transition:height .35s ease,opacity .3s ease;z-index:49;border-radius:0 0 24px 24px}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
  .logo{font-family:'Fraunces',serif;font-weight:600;font-size:21px}
  .logo span{color:var(--blue)}
  .navlinks{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:500}
  nav.nav-transparent .navlinks{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .navlinks a{opacity:.8;transition:opacity .2s}
  .navlinks a:hover{opacity:1;color:var(--blue)}
  .lang-toggle{display:flex;gap:2px;font-family:'IBM Plex Mono',monospace;font-size:12px;border:1px solid var(--line);border-radius:20px;padding:3px}
  .lang-toggle button{border:none;background:transparent;padding:5px 11px;border-radius:16px;font-family:inherit;font-size:12px;cursor:pointer;color:var(--ink-soft)}
  .lang-toggle button.active{background:var(--navy);color:#fff}
  .navcta{background:var(--navy);color:#fff;padding:10px 20px;border-radius:24px;font-size:14px;font-weight:500;white-space:nowrap}
  .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;border:none;background:transparent;cursor:pointer;padding:0}
  .hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}
  .mobile-menu{display:none;border-top:1px solid var(--line)}
  .mobile-menu.open{display:block}
  .mobile-menu-links{display:flex;flex-direction:column;padding:10px 0 18px}
  .mobile-menu-links a{padding:12px 0;font-size:15px;font-weight:500;border-bottom:1px solid var(--line)}
  @media (max-width:980px){
    .navlinks{display:none}
    .hamburger{display:flex}
  }
  @media (max-width:560px){
    nav .wrap .navcta{display:none}
  }

  .hero{padding:64px 0 0}
  .fr-hero-split{padding:0 0 56px;border-bottom:1px solid var(--line);min-height:100vh;display:flex;align-items:center;background:var(--blue-tint)}
  .fr-hero-split .wrap{width:100%}
  @media (max-width:900px){.fr-hero-split{min-height:auto;padding-top:120px}}
  .fr-hero-whitebox{position:relative}
  .fr-hero-whitebox::before{content:'';position:absolute;top:0;left:32px;right:32px;bottom:32px;background:#fff;border-radius:0 0 32px 32px;z-index:0}
  .fr-hero-whitebox .wrap{position:relative;z-index:1}
  @media (max-width:600px){.fr-hero-whitebox::before{left:14px;right:14px;bottom:14px;border-radius:0 0 20px 20px}}
  .hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
  @media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
  .hero-left h1{font-size:clamp(34px,4.4vw,54px);margin:16px 0 26px}
  html[lang="de"] .fr-hero-split .hero-left h1{font-size:clamp(32px,4.1vw,50px)}
  .hero-left p.lede{font-size:17px;color:var(--ink-soft);max-width:42ch;margin-bottom:32px}
  .btn-row{display:flex;gap:14px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:15px 28px;border-radius:28px;font-size:15px;font-weight:500;transition:transform .15s ease}
  .btn:hover{transform:translateY(-1px)}
  .btn-navy{background:var(--navy);color:#fff}
  .btn-green{background:var(--green-dark);color:#fff}
  .btn-gold{background:var(--gold);color:#fff}
  .btn-pink{background:var(--pink);color:#fff}

  .carousel{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:6/5;box-shadow:0 20px 50px -20px rgba(14,42,77,.35)}
  .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:#fff;background-size:cover;background-position:center}
  .slide.active{opacity:1}
  .slide::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(to top, rgba(10,20,32,.82) 0%, rgba(10,20,32,.35) 45%, rgba(10,20,32,0) 75%)}
  .slide-content{position:relative;z-index:1}
  .slide .tag{font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.06em;opacity:.75;font-weight:400;margin-bottom:4px}
  .slide h4{font-family:'Fraunces',serif;font-weight:700;font-size:23px;text-shadow:0 1px 8px rgba(0,0,0,.3)}
  .dots{position:absolute;bottom:18px;right:22px;display:flex;gap:8px;z-index:2}
  .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:background .2s}
  .dot.active{background:#fff}

  .trust-strip{padding:56px 0 70px;border-bottom:1px solid var(--line)}
  .trust-strip .lede{max-width:60ch;font-size:16.5px;color:var(--ink-soft);margin:0 auto 34px;text-align:center}
  .marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .marquee-track{display:flex;gap:36px;width:max-content;animation:scroll 42s linear infinite}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .logo-chip{padding:12px 26px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;height:76px}
  .logo-chip img{max-height:46px;max-width:180px;width:auto;height:auto;object-fit:contain;display:block}

  .doors{padding:70px 0}
  .doors .kicker{max-width:640px;margin-bottom:36px;text-align:center;margin-left:auto;margin-right:auto}
  .doors .kicker h2{font-size:clamp(26px,3vw,34px);margin-top:10px}
  .door-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  @media (max-width:800px){.door-grid{grid-template-columns:1fr}}
  .door{border-radius:20px;padding:42px 38px;min-height:210px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s ease}
  .door:hover{transform:translateY(-3px)}
  .door.navy{background:var(--navy);color:#fff}
  .door.blue{background:var(--blue);color:#fff}
  .door h3{font-size:clamp(26px,3vw,34px);margin:12px 0 10px}
  .door p{font-size:15px;opacity:.9;max-width:40ch}
  .door .go{margin-top:22px;font-size:14px;font-weight:500}
  .door .eyebrow{color:#BFD7F2}

  .why{padding:96px 0;background:var(--navy)}
  .why .kicker{max-width:1080px;margin-bottom:32px;margin-left:auto;margin-right:auto;text-align:center}
  .why .kicker h2{font-size:clamp(26px,3vw,34px);margin-top:10px;white-space:nowrap;color:#fff}
  @media (max-width:1180px){.why .kicker h2{white-space:normal}}
  .why .kicker .eyebrow{color:#BFD7F2}
  #why-it-works{background:var(--blue-tint)}
  #why-it-works .kicker h2{color:var(--ink)}
  #why-it-works .kicker .eyebrow{color:var(--blue)}
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  @media (max-width:800px){.why-grid{grid-template-columns:1fr}}
  .why-item{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;text-align:center}
  .why-item .num{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:.04em;color:var(--blue);font-size:12px;margin-bottom:10px}
  .why-item h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--ink);margin-bottom:8px}
  .why-item p{font-size:14.5px;color:var(--ink-soft)}
  .why-flex{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center;margin-top:4px}
  @media (max-width:800px){.why-flex{grid-template-columns:1fr}}
  .mini-loop-wrap{display:flex;justify-content:center}
  .mini-loop{width:100%;max-width:250px}
  .why-points{display:flex;flex-direction:column;gap:14px;align-items:flex-end}
  .why-point{display:flex;gap:14px;align-items:center;width:100%;max-width:520px}
  .why-point .num-label{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;color:#fff;flex-shrink:0;width:26px;text-align:center}
  .why-point .card{background:#fff;border-radius:16px;padding:16px 20px;box-shadow:0 12px 26px -18px rgba(5,25,45,.3);flex:1;min-width:0}
  .why-point h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;margin-bottom:3px;letter-spacing:-.005em;color:var(--ink)}
  .why-point p{font-size:13.5px;color:var(--ink-soft)}
  .why-more{margin-top:6px;font-size:14px;font-weight:600;color:#fff;display:inline-block;text-decoration:underline;align-self:flex-end}
  .mini-loop .loop-seg{cursor:pointer;transition:opacity .25s ease}
  .mini-loop:hover .loop-seg{opacity:.45}
  .mini-loop .loop-seg:hover{opacity:1}
  .why .mini-loop .loop-dot{fill:#fff}
  .why .mini-loop .loop-label{fill:#fff;opacity:.9}
  .why .mini-loop .loop-center{fill:#fff;font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:-.01em}
  .why .mini-loop .draw{stroke:var(--pink)}
  .why .mini-loop .track{stroke:rgba(255,255,255,.35)}
  .why .mini-loop .loop-seg:hover .loop-dot{fill:var(--pink)}
  .why .mini-loop .loop-seg:hover .loop-label{fill:#fff;font-weight:700;opacity:1}

  .whyus{padding:80px 0}
  .whyus .kicker{max-width:760px;margin-bottom:44px}
  .whyus .kicker h2{font-size:clamp(26px,3vw,34px);margin-top:10px;white-space:nowrap}
  @media (max-width:700px){.whyus .kicker h2{white-space:normal}}
  .whyus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
  @media (max-width:900px){.whyus-grid{grid-template-columns:repeat(2,1fr)}}
  .whyus-item{border-top:3px solid var(--navy);padding-top:16px}
  .whyus-item .big{font-family:'Fraunces',serif;font-size:30px;color:var(--navy);display:block;margin-bottom:6px}
  .whyus-item:nth-child(1){border-top-color:var(--blue)}
  .whyus-item:nth-child(1) .big{color:var(--blue)}
  .whyus-item:nth-child(2){border-top-color:var(--pink)}
  .whyus-item:nth-child(2) .big{color:var(--pink)}
  .whyus-item:nth-child(3){border-top-color:var(--green-dark)}
  .whyus-item:nth-child(3) .big{color:var(--green-dark)}
  .whyus-item:nth-child(4){border-top-color:var(--navy)}
  .whyus-item:nth-child(4) .big{color:var(--navy)}
  .whyus-item h5{font-size:14.5px;font-weight:600;margin-bottom:6px}
  .whyus-item p{font-size:13.5px;color:var(--ink-soft)}

  .contact{background:var(--navy);color:#fff;padding:90px 0}

  /* QUOTE TOOL */
  .quote{padding:80px 0}
  .quote .kicker{max-width:800px;margin-bottom:34px}
  .quote-subtext{font-size:15.5px;color:var(--ink-soft);margin-top:10px;max-width:none}
  .quote-subtext:empty{display:none;margin:0}
  .quote .kicker h2{font-size:clamp(26px,3vw,34px);margin-top:10px;white-space:nowrap}
  @media (max-width:640px){.quote .kicker h2{white-space:normal}}
  .quote-card{background:var(--blue-tint);border:1px solid var(--line);border-radius:22px;padding:44px}
  @media (max-width:600px){.quote-card{padding:28px 22px}}
  .tab-row{display:flex;gap:10px;margin-bottom:32px;flex-wrap:wrap}
  .tab-btn{padding:10px 20px;border-radius:20px;font-size:13.5px;font-weight:500;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink-soft);font-family:'Inter',sans-serif}
  .tab-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}
  .tab-panel{display:none}
  .tab-panel.active{display:block}
  .madlib{font-family:'Inter',sans-serif;font-size:clamp(16px,1.8vw,20px);line-height:1.85;color:var(--ink);max-width:820px;font-weight:400}
  .madlib select{
    font-family:'Inter',sans-serif;font-style:italic;font-weight:600;font-size:inherit;
    color:var(--navy);background:#fff;border:none;border-bottom:2px solid var(--blue);
    padding:2px 6px;margin:0 2px;cursor:pointer;border-radius:4px 4px 0 0;
  }
  .madlib select:hover,.madlib select:focus{outline:none;border-bottom-color:var(--pink);background:#fff}
  .quote-contact-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
  .quote-contact-row input{flex:1;min-width:200px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 15px;font-family:'Inter',sans-serif;font-size:14px;color:var(--ink)}
  .quote-actions{margin-top:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  .quote-card .btn-navy{font-size:16px;padding:14px 26px}
  .quote-note{font-size:12.5px;color:var(--ink-soft)}
  .tellus textarea{width:100%;min-height:130px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-family:'Inter',sans-serif;font-size:14px;color:var(--ink);resize:vertical;margin-bottom:14px}
  .tellus .quote-contact-row{margin-top:0;margin-bottom:14px}
  .contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px}
  @media (max-width:900px){.contact .wrap{grid-template-columns:1fr}}
  .contact h2{font-size:clamp(26px,3vw,34px);margin:14px 0 18px}
  .contact p.lede{color:#C7D6EA;max-width:44ch;margin-bottom:26px}
  .info-line{display:flex;gap:10px;font-size:14.5px;color:#DCE6F3;margin-bottom:10px}
  .form{display:flex;flex-direction:column;gap:14px}
  .form input,.form textarea{background:#123255;border:1px solid var(--line-dark);border-radius:10px;padding:13px 15px;color:#fff;font-family:'Inter',sans-serif;font-size:14px}
  .form input::placeholder,.form textarea::placeholder{color:#8FA6C4}
  .form textarea{resize:vertical;min-height:90px}
  .form .btn{align-self:flex-start;border:none;cursor:pointer}


  [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  [data-reveal].in{opacity:1;transform:translateY(0)}
  @media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ===== Shared subpage components ===== */

.page-hero{padding:130px 0 48px;border-bottom:1px solid var(--line);background:var(--blue-tint)}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1{font-size:clamp(26px,3vw,34px);max-width:20ch}
.page-hero p.lede{font-size:17px;color:var(--ink-soft);max-width:62ch;margin-top:18px}

/* Cycle of giving ring (Campaign Resources + homepage mini ring) */
.loop-section{padding:70px 0}
.loop-flex{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media (max-width:900px){.loop-flex{grid-template-columns:1fr}}
.loop-wrap{display:flex;justify-content:center}
.loop-text h2{font-size:clamp(26px,3vw,34px);margin-top:10px}
.loop-text .cri-section-sub{max-width:none}
.loop-text .cri-section-sub + .cri-section-sub{margin-top:12px}
.loop-ring{width:100%;max-width:440px}
.loop-ring .track{fill:none;stroke:var(--line);stroke-width:1.4}
.loop-ring .draw{fill:none;stroke:var(--pink);stroke-width:2.2;stroke-dasharray:900;stroke-dashoffset:900}
.loop-ring .draw.play{animation:draw 2.2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.loop-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;fill:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;transition:fill .2s ease}
.loop-center{font-family:'Archivo',sans-serif;font-weight:800;font-size:30px;fill:var(--ink);text-transform:uppercase;letter-spacing:.01em}
.loop-dot{fill:var(--navy);transition:fill .2s ease,transform .2s ease;transform-origin:center;transform-box:fill-box}
@media (prefers-reduced-motion:reduce){.loop-ring .draw{stroke-dashoffset:0;animation:none}}

/* #principle ring — hover/focus highlight per segment */
.loop-hit{fill:transparent;pointer-events:all}
#principle .loop-ring .loop-seg{cursor:pointer}
#principle .loop-ring .loop-seg:hover,#principle .loop-ring .loop-seg:focus{outline:none}
#principle .loop-ring:hover .loop-seg,#principle .loop-ring:focus-within .loop-seg{opacity:.45}
#principle .loop-ring .loop-seg:hover,#principle .loop-ring .loop-seg:focus{opacity:1}
#principle .loop-ring .loop-seg:hover .loop-dot,#principle .loop-ring .loop-seg:focus .loop-dot{fill:var(--pink);transform:scale(1.35)}
#principle .loop-ring .loop-seg:hover .loop-label,#principle .loop-ring .loop-seg:focus .loop-label{fill:var(--pink);font-weight:700}
@media (prefers-reduced-motion:reduce){#principle .loop-ring .loop-dot{transition:none}}

/* More than a giveaway — broadened principle section + research stats (Campaign Ideas) */
.mtag-stats{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;grid-template-rows:auto auto auto auto;column-gap:44px;margin-top:52px;margin-left:auto;margin-right:auto;max-width:1080px}
.mtag-stat{display:grid;grid-template-rows:subgrid;grid-row:1 / 5;row-gap:0;text-align:center}
.mtag-qualifier{grid-row:1;align-self:end;justify-self:center;display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
.mtag-num{grid-row:2;display:block;font-family:'Fraunces',serif;font-weight:500;font-size:clamp(44px,4.6vw,62px);line-height:1;letter-spacing:-.01em;align-self:end}
.mtag-num.mtag-blue{color:var(--blue)}
.mtag-num.mtag-pink{color:var(--pink)}
.mtag-num.mtag-green{color:var(--green-dark)}
.mtag-label{grid-row:3;display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:14.5px;letter-spacing:-.005em;color:var(--ink);margin-top:12px}
.mtag-stat p{grid-row:4;font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:8px}
.mtag-divider{grid-row:1 / 5;width:1px;background:var(--line)}
.mtag-source{font-size:11.5px;color:var(--ink-soft);opacity:.8;margin-top:28px;max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
@media (max-width:900px){
  .mtag-stats{grid-template-columns:1fr;grid-template-rows:none;max-width:420px;gap:0}
  .mtag-stat{display:block;grid-row:auto}
  .mtag-qualifier{margin-bottom:2px}
  .mtag-num{margin-top:0}
  .mtag-label{margin-top:12px}
  .mtag-stat p{margin-top:8px}
  .mtag-divider{display:none}
  .mtag-stat{border-top:1px solid var(--line);padding-top:28px;margin-top:28px}
  .mtag-stat:first-child{border-top:none;padding-top:0;margin-top:0}
}
.mtag-stats > *:nth-child(1){transition-delay:0s}
.mtag-stats > *:nth-child(2){transition-delay:.18s}
.mtag-stats > *:nth-child(3){transition-delay:.36s}
.mtag-stats > *:nth-child(4){transition-delay:.54s}
.mtag-stats > *:nth-child(5){transition-delay:.72s}
@media (prefers-reduced-motion:reduce){.mtag-stats [data-reveal]{transition-delay:0s}}

/* Two-column text + checklist (Fundraising, Sustainability) */
.split{padding:66px 0}
.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
@media (max-width:900px){.split .wrap{grid-template-columns:1fr}}
.split h2{font-size:clamp(26px,3vw,34px);margin-bottom:16px}
.split p{color:var(--ink-soft);font-size:15.5px;margin-bottom:14px}
.check-list{list-style:none;margin-top:6px}
.check-list li{padding:12px 0;border-top:1px solid var(--line);font-size:15px;display:flex;gap:10px;color:var(--ink)}
.check-list li:before{content:"✓";color:var(--blue);font-weight:700}
.split.alt{background:var(--blue-tint)}

/* About: timeline + team */
.timeline{padding:66px 0}
.timeline-row{display:grid;grid-template-columns:100px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line)}
.timeline-row:first-child{border-top:none}
.timeline-year{font-family:'Fraunces',serif;font-style:italic;color:var(--blue);font-size:19px}
.timeline-row h4{font-size:16.5px;margin-bottom:6px;font-family:'Fraunces',serif;font-weight:500}
.timeline-row p{color:var(--ink-soft);font-size:14.5px}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:8px}
@media (max-width:800px){.team-grid{grid-template-columns:1fr 1fr}}
.team-avatar{width:100%;aspect-ratio:1;border-radius:50%;margin-bottom:12px}
.team-avatar.a1{background:linear-gradient(160deg,var(--blue),#3FB6EE)}
.team-avatar.a2{background:linear-gradient(160deg,var(--pink),#EE5A9B)}
.team-avatar.a3{background:linear-gradient(160deg,var(--green-dark),var(--green))}
.team-card h5{font-size:14.5px;font-weight:600}
.team-card span{font-size:12.5px;color:var(--ink-soft)}

/* Simple CTA band for the bottom of subpages */
.cta-band{background:var(--navy);color:#fff;padding:64px 0;text-align:center}
.cta-band h2{font-size:clamp(26px,3vw,34px);margin-bottom:22px}
.cta-band .btn-row{justify-content:center}

/* Contact page */
.map-placeholder{width:100%;aspect-ratio:16/7;background:var(--blue-tint);border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;font-size:13px;margin-bottom:36px}

/* Legal pages */
.legal{padding:60px 0 90px}
.legal .inner{max-width:760px}
.legal h2{font-size:20px;margin:32px 0 10px;font-family:'Fraunces',serif;font-weight:500}
.legal-note+h2{margin-top:0}
.legal p{color:var(--ink-soft);font-size:15px;margin-bottom:8px}
.legal-flag{background:#FFF7E6;border:1px solid #EAD9A8;color:#7A5E12;padding:14px 18px;border-radius:10px;font-size:13.5px;margin-bottom:32px}

/* Pull quote (Fundraising / About) */
.pull-quote{background:var(--blue-tint);border-left:4px solid var(--blue);padding:28px 32px;border-radius:0 16px 16px 0;font-family:'Inter',sans-serif;font-weight:600;font-size:17px;line-height:1.55;margin:40px 0;color:var(--ink)}
.pull-quote strong.quote-line2{display:block;margin-top:12px}
.pull-quote strong.quote-line3{display:block}
.hl-green{color:var(--green-dark);text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:5px}
.quote-col{position:relative}
.feel-arrow{margin:8px 0 -6px 0;text-align:right}
@media (min-width:1400px){
  .feel-arrow{position:absolute;right:-96px;bottom:8px;margin:0}
}
.feel-arrow svg{display:inline-block}
#enquire .fr-final-cta{max-width:840px}
#enquire .fr-body{max-width:840px}
.pull-quote cite{display:block;margin-top:14px;font-style:normal;font-size:13px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace}

/* Stat row (Campaign Resources) */
.stat-row{display:flex;gap:44px;margin-top:14px;flex-wrap:wrap}
.stat b{font-family:'Fraunces',serif;font-size:32px;font-weight:500;display:block;color:var(--navy)}
.stat span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em}
.stat-note{font-size:12px;color:var(--ink-soft);margin-top:16px}

/* ===== Fundraising page ===== */
.fr-hero-full{background:var(--blue-tint);padding:24px 24px 28px}
.fr-hero-inner{position:relative;border-radius:32px;overflow:hidden;height:calc(100vh - 78px - 52px);min-height:520px;max-height:820px;box-shadow:0 25px 60px -25px rgba(14,42,77,.3)}
.fr-hero-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 24%}
.fr-hero-full-content{position:relative;z-index:1;height:100%;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:72px 24px 0}
.fr-hero-full .eyebrow{color:var(--blue)}
.fr-hero-full .lede-short{font-size:17px;color:var(--ink-soft);max-width:64ch;margin:0 auto 28px}
.fr-hero-full h1{width:100%;max-width:100%;margin:16px auto 18px;font-size:clamp(34px,4.4vw,54px);line-height:1.05;color:var(--ink);letter-spacing:-.02em;white-space:nowrap;text-align:center}
@media (max-width:760px){
  .fr-hero-full h1{white-space:normal;font-size:clamp(28px,7vw,40px);max-width:12ch}
  .fr-hero-full{padding:14px 14px 28px}
  .fr-hero-inner{border-radius:20px}
}
.fr-hero-full .btn{box-shadow:0 12px 28px -10px rgba(14,42,77,.4)}
.fr-hero{padding:70px 0 66px;background:linear-gradient(180deg,var(--blue-tint) 0%,var(--paper) 100%);overflow:hidden}

/* ===== Homepage hero (Oura-style) ===== */
.home-hero-full{background:var(--blue-tint);padding:24px 24px 28px}
.home-hero-inner{position:relative;border-radius:32px;overflow:hidden;height:calc(100vh - 97px);min-height:520px;max-height:900px;box-shadow:0 25px 60px -25px rgba(14,42,77,.3)}
.home-hero-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.home-hero-full-content{position:relative;z-index:1;height:100%;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:102px 24px 24px}
.home-hero-full .btn-row{gap:44px}
.home-hero-top{width:100%;display:flex;flex-direction:column;align-items:center}
.home-hero-full .lede{font-size:17px;color:var(--ink-soft);width:100%;margin:18px auto 0;white-space:nowrap}
.home-hero-full h1{width:100%;max-width:100%;margin:0 auto;font-size:clamp(34px,4.4vw,54px);line-height:1.05;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.home-hero-full .btn{box-shadow:0 12px 28px -10px rgba(14,42,77,.4)}
@media (max-width:760px){
  .home-hero-full h1{font-size:clamp(28px,7vw,40px);white-space:normal}
  .home-hero-full .lede{white-space:normal}
  .home-hero-full{padding:14px 14px 28px}
  .home-hero-inner{border-radius:20px}
  .home-hero-full-content{padding:120px 20px 30px}
}
@keyframes homeHeroFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes homeHeroFadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.home-hero-inner img{animation:homeHeroFadeIn 1s ease both}
.home-hero-full h1{animation:homeHeroFadeUp .7s ease .1s both}
.home-hero-full .lede{animation:homeHeroFadeUp .7s ease .22s both}
.home-hero-full .btn-row{animation:homeHeroFadeUp .7s ease .34s both}
@media (prefers-reduced-motion:reduce){
  .home-hero-inner img,.home-hero-full h1,.home-hero-full .lede,.home-hero-full .btn-row{animation:none;opacity:1}
}

.fr-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;position:relative}
@media (max-width:900px){.fr-hero .wrap{grid-template-columns:1fr}}
.fr-hero h1{font-size:clamp(34px,4.6vw,56px);margin:14px 0 18px;letter-spacing:-.02em}
.fr-hero .lede-short{font-size:18px;color:var(--ink-soft);max-width:46ch;margin-bottom:30px}
.fr-hero-frame{position:relative;display:flex;justify-content:center;align-items:center;min-height:340px}
.fr-hero-blob{position:absolute;border-radius:50%;z-index:0}
.fr-hero-blob.b1{width:320px;height:320px;background:var(--pink);opacity:.16;top:-40px;right:-10px}
.fr-hero-blob.b2{width:200px;height:200px;background:var(--green);opacity:.2;bottom:-30px;left:0}
.fr-hero-img{position:relative;z-index:1;border-radius:16px;overflow:hidden;aspect-ratio:6/5;max-width:400px;width:100%;box-shadow:0 25px 60px -18px rgba(14,42,77,.4);border:8px solid #fff;transform:rotate(-3deg);transition:transform .35s ease}
.fr-hero-img:hover{transform:rotate(0deg) scale(1.02)}
.fr-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.fr-hero-tag{position:absolute;z-index:2;bottom:8px;left:-6px;background:#fff;border-radius:12px;padding:10px 16px;box-shadow:0 10px 24px -10px rgba(14,42,77,.35);font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--navy);transform:rotate(3deg)}

.fr-section{padding:64px 0}
.fr-section.tint{background:var(--blue-tint)}
.fr-section.dark{background:var(--navy);color:#fff}
.fr-section .kicker{max-width:720px;margin-bottom:8px}
#moments .kicker{margin-left:auto;margin-right:auto;text-align:center;margin-bottom:16px}
#moments .kicker h2{margin:14px 0 0}
#moments .fr-body{margin-left:auto;margin-right:auto;text-align:center;max-width:880px}
html[lang="de"] .de-break{display:block}
.fr-section .kicker h2{font-size:clamp(26px,3vw,34px);margin-top:10px}
.fr-section.dark .eyebrow{color:var(--green)}
.fr-section.dark p{color:#D7E2EE}
.fr-body{max-width:680px}
.fr-body p{font-size:16px;color:var(--ink-soft);margin-bottom:12px}
.fr-section.dark .fr-body p{color:#D7E2EE}
.fr-body .eyebrow{font-size:12px;color:var(--blue);margin-bottom:0}
.fr-body .lead{font-size:19px;color:var(--ink);font-weight:600;margin-bottom:14px}
.fr-section.dark .fr-body .lead{color:#fff}

.fr-grid2{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start;margin-top:6px}
.fr-grid2>div{min-width:0}
@media (max-width:900px){.fr-grid2{grid-template-columns:1fr}}
#more-than-gift{padding:112px 0 96px}
#more-than-gift .fr-body>p.eyebrow,
#more-than-gift .fr-body h2,
#more-than-gift .fr-body p:nth-of-type(2){white-space:nowrap}
@media (max-width:700px){
  #more-than-gift .fr-body>p.eyebrow,
  #more-than-gift .fr-body h2,
  #more-than-gift .fr-body p:nth-of-type(2){white-space:normal}
}

.mini-examples{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:28px 0}
@media (max-width:800px){.mini-examples{grid-template-columns:1fr}}
.mini-examples .ex{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;font-size:14.5px;color:var(--ink-soft);font-style:italic;transition:opacity .6s ease,transform .6s ease}
.mini-examples .ex:nth-child(1){transition-delay:0s}
.mini-examples .ex:nth-child(2){transition-delay:.15s}
.mini-examples .ex:nth-child(3){transition-delay:.3s}

.statement{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,30px);color:var(--ink);line-height:1.3;margin:18px 0;letter-spacing:-.01em}
.fr-section.dark .statement{color:#fff}

/* Reciprocity contrast quotes */
.reciprocity-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:30px 0}
@media (max-width:700px){.reciprocity-pair{grid-template-columns:1fr}}
.recip-card{border-radius:16px;padding:24px}
.recip-card.wrong{background:var(--paper-2);border:1px dashed var(--line)}
.recip-card.wrong p{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:rgba(91,100,114,.5);font-style:italic;font-size:16px}
.recip-card.right{background:#fff;border:1px solid var(--line);box-shadow:0 12px 26px -18px rgba(5,25,45,.2)}
.recip-card.right p{color:var(--navy);font-weight:700;font-size:18px;font-style:normal}
.recip-card .tiny{font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;display:block}
.recip-card.wrong .tiny{color:var(--ink-soft)}
.recip-card.right .tiny{color:var(--green-dark)}
.fr-section.dark .recip-card.wrong{background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.3)}
.fr-section.dark .recip-card.wrong p{color:#9FB0C2;text-decoration-color:rgba(159,176,194,.6)}
.fr-section.dark .recip-card.wrong .tiny{color:#9FB0C2}
.section-divider{border-top:1px solid var(--line);margin:40px 0 32px;padding-top:36px}
.subhead{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:8px;display:block}

/* Moment table */
.moment-table{margin-top:24px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.moment-row{display:grid;grid-template-columns:1fr 1.3fr 1.5fr;gap:0}
.moment-row.head{background:var(--navy);color:#fff;font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em}
.moment-row:not(.head):nth-child(even){background:#fff}
.moment-row:not(.head):nth-child(odd){background:var(--paper-2)}
.moment-row div{padding:16px 20px;font-size:14.5px}
.moment-row.head div{padding:14px 20px}
.moment-row:not(.head) div:first-child{font-family:'Archivo',sans-serif;font-weight:700;color:var(--navy)}
.moment-row:not(.head) div:not(:first-child){color:var(--ink-soft)}
@media (max-width:700px){
  .moment-row{grid-template-columns:1fr}
  .moment-row.head{display:none}
  .moment-row:not(.head){border-top:2px solid var(--blue);padding-top:4px}
  .moment-row div{padding:6px 20px}
  .moment-row div:before{content:attr(data-label);display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--blue);margin-top:8px}
}

/* Process steps (6) */
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:28px}
@media (max-width:800px){.process-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.process-grid{grid-template-columns:1fr}}
.process-item{border-top:3px solid var(--blue);padding-top:16px}
.process-item .pnum{font-family:'Archivo',sans-serif;font-weight:800;font-size:26px;color:var(--blue);display:block;margin-bottom:8px}
.process-item h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;margin-bottom:6px}
.process-item p{font-size:13.5px;color:var(--ink-soft)}

/* Tag cloud */
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
.tag-pill{border:1px solid var(--line);background:var(--paper-2);color:var(--navy);padding:9px 18px;border-radius:20px;font-size:13.5px;font-family:'IBM Plex Mono',monospace}
.fr-section.dark .tag-pill{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff}

.fr-cta-row{margin-top:22px}

/* Moments — dynamic alternating editorial layout */
.moments-dynamic{display:flex;flex-direction:column;gap:52px;margin-top:34px;transform:translateX(40px)}
@media (min-width:1221px){.moments-dynamic{transform:translateX(70px)}}
@media (max-width:720px){.moments-dynamic{transform:translateX(22px)}}
@media (max-width:700px){.moments-dynamic{transform:none}}
.moment-dyn{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;width:100%;max-width:1100px;margin:0 auto}
.moment-dyn.rev .moment-dyn-img{order:2}
.moment-dyn.rev .moment-dyn-text{order:1}
@media (max-width:700px){
  .moment-dyn,.moment-dyn.rev{grid-template-columns:1fr;max-width:380px;gap:26px}
  .moment-dyn.rev .moment-dyn-img{order:0}
  .moment-dyn.rev .moment-dyn-text{order:0}
}
.moment-dyn-img{position:relative;max-width:340px;margin:0;border-radius:14px;overflow:hidden;box-shadow:0 20px 44px -20px rgba(14,42,77,.35);aspect-ratio:16/11;justify-self:center}
@media (max-width:700px){.moment-dyn-img{margin:0 auto}}
.moment-dyn-img img{width:100%;height:100%;object-fit:cover;display:block}
.moment-dyn-num{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:.04em;color:var(--blue);font-size:13px;margin-bottom:8px}
.moment-dyn-text{display:flex;flex-direction:column;justify-content:center;min-height:233.75px}
.moment-dyn h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:22px;margin-bottom:10px}
.moment-dyn .obj{font-size:15px;color:var(--ink);font-weight:600;margin-bottom:6px}
.moment-dyn .ex{font-size:14px;color:var(--ink-soft)}

/* Campaign ideas — condensed */
.campaign-condensed{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin-top:26px}
@media (max-width:900px){.campaign-condensed{grid-template-columns:1fr}}
.campaign-tags{display:flex;flex-direction:column;gap:10px}
.campaign-tag{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;font-family:'Archivo',sans-serif;font-weight:700;font-size:14.5px;color:var(--navy);display:flex;align-items:center;gap:12px}
.campaign-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0}

.spin-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;background:#fff;border-radius:20px;padding:30px;border:1px solid var(--line)}
.spin-stage{perspective:900px;width:100%;max-width:220px;height:250px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}
.spin-stage:active{cursor:grabbing}
.spin-object{width:60px;height:190px;border-radius:30px;background:linear-gradient(90deg,#0A4A73 0%,#0090E0 20%,#6CC6F0 45%,#0090E0 70%,#0A4A73 100%);transform-style:preserve-3d;animation:spin360 7s linear infinite;box-shadow:0 20px 40px -12px rgba(14,42,77,.35);position:relative}
.spin-object.dragging{animation-play-state:paused}
.spin-object::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--gold)}
@keyframes spin360{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.spin-hint{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.spin-label{font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;color:var(--navy)}
@media (prefers-reduced-motion:reduce){.spin-object{animation:none}}

/* Journey timeline with travelling marker */
.journey{position:relative;margin-top:40px}
.journey::before{content:"";position:absolute;left:24px;top:14px;bottom:14px;width:2px;background:repeating-linear-gradient(to bottom,var(--line) 0 6px,transparent 6px 12px)}
.journey-stop{display:grid;grid-template-columns:50px 1fr;gap:20px;padding-bottom:38px;position:relative}
.journey-stop:last-child{padding-bottom:0}
.journey-marker{width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:800;font-size:11px;color:var(--ink-soft);transition:all .3s ease;z-index:1;justify-self:center;margin-top:2px}
.journey-stop.active .journey-marker{border-color:var(--blue);background:var(--blue);color:#fff}
.journey-content h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;margin-bottom:6px;transition:color .3s ease}
.journey-stop.active .journey-content h4{color:var(--blue)}
.journey-content p{font-size:14px;color:var(--ink-soft);max-width:56ch}
.journey-plane{position:absolute;left:9px;width:30px;height:30px;font-size:20px;display:flex;align-items:center;justify-content:center;transition:top .45s cubic-bezier(.4,0,.2,1);z-index:2;pointer-events:none}

/* Condensed closing CTA (replaces embedded quote tool) */
.fr-final-cta{text-align:center;max-width:640px;margin:0 auto}
.fr-final-cta .eyebrow{margin-bottom:14px}
.fr-final-cta h2{margin-bottom:6px}
.fr-final-cta .btn{margin-top:22px}
.highlight{color:var(--blue);font-weight:700}
.fr-section.dark .highlight{color:var(--green)}

#cycle .loop-ring{max-width:1050px}
#cycle .loop-label{font-size:11px;fill:var(--ink-soft)}
#cycle .loop-center{fill:var(--ink);font-family:'Archivo',sans-serif;font-weight:800;text-transform:none;letter-spacing:.02em;font-size:20px}
#cycle .loop-dot{fill:var(--blue);transition:fill .2s ease,transform .2s ease;transform-origin:center;transform-box:fill-box}
#cycle .track{stroke:var(--line)}
#cycle .draw{stroke:var(--green)}
#cycle .loop-seg{cursor:pointer}
#cycle .loop-label{transition:fill .2s ease,font-weight .2s ease}
#cycle .loop-seg:hover .loop-dot,
#cycle .loop-seg:focus .loop-dot,
#cycle .loop-seg.active .loop-dot{fill:var(--green);transform:scale(1.35)}
#cycle .loop-seg:hover .loop-label,
#cycle .loop-seg:focus .loop-label,
#cycle .loop-seg.active .loop-label{fill:var(--navy);font-weight:600}
#cycle .loop-seg:focus{outline:none}
/* Cycle-of-giving hover tooltips (Fundraising page) */
.cycle-ring-wrap{position:relative;display:inline-block}
.cycle-hint{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
.cycle-tip{position:absolute;z-index:5;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 19px;font-size:14.5px;line-height:1.5;color:var(--ink);box-shadow:0 18px 36px -16px rgba(5,25,45,.4);width:275px;text-align:left;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.cycle-tip .cycle-tip-label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--blue);margin-bottom:5px}
.cycle-tip.show{opacity:1;visibility:visible}
.cycle-tip[data-tip="gift"]{left:50%;top:20%;margin-left:-203px;margin-top:-178px;transform:translateY(4px)}
.cycle-tip[data-tip="gift"].show{transform:translateY(0)}
.cycle-tip[data-tip="thanks"]{left:76%;top:35%;margin-left:31px;margin-top:-32px;transform:translateX(-4px)}
.cycle-tip[data-tip="thanks"].show{transform:translateX(0)}
.cycle-tip[data-tip="trust"]{left:76%;top:65%;margin-left:31px;margin-top:-32px;transform:translateX(-4px)}
.cycle-tip[data-tip="trust"].show{transform:translateX(0)}
.cycle-tip[data-tip="loyalty"]{left:50%;top:80%;margin-left:-203px;margin-top:31px;transform:translateY(-4px)}
.cycle-tip[data-tip="loyalty"].show{transform:translateY(0)}
.cycle-tip[data-tip="giving"]{left:24%;top:65%;margin-left:-440px;margin-top:-32px;transform:translateX(4px)}
.cycle-tip[data-tip="giving"].show{transform:translateX(0)}
.cycle-tip[data-tip="impact"]{left:24%;top:35%;margin-left:-440px;margin-top:-32px;transform:translateX(4px)}
.cycle-tip[data-tip="impact"].show{transform:translateX(0)}
@media (max-width:760px){
  .cycle-tip{width:190px;font-size:12.5px}
  .cycle-tip[data-tip="gift"]{margin-left:-95px}
  .cycle-tip[data-tip="loyalty"]{margin-left:-95px}
  .cycle-tip[data-tip="thanks"],.cycle-tip[data-tip="trust"]{left:auto;right:-6px;margin-left:0}
  .cycle-tip[data-tip="giving"],.cycle-tip[data-tip="impact"]{left:-6px;margin-left:0}
}


/* ===== Donor gifts journey (Why it works / Reciprocity / Cycle) redesign ===== */
.dg-why-head{font-size:clamp(26px,3vw,34px);line-height:1.15;max-width:none;width:100%;margin:14px 0 16px;white-space:nowrap}
@media (max-width:760px){.dg-why-head{white-space:normal}}
.dg-supporting{font-size:17px;line-height:1.3;color:var(--ink-soft);max-width:52ch;margin-bottom:0;white-space:nowrap}
@media (max-width:640px){.dg-supporting{white-space:normal}}
.statement-soft{font-family:'Inter',sans-serif;font-weight:400;font-size:17px;color:var(--ink-soft);text-align:center;max-width:none;width:100%;margin:0 auto 18px;line-height:1.5}
.statement-soft span{white-space:nowrap;display:inline-block}
@media (max-width:640px){.statement-soft span{white-space:normal}}
.dg-carousel{border-radius:20px;overflow:hidden;max-width:1100px;margin:64px auto 44px;box-shadow:0 25px 55px -25px rgba(14,42,77,.3);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.dg-carousel-track{display:flex;gap:16px;width:max-content;animation:dgCarouselScroll 30s linear infinite}
.dg-carousel-track img{width:900px;aspect-ratio:16/10;object-fit:cover;flex-shrink:0;display:block;border-radius:14px}
@keyframes dgCarouselScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.dg-carousel-track{animation:none}}

.benefit-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:52px}
@media (max-width:800px){.benefit-cards{grid-template-columns:1fr}}
.benefit-card{background:var(--blue-tint);border-radius:16px;padding:24px 22px}
.benefit-card .b-label{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:8px}
.benefit-card .b-desc{font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.01em}

.big-statement{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(26px,3vw,34px);line-height:1.3;color:var(--ink);text-align:center;max-width:none;width:100%;margin:0 auto 18px;letter-spacing:-.015em;white-space:nowrap}
.big-statement span{white-space:nowrap;display:inline-block}
@media (max-width:640px){.big-statement,.big-statement span{white-space:normal}}
.dg-support-line{font-size:15.5px;color:var(--ink-soft);text-align:center;max-width:none;width:100%;margin:0 auto}

.dg-recip-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:100%;max-width:760px;margin:29px auto 36px}
@media (max-width:700px){.dg-recip-cards{grid-template-columns:1fr}}
#dg-reciprocity{padding-top:36px}
.dg-recip-card{border-radius:18px;padding:28px 26px}
.dg-recip-card .tiny{font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;display:block}
.dg-recip-card.muted{background:var(--paper-2);border:1px dashed var(--line)}
.dg-recip-card.muted .tiny{color:var(--ink-soft)}
.dg-recip-card.muted p{color:var(--ink-soft);font-style:italic;font-size:16px;text-decoration:line-through;text-decoration-color:rgba(91,100,114,.4)}
.dg-recip-card.positive{background:linear-gradient(160deg,#EFF8E0,#fff 60%);border:1px solid rgba(144,192,0,.35);box-shadow:0 16px 32px -20px rgba(94,126,0,.3)}
.dg-recip-card.positive .tiny{color:var(--green-dark)}
.dg-recip-card.positive p{color:var(--navy);font-weight:700;font-size:19px}

.dg-cycle-support{font-size:16px;color:var(--ink-soft);margin-top:8px}
.dg-cycle-closing{max-width:560px;margin:28px auto 0;font-size:15.5px;color:var(--ink-soft);text-align:center}
.dg-cycle-closing .em{color:var(--blue);font-weight:700;display:inline-block;margin-top:6px}

/* Thin dark transition band */
.fr-band{background:var(--navy);padding:56px 0}
.fr-band-words{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 14px;max-width:1140px;margin:0 auto;padding:0 40px}
.fr-band-word{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:clamp(24px,3.1vw,38px);line-height:1;letter-spacing:.02em;text-transform:uppercase;transition:opacity .6s ease,transform .6s ease}
.fr-band-word.word-blue{color:var(--blue)}
.fr-band-word.word-green{color:var(--green)}
.fr-band-word.word-pink{color:var(--pink)}
.fr-band-dot-wrap{display:flex;align-items:center;transition:opacity .5s ease,transform .5s ease}
.fr-band-dot{height:16px;width:auto;flex-shrink:0}
.fr-band-words > *:nth-child(1){transition-delay:0s}
.fr-band-words > *:nth-child(2){transition-delay:.25s}
.fr-band-words > *:nth-child(3){transition-delay:.5s}
.fr-band-words > *:nth-child(4){transition-delay:.75s}
.fr-band-words > *:nth-child(5){transition-delay:1s}
@media (max-width:760px){
  .fr-band-words{justify-content:center;text-align:center}
  .fr-band-word{font-size:clamp(28px,7vw,40px)}
}

/* ===== Built for fundraising realities — editorial redesign v2 ===== */
.realities-top{background:var(--navy);color:#fff;padding:80px 40px 60px;text-align:center}
.realities-top-inner{max-width:820px;margin:0 auto}
@media (max-width:900px){.realities-support{white-space:normal}}
.realities-top-inner h2{font-size:clamp(26px,3vw,38px);color:#fff;margin:14px 0 18px;line-height:1.2;white-space:nowrap}
@media (max-width:760px){.realities-top-inner h2{white-space:normal}}
.realities-support{font-size:16.5px;color:#D7E2EE;margin-bottom:18px;line-height:1.55}
.realities-micro{font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;color:var(--green);letter-spacing:-.005em}

.realities-bottom{background:var(--blue-tint);padding:80px 40px}
.realities-bottom-inner{max-width:1180px;margin:0 auto}

.realities-mid{display:grid;grid-template-columns:1fr auto 1fr;gap:48px;align-items:center}
@media (max-width:900px){
  .realities-mid{grid-template-columns:1fr;justify-items:center}
  .realities-product{order:-1;margin-bottom:12px}
}
.realities-callout-col{display:flex;flex-direction:column;gap:20px;width:100%;max-width:300px}
.realities-callout-col:first-child{justify-self:end}
.realities-callout-col:last-child{justify-self:start}
@media (max-width:900px){
  .realities-callout-col{justify-self:center!important;max-width:340px}
}

.realities-product{width:100%;max-width:360px;border-radius:20px;overflow:hidden;box-shadow:0 28px 60px -22px rgba(14,42,77,.4);background:#fff;justify-self:center}
.realities-product img{width:100%;height:auto;display:block}

.callout{background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 12px 26px -18px rgba(14,42,77,.25);width:100%}
.callout .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-bottom:9px}
.callout h5{font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;color:var(--navy);margin-bottom:5px}
.callout p{font-size:13px;color:var(--ink-soft);line-height:1.4}

.realities-final-plain{width:100%;margin:56px auto 0;text-align:center}
.realities-final-text{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(24px,2.8vw,32px);line-height:1.5;letter-spacing:-.015em;margin:0}
.realities-final-text .line1,.realities-final-text .line2{display:block;white-space:nowrap}
.realities-final-text .line1{color:var(--navy)}
.realities-final-text .line2{color:var(--blue)}
@media (max-width:900px){.realities-final-text .line1,.realities-final-text .line2{white-space:normal}}

/* ===== Fundraising hero: staggered image placeholders + entrance animation ===== */
.fr-hero-visual{position:relative;height:560px}
@media (max-width:900px){.fr-hero-visual{height:420px;margin-top:20px}}
@media (max-width:500px){.fr-hero-visual{height:340px}}
.fr-hero-img{position:absolute;border-radius:20px;overflow:hidden;background:var(--blue-tint);border:1px solid var(--line)}
.fr-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.fr-hero-img-1{width:60%;aspect-ratio:3/4;top:0;left:2%;box-shadow:0 20px 45px -22px rgba(14,42,77,.3)}
.fr-hero-img-2{width:56%;aspect-ratio:4/5;bottom:0;right:0;box-shadow:0 25px 55px -20px rgba(14,42,77,.4)}

.cr-hero-visual{height:600px}
@media (max-width:900px){.cr-hero-visual{height:460px}}
@media (max-width:500px){.cr-hero-visual{height:380px}}
.cr-hero-img-1{width:52%;aspect-ratio:3/4;top:0;left:0;box-shadow:0 20px 45px -22px rgba(14,42,77,.3);z-index:2}
.cr-hero-img-2{width:48%;aspect-ratio:4/5;bottom:0;left:30%;box-shadow:0 25px 55px -20px rgba(14,42,77,.4);z-index:3}
.cr-hero-img-3{width:38%;aspect-ratio:1/1;top:10%;right:0;box-shadow:0 18px 40px -20px rgba(14,42,77,.3);z-index:1}
@media (max-width:500px){
  .cr-hero-img-1{width:56%}
  .cr-hero-img-2{width:52%;left:26%}
  .cr-hero-img-3{width:42%}
}
.cr-hero-img-1{animation:heroFadeIn .9s ease .2s both}
.cr-hero-img-2{animation:heroFadeIn .9s ease .45s both}
.cr-hero-img-3{animation:heroFadeIn .9s ease .32s both}
@media (prefers-reduced-motion:reduce){
  .cr-hero-img-1,.cr-hero-img-2,.cr-hero-img-3{animation:none;opacity:1}
}

@keyframes heroFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroFadeIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.fr-hero-split .hero-left .eyebrow{animation:heroFadeUp .7s ease both}
.fr-hero-split .hero-left h1{animation:heroFadeUp .7s ease .12s both}
.fr-hero-split .hero-left .lede{animation:heroFadeUp .7s ease .24s both}
.fr-hero-split .hero-left .btn-row{animation:heroFadeUp .7s ease .36s both}
.fr-hero-img-1{animation:heroFadeIn .9s ease .2s both}
.fr-hero-img-2{animation:heroFadeIn .9s ease .45s both}
@media (prefers-reduced-motion:reduce){
  .fr-hero-split .hero-left .eyebrow,.fr-hero-split .hero-left h1,.fr-hero-split .hero-left .lede,.fr-hero-split .hero-left .btn-row,.fr-hero-img-1,.fr-hero-img-2{animation:none;opacity:1}
}

/* ===== Fundraising dropdown menu content ===== */
.menu-inner{height:100%;display:flex;align-items:center;justify-content:center;max-width:1280px;margin:0 auto;padding:0 48px;box-sizing:border-box}
.menu-fundraising,.menu-campaign,.menu-sustainability,.menu-whyus{display:none;align-items:center;justify-content:center;gap:56px;height:100%;padding:0}
.nav-megamenu.show-fundraising .menu-fundraising{display:flex}
.nav-megamenu.show-campaign .menu-campaign{display:flex}
.nav-megamenu.show-sustainability .menu-sustainability{display:flex}
.nav-megamenu.show-whyus .menu-whyus{display:flex}
/* Roomy panel: large photo cards with the label on the picture, generous list spacing */
.menu-fundraising .menu-imgcard,.menu-campaign .menu-imgcard,.menu-sustainability .menu-imgcard{margin:0}
.menu-imgcard{position:relative;width:300px;height:196px;border-radius:22px;overflow:hidden;flex-shrink:0;display:block;transition:transform .35s ease,box-shadow .35s ease}
.menu-imgcard:hover{transform:translateY(-3px);box-shadow:0 22px 34px -24px rgba(14,42,77,.55)}
.menu-imgcard::after{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(10,22,38,.66),transparent);z-index:0}
.menu-imgcard-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.menu-imgcard:hover .menu-imgcard-bg{transform:scale(1.05)}
.menu-imgcard-bg.placeholder{background:#fff;border:1px solid var(--line)}
.menu-imgcard-label{position:absolute;left:20px;right:64px;bottom:18px;z-index:1;color:#fff;font-family:'Archivo',sans-serif;font-weight:600;font-size:19px;line-height:1.15;letter-spacing:-.005em}
.menu-imgcard-arrow{position:absolute;right:14px;bottom:13px;z-index:1;width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ink);box-shadow:0 6px 14px -4px rgba(14,42,77,.35);transition:transform .3s ease}
.menu-imgcard:hover .menu-imgcard-arrow{transform:translateX(3px)}
/* Fixed width keeps the image cards lined up at the same spot regardless of
   which menu is open — their text labels differ in length, so an auto-sized
   list would shift the whole row left or right. */
.menu-iconlist{display:flex;flex-direction:column;justify-content:center;gap:26px;margin-left:12px;width:270px;flex-shrink:0}
.menu-iconitem{display:flex;align-items:center;gap:16px;color:var(--ink);font-family:'Archivo',sans-serif;font-weight:500;font-size:16px;line-height:1.25;opacity:.85;transition:opacity .2s ease,color .2s ease,transform .25s ease}
.menu-iconitem:hover{opacity:1;color:var(--blue);transform:translateX(3px)}
.menu-icon{width:26px;height:26px;flex-shrink:0}
.menu-whyus .menu-iconlist{flex-direction:row;width:auto;gap:84px;margin-left:0}
@media (max-width:1100px){.menu-fundraising,.menu-campaign,.menu-sustainability,.menu-whyus{display:none!important}}

/* ===== Campaign Ideas page (cri- prefix) ===== */
.cri-section-sub{max-width:640px;color:var(--ink-soft);font-size:16px;line-height:1.55;margin-top:14px}
.fr-section.tint{background:var(--paper-2)}
#browse .kicker{max-width:820px}
#browse .cri-section-sub{max-width:820px}

/* Placeholder component */
.cri-placeholder{position:relative;width:100%;background:#F1F2F4;border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cri-placeholder img{width:100%;height:100%;object-fit:cover;display:block}
.cri-placeholder>span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9AA2AF}

/* Hero visual — single image, mirrored from fundraising's hero (image left, text right) */
.cri-hero-visual-single{height:560px;display:flex;align-items:center;justify-content:center}
.cri-hero-visual-single .cri-placeholder{width:100%;height:75%;border-radius:20px;box-shadow:0 20px 45px -22px rgba(14,42,77,.3);animation:heroFadeIn .9s ease .2s both}
@media (max-width:900px){.cri-hero-visual-single{height:420px;margin-top:20px}}
@media (max-width:500px){.cri-hero-visual-single{height:340px}}
/* Hero visual — two overlapping images, same composition as fundraising's hero but mirrored (visual left, text right) */
.cri-hero-visual-mirror .fr-hero-img-1{left:auto;right:2%}
.cri-hero-visual-mirror .fr-hero-img-2{right:auto;left:0}
#hero-image-1,#hero-image-2{background:#F1F2F4;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
#hero-image-1 span,#hero-image-2 span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9AA2AF}
/* Match the Fundraising hero's split exactly (same column ratio, gap, image sizes) — only the image/text sides are mirrored */
.cri-hero-h1-line2{display:block}
.cri-hero-mirrored .hero-left h1 span{text-wrap:balance}
.cri-hero-mirrored .hero-left h1>span{display:block}
.cri-break-line{display:block}
/* Text column only: right-aligned, vertically centred within the hero (inherits align-items:center from .hero .wrap), image column is untouched */
.cri-hero-mirrored .hero-left{text-align:right}
.cri-hero-mirrored .btn-row{justify-content:flex-end}
@media (max-width:900px){.cri-hero-mirrored .hero-left{text-align:left}.cri-hero-mirrored .btn-row{justify-content:flex-start}}
/* Shrink the headline enough that each line (incl. "Discover what's possible.") fits on one line within the 545px text column */
/* Lede: 3 manually-balanced lines (near-equal width) so their right-aligned left edges roughly line up with the headline's own left edge */
.cri-hero-mirrored .hero-left p.lede{max-width:none}
.cri-lede-line{display:block}
@media (max-width:1040px){.cri-lede-line{display:inline}}

/* Objective grid */
.cri-objective-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px}
.cri-tile{grid-column:span 1;text-align:left;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;transition:transform .25s ease}
.cri-tile-wide{grid-column:span 2}
.cri-tile:hover{transform:translateY(-4px)}
.cri-tile:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:16px}
.cri-tile-img{aspect-ratio:5/4;margin-bottom:18px;transition:border-color .2s ease}
.cri-tile:hover .cri-tile-img{border-color:var(--blue)}
.cri-tile-body{display:flex;flex-direction:column}
.cri-tile-num{font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;color:var(--blue);margin-bottom:8px}
.cri-tile-body h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;margin-bottom:6px;color:var(--ink)}
.cri-tile-body p{font-size:14.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:10px}
.cri-tile-tags{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.02em;color:var(--ink-soft);opacity:.75;margin-bottom:10px}
.cri-tile-cue{font-family:'Archivo',sans-serif;font-weight:600;font-size:13.5px;color:var(--navy);transition:gap .2s ease}
@media (max-width:980px){
  .cri-objective-grid{grid-template-columns:repeat(2,1fr)}
  .cri-tile-wide{grid-column:span 2}
}
@media (max-width:620px){
  .cri-objective-grid{grid-template-columns:1fr;gap:34px}
  .cri-tile-wide{grid-column:span 1}
}

/* Source → Adapt → Develop — compact editorial progression, replaces the old 8-tile objective grid */
#objectives .kicker{max-width:1080px;margin-left:auto;margin-right:auto;text-align:center;margin-bottom:8px}
#objectives .cri-section-sub{max-width:1100px;white-space:nowrap;margin-left:auto;margin-right:auto}
@media (max-width:1160px){#objectives .cri-section-sub{white-space:normal;max-width:640px}}
.cri-path{display:flex;align-items:flex-start;gap:64px;margin-top:48px;max-width:none}
.cri-path-step{flex:1;min-width:0;text-align:center}
.cri-path > *:nth-child(1){transition-delay:0s}
.cri-path > *:nth-child(2){transition-delay:.18s}
.cri-path > *:nth-child(3){transition-delay:.36s}
.cri-path > *:nth-child(4){transition-delay:.54s}
.cri-path > *:nth-child(5){transition-delay:.72s}
@media (prefers-reduced-motion:reduce){.cri-path > *{transition-delay:0s}}
.cri-path-img{aspect-ratio:5/4;margin-bottom:20px}
.cri-path-num{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;letter-spacing:.04em;color:var(--blue);margin-bottom:8px}
.cri-path-step h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
.cri-path-step p{font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.cri-path-arrow{flex:none;align-self:center;margin-top:-70px;font-family:'IBM Plex Mono',monospace;font-size:42px;color:var(--line-dark);opacity:.6}
@media (max-width:900px){
  .cri-path{flex-direction:column;max-width:420px;gap:34px}
  .cri-path-arrow{display:none}
}

/* Browse the possibilities — light blue tint (swapped with Made around the brief) */
#browse{background:var(--blue-tint)}

/* Beyond the catalogue — dark, centered */
#beyond{background:var(--navy)}
#beyond .kicker{margin-left:auto;margin-right:auto;text-align:center;margin-bottom:30px;max-width:1080px}
#beyond .kicker .eyebrow{color:#fff}
#beyond .kicker h2{color:#fff;white-space:nowrap}
#beyond .kicker .cri-section-sub{color:#fff;margin-left:auto;margin-right:auto;max-width:920px;white-space:normal}
#beyond .btn-row{justify-content:center}
#beyond .btn{border:1.5px solid #fff}
@media (max-width:1180px){#beyond .kicker h2{white-space:normal}}

/* One goal, many possibilities — bento layout */
.cri-bento{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto auto;gap:22px;margin-top:48px}
.cri-bento-a{grid-row:span 2;aspect-ratio:auto}
.cri-bento-b{aspect-ratio:1/1}
.cri-bento-c{aspect-ratio:1/1}
.cri-bento-d{grid-column:span 2;aspect-ratio:16/7}
@media (max-width:900px){
  .cri-bento{grid-template-columns:1fr 1fr}
  .cri-bento-a{grid-column:span 2;grid-row:auto;aspect-ratio:16/9}
  .cri-bento-d{grid-column:span 2}
}
@media (max-width:620px){
  .cri-bento{grid-template-columns:1fr}
  .cri-bento-a,.cri-bento-b,.cri-bento-c,.cri-bento-d{grid-column:span 1;aspect-ratio:4/3}
}

/* Tabs */
.cri-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;margin-bottom:36px}
.cri-tab{font-family:'Archivo',sans-serif;font-weight:600;font-size:13.5px;padding:9px 18px;border-radius:20px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;transition:all .2s ease}
.cri-tab:hover{border-color:var(--blue)}
.cri-tab.active{background:var(--navy);border-color:var(--navy);color:#fff}
@media (max-width:700px){.cri-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}.cri-tab{flex-shrink:0}}

/* Product grid */
.cri-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px}
.cri-product-card{cursor:pointer;background:none;border:none;padding:0;text-align:left;font-family:inherit;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-self:start}
.cri-product-img{aspect-ratio:1/1;margin-bottom:14px}
.cri-product-card h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;color:var(--ink);margin-bottom:4px}
.cri-product-card .cri-product-tags{font-size:12.5px;color:var(--ink-soft)}
.cri-product-card.cri-hidden{display:none}
@media (max-width:900px){.cri-product-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.cri-product-grid{grid-template-columns:repeat(2,1fr);gap:20px 16px}}
.cri-showmore-wrap{display:flex;justify-content:center;margin-top:44px}


/* Modal */
.cri-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.cri-modal.open{display:flex}
.cri-modal-backdrop{position:absolute;inset:0;background:rgba(22,28,38,.55);backdrop-filter:blur(2px)}
.cri-modal-panel{position:relative;background:#fff;border-radius:24px;max-width:820px;width:100%;max-height:88vh;overflow-y:auto;padding:36px 36px 30px;box-shadow:0 40px 80px -20px rgba(14,42,77,.4)}
.cri-modal-close{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:20px;line-height:1;color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.cri-modal-close:hover{background:var(--paper-2);color:var(--ink)}
.cri-modal-head h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(22px,3vw,28px);letter-spacing:-.01em;padding-right:40px}
.cri-modal-head p{color:var(--ink-soft);font-size:14.5px;margin-top:6px}
.cri-modal-main{display:flex;align-items:center;gap:14px;margin-top:26px}
.cri-modal-img{aspect-ratio:16/10;flex:1;position:relative}
.cri-modal-img-caption{position:absolute;left:16px;bottom:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 14px;max-width:80%}
.cri-modal-img-caption strong{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:13.5px;color:var(--ink)}
.cri-modal-img-caption span{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px}
.cri-modal-arrow{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:20px;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.cri-modal-arrow:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.cri-modal-thumbs{display:flex;gap:10px;margin-top:16px;overflow-x:auto;padding-bottom:4px}
.cri-modal-thumb{flex-shrink:0;width:76px;height:56px;border-radius:8px;cursor:pointer;border:2px solid transparent;background:#F1F2F4;transition:border-color .2s ease}
.cri-modal-thumb.active{border-color:var(--navy)}
.cri-modal-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
.cri-modal-cta>span{font-size:14.5px;color:var(--ink-soft)}
body.cri-modal-lock{overflow:hidden}
@media (max-width:700px){
  .cri-modal{padding:0}
  .cri-modal-panel{max-width:none;width:100%;height:100%;max-height:none;border-radius:0;padding:24px 20px}
  .cri-modal-main{flex-direction:column;position:relative}
  .cri-modal-img{width:100%}
  .cri-modal-arrow{position:absolute;top:100px;transform:none;z-index:1}
  .cri-modal-prev{left:8px}
  .cri-modal-next{right:8px}
}
.cri-hero-mirrored .hero-left{min-width:0}

/* ===== About / Why Us page ===== */
.why-us-layout{display:grid;grid-template-columns:.8fr 1.6fr;gap:70px}
.why-us-figure{position:sticky;top:120px;align-self:start}
.why-us-num{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(90px,10vw,140px);line-height:.85;color:var(--blue);letter-spacing:-.02em}
.why-us-num-label{font-size:15px;color:var(--ink-soft);max-width:30ch;margin-top:10px;line-height:1.5}
.why-us-list-wrap h2{margin:14px 0 30px;max-width:100%;white-space:nowrap}
@media (max-width:760px){.why-us-list-wrap h2{white-space:normal}}
html[lang="de"] .why-us-num-label{max-width:29ch}
.why-us-list{border-top:1px solid var(--line)}
.why-us-row{padding:26px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:220px 1fr;gap:24px}
.why-us-row h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.01em}
.why-us-row p{font-size:15px;color:var(--ink-soft);line-height:1.6}
@media (max-width:900px){
  .why-us-layout{grid-template-columns:1fr;gap:34px}
  .why-us-figure{position:static}
  .why-us-row{grid-template-columns:1fr;gap:8px}
}

/* Team grid */
.people-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:26px;row-gap:0;margin-top:48px}
.people-card{text-align:left;padding-bottom:6px}
.people-card:nth-child(4n+2),.people-card:nth-child(4n+4){margin-top:64px}
.people-photo{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:#F1F2F4;margin-bottom:16px;box-shadow:0 18px 34px -20px rgba(14,42,77,.3)}
.people-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.8,.32,1)}
.people-card:first-child .people-photo{box-shadow:0 24px 46px -20px rgba(14,42,77,.4)}
.people-card:hover .people-photo img{transform:scale(1.06)}
.people-meta{border-top:1px solid var(--line);padding-top:12px}
.people-card h5{font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;line-height:1.3;color:var(--ink);margin-bottom:5px}
.people-role{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);overflow-wrap:anywhere}
.people-role::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.people-card:first-child .people-role::before{background:var(--gold)}
.people-contact{margin-top:10px;display:flex;flex-direction:column;gap:3px}
.people-contact a{font-family:'Inter',sans-serif;font-size:12.5px;color:var(--ink-soft);text-decoration:none;transition:color .2s ease;overflow-wrap:anywhere}
.people-contact a:hover{color:var(--navy);text-decoration:underline}
@media (max-width:900px){
  .people-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}
  .people-card:nth-child(4n+2),.people-card:nth-child(4n+4){margin-top:0}
  .people-card:nth-child(3n+2){margin-top:52px}
}
@media (max-width:620px){
  .people-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:30px}
  .people-card:nth-child(3n+2){margin-top:0}
  .people-card:nth-child(2n){margin-top:40px}
}

/* Team section — signature blue treatment (deepened slightly from --blue for AA-readable white text), with the "Meet the team" eyebrow picked out in WG Promo pink */
#team{background:#0078B8}
#team .kicker .eyebrow{color:var(--green);text-shadow:0 2px 10px rgba(0,20,45,.5),0 1px 3px rgba(0,20,45,.6)}
#team .kicker h2{color:#fff}
#team .cri-section-sub{color:rgba(255,255,255,.92)}
html[lang="de"] #team .cri-section-sub{max-width:690px;white-space:nowrap}
@media (max-width:760px){html[lang="de"] #team .cri-section-sub{white-space:normal;max-width:640px}}
#team .people-photo{box-shadow:0 18px 34px -20px rgba(0,20,45,.5)}
#team .people-card:first-child .people-photo{box-shadow:0 24px 46px -20px rgba(0,20,45,.55)}
#team .people-meta{border-top-color:rgba(255,255,255,.3)}
#team .people-card h5{color:#fff}
#team .people-role{color:rgba(255,255,255,.92)}
#team .people-role::before{background:#fff}
#team .people-card:first-child .people-role::before{background:var(--gold)}
#team .people-contact a{color:rgba(255,255,255,.92)}
#team .people-contact a:hover{color:#fff}

/* Culture photo section — extra vertical air on the about page for a more editorial pause between sections */
#team-culture{padding:150px 0}
@media (max-width:900px){#team-culture{padding:96px 0}}
.culture-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center}
.culture-photo{border-radius:20px;overflow:hidden;box-shadow:0 25px 55px -25px rgba(14,42,77,.35)}
.culture-photo img{width:100%;height:100%;object-fit:cover;display:block}
.culture-text h2{margin:14px 0 16px}
.culture-text p:not(.eyebrow){color:var(--ink-soft);font-size:16px;line-height:1.6}
@media (max-width:900px){
  .culture-layout{grid-template-columns:1fr;gap:30px}
  .culture-photo{order:-1}
}

/* Import risk section — a playful "customs declaration" motif: a stamped, slightly-askew form card that visualises WG Promo taking on the import paperwork and risk */
.import-risk{background:var(--blue-tint);border-top:2px dashed rgba(144,192,0,.45);border-bottom:2px dashed rgba(144,192,0,.45);position:relative;overflow:hidden}
.import-risk-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.import-risk-text h2{margin-top:22px}
.import-risk-text .lede{margin:14px 0 16px;color:var(--ink-soft);font-size:16px;line-height:1.6;font-weight:400}
.import-risk-text .import-risk-body{color:var(--ink-soft);font-size:16px;line-height:1.6}
.import-risk-visual{display:flex;justify-content:center}
.customs-card{position:relative;background:#fff;border:1.5px dashed rgba(20,30,45,.28);border-radius:6px;padding:36px 34px 28px;width:100%;max-width:380px;transform:rotate(-1.6deg);box-shadow:0 30px 60px -28px rgba(14,42,77,.4)}
.customs-card-head{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);padding-bottom:6px}
.customs-card-no{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#B7BFCB;white-space:nowrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:20px}
.customs-checklist{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:13px}
.customs-checklist li{display:flex;align-items:center;gap:12px;font-family:'Archivo',sans-serif;font-weight:600;font-size:16px;color:var(--ink)}
.check-dot{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;font-weight:800}
.customs-card-foot{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.02em;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:14px}
.customs-stamp{position:absolute;top:-34px;right:-30px;width:148px;height:148px;transform:rotate(-13deg);pointer-events:none}
.customs-stamp svg{width:100%;height:100%;overflow:visible;mix-blend-mode:multiply;opacity:.9}
.stamp-ring{fill:none;stroke:var(--green);stroke-width:2.2}
.stamp-arc-text{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;fill:var(--green)}
.stamp-center-1,.stamp-center-2{font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;fill:var(--green)}
@media (max-width:900px){
  .import-risk-layout{grid-template-columns:1fr;gap:38px}
  .import-risk-visual{order:-1}
  .customs-card{max-width:340px}
}
@media (max-width:500px){
  .customs-card{padding:30px 24px 24px;transform:rotate(-1deg)}
  .customs-stamp{width:118px;height:118px;top:-24px;right:-16px}
}

/* ===== About page hero (fundraising-style, single image, no button) ===== */
.hero.fr-hero-split .hero-left{min-width:0}
html[lang="de"] .about-hero .hero-left p.lede{max-width:46ch}
/* Fix: hero text block was vertically re-centering within the row when German copy ran taller/shorter than English, making it visibly shift between languages. Top-align this hero's two columns instead so the text always starts at the same position regardless of language. */
#top.about-hero .wrap{align-items:flex-start}
/* The hero image itself sits inset within its 560px-tall visual box (centered at 75% height, per .cri-hero-visual-single), so top-aligning the columns alone left the text sitting above the image's actual top edge. Push the text down by that same inset (70px = (560-420)/2) so the eyebrow lines up with the top of the image, not the top of its container. */
@media (min-width:901px){
  .about-hero .hero-left{padding-top:70px}
}

/* ===== Sustainability hero — exactly the homepage hero card (same height, heading + lede at the top, button at the bottom); the photo spans the full width =====
   The photo (aspect 1672:941) sits as low as the card allows but never higher than the text clearance, so the products stay below the heading and lede
   (the button may overlap the table surface at the bottom). Tablet / phone stack text → photo → button. */
.sus-hero{--home-h:clamp(520px,calc(100vh - 52px),900px);--ih:calc((100vw - 48px) / 1.7768)}
.sus-hero .home-hero-inner{height:var(--home-h);min-height:0;max-height:none;background:linear-gradient(90deg,#F3E6D7 0%,#F8EEE1 55%,#FCF7EC 100%)}
.sus-hero .home-hero-inner img{inset:auto 0 auto 0;top:max(calc(var(--home-h) - var(--ih)),calc(236px - var(--ih) * .292));width:100%;height:var(--ih);object-fit:fill;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%);mask-image:linear-gradient(180deg,transparent 0,#000 15%)}
.sus-hero .home-hero-full-content{padding:102px 24px 24px}
.sus-hero .btn-row{margin:0}
.sus-hero h1{margin:0 auto}
.sus-hero .lede{white-space:normal;max-width:940px;margin:18px auto 0;text-wrap:balance}
.sus-hero-line{display:inline}
@media (max-width:1000px){
  .sus-hero .home-hero-inner{height:auto;display:flex;flex-direction:column}
  .sus-hero .home-hero-inner::before{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(90deg,#DFCDBE 0%,#E4D0BF 55%,#F5E8DB 100%)}
  .sus-hero .home-hero-full-content{display:contents}
  .sus-hero .home-hero-top{order:1;position:relative;z-index:1;padding:104px 22px 0;box-sizing:border-box}
  .sus-hero h1{white-space:normal;font-size:clamp(28px,6vw,44px)}
  .sus-hero .lede{max-width:780px;font-size:16px}
  .sus-hero .home-hero-inner img{order:2;position:relative;inset:auto;top:auto;height:auto;width:100%;margin-top:-3%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 92%,transparent 100%)}
  .sus-hero .btn-row{order:3;position:relative;z-index:1;align-self:center;padding:0 0 34px;margin-top:-4px}
}
@media (max-width:760px){.sus-hero .home-hero-top{padding:96px 18px 0}.sus-hero .home-hero-inner img{margin-top:-1%}.sus-hero .btn-row{padding-bottom:28px}}

/* ===== Sustainability page — sections below the hero =====
   --sus-h = the regular section-headline size used on the other pages (clamp(26px,3vw,34px)); --sus-p = hero supporting text size (17px). */
:root{--sus-h:clamp(26px,3vw,34px);--sus-p:17px}
   Natural palette (cream / sand / cork) around the existing brand blue; green and pink appear only as small accents. */
.sus-intro,.sus-wall,.sus-approach,.sus-materials2,.sus-pack,.sus-quality,.sus-journey,.sus-promise,.sus-fund{--sus-cream:#FBF6EE;--sus-sand:#F3EADB;--sus-cork:#B98A55}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sus-head h2,.sus-split-head h2,.sus-pack-text h2,.sus-journey-text h2,.sus-fund-text h2{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:var(--sus-h);line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin-top:14px}
.sus-small-note{font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin-top:16px;max-width:52ch}
.sus-split-head{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:end}
.sus-split-head p:not(.eyebrow):not(.sus-small-note){font-size:var(--sus-p);color:var(--ink-soft);line-height:1.65}
@media (max-width:900px){.sus-split-head{grid-template-columns:1fr;gap:22px}}
@media (min-width:901px){.sus-materials2 .sus-split-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}}

/* 01 — Introduction */
.sus-intro{background:var(--sus-cream);padding:112px 0 88px}
.sus-intro-head{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"eb eb" "h cp";column-gap:64px;row-gap:22px;align-items:end}
.sus-br{display:block}
@media (max-width:640px){.sus-br{display:inline}}
.sus-intro-head .eyebrow{grid-area:eb}
.sus-intro-head h2{grid-area:h;font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:var(--sus-h);line-height:1.08;letter-spacing:-.015em;color:var(--ink)}
.sus-intro-copy{grid-area:cp;font-size:var(--sus-p);line-height:1.65;color:var(--ink-soft);margin:0}
.sus-triad{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.sus-triad-item{border-top:3px solid var(--ink);padding-top:20px}
.sus-t-blue{border-top-color:var(--blue)}.sus-t-green{border-top-color:var(--green)}.sus-t-pink{border-top-color:var(--pink)}
.sus-triad-n{display:block;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:14px}
.sus-triad-t{display:block;font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(20px,2.2vw,28px);line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.sus-triad-item:nth-child(2){transition-delay:.12s}.sus-triad-item:nth-child(3){transition-delay:.24s}
@media (max-width:900px){.sus-intro{padding:84px 0 72px}.sus-intro-head{grid-template-columns:1fr;grid-template-areas:"eb" "h" "cp";align-items:start}.sus-triad{grid-template-columns:1fr;gap:30px;margin-top:44px}}

/* 02 — Statement wall: one readable, prominent statement framed by faded type rows that drift (and slide slightly with scroll) */
.sus-wall{position:relative;background:var(--navy);color:#fff;padding:88px 0 84px;overflow:hidden}
.sus-wall-stage{position:relative}
.sus-wall-row{--sx:0;display:block;transform:translate3d(calc(var(--sx) * 1px),0,0);will-change:transform;font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(23px,3.84vw,60px);line-height:1.06;letter-spacing:-.02em;white-space:nowrap;user-select:none}
.sus-wall-track{display:flex;width:max-content}
.sus-wall-stage.is-ready .sus-wall-track{animation:susWall var(--dur,100s) linear infinite}
.sus-wall-stage.is-ready .sus-wall-row[data-dir="1"] .sus-wall-track{animation-direction:reverse}
.sus-wall-stage.is-ready .is-ghost .sus-wall-track{animation-duration:calc(var(--dur,100s) * 1.4)}
@keyframes susWall{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.sus-wall-unit{display:inline-flex;align-items:center;flex:none}
.sus-wall-unit>span+span{margin-left:.26em}
.sus-wall-sep{font-style:normal;font-size:.18em;margin:0 .9em;opacity:.55;letter-spacing:0}
.sus-wall-row.is-ghost{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.26)}
.sus-wall-row.is-dim{color:rgba(255,255,255,.17)}
.sus-wall-main{position:relative;z-index:1;margin:clamp(22px,3.4vw,46px) auto;padding:0 24px;max-width:1220px;text-align:center;font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(20px,3.96vw,60px);line-height:1;letter-spacing:-.03em;color:#fff}
.sus-wall-main:not(:first-child){margin-top:clamp(22px,3.4vw,46px)}
.sus-wall-line{display:block}
.sus-wall-key{color:var(--green)}
.sus-wall-coaster{position:absolute;right:clamp(6px,4vw,80px);top:66%;width:clamp(86px,13vw,196px);aspect-ratio:1;border-radius:9%;background:#C99F6B url(images/mat-cork.jpg) center/cover;box-shadow:0 34px 50px -22px rgba(0,0,0,.6),inset 0 0 0 3px rgba(255,255,255,.12),inset 0 -10px 18px rgba(60,35,10,.25);transform:translateY(-50%) translateY(calc(var(--cy,0) * 1px)) rotate(calc(10deg + var(--rot,0) * 1deg));display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
.sus-wall-coaster img{width:68%;height:auto;mix-blend-mode:multiply;opacity:.82}
.sus-wall-copy{margin-top:70px;text-align:center}
.sus-wall-copy p{max-width:none;margin:0 auto;font-size:var(--sus-p);line-height:1.6;color:#EAF5FD}
@media (prefers-reduced-motion:reduce){.sus-wall-stage.is-ready .sus-wall-track{animation:none}.sus-wall-row{transform:none}}
@media (max-width:760px){.sus-wall{padding:64px 0 60px}.sus-wall-copy{margin-top:46px}.sus-wall-row{font-size:clamp(18px,5.4vw,28px)}.sus-wall-coaster{top:auto;bottom:-20px;right:8px;width:58px}.sus-wall-main{font-size:clamp(17px,5.16vw,29px);line-height:1.04}.sus-wall-line{display:inline}.sus-wall-line.sus-wall-key{display:block}}

/* 03 — Approach / interactive chain */
.sus-approach{background:#fff;padding:120px 0 112px}
.sus-head{max-width:980px}
.sus-chain2{position:relative;margin-top:88px}
.sus-chain2-rail{position:absolute;left:0;right:0;top:11px;height:2px;background:var(--line)}
.sus-chain2-fill{display:block;height:100%;width:0;background:var(--blue);transition:width 1.4s cubic-bezier(.4,0,.2,1)}
.sus-chain2-list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.sus-step{position:relative;padding:52px 30px 0 0}
.sus-step-dot{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #BFD0E0;transition:background .5s ease,border-color .5s ease,box-shadow .5s ease}
.sus-step-num{display:block;font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(56px,7vw,104px);line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px #C4D3E2;transition:color .6s ease,-webkit-text-stroke-color .6s ease}
.sus-step-tag{display:block;margin:20px 0 10px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);transition:color .5s ease}
.sus-step h3{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(17px,1.45vw,21px);white-space:nowrap;line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin-bottom:10px}
.sus-step p{font-size:15.5px;line-height:1.55;color:var(--ink-soft);max-width:26ch}
.sus-step.lit .sus-step-dot{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 7px rgba(0,144,224,.16)}
.sus-step.lit .sus-step-num{color:var(--blue);-webkit-text-stroke-color:var(--blue)}
.sus-step.lit .sus-step-tag{color:var(--blue)}
html[lang="de"] .sus-step h3{font-size:clamp(15px,1.2vw,18px)}
@media (max-width:860px){
  .sus-approach{padding:84px 0 76px}
  .sus-chain2{margin-top:52px}
  .sus-chain2-rail{left:11px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .sus-chain2-fill{width:100%;height:0;transition:height 1s cubic-bezier(.4,0,.2,1)}
  .sus-chain2-list{grid-template-columns:1fr;row-gap:44px}
  .sus-step{padding:0 0 0 52px}
  .sus-step-dot{top:8px}
  .sus-step-num{font-size:60px}
  .sus-step h3{font-size:clamp(17px,5vw,22px)}
  html[lang="de"] .sus-step h3{font-size:clamp(15px,4.4vw,19px)}
  .sus-step p{max-width:none}
}

/* 04 — Material library */
.sus-materials2{background:#E8EBEF;color:var(--ink);padding:116px 0 112px}
.sus-materials2 .sus-split-head h2{color:var(--ink)}
.sus-materials2 .eyebrow{color:var(--blue)}
.sus-lib-wrap{max-width:1440px;margin:64px auto 0;padding:0 24px}
.sus-lib{display:flex;gap:14px;align-items:flex-end;height:560px}
.sus-tile{position:relative;flex:1 1 0;min-width:0;border:0;padding:0;border-radius:22px;overflow:hidden;cursor:pointer;color:#fff;text-align:left;font:inherit;transition:flex-grow .6s cubic-bezier(.4,0,.2,1),box-shadow .4s ease;isolation:isolate;box-shadow:0 18px 40px -26px rgba(60,40,10,.5)}
.sus-tile:nth-child(1){height:100%}.sus-tile:nth-child(2){height:88%}.sus-tile:nth-child(3){height:96%}.sus-tile:nth-child(4){height:82%}
.sus-tile.is-open{flex-grow:2.7}
.sus-tile:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.sus-tile-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;transition:transform 1.1s ease}
.sus-tile.is-open .sus-tile-bg{transform:scale(1.05)}
.sus-tile-bg-split i{position:absolute;inset:0;background-size:cover;background-position:center}
.sus-tile-bg-split i:first-child{clip-path:polygon(0 0,100% 0,100% 40%,0 64%)}
.sus-tile-bg-split i:last-child{clip-path:polygon(0 64%,100% 40%,100% 100%,0 100%)}
.sus-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,12,4,0) 30%,rgba(20,12,4,.78) 100%)}
.sus-tile-paper::after,.sus-tile-textile::after{background:linear-gradient(180deg,rgba(20,12,4,0) 22%,rgba(20,12,4,.8) 100%)}
.sus-tile-idx{position:absolute;top:20px;left:22px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;color:#fff;background:rgba(20,12,4,.35);backdrop-filter:blur(4px);padding:4px 9px;border-radius:20px}
.sus-tile-body{position:absolute;left:0;right:0;bottom:0;padding:26px 26px 28px;display:block}
.sus-tile-kicker{display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.9;margin-bottom:8px}
.sus-tile-title{display:block;font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(19px,1.9vw,27px);line-height:1.12;letter-spacing:-.018em;overflow-wrap:break-word;hyphens:auto}
html[lang="de"] .sus-tile-title{font-size:clamp(17px,1.55vw,23px)}
.sus-tile-more{display:block;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s cubic-bezier(.4,0,.2,1),opacity .5s ease .1s}
.sus-tile.is-open .sus-tile-more{max-height:260px;opacity:1}
.sus-tile-ex{display:block;font-size:14.5px;line-height:1.5;margin-top:14px;max-width:44ch}
.sus-tile-chip{display:flex;align-items:center;gap:11px;margin-top:16px}
.sus-tile-chip img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.8);background:#fff}
.sus-tile-chip em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;opacity:.85}
@media (max-width:900px){
  .sus-materials2{padding:84px 0 76px}
  .sus-lib-wrap{padding:0;margin-top:44px}
  .sus-lib{height:auto;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:6px 22px 18px;-webkit-overflow-scrolling:touch}
  .sus-tile,.sus-tile:nth-child(n){flex:0 0 min(80vw,330px);height:470px;scroll-snap-align:center}
  .sus-tile.is-open{flex-grow:0}
  .sus-tile .sus-tile-more{max-height:260px;opacity:1}
  }

/* 05 — Packaging & PPWR */
.sus-pack{background:var(--blue-tint);padding:116px 0 104px}
.sus-pack-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:72px;align-items:center}
.sus-pack-text p:not(.eyebrow){font-size:var(--sus-p);line-height:1.65;color:var(--ink-soft);margin-top:18px;max-width:54ch}
.sus-pack-text .sus-lead{font-size:var(--sus-p);font-weight:600;color:var(--ink);line-height:1.4}
.sus-ideas{list-style:none;margin-top:34px;border-top:1px solid var(--line)}
.sus-ideas li{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.sus-ideas b{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.sus-ideas li:nth-child(1) b{color:var(--blue)}.sus-ideas li:nth-child(2) b{color:var(--green-dark)}.sus-ideas li:nth-child(3) b{color:var(--pink)}
.sus-ideas span{font-size:15px;color:var(--ink-soft);line-height:1.5}
.sus-compare-stage{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:1200/895;box-shadow:0 36px 70px -34px rgba(70,45,10,.5);touch-action:pan-y;cursor:ew-resize;--pos:50%;background:#EFE5D3;user-select:none}
.sus-compare-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.sus-compare-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.sus-compare-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.25)}
.sus-compare-knob{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -6px rgba(0,0,0,.4)}
.sus-compare-tag{position:absolute;bottom:14px;background:rgba(255,255,255,.92);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:20px;max-width:46%}
.sus-compare-tag.is-l{left:14px}.sus-compare-tag.is-r{right:14px}
.sus-compare-range{display:block;width:100%;margin:18px 0 0;accent-color:var(--blue);cursor:ew-resize}
.sus-compare-note{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink-soft);margin-top:10px;line-height:1.5}
.sus-ppwr{margin-top:72px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.55)}
.sus-ppwr summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 30px}
.sus-ppwr summary::-webkit-details-marker{display:none}
.sus-ppwr-sum{display:flex;flex-direction:column;gap:4px}
.sus-ppwr-sum span{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:800;font-size:21px;color:var(--ink);letter-spacing:-.015em}
.sus-ppwr-sum .sus-ppwr-eb{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
.sus-ppwr-sum small{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:.02em}
.sus-ppwr-plus{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink)}
.sus-ppwr-plus::before,.sus-ppwr-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .25s ease}
.sus-ppwr-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.sus-ppwr[open] .sus-ppwr-plus::after{transform:translate(-50%,-50%) rotate(0)}
.sus-ppwr summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:22px}
.sus-ppwr-body{display:grid;grid-template-columns:auto 1fr;gap:20px 40px;padding:6px 30px 32px;align-items:start}
.sus-ppwr-logo{width:104px;height:auto;margin-top:6px}
.sus-ppwr-body dl{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}
.sus-ppwr-body dt{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.sus-ppwr-body dd{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.sus-ppwr-foot{grid-column:1/-1;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.6;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:18px}
@media (max-width:900px){
  .sus-pack{padding:84px 0 72px}
  .sus-pack-layout{grid-template-columns:1fr;gap:44px}
  .sus-ideas li{grid-template-columns:1fr;gap:4px}
  .sus-ppwr-body{grid-template-columns:1fr}
  .sus-ppwr-body dl{grid-template-columns:1fr;gap:20px}
  .sus-ppwr{margin-top:52px}
  .sus-ppwr summary{padding:20px 20px}
  .sus-ppwr-body{padding:4px 20px 26px}
}

/* 06 — Quality, testing & EU compliance */
.sus-quality{background-color:#fff;background-image:linear-gradient(rgba(0,94,146,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,94,146,.045) 1px,transparent 1px);background-size:36px 36px;padding:116px 0 112px}
.sus-tabs{margin-top:64px}
.sus-tablist{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:18px 18px 0 0;overflow:hidden;background:#fff}
.sus-tab{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;padding:22px 24px;background:#fff;border:0;border-right:1px solid var(--line);cursor:pointer;font:inherit;color:var(--ink);transition:background .25s ease,color .25s ease}
.sus-tab:last-child{border-right:0}
.sus-tab:hover{background:var(--blue-tint)}
.sus-tab:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.sus-tab-code{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(22px,2.8vw,36px);letter-spacing:-.02em;line-height:1}
.sus-tab-sub{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);line-height:1.4}
.sus-tab.is-active{background:var(--navy);color:#fff}
.sus-tab.is-active .sus-tab-sub{color:#BFE2F8}
.sus-panel{border:1px solid var(--line);border-top:0;border-radius:0 0 18px 18px;background:#fff;padding:40px 36px 34px}
.sus-panel[hidden]{display:none}
.sus-panel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.sus-panel-grid>div{padding:0 32px;border-left:1px solid var(--line)}
.sus-panel-grid>div:first-child{padding-left:0;border-left:0}
.sus-panel-k{display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.sus-panel-grid p{font-size:var(--sus-p);line-height:1.5;color:var(--ink)}
.sus-more{margin-top:30px;border-top:1px solid var(--line);padding-top:18px}
.sus-more summary{cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);list-style:none}
.sus-more summary::-webkit-details-marker{display:none}
.sus-more summary::before{content:"+ ";}
.sus-more[open] summary::before{content:"– "}
.sus-more p{margin-top:14px;font-size:15px;line-height:1.65;color:var(--ink-soft);max-width:82ch}
#panel-test .sus-more p{max-width:none}
@media (max-width:900px){
  .sus-quality{padding:84px 0 76px}
  .sus-tabs{margin-top:44px}
  .sus-tablist{grid-template-columns:1fr 1fr}
  .sus-tab{padding:16px 16px;border-bottom:1px solid var(--line)}
  .sus-tab:nth-child(2){border-right:0}
  .sus-tab:nth-child(3),.sus-tab:nth-child(4){border-bottom:0}
  .sus-panel{padding:28px 22px 24px}
  .sus-panel-grid{grid-template-columns:1fr;gap:22px}
  .sus-panel-grid>div,.sus-panel-grid>div:first-child{padding:0;border-left:0}
  .sus-panel-grid p{font-size:var(--sus-p)}
}

/* 07 — Responsible importing & logistics */
.sus-journey{background:var(--sus-sand);padding:116px 0 104px}
.sus-journey-head{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:center}
.sus-journey-text p:not(.eyebrow){font-size:var(--sus-p);line-height:1.65;color:var(--ink-soft);margin-top:18px;max-width:56ch}
.sus-journey-text p:nth-of-type(2){font-size:var(--sus-p);font-weight:600;color:var(--ink);line-height:1.45}
.sus-journey-photo{background:#fff;padding:12px 12px 36px;border-radius:6px;box-shadow:0 30px 56px -28px rgba(70,45,10,.5);transform:rotate(3deg);justify-self:center;max-width:430px;width:100%}
.sus-journey-photo-in{display:block;overflow:hidden;aspect-ratio:4/3;background:#fff}
.sus-journey-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;transform:scale(1.55)}
.sus-route{position:relative;margin-top:88px}
.sus-route-track{position:relative}
.sus-route-line{position:absolute;top:27px;left:10%;right:10%;height:2px;background:repeating-linear-gradient(90deg,#BFA982 0 7px,transparent 7px 14px)}
.sus-route-fill{display:block;height:100%;width:0;background:var(--blue);transition:width 2.2s cubic-bezier(.4,0,.2,1)}
.sus-route.is-in .sus-route-fill{width:100%}
.sus-route-list{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.sus-route-list li{text-align:center;padding:0 12px}
.sus-route-node{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto 18px;border-radius:50%;background:#fff;border:2px solid #CDBA96;color:var(--blue);transition:background .5s ease,color .5s ease,border-color .5s ease;transition-delay:calc(var(--i) * .42s)}
.sus-route-node svg{width:25px;height:25px}
.sus-route.is-in .sus-route-node{background:var(--blue);border-color:var(--blue);color:#fff}
.sus-route-list b{display:block;font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.015em;color:var(--ink);margin-bottom:6px}
.sus-route-list li>span:last-child{display:block;font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:22ch;margin:0 auto}
.sus-route-team{display:flex;align-items:center;gap:18px;margin-top:40px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.sus-route-team::before,.sus-route-team::after{content:"";flex:1;height:1px;background:#BFA982}
.sus-feats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px}
.sus-feats li{border-top:2px solid var(--ink);padding-top:16px}
.sus-feats b{display:block;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.sus-feats span{font-size:16px;line-height:1.5;color:var(--ink-soft)}
.sus-legal-note{margin-top:40px;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.65;color:var(--ink-soft);max-width:none}
@media (prefers-reduced-motion:reduce){.sus-route-fill{transition:none}.sus-route-node{transition:none}.sus-chain2-fill{transition:none}}
@media (max-width:900px){
  .sus-journey{padding:84px 0 72px}
  .sus-journey-head{grid-template-columns:1fr;gap:40px}
  .sus-journey-photo{max-width:320px;transform:rotate(2deg)}
  .sus-route{margin-top:56px}
  .sus-route-line{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:repeating-linear-gradient(180deg,#BFA982 0 7px,transparent 7px 14px)}
  .sus-route-fill{width:100%;height:0;transition:height 2.2s cubic-bezier(.4,0,.2,1)}
  .sus-route.is-in .sus-route-fill{width:100%;height:100%}
  .sus-route-list{grid-template-columns:1fr;row-gap:28px}
  .sus-route-list li{display:grid;grid-template-columns:56px 1fr;column-gap:20px;text-align:left;padding:0;align-items:center}
  .sus-route-node{grid-row:1/3;margin:0}
  .sus-route-list li>span:last-child{max-width:none;margin:0}
  .sus-route-team{margin-top:34px}
  .sus-feats{grid-template-columns:1fr;gap:26px;margin-top:48px}
}

/* 08 — Transparency: full-bleed brand-blue moment */
.sus-promise{background:var(--blue);color:#fff;padding:136px 0 128px}
.sus-promise .eyebrow.on-dark{color:#fff;opacity:.85}
.sus-promise h2{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(32px,4.2vw,56px);line-height:1.06;letter-spacing:-.02em;color:#fff;margin:18px 0 34px;max-width:none}
.sus-promise-copy{font-size:var(--sus-p);font-weight:500;line-height:1.5;color:#fff;max-width:none}
.sus-promise-statement{margin-top:76px;border-top:2px solid rgba(255,255,255,.55);padding-top:30px}
.sus-promise-statement p{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(32px,4.2vw,56px);line-height:1.08;letter-spacing:-.02em;color:#fff}
.sus-promise-statement p:nth-child(2){transition-delay:.12s}
.sus-promise-statement p.is-soft{font-family:'Inter',sans-serif;font-weight:500;font-size:var(--sus-p);letter-spacing:0;line-height:1.5;margin-top:26px;max-width:none;transition-delay:.24s}
@media (max-width:760px){.sus-promise{padding:88px 0 80px}.sus-promise-statement{margin-top:52px}}

/* 09 — Fundraising callout (short, asymmetrical) */
.sus-fund{background:var(--sus-cream);padding:104px 0}
.sus-fund-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.sus-fund-text p:not(.eyebrow){font-size:var(--sus-p);line-height:1.65;color:var(--ink-soft);margin-top:18px;max-width:48ch}
.sus-fund-text h2{font-size:var(--sus-h)}
.sus-link{display:inline-block;margin-top:28px;font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:16px;color:var(--navy);border-bottom:2px solid var(--blue);padding-bottom:3px;transition:color .2s ease,border-color .2s ease}
.sus-link:hover{color:var(--pink);border-color:var(--pink)}
.sus-fund-btn{margin-top:30px;font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:16px;padding:16px 30px}
.sus-fund-photo{position:relative;margin:0;justify-self:end;width:100%;max-width:560px}
.sus-fund-photo::before{content:"";position:absolute;inset:34px -26px -26px 34px;background:var(--blue-tint);border-radius:30px 30px 30px 140px;z-index:0}
.sus-fund-photo img{position:relative;z-index:1;width:100%;aspect-ratio:6/5;object-fit:cover;border-radius:30px 30px 30px 140px;box-shadow:0 34px 60px -32px rgba(14,42,77,.45)}
@media (max-width:860px){.sus-fund{padding:76px 0}.sus-fund-layout{grid-template-columns:1fr;gap:56px}.sus-fund-photo{justify-self:center;max-width:480px}.sus-fund-photo::before{inset:24px -12px -16px 24px}}


/* ===== Fundraising page — editorial rework (frx-) =====
   Same visual language as the Sustainability page: Archivo section headlines at the site size (--sus-h), 17px body (--sus-p),
   cream / sand / navy / brand-blue colour blocks, mono labels, outline numerals, scroll-driven progress. Hero is untouched. */
.frx-split h2,.frx-stack-head h2{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:var(--sus-h);line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin-top:14px}
.frx-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
.frx-split h2,.frx-closing{text-wrap:balance}
.frx-split-copy p{font-size:var(--sus-p);line-height:1.65;color:var(--ink-soft)}
.frx-split-copy p+p{margin-top:10px}
@media (max-width:900px){.frx-split{grid-template-columns:1fr;gap:22px}}

.frx-method,#more-than-gift.frx-method{max-width:960px;margin:56px auto 0;padding:0}
/* the quote box that opens the donor-moments section */
.frx-quote-col .pull-quote{margin:0 0 16px}
.frx-quote-col .pull-quote>span:first-child{color:rgba(22,28,38,.5);font-weight:500}
@media (min-width:900px){.frx-quote-col .pull-quote>span:first-child{display:block;margin-bottom:12px}.frx-quote-col .pull-quote strong.quote-line2,.frx-quote-col .pull-quote strong.quote-line3{display:inline;margin:0}.frx-quote-col .pull-quote strong.quote-line3{margin-left:.28em}}

/* 02 — Statement wall (Thank · Connect · Remember): the Sustainability wall, with the three words as the statement */
.frx-wall-main{position:relative;z-index:1;margin:clamp(24px,3.6vw,52px) auto;padding:0 24px;max-width:1220px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.12em .5em;font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(30px,4vw,56px);line-height:1;letter-spacing:-.03em}
html[lang="de"] .frx-wall-main{font-size:clamp(30px,4vw,56px)}
.frx-wall-word{color:#fff}
.frx-wall-main .fr-band-dot-wrap{display:inline-flex}
.frx-wall-main .fr-band-dot{height:.3em;width:auto}
@media (max-width:760px){
  .frx-wall-main{flex-direction:column;gap:.1em;font-size:clamp(34px,11vw,56px)}
  html[lang="de"] .frx-wall-main{font-size:clamp(34px,11vw,56px)}
  .frx-wall-main .fr-band-dot-wrap{display:none}
}

/* 03 — Why donor gifts work: split headline, expanding photo row, three principles, closing line */
.frx-why{background:#fff;padding:112px 0 104px}
.frx-stack-head .frx-split-copy{margin-top:18px;max-width:none}
@media (min-width:901px){.frx-stack-head .frx-split-copy p{display:inline;white-space:nowrap}.frx-stack-head .frx-split-copy p+p{margin:0 0 0 .4em}}
@media (min-width:901px){.frx-stack-head h2{white-space:nowrap}}
.frx-gal-wrap{margin-top:56px;margin-bottom:0}
.frx-gal{display:flex;gap:14px;align-items:flex-end;height:440px}
.frx-fig{margin:0;flex:1 1 0;min-width:0;border-radius:22px;overflow:hidden;background:#EEF1F5;box-shadow:0 18px 40px -26px rgba(14,42,77,.45);transition:flex-grow .6s cubic-bezier(.4,0,.2,1)}
.frx-fig:nth-child(1){height:100%}.frx-fig:nth-child(2){height:88%}.frx-fig:nth-child(3){height:96%}.frx-fig:nth-child(4){height:82%}
.frx-fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s ease}
.frx-gal:not(:hover):not(:focus-within) .frx-fig:first-child,.frx-fig:hover,.frx-fig:focus{flex-grow:2.7}
.frx-fig:hover img,.frx-fig:focus img{transform:scale(1.05)}
.frx-fig:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.frx-triad{margin-top:76px}
.frx-triad .sus-triad-n{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:800;font-size:var(--sus-h);line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin-bottom:10px}
.frx-triad .sus-triad-t{font-family:'Inter',sans-serif;font-weight:400;font-size:16px;line-height:1.55;letter-spacing:0;color:var(--ink-soft);margin:0}
.frx-closing.pull-quote{max-width:820px;margin:76px auto 0;text-align:left}
.frx-closing-dim{display:block;color:rgba(22,28,38,.5);font-weight:500}
.frx-closing-key{display:block;margin-top:12px}
@media (max-width:900px){
  .frx-why{padding:84px 0 76px}
  .frx-gal-wrap{margin-top:40px}
  .frx-gal{height:auto;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:6px 0 18px;-webkit-overflow-scrolling:touch}
  .frx-fig,.frx-fig:nth-child(n){flex:0 0 min(78vw,320px);height:420px;scroll-snap-align:center}
  .frx-triad{margin-top:52px}
  .frx-closing.pull-quote{margin-top:52px;padding:22px 22px}
}

/* 04 — Reciprocity: the original two-card layout on a light grey ground */
.frx-recip,#dg-reciprocity.frx-recip{background:#EEF1F5;padding:96px 0 88px}
@media (max-width:760px){#dg-reciprocity.frx-recip{padding:72px 0 64px}}
@media (prefers-reduced-motion:reduce){.frx-fig,.frx-fig img{transition:none}}

/* 05 — Donor moments: four approaches as an editorial index (title · what it does · example photo) */
.frx-moments{background:#fff;padding:112px 0 100px}
.frx-center-head{max-width:840px;margin:0 auto;text-align:center}
.frx-center-head h2{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:var(--sus-h);line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin-top:14px}
.frx-center-head p:not(.eyebrow){font-size:var(--sus-p);line-height:1.65;color:var(--ink-soft);margin-top:16px}
.frx-appr-list{list-style:none;margin:56px 0 0;padding:0;border-bottom:1px solid var(--line)}
.frx-appr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) 270px;gap:48px;align-items:center;padding:34px 0;border-top:1px solid var(--line);transition:background .35s ease}
.frx-appr::before{content:"";position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.frx-a-green::before{background:var(--green)}.frx-a-pink::before{background:var(--pink)}.frx-a-navy::before{background:var(--navy)}
.frx-appr:hover::before,.frx-appr:focus-within::before{transform:scaleX(1)}
.frx-appr-title h4{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(20px,2vw,27px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);transition:color .3s ease,transform .4s cubic-bezier(.3,.7,.2,1)}
.frx-appr:hover .frx-appr-title h4{color:var(--blue);transform:translateX(8px)}
.frx-a-green:hover .frx-appr-title h4{color:var(--green-dark)}.frx-a-pink:hover .frx-appr-title h4{color:var(--pink)}.frx-a-navy:hover .frx-appr-title h4{color:var(--navy)}
.frx-appr-text .obj{font-size:var(--sus-p);line-height:1.45;font-weight:600;color:var(--ink);max-width:none;margin-bottom:8px}
.frx-appr-text .ex{font-size:15.5px;line-height:1.55;color:var(--ink-soft);max-width:none}
.frx-appr-img{height:210px;border-radius:18px;overflow:hidden;background:#EEF1F5;box-shadow:0 20px 38px -26px rgba(14,42,77,.5);transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.frx-appr:hover .frx-appr-img{transform:rotate(-1.6deg) scale(1.05)}
.frx-appr-img img{display:block;width:100%;height:100%;object-fit:cover}
.frx-appr:nth-child(4) .frx-appr-img img{object-position:50% 38%}
.frx-appr:nth-child(2){transition-delay:.06s}.frx-appr:nth-child(3){transition-delay:.12s}.frx-appr:nth-child(4){transition-delay:.18s}
.frx-links{display:flex;flex-wrap:wrap;gap:14px 16px;justify-content:flex-end;margin-top:36px}
.frx-links .btn svg{width:18px;height:18px;flex:none}
.frx-link{display:inline-flex;align-items:center;gap:10px;font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--blue);text-decoration:none;padding-bottom:4px;border-bottom:2px solid currentColor;transition:color .25s ease,gap .25s ease}
.frx-link:hover,.frx-link:focus-visible{color:var(--navy);gap:16px}
html[lang="de"] .frx-split-moments .de-break{display:inline}
.frx-center-head p .de-break,html[lang="de"] .frx-center-head p .de-break{display:block}
@media (prefers-reduced-motion:reduce){.frx-appr,.frx-appr::before,.frx-appr-img,.frx-appr-title h4{transition:none}}
@media (max-width:980px){
  .frx-appr{grid-template-columns:minmax(0,1fr) 220px;gap:20px 32px}
  .frx-appr-title{grid-column:1/-1}
  .frx-appr-img{grid-column:2;grid-row:2;height:160px}
  .frx-appr-text{grid-column:1;grid-row:2}
}
@media (max-width:640px){
  .frx-moments{padding:80px 0 72px}
  .frx-appr-list{margin-top:44px}
  .frx-appr{grid-template-columns:1fr;gap:16px;padding:28px 0}
  .frx-appr-img,.frx-appr-text{grid-column:1;grid-row:auto}
  .frx-appr-img{height:200px}
  .frx-links{justify-content:flex-start;margin-top:28px}
}

/* 06 — Built for fundraising realities: centred navy intro, light-blue spec list with ticks that complete on scroll, closing statement */
.frx-real-head{text-align:center;margin-bottom:76px}
.frx-real-head .eyebrow{display:block}
.frx-real-head h2{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:var(--sus-h);line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin:14px auto 0;max-width:none;text-wrap:balance}
.frx-real-support{font-size:var(--sus-p);line-height:1.65;color:var(--ink-soft);margin:16px auto 0;max-width:74ch}
@media (min-width:1000px){html:not([lang="de"]) .frx-real-support{max-width:none;white-space:nowrap}}
.frx-real-micro{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:10px 22px 10px 14px;border-radius:999px;background:#EAF6C8;border:2px solid var(--green);font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:18px;letter-spacing:-.01em;color:#4C6600;transform:rotate(-1.5deg)}
.frx-real-micro::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--green-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.frx-real-body{background:var(--blue-tint);padding:104px 0 96px}
.frx-real-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:84px;align-items:center}
.frx-real-photo{position:relative;margin:0;justify-self:center;width:100%;max-width:440px}
.frx-real-photo::before{content:"";position:absolute;left:4%;right:-2%;bottom:-12px;height:34px;background:radial-gradient(ellipse at center,rgba(14,42,77,.34),rgba(14,42,77,0) 68%);filter:blur(7px);z-index:0}
.frx-real-photo img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 22px 20px rgba(14,42,77,.22))}
.frx-checks{list-style:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:44px}
.frx-checks li{position:relative;padding:22px 0 26px 46px;border-top:2px solid var(--ink)}
.frx-checks h5{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:21px;letter-spacing:-.015em;color:var(--ink);margin-bottom:6px}
.frx-checks p{font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.frx-tick{position:absolute;left:0;top:24px;width:26px;height:26px;border-radius:50%;border:2px solid #B7C8D8;background:#fff;transition:background .45s ease,border-color .45s ease;transition-delay:calc(var(--i) * .12s + .35s)}
.frx-tick::after{content:"";position:absolute;left:8px;top:3.5px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .3s ease;transition-delay:calc(var(--i) * .12s + .6s)}
.frx-checks li.in .frx-tick{background:var(--green-dark);border-color:var(--green-dark)}
.frx-checks li.in .frx-tick::after{transform:rotate(45deg) scale(1)}
.frx-real-final{margin-top:0;text-align:center}
.frx-real-final-text{margin-top:88px;padding-top:56px;border-top:2px solid rgba(0,94,146,.2);font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:var(--sus-h);line-height:1.15;letter-spacing:-.015em}
.frx-real-final-text .line1{display:block;color:var(--ink-soft)}
.frx-real-final-text .line2{display:block;color:var(--blue)}
@media (prefers-reduced-motion:reduce){.frx-tick,.frx-tick::after{transition:none}}
@media (max-width:900px){
  .frx-real-head{margin-bottom:52px}
  .frx-real-body{padding:72px 0}
  .frx-real-grid{grid-template-columns:1fr;gap:64px}
  .frx-real-photo{max-width:340px}
  .frx-real-final-text{margin-top:60px;padding-top:40px}
}
@media (max-width:620px){.frx-checks{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}}

html[lang="de"] .frx-chain .de-break,html[lang="de"] .frx-split-moments .de-break{display:inline}

/* ===== Campaign Ideas — "From ready-made to completely custom." (crx-) =====
   The Sustainability progress chain: a rail that fills as each stage scrolls in, with photos that grow from ready-made to fully custom. */
.crx-brief{background:#fff;padding:112px 0 112px}
.crx-head h2{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:var(--sus-h);line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin-top:14px}
@media (min-width:901px){.crx-head h2{white-space:nowrap}}
.crx-head-copy{margin-top:16px}
.crx-head-copy p{font-size:var(--sus-p);line-height:1.65;color:var(--ink-soft);max-width:760px}
.crx-chain{margin-top:84px}
.crx-chain .sus-chain2-list{grid-template-columns:repeat(3,1fr);column-gap:40px}
@media (min-width:861px){
  /* rail runs from the first to the last point only; each point sits centred above its photo */
  .crx-chain .sus-chain2-rail{left:calc((100% - 80px) / 6);right:calc((100% - 80px) / 6)}
  .crx-chain .sus-step-dot{left:50%;margin-left:-12px}
}
.crx-step{padding:52px 0 0}
.crx-img{margin-bottom:0;border:0;border-radius:22px;background:#fff;box-shadow:0 24px 44px -28px rgba(60,40,10,.55)}
.crx-img img{transition:transform 1s ease}
.crx-step:hover .crx-img img{transform:scale(1.05)}
.crx-step:nth-child(1) .crx-img{aspect-ratio:5/4}
.crx-step:nth-child(2) .crx-img{aspect-ratio:1/1}
.crx-step:nth-child(3) .crx-img{aspect-ratio:4/5}
.crx-step .sus-step-num{margin-top:22px;font-size:clamp(26px,3vw,44px)}
.crx-step h4{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(18px,1.55vw,22px);line-height:1.15;letter-spacing:-.015em;color:var(--ink);margin:8px 0 8px}
.crx-step p{font-size:15.5px;line-height:1.55;color:var(--ink-soft);max-width:none}
@media (max-width:860px){
  .crx-brief{padding:84px 0 76px}
  .crx-chain{margin-top:52px}
  .crx-chain .sus-chain2-list{grid-template-columns:1fr}
  .crx-step{padding:0 0 0 52px}
  .crx-step:nth-child(n) .crx-img{aspect-ratio:4/3;max-width:420px}
  .crx-step .sus-step-num{font-size:30px}
}

/* ===== Contact page (ctx-) — one calm section: intro and direct details left, a simple form right ===== */
.ctx{background:#fff;padding:150px 0 110px}
.ctx-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.ctx-intro .eyebrow{margin-bottom:14px}
.ctx-intro h1{font-size:clamp(34px,4.4vw,54px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);max-width:14em;text-wrap:balance}
.ctx-intro .lede{font-size:var(--sus-p);line-height:1.65;color:var(--ink-soft);max-width:46ch;margin-top:20px}
.ctx-direct{margin-top:56px;padding-top:34px;border-top:2px solid var(--ink)}
.ctx-direct h2{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:var(--sus-h);line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin-top:12px}
.ctx-lines{list-style:none;margin-top:22px;display:grid;gap:14px}
.ctx-lines li{display:flex;align-items:flex-start;gap:14px;font-size:var(--sus-p);line-height:1.5;color:var(--ink)}
.ctx-lines svg{flex:none;margin-top:2px;color:var(--blue)}
.ctx-form{display:flex;flex-direction:column;gap:14px;background:var(--blue-tint);border:1px solid #CFE6F5;border-radius:26px;padding:36px;box-shadow:0 30px 60px -40px rgba(0,94,146,.4)}
.ctx-form input,.ctx-form textarea{width:100%;background:#fff;border:1px solid #CFE6F5;border-radius:12px;padding:15px 16px;color:var(--ink);font-family:'Inter',sans-serif;font-size:15px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.ctx-form input::placeholder,.ctx-form textarea::placeholder{color:#8A94A6}
.ctx-form input:focus,.ctx-form textarea:focus{outline:none;background:#fff;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,144,224,.14)}
.ctx-form textarea{resize:vertical;min-height:170px}
.ctx-form .btn{align-self:flex-start;border:none;cursor:pointer;margin-top:6px}
@media (max-width:900px){.ctx{padding:120px 0 80px}.ctx-grid{grid-template-columns:1fr;gap:56px}.ctx-direct{margin-top:44px}}
@media (max-width:520px){.ctx-form{padding:24px 20px;border-radius:22px}}
html[lang="de"] .ctx-intro h1{font-size:clamp(30px,3.6vw,46px)}

/* Sustainability — centred closing lines under Materials / Quality */
.sus-after-line{text-align:center;max-width:980px;margin:48px auto 0;font-size:var(--sus-p);line-height:1.6;color:var(--ink-soft)}
.sus-quality .sus-after-line{margin-top:44px}
@media (max-width:760px){.sus-after-line{margin-top:34px}}
@media (min-width:1200px){.sus-materials2 .sus-after-line{max-width:none;white-space:nowrap;font-size:clamp(15px,1.1vw,16.5px)}}

/* Campaign Ideas — "Why promotional products work" (crx-why) */
.crx-why{background:#FBF6EE;padding:120px 0 116px}
.crx-why-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.crx-why-head{position:sticky;top:120px}
.crx-why-head h2{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:var(--sus-h);line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin-top:14px;text-wrap:balance}
.crx-why-list{list-style:none;margin:0;padding:0}
.crx-why-item{position:relative;display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:start;padding:34px 0 38px;border-top:1px solid #DCCFBA}
.crx-why-item::before{content:"";position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.3,.7,.2,1) .15s}
.crx-why-item.crx-w-green::before{background:var(--green)}
.crx-why-item.crx-w-pink::before{background:var(--pink)}
.crx-why-item.in::before{transform:scaleX(1)}
.crx-why-item:last-child{border-bottom:1px solid #DCCFBA}
.crx-why-n{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(48px,5.4vw,80px);line-height:.9;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px #C4D3E2;min-width:1.55em;transition:color .7s ease .3s,-webkit-text-stroke-color .7s ease .3s}
.crx-why-item.in .crx-why-n{color:var(--blue);-webkit-text-stroke-color:var(--blue)}
.crx-why-item.crx-w-green.in .crx-why-n{color:var(--green);-webkit-text-stroke-color:var(--green)}
.crx-why-item.crx-w-pink.in .crx-why-n{color:var(--pink);-webkit-text-stroke-color:var(--pink)}
.crx-why-item h4{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:clamp(22px,2.2vw,28px);line-height:1.1;letter-spacing:-.015em;color:var(--ink);margin:4px 0 10px}
.crx-why-item p{font-size:var(--sus-p);line-height:1.6;color:var(--ink-soft);max-width:52ch}
.crx-why-item:nth-child(2){transition-delay:.12s}.crx-why-item:nth-child(3){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.crx-why-item::before{transform:scaleX(1);transition:none}.crx-why-n{transition:none}}
@media (max-width:900px){
  .crx-why{padding:84px 0 76px}
  .crx-why-grid{grid-template-columns:1fr;gap:40px}
  .crx-why-head{position:static}
}
@media (max-width:560px){.crx-why-item{grid-template-columns:1fr;gap:12px}.crx-why-n{font-size:44px}}


/* ============ SITE FOOTER (4 columns, light blue) ============ */
.site-footer{background:var(--blue-tint);color:var(--ink);border-top:1px solid #CFE6F5;padding:72px 0 26px;font-size:15px}
.sf-grid{display:grid;grid-template-columns:1.3fr .9fr 1.15fr 1.05fr;gap:56px}
.sf-col{min-width:0}
.sf-logo{display:inline-block}
.sf-logo img{height:50px;width:auto;display:block}
.sf-tag{margin:18px 0 22px;color:var(--ink-soft);line-height:1.6;max-width:34ch;font-size:15px}
.sf-social{display:flex;gap:12px}
.sf-social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--navy);border:1px solid #CFE6F5;transition:background .2s ease,color .2s ease,transform .2s ease}
.sf-social a:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.sf-social svg{width:19px;height:19px;display:block}
.site-footer h4{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin:6px 0 20px}
.sf-col ul{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.sf-col ul a{color:var(--ink);text-decoration:none;transition:color .2s ease}
.sf-col ul a:hover,.sf-contact a:hover{color:var(--blue)}
.sf-contact address{font-style:normal;display:flex;flex-direction:column;gap:3px;color:var(--ink-soft);line-height:1.55}
.sf-contact address strong{color:var(--ink);font-weight:600;margin-bottom:3px}
.sf-contact address a{color:var(--navy);font-weight:500}
.sf-contact address a:first-of-type{margin-top:14px}
.sf-bottom{margin-top:56px;padding-top:22px;border-top:1px solid #CFE6F5;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-soft)}
.sf-bottom p{margin:0}
.sf-top{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:#fff;border:1px solid #CFE6F5;color:var(--navy);font-weight:600;text-decoration:none;font-size:13.5px;transition:background .2s ease,color .2s ease}
.sf-top:hover{background:var(--navy);color:#fff}
@media (max-width:980px){.sf-grid{grid-template-columns:1fr 1fr;gap:44px 40px}}
@media (max-width:560px){.site-footer{padding:56px 0 24px}.sf-grid{grid-template-columns:1fr;gap:36px}.sf-bottom{margin-top:40px;flex-direction:column;align-items:flex-start}}

/* ============ SITEMAP PAGE ============ */
.sitemap{padding:64px 0 96px}
.sm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:52px 56px}
.sm-group h2{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:20px;letter-spacing:-.01em;margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--blue)}
.sm-group ul{list-style:none;margin:0;padding:0}
.sm-group li{border-bottom:1px solid var(--line)}
.sm-group a{display:block;padding:11px 0;color:var(--ink-soft);text-decoration:none;font-size:15.5px;transition:color .2s ease,padding-left .2s ease}
.sm-group a:hover{color:var(--blue);padding-left:6px}
@media (max-width:900px){.sm-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sm-grid{grid-template-columns:1fr;gap:40px}}

/* ============ CONSENT CHECKBOX (all forms) ============ */
.consent{display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.55;color:var(--ink-soft);cursor:pointer;text-align:left}
.consent input[type=checkbox],.form .consent input,.ctx-form .consent input,.quote-card .consent input{flex:none;width:18px;height:18px;min-width:18px;margin:2px 0 0;padding:0;border-radius:4px;accent-color:var(--blue);cursor:pointer}
.consent a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:var(--blue)}
.form .consent{color:#C7D6EA}
.form .consent a{color:#fff}
.form .consent a:hover{color:#BFE3FA}
.quote-card .consent{margin:4px 0 18px}
.ctx-form .consent{margin-top:2px}


/* ============ LEGAL PAGES (Impressum, Datenschutz, AGB) ============ */
.legal .inner{overflow-wrap:break-word;hyphens:auto}
.legal h2{margin:38px 0 10px}
.legal h3{font-family:'Archivo',Helvetica,Arial,sans-serif;font-weight:700;font-size:15.5px;letter-spacing:-.005em;color:var(--ink);margin:20px 0 6px}
.legal p,.legal li{color:var(--ink-soft);font-size:15px;line-height:1.7}
.legal p{margin-bottom:10px}
.legal ul{margin:6px 0 14px;padding-left:22px}
.legal li{margin-bottom:6px}
.legal a{color:var(--navy);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;hyphens:none}
.legal a:hover{color:var(--blue)}
.legal-links{list-style:none;padding-left:0}
.legal-lines{line-height:1.8}
.legal-note{font-size:13.5px;color:var(--ink-soft);background:var(--blue-tint);border-left:3px solid var(--blue);border-radius:0 10px 10px 0;padding:12px 16px;margin-bottom:32px}
.legal-note:empty{display:none}


/* ---- Round 20 tweaks ---- */
/* consent spacing */
.quote-card .consent{margin:24px 0 8px}
.tellus .consent{margin:6px 0 8px}
.tellus .quote-actions{margin-top:22px}
.form .consent{margin:14px 0 18px}
.ctx-form .consent{margin:12px 0 18px}
/* homepage: swap section backgrounds */
.home-journey{background:var(--blue-tint)}
.home-journey .sus-route-line{background:repeating-linear-gradient(90deg,#9CC4E0 0 7px,transparent 7px 14px)}
.home-journey .sus-route-team::before,.home-journey .sus-route-team::after{background:#9CC4E0}
@media (max-width:760px){.home-journey .sus-route-line{background:repeating-linear-gradient(180deg,#9CC4E0 0 7px,transparent 7px 14px)}}
.home-import{background:#EDF0F4}
/* footer: bigger logo, CTA button, local SVG icons */
.sf-logo img{height:78px}
.sf-brand .sf-social{margin-top:26px}
.sf-social img{width:19px;height:19px;display:block;transition:filter .2s ease}
.sf-social a:hover img{filter:brightness(0) invert(1)}
.sf-cta{margin-top:20px;gap:10px;font-size:15px;padding:13px 24px}
.sf-contact .sf-cta{color:#fff}
.sf-contact .sf-cta:hover{color:#fff}

/* long German labels (e.g. "Vertrauen") must not be clipped by the loop SVG */
.loop-ring,.mini-loop{overflow:visible}
.sus-wall-copy p{text-wrap:balance}

/* Fundraising "Product ideas for every donor moment" — EN supporting line on a single line (centered on the heading, may be wider than the 840px heading column) */
@media (min-width:1100px){
  html[lang="en"] .frx-center-head p:not(.eyebrow){width:calc(100vw - 64px);max-width:none;margin-left:calc((840px - (100vw - 64px)) / 2);white-space:nowrap;font-size:min(var(--sus-p),calc((100vw - 64px) / 66))}
  html[lang="en"] .frx-center-head p .de-break{display:inline}
}

/* Sustainability — round 23 tweaks */
html[lang="de"] .sus-intro-head h2{position:relative;top:-15px}
@media (max-width:900px){html[lang="de"] .sus-intro-head h2{top:0}}
.sus-more p{max-width:none}
@media (min-width:761px){.sus-promise-copy{white-space:nowrap;font-size:min(var(--sus-p),calc((100vw - 100px) / 70))}}
html[lang="de"] .crx-why-head h2{white-space:pre-line}
html[lang="de"] .crx-head-copy p{white-space:pre-line}

/* Contact page — German heading and intro on two lines (heading may reach a little into the column gap) */
@media (min-width:901px){
  html[lang="de"] .ctx-intro h1{white-space:pre-line;max-width:none;margin-right:-70px}
  html[lang="de"] .ctx-intro .lede{max-width:100%;text-wrap:balance}
}

/* Homepage cycle (German, phones): keep the long label "Unterstützung" inside the screen without resizing the graphic */
@media (max-width:560px){html[lang="de"] .why .mini-loop{width:86%}html[lang="de"] .why .mini-loop .loop-label{font-size:10px;letter-spacing:0}}

/* Round 24 — one-line / two-line fits (desktop) */
@media (min-width:1000px){
  .frx-real-support{max-width:none;white-space:nowrap}
  html[lang="de"] .crx-head-copy p{max-width:none;white-space:pre;font-size:min(var(--sus-p),calc((100vw - 120px) / 56))}
}
@media (min-width:1000px){
  html[lang="de"] #browse .cri-section-sub{max-width:none;white-space:nowrap;font-size:min(16px,calc((100vw - 100px) / 69))}
}

/* =====================================================================
   MOBILE REFINEMENT — phones only (≤760px). Nothing here applies to desktop.
   ===================================================================== */
@media (max-width:760px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:15px;line-height:1.55}

  /* ---- type scale ---- */
  h1{font-size:clamp(25px,7vw,29px)!important;line-height:1.12!important;letter-spacing:-.015em}
  h2{font-size:clamp(21px,5.8vw,24px)!important;line-height:1.18!important}
  h3{font-size:clamp(17px,4.8vw,19px)!important;line-height:1.22!important}
  .lede{font-size:15.5px!important;line-height:1.55!important}
  .eyebrow,[class*="eyebrow"]{font-size:11px;letter-spacing:.1em}

  /* ---- section rhythm: tighter vertical padding ---- */
  .doors,.quote,.why,.whyus,.contact,.fr-section,.loop-section,
  .crx-brief,.crx-why,.frx-why,.frx-moments,.frx-real,
  .sus-intro,.sus-approach,.sus-materials2,.sus-pack,.sus-quality,.sus-journey,.sus-promise,.sus-fund{
    padding-top:52px!important;padding-bottom:52px!important}
}

@media (max-width:760px){
  /* ---- homepage hero: compact card, side-by-side buttons ---- */
  .home-hero-full:not(.sus-hero) .home-hero-inner{height:clamp(500px,76svh,620px)!important;min-height:0}
  .home-hero-full:not(.sus-hero) .home-hero-inner img{object-position:30% 55%}
  .home-hero-full:not(.sus-hero) .home-hero-full-content{padding:88px 20px 22px}
  .home-hero-full .btn-row{gap:10px!important;flex-wrap:wrap;justify-content:center}
  .home-hero-full .btn-row .btn{padding:12px 20px;font-size:14.5px}
}
@media (max-width:760px){
  /* cycle graphic: leave room for the side labels so they are not clipped */
  .why .mini-loop{width:88%;margin-left:auto;margin-right:auto}
}
@media (max-width:760px){
  /* ---- oversized display numbers & statements ---- */
  .sus-step-num{font-size:38px!important}
  .crx-why-n{font-size:34px!important}
  .mtag-num{font-size:38px!important}
  .why-us-num{font-size:60px!important}
  .big .num,.big{font-size:26px}
  .sus-triad-n{font-size:22px!important}
  .big-statement{font-size:22px!important;line-height:1.25!important}
  .frx-real-final-text .line1,.frx-real-final-text .line2{font-size:21px!important}
  .frx-wall-word{font-size:34px!important}
  .sus-promise-statement{margin-top:34px!important;padding-top:22px!important}
  .sus-promise-statement p{font-size:23px!important;line-height:1.15!important}
  .sus-promise-statement p.is-soft{font-size:15.5px!important;line-height:1.55!important;margin-top:18px}

  /* ---- campaign cycle: room for side labels ---- */
  .loop-wrap{padding-left:34px;padding-right:34px;box-sizing:border-box}
  .loop-ring{overflow:visible}
  #cycle .loop-label,.loop-label{font-size:9.5px}
}
@media (max-width:760px){
  /* ---- inner-page hero blocks ---- */
  .hero.fr-hero-split{padding-top:92px!important;padding-bottom:36px!important}
  .hero.fr-hero-split .wrap{gap:26px!important}
  .hero-left .lede{margin-bottom:22px!important}
  .fr-hero-visual,.cri-hero-visual-single{margin-top:0!important}
  .fr-hero-visual{height:300px!important}
  .cri-hero-visual-single{height:auto!important;min-height:0!important}
  .hero.fr-hero-split{padding-top:100px!important}
  .ctx{padding-top:96px!important;padding-bottom:56px!important}

  /* ---- footer: compact, two link columns ---- */
  .site-footer{padding:44px 0 22px!important}
  .sf-grid{grid-template-columns:1fr 1fr!important;gap:30px 20px!important}
  .sf-brand,.sf-contact{grid-column:1 / -1}
  .sf-logo img{height:56px!important}
  .sf-brand .sf-social{margin-top:18px!important}
  .site-footer h4{margin:0 0 12px!important}
  .sf-col ul{gap:10px!important}
  .sf-bottom{margin-top:28px!important}

  /* ---- forms ---- */
  .form textarea,form textarea{min-height:104px!important;height:104px}
  .form,form{--fld:44px}
  .form input,.form select,.form textarea{font-size:16px} /* avoids iOS zoom-on-focus */
}
@media (max-width:760px){
  /* forced desktop line breaks in German copy flow naturally on phones */
  html[lang="de"] .de-break,html[lang="de"] .frx-center-head p .de-break{display:inline!important}
  html[lang="de"] .crx-why-head h2,html[lang="de"] .crx-head-copy p,html[lang="de"] .ctx-intro h1{white-space:normal!important;max-width:none}
  html[lang="de"] .ctx-intro h1{margin-right:0!important}
}
@media (max-width:760px){
  .cri-tabs{flex-wrap:wrap!important;overflow:visible!important;gap:8px!important;margin-top:24px!important;margin-bottom:22px!important;padding-bottom:0!important}
  .cri-tab{padding:8px 14px!important;font-size:13px!important}
}

/* Mobile / tablet menu (where the hamburger is shown, ≤980px): readable, tappable panel */
@media (max-width:980px){
  nav .wrap.mobile-menu-links{height:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:6px 22px 22px;box-sizing:border-box}
  .mobile-menu{background:var(--paper);border-top:1px solid var(--line);border-radius:0 0 22px 22px;box-shadow:0 22px 40px -18px rgba(14,42,77,.35);max-height:calc(100vh - 78px);max-height:calc(100dvh - 78px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mobile-menu-links a{display:flex;align-items:center;min-height:50px;padding:0!important;font-size:17px!important;font-weight:500;opacity:1}
  .mobile-menu-links a.navcta{justify-content:center;min-height:50px;margin-top:16px!important;border-bottom:0;font-size:16px!important}
  nav:has(.mobile-menu.open){background:var(--paper)!important;border-bottom-color:var(--line)!important}
}
@media (max-width:980px){
  nav .wrap.mobile-menu-links .navcta{display:flex;width:100%;box-sizing:border-box}
}
@media (max-width:760px){ nav.nav-transparent{top:0!important} }
@media (max-width:760px){
  .page-hero{padding:96px 0 26px!important}
  .legal{padding-top:36px!important;padding-bottom:56px!important}
}
@media (max-width:360px){
  .home-hero-full:not(.sus-hero) .home-hero-inner{height:clamp(540px,80svh,640px)!important}
  .home-hero-full:not(.sus-hero) .home-hero-inner img{object-position:30% 30%}
}

/* Round 25 */
.brk{white-space:pre-line}
.import-risk-text h2,.culture-text h2,.why-us-list-wrap h2{font-size:clamp(26px,3vw,34px)}
.door-eyebrow{max-width:none!important}
@media (min-width:1001px){.door-eyebrow{white-space:nowrap}}
@media (max-width:760px){
  .import-risk-text h2,.culture-text h2,.why-us-list-wrap h2{font-size:clamp(21px,5.8vw,24px)!important}
}

/* ===== Phone refinement round (phone only, desktop untouched) ===== */
@media (max-width:760px){
  body{font-size:14.5px;line-height:1.55}
  h1{font-size:clamp(23px,6.3vw,27px)!important;line-height:1.14;letter-spacing:-.015em}
  h2{font-size:clamp(19.5px,5.3vw,22px);line-height:1.2;letter-spacing:-.01em}
  h3{font-size:clamp(16px,4.4vw,17.5px)}
  .lede{font-size:15px;line-height:1.55}
  p{line-height:1.58}
  .eyebrow{font-size:10.5px;letter-spacing:.12em}
  .doors,.quote,.why,.whyus,.contact,.fr-section,.loop-section,.crx-brief,.crx-why,.frx-why,.frx-moments,.frx-real,.sus-intro,.sus-approach,.sus-materials2,.sus-pack,.sus-quality,.sus-journey,.sus-promise,.sus-fund{padding-top:42px;padding-bottom:42px}
  .btn{padding:12px 22px;font-size:14px;min-height:44px;justify-content:center}
  .form .btn,.ctx-form .btn{align-self:stretch}
  /* Trusted-by carousel: compact chips, steady pace on a narrow screen */
  .marquee-track{gap:14px;animation-duration:30s}
  .logo-chip{height:56px;padding:8px 18px;border-radius:12px}
  .logo-chip img{max-height:32px;max-width:120px}
  .marquee{mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  /* Product grid: tighter, smaller captions */
  .cri-product-card h4,.cri-product-card h3{font-size:14px}
  .cri-product-card .cri-product-tags{font-size:11.5px;line-height:1.4}
}

/* Phone: hero supporting text reads as one flowing paragraph */
@media (max-width:760px){
  .home-hero-top .lede{text-wrap:balance;max-width:34ch;margin-left:auto;margin-right:auto}
  .home-hero-top .lede span{display:inline!important}
}
@media (max-width:760px){
  .home-hero-full:not(.sus-hero) .home-hero-inner{height:clamp(570px,84svh,690px)!important}
}
@media (max-width:360px){
  .home-hero-full:not(.sus-hero) .home-hero-inner{height:clamp(620px,88svh,720px)!important}
}

/* ===== Phone-only copy & line-break adjustments (desktop untouched) ===== */
.m-only{display:none}
.m-brk{white-space:normal}
@media (max-width:760px){
  .d-only{display:none!important}
  .m-only{display:inline}
  .m-brk{white-space:pre-line}
  /* Sustainability: remove closing paragraph under the giveaway wall on phones */
  .sus-wall-copy{display:none}
  /* "No greenwashing. / Just better decisions." on separate lines */
  .sus-promise h2 .sus-br{display:block}
  /* German: "Die besten / Werbegeschenke sind / die, die bleiben." */
  html[lang="de"] .sus-wall-line:first-child{display:block}
  /* German home hero headline on one line, supporting text kept clear of the product */
  html[lang="de"] .home-hero-full:not(.sus-hero) .home-hero-top h1{white-space:nowrap;margin-left:-8px;margin-right:-8px;font-size:min(27px,calc((100vw - 58px) / 15.4))!important}
  /* Anchor targets sit just below the fixed navigation */
  [id]{scroll-margin-top:78px}
}
@media (max-width:760px){
  /* Fundraising: question box and its note are desktop-only */
  .frx-method .frx-quote-col{display:none}
}