@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
  --teal: #476C77;
  --tan: #EFB071;
  --navy: #313D41;
  --white: #FFFFFF;
  --max: 1100px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: background-color 0.2s ease;
}

/* ---- Page themes ---- */
body.theme-teal { background: var(--teal); color: var(--white); }
body.theme-teal h1, body.theme-teal .accent, body.theme-teal a { color: var(--tan); }
body.theme-teal .btn { background: var(--tan); color: var(--navy); }
body.theme-teal nav a { color: var(--white); }
body.theme-teal nav a.active { color: var(--tan); }
body.theme-teal .site-title { color: var(--white); }

body.theme-tan { background: var(--tan); color: var(--navy); }
body.theme-tan h1, body.theme-tan .accent, body.theme-tan a { color: var(--navy); text-decoration-color: var(--navy); }
body.theme-tan .btn { background: var(--navy); color: var(--white); }
body.theme-tan nav a { color: var(--navy); }
body.theme-tan nav a.active { color: var(--white); }
body.theme-tan .site-title { color: var(--navy); }

body.theme-navy { background: var(--navy); color: var(--white); }
body.theme-navy h1, body.theme-navy .accent, body.theme-navy a { color: var(--tan); }
body.theme-navy .btn { background: var(--tan); color: var(--navy); }
body.theme-navy nav a { color: var(--tan); }
body.theme-navy nav a.active { color: var(--white); }
body.theme-navy .site-title { color: var(--tan); }

/* ---- Nav ---- */
nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.75rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-title {
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
}

nav .links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

nav a {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 400;
}

nav a.active {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.btn {
  display: inline-block;
  border-radius: 300px;
  padding: 0.9rem 1.6rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none !important;
  white-space: nowrap;
}

/* ---- Main layout ---- */
main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1rem 1.5rem 5rem;
}

.hero {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.hero-photo {
  flex: 0 0 auto;
}

.hero-photo img {
  display: block;
  border-radius: 50%;
  width: 220px;
  height: 220px;
  object-fit: cover;
}

.hero-body {
  flex: 1 1 380px;
}

.hero-body.wide {
  flex: 1 1 460px;
}

.hero-photo.large img {
  border-radius: 12px;
  width: 100%;
  max-width: 460px;
  height: auto;
}

h1 {
  font-size: 2.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 1.5rem;
}

p {
  font-size: 1.08rem;
  font-weight: 300;
  line-height: 1.7;
  margin: 0 0 1.25rem;
}

a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-block {
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  padding: 1.75rem;
  margin-top: 2rem;
  max-width: 500px;
}

iframe.form-embed {
  width: 100%;
  border: none;
  min-height: 900px;
  border-radius: 8px;
}

footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
  font-size: 0.85rem;
  opacity: 0.75;
}

@media (max-width: 640px) {
  h1 { font-size: 1.8rem; }
  .hero { gap: 2rem; }
  .hero-photo img { width: 160px; height: 160px; }
}