@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root{
  --red:#c92127;
  --gold:#f2c45d;
  --cream:#fffaf1;
  --sky:#e8f8fb;
  --coral:#f9e1dc;
  --ink:#262424;
  --white:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:"DM Sans",sans-serif;background:#fff}
a{color:inherit;text-decoration:none}
.site-header{height:88px;display:grid;grid-template-columns:190px 1fr auto;align-items:center;padding:10px 4vw;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(0,0,0,.05)}
.brand img{width:160px;display:block}
.nav{display:flex;justify-content:center;gap:2vw;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.nav a:hover{color:var(--red)}
.language{display:flex;align-items:center;gap:7px;font-size:12px}
.lang{border:0;background:none;cursor:pointer;padding:5px;font:inherit;color:#777}
.lang.active{color:var(--red);font-weight:600}
.menu-toggle{display:none;border:0;background:none;font-size:24px}
.hero{min-height:calc(100vh - 88px);position:relative;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#fff 0%,#fffaf0 45%,#e8f8fb 100%)}
.hero:after{content:"";position:absolute;inset:auto -10% -18% -10%;height:44%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(160,225,235,.48));border-radius:50% 50% 0 0/25% 25% 0 0}
.hero-water{position:absolute;bottom:8%;width:125%;height:16%;background:repeating-radial-gradient(ellipse at center,rgba(105,196,211,.18) 0 1px,transparent 2px 11px);transform:rotate(-2deg)}
.sun{position:absolute;border:2px solid rgba(242,196,93,.4);border-radius:50%}
.sun-one{width:430px;height:430px;right:-90px;top:8%;box-shadow:0 0 80px rgba(242,196,93,.18)}
.sun-two{width:180px;height:180px;left:5%;bottom:12%;background:rgba(249,225,220,.35);border:0}
.hero-content{position:relative;z-index:2;text-align:center;width:min(900px,88%);padding:60px 0}
.hero-logo{width:min(600px,82%);mix-blend-mode:multiply;margin:15px auto 28px;display:block}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:11px;font-weight:600}
.red{color:var(--red)} .gold{color:#b88618}
h1,h2,h3{font-family:"Playfair Display",serif;font-weight:500}
h1{font-size:clamp(34px,5vw,66px);line-height:1.04;margin:0 auto 24px;max-width:900px}
h2{font-size:clamp(38px,5vw,70px);line-height:1.03;margin:12px 0 26px}
.hero-copy{font-size:clamp(16px,1.5vw,20px);line-height:1.7;max-width:680px;margin:0 auto 34px;color:#555}
.cta{display:inline-block;background:var(--red);color:white;padding:15px 24px;border-radius:999px;font-size:13px;text-transform:uppercase;letter-spacing:.1em;transition:.25s}
.cta:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(201,33,39,.18)}
.section{padding:110px 7vw}
.intro{display:grid;grid-template-columns:80px 1.1fr .9fr;gap:4vw;align-items:start}
.section-number{color:var(--gold);font-family:"Playfair Display";font-size:24px}
.intro-copy{font-size:17px;line-height:1.8;padding-top:45px;color:#555}
.text-link{display:inline-block;margin-top:15px;color:var(--red);font-weight:600}
.soft{background:var(--cream)}
.section-heading{display:grid;grid-template-columns:1fr .7fr;gap:8vw;align-items:end;margin-bottom:55px}
.section-heading>p{line-height:1.8;color:#666;max-width:500px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{min-height:360px;padding:36px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:4px;transition:.3s}
.card:hover{transform:translateY(-7px)}
.card span{margin-bottom:auto;font-size:12px}
.card h3{font-size:35px;margin:0 0 15px}
.card p{line-height:1.6;margin:0;max-width:300px}
.coral{background:var(--coral)} .sky{background:var(--sky)} .sun-card{background:#fae8a8}
.split{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}
.visual-block{min-height:580px;background:linear-gradient(155deg,#dff7fa,#fff7df);position:relative;overflow:hidden;border-radius:50% 50% 8px 8px}
.ring{position:absolute;width:390px;height:390px;border:55px solid rgba(201,33,39,.8);border-radius:50%;right:-70px;top:70px}
.visual-copy{position:absolute;left:45px;bottom:45px;display:flex;flex-direction:column;max-width:300px}
.visual-copy strong{font-family:"Playfair Display";font-size:42px;line-height:1.05}
.split-copy p:not(.eyebrow){font-size:18px;line-height:1.8;color:#666}
.outline{background:transparent;color:var(--red);border:1px solid var(--red);margin-top:15px}
.education{text-align:center;background:linear-gradient(180deg,#fff,#f5fbfc)}
.education h2{max-width:850px;margin:15px auto 30px}
.large-copy{font-family:"Playfair Display";font-size:clamp(21px,2.2vw,31px);line-height:1.55;max-width:950px;margin:auto;color:#575050}
.friends{padding-top:0}
.friends-panel{background:linear-gradient(120deg,#c92127,#e0473f);color:white;padding:90px 8vw;border-radius:3px;position:relative;overflow:hidden}
.friends-panel:after{content:"";position:absolute;width:420px;height:420px;border:70px solid rgba(242,196,93,.35);border-radius:50%;right:-100px;top:-150px}
.friends-panel h2,.friends-panel p{max-width:700px;position:relative;z-index:2}
.friends-panel p{font-size:18px;line-height:1.7}
.light{background:white;color:var(--red);position:relative;z-index:2}
.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;align-items:end}
.contact-links{display:flex;flex-direction:column;gap:18px;font-size:17px}
.contact-links a{border-bottom:1px solid #ddd;padding-bottom:12px}
footer{padding:45px 7vw;background:var(--cream);display:flex;align-items:center;justify-content:space-between;font-size:12px}
footer img{width:150px;mix-blend-mode:multiply}

@media(max-width:900px){
  .site-header{grid-template-columns:1fr auto auto}
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;top:88px;left:0;right:0;background:white;padding:25px 7vw;flex-direction:column;gap:18px;border-bottom:1px solid #eee}
  .nav.open{display:flex}
  .intro,.section-heading,.split,.contact{grid-template-columns:1fr}
  .section-number{display:none}
  .intro-copy{padding-top:0}
  .cards{grid-template-columns:1fr}
  .card{min-height:280px}
  .visual-block{min-height:420px}
}
@media(max-width:600px){
  .site-header{height:76px;padding:8px 5vw}
  .brand img{width:130px}
  .nav{top:76px}
  .hero{min-height:calc(100vh - 76px)}
  .hero-content{padding:35px 0}
  .hero-logo{width:94%}
  .section{padding:75px 6vw}
  .cards{gap:12px}
  .friends-panel{padding:65px 8vw}
  footer{flex-direction:column;gap:15px;text-align:center}
}

/* Friends donation selector */
.donation-box{position:relative;z-index:2;margin-top:32px;max-width:820px}
.donation-amounts{display:flex;flex-wrap:wrap;gap:12px}
.donation-amount{appearance:none;border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.12);color:#fff;padding:13px 20px;border-radius:999px;font:600 13px "DM Sans",sans-serif;letter-spacing:.05em;cursor:pointer;transition:.22s ease}
.donation-amount:hover,.donation-amount.active{background:#fff;color:var(--red);transform:translateY(-2px)}
.custom-donation{margin-top:18px;padding:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:14px;backdrop-filter:blur(10px)}
.custom-donation label{display:block;font-size:13px;margin-bottom:10px}
.custom-row{display:flex;gap:10px;align-items:center}
.custom-row span{font-weight:600}
.custom-row input{flex:1;min-width:100px;padding:12px 14px;border:0;border-radius:10px;font:inherit}
.custom-row button{border:0;background:#fff;color:var(--red);padding:12px 18px;border-radius:10px;font-weight:700;cursor:pointer}
.transfer-instructions{margin-top:22px;padding:26px;background:rgba(255,255,255,.95);color:var(--ink);border-radius:16px;max-width:760px}
.transfer-instructions p{font-size:15px;line-height:1.65;margin:0 0 14px}
.transfer-thanks{font-family:"Playfair Display",serif;font-size:27px !important;color:var(--red)}
.bank-placeholder{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.bank-placeholder div{background:var(--cream);padding:14px;border-radius:10px;display:flex;flex-direction:column;gap:4px}
.bank-placeholder span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#777}
.transfer-note{font-size:12px !important;letter-spacing:.04em;color:#666}
.contact-links a[target="_blank"]::after{content:" ↗";color:var(--red)}
@media(max-width:600px){
  .donation-amounts{display:grid;grid-template-columns:repeat(2,1fr)}
  .donation-amount{width:100%}
  .bank-placeholder{grid-template-columns:1fr}
  .custom-row{align-items:stretch;flex-wrap:wrap}
  .custom-row input{width:100%}
}

.bank-row{position:relative}
.copy-bank,.copy-reference{
  margin-top:8px;
  width:max-content;
  border:1px solid rgba(201,33,39,.24);
  background:white;
  color:var(--red);
  padding:8px 12px;
  border-radius:999px;
  font:600 11px "DM Sans",sans-serif;
  cursor:pointer;
}
.copy-bank:hover,.copy-reference:hover{background:var(--red);color:white}
.bank-safety{font-size:11px !important;color:#777 !important;margin-top:12px !important}
.copy-feedback{margin-left:8px;font-size:11px;color:var(--red)}

/* History / visual archive */
.history{background:#fff}
.history-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:7vw;align-items:end;margin-bottom:50px}
.history-intro>p{font-size:17px;line-height:1.8;color:#666;max-width:560px}
.history-feature{display:grid;grid-template-columns:1.4fr .6fr;min-height:520px;background:var(--cream);overflow:hidden}
.history-feature img{width:100%;height:100%;min-height:520px;object-fit:cover}
.history-feature-copy{padding:55px;display:flex;flex-direction:column;justify-content:flex-end}
.history-kicker{text-transform:uppercase;letter-spacing:.16em;color:var(--red);font-size:11px;font-weight:600}
.history-feature-copy p{font-family:"Playfair Display",serif;font-size:29px;line-height:1.45}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.timeline-card{background:#fff;border:1px solid #eee;overflow:hidden;transition:.25s}
.timeline-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.07)}
.timeline-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.timeline-card div{padding:18px}
.timeline-card strong{font-family:"Playfair Display",serif;font-size:27px;color:var(--red);display:block}
.timeline-card span{font-size:13px;color:#666}
.history-education{display:grid;grid-template-columns:.9fr 1.1fr;gap:6vw;align-items:center;margin-top:70px;background:linear-gradient(120deg,#eefafb,#fffaf0);padding:30px}
.history-education img{width:100%;height:420px;object-fit:cover}
.history-education h3{font-size:42px;margin:10px 0 18px}
.history-education p:not(.eyebrow){line-height:1.8;color:#5c5c5c}
@media(max-width:900px){
  .history-intro,.history-feature,.history-education{grid-template-columns:1fr}
  .history-feature-copy{padding:35px}
  .timeline{grid-template-columns:repeat(2,1fr)}
  .history-feature img{min-height:340px}
}
@media(max-width:600px){
  .timeline{grid-template-columns:1fr}
  .history-education{padding:18px}
  .history-education img{height:300px}
}

/* PayPal donation experience */
.paypal-donation-box{max-width:900px}
.paypal-card{
  margin-top:26px;
  padding:30px;
  max-width:680px;
  background:rgba(255,255,255,.97);
  color:var(--ink);
  border-radius:18px;
  box-shadow:0 18px 55px rgba(94,20,24,.14);
}
.donation-heading{
  margin:0 0 8px !important;
  font-family:"Playfair Display",serif;
  font-size:30px !important;
  color:var(--red);
}
.donation-subcopy{
  color:#5e5e5e !important;
  font-size:15px !important;
  margin:0 0 22px !important;
}
#paypal-container-PMNK6QDJNBNNN{
  min-height:45px;
  position:relative;
  z-index:3;
}
.payment-note{
  margin:16px 0 0 !important;
  font-size:11px !important;
  line-height:1.55 !important;
  color:#777 !important;
}
.bank-transfer-option{
  margin-top:18px;
  max-width:680px;
}
.bank-transfer-option summary{
  width:max-content;
  max-width:100%;
  cursor:pointer;
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  color:#fff;
  list-style:none;
}
.bank-transfer-option summary::-webkit-details-marker{display:none}
.bank-transfer-option[open] summary{background:#fff;color:var(--red)}
.bank-alternative{margin-top:14px}
@media(max-width:600px){
  .paypal-card{padding:22px 18px}
  .donation-heading{font-size:26px !important}
}
