/* Healing Vessels International — sky and sea.
   Palette runs from foam white at the top of the page to deep ocean at the
   footer, the way water deepens as you go out. Sky blue carries structure,
   sea wave carries motion. */
:root{
  --foam:#ffffff;
  --foam-2:#f2fafe;
  --foam-3:#e6f4fb;
  --border:#d6e9f4;
  --border-strong:#b6d9ec;

  --ink:#0b2f45;
  --ink-2:#40606f;
  --ink-faint:#7796a6;

  --sky:#38bdf8;
  --sky-deep:#0284c7;
  --sea:#0891b2;
  --wave:#06b6d4;
  --seafoam:#5eead4;
  --deep:#063954;
  --deep-2:#0e4f6e;

  --sky-soft:rgba(56,189,248,.12);
  --shadow:0 2px 4px rgba(6,57,84,.04), 0 12px 32px rgba(6,57,84,.07);
  --shadow-lift:0 4px 8px rgba(6,57,84,.06), 0 20px 44px rgba(6,57,84,.13);

  --radius:16px;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--foam);
  color:var(--ink-2);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{display:block;max-width:100%}
a{color:inherit}

.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* the faintest paper tooth, so large flat areas aren't dead */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.022;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid rgba(214,233,244,.8);
}
.header-row{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-mark{display:flex;flex:none}
.brand-word{
  font-family:var(--serif);font-size:16.5px;letter-spacing:.005em;line-height:1.1;
  display:flex;flex-direction:column;font-weight:500;
}
.brand-word em{
  font-style:normal;font-family:var(--sans);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sea);font-weight:600;margin-top:3px;
}
.site-nav{display:flex;align-items:center;gap:26px;font-size:14.5px}
.site-nav a{text-decoration:none;color:var(--ink-2);transition:color .2s;font-weight:500}
.site-nav a:hover{color:var(--sky-deep)}
.nav-cta{
  padding:10px 20px;border-radius:999px;color:#fff !important;font-weight:600;
  background:linear-gradient(135deg, var(--sky) 0%, var(--sea) 100%);
  box-shadow:0 4px 14px rgba(8,145,178,.28);
}
.nav-cta:hover{filter:brightness(1.06)}
.nav-toggle{display:none}

@media (max-width:880px){
  .site-nav{
    position:fixed;inset:78px 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;background:#fff;padding:8px 24px 24px;border-bottom:1px solid var(--border);
    box-shadow:var(--shadow);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;
  }
  .site-nav.open{opacity:1;transform:none;pointer-events:auto}
  .site-nav a{padding:15px 0;border-bottom:1px solid var(--border);font-size:16.5px}
  .nav-cta{margin-top:14px;text-align:center;border-radius:12px;justify-content:center}
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;
    background:none;border:0;cursor:pointer;
  }
  .nav-toggle span{width:100%;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- hero ---------- */
/* Sunrise sky. The warm band sits where the canvas puts the horizon, so
   the painted sky and the rendered sea meet without a seam. */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-start;
  overflow:hidden;
  background:
    radial-gradient(ellipse 40% 24% at 66% 64%, rgba(255,193,110,.62), transparent 70%),
    linear-gradient(180deg,
      #8fd3f4 0%, #b3e2f8 16%, #d9f0fb 34%, #f6ecd6 50%, #fbe3ba 58%, #ffd398 64%,
      #ffca8c 66%, #eaf6fd 68%, #ffffff 100%);
}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Only the top of the frame is veiled — enough for the headline to hold,
   nothing over the water or the sun. */
.hero-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.38) 30%,
    rgba(255,255,255,.2) 50%, rgba(255,255,255,.05) 62%, rgba(255,255,255,0) 70%);
}

/* the bank you are standing on */
.hero-bank{
  position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;line-height:0;
}
.hero-bank svg{width:100%;height:clamp(50px,7vw,96px);display:block}
.hero-content{position:relative;z-index:2;padding-top:min(11vh,100px);padding-bottom:0}
.eyebrow{
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sea);
  margin:0 0 20px;font-weight:600;
}
.hero h1{
  font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.4vw,54px);
  line-height:1.12;margin:0 0 14px;max-width:27ch;color:var(--ink);
}
.hero h1 .ital{font-style:italic;color:var(--sea);font-weight:400}

/* the mantra, on its own line with water under it */
.hero-mantra{
  display:inline-block;position:relative;margin:0 0 20px;
  font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.1vw,23px);
  color:var(--sky-deep);padding-bottom:14px;
}
.hero-mantra svg{position:absolute;left:0;bottom:0;width:100%;height:11px;overflow:visible}
.hero-mantra path{
  fill:none;stroke:var(--sky);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:0 0;opacity:.75;
}
@media (prefers-reduced-motion:no-preference){
  .hero-mantra path{animation:flowline 7s linear infinite}
}
@keyframes flowline{
  0%{transform:translateX(0)}
  100%{transform:translateX(-40px)}
}

.hero-sub{max-width:54ch;color:var(--ink-2);font-size:16.5px;margin:0 0 30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-scroll{
  display:flex;align-items:center;gap:10px;margin:56px 0 0;color:var(--ink-faint);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.hero-scroll span{
  width:1px;height:34px;background:linear-gradient(var(--sky), transparent);
  display:inline-block;animation:scrollpulse 2.2s ease-in-out infinite;
}
@keyframes scrollpulse{0%,100%{opacity:.3}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-scroll span{animation:none}}

/* ---------- the calling ---------- */
.vision-band{
  background:linear-gradient(180deg, #fff 0%, #fff7ea 46%, #f2fafe 100%);
  padding:64px 0 68px;text-align:center;
}
.vision-band .kicker{color:#c2841f}
.vision-band p{
  margin:0 auto;max-width:30ch;font-family:var(--serif);font-weight:500;
  font-size:clamp(21px,3vw,31px);line-height:1.3;color:var(--ink);
}
.vision-band .sub{
  margin:20px auto 0;max-width:62ch;font-family:var(--sans);font-size:15.5px;
  font-weight:400;color:var(--ink-2);line-height:1.65;
}

/* ---------- wave dividers ---------- */
.wave-divider{display:block;line-height:0;position:relative;z-index:1}
.wave-divider svg{width:100%;height:clamp(48px,7vw,104px);display:block}
.wave-divider.to-white svg path{fill:#fff}
.wave-divider.to-foam svg path{fill:var(--foam-2)}
.wave-divider.to-give svg path{fill:var(--sea)}
.wave-divider.to-footer svg path{fill:var(--deep)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:600;
  transition:transform .18s ease, box-shadow .2s, background .2s, border-color .2s, color .2s;
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg, var(--sky) 0%, var(--sea) 100%);color:#fff;
  box-shadow:0 6px 20px rgba(8,145,178,.28);
}
.btn-primary:hover{box-shadow:0 10px 28px rgba(8,145,178,.36)}
.btn-ghost{background:#fff;border-color:var(--border-strong);color:var(--sky-deep)}
.btn-ghost:hover{border-color:var(--sky);box-shadow:var(--shadow)}
.btn-block{width:100%}

/* on the deep sea band, buttons invert */
.give .btn-primary{background:#fff;color:var(--sea);box-shadow:0 6px 20px rgba(3,42,63,.24)}
.give .btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.give .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- shared section chrome ---------- */
section{padding:104px 0;scroll-margin-top:96px}
.kicker{
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--sea);
  margin:0 0 14px;font-weight:600;
}
h2{
  font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,38px);
  line-height:1.25;margin:0 0 18px;color:var(--ink);
}
.center{text-align:center}
.section-sub{color:var(--ink-2);max-width:64ch;margin:0 auto 8px}

/* ---------- mission ---------- */
.mission{background:#fff;padding-top:64px}
.mission-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:64px;align-items:start}
.mission-text p{color:var(--ink-2);font-size:16px}
.mission-fact-card{
  background:linear-gradient(160deg, #f5fbfe 0%, #eaf6fc 100%);
  border:1px solid var(--border);border-radius:var(--radius);padding:30px;
  box-shadow:var(--shadow);
}
.mission-fact-card dl{margin:0;display:flex;flex-direction:column;gap:18px}
.mission-fact-card dl > div{border-top:1px solid var(--border);padding-top:16px}
.mission-fact-card dl > div:first-child{border-top:0;padding-top:0}
.mission-fact-card dt{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sea);
  margin-bottom:6px;font-weight:600;
}
.mission-fact-card dd{margin:0;font-size:16px;font-weight:500;color:var(--ink)}
@media (max-width:900px){.mission-grid{grid-template-columns:1fr;gap:36px}}

/* ---------- ecosystem / venn ---------- */
.ecosystem{background:var(--foam-2)}
.venn-layout{
  margin-top:44px;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
}
@media (max-width:960px){.venn-layout{grid-template-columns:1fr;gap:28px}}
.venn-wrap{
  position:relative;width:min(560px,92vw);aspect-ratio:1/1;margin:0 auto;
  transform-style:preserve-3d;transition:transform .3s ease-out;will-change:transform;
}
.venn-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.venn-nodes{position:absolute;inset:0}
.venn-node{
  position:absolute;transform:translate(-50%,-50%);
  width:var(--r,120px);height:var(--r,120px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:transparent;border:0;cursor:pointer;color:var(--ink);
  font-family:var(--sans);padding:0;
}
.venn-node:focus-visible{outline:2px solid var(--sky-deep);outline-offset:2px}
.venn-node .lbl{
  font-size:13px;font-weight:600;line-height:1.25;padding:0 12%;
  text-shadow:0 1px 8px rgba(255,255,255,.9), 0 0 3px rgba(255,255,255,.95);
  transition:opacity .25s, transform .25s;
}
.venn-node.hub .lbl{font-family:var(--serif);font-size:16px;font-weight:500;color:var(--deep)}
.venn-wrap.active .venn-node:not(.is-active):not(.is-linked) .lbl{opacity:.4}
.venn-node.is-active .lbl,.venn-node.is-linked .lbl{transform:scale(1.06)}

.venn-circle{transition:opacity .3s, fill-opacity .3s}
.venn-wrap.active .venn-circle:not(.is-active):not(.is-linked){opacity:.3}
.venn-line{
  fill:none;stroke:var(--sea);stroke-width:.5;opacity:0;
  transition:opacity .3s;stroke-linecap:round;
}
.venn-line.show{opacity:.8}

.venn-panel{
  min-height:280px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:30px 32px;display:flex;flex-direction:column;justify-content:center;
  box-shadow:var(--shadow);
}
.venn-panel-hint{margin:0;color:var(--ink-faint);text-align:center}
.venn-panel h3{margin:0 0 14px;font-family:var(--serif);font-weight:500;font-size:20px;color:var(--sky-deep)}
.venn-panel ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.venn-panel li{padding-left:18px;position:relative;color:var(--ink-2);font-size:15px}
.venn-panel li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--sky);border-radius:2px}
.venn-panel li strong{color:var(--ink);font-weight:600}
.venn-cta{
  align-self:flex-start;margin-top:22px;display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:600;
  background:linear-gradient(135deg, var(--sky) 0%, var(--sea) 100%);color:#fff;
  box-shadow:0 4px 14px rgba(8,145,178,.26);
  transition:transform .2s, box-shadow .2s;
}
.venn-cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(8,145,178,.34)}
.venn-cta.is-soon{
  background:var(--foam-3);color:var(--ink-faint);box-shadow:none;
  font-weight:500;cursor:default;
}

/* the portal a redirect travels through — now daylight on water */
#warp{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--wx,50%) var(--wy,50%),
    var(--wc,#38bdf8) 0%, rgba(255,255,255,.92) 45%, #fff 75%);
}
#warp.on{animation:warpIn .62s cubic-bezier(.45,0,.2,1) forwards}
@keyframes warpIn{
  0%{opacity:0;transform:scale(.35)}
  55%{opacity:.9}
  100%{opacity:1;transform:scale(2.6)}
}
@media (prefers-reduced-motion:reduce){#warp.on{animation:none;opacity:0}}

/* ---------- program cards ---------- */
.programs{background:#fff}
.card-grid{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:940px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.card-grid{grid-template-columns:1fr}}
.p-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:28px 26px;transition:border-color .2s, transform .2s, box-shadow .2s;
  box-shadow:var(--shadow);
}
.p-card:hover{border-color:var(--border-strong);transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.p-card.is-link{display:block;text-decoration:none;color:inherit;cursor:pointer}
.p-card.is-link:hover{border-color:var(--sky)}
.card-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-size:13px;font-weight:600;color:var(--sky-deep);letter-spacing:.01em;
}
.card-go.is-soon{color:var(--ink-faint);font-weight:500}
.p-card .dot{width:26px;height:4px;border-radius:4px;margin-bottom:18px}
.p-card h3{margin:0 0 6px;font-size:18px;font-family:var(--serif);font-weight:500;color:var(--ink)}
.p-card .vision{margin:0 0 12px;font-size:14px;font-style:italic;color:var(--sea)}
.p-card p.desc{margin:0;color:var(--ink-2);font-size:14.5px}

/* ---------- impact ---------- */
.impact{background:var(--foam-3)}
.impact-grid{display:grid;grid-template-columns:.9fr 1.4fr;gap:56px;align-items:start}
.impact-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.stat{border-top:2px solid var(--sky);padding-top:16px}
.stat-num{
  display:block;font-family:var(--serif);font-size:40px;line-height:1;
  color:var(--sky-deep);
}
.stat-label{display:block;margin-top:10px;color:var(--ink-2);font-size:14px}
@media (max-width:900px){.impact-grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:520px){.impact-stats{grid-template-columns:1fr}}

/* ---------- partners ---------- */
.partners{background:#fff}
.partner-row{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.partner-row{grid-template-columns:1fr}}
.partner{
  border:1px solid var(--border);border-radius:var(--radius);padding:26px;
  background:linear-gradient(165deg, #f7fcfe 0%, #eef8fc 100%);
  display:flex;flex-direction:column;
}
.partner.is-link{
  text-decoration:none;color:inherit;cursor:pointer;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.partner.is-link:hover{border-color:var(--sky);transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.partner .card-go{margin-top:auto;padding-top:16px}
.partner strong{display:block;font-size:16px;margin-bottom:8px;color:var(--sky-deep)}
.partner span{color:var(--ink-2);font-size:14.5px}

/* ---------- leadership ---------- */
.leadership{background:var(--foam-2)}
.leader-row{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:940px){.leader-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.leader-row{grid-template-columns:1fr}}
.leader{
  border:1px solid var(--border);border-left:3px solid var(--sky);
  border-radius:var(--radius);padding:24px 22px;background:#fff;box-shadow:var(--shadow);
}
.leader strong{display:block;font-size:15.5px;margin-bottom:6px;color:var(--ink)}
.leader .role{color:var(--ink-2);font-size:13.5px}

/* ---------- give: the deep water band ---------- */
.give{
  background:linear-gradient(165deg, var(--sea) 0%, var(--sky-deep) 55%, var(--deep-2) 100%);
  color:rgba(255,255,255,.9);padding-top:56px;
}
.give h2{color:#fff}
.give .kicker{color:var(--seafoam)}
.give .section-sub{color:rgba(255,255,255,.86)}
.give-grid{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:940px){.give-grid{grid-template-columns:1fr}}
.give-card{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;
  backdrop-filter:blur(6px);
}
.give-card h3{margin:0 0 12px;font-family:var(--serif);font-weight:500;font-size:19px;color:#fff}
.give-card p{margin:0 0 24px;color:rgba(255,255,255,.85);font-size:14.5px}
.give-card .btn{margin-top:auto}
.give-card strong{color:#fff}

/* ---------- contact ---------- */
.contact{background:#fff}
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center}
.contact-grid p{color:var(--ink-2)}
.contact-card{display:flex;flex-direction:column;gap:14px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:32px}}

/* ---------- footer: the deep ---------- */
.site-footer{background:var(--deep);color:rgba(255,255,255,.72);padding:0 0 34px}
.footer-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:32px;
  padding:14px 0 30px;flex-wrap:wrap;
}
.footer-brand{display:flex;align-items:center;gap:13px;color:#fff}
.footer-brand .brand-word{color:#fff}
.footer-brand .brand-word em{color:var(--seafoam)}
.footer-mantra{
  margin:12px 0 0;font-family:var(--serif);font-style:italic;font-size:16px;
  color:var(--seafoam);
}
.footer-row{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13.5px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
}
.footer-row p{margin:0}
.footer-links a{text-decoration:none;color:rgba(255,255,255,.72)}
.footer-links a:hover{color:var(--seafoam)}