@font-face{font-family:"Gabarito";src:url(/fonts/gabarito-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Gabarito";src:url(/fonts/gabarito-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url(/fonts/karla-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url(/fonts/karla-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url(/fonts/karla-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme: light;
  --paper:#FFFFFF;
  --wash:#FFF1F4;
  --wash-2:#FFF8F2;
  --ink:#241A1E;
  --ink-soft:#6E5C63;
  --rosa:#E0517C;
  --rosa-deep:#AF2952;
  --oro:#C98520;
  --oro-soft:#F5E3C4;
  --line:#F1DDE3;
  --shadow:0 2px 4px rgba(36,26,30,.04), 0 14px 34px -14px rgba(175,41,82,.20);
  --tag-r:14px;
  --wrap:url("/img/wrap-tile.png");
  --fs-h1:clamp(2.6rem,6.4vw,4.9rem);
  --fs-h2:clamp(1.9rem,3.7vw,3.05rem);
  --fs-h3:1.32rem;
  --pad:clamp(20px,5vw,64px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Karla",system-ui,sans-serif; font-size:17px; line-height:1.62;
  overflow-x:hidden;
}
/* height:auto is load-bearing: the <img> tags carry real width/height attributes
   so the browser can reserve the right box before the file arrives, and without
   this the height attribute wins over a CSS-only width and the mark stretches. */
img{max-width:100%; display:block; height:auto}
picture{display:contents}
h1,h2,h3{font-family:"Gabarito",system-ui,sans-serif; font-weight:800; line-height:1.02;
  letter-spacing:-.026em; text-wrap:balance; margin:0}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3); font-weight:700; letter-spacing:-.014em; line-height:1.2}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--rosa); outline-offset:3px; border-radius:6px}

.wrap{width:min(1180px,100%); margin-inline:auto; padding-inline:var(--pad)}
.sec{padding-block:clamp(64px,8vw,124px)}
/* the header is sticky, so an anchored section must stop below it, not under it */
[id]{scroll-margin-top:90px}
.sec--wash{background:var(--wash); background-image:var(--wrap); background-size:210px; position:relative}
.sec--wash::before{content:""; position:absolute; inset:0; background:linear-gradient(var(--wash),transparent 18%,transparent 82%,var(--wash)); pointer-events:none}
.sec--wash > *{position:relative}
.stack{display:flex; flex-direction:column}

/* keyboard users get out of the nav in one press */
.skip{position:absolute; left:-9999px; top:8px; z-index:60; background:#fff; color:var(--rosa-deep);
  font-weight:700; padding:.7em 1.2em; border-radius:999px; border:1.5px solid var(--rosa); text-decoration:none}
.skip:focus{left:var(--pad)}

/* ---------- the gift tag: this page's one signature device ---------- */
.tag{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:"Karla",sans-serif; font-size:.735rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--rosa-deep); background:#fff;
  padding:.5em 1em .5em 1.6em; border:1.5px solid var(--line);
  border-radius:4px var(--tag-r) var(--tag-r) 4px; position:relative;
}
.tag::before{
  content:""; position:absolute; left:.62em; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--wash);
  border:1.5px solid var(--line);
}
.tag--gold{color:var(--oro); border-color:var(--oro-soft); background:#FFFDF7}
.tag--gold::before{background:var(--oro-soft); border-color:var(--oro-soft)}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hdr__in{display:flex; align-items:center; gap:18px; min-height:74px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto}
.brand img{height:44px; width:auto; background:var(--ink); padding:7px 8px; border-radius:10px}
.brand b{font-family:"Gabarito",sans-serif; font-weight:800; font-size:1.02rem; line-height:1.05; letter-spacing:-.02em; display:block}
.brand span{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--rosa-deep); font-weight:700}
.nav{display:flex; align-items:center; gap:26px}
.nav a{text-decoration:none; font-weight:500; font-size:.95rem; color:var(--ink-soft)}
.nav a:hover{color:var(--rosa-deep)}
.hdr__act{display:flex; align-items:center; gap:10px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:"Gabarito",sans-serif; font-weight:700; font-size:1rem; letter-spacing:-.01em;
  padding:.78em 1.5em; border-radius:999px; text-decoration:none; border:2px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
.btn--rosa{background:var(--rosa); color:#fff; box-shadow:0 8px 20px -8px rgba(224,81,124,.7)}
.btn--rosa:hover{background:var(--rosa-deep); transform:translateY(-2px)}
.btn--rosa[disabled]{background:var(--rosa-deep); opacity:.72; cursor:progress; transform:none}
.btn--ghost{border-color:var(--line); color:var(--ink); background:#fff}
.btn--ghost:hover{border-color:var(--rosa); color:var(--rosa-deep); transform:translateY(-2px)}
.btn--sm{font-size:.9rem; padding:.6em 1.15em}

/* the language control is a link pair, not a toggle: each side is its own page */
.lang{display:inline-flex; border:1.5px solid var(--line); border-radius:999px; padding:2px; background:#fff}
.lang a{font-family:"Karla",sans-serif; font-weight:700; font-size:.76rem; letter-spacing:.07em;
  color:var(--ink-soft); border-radius:999px; text-decoration:none;
  padding:.42em .78em; line-height:1; transition:background .15s ease, color .15s ease}
.lang a:hover{color:var(--rosa-deep)}
.lang a.is-on{background:var(--rosa); color:#fff}
.burger{display:none; background:none; border:1.5px solid var(--line); border-radius:10px;
  width:42px; height:42px; cursor:pointer; align-items:center; justify-content:center}
.burger i{display:block; width:17px; height:1.5px; background:var(--ink); position:relative}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--ink)}
.burger i::before{top:-5.5px} .burger i::after{top:5.5px}

/* ---------- hero ---------- */
.hero{background:var(--wash); background-image:var(--wrap); background-size:230px;
  padding-block:clamp(48px,7vw,92px) clamp(64px,8vw,110px); position:relative; overflow:hidden}
.hero__grid{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,4.4vw,68px); align-items:center}
.hero__copy{display:flex; flex-direction:column; gap:22px; align-items:flex-start}
.hero__lead{font-size:clamp(1.03rem,1.55vw,1.18rem); color:var(--ink-soft); max-width:34ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px}

/* the hero photo is a wrapped present: frame + tag hanging off the corner */
.gift{position:relative; padding-top:16px; padding-right:14px}
.gift__frame{border-radius:26px; overflow:hidden; background:#fff; border:8px solid #fff;
  box-shadow:var(--shadow); transform:rotate(-1.2deg)}
.gift__frame img{width:100%; height:clamp(340px,44vw,540px); object-fit:cover; object-position:50% 22%}
.gift__tag{position:absolute; right:-6px; top:0; z-index:3; transform:rotate(4deg);
  background:#fff; border:1.5px solid var(--oro-soft); border-radius:4px 16px 16px 4px;
  padding:.62em 1.05em .62em 1.7em; box-shadow:0 8px 18px -10px rgba(36,26,30,.4);
  font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--oro)}
.gift__tag::before{content:""; position:absolute; left:.66em; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--wash-2); border:1.5px solid var(--oro-soft)}

/* ---------- trust ---------- */
.trust{border-block:1px solid var(--line); background:#fff}
.trust__in{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); margin:0}
.trust__i{background:#fff; padding:26px 20px; display:flex; flex-direction:column; gap:3px}
.trust__i dt{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:700}
.trust__i dd{margin:0; font-family:"Gabarito",sans-serif; font-weight:700; font-size:1.06rem; letter-spacing:-.015em}

/* ---------- section heads ---------- */
.head{display:flex; flex-direction:column; gap:16px; align-items:flex-start; max-width:56ch; margin-bottom:clamp(34px,4.4vw,58px)}
.head p{color:var(--ink-soft); font-size:1.06rem}
.head--flush{margin-bottom:0}

/* ---------- mission ---------- */
.mission{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,4vw,64px); align-items:start}
.mv{display:flex; flex-direction:column; gap:28px}
.mv__b{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.mv__b p{font-size:clamp(1.02rem,1.5vw,1.14rem); color:var(--ink); line-height:1.62}
.aud{background:#fff; border:1.5px solid var(--line); border-radius:22px; padding:28px 26px;
  display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow)}
.aud h3{font-size:1.06rem}
.aud ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.aud li{position:relative; padding-left:26px; font-size:.97rem; color:var(--ink-soft)}
.aud li::before{content:""; position:absolute; left:0; top:.52em; width:11px; height:11px;
  border-radius:50%; border:2.5px solid var(--rosa)}

/* ---------- programs ---------- */
.prog{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.prog__c{position:relative; background:#fff; border:1.5px solid var(--line); border-radius:22px;
  padding:30px 30px 30px 40px; overflow:hidden; display:flex; flex-direction:column; gap:11px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.prog__c:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent}
/* the ribbon down the left edge: this card is a wrapped box */
.prog__c::before{content:""; position:absolute; left:0; top:0; bottom:0; width:11px;
  background:repeating-linear-gradient(180deg,var(--rosa) 0 15px,#F08AA8 15px 30px)}
.prog__c:nth-child(2)::before,.prog__c:nth-child(3)::before{background:repeating-linear-gradient(180deg,var(--oro) 0 15px,#E7BB6E 15px 30px)}
.prog__c p{color:var(--ink-soft); font-size:.99rem}
.prog__c > p{font-weight:500; color:var(--ink)}
.prog__c ul{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:9px}
.prog__c li{position:relative; padding-left:20px; font-size:.92rem; color:var(--ink-soft); line-height:1.5}
.prog__c li::before{content:""; position:absolute; left:0; top:.56em; width:7px; height:7px;
  border-radius:50%; background:var(--oro)}

/* ---------- gallery: an even contact sheet, uniform ratio so rows line up ---------- */
.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px)}
.gal figure{margin:0; display:flex; flex-direction:column; gap:12px}
.gal img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:18px;
  border:6px solid #fff; box-shadow:var(--shadow); background:var(--wash)}
.gal figcaption{font-size:.9rem; color:var(--ink); padding-inline:4px; max-width:34ch}

/* ---------- quote ---------- */
.quote{text-align:center; display:flex; flex-direction:column; gap:20px; align-items:center}
.quote img{width:66px; opacity:.9}
.quote blockquote{margin:0; font-family:"Gabarito",sans-serif; font-weight:700;
  font-size:clamp(1.5rem,3.1vw,2.35rem); line-height:1.22; letter-spacing:-.022em; max-width:20ch; text-wrap:balance}
.quote cite{font-style:normal; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rosa-deep); font-weight:700}

/* ---------- help ---------- */
.help{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.help__c{background:#fff; border:1.5px solid var(--line); border-radius:22px; padding:28px 24px;
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  transition:transform .2s ease, box-shadow .2s ease}
.help__c:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.help__c p{color:var(--ink-soft); font-size:.95rem; flex:1}
.help__ic{width:40px; height:40px; border-radius:12px; background:var(--wash);
  display:grid; place-items:center; margin-bottom:2px}
.help__ic img{width:22px}
.help__c a{font-family:"Gabarito",sans-serif; font-weight:700; color:var(--rosa-deep); text-decoration:none; font-size:.96rem}
.help__c a:hover{text-decoration:underline}

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start}
.cinfo{display:flex; flex-direction:column; gap:2px; margin:0}
.cinfo__r{display:flex; gap:18px; padding:17px 0; border-bottom:1px solid var(--line); align-items:baseline}
.cinfo__r dt{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; min-width:92px}
.cinfo__r dd{margin:0; font-size:1.02rem; overflow-wrap:anywhere; min-width:0}
.cinfo__r a{color:var(--rosa-deep); text-decoration:none; font-weight:500}
.cinfo__r a:hover{text-decoration:underline}
.cinfo__r svg{width:17px; height:17px; vertical-align:-3px; margin-right:6px}
form{background:#fff; border:1.5px solid var(--line); border-radius:22px; padding:clamp(22px,3vw,34px);
  display:flex; flex-direction:column; gap:15px; box-shadow:var(--shadow)}
label{display:flex; flex-direction:column; gap:7px; font-size:.78rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
input,textarea{font-family:"Karla",sans-serif; font-size:1rem; color:var(--ink);
  border:1.5px solid var(--line); border-radius:12px; padding:.75em .9em; background:var(--wash-2);
  text-transform:none; letter-spacing:normal; font-weight:400}
input:focus,textarea:focus{outline:none; border-color:var(--rosa); background:#fff}
textarea{resize:vertical; min-height:110px}
/* the honeypot: a real field to a bot, nothing to a person or a screen reader */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.note{font-size:.9rem; font-weight:500; line-height:1.5; padding:12px 14px; border-radius:12px}
.note--ok{color:#0B6B4F; background:#EAF7F1; border:1.5px solid #BFE6D5}
.note--err{color:var(--rosa-deep); background:var(--wash); border:1.5px solid var(--line)}

/* ---------- footer ---------- */
.foot{background:var(--ink); color:#C8B6BC; padding-block:clamp(44px,5vw,68px)}
.foot__in{display:flex; flex-wrap:wrap; gap:26px; align-items:flex-start; justify-content:space-between}
.foot img{height:84px; width:auto}
.foot p{font-size:.88rem; max-width:44ch}
.foot a{color:#FF9DBD}
.foot__b{margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.82rem}

/* ---------- 404 ---------- */
.oops{min-height:62vh; display:grid; place-items:center; background:var(--wash);
  background-image:var(--wrap); background-size:230px; text-align:center; padding-block:clamp(70px,10vw,140px)}
.oops__in{display:flex; flex-direction:column; align-items:center; gap:20px; max-width:44ch}
/* a page state, not a thesis: the hero size would shout about a missing page */
.oops h1{font-size:var(--fs-h2)}
.oops p{color:var(--ink-soft)}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
[data-reveal].is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
  [data-reveal]{opacity:1; transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr; gap:34px}
  .gift__frame img{height:min(58vw,420px)}
  .contact{grid-template-columns:1fr}
  .help{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .prog{grid-template-columns:1fr}
  .mission{grid-template-columns:1fr}
  .trust__in{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .burger{display:flex}
  .nav{position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:8px var(--pad) 18px; display:none}
  .nav.open{display:flex}
  .nav a{padding:12px 0; border-bottom:1px solid var(--line)}
  .hdr__in{position:relative}
  .hdr__act .btn{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .cinfo__r{flex-direction:column; gap:5px}
  .cinfo__r dt{min-width:0}
  .prog{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .help{grid-template-columns:1fr}
  .brand span{display:none}
}

.give{background:var(--wash); background-image:var(--wrap); background-size:230px;
  padding-block:clamp(40px,6vw,80px) clamp(60px,8vw,110px); min-height:70vh}
.give__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:start}
.give__copy{display:flex; flex-direction:column; gap:18px; align-items:flex-start}
.give__copy p{color:var(--ink-soft); font-size:1.06rem; max-width:38ch}
.give__what{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.give__what li{display:flex; gap:12px; align-items:baseline; font-size:.97rem; color:var(--ink-soft)}
.give__what b{font-family:"Gabarito",sans-serif; color:var(--rosa-deep); font-size:1.02rem; min-width:52px}

.card{background:#fff; border:1.5px solid var(--line); border-radius:26px;
  padding:clamp(24px,3vw,36px); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:20px}
.freq{display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--wash-2);
  border:1.5px solid var(--line); border-radius:999px; padding:4px}
.freq button{font-family:"Gabarito",sans-serif; font-weight:700; font-size:.95rem; color:var(--ink-soft);
  background:none; border:0; border-radius:999px; padding:.6em 1em; cursor:pointer;
  transition:background .16s ease, color .16s ease}
.freq button[aria-pressed="true"]{background:var(--rosa); color:#fff}

.amts{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.amt{font-family:"Gabarito",sans-serif; font-weight:800; font-size:1.24rem; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:4px var(--tag-r) var(--tag-r) 4px;
  padding:.72em .6em .72em 1.5em; cursor:pointer; position:relative; text-align:left;
  transition:border-color .16s ease, color .16s ease, transform .16s ease}
.amt::before{content:""; position:absolute; left:.62em; top:50%; transform:translateY(-50%);
  width:9px; height:9px; border-radius:50%; background:var(--wash); border:1.5px solid var(--line);
  transition:background .16s ease, border-color .16s ease}
.amt:hover{border-color:var(--rosa); transform:translateY(-2px)}
.amt[aria-pressed="true"]{border-color:var(--rosa); color:var(--rosa-deep)}
.amt[aria-pressed="true"]::before{background:var(--rosa); border-color:var(--rosa)}

.give__other label{gap:8px}
.give__other .row{display:flex; align-items:center; gap:0; border:1.5px solid var(--line);
  border-radius:12px; background:var(--wash-2); overflow:hidden}
.give__other .row:focus-within{border-color:var(--rosa); background:#fff}
.give__other span.cur{font-family:"Gabarito",sans-serif; font-weight:700; color:var(--ink-soft);
  padding:0 .2em 0 .8em; font-size:1.1rem}
.give__other input{border:0; background:none; border-radius:0; font-size:1.1rem;
  font-family:"Gabarito",sans-serif; font-weight:700; padding-left:.15em; width:100%}
.give__other input:focus{background:none}
.give__fine{font-size:.84rem; color:var(--ink-soft); line-height:1.5}
.give__fine b{color:var(--ink)}
.give .btn{width:100%}
.give__back{font-size:.92rem; color:var(--rosa-deep); text-decoration:none; font-weight:500; align-self:flex-start}
.give__back:hover{text-decoration:underline}

.done{min-height:66vh; display:grid; place-items:center; background:var(--wash);
  background-image:var(--wrap); background-size:230px; text-align:center; padding-block:clamp(70px,10vw,140px)}
.done__in{display:flex; flex-direction:column; align-items:center; gap:20px; max-width:46ch}
.done__in img{width:70px; margin-bottom:4px}
.done p{color:var(--ink-soft)}

@media (max-width:820px){
  .give__grid{grid-template-columns:1fr; gap:30px}
}