/* ===========================================================
   DAILY DIP 4 DAVE — SITE STYLES
   Deep Navy #030A13 / Ink Blue #0B1A2A / DD4D Pink #BF2A82
   Defiance Orange #F6B669 (sparing) / Salt #F7F3EB / Tidal Blue #7F9AB3
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap');

:root{
  --navy: #030A13;
  --ink: #0B1A2A;
  --pink: #BF2A82;
  --orange: #F6B669;
  --salt: #F7F3EB;
  --tidal: #7F9AB3;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', -apple-system, sans-serif;

  --max: 1180px;
  --edge: clamp(24px, 5vw, 72px);
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background: var(--salt);
  color: var(--navy);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--edge); padding-right:var(--edge);}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight:600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pink);
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow .rule{width:34px; height:2px; background:var(--pink); display:inline-block;}
.eyebrow.on-dark{color: var(--orange);}
.eyebrow.on-dark .rule{background:var(--orange);}
.eyebrow.tidal{color:var(--tidal);}
.eyebrow.tidal .rule{background:var(--tidal);}

/* ---------- The mark (twin droplet / quotation mark) ---------- */
.mark{display:inline-block; line-height:0;}
.mark svg{display:block;}

/* ---------- Headings ---------- */
h1,h2,h3{
  font-family: var(--serif);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-0.01em;
}
h1{font-size: clamp(2.6rem, 6vw, 4.6rem);}
h2{font-size: clamp(2rem, 4.2vw, 3rem);}
h3{font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight:600;}

em, .accent-word{
  font-style: italic;
  color: var(--orange);
}
.on-dark em, .on-dark .accent-word{color: var(--orange);}

p{max-width: 62ch;}
.lede{font-size: 1.15rem; color: var(--ink); opacity:0.85;}
.on-dark .lede{color: var(--salt); opacity:0.8;}
.on-ink .lede{color: var(--salt); opacity:0.85;}
.hero .lede, .page-header .lede{color: var(--salt); opacity:0.85;}

/* ---------- Nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background: rgba(3,10,19,0.97);
  border-bottom: 1px solid rgba(247,243,235,0.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px var(--edge);
  max-width: var(--max); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; order:2;}
.brand .wordmark{
  font-family: var(--serif);
  font-size:1.32rem;
  color: var(--salt);
  letter-spacing:-0.01em;
}
.brand .wordmark .four{color:var(--orange); font-style:italic; margin:0 0.16em;}
.wordmark .four{margin:0 0.16em;}
.brand .wordmark .dot{color:var(--pink);}

.nav-links{
  position:absolute; top:100%; left:0; right:0;
  width:100%;
  background:var(--navy);
  display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start;
  padding: 0 var(--edge);
  max-height:0; overflow:hidden;
  z-index:150;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.nav-links.open{
  max-height:80vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding: 26px var(--edge) 34px;
  gap:22px;
}
.nav-links a{
  font-size:1rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--tidal);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-links a:hover, .nav-links a.active{color:var(--salt); border-color:var(--pink);}
.nav-cta{
  font-size:0.74rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--navy) !important; background: var(--pink);
  padding: 10px 20px; border-radius:2px;
  border-bottom:none !important;
}
.nav-cta:hover{background: var(--orange); color:var(--navy) !important;}

.nav-toggle{display:block; position:relative; order:1; z-index:160; background:none; border:0; color:var(--salt); font-size:1.6rem; line-height:1;}

@media (max-width: 880px){
  .nav-cta{margin-top:10px;}
  body.nav-open{overflow:hidden;}
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 30px;
  font-size:0.78rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  border-radius:2px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary{background:var(--pink); color:var(--salt);}
.btn-primary:hover{transform: translateY(-2px); box-shadow: 0 10px 24px rgba(191,42,130,0.28);}
.btn-outline{border:1px solid var(--tidal); color:var(--salt);}
.btn-outline:hover{border-color:var(--salt); transform:translateY(-2px);}
.btn-outline.on-light{color:var(--navy); border-color:var(--navy);}
.btn-donate{background:var(--orange); color:var(--navy);}
.btn-donate:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(246,182,105,0.35);}

.ripple{position:absolute; border-radius:50%; background:rgba(247,243,235,0.45); transform:scale(0); animation:ripple 700ms ease-out; pointer-events:none;}
@keyframes ripple{to{transform:scale(3); opacity:0;}}

/* ---------- Sections ---------- */
section{padding: 108px 0;}
.section-tight{padding: 72px 0;}
.on-dark{background:var(--navy); color:var(--salt);}
.on-ink{background:var(--ink); color:var(--salt);}
.on-light{background:var(--salt); color:var(--navy);}

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;
  display:flex; align-items:center;
  background: var(--navy);
  background-size: cover;
  background-position: center;
  color: var(--salt);
  position:relative;
  padding-top: 96px;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(191,42,130,0.18), transparent 55%),
    radial-gradient(ellipse at 85% 85%, rgba(127,154,179,0.16), transparent 55%),
    linear-gradient(180deg, rgba(3,10,19,0.55), rgba(3,10,19,0.88) 70%, rgba(3,10,19,0.96));
  pointer-events:none;
}
.hero-inner{position:relative; z-index:1; max-width:820px;}
.hero .mark{margin-bottom:28px;}
.page-header .mark{display:block; margin-bottom:20px;}
.hero h1{margin: 22px 0 26px;}
.hero .lede{font-size:1.2rem; margin-bottom:38px;}
.hero-cta-row{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}

.stat-row{display:flex; gap:56px; flex-wrap:wrap; border-top:1px solid rgba(247,243,235,0.14); padding-top:32px;}
.stat b{display:block; font-family:var(--serif); font-size:2.1rem; color:var(--orange); font-weight:500;}
.stat span{font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--tidal);}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ---------- Pull quote ---------- */
.pull-quote{
  display:flex; gap:22px; align-items:flex-start;
  max-width:760px;
}
.pull-quote .mark{flex-shrink:0; margin-top:6px;}
.pull-quote blockquote{
  font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.35; font-weight:500;
}
.pull-quote cite{
  display:block; margin-top:18px; font-style:normal;
  font-family:var(--sans); font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--tidal);
}

/* ---------- Two column ---------- */
.split{display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center;}
@media (max-width:880px){.split{grid-template-columns:1fr; gap:40px;}}
.split-reverse{direction:rtl;}
.split-reverse > *{direction:ltr;}

/* ---------- Cards ---------- */
.card{
  background: var(--ink);
  border: 1px solid rgba(247,243,235,0.08);
  border-radius: 3px;
  padding: 34px;
}
.card-light{
  background: #fff;
  border: 1px solid rgba(3,10,19,0.08);
}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
@media (max-width:940px){.grid-3{grid-template-columns:1fr 1fr;} .grid-4{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.grid-3{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr;}}

/* ---------- Divider ---------- */
.divider{
  display:flex; align-items:center; gap:16px; margin: 0 0 28px;
  color:var(--tidal); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
}
.divider .rule{flex:1; height:1px; background:rgba(127,154,179,0.3);}

/* ---------- Footer ---------- */
footer{background:var(--navy); color:var(--tidal); padding: 60px 0 32px;}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:36px; padding-bottom:40px; border-bottom:1px solid rgba(247,243,235,0.1);}
.footer-links{display:flex; gap:44px; flex-wrap:wrap;}
.footer-col h4{font-family:var(--sans); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--salt); margin-bottom:14px;}
.footer-col a, .footer-col p{display:block; font-size:0.88rem; color:var(--tidal); margin-bottom:8px;}
.footer-col a:hover{color:var(--salt);}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; font-size:0.76rem;}
.footer-bottom .charity-line{white-space:nowrap;}
.hashtag{color:var(--pink); font-weight:600;}

/* ---------- Diagram placeholder ---------- */
.diagram-placeholder{
  border:1.5px dashed rgba(3,10,19,0.25); border-radius:3px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:48px 24px; min-height:280px; text-align:center; color:var(--tidal);
  background:rgba(3,10,19,0.02);
}
.diagram-placeholder .icon{
  width:48px; height:48px; border-radius:50%; border:1.5px dashed rgba(3,10,19,0.25);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}

/* ---------- FAQ tabs + accordion ---------- */
.faq-tabs{
  display:flex; gap:8px; margin-bottom:40px; flex-wrap:wrap;
  border-bottom:1px solid rgba(3,10,19,0.1);
}
.faq-tab{
  padding:14px 22px; font-size:0.8rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--tidal); border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color 0.2s ease, border-color 0.2s ease; background:none; border-top:none; border-left:none; border-right:none;
}
.faq-tab:hover{color:var(--navy);}
.faq-tab.active{color:var(--pink); border-bottom-color:var(--pink);}
.faq-panel{display:none;}
.faq-panel.active{display:block;}
.faq-item{border-bottom:1px solid rgba(3,10,19,0.1);}
.faq-question{
  width:100%; text-align:left; padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--serif); font-size:1.25rem; font-weight:600; color:var(--pink); background:none; border:none;
}
.faq-question .chev{flex-shrink:0; transition:transform 0.25s ease; color:var(--tidal); font-size:1.1rem;}
.faq-item.open .faq-question .chev{transform:rotate(180deg); color:var(--pink);}
.faq-answer{max-height:0; overflow:hidden; transition:max-height 0.3s ease;}
.faq-answer-inner{padding-bottom:24px; max-width:70ch;}
.faq-answer-inner p{margin-top:14px; color:var(--navy); opacity:0.85;}
.faq-answer-inner p:first-child{margin-top:0;}
.faq-answer-inner ul{margin-top:14px; display:flex; flex-direction:column; gap:8px;}

/* ---------- Milestone timeline ---------- */
.timeline{position:relative; padding-left:32px;}
.timeline::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:rgba(247,243,235,0.2);}
.timeline-stop{position:relative; padding-bottom:36px;}
.timeline-stop:last-child{padding-bottom:0;}
.timeline-stop::before{
  content:""; position:absolute; left:-32px; top:4px; width:11px; height:11px; border-radius:50%;
  background:var(--pink); box-shadow:0 0 0 4px rgba(191,42,130,0.15);
}
.timeline-stop .date{font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--orange); font-weight:600;}
.timeline-stop h3{margin-top:6px; font-size:1.15rem;}
.timeline-stop p{margin-top:6px; color:var(--tidal); max-width:52ch; font-size:0.94rem;}

.timeline-scroll{
  max-height:640px; overflow-y:auto; padding-right:18px;
  scrollbar-width:thin; scrollbar-color:var(--pink) rgba(247,243,235,0.1);
}
.timeline-scroll::-webkit-scrollbar{width:6px;}
.timeline-scroll::-webkit-scrollbar-track{background:rgba(247,243,235,0.08); border-radius:3px;}
.timeline-scroll::-webkit-scrollbar-thumb{background:var(--pink); border-radius:3px;}

/* ---------- Simple photo gallery grid ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.gallery-grid .g-photo{
  aspect-ratio:4/5; border-radius:3px; background-size:cover; background-position:center;
  box-shadow:0 10px 26px rgba(3,10,19,0.15);
}
@media (max-width:800px){.gallery-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.gallery-grid{grid-template-columns:1fr;}}

/* ---------- Hanging-indent list (dash sits left, text aligns with headings) ---------- */
.hang-list{list-style:none;}
.hang-list li{padding-left:14px; position:relative;}
.hang-list li::before{content:"-"; position:absolute; left:0;}

/* ---------- Page header (interior pages) ---------- */
.page-header{
  background:var(--navy); color:var(--salt);
  background-size:cover; background-position:center;
  padding: 168px 0 88px;
  position:relative;
}
.page-header::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,10,19,0.05) 0%, rgba(3,10,19,0.12) 35%, rgba(3,10,19,0.5) 65%, rgba(3,10,19,0.78) 100%);
}
.page-header .wrap{position:relative; z-index:1;}
.page-header.dark-text::before{background:linear-gradient(180deg, rgba(3,10,19,0.05) 0%, rgba(3,10,19,0.18) 25%, rgba(3,10,19,0.68) 55%, rgba(3,10,19,0.9) 100%);}
.page-header.muted::before{background:linear-gradient(180deg, rgba(3,10,19,0.45) 0%, rgba(3,10,19,0.55) 40%, rgba(3,10,19,0.8) 70%, rgba(3,10,19,0.92) 100%);}
.page-header h1{margin-top:20px;}
.page-header .lede{margin-top:20px; max-width:640px;}

/* ---------- Photo band ---------- */
.photo-band{
  position:relative; height:440px; overflow:hidden;
  background-size:cover; background-position:center;
}
.photo-band::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(3,10,19,0.05) 30%, rgba(3,10,19,0.92) 100%);
}
.photo-band .caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 32px var(--edge);
}
.photo-band .caption p{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem,2.6vw,1.5rem);
  color:var(--salt); max-width:640px; margin:0;
}
.photo-credit{
  position:absolute; z-index:2; right:16px; bottom:12px;
  font-size:0.62rem; letter-spacing:0.05em; color:rgba(247,243,235,0.55);
}
@media (max-width:700px){ .photo-band{height:320px;} }

/* ---------- Inline content photos (in page body, not full-bleed) ---------- */
.content-photo{
  width:100%; border-radius:3px; overflow:hidden;
  aspect-ratio: 4 / 3; background-size:cover; background-position:center;
  box-shadow: 0 12px 30px rgba(3,10,19,0.18);
}
.content-photo.tall{aspect-ratio: 3 / 4;}
.photo-pair{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:700px){ .photo-pair{grid-template-columns:1fr;} }
.photo-pair-caption{margin-top:10px; font-size:0.78rem; color:var(--tidal); text-align:center;}

/* ---------- Full uncropped photo (shows the whole shot, no forced crop) ---------- */
.photo-full{
  max-width:520px; margin:0 auto;
  border-radius:3px; overflow:hidden;
  box-shadow: 0 12px 30px rgba(3,10,19,0.18);
}
.photo-full img{width:100%; height:auto; display:block;}
.photo-full-caption{
  text-align:center; margin-top:14px;
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
}

/* ---------- Utility ---------- */
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;}
.mt-32{margin-top:32px;} .mt-48{margin-top:48px;} .mt-64{margin-top:64px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}
.tidal-text{color:var(--tidal);}
.small-caps{font-size:0.74rem; letter-spacing:0.14em; text-transform:uppercase;}

/* ---------- Sign-up form ---------- */
.signup-form{max-width:640px;}
.signup-form .field{margin-bottom:22px;}
.signup-form label{display:block; font-size:0.74rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--tidal); margin-bottom:8px;}
.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form textarea{
  width:100%; padding:13px 14px; font-family:var(--sans); font-size:0.95rem;
  background:rgba(247,243,235,0.06); border:1px solid rgba(247,243,235,0.18); border-radius:2px;
  color:var(--salt);
}
.on-light .signup-form input[type="text"],
.on-light .signup-form input[type="email"],
.on-light .signup-form textarea{
  background:var(--salt); border:1px solid rgba(3,10,19,0.18); color:var(--navy);
}
.signup-form textarea{resize:vertical; min-height:80px;}
.signup-form .check-grid{display:flex; flex-wrap:wrap; gap:14px 26px;}
.signup-form .check-item{display:flex; align-items:center; gap:8px; font-size:0.92rem;}
.signup-form .check-item input{accent-color:var(--pink); width:16px; height:16px;}
.signup-form .radio-row{display:flex; gap:26px;}
.signup-form .radio-item{display:flex; align-items:center; gap:8px; font-size:0.92rem;}
.signup-form .radio-item input{accent-color:var(--pink); width:16px; height:16px;}
.signup-form .hint{font-size:0.82rem; color:var(--tidal); margin-top:6px;}
.signup-form button[type="submit"]{border:0;}
.form-success{display:none;}
.form-success.is-visible{display:block;}

/* ---------- Signature sign-off ---------- */
.signoff{text-align:right;}
.signoff .signature{
  font-family:'Caveat', cursive; font-weight:700;
  font-size:3rem; color:var(--navy);
  display:inline-block; transform:rotate(-6deg);
  line-height:1;
}
.signoff .signature-tag{
  margin-top:2px;
  font-family:var(--sans); font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--pink); font-size:0.82rem;
}

/* ---------- Equal-height offer card photos ---------- */
.card-photo{width:100%; height:230px; object-fit:cover; border-radius:3px; margin-bottom:20px; display:block;}
.offer-meta{font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--orange); margin-top:14px;}
.offer-list{margin-top:16px; padding-left:18px; font-size:0.92rem; line-height:1.7;}
.offer-list li{margin-bottom:6px;}