/* =========================================================
   Beautiful Minds Network — stylesheet
   Design tokens
   ink     — near-black warm text colour
   paper   — warm off-white background
   rose    — primary brand colour (from the logo mark)
   violet  — secondary brand colour (from the logo mark)
   sand    — warm neutral for section banding
   line    — hairline border colour

   Breakpoint scale used throughout (max-width, mobile-first cascade):
   1180px  large desktop -> laptop
   1024px  laptop -> tablet landscape
   960px   nav switches to the mobile menu
   860px   two-column sections start stacking
   720px   compact section padding / type
   560px   phones
   400px   small phones
   ========================================================= */
:root{
  --ink:        #171827;
  --ink-soft:   #555866;
  --paper:      #FCFBF9;
  --paper-dim:  #F6F3F0;
  --rose:       #C51E63;
  --rose-deep:  #9F124D;
  --rose-tint:  #FBEAF1;
  --violet:     #4D358F;
  --violet-deep:#38266E;
  --violet-tint:#F0ECFA;
  --sand:       #F1E8D8;
  --line:       #E8E3DF;
  --line-soft:  #EEEAE7;
  --white:      #FFFFFF;

  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1280px;
  --gutter: clamp(20px, 5vw, 48px);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --shadow-sm: 0 7px 20px rgba(23,24,39,.05);
  --shadow-md: 0 14px 34px rgba(23,24,39,.08);
  --shadow-lg: 0 24px 60px rgba(23,24,39,.14);

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* NOTE: deliberately not setting overflow-x:hidden on html/body — on mobile
   browsers that breaks position:fixed children (like the mobile nav panel and
   the WhatsApp button), causing them to render clipped/behind page content.
   Individual components are sized with max-width:100% instead. */
html{ max-width: 100%; }

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:700; letter-spacing:-.03em; margin:0; line-height:1.1; }
p{ margin: 0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }
input, textarea{ font: inherit; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

.skip-link{
  position:absolute; left:-9999px; top:auto; background: var(--ink); color:#fff;
  padding: 12px 18px; z-index: 1200; text-decoration:none; font-size:13px; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; top: 0; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

/* touch-friendly tap targets everywhere */
a, button{ -webkit-tap-highlight-color: rgba(197,30,99,.15); }

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.eyebrow::before{
  content:"";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--rose);
  display:inline-block;
  flex-shrink: 0;
}
.eyebrow.on-dark{ color: #F7B6D1; }
.eyebrow.on-dark::before{ background:#F7B6D1; }

/* the little face-line squiggle from the logo mark */
.squiggle{ display:block; width:56px; height:18px; margin: 0 0 18px; opacity:.9; }
.squiggle path{ fill:none; stroke: var(--violet); stroke-width:2.4; stroke-linecap:round; }
.squiggle.center{ margin-inline: auto; }
.squiggle.rose path{ stroke: var(--rose); }

/* =========================================================
   NAV
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(23,24,39,.07);
  box-shadow: 0 2px 16px rgba(23,24,39,.03);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
  padding: 12px var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  min-height: 72px;
}
.nav-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
.nav-brand img{ height: 42px; width:auto; flex-shrink:0; }
.nav-brand-text{ font-size: 15.5px; font-weight:700; color: var(--ink); line-height:1.2; letter-spacing:-.02em; }
.nav-brand-text small{ display:block; font-weight:500; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft); }

.nav-links{ display:flex; align-items:center; gap: 28px; }
.nav-links a{
  text-decoration:none; font-size: 14px; font-weight:500; color: #33343f;
  position:relative; padding: 8px 0; white-space: nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; border-radius:2px;
  background: var(--rose); transform: scaleX(0); transform-origin:left;
  transition: transform .25s var(--ease);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after{ transform: scaleX(1); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:14px;
  padding: 12px 22px; border-radius: 10px; text-decoration:none;
  border: 1px solid transparent; cursor:pointer; white-space:nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn-primary{ background: var(--rose); color:#fff; box-shadow: 0 8px 18px rgba(197,30,99,.18); }
.btn-primary:hover{ background: var(--rose-deep); transform: translateY(-1px); box-shadow: 0 11px 24px rgba(197,30,99,.24); }
.btn-ghost{ background:transparent; color: var(--ink); border-color: #D9D5D2; }
.btn-ghost:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }
.btn-on-violet{ background:#fff; color: var(--violet); }
.btn-on-violet:hover{ background: var(--sand); }
.btn:active{ transform: translateY(1px); }
.btn-sm{ padding: 10px 16px; font-size:13.5px; }

.nav-cta{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
  width: 40px; height: 40px; align-items:center; justify-content:center; flex-direction:column;
  border-radius: 8px;
}
.nav-toggle:hover{ background: rgba(23,24,39,.05); }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:3px 0; border-radius:2px; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 960px){
  .nav-links{
    position:fixed; top: 68px; left:0; right:0; bottom:0;
    z-index: 500;
    background: #fff;
    flex-direction:column; align-items:stretch; gap:0;
    padding: 8px var(--gutter) 28px;
    transform: translateY(-8px); opacity:0; pointer-events:none; visibility:hidden;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    border-top: 1px solid var(--line);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 68px);
    height: calc(100dvh - 68px);
  }
  .nav-links.open{
    opacity:1; transform:none; pointer-events:auto; visibility:visible;
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav-links a{ width:100%; padding: 16px 0; border-bottom:1px solid var(--line-soft); font-size:15px; }
  .nav-links a::after{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-cta .btn-ghost, .nav-cta .btn-primary{ display:none; }
}
@media (max-width: 420px){
  .nav-brand-text{ display:none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  display:grid; grid-template-columns: .95fr 1.05fr; align-items:center;
  gap: 48px;
  max-width: var(--container);
  margin: 0 auto;
  min-height: 620px;
  padding: 32px var(--gutter) 56px;
}
.hero-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding: 24px 0;
  min-width: 0;
}
.hero-copy h1{
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 68px);
  max-width: 12ch;
  color: var(--ink);
  letter-spacing: -.04em;
}
.hero-copy h1 em{ font-style:normal; color: var(--rose); }
.hero-lede{
  margin-top: 22px; font-size: clamp(15px, 1.6vw, 17px); color: var(--ink-soft);
  max-width: 50ch; line-height:1.75;
}
.hero-actions{ display:flex; align-items:center; gap:20px; margin-top:30px; flex-wrap:wrap; }
.hero-link{ font-size:14px; font-weight:600; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:2px; }

.hero-visual{
  position:relative; overflow:hidden; background: var(--sand);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3.4;
}
.hero-visual img{ width:100%; height:100%; object-fit:cover; }
.hero-caption{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(0deg, rgba(24,26,34,.78), rgba(24,26,34,0));
  color:#fff; padding: 56px 20px 16px; font-size:11.5px; font-weight:500; letter-spacing:.02em;
}

@media (max-width: 1024px){
  .hero{ gap: 34px; min-height:auto; }
}
@media (max-width: 860px){
  .hero{
    grid-template-columns: 1fr; gap: 30px;
    padding: 24px var(--gutter) 48px;
  }
  .hero-visual{ order:-1; aspect-ratio: 16/10; }
  .hero-copy{ padding: 8px 0 0; }
  .hero-copy h1{ max-width: 14ch; }
}
@media (max-width: 480px){
  .hero{ padding: 18px 16px 40px; }
  .hero-copy h1{ font-size: clamp(30px, 9.5vw, 44px); max-width: 12ch; }
  .hero-lede{ font-size:15px; }
  .hero-visual{ border-radius: var(--radius-md); aspect-ratio: 4/3.4; }
  .hero-actions{ flex-direction:column; align-items:stretch; gap:12px; }
  .hero-actions .btn, .hero-actions .hero-link{ text-align:center; justify-content:center; }
}

/* =========================================================
   SECTION SHELLS
   ========================================================= */
section{ padding: 108px 0; }
section.tight{ padding: 76px 0; }
.section-head{ max-width: 700px; margin-bottom: 52px; }
.section-head h2{ font-size: clamp(28px, 3.6vw, 46px); line-height:1.15; }
.section-head p{ margin-top:16px; font-size: clamp(14.5px, 1.4vw, 16px); color: var(--ink-soft); max-width: 58ch; line-height:1.75; }
.bg-sand{ background: var(--sand); }
.bg-ink{ background: var(--ink); color: #EDEAE2; }
.bg-ink h2, .bg-ink h3{ color:#fff; }
.bg-ink .section-head p{ color: #C7C4BC; }
.bg-violet{ background: var(--violet); color:#F1EDFA; }
.bg-violet h2, .bg-violet h3{ color:#fff; }

@media (max-width: 720px){
  section{ padding: 68px 0; }
  section.tight{ padding: 52px 0; }
  .section-head{ margin-bottom: 36px; }
}

/* =========================================================
   ABOUT — "The Brief" editorial Q&A layout
   ========================================================= */
.brief{ border-top:1px solid var(--line); }
.brief-row{
  display:grid; grid-template-columns: 190px 1fr; gap: 44px;
  padding: 32px 0; border-bottom: 1px solid var(--line);
}
.brief-row .term{
  font-size: 15px; font-weight:700; color: var(--rose);
}
.brief-row .desc{ font-size: 15.5px; line-height:1.75; color: var(--ink-soft); max-width: 64ch; }
.brief-row .desc strong{ color: var(--ink); font-weight:700; }
@media (max-width: 680px){
  .brief-row{ grid-template-columns: 1fr; gap:8px; padding: 24px 0; }
}

.pull{
  margin-top: 52px; display:grid; grid-template-columns: 280px 1fr; gap: 44px; align-items:center;
}
.pull img{ border-radius: var(--radius-md); box-shadow: var(--shadow-md); width:100%; aspect-ratio: 4/3; object-fit:cover; }
.pull blockquote{
  margin:0; font-style:normal; font-weight:400;
  font-size: clamp(16px, 1.6vw, 19px); line-height:1.6; color: var(--ink);
  border-left: 3px solid var(--rose); padding-left: 26px;
}
.pull cite{ display:block; margin-top:16px; font-style:normal; font-size:12.5px; color: var(--ink-soft); line-height:1.6; }
@media (max-width: 700px){
  .pull{ grid-template-columns: 1fr; gap:24px; margin-top:36px; }
  .pull img{ aspect-ratio: 16/9; max-height:280px; }
}

/* =========================================================
   METHODS — numbered enumerated list
   ========================================================= */
.methods-list{ border-top:1px solid var(--line-soft); }
.method{
  display:grid; grid-template-columns: 72px 1fr; align-items:baseline;
  padding: 24px 0; border-bottom:1px solid var(--line-soft);
}
.method .num{ font-size:12.5px; font-weight:700; color: var(--rose); }
.method h4{ font-size: 18px; font-weight:700; letter-spacing:-.02em; }
.method p{ margin: 6px 0 0; color: var(--ink-soft); max-width: 60ch; font-size:14.5px; line-height:1.7; }
@media (max-width: 560px){
  .method{ grid-template-columns: 1fr; gap:6px; padding:20px 0; }
  .method .num{ display:none; }
}

/* =========================================================
   FLAGSHIP PROJECT — KIKAWA callout
   ========================================================= */
.flagship{
  margin-bottom: 52px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
  color: #fff;
  padding: 44px 48px;
  box-shadow: 0 20px 50px rgba(197,30,99,.2);
}
.flagship-tag{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background: rgba(255,255,255,.18); padding: 6px 14px; border-radius: 999px; margin-bottom:16px;
}
.flagship h3{ color:#fff; font-size: clamp(24px, 2.8vw, 34px); }
.flagship p{ margin-top:14px; max-width: 62ch; font-size:15.5px; line-height:1.75; color: #FBE1EB; }
.flagship .btn{ margin-top:22px; }
@media (max-width: 620px){
  .flagship{ padding: 30px 26px; border-radius: var(--radius-md); }
  .flagship .btn{ width:100%; text-align:center; justify-content:center; }
}

/* =========================================================
   PROGRAMS — alternating image/text rows
   ========================================================= */
.program{
  display:grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items:center;
  padding: 52px 0; border-bottom:1px solid var(--line);
}
.program:first-child{ padding-top:0; }
.program:last-child{ border-bottom:none; }
.program.reverse .program-media{ order:2; }
.program-media{ position:relative; overflow:hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.program-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; transition: transform .6s ease; }
.program-media:hover img{ transform: scale(1.035); }
.program-tag{
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color: var(--violet); margin-bottom:12px; display:block;
}
.program h3{ font-size: clamp(22px,2.6vw,32px); }
.program .partner-note{
  margin-top: 8px; font-size:12.5px; font-weight:500; color: var(--ink-soft);
}
.program p.desc{ margin-top:14px; font-size:15px; line-height:1.75; color: #5C5E68; }

/* text-only program card (no photography allowed) */
.program-quiet{
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 40px; background: var(--white);
  box-shadow: var(--shadow-sm);
  display:grid; grid-template-columns: 1fr auto; gap:28px; align-items:end;
}
.program-quiet .stat{ font-size: 44px; font-weight:800; color: var(--rose-deep); line-height:1; }
.program-quiet .stat + span{ display:block; font-size:11.5px; color: var(--ink-soft); margin-top:6px; text-align: right; }

@media (max-width: 860px){
  .program, .program.reverse .program-media{ order:0; }
  .program{ grid-template-columns: 1fr; gap:24px; padding:40px 0; }
  .program-quiet{ grid-template-columns: 1fr; padding: 28px; text-align:left; }
  .program-quiet .stat + span{ text-align:left; }
}
@media (max-width: 480px){
  .program-media{ border-radius: var(--radius-sm); }
  .program-quiet{ padding: 22px; }
}

/* =========================================================
   PARTNERSHIP / DOCUMENTARY PHOTO STRIP
   ========================================================= */
.doc-strip{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--line); }
.doc-cell{ position:relative; background:#000; overflow:hidden; }
.doc-cell img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 5/4; opacity:.96; transition: transform .5s ease; }
.doc-cell:hover img{ transform: scale(1.045); }
.doc-cap{
  position:absolute; left:0; right:0; bottom:0; padding: 14px 16px;
  background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0));
  color:#fff; font-size:11.5px; font-weight:500; line-height:1.4;
}
@media (max-width: 780px){ .doc-strip{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .doc-strip{ grid-template-columns: 1fr; } .doc-cell img{ aspect-ratio: 16/10; } }

/* =========================================================
   GALLERY — asymmetric editorial grid
   ========================================================= */
.gallery{
  display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 140px; gap: 10px;
}
.gallery button{
  border:none; padding:0; margin:0; background:none; cursor:zoom-in; overflow:hidden; position:relative;
  display:block; width:100%; height:100%; border-radius: 14px;
}
.gallery img{ width:100%; height:100%; object-fit:cover; border-radius:14px; transition: transform .4s ease; }
.gallery button:hover img{ transform: scale(1.05); }
.g-a{ grid-column: span 3; grid-row: span 3; }
.g-b{ grid-column: span 3; grid-row: span 2; }
.g-c{ grid-column: span 2; grid-row: span 2; }
.g-d{ grid-column: span 2; grid-row: span 3; }
.g-e{ grid-column: span 2; grid-row: span 2; }
.g-f{ grid-column: span 3; grid-row: span 2; }
.g-g{ grid-column: span 3; grid-row: span 2; }
.g-h{ grid-column: span 2; grid-row: span 2; }
.g-i{ grid-column: span 3; grid-row: span 2; }

@media (max-width: 900px){
  .gallery{ grid-template-columns: repeat(4,1fr); grid-auto-rows:120px; }
  .g-a,.g-b,.g-d,.g-f,.g-g,.g-i{ grid-column: span 4; }
  .g-c,.g-e,.g-h{ grid-column: span 2; }
}
@media (max-width: 560px){
  .gallery{ grid-template-columns: repeat(2,1fr); grid-auto-rows:130px; gap:8px; }
  .g-a,.g-b,.g-c,.g-d,.g-e,.g-f,.g-g,.g-h,.g-i{ grid-column: span 2; grid-row: span 2; }
  .gallery button, .gallery img{ border-radius:10px; }
}

.lightbox{
  position:fixed; inset:0; background: rgba(15,15,20,.95); z-index: 1100;
  display:none; align-items:center; justify-content:center; padding: 5vw;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width: 100%; max-height: 82vh; margin: 0 auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); border-radius: 8px; }
.lightbox-close{
  position:absolute; top: 18px; right: 18px; background: rgba(255,255,255,.08); border:none; color:#fff;
  font-size: 26px; line-height:1; cursor:pointer; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-nav{
  position:absolute; top:50%; transform: translateY(-50%); background: rgba(255,255,255,.08); border:none;
  color:#fff; font-size: 28px; cursor:pointer; width:48px; height:48px; border-radius:50%; opacity:.85;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-nav:hover{ opacity:1; background: rgba(255,255,255,.16); }
.lightbox-prev{ left: 12px; } .lightbox-next{ right:12px; }
.lightbox-cap{ position:absolute; bottom: 22px; left:16px; right:16px; text-align:center; color:#D9D6CE; font-size:12.5px; }
@media (max-width: 560px){
  .lightbox{ padding: 20px 14px; }
  .lightbox-nav{ width:40px; height:40px; font-size:22px; }
  .lightbox-close{ width:38px; height:38px; font-size:22px; top:10px; right:10px; }
}

/* =========================================================
   PARTNERS (typographic wordmark grid)
   ========================================================= */
.partners-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-md); overflow:hidden;
}
.partner-cell{
  background: var(--white); min-height: 104px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding: 16px 14px; font-weight:600;
  font-size: 15px; color: var(--ink-soft); transition: color .2s ease, background .2s ease;
}
.partner-cell:hover{ color: var(--rose-deep); background: var(--rose-tint); }
@media (max-width: 780px){ .partners-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px){ .partner-cell{ min-height: 88px; font-size:13.5px; padding: 12px 8px; } }

/* =========================================================
   GET INVOLVED / DONATE
   ========================================================= */
.involve-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; margin-top: 8px; }
.involve-cell{ background: var(--white); padding: 32px 28px; }
.involve-cell h4{ font-size:18px; }
.involve-cell p{ color: var(--ink-soft); font-size:14.5px; line-height:1.7; margin-top:10px; }
.involve-cell .tag{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--rose-deep); }
@media (max-width: 860px){ .involve-grid{ grid-template-columns: 1fr; } }

.donate-panel{
  margin-top: 56px; background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  border-radius: var(--radius-lg); color:#fff; padding: 46px;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px;
  box-shadow: 0 20px 50px rgba(77,53,143,.2);
}
.donate-panel h3{ font-size: clamp(23px,2.6vw,30px); color:#fff; }
.donate-panel p{ color:#DCD4EF; margin-top:14px; font-size:14.5px; line-height:1.75; }
.donate-lines{ margin-top:22px; }
.donate-line{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:6px 16px; padding: 12px 0; border-bottom:1px solid rgba(255,255,255,.18); font-size:13.5px; }
.donate-line .k{ color:#C7BAE6; }
.donate-line .v{ color:#fff; font-weight:600; }
.donate-side{ background: rgba(255,255,255,.08); border-radius: var(--radius-md); padding: 26px; align-self:start; }
.donate-side h4{ color:#fff; font-size:15.5px; }
.donate-side p{ font-size:14px; color:#DCD4EF; margin-top:10px; line-height:1.7; }
.donate-side .btn{ margin-top:16px; width:100%; }
@media (max-width: 780px){
  .donate-panel{ grid-template-columns:1fr; padding:30px; border-radius: var(--radius-md); margin-top:40px; }
}
@media (max-width: 420px){
  .donate-panel{ padding:22px; }
  .donate-side{ padding:20px; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 60px; }
.contact-info dt{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft); margin-top:24px; }
.contact-info dt:first-child{ margin-top:0; }
.contact-info dd{ margin:6px 0 0; font-size: 17px; font-weight:600; }
.contact-info a{ text-decoration:none; border-bottom: 1px solid var(--line); }
.contact-info a:hover{ border-color: var(--ink); }

.form-row{ margin-bottom: 18px; }
.form-row label{ display:block; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); margin-bottom:8px; }
.form-row input, .form-row textarea{
  width:100%; border:1px solid #DED9D5; background:#fff; padding: 13px 15px;
  font-size:15px; color: var(--ink); border-radius: var(--radius-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-row textarea{ min-height: 140px; resize: vertical; }
.form-row input:focus, .form-row textarea:focus{ border-color: var(--rose); box-shadow: 0 0 0 4px rgba(197,30,99,.08); }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ margin-top:16px; padding: 12px 16px; font-size:14px; border-radius: var(--radius-sm); display:none; }
.form-status.ok{ display:block; background:#E8F3E8; color:#2A5B2A; }
.form-status.err{ display:block; background:#FBEAEA; color:#7A2323; }
@media (max-width: 820px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--ink); color:#D9D6CE; padding: 64px 0 26px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr .8fr .9fr; gap: 40px; }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.footer-brand img{ height:34px; }
.footer-brand span{ font-weight:700; color:#fff; font-size:16.5px; }
.footer-desc{ font-size:13.5px; line-height:1.75; color:#B7B3A9; max-width: 40ch; }
.footer-col h5{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8F8B80; margin-bottom:16px; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col a{ color:#D9D6CE; text-decoration:none; font-size:14px; }
.footer-col a:hover{ color:#fff; text-decoration:underline; }
.footer-bottom{ border-top:1px solid #33333d; margin-top:44px; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#8F8B80; }
@media (max-width: 780px){
  .site-footer{ padding: 48px 0 24px; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width: 480px){
  .footer-bottom{ flex-direction:column; gap:8px; text-align:center; }
}

/* fade-in on scroll */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff;
  box-shadow:0 10px 28px rgba(23,24,39,.22),0 0 0 4px rgba(255,255,255,.9);
  z-index:900; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float svg{ width:29px; height:29px; fill:currentColor; }
.whatsapp-float:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 14px 34px rgba(23,24,39,.26),0 0 0 4px rgba(255,255,255,.95); }
.whatsapp-float:focus-visible{ outline:3px solid var(--rose); outline-offset:4px; }
@media (max-width: 560px){
  .whatsapp-float{ right:14px; bottom:14px; width:50px; height:50px; }
  .whatsapp-float svg{ width:25px; height:25px; }
}

/* =========================================================
   SMALL-SCREEN GLOBAL TYPE/SPACING TUNING
   ========================================================= */
@media (max-width: 480px){
  .container{ padding: 0 18px; }
  .btn{ padding: 12px 18px; }
}