:root{
  --mx:1100px;
  --muted:#6b7280;
  --text:#111827;
  --lead:#374151;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

/* Header restored to clean inline look */
header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(6px);
  border-bottom:1px solid #eee;
}
.row{
  max-width:var(--mx);
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{
  font-family:"Playfair Display",serif;
  font-weight:700;
  font-size:22px;
  color:#0f172a;
  text-decoration:none;
}
nav a{
  font-size:15px;
  margin-left:20px;
  opacity:.9;
  color:inherit;
  text-decoration:none;
}
nav a:hover{opacity:1}

/* HERO (full viewport with video) */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  color: #fff;
  overflow: hidden;
}

/* Background video fills hero */
.hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -2;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* subtle dark overlay for readability */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,10,15,0.35), rgba(6,10,15,0.35));
  z-index: -1;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding: 20px;
}

.muted{color:var(--muted); text-transform:uppercase; letter-spacing:.18em; font-size:12px}
.site-title{
  font-family:"Playfair Display",serif;
  font-weight:700;
  font-size:clamp(42px,7vw,70px);
  margin:14px 0;
  line-height:1.05;
  text-shadow:0 6px 24px rgba(0,0,0,0.45);
}
.lead{color: #f1f5f9; font-size:18px; margin-bottom:8px; text-shadow:0 3px 12px rgba(0,0,0,0.32)}
.subhead{font-size:16px; color:#e6eef7; font-weight:500}

/* Sections */
.section{padding:80px 16px}
.section.alt{background:#fafafa; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0}
.container{max-width:var(--mx); margin:0 auto}
.fade-group { max-width:900px; margin:0 auto; text-align:left }

/* Typography */
h2{font-family:"Playfair Display",serif; font-size:clamp(22px,3vw,32px); color:#0f172a; margin-bottom:12px}
p{color:var(--lead); font-size:16px; line-height:1.6; margin-bottom:12px}

/* Buttons */
.btn{
  border:1px solid #e5e5e5;
  background:#fff;
  border-radius:12px;
  padding:10px 16px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.btn:hover{ transform: translateY(-2px); box-shadow:0 10px 30px rgba(2,6,23,0.06) }

/* ===== Contact section styling ===== */
/* ===== Contact section (black background, modern inputs) ===== */
#join {
  text-align: center;
  background: #000; /* pure black */
  color: #f1f5f9;
  padding: 80px 16px;
}

#join h2 {
  margin-bottom: 24px;
  color: #f1f5f9;
}

#join form {
  display: grid;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto; /* center horizontally */
  text-align: left; /* labels & inputs align properly */
}

#join label {
  color: #f1f5f9;
}

#join input,
#join textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #444; /* subtle grey border on black */
  border-radius: 10px;
  background: #111;       /* slightly lighter than black */
  color: #f1f5f9;
  font-size: 15px;
}

#join input:focus,
#join textarea:focus {
  border-color: #06b6d4; /* teal accent on focus */
  box-shadow: 0 0 0 3px rgba(6,182,212,0.3);
  outline: none;
}

#join input::placeholder,
#join textarea::placeholder {
  color: #888; /* softer grey for placeholders */
}

/* Button inside contact form */
#join .btn {
  background: #ffffff; /* teal/cyan button */
  color: #000000;
  border: none;
  font-weight: 600;
  border-radius: 10px;
  transition: background 0.3s ease;
}

#join .btn:hover {
  background: #0891b2;
}


/* Footer */
.footer{border-top:1px solid #eee; padding:28px 0; color:var(--muted); font-size:14px; text-align:center}

/* Diagonal animation (bottom-left -> top-right) */
@keyframes slideDiagonalIn {
  from { opacity:0; transform: translate(-80px,80px) scale(0.98); }
  to   { opacity:1; transform: translate(0,0) scale(1); }
}

.diagonal-in {
  opacity: 0;
  transform: translate(-80px, 80px);
  transition: opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;
}

.diagonal-in.appear {
  opacity: 1;
  transform: translate(0,0);
}

/* Responsive tweaks */
@media (max-width:860px){
  .site-title{ font-size: clamp(30px,9vw,44px) }
  .row{ padding:12px 12px }
  nav a{ margin-left:12px; font-size:14px }
}

/*keep all links black*/
a {
  color: #111;  /* black */
  text-decoration: none;
}

a:hover {
  text-decoration: underline; /* optional */
}