/* =====================================================
   BIRTHKEEPER SUMMIT 2027
   Mood: spacious, calm, elegant, lineage-based.
   Color is semantic: Seafoam/Teal carry the single action.
   ===================================================== */

:root {
  --teal:        #1E5A5A;   /* Deep Ocean Teal — headings, dark band, primary action */
  --teal-dk:     #16403F;   /* deeper teal — button hover text / pressed */
  --bone:        #F8F6F3;   /* Bone White — main background */
  --sand:        #E9E4DC;   /* Soft Sand — alternating band */
  --slate:       #5A6670;   /* Slate Blue-Gray — spec body color */
  --slate-ink:   #444F58;   /* slightly darker for AA body text on bone & sand */
  --seafoam:     #6FB7A6;   /* CTA Seafoam — action accent */
  --seafoam-dk:  #4F9C8A;   /* seafoam hover */
  --coral:       #E58B73;   /* Muted Coral — error / subtle accent only */
  --bone-soft:   rgba(248,246,243,0.78);
  --line:        rgba(30,90,90,0.14);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Mulish', system-ui, -apple-system, sans-serif;
  background: var(--bone);
  color: var(--slate-ink);
  line-height: 1.75;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--teal);
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 1.06;
}

/* ─── Accessibility helpers ─── */
.skip-link {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  background: var(--teal);
  color: var(--bone);
  padding: 10px 22px;
  border-radius: 2px;
  font-size: 14px;
  z-index: 100;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; outline: 3px solid var(--seafoam); }

:focus-visible { outline: 3px solid var(--seafoam); outline-offset: 2px; }

/* ─── Buttons (semantic: action only) ─── */
.btn {
  display: inline-block;
  font-family: 'Mulish', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 17px 38px;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  touch-action: manipulation;
}
/* Deep teal bg + bone text = strong AA contrast (~7:1) */
.btn-primary { background: var(--teal); color: var(--bone); border-color: var(--teal); }
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--seafoam); color: var(--teal-dk); border-color: var(--seafoam); }

/* On the dark teal band: seafoam fill reads with deep-teal text */
.btn-seafoam { background: var(--seafoam); color: var(--teal-dk); border-color: var(--seafoam); }
.btn-seafoam:hover,
.btn-seafoam:focus-visible { background: transparent; color: var(--bone); border-color: var(--seafoam); }

.btn-full { display: block; width: 100%; padding: 18px 38px; }

/* ─── Shared band scaffolding ─── */
.band-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--seafoam-dk);
  margin-bottom: 22px;
}
.eyebrow-light { color: var(--seafoam); }
.lead { font-size: 19px; font-weight: 300; line-height: 1.85; margin-bottom: 22px; }
.lead-light { color: rgba(248,246,243,0.92); }

/* ─── Header ─── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(24px, 5vw, 64px);
  background: var(--bone);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand-emblem {
  width: 44px; height: 44px;
  display: block;
}
.brand-word {
  display: flex;
  flex-direction: column;
  font-family: 'Cormorant Garamond', serif;
  font-size: 23px;
  font-weight: 600;
  color: var(--teal);
  line-height: 1;
  letter-spacing: 0.3px;
}
.brand-word-sub {
  font-family: 'Mulish', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 3px;
}
.header-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--seafoam);
}
.header-link:hover { color: var(--seafoam-dk); }

/* ─── Hero (emblem-led, centered) ─── */
.hero {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(52px, 8vw, 100px) clamp(24px, 5vw, 48px) clamp(44px, 6vw, 72px);
  text-align: center;
}
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero-emblem {
  width: clamp(168px, 27vw, 248px);
  height: auto;
  margin-bottom: 28px;
}
.kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--seafoam-dk);
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(42px, 6vw, 76px);
  margin-bottom: 18px;
}
.hero-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--slate);
  line-height: 1.35;
  margin-bottom: 26px;
}
.rule { width: 52px; height: 2px; background: var(--seafoam); margin: 0 auto 26px; }
.hero-body {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--slate-ink);
  margin: 0 auto 16px;
  max-width: 60ch;
}
.lead-intro {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--teal);
  font-weight: 400;
}
.hero-cta { margin-top: 26px; }

/* ─── Join (form) ─── */
.join {
  padding: 0 clamp(24px, 5vw, 48px) clamp(72px, 9vw, 116px);
}

/* ─── Form card ─── */
.form-card {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(32px, 4vw, 46px);
  box-shadow: 0 18px 50px -28px rgba(30,90,90,0.35);
  text-align: left;
}
.form-title {
  font-size: clamp(28px, 3vw, 36px);
  margin-bottom: 8px;
}
.form-intro {
  font-size: 15px;
  font-weight: 300;
  color: var(--slate);
  margin-bottom: 28px;
  line-height: 1.6;
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--slate-ink);
  margin-bottom: 7px;
}
.field .optional { font-weight: 300; color: var(--slate); text-transform: none; letter-spacing: 0; }
.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--teal-dk);
  background: var(--bone);
  border: 1px solid rgba(30,90,90,0.20);
  border-radius: 3px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
.field input:focus,
.field textarea:focus {
  border-color: var(--seafoam);
  box-shadow: 0 0 0 3px rgba(111,183,166,0.22);
}
.form-reassure {
  font-size: 13px;
  font-weight: 300;
  color: var(--slate);
  text-align: center;
  margin-top: 14px;
}
.form-error {
  font-size: 14px;
  color: #b4502f;          /* darkened coral for AA text contrast */
  margin-top: 12px;
  text-align: center;
}
.form-success { text-align: center; padding: 18px 0; }
.form-success-head {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 30px;
  color: var(--teal);
  margin-bottom: 10px;
}
.form-success-sub { font-size: 15px; font-weight: 300; color: var(--slate); line-height: 1.6; }

/* ─── Lineage band ─── */
.lineage {
  background: var(--sand);
  padding: clamp(72px, 10vw, 124px) 0;
  text-align: center;
}
.lineage h2 { font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 30px; }
.pull-quote { margin: 44px auto 0; max-width: 600px; }
.pull-quote p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.9vw, 30px);
  line-height: 1.5;
  color: var(--teal);
  position: relative;
  padding-top: 30px;
}
.pull-quote p::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 2px;
  background: var(--seafoam);
}

/* ─── Why Now band (ocean backdrop, used softly under a teal wash) ─── */
.whynow {
  position: relative;
  background-color: var(--teal);
  background-image: url('assets/ocean.jpg');
  background-size: cover;
  background-position: center 38%;
  padding: clamp(72px, 10vw, 124px) 0;
  text-align: center;
  overflow: hidden;
}
.whynow-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22,64,63,0.92) 0%, rgba(30,90,90,0.86) 100%);
}
.whynow .band-inner { position: relative; z-index: 1; }
.whynow h2 { color: var(--bone); font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 30px; }
.whynow .btn-seafoam { margin-top: 16px; }

/* ─── Footer ─── */
.site-footer {
  background: var(--teal-dk);
  padding: clamp(48px, 7vw, 76px) 24px;
  text-align: center;
}
.footer-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 27px;
  font-weight: 600;
  color: var(--bone);
  margin-bottom: 8px;
}
.footer-tagline {
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
  color: rgba(248,246,243,0.78);
  margin-bottom: 18px;
}
.footer-domain {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--seafoam);
  text-decoration: none;
}
.footer-domain:hover { color: var(--bone); }

/* ─── Reveal animation (subtle fade-in only) ─── */
/* Hidden state is gated behind .js so content is always visible without/before JS. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ─── Responsive ─── */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .site-header { padding: 16px 20px; }
  .header-link { display: none; }            /* one path on small screens — scroll to form */
  .brand-emblem { width: 38px; height: 38px; }
  .brand-word { font-size: 20px; }
  .hero { padding: 44px 22px 36px; }
  .hero h1 { font-size: clamp(38px, 11vw, 56px); }
  .form-card { padding: 28px 22px; }
  .lineage, .whynow { padding: 64px 0; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}