/* ===================================================================
   HEART — Hutterian Emergency Aquatic Response Team
   Shared design system. Brand: diver-down-flag red / black / white.
   =================================================================== */
:root{
  --bg:#05080a;
  --ink:#f5f6f7;
  --muted:rgba(235,238,240,.62);
  --faint:rgba(235,238,240,.40);
  --line:rgba(255,255,255,.12);
  --red:#e01e24;          /* HEART brand — diver-down flag red */
  --red-bright:#f5262d;
  --red-deep:#b4141a;
  --red-soft:rgba(224,30,36,.14);
  --card:rgba(10,13,16,.46);
  --card-strong:rgba(8,11,14,.74);
  --max:1180px;
  --ease:cubic-bezier(.16,.84,.34,1);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:rgba(224,30,36,.34)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Fixed full-bleed background (video + depth fallback) ---------- */
.bg{position:fixed; inset:0; z-index:-2; overflow:hidden;
  background:
    radial-gradient(130% 90% at 50% -10%, #11312f 0%, #0a1f20 32%, #05100f 68%, #03080900 100%),
    linear-gradient(180deg,#07171a 0%, #050d0d 60%, #03070a 100%);}
.bg video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.6s var(--ease)}
.bg video.ready{opacity:1}
.caustics{position:absolute; inset:-20%; z-index:1; mix-blend-mode:screen; opacity:.4;
  background:radial-gradient(40% 30% at 32% 10%, rgba(255,255,255,.14), transparent 60%), radial-gradient(34% 26% at 70% 8%, rgba(224,120,120,.10), transparent 60%);
  filter:blur(10px); animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1)} to{transform:translate3d(3%,2%,0) scale(1.08)}}
.bg::after{content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(3,6,8,.74) 0%, rgba(3,6,8,.34) 16%, rgba(3,6,8,.5) 60%, rgba(3,6,8,.9) 100%), radial-gradient(120% 70% at 50% 30%, transparent 42%, rgba(3,6,8,.55) 100%)}
/* Interior pages sit over a steadier, darker wash so long text stays readable */
body.interior .bg::after{background:linear-gradient(180deg, rgba(3,6,8,.82) 0%, rgba(3,6,8,.7) 30%, rgba(3,6,8,.8) 100%)}

/* ---------- Navigation ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease); border-bottom:1px solid transparent}
header.scrolled, body.interior header{background:rgba(5,8,10,.66); backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid var(--line)}
.nav{max-width:var(--max); margin:0 auto; padding:15px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.26em; font-size:17px}
.brand .flag{width:30px; height:30px; flex:0 0 auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.navlinks{display:flex; align-items:center; gap:30px}
.navlinks a{font-size:14px; color:var(--muted); font-weight:400; transition:color .25s; position:relative}
.navlinks a:hover{color:var(--ink)}
.navlinks a.active{color:var(--ink)}
.navlinks a.active::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--red); border-radius:2px}
.nav-cta{font-size:14px; font-weight:600; color:#fff!important; background:var(--red); padding:9px 18px; border-radius:980px; transition:transform .25s var(--ease), background .25s}
.nav-cta:hover{transform:translateY(-1px); background:var(--red-bright)}
.nav-cta.active::after{display:none}
.burger{display:none; width:26px; height:18px; position:relative; background:none; border:0; cursor:pointer}
.burger span{position:absolute; left:0; right:0; height:1.6px; background:var(--ink); transition:.3s var(--ease)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:8px}.burger span:nth-child(3){top:16px}

/* ---------- Primitives ---------- */
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.narrow{max-width:820px}
section{position:relative; z-index:1}
.eyebrow{font-size:12.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--red); font-weight:700; margin-bottom:22px}
.btn{display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:600; padding:14px 28px; border-radius:980px; transition:transform .3s var(--ease), background .3s, box-shadow .3s; will-change:transform; cursor:pointer; border:0}
.btn-red{background:var(--red); color:#fff; box-shadow:0 10px 34px rgba(224,30,36,.28)}
.btn-red:hover{transform:translateY(-2px); background:var(--red-bright); box-shadow:0 16px 48px rgba(224,30,36,.4)}
.btn-ghost{color:var(--ink); border:1px solid rgba(255,255,255,.28); background:transparent}
.btn-ghost:hover{transform:translateY(-2px); border-color:#fff; background:rgba(255,255,255,.06)}
.btn-light{background:#fff; color:#111}
.btn-light:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(255,255,255,.18)}
.btn svg{width:15px;height:15px}
.band{padding:clamp(80px,13vh,140px) 0}
.band.tight{padding:clamp(56px,8vh,90px) 0}

/* ---------- Home hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:120px 24px 90px}
.hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(62% 52% at 50% 48%, rgba(3,6,8,.6) 0%, rgba(3,6,8,0) 72%)}
.hero > *{position:relative; z-index:1}
.hero-logo{position:relative; width:clamp(230px,38vw,430px); margin:0 auto 26px; opacity:0}
.hero-logo::before{content:""; position:absolute; inset:-14% -10%; z-index:-1; background:radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.12), rgba(255,255,255,0) 70%); filter:blur(8px)}
.hero-logo img{width:100%; filter:drop-shadow(0 10px 36px rgba(0,0,0,.55))}
.hero .sub{margin-top:6px; font-size:clamp(1.05rem,2.5vw,1.5rem); font-weight:300; color:var(--ink); max-width:640px; opacity:0; text-shadow:0 2px 18px rgba(0,0,0,.6)}
.hero .tag{margin-top:14px; font-size:12.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--faint); opacity:0}
.hero .cta-row{margin-top:40px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; opacity:0}
.scrollcue{position:absolute; bottom:28px; left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--faint); display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0; z-index:1}
.scrollcue .line{width:1px; height:40px; background:linear-gradient(var(--red),transparent); animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* ---------- Interior page hero ---------- */
.page-hero{position:relative; padding:clamp(150px,22vh,230px) 0 clamp(50px,7vh,80px); text-align:center}
.page-hero .flagmark{width:46px; height:46px; margin:0 auto 24px}
.page-hero h1{font-size:clamp(2.4rem,6.5vw,4.6rem); font-weight:300; letter-spacing:-.01em; line-height:1.02}
.page-hero h1 em{font-style:normal; color:var(--red)}
.page-hero p{margin:22px auto 0; max-width:620px; font-size:clamp(1.05rem,2vw,1.28rem); font-weight:300; color:var(--muted)}

/* ---------- Generic headings/prose ---------- */
.lead{max-width:760px}
.lead h2{font-size:clamp(2rem,5vw,3.4rem); font-weight:300; letter-spacing:-.01em; line-height:1.1}
.lead h2 em{font-style:normal; color:var(--red)}
.lead p{margin-top:24px; font-size:clamp(1.05rem,2vw,1.25rem); font-weight:300; color:var(--muted)}
.prose p{font-size:1.1rem; font-weight:300; color:var(--muted); margin-top:18px}
.center{text-align:center}
.center .lead{margin:0 auto}

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:60px; border-top:1px solid var(--line); padding-top:44px}
.stat .n{font-size:clamp(1.8rem,4vw,2.9rem); font-weight:300; color:var(--ink); letter-spacing:-.01em}
.stat .l{margin-top:8px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}

/* ---------- Capability / card grid ---------- */
.cap-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:54px}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card{position:relative; border:1px solid var(--line); border-radius:22px; padding:36px 32px; background:var(--card); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); overflow:hidden; transition:transform .5s var(--ease), border-color .5s, background .5s}
.card::after{content:""; position:absolute; top:0; right:0; width:62px; height:62px; background:linear-gradient(135deg, transparent 50%, var(--red) 50%); opacity:0; transition:opacity .5s var(--ease)}
.card:hover{transform:translateY(-4px); border-color:rgba(224,30,36,.45); background:var(--card-strong)}
.card:hover::after{opacity:.9}
.card .ico{width:38px; height:38px; margin-bottom:20px; color:var(--red)}
.card h3{font-size:1.35rem; font-weight:600; letter-spacing:-.01em}
.card p{margin-top:12px; font-size:15.5px; font-weight:300; color:var(--muted)}
.card .spec{margin-top:18px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); font-weight:600}
.card a.cardlink{color:var(--red); font-weight:600; font-size:14px; margin-top:18px; display:inline-flex; align-items:center; gap:7px}
.card a.cardlink svg{width:14px;height:14px}

/* ---------- Services feature rows ---------- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; padding:clamp(50px,8vh,80px) 0; border-top:1px solid var(--line)}
.feature:nth-child(even) .feature-media{order:2}
.feature-media{border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#0a0f12; aspect-ratio:16/10}
.feature-media img{width:100%; height:100%; object-fit:cover}
.feature .num{font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--red); font-weight:700}
.feature h3{margin-top:14px; font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:400; letter-spacing:-.01em}
.feature p{margin-top:18px; font-size:1.08rem; font-weight:300; color:var(--muted)}
.feature ul{margin-top:20px; list-style:none; display:flex; flex-direction:column; gap:10px}
.feature li{position:relative; padding-left:24px; font-size:15.5px; color:var(--muted); font-weight:300}
.feature li::before{content:""; position:absolute; left:0; top:9px; width:9px; height:9px; background:var(--red); border-radius:2px; transform:rotate(45deg)}

/* ---------- Process steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px}
.step{border:1px solid var(--line); border-radius:18px; padding:30px 26px; background:var(--card)}
.step .s{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--red); font-weight:700}
.step h4{margin-top:12px; font-size:1.2rem; font-weight:600}
.step p{margin-top:10px; font-size:15px; font-weight:300; color:var(--muted)}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.gallery-item{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:#0a0f12}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .5s}
.gallery-item:hover img{transform:scale(1.06); filter:saturate(1.1)}
.gallery-item .cap{position:absolute; left:0; right:0; bottom:0; padding:18px 16px 14px; font-size:13px; color:#fff; background:linear-gradient(transparent, rgba(3,6,8,.85)); opacity:0; transition:opacity .4s}
.gallery-item:hover .cap{opacity:1}
.gallery-item.tall{aspect-ratio:auto; grid-row:span 2}

/* ---------- Sponsors ---------- */
.sponsor-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:12px}
.sponsor-slot{display:flex; align-items:center; justify-content:center; text-align:center; border:1px dashed rgba(255,255,255,.18); border-radius:16px; min-height:120px; padding:20px; color:var(--faint); font-size:13.5px; background:rgba(255,255,255,.02); transition:border-color .4s, color .4s}
.sponsor-slot:hover{border-color:rgba(224,30,36,.5); color:var(--muted)}
.tier{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--red); font-weight:700}
.tier .amt-note{color:var(--faint); font-weight:500; margin-left:10px; letter-spacing:.12em}
.tier-row{margin-top:46px}
.tier-row:first-of-type{margin-top:8px}
.tier-row .tier{margin-bottom:16px}
.logo-wall{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.logo-wall.cols-3{grid-template-columns:repeat(3,1fr)}
.logo-wall.cols-2{grid-template-columns:repeat(2,1fr)}
.logo-chip{display:flex; align-items:center; justify-content:center; background:#fff; border-radius:14px; padding:22px 24px; min-height:116px; transition:transform .4s var(--ease), box-shadow .4s}
.logo-chip:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.4)}
.logo-chip img{max-height:62px; max-width:100%; width:auto; object-fit:contain}

/* ---------- Pills ---------- */
.pill-row{margin-top:36px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.pill{font-size:13.5px; color:var(--muted); border:1px solid var(--line); padding:9px 18px; border-radius:980px; background:rgba(255,255,255,.03)}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.emergency{margin-top:28px; border:1px solid rgba(224,30,36,.32); background:rgba(224,30,36,.07); border-radius:16px; padding:20px 22px; font-size:14.5px; color:var(--muted)}
.emergency b{color:var(--red-bright); font-weight:700}
.contact-list{display:flex; flex-direction:column; gap:4px; margin-top:28px}
.citem{padding:20px 0; border-bottom:1px solid var(--line); display:block; transition:padding-left .3s var(--ease)}
a.citem:hover{padding-left:8px}
.citem .k{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}
.citem .v{margin-top:7px; font-size:1.2rem; font-weight:300; color:var(--ink)}
.citem .v.sm{font-size:1.02rem}

/* ---------- Form ---------- */
.form{border:1px solid var(--line); border-radius:22px; padding:34px 32px; background:var(--card); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{margin-top:16px}
.field:first-child{margin-top:0}
.field label{display:block; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
.field input, .field textarea{width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px; padding:13px 15px; color:var(--ink); font-family:inherit; font-size:15px; transition:border-color .25s, background .25s}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--red); background:rgba(255,255,255,.06)}
.field textarea{resize:vertical; min-height:130px}
.form .btn{margin-top:22px; width:100%; justify-content:center}
.form .note{margin-top:14px; font-size:12.5px; color:var(--faint); text-align:center}

/* ---------- Donate ---------- */
.give-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:12px}
.give{border:1px solid var(--line); border-radius:20px; padding:34px 30px; background:var(--card); text-align:center; transition:transform .5s var(--ease), border-color .5s, background .5s}
.give:hover{transform:translateY(-4px); border-color:rgba(224,30,36,.45); background:var(--card-strong)}
.give .amt{font-size:2.4rem; font-weight:300; color:var(--ink)}
.give h4{margin-top:6px; font-size:1.1rem; font-weight:600}
.give p{margin-top:12px; font-size:14.5px; font-weight:300; color:var(--muted)}
.give .btn{margin-top:22px}

/* ---------- CTA band ---------- */
.cta-band{text-align:center}
.cta-band h2{font-size:clamp(2rem,5.4vw,3.6rem); font-weight:300; line-height:1.08}
.cta-band h2 em{font-style:normal; color:var(--red)}
.cta-band p{margin:22px auto 0; max-width:580px; font-size:1.15rem; font-weight:300; color:var(--muted)}
.cta-band .cta-row{margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ---------- Footer ---------- */
footer{position:relative; z-index:1; border-top:1px solid var(--line); padding:54px 0 48px; background:rgba(3,6,8,.62); backdrop-filter:blur(12px)}
.foot{display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap}
.foot .brand{opacity:.95}
.foot-cols{display:flex; gap:56px; flex-wrap:wrap}
.foot-col h5{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:14px}
.foot-col a, .foot-col span{display:block; font-size:14px; color:var(--muted); margin-bottom:9px; transition:color .25s}
.foot-col a:hover{color:var(--red)}
.socials{display:flex; gap:18px; margin-top:4px}
.socials a{font-size:13.5px; color:var(--muted); transition:color .25s}
.socials a:hover{color:var(--red)}
.foot-base{margin-top:40px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}
.foot-note{font-size:11.5px; color:rgba(235,238,240,.3); letter-spacing:.04em}
.credit{font-size:12px; color:var(--faint); letter-spacing:.04em}
.credit a{color:var(--muted); font-weight:600; border-bottom:1px solid rgba(224,30,36,.5); transition:color .25s, border-color .25s}
.credit a:hover{color:var(--red); border-color:var(--red)}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .navlinks{display:none}
  .burger{display:block}
  .grid,.grid.cols-3,.steps,.give-grid{grid-template-columns:1fr}
  .sponsor-grid{grid-template-columns:repeat(2,1fr)}
  .logo-wall,.logo-wall.cols-3{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-item.tall{grid-row:auto; aspect-ratio:4/3}
  .stats{grid-template-columns:1fr; gap:30px}
  .contact-grid{grid-template-columns:1fr; gap:36px}
  .feature{grid-template-columns:1fr; gap:28px}
  .feature:nth-child(even) .feature-media{order:0}
  .form .row{grid-template-columns:1fr}
  .mobile-open .navlinks{display:flex; position:fixed; inset:60px 0 auto 0; flex-direction:column; gap:0; background:rgba(5,8,10,.97); backdrop-filter:blur(18px); padding:12px 24px 24px; border-bottom:1px solid var(--line)}
  .mobile-open .navlinks a{padding:16px 0; border-bottom:1px solid var(--line); font-size:16px; width:100%}
  .mobile-open .navlinks a.active::after{display:none}
  .mobile-open .navlinks a.nav-cta{border:0; text-align:center; margin-top:10px}
  .mobile-open .burger span:nth-child(1){top:8px; transform:rotate(45deg)}
  .mobile-open .burger span:nth-child(2){opacity:0}
  .mobile-open .burger span:nth-child(3){top:8px; transform:rotate(-45deg)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .caustics,.scrollcue .line{animation:none}
  .bg video{transition:none}
  *{scroll-behavior:auto!important}
}