/* ── RESET & ROOT ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:      #1B2A4A;
  --deep:      #0F172A;
  --body:      #374151;
  --muted:     #6B7280;
  --steel:     #9CA3AF;
  --teal:      #0D9488;
  --teal-dk:   #0F766E;
  --green:     #059669;
  --border:    #E5E7EB;
  --off:       #F9FAFB;
  --white:     #FFFFFF;
  --amber:     #B45309;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
.serif { font-family: 'Cormorant Garamond', serif; }

h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; line-height: 1.1; color: var(--deep); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--teal);
}
.eyebrow::before { content: ''; display: block; width: 2rem; height: 1px; background: var(--teal); }

/* ── NAV ────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 68px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 5vw;
  background: rgba(15,23,42,.96); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif; font-size: 1.2rem;
  font-weight: 500; color: var(--white); letter-spacing: .02em;
}
.nav-logo span { color: var(--teal); }
.nav-links { display: flex; gap: 2.4rem; list-style: none; }
.nav-links a {
  font-size: .76rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--steel); transition: color .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-cta {
  font-size: .76rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--deep); background: var(--teal);
  padding: .55rem 1.4rem; border-radius: 3px; transition: background .2s;
}
.nav-cta:hover { background: var(--teal-dk); }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--deep); background: var(--teal);
  padding: .9rem 2rem; border-radius: 3px; transition: background .2s, transform .15s;
}
.btn-primary:hover { background: var(--teal-dk); transform: translateY(-1px); }

.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--white);
  border: 1px solid rgba(255,255,255,.25); padding: .9rem 2rem;
  border-radius: 3px; transition: border-color .2s, background .2s;
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,.06); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 500; letter-spacing: .06em;
  color: var(--teal); transition: gap .2s;
}
.btn-ghost::after { content: '→'; }
.btn-ghost:hover { gap: .7rem; }

/* ── PAGE HERO (inner pages) ────────────────────────────────── */
.page-hero {
  padding: 140px 5vw 80px;
  background: var(--deep);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(13,148,136,.4), transparent);
}
.page-hero .glow {
  position: absolute; top: -20%; right: -10%; width: 50vw; height: 90vh;
  background: radial-gradient(ellipse, rgba(13,148,136,.1) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero h1 { font-size: clamp(2.8rem, 4.5vw, 4.5rem); color: var(--white); margin-bottom: .6rem; }
.page-hero p { font-size: 1.05rem; color: rgba(255,255,255,.55); max-width: 560px; line-height: 1.8; margin-top: 1rem; }

/* ── SECTIONS ───────────────────────────────────────────────── */
.section { padding: 6rem 5vw; }
.section-sm { padding: 4rem 5vw; }
.section-dark { background: var(--deep); }
.section-off { background: var(--off); }

.section-header { max-width: 680px; margin-bottom: 3.5rem; }
.section-header h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); margin-bottom: 1rem; }
.section-header p { font-size: 1rem; line-height: 1.85; color: var(--muted); }

/* ── FOOTER ─────────────────────────────────────────────────── */
footer {
  background: var(--deep); padding: 2.5rem 5vw;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  border-top: 1px solid rgba(255,255,255,.05);
}
.footer-brand { font-family: 'Cormorant Garamond', serif; font-size: 1rem; color: rgba(255,255,255,.4); }
.footer-brand span { color: var(--teal); }
.footer-links { display: flex; gap: 2rem; list-style: none; }
.footer-links a { font-size: .76rem; color: rgba(255,255,255,.3); letter-spacing: .05em; transition: color .2s; }
.footer-links a:hover { color: rgba(255,255,255,.7); }
.footer-copy { font-size: .72rem; color: rgba(255,255,255,.2); }

/* ── REVEAL ANIMATION ───────────────────────────────────────── */
.reveal { opacity: 1; transform: none; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ── FORM ───────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.2rem; }
.form-group label {
  display: block; font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel); margin-bottom: .45rem;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 4px;
  padding: .85rem 1rem; font-family: 'Inter', sans-serif;
  font-size: .9rem; color: var(--white); outline: none;
  transition: border-color .2s; -webkit-appearance: none;
}
.form-group select { cursor: pointer; }
.form-group select option { background: var(--deep); color: var(--white); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--teal); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,.2); }
.form-submit {
  width: 100%; background: var(--teal); color: var(--deep);
  border: none; border-radius: 4px; padding: 1rem;
  font-family: 'Inter', sans-serif; font-size: .8rem;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: background .2s, transform .15s; margin-top: .4rem;
}
.form-submit:hover { background: var(--teal-dk); transform: translateY(-1px); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .two-col { grid-template-columns: 1fr !important; }
  .three-col { grid-template-columns: 1fr !important; }
  .four-col { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .four-col { grid-template-columns: 1fr !important; }
}